@carbon/react 1.83.0 → 1.84.0-rc.0

package/es/components/OverflowMenu/OverflowMenu.js

@@ -25,10 +25,7 @@ import deprecateValuesWithin from '../../prop-types/deprecateValuesWithin.js';
 import { mapPopoverAlign } from '../../tools/mapPopoverAlign.js';
 
 const getInstanceId = setupGetInstanceId();
-const on = function (target) {
-  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-    args[_key - 1] = arguments[_key];
-  }
+const on = (target, ...args) => {
   target.addEventListener(...args);
   return {
     release() {
@@ -91,33 +88,32 @@ const getMenuOffset = (menuBody, direction, trigger, flip) => {
       };
   }
 };
-const OverflowMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    align,
-    ['aria-label']: ariaLabel = null,
-    ariaLabel: deprecatedAriaLabel,
-    children,
-    className,
-    direction = DIRECTION_BOTTOM,
-    flipped = false,
-    focusTrap = true,
-    iconClass,
-    iconDescription = 'Options',
-    id,
-    light,
-    menuOffset = getMenuOffset,
-    menuOffsetFlip = getMenuOffset,
-    menuOptionsClass,
-    onClick = noopFn,
-    onClose = noopFn,
-    onOpen = noopFn,
-    open: openProp,
-    renderIcon: IconElement = OverflowMenuVertical,
-    selectorPrimaryFocus = '[data-floating-menu-primary-focus]',
-    size = 'md',
-    innerRef,
-    ...other
-  } = _ref;
+const OverflowMenu = /*#__PURE__*/forwardRef(({
+  align,
+  ['aria-label']: ariaLabel = null,
+  ariaLabel: deprecatedAriaLabel,
+  children,
+  className,
+  direction = DIRECTION_BOTTOM,
+  flipped = false,
+  focusTrap = true,
+  iconClass,
+  iconDescription = 'Options',
+  id,
+  light,
+  menuOffset = getMenuOffset,
+  menuOffsetFlip = getMenuOffset,
+  menuOptionsClass,
+  onClick = noopFn,
+  onClose = noopFn,
+  onOpen = noopFn,
+  open: openProp,
+  renderIcon: IconElement = OverflowMenuVertical,
+  selectorPrimaryFocus = '[data-floating-menu-primary-focus]',
+  size = 'md',
+  innerRef,
+  ...other
+}, ref) => {
   const prefix = useContext(PrefixContext);
   const [open, setOpen] = useState(openProp ?? false);
   const [click, setClick] = useState(false);
@@ -155,10 +151,9 @@ const OverflowMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
     }
     prevOpenState.current = open;
   }, [open, onClose]);
-  useOutsideClick(wrapperRef, _ref2 => {
-    let {
-      target
-    } = _ref2;
+  useOutsideClick(wrapperRef, ({
+    target
+  }) => {
     if (open && (!menuBodyRef.current || target instanceof Node && !menuBodyRef.current.contains(target))) {
       closeMenu();
     }
@@ -218,11 +213,10 @@ const OverflowMenu = /*#__PURE__*/forwardRef((_ref, ref) => {
    * Focuses the next enabled overflow menu item given the currently focused
    * item index and direction to move.
    */
-  const handleOverflowMenuItemFocus = _ref3 => {
-    let {
-      currentIndex = 0,
-      direction
-    } = _ref3;
+  const handleOverflowMenuItemFocus = ({
+    currentIndex = 0,
+    direction
+  }) => {
     const enabledIndices = Children.toArray(children).reduce((acc, curr, i) => {
       if (/*#__PURE__*/React.isValidElement(curr) && !curr.props.disabled) {
         acc.push(i);
@@ -469,7 +463,7 @@ OverflowMenu.propTypes = {
    */
   selectorPrimaryFocus: PropTypes.string,
   /**
-   * Specify the size of the OverflowMenu. Currently supports either `sm`, 'md' (default) or 'lg` as an option.
+   * Specify the size of the OverflowMenu. Currently supports either `sm`, `md` (default) or `lg` as an option.
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg'])
 };

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

@@ -23,19 +23,18 @@ import deprecateValuesWithin from '../../../prop-types/deprecateValuesWithin.js'
 import { mapPopoverAlign } from '../../../tools/mapPopoverAlign.js';
 
 const defaultSize = 'md';
-const OverflowMenu = /*#__PURE__*/React.forwardRef(function OverflowMenu(_ref, forwardRef) {
-  let {
-    autoAlign = false,
-    children,
-    className,
-    label = 'Options',
-    renderIcon: IconElement = OverflowMenuVertical,
-    size = defaultSize,
-    menuAlignment = 'bottom-start',
-    tooltipAlignment,
-    menuTarget,
-    ...rest
-  } = _ref;
+const OverflowMenu = /*#__PURE__*/React.forwardRef(function OverflowMenu({
+  autoAlign = false,
+  children,
+  className,
+  label = 'Options',
+  renderIcon: IconElement = OverflowMenuVertical,
+  size = defaultSize,
+  menuAlignment = 'bottom-start',
+  tooltipAlignment,
+  menuTarget,
+  ...rest
+}, forwardRef) {
   const enableFloatingStyles = useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   const {
     refs,

package/es/components/PageHeader/PageHeader.d.ts

@@ -23,8 +23,32 @@ declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & Reac
  * -----------------------
  */
 interface PageHeaderBreadcrumbBarProps {
+    /**
+     * `true` by default to render BreadcrumbBar bottom border.
+     */
+    border?: Boolean;
     children?: React.ReactNode;
     className?: string;
+    /**
+     * Provide an optional icon to render in front of the PageHeaderContent's title.
+     */
+    renderIcon?: ComponentType | FunctionComponent;
+    /**
+     * The PageHeaderBreadcrumbBar's content actions
+     */
+    contentActions?: React.ReactNode;
+    /**
+     * `true` to set content actions flush against page actions
+     */
+    contentActionsFlush?: Boolean;
+    /**
+     * The PageHeaderContent's page actions
+     */
+    pageActions?: React.ReactNode;
+    /**
+     * `true` to set page actions flush with page
+     */
+    pageActionsFlush?: Boolean;
 }
 declare const PageHeaderBreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;
 /**
@@ -80,10 +104,10 @@ interface PageHeaderContentPageActionsProps {
     /**
      * The PageHeaderContent's page actions
      */
-    pageActions?: React.ReactNode;
+    actions?: React.ReactNode;
 }
 declare const PageHeaderContentPageActions: {
-    ({ className, children, menuButtonLabel, pageActions, ...other }: PageHeaderContentPageActionsProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, menuButtonLabel, actions, ...other }: PageHeaderContentPageActionsProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     propTypes: {
         /**
@@ -101,7 +125,7 @@ declare const PageHeaderContentPageActions: {
         /**
          * The PageHeaderContent's page actions
          */
-        pageActions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+        actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
     };
 };
 /**
@@ -194,7 +218,7 @@ declare const Root: React.ForwardRefExoticComponent<PageHeaderProps & React.RefA
 declare const BreadcrumbBar: React.ForwardRefExoticComponent<PageHeaderBreadcrumbBarProps & React.RefAttributes<HTMLDivElement>>;
 declare const Content: React.ForwardRefExoticComponent<PageHeaderContentProps & React.RefAttributes<HTMLDivElement>>;
 declare const ContentPageActions: {
-    ({ className, children, menuButtonLabel, pageActions, ...other }: PageHeaderContentPageActionsProps): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, menuButtonLabel, actions, ...other }: PageHeaderContentPageActionsProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
     propTypes: {
         /**
@@ -212,7 +236,7 @@ declare const ContentPageActions: {
         /**
          * The PageHeaderContent's page actions
          */
-        pageActions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+        actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
     };
 };
 declare const ContentText: {

package/es/components/PageHeader/PageHeader.js

@@ -21,22 +21,25 @@ import '../Tooltip/Tooltip.js';
 import AspectRatio from '../AspectRatio/AspectRatio.js';
 import { createOverflowHandler } from '@carbon/utilities';
 import { Tabs as Tabs$1 } from '../Tabs/Tabs.js';
+import '../Grid/FlexGrid.js';
+import { Grid as GridAsGridComponent } from '../Grid/Grid.js';
+import '../Grid/Row.js';
+import Column from '../Grid/Column.js';
+import '../Grid/ColumnHang.js';
+import '../Grid/GridContext.js';
 import { Text } from '../Text/Text.js';
 
-var _p, _p2;
-
 /**
  * ----------
  * PageHeader
  * ----------
  */
 
-const PageHeader = /*#__PURE__*/React.forwardRef(function PageHeader(_ref, ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref;
+const PageHeader = /*#__PURE__*/React.forwardRef(function PageHeader({
+  className,
+  children,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header`]: true
@@ -44,7 +47,7 @@ const PageHeader = /*#__PURE__*/React.forwardRef(function PageHeader(_ref, ref)
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames,
     ref: ref
-  }, other), _p || (_p = /*#__PURE__*/React.createElement("p", null, "page header")), children);
+  }, other), children);
 });
 PageHeader.displayName = 'PageHeader';
 
@@ -54,20 +57,44 @@ PageHeader.displayName = 'PageHeader';
  * -----------------------
  */
 
-const PageHeaderBreadcrumbBar = /*#__PURE__*/React.forwardRef(function PageHeaderBreadcrumbBar(_ref2, ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref2;
+const PageHeaderBreadcrumbBar = /*#__PURE__*/React.forwardRef(function PageHeaderBreadcrumbBar({
+  border = true,
+  className,
+  children,
+  renderIcon: IconElement,
+  contentActions,
+  contentActionsFlush,
+  pageActions,
+  pageActionsFlush,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx({
-    [`${prefix}--page-header__breadcrumb-bar`]: true
+    [`${prefix}--page-header__breadcrumb-bar`]: true,
+    [`${prefix}--page-header__breadcrumb-bar-border`]: border,
+    [`${prefix}--page-header__breadcrumb__actions-flush`]: pageActionsFlush
   }, className);
+  const contentActionsClasses = cx({
+    [`${prefix}--page-header__breadcrumb__content-actions`]: !contentActionsFlush
+  });
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames,
     ref: ref
-  }, other), _p2 || (_p2 = /*#__PURE__*/React.createElement("p", null, "page header breadcrumb bar")), children);
+  }, other), /*#__PURE__*/React.createElement(GridAsGridComponent, null, /*#__PURE__*/React.createElement(Column, {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__breadcrumb-container`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__breadcrumb-wrapper`
+  }, IconElement && /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__breadcrumb__icon`
+  }, /*#__PURE__*/React.createElement(IconElement, null)), children), /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__breadcrumb__actions`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: contentActionsClasses
+  }, contentActions), pageActions)))));
 });
 PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
 
@@ -77,16 +104,15 @@ PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
  * -----------------
  */
 
-const PageHeaderContent = /*#__PURE__*/React.forwardRef(function PageHeaderContent(_ref3, ref) {
-  let {
-    className,
-    children,
-    title,
-    renderIcon: IconElement,
-    contextualActions,
-    pageActions,
-    ...other
-  } = _ref3;
+const PageHeaderContent = /*#__PURE__*/React.forwardRef(function PageHeaderContent({
+  className,
+  children,
+  title,
+  renderIcon: IconElement,
+  contextualActions,
+  pageActions,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__content`]: true
@@ -103,7 +129,11 @@ const PageHeaderContent = /*#__PURE__*/React.forwardRef(function PageHeaderConte
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames,
     ref: ref
-  }, other), /*#__PURE__*/React.createElement("div", {
+  }, other), /*#__PURE__*/React.createElement(GridAsGridComponent, null, /*#__PURE__*/React.createElement(Column, {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--page-header__content__title-wrapper`
   }, /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--page-header__content__start`
@@ -123,7 +153,7 @@ const PageHeaderContent = /*#__PURE__*/React.forwardRef(function PageHeaderConte
     className: `${prefix}--page-header__content__title`
   }, title)), contextualActions && /*#__PURE__*/React.createElement("div", {
     className: `${prefix}--page-header__content__contextual-actions`
-  }, contextualActions)), pageActions), children);
+  }, contextualActions)), pageActions), children)));
 });
 PageHeaderContent.displayName = 'PageHeaderContent';
 PageHeaderContent.propTypes = {
@@ -163,14 +193,13 @@ PageHeaderContent.propTypes = {
  * ----------------
  */
 
-const PageHeaderContentPageActions = _ref4 => {
-  let {
-    className,
-    children,
-    menuButtonLabel = 'Actions',
-    pageActions,
-    ...other
-  } = _ref4;
+const PageHeaderContentPageActions = ({
+  className,
+  children,
+  menuButtonLabel = 'Actions',
+  actions,
+  ...other
+}) => {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__content__page-actions`]: true
@@ -189,13 +218,13 @@ const PageHeaderContentPageActions = _ref4 => {
     }
   }, [menuButtonVisibility]);
   useEffect(() => {
-    if (!containerRef.current || !Array.isArray(pageActions)) return;
+    if (!containerRef.current || !Array.isArray(actions)) return;
     createOverflowHandler({
       container: containerRef.current,
       // exclude the hidden menu button from children
       maxVisibleItems: containerRef.current.children.length - 1,
       onChange: (visible, hidden) => {
-        setHiddenItems(pageActions?.slice(visible.length));
+        setHiddenItems(actions?.slice(visible.length));
         if (hidden.length > 0) {
           setMenuButtonVisibility(true);
         }
@@ -205,10 +234,12 @@ const PageHeaderContentPageActions = _ref4 => {
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames,
     ref: containerRef
-  }, other), pageActions && /*#__PURE__*/React.createElement(React.Fragment, null, Array.isArray(pageActions) && /*#__PURE__*/React.createElement(React.Fragment, null, pageActions.map(action => /*#__PURE__*/React.createElement("div", {
-    key: action.id,
-    className: "action"
-  }, action.body)), /*#__PURE__*/React.createElement("span", {
+  }, other), actions && /*#__PURE__*/React.createElement(React.Fragment, null, Array.isArray(actions) && /*#__PURE__*/React.createElement(React.Fragment, null, actions.map(action => /*#__PURE__*/React.createElement("div", {
+    key: action.id
+  }, /*#__PURE__*/React.cloneElement(action.body, {
+    ...action.body.props,
+    onClick: action.onClick
+  }))), /*#__PURE__*/React.createElement("span", {
     "data-offset": true,
     "data-hidden": true,
     ref: offsetRef
@@ -216,11 +247,10 @@ const PageHeaderContentPageActions = _ref4 => {
     menuAlignment: "bottom-end",
     label: menuButtonLabel,
     size: "md"
-  }, [...hiddenItems].reverse().map(item => /*#__PURE__*/React.createElement(MenuItem, {
+  }, [...hiddenItems].reverse().map(item => /*#__PURE__*/React.createElement(MenuItem, _extends({
     key: item.id,
-    label: item.label,
     onClick: item.onClick
-  })))))));
+  }, item.menuItem))))))));
 };
 PageHeaderContentPageActions.displayName = 'PageHeaderContentPageActions';
 PageHeaderContentPageActions.propTypes = {
@@ -239,7 +269,7 @@ PageHeaderContentPageActions.propTypes = {
   /**
    * The PageHeaderContent's page actions
    */
-  pageActions: PropTypes.oneOfType([PropTypes.node, PropTypes.array])
+  actions: PropTypes.oneOfType([PropTypes.node, PropTypes.array])
 };
 
 /**
@@ -248,13 +278,12 @@ PageHeaderContentPageActions.propTypes = {
  * ----------------
  */
 
-const PageHeaderContentText = _ref5 => {
-  let {
-    className,
-    children,
-    subtitle,
-    ...other
-  } = _ref5;
+const PageHeaderContentText = ({
+  className,
+  children,
+  subtitle,
+  ...other
+}) => {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__content__body`]: true
@@ -288,12 +317,11 @@ PageHeaderContentText.propTypes = {
  * ----------------
  */
 
-const PageHeaderHeroImage = _ref6 => {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref6;
+const PageHeaderHeroImage = ({
+  className,
+  children,
+  ...other
+}) => {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__hero-image`]: true
@@ -324,12 +352,11 @@ PageHeaderHeroImage.propTypes = {
  * ----------------
  */
 
-const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar(_ref7, ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref7;
+const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar({
+  className,
+  children,
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__tab-bar`]: true
@@ -340,13 +367,32 @@ const PageHeaderTabBar = /*#__PURE__*/React.forwardRef(function PageHeaderTabBar
   }, other), children);
 });
 PageHeaderTabBar.displayName = 'PageHeaderTabBar';
-const PageHeaderTabs = /*#__PURE__*/React.forwardRef(function PageHeaderTabs(_ref8, ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref8;
-  return /*#__PURE__*/React.createElement(Tabs$1, other, children);
+const PageHeaderTabs = /*#__PURE__*/React.forwardRef(function PageHeaderTabs({
+  className,
+  children,
+  ...other
+}, ref) {
+  const prefix = usePrefix();
+  const childrenArray = React.Children.toArray(children);
+  let tabListElement = null;
+  const otherChildren = [];
+
+  // extract the TabList component so we can wrap a needed div around for
+  // layout purposes
+  childrenArray.forEach(child => {
+    if (child?.type?.displayName === 'TabList' || child?.type?.name === 'TabList') {
+      tabListElement = child;
+    } else {
+      otherChildren.push(child);
+    }
+  });
+  return /*#__PURE__*/React.createElement(Tabs$1, other, tabListElement && /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__tablist-wrapper`
+  }, /*#__PURE__*/React.createElement(GridAsGridComponent, null, /*#__PURE__*/React.createElement(Column, {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, tabListElement))), otherChildren);
 });
 PageHeaderTabs.displayName = 'PageHeaderTabs';
 

package/es/components/Pagination/Pagination.Skeleton.js

@@ -13,11 +13,10 @@ import SkeletonText from '../SkeletonText/SkeletonText.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 
 var _SkeletonText, _SkeletonText2, _SkeletonText3, _SkeletonText4;
-function PaginationSkeleton(_ref) {
-  let {
-    className,
-    ...rest
-  } = _ref;
+function PaginationSkeleton({
+  className,
+  ...rest
+}) {
   const prefix = usePrefix();
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cx(`${prefix}--pagination`, `${prefix}--skeleton`, className)

package/es/components/Pagination/Pagination.js

@@ -49,31 +49,30 @@ function getPageSize(pageSizes, pageSize) {
   }
   return pageSizes[0].value;
 }
-const Pagination = /*#__PURE__*/React.forwardRef(function Pagination(_ref, ref) {
-  let {
-    backwardText = 'Previous page',
-    className: customClassName = '',
-    disabled = false,
-    forwardText = 'Next page',
-    id,
-    isLastPage = false,
-    itemText = (min, max) => `${min}–${max} items`,
-    itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`,
-    itemsPerPageText = 'Items per page:',
-    onChange,
-    pageNumberText: _pageNumberText = 'Page Number',
-    pageRangeText = (_current, total) => `of ${total} ${total === 1 ? 'page' : 'pages'}`,
-    page: controlledPage = 1,
-    pageInputDisabled,
-    pageSize: controlledPageSize,
-    pageSizeInputDisabled,
-    pageSizes: controlledPageSizes,
-    pageText = page => `page ${page}`,
-    pagesUnknown = false,
-    size = 'md',
-    totalItems,
-    ...rest
-  } = _ref;
+const Pagination = /*#__PURE__*/React.forwardRef(function Pagination({
+  backwardText = 'Previous page',
+  className: customClassName = '',
+  disabled = false,
+  forwardText = 'Next page',
+  id,
+  isLastPage = false,
+  itemText = (min, max) => `${min}–${max} items`,
+  itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`,
+  itemsPerPageText = 'Items per page:',
+  onChange,
+  pageNumberText: _pageNumberText = 'Page Number',
+  pageRangeText = (_current, total) => `of ${total} ${total === 1 ? 'page' : 'pages'}`,
+  page: controlledPage = 1,
+  pageInputDisabled,
+  pageSize: controlledPageSize,
+  pageSizeInputDisabled,
+  pageSizes: controlledPageSizes,
+  pageText = page => `page ${page}`,
+  pagesUnknown = false,
+  size = 'md',
+  totalItems,
+  ...rest
+}, ref) {
   const prefix = usePrefix();
   const inputId = useFallbackId(id?.toString());
   const backBtnRef = useRef(null);

package/es/components/Pagination/experimental/PageSelector.js

@@ -15,15 +15,14 @@ import '../../Select/Select.Skeleton.js';
 import SelectItem from '../../SelectItem/SelectItem.js';
 import { usePrefix } from '../../../internal/usePrefix.js';
 
-function PageSelector(_ref) {
-  let {
-    className = null,
-    currentPage,
-    id = 1,
-    labelText = 'Current page number',
-    totalPages,
-    ...other
-  } = _ref;
+function PageSelector({
+  className = null,
+  currentPage,
+  id = 1,
+  labelText = 'Current page number',
+  totalPages,
+  ...other
+}) {
   const prefix = usePrefix();
   const namespace = `${prefix}--unstable-pagination__page-selector`;
   const instanceId = `${namespace}__select-${useId()}`;