@carbon/react 1.56.0 → 1.57.0

package/lib/components/MultiSelect/MultiSelect.js

@@ -626,6 +626,5 @@ MultiSelect.propTypes = {
    */
   warnText: PropTypes__default["default"].node
 };
-var MultiSelect$1 = MultiSelect;
 
-exports["default"] = MultiSelect$1;
+exports["default"] = MultiSelect;

package/lib/components/MultiSelect/MultiSelectPropTypes.d.ts

@@ -0,0 +1,62 @@
+/**
+ * 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';
+export declare const sortingPropTypes: {
+    /**
+     * Provide a compare function that is used to determine the ordering of
+     * options. `compareItems` has the following function signature:
+     *
+     * compareFunction :
+     *  (itemA: string, itemB: string, { locale: string }) => number
+     */
+    compareItems: PropTypes.Requireable<(...args: any[]) => any>;
+    /**
+     * Provide a method that sorts all options in the control. Overriding this
+     * prop means that you also have to handle the sort logic for selected versus
+     * un-selected items. If you just want to control ordering, consider the
+     * `compareItems` prop instead.
+     *
+     * `sortItems` has the following signature:
+     *
+     * sortItems :
+     *   (items: Array<Item>, {
+     *     selectedItems: Array<Item>,
+     *     itemToString: Item => string,
+     *     compareItems: (itemA: string, itemB: string, {
+     *       locale: string
+     *     }) => number,
+     *     locale: string,
+     *   }) => Array<Item>
+     */
+    sortItems: PropTypes.Requireable<(...args: any[]) => any>;
+};
+export interface ItemBase {
+    disabled?: boolean;
+}
+export interface SortingPropTypes<Item extends ItemBase> {
+    /**
+     * Provide a compare function that is used
+     * to determine the ordering of options.
+     */
+    compareItems(itemA: string, itemB: string, ctx: {
+        locale: string;
+    }): number;
+    /**
+     * Provide a method that sorts all options in the control. Overriding this
+     * prop means that you also have to handle the sort logic for selected versus
+     * un-selected items. If you just want to control ordering, consider the
+     * `compareItems` prop instead.
+     */
+    sortItems(items: Item[], state: {
+        selectedItems: Item[];
+        itemToString(item: Item): string;
+        compareItems(itemA: string, itemB: string, ctx: {
+            locale: string;
+        }): number;
+        locale: string;
+    }): Item[];
+}

package/lib/components/MultiSelect/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 MultiSelect from './MultiSelect';
+import { default as FilterableMultiSelect } from './FilterableMultiSelect';
+export { FilterableMultiSelect, MultiSelect };
+export default MultiSelect;

package/lib/components/MultiSelect/index.js

@@ -14,6 +14,8 @@ var MultiSelect = require('./MultiSelect.js');
 var FilterableMultiSelect = require('./FilterableMultiSelect.js');
 
 FilterableMultiSelect["default"].displayName = 'MultiSelect.Filterable';
+// @ts-expect-error: The attribute indeed does not exist on the object,
+// but since it is already deprecated, we do not have to fix it.
 MultiSelect["default"].Filterable = FilterableMultiSelect["default"];
 if (process.env.NODE_ENV !== "production") {
   deprecateFieldOnObject.deprecateFieldOnObject(MultiSelect["default"], 'Filterable', FilterableMultiSelect["default"]);

package/lib/components/OverflowMenu/OverflowMenu.d.ts

@@ -0,0 +1,300 @@
+/**
+ * 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';
+/**
+ * @param {Element} menuBody The menu body with the menu arrow.
+ * @param {string} direction The floating menu direction.
+ * @returns {FloatingMenu~offset} The adjustment of the floating menu position, upon the position of the menu arrow.
+ * @private
+ */
+export declare const getMenuOffset: (menuBody: any, direction: any, trigger: any, flip: any) => {
+    left: number;
+    top: number;
+} | undefined;
+interface Offset {
+    top: number;
+    left: number;
+}
+interface OverflowMenuProps {
+    /**
+     * Specify a label to be read by screen readers on the container node
+     */
+    ['aria-label']: string;
+    /**
+     * Deprecated, please use `aria-label` instead.
+     * Specify a label to be read by screen readers on the container note.
+     * @deprecated
+     * */
+    ariaLabel: string;
+    /**
+     * The child nodes.
+     * */
+    children: React.ReactNode;
+    /**
+     *  The CSS class names.
+     *  */
+    className?: string;
+    /**
+     * The menu direction.
+     */
+    direction?: string;
+    /**
+     * `true` if the menu alignment should be flipped.
+     */
+    flipped?: boolean;
+    /**
+     * Enable or disable focus trap behavior
+     */
+    focusTrap?: boolean;
+    /**
+     * The CSS class for the icon.
+     */
+    iconClass?: string;
+    /**
+     * The element ID.
+     */
+    id?: string;
+    /**
+     * The icon description.
+     */
+    iconDescription?: string;
+    /**
+     * `true` to use the light version. For use on $ui-01 backgrounds only.
+     * Don't use this to make OverflowMenu background color same as container background color.
+     */
+    light?: boolean;
+    /**
+     * The adjustment in position applied to the floating menu.
+     */
+    menuOffset?: Offset | (() => void);
+    /**
+     * The adjustment in position applied to the floating menu.
+     */
+    menuOffsetFlip?: Offset | (() => void);
+    /**
+     * The class to apply to the menu options
+     */
+    menuOptionsClass?: string;
+    /**
+     * The event handler for the `click` event.
+     */
+    onClick?: (evt?: any) => void;
+    /**
+     * Function called when menu is closed
+     */
+    onClose?: () => void;
+    /**
+     * Function called when menu is opened
+     */
+    onOpen?: () => void;
+    /**
+     * `true` if the menu should be open.
+     */
+    open?: boolean;
+    /**
+     * Function called to override icon rendering.
+     */
+    renderIcon?: React.ElementType;
+    /**
+     * Specify a CSS selector that matches the DOM element that should
+     * be focused when the OverflowMenu opens
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * The ref to the HTML element that should receive focus when the OverflowMenu opens
+     */
+    innerRef?: React.Ref<any>;
+}
+interface OverflowMenuState {
+    open: boolean;
+    prevOpen?: boolean;
+    hasMountedTrigger: boolean;
+    click: boolean;
+}
+interface ReleaseHandle {
+    release: () => null;
+}
+declare class OverflowMenu extends React.Component<OverflowMenuProps, OverflowMenuState> {
+    state: OverflowMenuState;
+    instanceId: number;
+    static propTypes: {
+        /**
+         * Specify a label to be read by screen readers on the container node
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
+         * Specify a label to be read by screen readers on the container note.
+         */
+        ariaLabel: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * The child nodes.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * The CSS class names.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * The menu direction.
+         */
+        direction: PropTypes.Requireable<string>;
+        /**
+         * `true` if the menu alignment should be flipped.
+         */
+        flipped: PropTypes.Requireable<boolean>;
+        /**
+         * Enable or disable focus trap behavior
+         */
+        focusTrap: PropTypes.Requireable<boolean>;
+        /**
+         * The CSS class for the icon.
+         */
+        iconClass: PropTypes.Requireable<string>;
+        /**
+         * The icon description.
+         */
+        iconDescription: PropTypes.Requireable<string>;
+        /**
+         * The element ID.
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * `true` to use the light version. For use on $ui-01 backgrounds only.
+         * Don't use this to make OverflowMenu background color same as container background color.
+         */
+        light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * The adjustment in position applied to the floating menu.
+         */
+        menuOffset: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+            top: PropTypes.Requireable<number>;
+            left: PropTypes.Requireable<number>;
+        }> | null | undefined>>;
+        /**
+         * The adjustment in position applied to the floating menu.
+         */
+        menuOffsetFlip: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
+            top: PropTypes.Requireable<number>;
+            left: PropTypes.Requireable<number>;
+        }> | null | undefined>>;
+        /**
+         * The class to apply to the menu options
+         */
+        menuOptionsClass: PropTypes.Requireable<string>;
+        /**
+         * The event handler for the `click` event.
+         */
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Function called when menu is closed
+         */
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The event handler for the `focus` event.
+         */
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The event handler for the `keydown` event.
+         */
+        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Function called when menu is opened
+         */
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * `true` if the menu should be open.
+         */
+        open: PropTypes.Requireable<boolean>;
+        /**
+         * Function called to override icon rendering.
+         */
+        renderIcon: PropTypes.Requireable<object>;
+        /**
+         * Specify a CSS selector that matches the DOM element that should
+         * be focused when the OverflowMenu opens
+         */
+        selectorPrimaryFocus: PropTypes.Requireable<string>;
+        /**
+         * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+         */
+        size: PropTypes.Requireable<string>;
+    };
+    static contextType: React.Context<string>;
+    /**
+     * The handle of `onfocusin` or `focus` event handler.
+     * @private
+     */
+    _hFocusIn: ReleaseHandle | null;
+    /**
+     * The timeout handle for handling `blur` event.
+     * @private
+     */
+    _hBlurTimeout: any;
+    /**
+     * The element ref of the tooltip's trigger button.
+     * @type {React.RefObject<Element>}
+     * @private
+     */
+    _triggerRef: React.RefObject<unknown>;
+    componentDidUpdate(_: any, prevState: any): void;
+    componentDidMount(): void;
+    static getDerivedStateFromProps({ open }: {
+        open: any;
+    }, state: any): {
+        open: any;
+        prevOpen: any;
+    } | null;
+    componentWillUnmount(): void;
+    handleClick: (evt: any) => void;
+    closeMenuAndFocus: () => void;
+    closeMenuOnEscape: () => void;
+    handleKeyPress: (evt: any) => void;
+    handleClickOutside: (evt: any) => void;
+    closeMenu: (onCloseMenu?: any) => void;
+    focusMenuEl: () => void;
+    /**
+     * Focuses the next enabled overflow menu item given the currently focused
+     * item index and direction to move
+     * @param {object} params
+     * @param {number} params.currentIndex - the index of the currently focused
+     * overflow menu item in the list of overflow menu items
+     * @param {number} params.direction - number denoting the direction to move
+     * focus (1 for forwards, -1 for backwards)
+     */
+    handleOverflowMenuItemFocus: ({ currentIndex, direction }: {
+        currentIndex: any;
+        direction: any;
+    }) => void;
+    /**
+     * Handles the floating menu being unmounted or non-floating menu being
+     * mounted or unmounted.
+     * @param {Element} menuBody The DOM element of the menu body.
+     * @private
+     */
+    _menuBody: HTMLElement | null;
+    _bindMenuBody: (menuBody: HTMLElement | null) => void;
+    /**
+     * Handles the floating menu being placed.
+     * @param {Element} menuBody The DOM element of the menu body.
+     * @private
+     */
+    _handlePlace: (menuBody: any) => void;
+    /**
+     * @returns {Element} The DOM element where the floating menu is placed in.
+     */
+    _getTarget: () => Element;
+    render(): import("react/jsx-runtime").JSX.Element;
+}
+export { OverflowMenu };
+declare const _default: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export default _default;

package/lib/components/OverflowMenu/OverflowMenu.js

@@ -104,10 +104,16 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
       }
   }
 };
-class OverflowMenu extends React.Component {
+class OverflowMenu extends React__default["default"].Component {
   constructor() {
     super(...arguments);
-    _rollupPluginBabelHelpers.defineProperty(this, "state", {});
+    _rollupPluginBabelHelpers.defineProperty(this, "state", {
+      open: false,
+      // Set a default value for 'open'
+      hasMountedTrigger: false,
+      // Set a default value for 'hasMountedTrigger'
+      click: false // Set a default value for 'click'
+    });
     _rollupPluginBabelHelpers.defineProperty(this, "instanceId", getInstanceId());
     /**
      * The handle of `onfocusin` or `focus` event handler.
@@ -141,8 +147,8 @@ class OverflowMenu extends React.Component {
       }
     });
     _rollupPluginBabelHelpers.defineProperty(this, "closeMenuAndFocus", () => {
-      let wasClicked = this.state.click;
-      let wasOpen = this.state.open;
+      const wasClicked = this.state.click;
+      const wasOpen = this.state.open;
       this.closeMenu(() => {
         if (wasOpen && !wasClicked) {
           this.focusMenuEl();
@@ -150,7 +156,7 @@ class OverflowMenu extends React.Component {
       });
     });
     _rollupPluginBabelHelpers.defineProperty(this, "closeMenuOnEscape", () => {
-      let wasOpen = this.state.open;
+      const wasOpen = this.state.open;
       this.closeMenu(() => {
         if (wasOpen) {
           this.focusMenuEl();
@@ -212,7 +218,7 @@ class OverflowMenu extends React.Component {
         direction
       } = _ref;
       const enabledIndices = React__default["default"].Children.toArray(this.props.children).reduce((acc, curr, i) => {
-        if (!curr.props.disabled) {
+        if ( /*#__PURE__*/React__default["default"].isValidElement(curr) && !curr.props.disabled) {
           acc.push(i);
         }
         return acc;
@@ -237,6 +243,7 @@ class OverflowMenu extends React.Component {
      * @param {Element} menuBody The DOM element of the menu body.
      * @private
      */
+    _rollupPluginBabelHelpers.defineProperty(this, "_menuBody", null);
     _rollupPluginBabelHelpers.defineProperty(this, "_bindMenuBody", menuBody => {
       if (!menuBody) {
         this._menuBody = menuBody;
@@ -279,7 +286,7 @@ class OverflowMenu extends React.Component {
       const {
         current: triggerEl
       } = this._triggerRef;
-      return triggerEl && triggerEl.closest('[data-floating-menu-container]') || document.body;
+      return triggerEl instanceof Element && triggerEl.closest('[data-floating-menu-container]') || document.body;
     });
   }
   componentDidUpdate(_, prevState) {
@@ -360,18 +367,19 @@ class OverflowMenu extends React.Component {
       [`${prefix}--overflow-menu-options--${size}`]: size
     });
     const overflowMenuIconClasses = cx__default["default"](`${prefix}--overflow-menu__icon`, iconClass);
-    const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => /*#__PURE__*/React__default["default"].cloneElement(child, {
-      closeMenu: child?.props?.closeMenu || this.closeMenuAndFocus,
+    const childrenWithProps = React__default["default"].Children.toArray(children).map((child, index) => /*#__PURE__*/React__default["default"].isValidElement(child) ? /*#__PURE__*/React__default["default"].cloneElement(child, {
+      // @ts-expect-error: PropTypes are not expressive enough to cover this case
+      closeMenu: child.props.closeMenu || this.closeMenuAndFocus,
       handleOverflowMenuItemFocus: this.handleOverflowMenuItemFocus,
       ref: e => {
         this[`overflowMenuItem${index}`] = e;
       },
       index
-    }));
+    }) : null);
     const menuBodyId = `overflow-menu-${this.instanceId}__menu-body`;
     const menuBody = /*#__PURE__*/React__default["default"].createElement("ul", {
       className: overflowMenuOptionsClasses,
-      tabIndex: "-1",
+      tabIndex: -1,
       role: "menu",
       "aria-label": ariaLabel || deprecatedAriaLabel,
       onKeyDown: this.handleKeyPress,
@@ -398,12 +406,12 @@ class OverflowMenu extends React.Component {
       onClickOutside: this.handleClickOutside
     }, /*#__PURE__*/React__default["default"].createElement("span", {
       className: `${prefix}--overflow-menu__wrapper`,
-      "aria-owns": open ? menuBodyId : null
+      "aria-owns": open ? menuBodyId : undefined
     }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, _rollupPluginBabelHelpers["extends"]({}, other, {
       type: "button",
       "aria-haspopup": true,
       "aria-expanded": open,
-      "aria-controls": open ? menuBodyId : null,
+      "aria-controls": open ? menuBodyId : undefined,
       className: overflowMenuClasses,
       onClick: this.handleClick,
       id: id,

package/lib/components/OverflowMenu/next/index.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright IBM Corp. 2020, 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, { type ComponentType, type FunctionComponent } from 'react';
+interface OverflowMenuProps {
+    /**
+     * A collection of MenuItems to be rendered within this OverflowMenu.
+     */
+    children?: React.ReactNode;
+    /**
+     * Additional CSS class names for the trigger button.
+     */
+    className?: string;
+    /**
+     * A label describing the options available. Is used in the trigger tooltip and as the menu's accessible label.
+     */
+    label?: string;
+    /**
+     * Experimental property. Specify how the menu should align with the button element
+     */
+    menuAlignment?: 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    /**
+     * Optionally provide a custom icon to be rendered on the trigger button.
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+    /**
+     * Specify the size of the menu, from a list of available sizes.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Specify how the trigger tooltip should be aligned.
+     */
+    tooltipAlignment?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
+}
+declare const OverflowMenu: React.ForwardRefExoticComponent<OverflowMenuProps & React.RefAttributes<HTMLDivElement>>;
+export { OverflowMenu };

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

@@ -62,10 +62,10 @@ const OverflowMenu = /*#__PURE__*/React__default["default"].forwardRef(function
   }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: containerClasses,
-    "aria-owns": open ? id : null,
+    "aria-owns": open ? id : undefined,
     ref: forwardRef
   }), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
-    "aria-controls": open ? id : null,
+    "aria-controls": open ? id : undefined,
     "aria-haspopup": true,
     "aria-expanded": open,
     className: triggerClasses,
@@ -107,8 +107,9 @@ OverflowMenu.propTypes = {
    */
   menuAlignment: PropTypes__default["default"].oneOf(['top-start', 'top-end', 'bottom-start', 'bottom-end']),
   /**
-   * Otionally provide a custom icon to be rendered on the trigger button.
+   * Optionally provide a custom icon to be rendered on the trigger button.
    */
+  // @ts-expect-error: PropTypes are not expressive enough to cover this case
   renderIcon: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
   /**
    * Specify the size of the menu, from a list of available sizes.

package/lib/components/Pagination/Pagination.js

@@ -78,10 +78,10 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     pageSize: controlledPageSize,
     pageSizeInputDisabled,
     pageSizes: controlledPageSizes,
-    pageText = (page, pagesUnknown) => `page ${pagesUnknown ? '' : page}`,
+    pageText = page => `page ${page}`,
     pagesUnknown = false,
     size = 'md',
-    totalItems = 1,
+    totalItems,
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
@@ -103,7 +103,7 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     [`${prefix}--pagination--${size}`]: size,
     [customClassName]: !!customClassName
   });
-  const totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
+  const totalPages = totalItems ? Math.max(Math.ceil(totalItems / pageSize), 1) : NaN;
   const backButtonDisabled = disabled || page === 1;
   const backButtonClasses = cx__default["default"]({
     [`${prefix}--pagination__button`]: true,
@@ -155,7 +155,7 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
   }
   function handlePageInputChange(event) {
     const page = Number(event.target.value);
-    if (page > 0 && page <= Math.max(Math.ceil(totalItems / pageSize), 1)) {
+    if (page > 0 && totalItems && page <= Math.max(Math.ceil(totalItems / pageSize), 1)) {
       setPage(page);
       if (onChange) {
         onChange({
@@ -228,11 +228,11 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     text: String(sizeObj.text)
   }))), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--pagination__text ${prefix}--pagination__items-count`
-  }, pagesUnknown ? itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, pagesUnknown || !totalItems ? itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--pagination__right`
   }, pagesUnknown ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${prefix}--pagination__text ${prefix}--pagination__page-text`
-  }, pagesUnknown ? pageText(page, pagesUnknown) : pageRangeText(page, totalPages)) : null, /*#__PURE__*/React__default["default"].createElement(Select["default"], {
+    className: `${prefix}--pagination__text ${prefix}--pagination__page-text ${prefix}--pagination__unknown-pages-text`
+  }, pageText(page)) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Select["default"], {
     id: `${prefix}-pagination-select-${inputId}-right`,
     className: `${prefix}--select__page-number`,
     labelText: `Page number, of ${totalPages} pages`,
@@ -241,9 +241,9 @@ const Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pa
     onChange: handlePageInputChange,
     value: page,
     disabled: pageInputDisabled || disabled
-  }, selectItems), pagesUnknown ? null : /*#__PURE__*/React__default["default"].createElement("span", {
+  }, selectItems), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--pagination__text`
-  }, pagesUnknown ? pageText(page, pagesUnknown) : pageRangeText(page, totalPages)), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, pageRangeText(page, totalPages))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--pagination__control-buttons`
   }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     align: "top",

package/lib/components/RadioButton/RadioButton.d.ts

@@ -63,6 +63,10 @@ export interface RadioButtonProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Specify the value of the `<RadioButton>`
      */
     value?: string | number;
+    /**
+     * `true` to specify if the input is required.
+     */
+    required?: boolean;
 }
 declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<unknown>>;
 export default RadioButton;

package/lib/components/RadioButton/RadioButton.js

@@ -37,6 +37,7 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((props, re
     onChange = () => {},
     value = '',
     slug,
+    required,
     ...rest
   } = props;
   const prefix = usePrefix.usePrefix();
@@ -70,7 +71,8 @@ const RadioButton = /*#__PURE__*/React__default["default"].forwardRef((props, re
     ref: mergeRefs["default"](inputRef, ref),
     disabled: disabled,
     value: value,
-    name: name
+    name: name,
+    required: required
   })), /*#__PURE__*/React__default["default"].createElement("label", {
     htmlFor: uniqueId,
     className: `${prefix}--radio-button__label`
@@ -129,6 +131,10 @@ RadioButton.propTypes = {
    * Provide a handler that is invoked when a user clicks on the control
    */
   onClick: PropTypes__default["default"].func,
+  /**
+   * `true` to specify if the control is required.
+   */
+  required: PropTypes__default["default"].bool,
   /**
    * **Experimental**: Provide a `Slug` component to be rendered inside the `RadioButton` component
    */

package/lib/components/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -79,6 +79,10 @@ export interface RadioButtonGroupProps extends Omit<React.InputHTMLAttributes<HT
      * Specify the value that is currently selected in the group
      */
     valueSelected?: string | number;
+    /**
+     * `true` to specify if input selection in group is required.
+     */
+    required?: boolean;
 }
 declare const RadioButtonGroup: React.ForwardRefExoticComponent<RadioButtonGroupProps & React.RefAttributes<unknown>>;
 export default RadioButtonGroup;