@carbon/react 1.27.0 → 1.28.0

package/lib/components/OverflowMenu/index.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var OverflowMenu$1 = require('./OverflowMenu.js');
 var createClassWrapper = require('../../internal/createClassWrapper.js');
 
-var OverflowMenu = createClassWrapper.createClassWrapper(OverflowMenu$1.OverflowMenu);
+const OverflowMenu = createClassWrapper.createClassWrapper(OverflowMenu$1.OverflowMenu);
 
 exports.OverflowMenu = OverflowMenu;
 exports["default"] = OverflowMenu;

package/lib/components/OverflowMenuItem/OverflowMenuItem.js

@@ -24,33 +24,25 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["className", "closeMenu", "disabled", "handleOverflowMenuItemFocus", "hasDivider", "href", "isDelete", "index", "itemText", "onClick", "onKeyDown", "requireTitle", "title", "wrapperClassName"];
-var OverflowMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function OverflowMenuItem(_ref, ref) {
-  var _cx;
-
-  var className = _ref.className,
-      closeMenu = _ref.closeMenu,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      handleOverflowMenuItemFocus = _ref.handleOverflowMenuItemFocus,
-      _ref$hasDivider = _ref.hasDivider,
-      hasDivider = _ref$hasDivider === void 0 ? false : _ref$hasDivider,
-      href = _ref.href,
-      _ref$isDelete = _ref.isDelete,
-      isDelete = _ref$isDelete === void 0 ? false : _ref$isDelete,
-      index = _ref.index,
-      _ref$itemText = _ref.itemText,
-      itemText = _ref$itemText === void 0 ? 'Provide itemText' : _ref$itemText,
-      _ref$onClick = _ref.onClick,
-      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
-      _ref$onKeyDown = _ref.onKeyDown,
-      _onKeyDown = _ref$onKeyDown === void 0 ? function () {} : _ref$onKeyDown,
-      requireTitle = _ref.requireTitle,
-      title = _ref.title,
-      wrapperClassName = _ref.wrapperClassName,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
+const OverflowMenuItem = /*#__PURE__*/React__default["default"].forwardRef(function OverflowMenuItem(_ref, ref) {
+  let {
+    className,
+    closeMenu,
+    disabled = false,
+    handleOverflowMenuItemFocus,
+    hasDivider = false,
+    href,
+    isDelete = false,
+    index,
+    itemText = 'Provide itemText',
+    onClick = () => {},
+    onKeyDown = () => {},
+    requireTitle,
+    title,
+    wrapperClassName,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
 
   function setTabFocus(evt) {
     if (match.match(evt, keys.ArrowDown)) {
@@ -80,19 +72,23 @@ var OverflowMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functio
     process.env.NODE_ENV !== "production" ? warning.warning(closeMenu, '`<OverflowMenuItem>` detected missing `closeMenu` prop. ' + '`closeMenu` is required to let `<OverflowMenu>` close the menu upon actions on `<OverflowMenuItem>`. ' + 'Please make sure `<OverflowMenuItem>` is a direct child of `<OverflowMenu>.') : void 0;
   }
 
-  var overflowMenuBtnClasses = cx__default["default"]("".concat(prefix, "--overflow-menu-options__btn"), className);
-  var overflowMenuItemClasses = cx__default["default"]("".concat(prefix, "--overflow-menu-options__option"), (_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--overflow-menu--divider"), hasDivider), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--overflow-menu-options__option--danger"), isDelete), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--overflow-menu-options__option--disabled"), disabled), _cx), wrapperClassName);
-  var TagToUse = href ? 'a' : 'button';
+  const overflowMenuBtnClasses = cx__default["default"](`${prefix}--overflow-menu-options__btn`, className);
+  const overflowMenuItemClasses = cx__default["default"](`${prefix}--overflow-menu-options__option`, {
+    [`${prefix}--overflow-menu--divider`]: hasDivider,
+    [`${prefix}--overflow-menu-options__option--danger`]: isDelete,
+    [`${prefix}--overflow-menu-options__option--disabled`]: disabled
+  }, wrapperClassName);
+  const TagToUse = href ? 'a' : 'button';
 
-  var OverflowMenuItemContent = function () {
+  const OverflowMenuItemContent = (() => {
     if (typeof itemText !== 'string') {
       return itemText;
     }
 
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "".concat(prefix, "--overflow-menu-options__option-content")
+      className: `${prefix}--overflow-menu-options__option-content`
     }, itemText);
-  }();
+  })();
 
   return /*#__PURE__*/React__default["default"].createElement("li", {
     className: overflowMenuItemClasses,
@@ -102,10 +98,9 @@ var OverflowMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functio
     disabled: disabled,
     href: href,
     onClick: handleClick,
-    onKeyDown: function onKeyDown(evt) {
+    onKeyDown: evt => {
       setTabFocus(evt);
-
-      _onKeyDown(evt);
+      onKeyDown(evt);
     },
     role: "menuitem" // ref as any: the type of `ref` is `ForwardedRef<HTMLButtonElement>` in `Button` component
     // but `OverflowMenuItem` can be rendered as `a` tag as well, which is `HTMLAnchorElement`

package/lib/components/OverflowMenuV2/index.js

@@ -25,34 +25,32 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["children", "className", "renderIcon", "size"];
-var defaultSize = 'md';
+const defaultSize = 'md';
 
 function OverflowMenuV2(_ref) {
-  var _classNames;
-
-  var children = _ref.children,
-      className = _ref.className,
-      _ref$renderIcon = _ref.renderIcon,
-      IconElement = _ref$renderIcon === void 0 ? iconsReact.OverflowMenuVertical : _ref$renderIcon,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? defaultSize : _ref$size,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var id = useId.useId('overflowmenu');
-  var prefix = usePrefix.usePrefix();
-  var triggerRef = React.useRef(null);
-
-  var _useAttachedMenu = useAttachedMenu.useAttachedMenu(triggerRef),
-      open = _useAttachedMenu.open,
-      x = _useAttachedMenu.x,
-      y = _useAttachedMenu.y,
-      handleClick = _useAttachedMenu.handleClick,
-      handleMousedown = _useAttachedMenu.handleMousedown,
-      handleClose = _useAttachedMenu.handleClose;
-
-  var containerClasses = cx__default["default"]("".concat(prefix, "--overflow-menu__container"));
-  var triggerClasses = cx__default["default"]("".concat(prefix, "--overflow-menu"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--overflow-menu--open"), open), _rollupPluginBabelHelpers.defineProperty(_classNames, className, className), _classNames), size !== defaultSize && "".concat(prefix, "--overflow-menu--").concat(size));
+  let {
+    children,
+    className,
+    renderIcon: IconElement = iconsReact.OverflowMenuVertical,
+    size = defaultSize,
+    ...rest
+  } = _ref;
+  const id = useId.useId('overflowmenu');
+  const prefix = usePrefix.usePrefix();
+  const triggerRef = React.useRef(null);
+  const {
+    open,
+    x,
+    y,
+    handleClick,
+    handleMousedown,
+    handleClose
+  } = useAttachedMenu.useAttachedMenu(triggerRef);
+  const containerClasses = cx__default["default"](`${prefix}--overflow-menu__container`);
+  const triggerClasses = cx__default["default"](`${prefix}--overflow-menu`, {
+    [`${prefix}--overflow-menu--open`]: open,
+    [className]: className
+  }, size !== defaultSize && `${prefix}--overflow-menu--${size}`);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: containerClasses,
     "aria-owns": id
@@ -65,7 +63,7 @@ function OverflowMenuV2(_ref) {
     onMouseDown: handleMousedown,
     ref: triggerRef
   }), /*#__PURE__*/React__default["default"].createElement(IconElement, {
-    className: "".concat(prefix, "--overflow-menu__icon")
+    className: `${prefix}--overflow-menu__icon`
   })), /*#__PURE__*/React__default["default"].createElement(Menu.Menu, {
     id: id,
     size: size,

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

@@ -24,17 +24,16 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _SkeletonText, _SkeletonText2, _SkeletonText3, _SkeletonText4;
 
-var _excluded = ["className"];
-
 function PaginationSkeleton(_ref) {
-  var className = _ref.className,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
+  let {
+    className,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
   return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
-    className: cx__default["default"]("".concat(prefix, "--pagination"), "".concat(prefix, "--skeleton"), className)
+    className: cx__default["default"](`${prefix}--pagination`, `${prefix}--skeleton`, className)
   }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--pagination__left")
+    className: `${prefix}--pagination__left`
   }, _SkeletonText || (_SkeletonText = /*#__PURE__*/React__default["default"].createElement(SkeletonText["default"], {
     width: "70px"
   })), _SkeletonText2 || (_SkeletonText2 = /*#__PURE__*/React__default["default"].createElement(SkeletonText["default"], {
@@ -42,7 +41,7 @@ function PaginationSkeleton(_ref) {
   })), _SkeletonText3 || (_SkeletonText3 = /*#__PURE__*/React__default["default"].createElement(SkeletonText["default"], {
     width: "105px"
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--pagination__right ").concat(prefix, "--pagination--inline")
+    className: `${prefix}--pagination__right ${prefix}--pagination--inline`
   }, _SkeletonText4 || (_SkeletonText4 = /*#__PURE__*/React__default["default"].createElement(SkeletonText["default"], {
     width: "70px"
   }))));

package/lib/components/Pagination/Pagination.js

@@ -30,20 +30,16 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var _CaretLeft, _CaretRight;
 
-var _excluded = ["backwardText", "className", "disabled", "forwardText", "id", "isLastPage", "itemText", "itemRangeText", "itemsPerPageText", "onChange", "pageNumberText", "pageRangeText", "page", "pageInputDisabled", "pageSize", "pageSizeInputDisabled", "pageSizes", "pageText", "pagesUnknown", "size", "totalItems"];
-
 function mapPageSizesToObject(sizes) {
-  return _rollupPluginBabelHelpers["typeof"](sizes[0]) === 'object' && sizes[0] !== null ? sizes : sizes.map(function (size) {
-    return {
-      text: size,
-      value: size
-    };
-  });
+  return typeof sizes[0] === 'object' && sizes[0] !== null ? sizes : sizes.map(size => ({
+    text: size,
+    value: size
+  }));
 }
 
 function renderSelectItems(total) {
-  var counter = 1;
-  var itemArr = [];
+  let counter = 1;
+  let itemArr = [];
 
   while (counter <= total) {
     itemArr.push( /*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
@@ -59,7 +55,7 @@ function renderSelectItems(total) {
 
 function getPageSize(pageSizes, pageSize) {
   if (pageSize) {
-    var hasSize = pageSizes.find(function (size) {
+    const hasSize = pageSizes.find(size => {
       return pageSize === size.value;
     });
 
@@ -71,98 +67,64 @@ function getPageSize(pageSizes, pageSize) {
   return pageSizes[0].value;
 }
 
-var Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pagination(_ref, ref) {
-  var _cx, _cx2, _cx3;
-
-  var _ref$backwardText = _ref.backwardText,
-      backwardText = _ref$backwardText === void 0 ? 'Previous page' : _ref$backwardText,
-      customClassName = _ref.className,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$forwardText = _ref.forwardText,
-      forwardText = _ref$forwardText === void 0 ? 'Next page' : _ref$forwardText,
-      id = _ref.id,
-      _ref$isLastPage = _ref.isLastPage,
-      isLastPage = _ref$isLastPage === void 0 ? false : _ref$isLastPage,
-      _ref$itemText = _ref.itemText,
-      itemText = _ref$itemText === void 0 ? function (min, max) {
-    return "".concat(min, "\u2013").concat(max, " items");
-  } : _ref$itemText,
-      _ref$itemRangeText = _ref.itemRangeText,
-      itemRangeText = _ref$itemRangeText === void 0 ? function (min, max, total) {
-    return "".concat(min, "\u2013").concat(max, " of ").concat(total, " items");
-  } : _ref$itemRangeText,
-      _ref$itemsPerPageText = _ref.itemsPerPageText,
-      itemsPerPageText = _ref$itemsPerPageText === void 0 ? 'Items per page:' : _ref$itemsPerPageText,
-      onChange = _ref.onChange;
-      _ref.pageNumberText;
-      var _ref$pageRangeText = _ref.pageRangeText,
-      pageRangeText = _ref$pageRangeText === void 0 ? function (_current, total) {
-    return "of ".concat(total, " ").concat(total === 1 ? 'page' : 'pages');
-  } : _ref$pageRangeText,
-      _ref$page = _ref.page,
-      controlledPage = _ref$page === void 0 ? 1 : _ref$page,
-      pageInputDisabled = _ref.pageInputDisabled,
-      controlledPageSize = _ref.pageSize,
-      pageSizeInputDisabled = _ref.pageSizeInputDisabled,
-      controlledPageSizes = _ref.pageSizes,
-      _ref$pageText = _ref.pageText,
-      pageText = _ref$pageText === void 0 ? function (page, pagesUnknown) {
-    return "page ".concat(pagesUnknown ? '' : page);
-  } : _ref$pageText,
-      _ref$pagesUnknown = _ref.pagesUnknown,
-      pagesUnknown = _ref$pagesUnknown === void 0 ? false : _ref$pagesUnknown,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'md' : _ref$size,
-      totalItems = _ref.totalItems,
-      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var inputId = useId.useFallbackId(id);
-  var backBtnRef = React.useRef(null);
-  var forwardBtnRef = React.useRef(null);
-
-  var _useState = React.useState(function () {
+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, pagesUnknown) => `page ${pagesUnknown ? '' : page}`,
+    pagesUnknown = false,
+    size = 'md',
+    totalItems,
+    ...rest
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const inputId = useId.useFallbackId(id);
+  const backBtnRef = React.useRef(null);
+  const forwardBtnRef = React.useRef(null);
+  const [pageSizes, setPageSizes] = React.useState(() => {
     return mapPageSizesToObject(controlledPageSizes);
-  }),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      pageSizes = _useState2[0],
-      setPageSizes = _useState2[1];
-
-  var _useState3 = React.useState(controlledPageSizes),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      prevPageSizes = _useState4[0],
-      setPrevPageSizes = _useState4[1];
-
-  var _useState5 = React.useState(controlledPage),
-      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      page = _useState6[0],
-      setPage = _useState6[1];
-
-  var _useState7 = React.useState(controlledPage),
-      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-      prevControlledPage = _useState8[0],
-      setPrevControlledPage = _useState8[1];
-
-  var _useState9 = React.useState(function () {
+  });
+  const [prevPageSizes, setPrevPageSizes] = React.useState(controlledPageSizes);
+  const [page, setPage] = React.useState(controlledPage);
+  const [prevControlledPage, setPrevControlledPage] = React.useState(controlledPage);
+  const [pageSize, setPageSize] = React.useState(() => {
     return getPageSize(pageSizes, controlledPageSize);
-  }),
-      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-      pageSize = _useState10[0],
-      setPageSize = _useState10[1];
-
-  var _useState11 = React.useState(controlledPageSize),
-      _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
-      prevControlledPageSize = _useState12[0],
-      setPrevControlledPageSize = _useState12[1];
-
-  var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--pagination"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--pagination--").concat(size), size), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
-  var totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
-  var backButtonDisabled = disabled || page === 1;
-  var backButtonClasses = cx__default["default"]((_cx2 = {}, _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--pagination__button"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--pagination__button--backward"), true), _rollupPluginBabelHelpers.defineProperty(_cx2, "".concat(prefix, "--pagination__button--no-index"), backButtonDisabled), _cx2));
-  var forwardButtonDisabled = disabled || page === totalPages;
-  var forwardButtonClasses = cx__default["default"]((_cx3 = {}, _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--pagination__button"), true), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--pagination__button--forward"), true), _rollupPluginBabelHelpers.defineProperty(_cx3, "".concat(prefix, "--pagination__button--no-index"), forwardButtonDisabled), _cx3));
-  var selectItems = renderSelectItems(totalPages); // Sync state with props
+  });
+  const [prevControlledPageSize, setPrevControlledPageSize] = React.useState(controlledPageSize);
+  const className = cx__default["default"]({
+    [`${prefix}--pagination`]: true,
+    [`${prefix}--pagination--${size}`]: size,
+    [customClassName]: !!customClassName
+  });
+  const totalPages = Math.max(Math.ceil(totalItems / pageSize), 1);
+  const backButtonDisabled = disabled || page === 1;
+  const backButtonClasses = cx__default["default"]({
+    [`${prefix}--pagination__button`]: true,
+    [`${prefix}--pagination__button--backward`]: true,
+    [`${prefix}--pagination__button--no-index`]: backButtonDisabled
+  });
+  const forwardButtonDisabled = disabled || page === totalPages;
+  const forwardButtonClasses = cx__default["default"]({
+    [`${prefix}--pagination__button`]: true,
+    [`${prefix}--pagination__button--forward`]: true,
+    [`${prefix}--pagination__button--no-index`]: forwardButtonDisabled
+  });
+  const selectItems = renderSelectItems(totalPages); // Sync state with props
 
   if (controlledPage !== prevControlledPage) {
     setPage(controlledPage);
@@ -175,26 +137,24 @@ var Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pagi
   }
 
   if (!array.equals(controlledPageSizes, prevPageSizes)) {
-    var _pageSizes = mapPageSizesToObject(controlledPageSizes);
-
-    var hasPageSize = _pageSizes.find(function (size) {
+    const pageSizes = mapPageSizesToObject(controlledPageSizes);
+    const hasPageSize = pageSizes.find(size => {
       return size.value === pageSize;
     }); // Reset page to 1 if the current pageSize is not included in the new page
     // sizes
 
-
     if (!hasPageSize) {
       setPage(1);
     }
 
-    setPageSizes(_pageSizes);
+    setPageSizes(pageSizes);
     setPrevPageSizes(controlledPageSizes);
   }
 
   function handleSizeChange(event) {
-    var pageSize = Number(event.target.value);
-    var changes = {
-      pageSize: pageSize,
+    const pageSize = Number(event.target.value);
+    const changes = {
+      pageSize,
       page: 1
     };
     setPage(changes.page);
@@ -206,22 +166,22 @@ var Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pagi
   }
 
   function handlePageInputChange(event) {
-    var page = Number(event.target.value);
+    const page = Number(event.target.value);
 
     if (page > 0 && page <= Math.max(Math.ceil(totalItems / pageSize), 1)) {
       setPage(page);
 
       if (onChange) {
         onChange({
-          page: page,
-          pageSize: pageSize
+          page,
+          pageSize
         });
       }
     }
   }
 
   function incrementPage() {
-    var nextPage = page + 1;
+    const nextPage = page + 1;
     setPage(nextPage); // when the increment button reaches the last page,
     // the icon button becomes disabled and the focus shifts to `main`
     // this presents an a11y problem for keyboard & screen reader users
@@ -234,14 +194,14 @@ var Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pagi
     if (onChange) {
       onChange({
         page: nextPage,
-        pageSize: pageSize,
-        backBtnRef: backBtnRef
+        pageSize,
+        backBtnRef
       });
     }
   }
 
   function decrementPage() {
-    var nextPage = page - 1;
+    const nextPage = page - 1;
     setPage(nextPage); // when the decrement button reaches the first page,
     // the icon button becomes disabled and the focus shifts to `main`
     // this presents an a11y problem for keyboard & screen reader users
@@ -254,8 +214,8 @@ var Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pagi
     if (onChange) {
       onChange({
         page: nextPage,
-        pageSize: pageSize,
-        forwardBtnRef: forwardBtnRef
+        pageSize,
+        forwardBtnRef
       });
     }
   }
@@ -264,14 +224,14 @@ var Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pagi
     className: className,
     ref: ref
   }, rest), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--pagination__left")
+    className: `${prefix}--pagination__left`
   }, /*#__PURE__*/React__default["default"].createElement("label", {
-    id: "".concat(prefix, "-pagination-select-").concat(inputId, "-count-label"),
-    className: "".concat(prefix, "--pagination__text"),
-    htmlFor: "".concat(prefix, "-pagination-select-").concat(inputId)
+    id: `${prefix}-pagination-select-${inputId}-count-label`,
+    className: `${prefix}--pagination__text`,
+    htmlFor: `${prefix}-pagination-select-${inputId}`
   }, itemsPerPageText), /*#__PURE__*/React__default["default"].createElement(Select["default"], {
-    id: "".concat(prefix, "-pagination-select-").concat(inputId),
-    className: "".concat(prefix, "--select__item-count"),
+    id: `${prefix}-pagination-select-${inputId}`,
+    className: `${prefix}--select__item-count`,
     labelText: "",
     hideLabel: true,
     noLabel: true,
@@ -279,31 +239,29 @@ var Pagination = /*#__PURE__*/React__default["default"].forwardRef(function Pagi
     onChange: handleSizeChange,
     disabled: pageSizeInputDisabled || disabled,
     value: pageSize
-  }, pageSizes.map(function (sizeObj) {
-    return /*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
-      key: sizeObj.value,
-      value: sizeObj.value,
-      text: String(sizeObj.text)
-    });
-  })), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--pagination__text ").concat(prefix, "--pagination__items-count")
+  }, pageSizes.map(sizeObj => /*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
+    key: sizeObj.value,
+    value: sizeObj.value,
+    text: String(sizeObj.text)
+  }))), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--pagination__text ${prefix}--pagination__items-count`
   }, pagesUnknown ? itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--pagination__right")
+    className: `${prefix}--pagination__right`
   }, pagesUnknown ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--pagination__text ").concat(prefix, "--pagination__page-text")
+    className: `${prefix}--pagination__text ${prefix}--pagination__page-text`
   }, pagesUnknown ? pageText(page, pagesUnknown) : pageRangeText(page, totalPages)) : null, /*#__PURE__*/React__default["default"].createElement(Select["default"], {
-    id: "".concat(prefix, "-pagination-select-").concat(inputId, "-right"),
-    className: "".concat(prefix, "--select__page-number"),
-    labelText: "Page number, of ".concat(totalPages, " pages"),
+    id: `${prefix}-pagination-select-${inputId}-right`,
+    className: `${prefix}--select__page-number`,
+    labelText: `Page number, of ${totalPages} pages`,
     inline: true,
     hideLabel: true,
     onChange: handlePageInputChange,
     value: page,
     disabled: pageInputDisabled || disabled
   }, selectItems), pagesUnknown ? null : /*#__PURE__*/React__default["default"].createElement("span", {
-    className: "".concat(prefix, "--pagination__text")
+    className: `${prefix}--pagination__text`
   }, pagesUnknown ? pageText(page, pagesUnknown) : pageRangeText(page, totalPages)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "".concat(prefix, "--pagination__control-buttons")
+    className: `${prefix}--pagination__control-buttons`
   }, /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
     align: "top",
     disabled: backButtonDisabled,

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

@@ -25,25 +25,25 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["className", "currentPage", "id", "labelText", "totalPages"];
-var getInstanceId = setupGetInstanceId["default"]();
+const getInstanceId = setupGetInstanceId["default"]();
 
 function PageSelector(_ref) {
-  var className = _ref.className,
-      currentPage = _ref.currentPage,
-      id = _ref.id,
-      labelText = _ref.labelText,
-      totalPages = _ref.totalPages,
-      other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-
-  var prefix = usePrefix.usePrefix();
-  var namespace = "".concat(prefix, "--unstable-pagination__page-selector");
-  var instanceId = "".concat(namespace, "__select-").concat(getInstanceId());
-
-  var renderPages = function renderPages(total) {
-    var pages = [];
-
-    for (var counter = 1; counter <= total; counter += 1) {
+  let {
+    className,
+    currentPage,
+    id,
+    labelText,
+    totalPages,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const namespace = `${prefix}--unstable-pagination__page-selector`;
+  const instanceId = `${namespace}__select-${getInstanceId()}`;
+
+  const renderPages = total => {
+    const pages = [];
+
+    for (let counter = 1; counter <= total; counter += 1) {
       pages.push( /*#__PURE__*/React__default["default"].createElement(SelectItem["default"], {
         key: counter,
         value: counter,