@carbon/react 1.53.1 → 1.54.0-rc.0

package/lib/components/ComposedModal/ComposedModal.js

@@ -23,6 +23,7 @@ var toggleClass = require('../../tools/toggleClass.js');
 var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropIsTruthy.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
 var usePrefix = require('../../internal/usePrefix.js');
+var index = require('../FeatureFlags/index.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
 
@@ -125,6 +126,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
   const button = React.useRef(null);
   const startSentinel = React.useRef(null);
   const endSentinel = React.useRef(null);
+  const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
 
   // Keep track of modal open/close state
   // and propagate it to the document.body
@@ -142,12 +144,19 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  function handleKeyDown(evt) {
-    evt.stopPropagation();
-    if (match.match(evt, keys.Escape)) {
-      closeModal(evt);
+  function handleKeyDown(event) {
+    event.stopPropagation();
+    if (match.match(event, keys.Escape)) {
+      closeModal(event);
+    }
+    if (focusTrapWithoutSentinels && open && match.match(event, keys.Tab) && innerModal.current) {
+      wrapFocus.wrapFocusWithoutSentinels({
+        containerNode: innerModal.current,
+        currentActiveNode: event.target,
+        event: event
+      });
     }
-    onKeyDown?.(evt);
+    onKeyDown?.(event);
   }
   function handleMousedown(evt) {
     evt.stopPropagation();
@@ -255,7 +264,7 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     role: "presentation",
     ref: ref,
     "aria-hidden": !open,
-    onBlur: handleBlur,
+    onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
     onMouseDown: handleMousedown,
     onKeyDown: handleKeyDown,
     className: modalClass
@@ -265,14 +274,14 @@ const ComposedModal = /*#__PURE__*/React__default["default"].forwardRef(function
     "aria-modal": "true",
     "aria-label": ariaLabel ? ariaLabel : generatedAriaLabel,
     "aria-labelledby": ariaLabelledBy
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
+  }, !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     ref: startSentinel,
     className: `${prefix}--visually-hidden`
   }, "Focus sentinel"), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: innerModal,
     className: `${prefix}--modal-container-body`
-  }, normalizedSlug, childrenWithProps), /*#__PURE__*/React__default["default"].createElement("button", {
+  }, normalizedSlug, childrenWithProps), !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
     ref: endSentinel,
     className: `${prefix}--visually-hidden`

package/lib/components/DataTable/DataTable.js

@@ -324,7 +324,7 @@ class DataTable extends React__default["default"].Component {
         isSortable,
         useStaticWidth,
         stickyHeader,
-        overflowMenuOnHover = true,
+        overflowMenuOnHover = false,
         experimentalAutoAlign
       } = this.props;
       return {

package/lib/components/DataTable/TableBatchAction.d.ts

@@ -24,7 +24,7 @@ export interface TableBatchActionProps extends React.ButtonHTMLAttributes<HTMLBu
 declare const TableBatchAction: {
     ({ renderIcon, iconDescription, ...props }: {
         [x: string]: any;
-        renderIcon?: import("@carbon/icons-react/lib/CarbonIcon").CarbonIconType | undefined;
+        renderIcon?: import("@carbon/icons-react").CarbonIconType | undefined;
         iconDescription?: string | undefined;
     }): import("react/jsx-runtime").JSX.Element;
     propTypes: {

package/lib/components/DataTable/TableToolbarMenu.d.ts

@@ -8,13 +8,17 @@ import React from 'react';
 export interface TableToolbarMenuProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     /**
-     * Provide an optional class name for the toolbar menu
+     * Provide an optional class name for the toolbar menu trigger button
      */
     className?: string;
     /**
      * The description of the menu icon.
      */
     iconDescription?: string;
+    /**
+     * Provide an optional class name for the toolbar menu
+     */
+    menuOptionsClass?: string;
     /**
      * Optional prop to allow overriding the default menu icon
      */

package/lib/components/DataTable/TableToolbarMenu.js

@@ -30,16 +30,19 @@ const TableToolbarMenu = _ref => {
     renderIcon = iconsReact.Settings,
     iconDescription = defaultIconDescription,
     children,
+    menuOptionsClass,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const toolbarActionClasses = cx__default["default"](className, `${prefix}--toolbar-action ${prefix}--overflow-menu`);
+  const menuOptionsClasses = cx__default["default"](menuOptionsClass, `${prefix}--toolbar-action__menu`);
   return /*#__PURE__*/React__default["default"].createElement(index["default"], _rollupPluginBabelHelpers["extends"]({
     "aria-label": iconDescription,
     renderIcon: renderIcon,
     className: toolbarActionClasses,
     title: iconDescription,
     iconDescription: iconDescription,
+    menuOptionsClass: menuOptionsClasses,
     flipped: true
   }, rest), children);
 };
@@ -53,6 +56,10 @@ TableToolbarMenu.propTypes = {
    * The description of the menu icon.
    */
   iconDescription: PropTypes__default["default"].string,
+  /**
+   * Provide an optional class name for the toolbar menu
+   */
+  menuOptionsClass: PropTypes__default["default"].string,
   /**
    * Optional prop to allow overriding the default menu icon
    */

package/lib/components/DatePicker/DatePicker.d.ts

@@ -102,6 +102,10 @@ interface DatePickerProps {
      * The `open` event handler.
      */
     onOpen?: flatpickr.Options.Hook;
+    /**
+     * flatpickr prop passthrough. Controls how dates are parsed.
+     */
+    parseDate?: (date: string) => Date | false;
     /**
      * whether the DatePicker is to be readOnly
      * if boolean applies to all inputs

package/lib/components/DatePicker/DatePicker.js

@@ -170,6 +170,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     readOnly = false,
     short = false,
     value,
+    parseDate: parseDateProp,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -279,6 +280,37 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     } else {
       localeData = l10n__default["default"][locale];
     }
+
+    /**
+     * parseDate is called before the date is actually set.
+     * It attempts to parse the input value and return a valid date string.
+     * Flatpickr's default parser results in odd dates when given invalid
+     * values, so instead here we normalize the month/day to `1` if given
+     * a value outside the acceptable range.
+     */
+    let parseDate;
+    if (!parseDateProp && dateFormat === 'm/d/Y') {
+      // This function only supports the default dateFormat.
+      parseDate = date => {
+        // Month must be 1-12. If outside these bounds, `1` should be used.
+        const month = date.split('/')[0] <= 12 && date.split('/')[0] > 0 ? parseInt(date.split('/')[0]) : 1;
+        const year = parseInt(date.split('/')[2]);
+        if (month && year) {
+          // The month and year must be provided to be able to determine
+          // the number of days in the month.
+          const daysInMonth = new Date(year, month, 0).getDate();
+          // If the day does not fall within the days in the month, `1` should be used.
+          const day = date.split('/')[1] <= daysInMonth && date.split('/')[1] > 0 ? parseInt(date.split('/')[1]) : 1;
+          return new Date(`${year}/${month}/${day}`);
+        } else {
+          // With no month and year, we cannot calculate anything.
+          // Returning false gives flatpickr an invalid date, which will clear the input
+          return false;
+        }
+      };
+    } else if (parseDateProp) {
+      parseDate = parseDateProp;
+    }
     const {
       current: start
     } = startInputField;
@@ -297,6 +329,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       [enableOrDisable]: enableOrDisableArr,
       minDate: minDate,
       maxDate: maxDate,
+      parseDate: parseDate,
       plugins: [datePickerType === 'range' ? rangePlugin["default"]({
         input: endInputField.current
       }) : () => {}, appendTo ? appendToPlugin["default"]({
@@ -708,6 +741,10 @@ DatePicker.propTypes = {
    * `(dates: Date[], dStr: string, fp: Instance, data?: any):void;`
    */
   onOpen: PropTypes__default["default"].func,
+  /**
+   * flatpickr prop passthrough. Controls how dates are parsed.
+   */
+  parseDate: PropTypes__default["default"].func,
   /**
    * whether the DatePicker is to be readOnly
    * if boolean applies to all inputs

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

@@ -13,7 +13,7 @@ interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>
     /**
      * Specify how the trigger should align with the tooltip
      */
-    align?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+    align?: 'top' | 'top-left' | 'top-start' | 'top-right' | 'top-end' | 'bottom' | 'bottom-left' | 'bottom-start' | 'bottom-right' | 'bottom-end' | 'left' | 'right';
     /**
      * Provide an icon or asset to be rendered inside of the IconButton
      */

package/lib/components/IconButton/index.js

@@ -69,7 +69,7 @@ IconButton.propTypes = {
   /**
    * Specify how the trigger should align with the tooltip
    */
-  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right']),
+  align: PropTypes__default["default"].oneOf(['top', 'top-left', 'top-start', 'top-right', 'top-end', 'bottom', 'bottom-left', 'bottom-start', 'bottom-right', 'bottom-end', 'left', 'right']),
   /**
    * Provide an icon or asset to be rendered inside of the IconButton
    */

package/lib/components/ListBox/ListBox.d.ts

@@ -21,6 +21,10 @@ export interface ListBoxProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAt
      * Specify the text to be displayed when the control is invalid
      */
     invalidText?: React.ReactNode;
+    /**
+     * Specify the id to be applied to the element containing the invalid text
+     */
+    invalidTextId?: string;
     /**
      * Specify if the control should render open
      */
@@ -50,6 +54,10 @@ export interface ListBoxProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAt
      * Provide the text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Specify the id to be applied to the element containing the warn text
+     */
+    warnTextId?: string;
 }
 export type ListBoxComponent = ForwardRefReturn<HTMLDivElement, ListBoxProps>;
 /**

package/lib/components/ListBox/ListBox.js

@@ -47,8 +47,10 @@ const ListBox = /*#__PURE__*/React__default["default"].forwardRef(function ListB
     size,
     invalid,
     invalidText,
+    invalidTextId,
     warn,
     warnText,
+    warnTextId,
     light,
     isOpen,
     ...rest
@@ -80,9 +82,11 @@ const ListBox = /*#__PURE__*/React__default["default"].forwardRef(function ListB
   }), children), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: `${prefix}--list-box__divider`
   }), invalid ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--form-requirement`
+    className: `${prefix}--form-requirement`,
+    id: invalidTextId
   }, invalidText) : null, showWarning ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${prefix}--form-requirement`
+    className: `${prefix}--form-requirement`,
+    id: warnTextId
   }, warnText) : null);
 });
 ListBox.displayName = 'ListBox';
@@ -107,6 +111,10 @@ ListBox.propTypes = {
    * Specify the text to be displayed when the control is invalid
    */
   invalidText: PropTypes__default["default"].node,
+  /**
+   * Specify the id to be applied to the element containing the invalid text
+   */
+  invalidTextId: PropTypes__default["default"].string,
   /**
    * Specify if the control should render open
    */
@@ -132,7 +140,11 @@ ListBox.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state
    */
-  warnText: PropTypes__default["default"].node
+  warnText: PropTypes__default["default"].string,
+  /**
+   * Specify the id to be applied to the element containing the warn text
+   */
+  warnTextId: PropTypes__default["default"].string
 };
 
 exports["default"] = ListBox;

package/lib/components/Loading/Loading.d.ts

@@ -30,7 +30,7 @@ export interface LoadingProps extends ReactAttr<HTMLDivElement> {
     /**
      * Specify whether you want the loader to be applied with an overlay
      */
-    withOverlay: boolean;
+    withOverlay?: boolean;
 }
 declare function Loading({ active, className: customClassName, withOverlay, small, description, ...rest }: LoadingProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Loading {

package/lib/components/Modal/Modal.js

@@ -25,9 +25,10 @@ var debounce = require('lodash.debounce');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var index = require('../IconButton/index.js');
+var index$1 = require('../IconButton/index.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
+var index = require('../FeatureFlags/index.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -93,6 +94,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
     [`${prefix}--btn--loading`]: loadingStatus !== 'inactive'
   });
   const loadingActive = loadingStatus !== 'inactive';
+  const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   function isCloseButton(element) {
     return !onSecondarySubmit && element === secondaryButton.current || element.classList.contains(modalCloseButtonClass);
   }
@@ -105,6 +107,13 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
       if (match.match(evt, keys.Enter) && shouldSubmitOnEnter && !isCloseButton(evt.target)) {
         onRequestSubmit(evt);
       }
+      if (focusTrapWithoutSentinels && match.match(evt, keys.Tab) && innerModal.current) {
+        wrapFocus.wrapFocusWithoutSentinels({
+          containerNode: innerModal.current,
+          currentActiveNode: evt.target,
+          event: evt
+        });
+      }
     }
   }
   function handleMousedown(evt) {
@@ -237,7 +246,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   }
   const modalButton = /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--modal-close-button`
-  }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+  }, /*#__PURE__*/React__default["default"].createElement(index$1.IconButton, {
     className: modalCloseButtonClass,
     label: closeButtonLabel,
     onClick: onRequestClose,
@@ -306,16 +315,16 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     onKeyDown: handleKeyDown,
     onMouseDown: handleMousedown,
-    onBlur: handleBlur,
+    onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
     className: modalClasses,
     role: "presentation",
     ref: ref
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
+  }), !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("span", {
     ref: startTrap,
     tabIndex: 0,
     role: "link",
     className: `${prefix}--visually-hidden`
-  }, "Focus sentinel"), modalBody, /*#__PURE__*/React__default["default"].createElement("span", {
+  }, "Focus sentinel"), modalBody, !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("span", {
     ref: endTrap,
     tabIndex: 0,
     role: "link",

package/lib/components/Notification/Notification.js

@@ -24,6 +24,7 @@ var usePrefix = require('../../internal/usePrefix.js');
 var useId = require('../../internal/useId.js');
 var noopFn = require('../../internal/noopFn.js');
 var wrapFocus = require('../../internal/wrapFocus.js');
+var index = require('../FeatureFlags/index.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var keys = require('../../internal/keyboard/keys.js');
@@ -521,6 +522,7 @@ function ActionableNotification(_ref6) {
   const startTrap = React.useRef(null);
   const endTrap = React.useRef(null);
   const ref = React.useRef(null);
+  const focusTrapWithoutSentinels = index.useFeatureFlag('enable-experimental-focus-wrap-without-sentinels');
   useIsomorphicEffect["default"](() => {
     if (hasFocus) {
       const button = document.querySelector('button.cds--actionable-notification__action-button');
@@ -551,6 +553,15 @@ function ActionableNotification(_ref6) {
       });
     }
   }
+  function handleKeyDown(event) {
+    if (isOpen && match.match(event, keys.Tab) && ref.current) {
+      wrapFocus.wrapFocusWithoutSentinels({
+        containerNode: ref.current,
+        currentActiveNode: event.target,
+        event
+      });
+    }
+  }
   const handleClose = evt => {
     if (!onClose || onClose(evt) !== false) {
       setIsOpen(false);
@@ -569,8 +580,9 @@ function ActionableNotification(_ref6) {
     role: role,
     className: containerClassName,
     "aria-labelledby": title ? id : subtitleId,
-    onBlur: handleBlur
-  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    onBlur: !focusTrapWithoutSentinels ? handleBlur : () => {},
+    onKeyDown: focusTrapWithoutSentinels ? handleKeyDown : () => {}
+  }), !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("span", {
     ref: startTrap,
     tabIndex: 0,
     role: "link",
@@ -603,7 +615,7 @@ function ActionableNotification(_ref6) {
     "aria-label": deprecatedAriaLabel || ariaLabel,
     notificationType: "actionable",
     onClick: handleCloseButtonClick
-  })), /*#__PURE__*/React__default["default"].createElement("span", {
+  })), !focusTrapWithoutSentinels && /*#__PURE__*/React__default["default"].createElement("span", {
     ref: endTrap,
     tabIndex: 0,
     role: "link",

package/lib/components/Pagination/Pagination.Skeleton.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 from 'react';
+export interface PaginationSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to add.
+     */
+    className?: string;
+}
+declare function PaginationSkeleton({ className, ...rest }: PaginationSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PaginationSkeleton {
+    var propTypes: {
+        /**
+         * Specify an optional className to add.
+         */
+        className: PropTypes.Requireable<string>;
+    };
+}
+export default PaginationSkeleton;
+export { PaginationSkeleton };

package/lib/components/Pagination/Pagination.d.ts

@@ -0,0 +1,102 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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';
+type ExcludedAttributes = 'id' | 'onChange';
+export interface PaginationPageSize {
+    text: string;
+    value: number;
+}
+export interface PaginationProps extends Omit<React.HTMLAttributes<HTMLDivElement>, ExcludedAttributes> {
+    /**
+     * The description for the backward icon.
+     */
+    backwardText?: string;
+    /**
+     * The CSS class names.
+     */
+    className?: string;
+    /**
+     * `true` if the backward/forward buttons, as well as the page select elements,  should be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The description for the forward icon.
+     */
+    forwardText?: string;
+    /**
+     * The unique ID of this component instance.
+     */
+    id?: string | number;
+    /**
+     * `true` if the current page should be the last page.
+     */
+    isLastPage?: boolean;
+    /**
+     * The function returning a translatable text showing where the current page is,
+     * in a manner of the range of items.
+     */
+    itemRangeText?: (min: number, max: number, total: number) => string;
+    /**
+     * A variant of `itemRangeText`, used if the total number of items is unknown.
+     */
+    itemText?: (min: number, max: number) => string;
+    /**
+     * The translatable text indicating the number of items per page.
+     */
+    itemsPerPageText?: string;
+    /**
+     * The callback function called when the current page changes.
+     */
+    onChange?: (data: {
+        page: number;
+        pageSize: number;
+        ref?: React.RefObject<any>;
+    }) => void;
+    /**
+     * The current page.
+     */
+    page?: number;
+    /**
+     * `true` if the select box to change the page should be disabled.
+     */
+    pageInputDisabled?: boolean;
+    pageNumberText?: string;
+    /**
+     * A function returning PII showing where the current page is.
+     */
+    pageRangeText?: (current: number, total: number) => string;
+    /**
+     * The number dictating how many items a page contains.
+     */
+    pageSize?: number;
+    /**
+     * `true` if the select box to change the items per page should be disabled.
+     */
+    pageSizeInputDisabled?: boolean;
+    /**
+     * The choices for `pageSize`.
+     */
+    pageSizes: number[] | PaginationPageSize[];
+    /**
+     * The translatable text showing the current page.
+     */
+    pageText?: (page: number, pagesUnknown?: boolean) => string;
+    /**
+     * `true` if the total number of items is unknown.
+     */
+    pagesUnknown?: boolean;
+    /**
+     * Specify the size of the Pagination.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * The total number of items.
+     */
+    totalItems?: number;
+}
+declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;
+export default Pagination;

package/lib/components/Pagination/Pagination.js

@@ -37,7 +37,7 @@ function mapPageSizesToObject(sizes) {
 }
 function renderSelectItems(total) {
   let counter = 1;
-  let itemArr = [];
+  const itemArr = [];
   while (counter <= total) {
     itemArr.push( /*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
       key: counter,
@@ -62,7 +62,7 @@ function getPageSize(pageSizes, pageSize) {
 const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pagination(_ref, ref) {
   let {
     backwardText = 'Previous page',
-    className: customClassName,
+    className: customClassName = '',
     disabled = false,
     forwardText = 'Next page',
     id,
@@ -81,11 +81,11 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     pageText = (page, pagesUnknown) => `page ${pagesUnknown ? '' : page}`,
     pagesUnknown = false,
     size = 'md',
-    totalItems,
+    totalItems = 1,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const inputId = useId.useFallbackId(id);
+  const inputId = useId.useFallbackId(id?.toString());
   const backBtnRef = React.useRef(null);
   const forwardBtnRef = React.useRef(null);
   const [pageSizes, setPageSizes] = React.useState(() => {
@@ -173,14 +173,14 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     // the icon button becomes disabled and the focus shifts to `main`
     // this presents an a11y problem for keyboard & screen reader users
     // instead, we want the focus to shift to the other pagination btn
-    if (nextPage === totalPages) {
+    if (nextPage === totalPages && backBtnRef?.current) {
       backBtnRef.current.focus();
     }
     if (onChange) {
       onChange({
         page: nextPage,
         pageSize,
-        backBtnRef
+        ref: backBtnRef
       });
     }
   }
@@ -192,14 +192,14 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     // the icon button becomes disabled and the focus shifts to `main`
     // this presents an a11y problem for keyboard & screen reader users
     // instead, we want the focus to shift to the other pagination btn
-    if (nextPage === 1) {
+    if (nextPage === 1 && forwardBtnRef?.current) {
       forwardBtnRef.current.focus();
     }
     if (onChange) {
       onChange({
         page: nextPage,
         pageSize,
-        forwardBtnRef
+        ref: forwardBtnRef
       });
     }
   }
@@ -330,10 +330,10 @@ Pagination.propTypes = {
   /**
    * The choices for `pageSize`.
    */
-  pageSizes: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].number), PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
-    text: PropTypes__default["default"].text,
-    value: PropTypes__default["default"].number
-  }))]).isRequired,
+  pageSizes: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].number.isRequired), PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+    text: PropTypes__default["default"].string.isRequired,
+    value: PropTypes__default["default"].number.isRequired
+  }).isRequired)]).isRequired,
   /**
    * The translatable text showing the current page.
    */
@@ -351,6 +351,5 @@ Pagination.propTypes = {
    */
   totalItems: PropTypes__default["default"].number
 };
-var Pagination$1 = Pagination;
 
-exports["default"] = Pagination$1;
+exports["default"] = Pagination;

package/lib/components/Pagination/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * 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 Pagination from './Pagination';
+export * from './Pagination.Skeleton';
+export default Pagination;
+export { Pagination };