@carbon/react 1.83.0-rc.0 → 1.84.0-rc.0

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

@@ -25,6 +25,12 @@ require('../Tooltip/Tooltip.js');
 var AspectRatio = require('../AspectRatio/AspectRatio.js');
 var utilities = require('@carbon/utilities');
 var Tabs$1 = require('../Tabs/Tabs.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 +39,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 +57,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 +67,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 +114,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 +139,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 +163,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 +203,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 +228,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 +244,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 +257,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 +279,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 +288,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 +327,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,12 +362,11 @@ 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,
+  ...other
+}, ref) {
   const prefix = usePrefix.usePrefix();
   const classNames = cx__default["default"]({
     [`${prefix}--page-header__tab-bar`]: true
@@ -350,13 +377,32 @@ const PageHeaderTabBar = /*#__PURE__*/React__default["default"].forwardRef(funct
   }, other), children);
 });
 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);
+const PageHeaderTabs = /*#__PURE__*/React__default["default"].forwardRef(function PageHeaderTabs({
+  className,
+  children,
+  ...other
+}, ref) {
+  const prefix = usePrefix.usePrefix();
+  const childrenArray = React__default["default"].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__default["default"].createElement(Tabs$1.Tabs, other, tabListElement && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--page-header__tablist-wrapper`
+  }, /*#__PURE__*/React__default["default"].createElement(Grid.Grid, null, /*#__PURE__*/React__default["default"].createElement(Column["default"], {
+    lg: 16,
+    md: 8,
+    sm: 4
+  }, tabListElement))), otherChildren);
 });
 PageHeaderTabs.displayName = 'PageHeaderTabs';
 

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

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

@@ -27,27 +27,26 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _CaretLeft, _CaretRight;
-function Pagination(_ref) {
-  let {
-    backwardText = 'Previous page',
-    children = undefined,
-    className = null,
-    disabled = false,
-    forwardText = 'Next page',
-    id = 1,
-    initialPage = 1,
-    itemsPerPageText = 'Items per page:',
-    itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`,
-    itemText = (min, max) => `${min}–${max} items`,
-    onChange,
-    pageRangeText = (current, total) => `${current} of ${total} pages`,
-    pageSize = 10,
-    pageSizes = undefined,
-    pageText = page => `page ${page}`,
-    pagesUnknown = false,
-    totalItems = undefined,
-    ...other
-  } = _ref;
+function Pagination({
+  backwardText = 'Previous page',
+  children = undefined,
+  className = null,
+  disabled = false,
+  forwardText = 'Next page',
+  id = 1,
+  initialPage = 1,
+  itemsPerPageText = 'Items per page:',
+  itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`,
+  itemText = (min, max) => `${min}–${max} items`,
+  onChange,
+  pageRangeText = (current, total) => `${current} of ${total} pages`,
+  pageSize = 10,
+  pageSizes = undefined,
+  pageText = page => `page ${page}`,
+  pagesUnknown = false,
+  totalItems = undefined,
+  ...other
+}) {
   const [currentPage, setCurrentPage] = React.useState(initialPage);
   const [currentPageSize, setCurrentPageSize] = React.useState(pageSize);
   const prefix = usePrefix.usePrefix();

package/lib/components/PaginationNav/PaginationNav.js

@@ -51,8 +51,7 @@ function usePrevious(value) {
   });
   return ref.current;
 }
-function calculateCuts(page, totalItems, itemsDisplayedOnPage) {
-  let splitPoint = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+function calculateCuts(page, totalItems, itemsDisplayedOnPage, splitPoint = null) {
   if (itemsDisplayedOnPage >= totalItems) {
     return {
       front: 0,
@@ -75,13 +74,12 @@ function calculateCuts(page, totalItems, itemsDisplayedOnPage) {
     back: backHidden
   };
 }
-function DirectionButton(_ref) {
-  let {
-    direction,
-    label,
-    disabled,
-    onClick
-  } = _ref;
+function DirectionButton({
+  direction,
+  label,
+  disabled,
+  onClick
+}) {
   const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: `${prefix}--pagination-nav__list-item`
@@ -93,13 +91,12 @@ function DirectionButton(_ref) {
     onClick: onClick
   }, direction === 'forward' ? _CaretRight || (_CaretRight = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretRight, null)) : _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default["default"].createElement(iconsReact.CaretLeft, null))));
 }
-function PaginationItem(_ref2) {
-  let {
-    page,
-    isActive,
-    onClick,
-    translateWithId: t = translateWithId
-  } = _ref2;
+function PaginationItem({
+  page,
+  isActive,
+  onClick,
+  translateWithId: t = translateWithId
+}) {
   const prefix = usePrefix.usePrefix();
   const itemLabel = t('carbon.pagination-nav.item');
   return /*#__PURE__*/React__default["default"].createElement("li", {
@@ -116,15 +113,14 @@ function PaginationItem(_ref2) {
     className: `${prefix}--pagination-nav__accessibility-label`
   }, isActive ? `${t('carbon.pagination-nav.active')}, ${itemLabel}` : itemLabel), page));
 }
-function PaginationOverflow(_ref3) {
-  let {
-    fromIndex = NaN,
-    count = NaN,
-    onSelect,
-    // eslint-disable-next-line react/prop-types
-    disableOverflow,
-    translateWithId: t = translateWithId
-  } = _ref3;
+function PaginationOverflow({
+  fromIndex = NaN,
+  count = NaN,
+  onSelect,
+  // eslint-disable-next-line react/prop-types
+  disableOverflow,
+  translateWithId: t = translateWithId
+}) {
   const prefix = usePrefix.usePrefix();
 
   //If overflow is disabled, return a select tag with no select options
@@ -179,19 +175,18 @@ function PaginationOverflow(_ref3) {
   }
   return null;
 }
-const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function PaginationNav(_ref4, ref) {
-  let {
-    className,
-    onChange = () => {},
-    totalItems = NaN,
-    disableOverflow,
-    itemsShown = 10,
-    page = 0,
-    loop = false,
-    size = 'lg',
-    translateWithId: t = translateWithId,
-    ...rest
-  } = _ref4;
+const PaginationNav = /*#__PURE__*/React__default["default"].forwardRef(function PaginationNav({
+  className,
+  onChange = () => {},
+  totalItems = NaN,
+  disableOverflow,
+  itemsShown = 10,
+  page = 0,
+  loop = false,
+  size = 'lg',
+  translateWithId: t = translateWithId,
+  ...rest
+}, ref) {
   const smMediaQuery = `(max-width: ${layout.breakpoints.sm.width})`;
   const isSm = useMatchMedia.useMatchMedia(smMediaQuery);
   let numberOfPages;