@carbon/react 1.86.0 → 1.87.0

package/es/components/Dropdown/Dropdown.js

@@ -18,11 +18,11 @@ import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useId } from '../../internal/useId.js';
-import { useFloating, size, flip, hide, autoUpdate } from '@floating-ui/react';
+import { useFloating, autoUpdate, size, flip, hide } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
-import { ListBoxSizePropType, ListBoxTypePropType } from '../ListBox/ListBoxPropTypes.js';
+import { ListBoxTypePropType, ListBoxSizePropType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
   ItemMouseMove,

package/es/components/Dropdown/index.js

@@ -6,5 +6,8 @@
  */
 
 import Dropdown from './Dropdown.js';
-export { default as Dropdown, default } from './Dropdown.js';
 export { default as DropdownSkeleton } from './Dropdown.Skeleton.js';
+
+
+
+export { Dropdown, Dropdown as default };

package/es/components/FeatureFlags/index.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { createScope, FeatureFlags as FeatureFlags$1 } from '@carbon/feature-flags';
+import { FeatureFlags as FeatureFlags$1, createScope } from '@carbon/feature-flags';
 import PropTypes from 'prop-types';
-import React, { useContext, useState, useRef, useEffect, createContext } from 'react';
+import React, { useContext, createContext, useState, useRef, useEffect } from 'react';
 import { deprecate } from '../../prop-types/deprecate.js';
 
 /**

package/es/components/FluidNumberInput/FluidNumberInput.d.ts

@@ -43,8 +43,9 @@ export interface FluidNumberInputProps {
      */
     id: string;
     /**
-     * Instruct the browser which keyboard to display on mobile devices. Note that
-     * standard numeric keyboards vary across devices and operating systems.
+     * Instruct the browser which keyboard to display on mobile devices. Defaults
+     * to `decimal`, but note that standard numeric keyboards vary across devices
+     * and operating systems.
      * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
      */
     inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];

package/es/components/FluidNumberInput/FluidNumberInput.js

@@ -67,8 +67,9 @@ FluidNumberInput.propTypes = {
    */
   id: PropTypes.string.isRequired,
   /**
-   * Instruct the browser which keyboard to display on mobile devices. Note that
-   * standard numeric keyboards vary across devices and operating systems.
+   * Instruct the browser which keyboard to display on mobile devices. Defaults
+   * to `decimal`, but note that standard numeric keyboards vary across devices
+   * and operating systems.
    * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
    */
   inputMode: PropTypes.oneOf(['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),

package/es/components/FluidSelect/index.js

@@ -6,5 +6,8 @@
  */
 
 import FluidSelect from './FluidSelect.js';
-export { default as FluidSelect, default } from './FluidSelect.js';
 export { default as FluidSelectSkeleton } from './FluidSelect.Skeleton.js';
+
+
+
+export { FluidSelect, FluidSelect as default };

package/es/components/FluidTextInput/index.js

@@ -6,6 +6,9 @@
  */
 
 import FluidTextInput from './FluidTextInput.js';
-export { default as FluidTextInput, default } from './FluidTextInput.js';
 import './FluidPasswordInput.js';
 export { default as FluidTextInputSkeleton } from './FluidTextInput.Skeleton.js';
+
+
+
+export { FluidTextInput, FluidTextInput as default };

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

@@ -88,7 +88,7 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
     /**
      * Specify the size of the Button.
      */
-    size?: Extract<ButtonSize, 'sm' | 'md' | 'lg'>;
+    size?: Extract<ButtonSize, 'xs' | 'sm' | 'md' | 'lg'>;
     /**
      * Optionally specify a `target` when using an `<a>` element.
      */

package/es/components/IconIndicator/index.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
-import { ErrorFilled, WarningAltInvertedFilled, WarningAltFilled, UndefinedFilled, CheckmarkFilled, CheckmarkOutline, InProgress, Incomplete, CircleDash, PendingFilled, UnknownFilled, WarningSquareFilled } from '@carbon/icons-react';
+import { WarningSquareFilled, UnknownFilled, PendingFilled, CircleDash, Incomplete, InProgress, CheckmarkOutline, CheckmarkFilled, UndefinedFilled, WarningAltFilled, WarningAltInvertedFilled, ErrorFilled } from '@carbon/icons-react';
 
 const IconIndicatorKinds = ['failed', 'caution-major', 'caution-minor', 'undefined', 'succeeded', 'normal', 'in-progress', 'incomplete', 'not-started', 'pending', 'unknown', 'informative'];
 const iconTypes = {

package/es/components/InlineCheckbox/index.js

@@ -6,4 +6,7 @@
  */
 
 import InlineCheckbox from './InlineCheckbox.js';
-export { default as InlineCheckbox, default } from './InlineCheckbox.js';
+
+
+
+export { InlineCheckbox, InlineCheckbox as default };

package/es/components/InlineLoading/index.js

@@ -6,4 +6,7 @@
  */
 
 import InlineLoading from './InlineLoading.js';
-export { default as InlineLoading, default } from './InlineLoading.js';
+
+
+
+export { InlineLoading, InlineLoading as default };

package/es/components/LayoutDirection/LayoutDirection.js

@@ -9,7 +9,6 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React from 'react';
 import { LayoutDirectionContext } from './LayoutDirectionContext.js';
-export { LayoutDirectionContext } from './LayoutDirectionContext.js';
 
 function LayoutDirection({
   as: BaseComponent = 'div',
@@ -44,4 +43,4 @@ LayoutDirection.propTypes = {
   dir: PropTypes.oneOf(['ltr', 'rtl']).isRequired
 };
 
-export { LayoutDirection };
+export { LayoutDirection, LayoutDirectionContext };

package/es/components/Link/index.js

@@ -6,4 +6,7 @@
  */
 
 import Link from './Link.js';
-export { default as Link, default } from './Link.js';
+
+
+
+export { Link, Link as default };

package/es/components/ListBox/ListBox.js

@@ -14,7 +14,7 @@ import './index.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
-import { ListBoxSizePropType, ListBoxTypePropType } from './ListBoxPropTypes.js';
+import { ListBoxTypePropType, ListBoxSizePropType } from './ListBoxPropTypes.js';
 
 const handleOnKeyDown = event => {
   if (event.keyCode === 27) {

package/es/components/Loading/index.js

@@ -6,4 +6,7 @@
  */
 
 import Loading from './Loading.js';
-export { default as Loading, default } from './Loading.js';
+
+
+
+export { Loading, Loading as default };

package/es/components/Menu/Menu.d.ts

@@ -36,7 +36,9 @@ export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
      */
     mode?: 'full' | 'basic';
     /**
-     * Provide an optional function to be called when the Menu should be closed.
+     * Provide an optional function to be called when the Menu should be closed,
+     * including if the Menu is blurred, the user presses escape, or the Menu is
+     * a submenu and the user presses ArrowLeft.
      */
     onClose?: () => void;
     /**

package/es/components/Menu/Menu.js

@@ -320,7 +320,9 @@ Menu.propTypes = {
    */
   mode: deprecate(PropTypes.oneOf(['full', 'basic']), 'Menus now always support both icons as well as selectable items and nesting.'),
   /**
-   * Provide an optional function to be called when the Menu should be closed.
+   * Provide an optional function to be called when the Menu should be closed,
+   * including if the Menu is blurred, the user presses escape, or the Menu is
+   * a submenu and the user presses ArrowLeft.
    */
   onClose: PropTypes.func,
   /**

package/es/components/Menu/MenuItem.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { forwardRef, useState, useContext, useRef, useEffect } from 'react';
-import { useFloating, autoUpdate, offset, useInteractions, useHover, safePolygon, FloatingFocusManager } from '@floating-ui/react';
+import { useFloating, offset, autoUpdate, useInteractions, useHover, safePolygon, FloatingFocusManager } from '@floating-ui/react';
 import { Checkmark, CaretLeft, CaretRight } from '@carbon/icons-react';
 import { ArrowRight, Enter, Space } from '../../internal/keyboard/keys.js';
 import { match } from '../../internal/keyboard/match.js';

package/es/components/Modal/Modal.js

@@ -17,7 +17,7 @@ import ButtonSet from '../ButtonSet/ButtonSet.js';
 import InlineLoading from '../InlineLoading/InlineLoading.js';
 import { Layer } from '../Layer/index.js';
 import requiredIfGivenPropIsTruthy from '../../prop-types/requiredIfGivenPropIsTruthy.js';
-import { wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu, wrapFocus } from '../../internal/wrapFocus.js';
+import { wrapFocus, wrapFocusWithoutSentinels, elementOrParentIsFloatingMenu } from '../../internal/wrapFocus.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -34,7 +34,7 @@ import { unstable__Dialog } from '../Dialog/index.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
 import { warning } from '../../internal/warning.js';
-import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.mjs.js';
+import { debounce } from '../../node_modules/es-toolkit/dist/compat/function/debounce.js';
 import { Text } from '../Text/Text.js';
 
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
@@ -107,9 +107,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
     } = evt;
     evt.stopPropagation();
     if (open && target instanceof HTMLElement) {
-      if (match(evt, Escape)) {
-        onRequestClose(evt);
-      }
       if (match(evt, Enter) && shouldSubmitOnEnter && !isCloseButton(target) && document.activeElement !== button.current) {
         onRequestSubmit(evt);
       }
@@ -211,6 +208,20 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal({
     alertDialogProps.role = 'alertdialog';
     alertDialogProps['aria-describedby'] = modalBodyId;
   }
+  useEffect(() => {
+    if (!open) return;
+    const handleEscapeKey = event => {
+      if (match(event, Escape)) {
+        event.preventDefault();
+        event.stopPropagation();
+        onRequestClose(event);
+      }
+    };
+    document.addEventListener('keydown', handleEscapeKey, true);
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey, true);
+    };
+  }, [open]);
   useEffect(() => {
     return () => {
       if (!enableDialogElement) {

package/es/components/Modal/index.js

@@ -6,4 +6,7 @@
  */
 
 import Modal from './Modal.js';
-export { default as Modal, default } from './Modal.js';
+
+
+
+export { Modal, Modal as default };

package/es/components/MultiSelect/FilterableMultiSelect.d.ts

@@ -191,6 +191,13 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: ReactNode;
+    /**
+     * Specify native input attributes to place on the `<input>`, like maxLength.
+     * These are passed to downshift's getInputProps() and will override the
+     * internal input props.
+     * https://github.com/downshift-js/downshift?tab=readme-ov-file#getinputprops
+     */
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement>;
 }
 export declare const FilterableMultiSelect: {
     <ItemType>(props: FilterableMultiSelectProps<ItemType>): ReactElement<any>;

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -23,15 +23,15 @@ import { defaultItemToString } from './tools/itemToString.js';
 import mergeRefs from '../../tools/mergeRefs.js';
 import { deprecate } from '../../prop-types/deprecate.js';
 import { useId } from '../../internal/useId.js';
-import { defaultCompareItems, defaultSortItems } from './tools/sorting.js';
+import { defaultSortItems, defaultCompareItems } from './tools/sorting.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { useSelection } from '../../internal/Selection.js';
-import { useFloating, flip, size, hide, autoUpdate } from '@floating-ui/react';
+import { useFloating, autoUpdate, flip, size, hide } from '@floating-ui/react';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
-import { ListBoxSizePropType, ListBoxTypePropType } from '../ListBox/ListBoxPropTypes.js';
+import { ListBoxTypePropType, ListBoxSizePropType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
   InputBlur,
@@ -102,7 +102,8 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
   useTitleInItem,
   warn,
   warnText,
-  slug
+  slug,
+  inputProps
 }, ref) {
   const {
     isFluid
@@ -338,7 +339,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
         }
         return {
           ...changes,
-          highlightedIndex: null
+          highlightedIndex: controlledSelectedItems.length > 0 ? 0 : -1
         };
       case InputChange:
         if (onInputValueChange) {
@@ -351,6 +352,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
           highlightedIndex: 0
         };
       case InputClick:
+        setIsOpen(changes.isOpen || false);
         validateHighlightFocus();
         if (changes.isOpen && !changes.selectedItem) {
           return {
@@ -360,7 +362,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
         return {
           ...changes,
           isOpen: false,
-          highlightedIndex: null
+          highlightedIndex: controlledSelectedItems.length > 0 ? 0 : -1
         };
       case MenuMouseLeave:
         return {
@@ -482,7 +484,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
       }
     }
   });
-  const inputProps = getInputProps(getDropdownProps({
+  const inputProp = getInputProps(getDropdownProps({
     'aria-controls': isOpen ? menuId : undefined,
     'aria-describedby': helperText ? helperId : undefined,
     'aria-haspopup': 'listbox',
@@ -492,6 +494,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     disabled,
     placeholder,
     preventKeyAction: isOpen,
+    ...inputProps,
     onClick: () => handleMenuChange(true),
     onKeyDown(event) {
       const $input = event.target;
@@ -545,7 +548,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
       setIsFocused(evt?.type === 'focus' ? true : false);
     }
   };
-  const mergedRef = mergeRefs(textInput, inputProps.ref);
+  const mergedRef = mergeRefs(textInput, inputProp.ref);
   const readOnlyEventHandlers = readOnly ? {
     onClick: evt => {
       // NOTE: does not prevent click
@@ -600,7 +603,7 @@ const FilterableMultiSelect = /*#__PURE__*/forwardRef(function FilterableMultiSe
     disabled: disabled
   }), /*#__PURE__*/React.createElement("input", _extends({
     className: inputClasses
-  }, inputProps, {
+  }, inputProp, {
     ref: mergedRef
   }, readOnlyEventHandlers, {
     readOnly: readOnly
@@ -815,7 +818,14 @@ FilterableMultiSelect.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Specify native input attributes to place on the `<input>`, like maxLength.
+   * These are passed to downshift's getInputProps() and will override the
+   * internal input props.
+   * https://github.com/downshift-js/downshift?tab=readme-ov-file#getinputprops
+   */
+  inputProps: PropTypes.object
 };
 
 export { FilterableMultiSelect };

package/es/components/MultiSelect/MultiSelect.js

@@ -27,11 +27,11 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import Checkbox from '../Checkbox/Checkbox.js';
 import '../Checkbox/Checkbox.Skeleton.js';
 import { noopFn } from '../../internal/noopFn.js';
-import { useFloating, flip, size, hide, autoUpdate } from '@floating-ui/react';
+import { useFloating, autoUpdate, flip, size, hide } from '@floating-ui/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { AILabel } from '../AILabel/index.js';
 import { isComponentElement } from '../../internal/utils.js';
-import { ListBoxSizePropType, ListBoxTypePropType } from '../ListBox/ListBoxPropTypes.js';
+import { ListBoxTypePropType, ListBoxSizePropType } from '../ListBox/ListBoxPropTypes.js';
 
 const {
   ItemClick,

package/es/components/MultiSelect/filter.js

@@ -5,10 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-// TODO [@carbon-design-system/monorepo-reviewers]: This file was in the
-// `ComboBox` directory before but it wasn't used there. Now it's used in
-// `FilterableMultiSelect`. Is that expected?
-
 const defaultFilterItems = (items, {
   itemToString,
   inputValue

package/es/components/MultiSelect/tools/itemToString.d.ts

@@ -0,0 +1 @@
+export function defaultItemToString(item: any): any;

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

@@ -0,0 +1,9 @@
+export function defaultCompareItems(itemA: string, itemB: string, { locale }: {
+    locale: string;
+}): number;
+export function defaultSortItems(items: any, { selectedItems, itemToString, compareItems, locale }: {
+    selectedItems?: never[] | undefined;
+    itemToString: any;
+    compareItems: any;
+    locale?: string | undefined;
+}): any;

package/es/components/Notification/Notification.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import React, { useState, useRef, useEffect } from 'react';
 import { deprecate } from '../../prop-types/deprecate.js';
 import cx from 'classnames';
-import { Close, ErrorFilled, CheckmarkFilled, WarningFilled, WarningAltFilled, InformationFilled, InformationSquareFilled } from '@carbon/icons-react';
+import { Close, InformationSquareFilled, InformationFilled, WarningAltFilled, WarningFilled, CheckmarkFilled, ErrorFilled } from '@carbon/icons-react';
 import '../Text/index.js';
 import Button from '../Button/Button.js';
 import '../Button/Button.Skeleton.js';
@@ -21,7 +21,7 @@ import { match, matches } from '../../internal/keyboard/match.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
-import { wrapFocus, wrapFocusWithoutSentinels } from '../../internal/wrapFocus.js';
+import { wrapFocusWithoutSentinels, wrapFocus } from '../../internal/wrapFocus.js';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
 import { warning } from '../../internal/warning.js';
 import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';

package/es/components/NumberInput/NumberInput.d.ts

@@ -72,8 +72,9 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     id: string;
     /**
-     * Instruct the browser which keyboard to display on mobile devices. Note that
-     * standard numeric keyboards vary across devices and operating systems.
+     * Instruct the browser which keyboard to display on mobile devices. Defaults
+     * to `decimal`, but note that standard numeric keyboards vary across devices
+     * and operating systems.
      * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
      */
     inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];

package/es/components/NumberInput/NumberInput.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { Subtract, Add } from '@carbon/icons-react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useContext, useState, useMemo, useCallback, useRef, useEffect, cloneElement } from 'react';
+import React, { useContext, useState, useMemo, useCallback, useRef, cloneElement, useEffect } from 'react';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -54,7 +54,7 @@ const NumberInput = /*#__PURE__*/React.forwardRef(function NumberInput(props, fo
     hideSteppers,
     iconDescription,
     id,
-    inputMode,
+    inputMode = 'decimal',
     invalid = false,
     invalidText,
     label,
@@ -495,8 +495,9 @@ NumberInput.propTypes = {
    */
   id: PropTypes.string.isRequired,
   /**
-   * Instruct the browser which keyboard to display on mobile devices. Note that
-   * standard numeric keyboards vary across devices and operating systems.
+   * Instruct the browser which keyboard to display on mobile devices. Defaults
+   * to `decimal`, but note that standard numeric keyboards vary across devices
+   * and operating systems.
    * @see https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/
    */
   inputMode: PropTypes.oneOf(['none', 'text', 'tel', 'url', 'email', 'numeric', 'decimal', 'search']),

package/es/components/OverflowMenu/next/index.js

@@ -10,7 +10,7 @@ import React, { useRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { OverflowMenuVertical } from '@carbon/icons-react';
-import { useFloating, flip, autoUpdate } from '@floating-ui/react';
+import { useFloating, autoUpdate, flip } from '@floating-ui/react';
 import { useFeatureFlag } from '../../FeatureFlags/index.js';
 import { IconButton } from '../../IconButton/index.js';
 import { Menu } from '../../Menu/Menu.js';

package/es/components/OverflowMenuItem/index.js

@@ -6,4 +6,7 @@
  */
 
 import OverflowMenuItem from './OverflowMenuItem.js';
-export { default as OverflowMenuItem, default } from './OverflowMenuItem.js';
+
+
+
+export { OverflowMenuItem, OverflowMenuItem as default };

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

@@ -0,0 +1 @@
+export function OverflowMenuV2(props: any): import("react/jsx-runtime").JSX.Element;

package/es/components/PageHeader/PageHeader.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useRef, useState, useLayoutEffect, useEffect, useMemo, useCallback } from 'react';
+import React, { useRef, useState, useLayoutEffect, useMemo, useEffect, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';

package/es/components/Pagination/experimental/PageSelector.d.ts

@@ -0,0 +1,19 @@
+export default PageSelector;
+declare function PageSelector({ className, currentPage, id, labelText, totalPages, ...other }: {
+    [x: string]: any;
+    className?: null | undefined;
+    currentPage: any;
+    id?: number | undefined;
+    labelText?: string | undefined;
+    totalPages: any;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace PageSelector {
+    namespace propTypes {
+        let className: PropTypes.Requireable<string>;
+        let currentPage: PropTypes.Validator<number>;
+        let id: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        let labelText: PropTypes.Requireable<string>;
+        let totalPages: PropTypes.Validator<number>;
+    }
+}
+import PropTypes from 'prop-types';

package/es/components/Pagination/experimental/Pagination.d.ts

@@ -0,0 +1,43 @@
+export default Pagination;
+declare function Pagination({ backwardText, children, className, disabled, forwardText, id, initialPage, itemsPerPageText, itemRangeText, itemText, onChange, pageRangeText, pageSize, pageSizes, pageText, pagesUnknown, totalItems, ...other }: {
+    [x: string]: any;
+    backwardText?: string | undefined;
+    children?: undefined;
+    className?: null | undefined;
+    disabled?: boolean | undefined;
+    forwardText?: string | undefined;
+    id?: number | undefined;
+    initialPage?: number | undefined;
+    itemsPerPageText?: string | undefined;
+    itemRangeText?: ((min: any, max: any, total: any) => string) | undefined;
+    itemText?: ((min: any, max: any) => string) | undefined;
+    onChange: any;
+    pageRangeText?: ((current: any, total: any) => string) | undefined;
+    pageSize?: number | undefined;
+    pageSizes?: undefined;
+    pageText?: ((page: any) => string) | undefined;
+    pagesUnknown?: boolean | undefined;
+    totalItems?: undefined;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace Pagination {
+    namespace propTypes {
+        let backwardText: PropTypes.Requireable<string>;
+        let children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike | ((...args: any[]) => any)>>;
+        let className: PropTypes.Requireable<string>;
+        let disabled: PropTypes.Requireable<boolean>;
+        let forwardText: PropTypes.Requireable<string>;
+        let id: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        let initialPage: PropTypes.Requireable<number>;
+        let itemRangeText: PropTypes.Requireable<(...args: any[]) => any>;
+        let itemText: PropTypes.Requireable<(...args: any[]) => any>;
+        let itemsPerPageText: PropTypes.Requireable<string>;
+        let onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        let pageRangeText: PropTypes.Requireable<(...args: any[]) => any>;
+        let pageSize: PropTypes.Requireable<number>;
+        let pageSizes: PropTypes.Requireable<(number | null | undefined)[]>;
+        let pageText: PropTypes.Requireable<(...args: any[]) => any>;
+        let pagesUnknown: PropTypes.Requireable<boolean>;
+        let totalItems: PropTypes.Requireable<number>;
+    }
+}
+import PropTypes from 'prop-types';

package/es/components/Pagination/experimental/index.d.ts

@@ -0,0 +1,3 @@
+import PageSelector from './PageSelector';
+import Pagination from './Pagination';
+export { PageSelector, Pagination };