@carbon/react 1.83.0 → 1.84.0

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

@@ -6,7 +6,7 @@
  */
 import React, { type ComponentType, type FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
-import { Tabs as BaseTabs } from '../Tabs/Tabs';
+import { TYPES } from '../Tag/Tag';
 /**
  * ----------
  * PageHeader
@@ -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>>;
     };
 };
 /**
@@ -175,16 +199,18 @@ declare const PageHeaderHeroImage: {
  * PageHeaderTabBar
  * ----------------
  */
+interface TagItem {
+    type: keyof typeof TYPES;
+    text: string;
+    size?: 'sm' | 'md' | 'lg';
+    id: string;
+}
 interface PageHeaderTabBarProps {
     children?: React.ReactNode;
     className?: string;
+    tags?: TagItem[];
 }
 declare const PageHeaderTabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
-interface PageHeaderTabsProps extends React.ComponentProps<typeof BaseTabs> {
-    children?: React.ReactNode;
-    className?: string;
-}
-declare const PageHeaderTabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * -------
  * Exports
@@ -194,7 +220,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 +238,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: {
@@ -248,6 +274,5 @@ declare const HeroImage: {
     };
 };
 declare const TabBar: React.ForwardRefExoticComponent<PageHeaderTabBarProps & React.RefAttributes<HTMLDivElement>>;
-declare const Tabs: React.ForwardRefExoticComponent<PageHeaderTabsProps & React.RefAttributes<HTMLDivElement>>;
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, Tabs, };
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, PageHeaderTabsProps, };
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, TabBar, };
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderHeroImageProps, PageHeaderTabBarProps, };

package/es/components/PageHeader/PageHeader.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useRef, useState, useLayoutEffect, useEffect } from 'react';
+import React, { useRef, useState, useLayoutEffect, useEffect, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -20,23 +20,33 @@ import { DefinitionTooltip } from '../Tooltip/DefinitionTooltip.js';
 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 Tag from '../Tag/Tag.js';
+import '../Tag/DismissibleTag.js';
+import OperationalTag from '../Tag/OperationalTag.js';
+import '../Tag/SelectableTag.js';
+import '../Tag/Tag.Skeleton.js';
+import useOverflowItems from '../../internal/useOverflowItems.js';
+import { Popover, PopoverContent } from '../Popover/index.js';
+import { useId } from '../../internal/useId.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 +54,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 +64,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 +111,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 +136,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 +160,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 +200,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 +225,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 +241,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 +254,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 +276,7 @@ PageHeaderContentPageActions.propTypes = {
   /**
    * The PageHeaderContent's page actions
    */
-  pageActions: PropTypes.oneOfType([PropTypes.node, PropTypes.array])
+  actions: PropTypes.oneOfType([PropTypes.node, PropTypes.array])
 };
 
 /**
@@ -248,13 +285,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 +324,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,31 +359,104 @@ 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,
+  tags = [],
+  ...other
+}, ref) {
   const prefix = usePrefix();
   const classNames = cx({
     [`${prefix}--page-header__tab-bar`]: true
   }, className);
+  // Early return if no tags are provided
+  if (!tags.length) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: classNames,
+      ref: ref
+    }, other), /*#__PURE__*/React.createElement(GridAsGridComponent, null, /*#__PURE__*/React.createElement(Column, {
+      lg: 16,
+      md: 8,
+      sm: 4
+    }, children)));
+  }
+  const [openPopover, setOpenPopover] = useState(false);
+  const tagSize = tags[0]?.size || 'md';
+  const instanceId = useId('PageHeaderTabBar');
+  const tagsWithIds = useMemo(() => {
+    return tags.map((tag, index) => ({
+      ...tag,
+      id: tag.id || `tag-${index}-${instanceId}`
+    }));
+  }, [tags]);
+  const tagsContainerRef = useRef(null);
+  const offsetRef = useRef(null);
+  // To close popover when window resizes
+  useEffect(() => {
+    const handleResize = () => {
+      // Close the popover when window resizes to prevent unwanted opens
+      setOpenPopover(false);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  // overflow items hook
+  const {
+    visibleItems = [],
+    hiddenItems = [],
+    itemRefHandler = () => {}
+  } = useOverflowItems(tagsWithIds, tagsContainerRef, offsetRef) || {
+    visibleItems: [],
+    hiddenItems: [],
+    itemRefHandler: () => {}
+  };
+  const handleOverflowClick = useCallback(event => {
+    event.stopPropagation();
+    setOpenPopover(prev => !prev);
+  }, []);
+
+  // Function to render tags
+  const renderTags = () => /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__tags`,
+    ref: tagsContainerRef
+  }, visibleItems.map(tag => /*#__PURE__*/React.createElement(Tag, {
+    key: tag.id,
+    ref: node => itemRefHandler(tag.id, node),
+    type: tag.type,
+    size: tag.size,
+    className: `${prefix}--page-header__tag-item`
+  }, tag.text)), hiddenItems.length > 0 && /*#__PURE__*/React.createElement(Popover, {
+    open: openPopover,
+    onRequestClose: () => setOpenPopover(false)
+  }, /*#__PURE__*/React.createElement(OperationalTag, {
+    onClick: handleOverflowClick,
+    "aria-expanded": openPopover,
+    text: `+${hiddenItems.length}`,
+    size: tagSize
+  }), /*#__PURE__*/React.createElement(PopoverContent, {
+    className: "tag-popover-content"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${prefix}--page-header__tags-popover-list`
+  }, hiddenItems.map(tag => /*#__PURE__*/React.createElement(Tag, {
+    key: tag.id,
+    type: tag.type,
+    size: tag.size
+  }, tag.text))))));
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames,
     ref: ref
-  }, other), 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__tab-bar--tablist`
+  }, children, tags.length > 0 && renderTags()))));
 });
 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);
-});
-PageHeaderTabs.displayName = 'PageHeaderTabs';
 
 /**
  * -------
@@ -369,7 +477,5 @@ const HeroImage = PageHeaderHeroImage;
 HeroImage.displayName = 'PageHeaderHeroImage';
 const TabBar = PageHeaderTabBar;
 TabBar.displayName = 'PageHeaderTabBar';
-const Tabs = PageHeaderTabs;
-Tabs.displayName = 'PageHeader.Tabs';
 
-export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, TabBar, Tabs };
+export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, Root, TabBar };

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

@@ -4,5 +4,5 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, PageHeaderTabs, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, Tabs, } from './PageHeader';
-export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, PageHeaderTabsProps, } from './PageHeader';
+export { PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderTabBar, PageHeaderHeroImage, Root, BreadcrumbBar, Content, ContentPageActions, ContentText, TabBar, HeroImage, } from './PageHeader';
+export type { PageHeaderProps, PageHeaderBreadcrumbBarProps, PageHeaderContentProps, PageHeaderContentPageActionsProps, PageHeaderContentTextProps, PageHeaderTabBarProps, PageHeaderHeroImageProps, } from './PageHeader';

package/es/components/PageHeader/index.js

@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, PageHeaderTabs, Root, TabBar, Tabs } from './PageHeader.js';
+export { BreadcrumbBar, Content, ContentPageActions, ContentText, HeroImage, PageHeader, PageHeaderBreadcrumbBar, PageHeaderContent, PageHeaderContentPageActions, PageHeaderContentText, PageHeaderHeroImage, PageHeaderTabBar, Root, TabBar } from './PageHeader.js';

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()}`;