@carbon/react 1.83.0 → 1.84.0

package/lib/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/lib/components/PageHeader/PageHeader.js

@@ -24,7 +24,20 @@ var DefinitionTooltip = require('../Tooltip/DefinitionTooltip.js');
 require('../Tooltip/Tooltip.js');
 var AspectRatio = require('../AspectRatio/AspectRatio.js');
 var utilities = require('@carbon/utilities');
-var Tabs$1 = require('../Tabs/Tabs.js');
+var Tag = require('../Tag/Tag.js');
+require('../Tag/DismissibleTag.js');
+var OperationalTag = require('../Tag/OperationalTag.js');
+require('../Tag/SelectableTag.js');
+require('../Tag/Tag.Skeleton.js');
+var useOverflowItems = require('../../internal/useOverflowItems.js');
+var index$1 = require('../Popover/index.js');
+var useId = require('../../internal/useId.js');
+require('../Grid/FlexGrid.js');
+var Grid = require('../Grid/Grid.js');
+require('../Grid/Row.js');
+var Column = require('../Grid/Column.js');
+require('../Grid/ColumnHang.js');
+require('../Grid/GridContext.js');
 var Text = require('../Text/Text.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -33,20 +46,17 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _p, _p2;
-
 /**
  * ----------
  * PageHeader
  * ----------
  */
 
-const PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function PageHeader(_ref, ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref;
+const PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function PageHeader({
+  className,
+  children,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"]({
     [`${prefix}--page-header`]: true
@@ -54,7 +64,7 @@ const PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function Pa
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: classNames,
     ref: ref
-  }, other), _p || (_p = /*#__PURE__*/React__default["default"].createElement("p", null, "page header")), children);
+  }, other), children);
 });
 PageHeader.displayName = 'PageHeader';
 
@@ -64,20 +74,44 @@ PageHeader.displayName = 'PageHeader';
  * -----------------------
  */
 
-const PageHeaderBreadcrumbBar = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderBreadcrumbBar(_ref2, ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref2;
+const PageHeaderBreadcrumbBar = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderBreadcrumbBar({
+  border = true,
+  className,
+  children,
+  renderIcon: IconElement,
+  contentActions,
+  contentActionsFlush,
+  pageActions,
+  pageActionsFlush,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"]({
-    [`${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__default["default"]({
+    [`${prefix}--page-header__breadcrumb__content-actions`]: !contentActionsFlush
+  });
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: classNames,
     ref: ref
-  }, other), _p2 || (_p2 = /*#__PURE__*/React__default["default"].createElement("p", null, "page header breadcrumb bar")), children);
+  }, other), /*#__PURE__*/React__default["default"].createElement(Grid.Grid, null, /*#__PURE__*/React__default["default"].createElement(Column["default"], {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__breadcrumb-container`
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__breadcrumb-wrapper`
+  }, IconElement && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__breadcrumb__icon`
+  }, /*#__PURE__*/React__default["default"].createElement(IconElement, null)), children), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__breadcrumb__actions`
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: contentActionsClasses
+  }, contentActions), pageActions)))));
 });
 PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
 
@@ -87,16 +121,15 @@ PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
  * -----------------
  */
 
-const PageHeaderContent = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderContent(_ref3, ref) {
-  let {
-    className,
-    children,
-    title,
-    renderIcon: IconElement,
-    contextualActions,
-    pageActions,
-    ...other
-  } = _ref3;
+const PageHeaderContent = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderContent({
+  className,
+  children,
+  title,
+  renderIcon: IconElement,
+  contextualActions,
+  pageActions,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"]({
     [`${prefix}--page-header__content`]: true
@@ -113,7 +146,11 @@ const PageHeaderContent = /*#__PURE__*/React__default["default"].forwardRef(func
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: classNames,
     ref: ref
-  }, other), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, other), /*#__PURE__*/React__default["default"].createElement(Grid.Grid, null, /*#__PURE__*/React__default["default"].createElement(Column["default"], {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--page-header__content__title-wrapper`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--page-header__content__start`
@@ -133,7 +170,7 @@ const PageHeaderContent = /*#__PURE__*/React__default["default"].forwardRef(func
     className: `${prefix}--page-header__content__title`
   }, title)), contextualActions && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--page-header__content__contextual-actions`
-  }, contextualActions)), pageActions), children);
+  }, contextualActions)), pageActions), children)));
 });
 PageHeaderContent.displayName = 'PageHeaderContent';
 PageHeaderContent.propTypes = {
@@ -173,14 +210,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.usePrefix();
   const classNames = cx__default["default"]({
     [`${prefix}--page-header__content__page-actions`]: true
@@ -199,13 +235,13 @@ const PageHeaderContentPageActions = _ref4 => {
     }
   }, [menuButtonVisibility]);
   React.useEffect(() => {
-    if (!containerRef.current || !Array.isArray(pageActions)) return;
+    if (!containerRef.current || !Array.isArray(actions)) return;
     utilities.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);
         }
@@ -215,10 +251,12 @@ const PageHeaderContentPageActions = _ref4 => {
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: classNames,
     ref: containerRef
-  }, other), pageActions && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Array.isArray(pageActions) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, pageActions.map(action => /*#__PURE__*/React__default["default"].createElement("div", {
-    key: action.id,
-    className: "action"
-  }, action.body)), /*#__PURE__*/React__default["default"].createElement("span", {
+  }, other), actions && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Array.isArray(actions) && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, actions.map(action => /*#__PURE__*/React__default["default"].createElement("div", {
+    key: action.id
+  }, /*#__PURE__*/React__default["default"].cloneElement(action.body, {
+    ...action.body.props,
+    onClick: action.onClick
+  }))), /*#__PURE__*/React__default["default"].createElement("span", {
     "data-offset": true,
     "data-hidden": true,
     ref: offsetRef
@@ -226,11 +264,10 @@ const PageHeaderContentPageActions = _ref4 => {
     menuAlignment: "bottom-end",
     label: menuButtonLabel,
     size: "md"
-  }, [...hiddenItems].reverse().map(item => /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, {
+  }, [...hiddenItems].reverse().map(item => /*#__PURE__*/React__default["default"].createElement(MenuItem.MenuItem, _rollupPluginBabelHelpers["extends"]({
     key: item.id,
-    label: item.label,
     onClick: item.onClick
-  })))))));
+  }, item.menuItem))))))));
 };
 PageHeaderContentPageActions.displayName = 'PageHeaderContentPageActions';
 PageHeaderContentPageActions.propTypes = {
@@ -249,7 +286,7 @@ PageHeaderContentPageActions.propTypes = {
   /**
    * The PageHeaderContent's page actions
    */
-  pageActions: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].array])
+  actions: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].array])
 };
 
 /**
@@ -258,13 +295,12 @@ PageHeaderContentPageActions.propTypes = {
  * ----------------
  */
 
-const PageHeaderContentText = _ref5 => {
-  let {
-    className,
-    children,
-    subtitle,
-    ...other
-  } = _ref5;
+const PageHeaderContentText = ({
+  className,
+  children,
+  subtitle,
+  ...other
+}) => {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"]({
     [`${prefix}--page-header__content__body`]: true
@@ -298,12 +334,11 @@ PageHeaderContentText.propTypes = {
  * ----------------
  */
 
-const PageHeaderHeroImage = _ref6 => {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref6;
+const PageHeaderHeroImage = ({
+  className,
+  children,
+  ...other
+}) => {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"]({
     [`${prefix}--page-header__hero-image`]: true
@@ -334,31 +369,104 @@ PageHeaderHeroImage.propTypes = {
  * ----------------
  */
 
-const PageHeaderTabBar = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabBar(_ref7, ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref7;
+const PageHeaderTabBar = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabBar({
+  className,
+  children,
+  tags = [],
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"]({
     [`${prefix}--page-header__tab-bar`]: true
   }, className);
+  // Early return if no tags are provided
+  if (!tags.length) {
+    return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+      className: classNames,
+      ref: ref
+    }, other), /*#__PURE__*/React__default["default"].createElement(Grid.Grid, null, /*#__PURE__*/React__default["default"].createElement(Column["default"], {
+      lg: 16,
+      md: 8,
+      sm: 4
+    }, children)));
+  }
+  const [openPopover, setOpenPopover] = React.useState(false);
+  const tagSize = tags[0]?.size || 'md';
+  const instanceId = useId.useId('PageHeaderTabBar');
+  const tagsWithIds = React.useMemo(() => {
+    return tags.map((tag, index) => ({
+      ...tag,
+      id: tag.id || `tag-${index}-${instanceId}`
+    }));
+  }, [tags]);
+  const tagsContainerRef = React.useRef(null);
+  const offsetRef = React.useRef(null);
+  // To close popover when window resizes
+  React.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["default"](tagsWithIds, tagsContainerRef, offsetRef) || {
+    visibleItems: [],
+    hiddenItems: [],
+    itemRefHandler: () => {}
+  };
+  const handleOverflowClick = React.useCallback(event => {
+    event.stopPropagation();
+    setOpenPopover(prev => !prev);
+  }, []);
+
+  // Function to render tags
+  const renderTags = () => /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__tags`,
+    ref: tagsContainerRef
+  }, visibleItems.map(tag => /*#__PURE__*/React__default["default"].createElement(Tag["default"], {
+    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__default["default"].createElement(index$1.Popover, {
+    open: openPopover,
+    onRequestClose: () => setOpenPopover(false)
+  }, /*#__PURE__*/React__default["default"].createElement(OperationalTag["default"], {
+    onClick: handleOverflowClick,
+    "aria-expanded": openPopover,
+    text: `+${hiddenItems.length}`,
+    size: tagSize
+  }), /*#__PURE__*/React__default["default"].createElement(index$1.PopoverContent, {
+    className: "tag-popover-content"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__tags-popover-list`
+  }, hiddenItems.map(tag => /*#__PURE__*/React__default["default"].createElement(Tag["default"], {
+    key: tag.id,
+    type: tag.type,
+    size: tag.size
+  }, tag.text))))));
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: classNames,
     ref: ref
-  }, other), children);
+  }, other), /*#__PURE__*/React__default["default"].createElement(Grid.Grid, null, /*#__PURE__*/React__default["default"].createElement(Column["default"], {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__tab-bar--tablist`
+  }, children, tags.length > 0 && renderTags()))));
 });
 PageHeaderTabBar.displayName = 'PageHeaderTabBar';
-const PageHeaderTabs = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabs(_ref8, ref) {
-  let {
-    className,
-    children,
-    ...other
-  } = _ref8;
-  return /*#__PURE__*/React__default["default"].createElement(Tabs$1.Tabs, other, children);
-});
-PageHeaderTabs.displayName = 'PageHeaderTabs';
 
 /**
  * -------
@@ -379,8 +487,6 @@ const HeroImage = PageHeaderHeroImage;
 HeroImage.displayName = 'PageHeaderHeroImage';
 const TabBar = PageHeaderTabBar;
 TabBar.displayName = 'PageHeaderTabBar';
-const Tabs = PageHeaderTabs;
-Tabs.displayName = 'PageHeader.Tabs';
 
 exports.BreadcrumbBar = BreadcrumbBar;
 exports.Content = Content;
@@ -394,7 +500,5 @@ exports.PageHeaderContentPageActions = PageHeaderContentPageActions;
 exports.PageHeaderContentText = PageHeaderContentText;
 exports.PageHeaderHeroImage = PageHeaderHeroImage;
 exports.PageHeaderTabBar = PageHeaderTabBar;
-exports.PageHeaderTabs = PageHeaderTabs;
 exports.Root = Root;
 exports.TabBar = TabBar;
-exports.Tabs = Tabs;

package/lib/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/lib/components/PageHeader/index.js

@@ -25,7 +25,5 @@ exports.PageHeaderContentPageActions = PageHeader.PageHeaderContentPageActions;
 exports.PageHeaderContentText = PageHeader.PageHeaderContentText;
 exports.PageHeaderHeroImage = PageHeader.PageHeaderHeroImage;
 exports.PageHeaderTabBar = PageHeader.PageHeaderTabBar;
-exports.PageHeaderTabs = PageHeader.PageHeaderTabs;
 exports.Root = PageHeader.Root;
 exports.TabBar = PageHeader.TabBar;
-exports.Tabs = PageHeader.Tabs;

package/lib/components/Pagination/Pagination.Skeleton.js

@@ -23,11 +23,10 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _SkeletonText, _SkeletonText2, _SkeletonText3, _SkeletonText4;
-function PaginationSkeleton(_ref) {
-  let {
-    className,
-    ...rest
-  } = _ref;
+function PaginationSkeleton({
+  className,
+  ...rest
+}) {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
     className: cx__default["default"](`${prefix}--pagination`, `${prefix}--skeleton`, className)

package/lib/components/Pagination/Pagination.js

@@ -60,31 +60,30 @@ function getPageSize(pageSizes, pageSize) {
   }
   return pageSizes[0].value;
 }
-const Pagination = /*#__PURE__*/React__default["default"].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__default["default"].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.usePrefix();
   const inputId = useId.useFallbackId(id?.toString());
   const backBtnRef = React.useRef(null);

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

@@ -25,15 +25,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-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.usePrefix();
   const namespace = `${prefix}--unstable-pagination__page-selector`;
   const instanceId = `${namespace}__select-${useId.useId()}`;