@carbon/react 1.81.0-rc.0 → 1.82.0-rc.0

package/es/components/DataTable/DataTable.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { type MouseEvent } from 'react';
 import type { DataTableSortState } from './state/sortStates';
 import Table from './Table';
 import TableActionList from './TableActionList';
@@ -125,7 +125,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         [key: string]: unknown;
     };
     getSelectionProps: (getSelectionPropsArgs?: {
-        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+        onClick?: (e: MouseEvent<HTMLInputElement, globalThis.MouseEvent>) => void;
         row: DataTableRow<ColTypes>;
         [key: string]: unknown;
     }) => {
@@ -381,7 +381,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         'aria-label': any;
         'aria-controls': string;
         isExpanded: boolean;
-        onExpand: any;
+        onExpand: (event: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, ...args: any[]) => void;
     };
     /**
      * Decorate consumer's `onClick` event handler with sort parameters
@@ -413,7 +413,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         [key: string]: unknown;
     }) => {
         key: string;
-        onExpand: any;
+        onExpand: (event: React.MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, ...args: any[]) => void;
         isExpanded: boolean | undefined;
         'aria-label': any;
         'aria-controls': string;
@@ -437,19 +437,14 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
      * Gets the props associated with selection for a header or a row, where
      * applicable. Most often used to indicate selection status of the table or
      * for a specific row.
-     *
-     * @param {object} [row] an optional row that we want to access the props for
-     * @param {Function} row.onClick
-     * @param {object} row.row
-     * @returns {object}
      */
     getSelectionProps: ({ onClick, row, ...rest }?: {
         [key: string]: unknown;
-        onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+        onClick?: (e: MouseEvent<HTMLInputElement, globalThis.MouseEvent>) => void;
         row: DataTableRow<ColTypes>;
     }) => {
         checked: boolean | undefined;
-        onSelect: any;
+        onSelect: (event: React.MouseEvent<HTMLInputElement, globalThis.MouseEvent>, ...args: any[]) => void;
         id: string;
         name: string;
         'aria-label': any;
@@ -461,7 +456,7 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         id: string;
         indeterminate: boolean;
         name: string;
-        onSelect: any;
+        onSelect: (event: React.MouseEvent<HTMLInputElement, globalThis.MouseEvent>, ...args: any[]) => void;
     };
     getToolbarProps: (props?: {}) => {
         size: "sm" | undefined;

package/es/components/DataTable/DataTable.js

@@ -233,11 +233,6 @@ class DataTable extends React__default.Component {
      * Gets the props associated with selection for a header or a row, where
      * applicable. Most often used to indicate selection status of the table or
      * for a specific row.
-     *
-     * @param {object} [row] an optional row that we want to access the props for
-     * @param {Function} row.onClick
-     * @param {object} row.row
-     * @returns {object}
      */
     _defineProperty(this, "getSelectionProps", function () {
       let {

package/es/components/DataTable/TableCell.js

@@ -6,18 +6,20 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
+import PropTypes from 'prop-types';
 
-const TableCell = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-  let {
+const frFn = forwardRef;
+const TableCell = frFn((props, ref) => {
+  const {
     children,
     className,
     hasAILabelHeader,
     colSpan,
     ...rest
-  } = _ref;
+  } = props;
   const prefix = usePrefix();
   const tableCellClassNames = cx(className, {
     [`${prefix}--table-cell--column-slug`]: hasAILabelHeader
@@ -29,5 +31,27 @@ const TableCell = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   }, rest), children);
 });
 TableCell.displayName = 'TableCell';
+TableCell.propTypes = {
+  /**
+   * Pass in children that will be embedded in the table header label
+   */
+  children: PropTypes.node,
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes.string,
+  /**
+   * The width of the expanded row's internal cell
+   */
+  colSpan: PropTypes.number,
+  /**
+   * Specify if the table cell is in an AI column
+   */
+  hasAILabelHeader: PropTypes.bool,
+  /**
+   * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
+   */
+  headers: PropTypes.string
+};
 
 export { TableCell as default };

package/es/components/DataTable/TableToolbarAction.d.ts

@@ -1,11 +1,10 @@
 /**
- * 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 React from 'react';
-import { ForwardRefReturn } from '../../types/common';
 export interface TableToolbarActionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
     /**
      * Pass in the children that will be rendered inside the TableToolbarAction
@@ -16,6 +15,5 @@ export interface TableToolbarActionProps extends Omit<React.HTMLAttributes<HTMLD
      */
     onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
-export type TableToolbarActionComponent = ForwardRefReturn<HTMLDivElement, TableToolbarActionProps>;
-declare const TableToolbarAction: TableToolbarActionComponent;
+declare const TableToolbarAction: React.ForwardRefExoticComponent<TableToolbarActionProps & React.RefAttributes<HTMLDivElement>>;
 export default TableToolbarAction;

package/es/components/DataTable/TableToolbarAction.js

@@ -7,14 +7,15 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
-import React__default from 'react';
+import React__default, { forwardRef } from 'react';
 import OverflowMenuItem from '../OverflowMenuItem/OverflowMenuItem.js';
 
-const TableToolbarAction = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
-  let {
+const frFn = forwardRef;
+const TableToolbarAction = frFn((props, ref) => {
+  const {
     children,
     ...rest
-  } = _ref;
+  } = props;
   return /*#__PURE__*/React__default.createElement(OverflowMenuItem, _extends({
     ref: ref,
     itemText: children

package/es/components/DataTable/tools/cells.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+/**
+ * Generates a unique cell ID by combining the row ID and header.
+ *
+ * Generic helper used to consolidate all call sites for getting a cell ID into
+ * one method.
+ */
+export declare const getCellId: (rowId: string, header: string) => string;

package/es/components/DataTable/tools/cells.js

@@ -6,13 +6,10 @@
  */
 
 /**
- * Generic helper used to consolidate all call sites for getting a cell id into
- * one method. The strategy currently is that a "cellId" is just the combination
- * of the row id and the header key used to access this field in a row.
+ * Generates a unique cell ID by combining the row ID and header.
  *
- * @param {string} rowId
- * @param {string} header
- * @returns {string}
+ * Generic helper used to consolidate all call sites for getting a cell ID into
+ * one method.
  */
 const getCellId = (rowId, header) => `${rowId}:${header}`;
 

package/es/components/DataTable/tools/filter.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 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.
+ */
+/**
+ * Filters row IDs based on whether any of the cell values in the row include
+ * the input value as a substring. Boolean cell values are ignored.
+ */
+export declare const defaultFilterRows: ({ rowIds, headers, cellsById, inputValue, getCellId, }: {
+    /** Table row IDs. */
+    rowIds: string[];
+    /** Table headers. */
+    headers: {
+        key: string;
+    }[];
+    /** Mapping of cell IDs to their corresponding cells. */
+    cellsById: Record<string, {
+        value: unknown;
+    }>;
+    /** Input value to search for. */
+    inputValue: string;
+    /** Function that returns a cell ID given a row ID and a header. */
+    getCellId: (rowId: string, header: string) => string;
+}) => string[];

package/es/components/DataTable/tools/filter.js

@@ -6,18 +6,8 @@
  */
 
 /**
- * Default implementation of how we filter rows internally. The idea behind this
- * implementation is to use the given list of row ids and headers to get the
- * individual cell values for a row. Then, we go through each cell value and see
- * if any of them includes the given inputValue.
- *
- * @param {object} config
- * @param {Array<string>} config.rowIds array of all the row ids in the table
- * @param {Array<object>} config.headers
- * @param {object} config.cellsById object containing a map of cell id to cell
- * @param {string} config.inputValue the current input value in the Table Search
- * @param {Function} config.getCellId
- * @returns {Array<string>} rowIds
+ * Filters row IDs based on whether any of the cell values in the row include
+ * the input value as a substring. Boolean cell values are ignored.
  */
 const defaultFilterRows = _ref => {
   let {
@@ -27,15 +17,16 @@ const defaultFilterRows = _ref => {
     inputValue,
     getCellId
   } = _ref;
+  const normalizedInput = inputValue.trim().toLowerCase();
+  if (!normalizedInput) return rowIds;
   return rowIds.filter(rowId => headers.some(_ref2 => {
     let {
       key
     } = _ref2;
-    const id = getCellId(rowId, key);
-    if (typeof cellsById[id].value === 'boolean') {
-      return false;
-    }
-    return ('' + cellsById[id].value).toLowerCase().includes(inputValue.toLowerCase());
+    const cellId = getCellId(rowId, key);
+    const cell = cellsById[cellId];
+    if (typeof cell.value === 'boolean') return false;
+    return String(cell.value).toLowerCase().includes(normalizedInput);
   }));
 };
 

package/es/components/DataTable/tools/sorting.d.ts

@@ -0,0 +1,42 @@
+/**
+ * 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 { type DataTableSortState } from '../state/sortStates';
+/**
+ * Compare two values to determine their order. If both values have the same
+ * type, the default sort algorithm will be used for those types. Otherwise, the
+ * values will be converted to strings for comparison.
+ */
+export declare const compare: (a: any, b: any, locale?: string) => number;
+interface Cell {
+    id: string;
+    value: any;
+}
+interface SortRowParams {
+    key: string;
+    sortDirection: DataTableSortState;
+    sortStates: Record<DataTableSortState, DataTableSortState>;
+    locale: string;
+    compare: typeof compare;
+    rowIds: string[];
+}
+interface SortRowsConfig {
+    rowIds: string[];
+    cellsById: Record<string, Cell>;
+    key: string;
+    sortDirection: DataTableSortState;
+    locale?: string;
+    sortRow?: (cellA: any, cellB: any, params: SortRowParams) => number;
+}
+/**
+ * Sorts table rows based on the provided column key and direction.
+ */
+export declare const sortRows: ({ rowIds, cellsById, sortDirection, key, locale, sortRow, }: SortRowsConfig) => string[];
+/**
+ * Sorts table rows based on the sort direction.
+ */
+export declare const defaultSortRow: (cellA: any, cellB: any, { sortDirection, sortStates, locale, }: Pick<SortRowParams, "locale" | "sortDirection" | "sortStates">) => number;
+export {};

package/es/components/DataTable/tools/sorting.js

@@ -9,76 +9,43 @@ import { getCellId } from './cells.js';
 import { sortStates } from '../state/sortStates.js';
 
 /**
- * Compare two primitives to determine which comes first. Initially, this method
- * will try and figure out if both entries are the same type. If so, it will
- * apply the default sort algorithm for those types. Otherwise, it defaults to a
- * string conversion.
- *
- * @param {number|string} a
- * @param {number|string} b
- * @param {string} locale
- * @returns {number}
+ * Compare two values to determine their order. If both values have the same
+ * type, the default sort algorithm will be used for those types. Otherwise, the
+ * values will be converted to strings for comparison.
  */
 const compare = function (a, b) {
   let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
   // prevent multiple null values in one column (sorting breaks)
-  a === null ? a = '' : null;
-  b === null ? b = '' : null;
+  if (a === null) a = '';
+  if (b === null) b = '';
   if (typeof a === 'number' && typeof b === 'number') {
     return a - b;
   }
   if (typeof a === 'string' && typeof b === 'string') {
     return compareStrings(a, b, locale);
   }
-
-  // if column has React elements, this should sort by the child string if there is one
-  if (typeof a === 'object' && typeof b === 'object') {
-    if (typeof a.props?.children === 'string' && typeof b.props?.children === 'string') {
-      return compareStrings(a.props.children, b.props.children, locale);
-    }
+  const aChild = a?.props?.children;
+  const bChild = b?.props?.children;
+  if (typeof aChild === 'string' && typeof bChild === 'string') {
+    return compareStrings(aChild, bChild, locale);
   }
-  return compareStrings('' + a, '' + b, locale);
+  return compareStrings(String(a), String(b), locale);
 };
 
 /**
- * Use the built-in `localeCompare` function available on strings to compare two
- * strings.
+ * Compares two strings using `localeCompare`.
  *
- * @param {string} a
- * @param {string} b
- * @param {string} locale
- * @returns {number}
+ * Note: Uses numeric comparison if strings are numeric.
  */
 const compareStrings = function (a, b) {
   let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'en';
-  // Only set `numeric: true` if the string only contains numbers
-  // https://stackoverflow.com/a/175787
-  if (!isNaN(a) && !isNaN(parseFloat(a)) && !isNaN(b) && !isNaN(parseFloat(b))) {
-    return a.localeCompare(b, locale, {
-      numeric: true
-    });
-  }
-  return a.localeCompare(b, locale);
+  const isNumeric = !isNaN(parseFloat(a)) && !isNaN(parseFloat(b));
+  return a.localeCompare(b, locale, {
+    numeric: isNumeric
+  });
 };
-
 /**
- * Default implementation of how we sort rows internally. The idea behind this
- * implementation is to use the given list of row ids to look up the cells in
- * the row by the given key. We then use the value of these cells and pipe them
- * into our local `compareStrings` method, including the locale where
- * appropriate.
- *
- * @param {object} config
- * @param {Array[string]} config.rowIds array of all the row ids in the table
- * @param {object} config.cellsById object containing a mapping of cell id to
- * cell
- * @param {string} config.key the header key that we use to lookup the cell
- * @param {string} [config.locale] optional locale used in the comparison
- * function
- * @param {string} config.sortDirection the sort direction used to determine the
- * order the comparison is called in
- * @param {Function} config.sortRow
- * @returns {Array[string]} array of sorted rowIds
+ * Sorts table rows based on the provided column key and direction.
  */
 const sortRows = _ref => {
   let {
@@ -92,16 +59,20 @@ const sortRows = _ref => {
   return rowIds.slice().sort((a, b) => {
     const cellA = cellsById[getCellId(a, key)];
     const cellB = cellsById[getCellId(b, key)];
-    return sortRow(cellA && cellA.value, cellB && cellB.value, {
+    return sortRow(cellA?.value, cellB?.value, {
       key,
       sortDirection,
-      locale,
       sortStates,
+      locale,
       compare,
       rowIds: [a, b]
     });
   });
 };
+
+/**
+ * Sorts table rows based on the sort direction.
+ */
 const defaultSortRow = (cellA, cellB, _ref2) => {
   let {
     sortDirection,
@@ -114,4 +85,4 @@ const defaultSortRow = (cellA, cellB, _ref2) => {
   return compare(cellB, cellA, locale);
 };
 
-export { compare, compareStrings, defaultSortRow, sortRows };
+export { compare, defaultSortRow, sortRows };

package/es/components/DatePicker/DatePicker.d.ts

@@ -120,7 +120,7 @@ export interface DatePickerProps {
      * The value of the date value provided to flatpickr, could
      * be a date, a date number, a date string, an array of dates.
      */
-    value?: string | number | (string | number | object)[] | object | undefined;
+    value?: DateOption | DateOption[];
     /**
      * Specify whether the control is currently in warning state (Fluid only)
      */

package/es/components/DatePicker/DatePicker.js

@@ -173,13 +173,14 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     }
   }, []);
   const lastStartValue = useRef('');
+  const calendarRef = useRef(null);
   const [calendarCloseEvent, setCalendarCloseEvent] = useState(null);
 
   // fix datepicker deleting the selectedDate when the calendar closes
   const handleCalendarClose = useCallback((selectedDates, dateStr, instance) => {
     if (lastStartValue.current && selectedDates[0] && !startInputField.current.value) {
       startInputField.current.value = lastStartValue.current;
-      calendarRef.current.setDate([startInputField.current.value, endInputField?.current?.value], true, calendarRef.current.config.dateFormat);
+      calendarRef.current?.setDate([startInputField.current.value, endInputField?.current?.value], true, calendarRef.current.config.dateFormat);
     }
     if (onClose) {
       onClose(selectedDates, dateStr, instance);
@@ -207,7 +208,6 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     }
   }, [calendarCloseEvent, handleCalendarClose]);
   const endInputField = useRef(null);
-  const calendarRef = useRef(null);
   const savedOnChange = useSavedCallback(onChange);
   const savedOnOpen = useSavedCallback(onOpen);
   const datePickerClasses = cx(`${prefix}--date-picker`, {
@@ -324,7 +324,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     const {
       current: end
     } = endInputField;
-    const flatpickerconfig = {
+    const flatpickerConfig = {
       inline: inline ?? false,
       onClose: onCalendarClose,
       disableMobile: true,
@@ -370,7 +370,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       },
       onValueUpdate: onHook
     };
-    const calendar = flatpickr(start, flatpickerconfig);
+    const calendar = flatpickr(start, flatpickerConfig);
     calendarRef.current = calendar;
     function handleArrowDown(event) {
       if (match(event, Escape)) {
@@ -383,10 +383,10 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
         const {
           calendarContainer,
           selectedDateElem: fpSelectedDateElem,
-          todayDateElem: fptodayDateElem
+          todayDateElem: fpTodayDateElem
         } = calendar;
         const selectedDateElem = calendarContainer.querySelector('.selected') && fpSelectedDateElem;
-        const todayDateElem = calendarContainer.querySelector('.today') && fptodayDateElem;
+        const todayDateElem = calendarContainer.querySelector('.today') && fpTodayDateElem;
         (selectedDateElem || todayDateElem || calendarContainer.querySelector('.flatpickr-day[tabindex]') || calendarContainer).focus();
       }
     }
@@ -461,7 +461,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput]);
+  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput, datePickerType]);
 
   // this hook allows consumers to access the flatpickr calendar
   // instance for cases where functions like open() or close()
@@ -472,44 +472,44 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     }
   }));
   useEffect(() => {
-    if (calendarRef?.current?.set) {
+    if (calendarRef.current?.set) {
       calendarRef.current.set({
         dateFormat
       });
     }
   }, [dateFormat]);
   useEffect(() => {
-    if (calendarRef?.current?.set) {
+    if (calendarRef.current?.set) {
       calendarRef.current.set('minDate', minDate);
     }
   }, [minDate]);
   useEffect(() => {
-    if (calendarRef?.current?.set) {
+    if (calendarRef.current?.set) {
       calendarRef.current.set('allowInput', allowInput);
     }
   }, [allowInput]);
   useEffect(() => {
-    if (calendarRef?.current?.set) {
+    if (calendarRef.current?.set) {
       calendarRef.current.set('maxDate', maxDate);
     }
   }, [maxDate]);
   useEffect(() => {
-    if (calendarRef?.current?.set && disable) {
+    if (calendarRef.current?.set && disable) {
       calendarRef.current.set('disable', disable);
     }
   }, [disable]);
   useEffect(() => {
-    if (calendarRef?.current?.set && enable) {
+    if (calendarRef.current?.set && enable) {
       calendarRef.current.set('enable', enable);
     }
   }, [enable]);
   useEffect(() => {
-    if (calendarRef?.current?.set && inline) {
+    if (calendarRef.current?.set && inline) {
       calendarRef.current.set('inline', inline);
     }
   }, [inline]);
   useEffect(() => {
-    //when value prop is set to empty, this clears the faltpicker's calendar instance and text input
+    //when value prop is set to empty, this clears the flatpicker's calendar instance and text input
     if (value === '') {
       calendarRef.current?.clear();
       if (startInputField.current) {
@@ -528,9 +528,9 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
       }
     };
     const closeCalendar = event => {
-      calendarRef.current.close();
+      calendarRef.current?.close();
       // Remove focus from endDate calendar input
-      onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, {
+      onCalendarClose(calendarRef.current?.selectedDates, '', calendarRef.current, {
         type: 'clickOutside'
       });
     };
@@ -540,7 +540,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
     };
   }, [calendarRef, startInputField, endInputField, onCalendarClose]);
   useEffect(() => {
-    if (calendarRef?.current?.set) {
+    if (calendarRef.current?.set) {
       if (value !== undefined) {
         calendarRef.current.setDate(value);
       }
@@ -554,7 +554,7 @@ const DatePicker = /*#__PURE__*/React__default.forwardRef(function DatePicker(_r
   useEffect(() => {
     if (!calendarRef.current || !startInputField.current) return;
     const handleKeyDown = event => {
-      if (match(event, Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current.isOpen) {
+      if (match(event, Tab) && !event.shiftKey && document.activeElement === endInputField.current && calendarRef.current?.isOpen) {
         calendarRef.current.close();
         onCalendarClose(calendarRef.current.selectedDates, '', calendarRef.current, event);
       }

package/es/components/Dialog/index.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2014, 2024
+ * Copyright IBM Corp. 2014, 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.

package/es/components/Dropdown/Dropdown.Skeleton.d.ts

@@ -1,11 +1,11 @@
 /**
- * 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 React from 'react';
-import { ListBoxSize } from '../ListBox';
+import { type ListBoxSize } from '../ListBox';
 import { ReactAttr } from '../../types/common';
 export interface DropdownSkeletonProps extends ReactAttr<HTMLDivElement> {
     /**

package/es/components/Dropdown/Dropdown.Skeleton.js

@@ -11,7 +11,7 @@ import React__default from 'react';
 import cx from 'classnames';
 import '../ListBox/index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
+import { ListBoxSizePropType } from '../ListBox/ListBoxPropTypes.js';
 
 const DropdownSkeleton = _ref => {
   let {
@@ -44,7 +44,7 @@ DropdownSkeleton.propTypes = {
   /**
    * Specify the size of the ListBox.
    */
-  size: ListBoxSize
+  size: ListBoxSizePropType
 };
 
 export { DropdownSkeleton, DropdownSkeleton as default };