fix: update types and address todos (#18747)

Author: adamalston

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -4948,7 +4948,23 @@ Map {
               "args": Array [
                 Object {
                   "current": Object {
-                    "type": "any",
+                    "args": Array [
+                      Array [
+                        Object {
+                          "type": "any",
+                        },
+                        Object {
+                          "args": Array [
+                            Array [
+                              null,
+                            ],
+                          ],
+                          "type": "oneOf",
+                        },
+                      ],
+                    ],
+                    "isRequired": true,
+                    "type": "oneOfType",
                   },
                 },
               ],

packages/react/src/components/InlineLoading/InlineLoading.tsx

@@ -124,9 +124,7 @@ const InlineLoading = ({
     return undefined;
   };
 
-  // TODO: Should this element only be constructed, similar to
-  // `loadingAnimation`, if `description` is specified?
-  const loadingText = (
+  const loadingText = description && (
     <div className={`${prefix}--inline-loading__text`}>{description}</div>
   );
   const loading = getLoading();
@@ -139,7 +137,7 @@ const InlineLoading = ({
       {...rest}
       aria-live={rest['aria-live'] ?? 'assertive'}>
       {loadingAnimation}
-      {description && loadingText}
+      {loadingText}
     </div>
   );
 };

packages/react/src/components/Modal/Modal.tsx

@@ -1,12 +1,18 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import PropTypes from 'prop-types';
-import React, { useRef, useEffect, useState, ReactNode } from 'react';
+import PropTypes, { type Validator } from 'prop-types';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+  type Ref,
+} from 'react';
 import classNames from 'classnames';
 import { Close } from '@carbon/icons-react';
 import toggleClass from '../../tools/toggleClass';
@@ -98,7 +104,7 @@ export interface ModalProps extends ReactAttr<HTMLDivElement> {
   /**
    * Provide a ref to return focus to once the modal is closed.
    */
-  launcherButtonRef?: any; // TODO FIXME
+  launcherButtonRef?: Ref<HTMLButtonElement>;
 
   /**
    * Specify the description for the loading text
@@ -426,7 +432,9 @@ const Modal = React.forwardRef(function Modal(
   useEffect(() => {
     if (!open && launcherButtonRef) {
       setTimeout(() => {
-        launcherButtonRef?.current?.focus();
+        if ('current' in launcherButtonRef) {
+          launcherButtonRef.current?.focus();
+        }
       });
     }
   }, [open, launcherButtonRef]);
@@ -701,9 +709,17 @@ Modal.propTypes = {
   launcherButtonRef: PropTypes.oneOfType([
     PropTypes.func,
     PropTypes.shape({
-      current: PropTypes.any,
+      current: PropTypes.oneOfType([
+        // `PropTypes.instanceOf(HTMLButtonElement)` alone won't work because
+        // `HTMLButtonElement` is not defined in the test environment even
+        // though `testEnvironment` is set to `jsdom`.
+        typeof HTMLButtonElement !== 'undefined'
+          ? PropTypes.instanceOf(HTMLButtonElement)
+          : PropTypes.any,
+        PropTypes.oneOf([null]),
+      ]).isRequired,
     }),
-  ]),
+  ]) as Validator<Ref<HTMLButtonElement>>,
 
   /**
    * Specify the description for the loading text

packages/react/src/components/Modal/next/index.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -82,11 +82,6 @@ export interface BaseModalProps extends ReactAttr<HTMLDivElement> {
    */
   isFullWidth?: boolean;
 
-  /**
-   * Provide a ref to return focus to once the modal is closed.
-   */
-  launcherButtonRef?: any; // TODO FIXME
-
   /**
    * Specify the description for the loading text
    */
@@ -260,7 +255,6 @@ const Modal = React.forwardRef(function Modal(
     closeButtonLabel = 'Close',
     preventCloseOnClickOutside = false,
     isFullWidth,
-    launcherButtonRef,
     loadingStatus = 'inactive',
     loadingDescription,
     loadingIconDescription,
@@ -549,16 +543,6 @@ Modal.propTypes = {
    */
   isFullWidth: PropTypes.bool,
 
-  /**
-   * Provide a ref to return focus to once the modal is closed.
-   */
-  launcherButtonRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({
-      current: PropTypes.any,
-    }),
-  ]),
-
   /**
    * Specify the description for the loading text
    */

packages/react/src/components/Tile/Tile.tsx

@@ -1,3 +1,10 @@
+/**
+ * Copyright IBM Corp. 2019, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 import React, {
   useEffect,
   useRef,
@@ -488,8 +495,7 @@ export const SelectableTile = React.forwardRef<
     className
   );
 
-  // TODO: rename to handleClick when handleClick prop is deprecated
-  function handleOnClick(evt) {
+  function handleClick(evt) {
     evt.preventDefault();
     evt?.persist?.();
     if (
@@ -504,8 +510,7 @@ export const SelectableTile = React.forwardRef<
     onChange(evt, isSelected, id);
   }
 
-  // TODO: rename to handleKeyDown when handleKeyDown prop is deprecated
-  function handleOnKeyDown(evt) {
+  function handleKeyDown(evt) {
     evt?.persist?.();
     if (matches(evt, [keys.Enter, keys.Space])) {
       evt.preventDefault();
@@ -547,10 +552,10 @@ export const SelectableTile = React.forwardRef<
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
     <div
       className={classes}
-      onClick={!disabled ? handleOnClick : undefined}
+      onClick={!disabled ? handleClick : undefined}
       role="checkbox"
       aria-checked={isSelected}
-      onKeyDown={!disabled ? handleOnKeyDown : undefined}
+      onKeyDown={!disabled ? handleKeyDown : undefined}
       // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
       tabIndex={!disabled ? tabIndex : undefined}
       ref={ref}

packages/web-components/src/components/checkbox/checkbox.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -61,8 +61,8 @@ class CDSCheckbox extends FocusMixin(FormMixin(LitElement)) {
     }
   }
 
-  _handleFormdata(event: Event) {
-    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
+  _handleFormdata(event: FormDataEvent) {
+    const { formData } = event;
     const { checked, disabled, name, value = 'on' } = this;
     if (!disabled && checked) {
       formData.append(name, value);

packages/web-components/src/components/date-picker/date-picker.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -227,8 +227,8 @@ class CDSDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
       .join('/');
   };
 
-  _handleFormdata(event: Event) {
-    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
+  _handleFormdata(event: FormDataEvent) {
+    const { formData } = event;
     const { disabled, name, value } = this;
     if (!disabled) {
       formData.append(name, value);

packages/web-components/src/components/dropdown/dropdown.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -466,8 +466,8 @@ class CDSDropdown extends ValidityMixin(
    *
    * @param event The event.
    */
-  _handleFormdata(event: Event) {
-    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
+  _handleFormdata(event: FormDataEvent) {
+    const { formData } = event;
     const { disabled, name, value } = this;
     if (!disabled) {
       formData.append(name, value);

packages/web-components/src/components/radio-button/radio-button-group.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2024
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -62,8 +62,8 @@ class CDSRadioButtonGroup extends FormMixin(HostListenerMixin(LitElement)) {
     }
   };
 
-  _handleFormdata(event: Event) {
-    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
+  _handleFormdata(event: FormDataEvent) {
+    const { formData } = event;
     const { disabled, name, value } = this;
     if (
       !disabled &&

packages/web-components/src/components/search/search.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2025
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -113,8 +113,8 @@ class CDSSearch extends HostListenerMixin(FocusMixin(FormMixin(LitElement))) {
     this.hasCustomIcon = true;
   }
 
-  _handleFormdata(event: Event) {
-    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
+  _handleFormdata(event: FormDataEvent) {
+    const { formData } = event;
     const { disabled, name, value } = this;
     if (!disabled) {
       formData.append(name, value);