@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -20,129 +20,116 @@ import { usePrefix } from '../../../internal/usePrefix.js';
 
 var _CaretLeft, _CaretRight;
 
-var _excluded = ["backwardText", "children", "className", "disabled", "forwardText", "id", "initialPage", "itemsPerPageText", "itemRangeText", "itemText", "onChange", "pageRangeText", "pageSize", "pageSizes", "pageText", "pagesUnknown", "totalItems"];
-
 function Pagination(_ref) {
-  var backwardText = _ref.backwardText,
-      children = _ref.children,
-      className = _ref.className,
-      disabled = _ref.disabled,
-      forwardText = _ref.forwardText,
-      id = _ref.id,
-      initialPage = _ref.initialPage,
-      itemsPerPageText = _ref.itemsPerPageText,
-      itemRangeText = _ref.itemRangeText,
-      itemText = _ref.itemText,
-      onChange = _ref.onChange,
-      pageRangeText = _ref.pageRangeText,
-      pageSize = _ref.pageSize,
-      pageSizes = _ref.pageSizes,
-      pageText = _ref.pageText,
-      pagesUnknown = _ref.pagesUnknown,
-      totalItems = _ref.totalItems,
-      other = _objectWithoutProperties(_ref, _excluded);
-
-  var _useState = useState(initialPage),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentPage = _useState2[0],
-      setCurrentPage = _useState2[1];
-
-  var _useState3 = useState(pageSize),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentPageSize = _useState4[0],
-      setCurrentPageSize = _useState4[1];
-
-  var prefix = usePrefix();
-  var totalPages = totalItems ? Math.max(Math.ceil(totalItems / currentPageSize), 1) : undefined;
-  var backButtonDisabled = disabled || currentPage === 1;
-  var forwardButtonDisabled = disabled || currentPage === totalPages;
+  let {
+    backwardText,
+    children,
+    className,
+    disabled,
+    forwardText,
+    id,
+    initialPage,
+    itemsPerPageText,
+    itemRangeText,
+    itemText,
+    onChange,
+    pageRangeText,
+    pageSize,
+    pageSizes,
+    pageText,
+    pagesUnknown,
+    totalItems,
+    ...other
+  } = _ref;
+  const [currentPage, setCurrentPage] = useState(initialPage);
+  const [currentPageSize, setCurrentPageSize] = useState(pageSize);
+  const prefix = usePrefix();
+  const totalPages = totalItems ? Math.max(Math.ceil(totalItems / currentPageSize), 1) : undefined;
+  const backButtonDisabled = disabled || currentPage === 1;
+  const forwardButtonDisabled = disabled || currentPage === totalPages;
 
   function onSetPage(newPage) {
     setCurrentPage(Number(newPage));
   }
 
   function incrementPage() {
-    var page = currentPage + 1;
+    const page = currentPage + 1;
     setCurrentPage(page);
     onChange({
-      page: page,
+      page,
       pageSize: currentPageSize
     });
   }
 
   function decrementPage() {
-    var page = currentPage - 1;
+    const page = currentPage - 1;
     setCurrentPage(page);
     onChange({
-      page: page,
+      page,
       pageSize: currentPageSize
     });
   }
 
-  var namespace = "".concat(prefix, "--unstable-pagination");
+  const namespace = `${prefix}--unstable-pagination`;
   return /*#__PURE__*/React__default.createElement("section", _extends({
     className: cx(namespace, className)
   }, other), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(namespace, "__left")
+    className: `${namespace}__left`
   }, pageSizes && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("label", {
-    id: "".concat(namespace, "__page-sizer__counter-").concat(id),
-    className: "".concat(namespace, "__text"),
-    htmlFor: "".concat(namespace, "__page-sizer__input-").concat(id)
+    id: `${namespace}__page-sizer__counter-${id}`,
+    className: `${namespace}__text`,
+    htmlFor: `${namespace}__page-sizer__input-${id}`
   }, itemsPerPageText), /*#__PURE__*/React__default.createElement(Select, {
-    id: "".concat(namespace, "__page-sizer__input-").concat(id),
-    className: "".concat(namespace, "__page-sizer"),
+    id: `${namespace}__page-sizer__input-${id}`,
+    className: `${namespace}__page-sizer`,
     labelText: "",
     hideLabel: true,
     noLabel: true,
     inline: true,
-    onChange: function onChange(event) {
-      return setCurrentPageSize(Number(event.target.value));
-    },
+    onChange: event => setCurrentPageSize(Number(event.target.value)),
     value: currentPageSize
-  }, pageSizes.map(function (size) {
-    return /*#__PURE__*/React__default.createElement(SelectItem, {
-      key: size,
-      value: size,
-      text: String(size)
-    });
-  }))), /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(namespace, "__text")
+  }, pageSizes.map(size => /*#__PURE__*/React__default.createElement(SelectItem, {
+    key: size,
+    value: size,
+    text: String(size)
+  })))), /*#__PURE__*/React__default.createElement("span", {
+    className: `${namespace}__text`
   }, totalItems && !pagesUnknown && itemRangeText(Math.min(currentPageSize * (currentPage - 1) + 1, totalItems), Math.min(currentPage * currentPageSize, totalItems), totalItems), totalItems && pagesUnknown && itemText(currentPageSize * (currentPage - 1) + 1, currentPage * currentPageSize), !totalItems && itemText(currentPageSize * (currentPage - 1) + 1, currentPage * currentPageSize))), /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(namespace, "__right")
+    className: `${namespace}__right`
   }, children && totalItems && children({
-    currentPage: currentPage,
-    currentPageSize: currentPageSize,
-    onSetPage: onSetPage,
-    totalPages: totalPages
+    currentPage,
+    currentPageSize,
+    onSetPage,
+    totalPages
   }), children && totalItems && !pagesUnknown && /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(namespace, "__text")
+    className: `${namespace}__text`
   }, pageRangeText('', totalPages)), children && !totalItems && /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(namespace, "__text")
+    className: `${namespace}__text`
   }, pageText(currentPage)), !children && /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(namespace, "__text")
+    className: `${namespace}__text`
   }, !totalItems ? pageText(currentPage) : pageRangeText(currentPage, totalPages)), FeatureFlags.enabled('enable-v11-release') ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
     align: "top",
     disabled: backButtonDisabled,
     kind: "ghost",
-    className: cx("".concat(namespace, "__button"), "".concat(namespace, "__button--backward"), _defineProperty({}, "".concat(namespace, "__button--no-index"), backButtonDisabled)),
+    className: cx(`${namespace}__button`, `${namespace}__button--backward`, {
+      [`${namespace}__button--no-index`]: backButtonDisabled
+    }),
     label: backwardText,
-    onClick: function onClick() {
-      return decrementPage();
-    }
+    onClick: () => decrementPage()
   }, _CaretLeft || (_CaretLeft = /*#__PURE__*/React__default.createElement(CaretLeft, null))), /*#__PURE__*/React__default.createElement(IconButton, {
     align: "top-right",
     disabled: forwardButtonDisabled,
     kind: "ghost",
-    className: cx("".concat(namespace, "__button"), "".concat(namespace, "__button--forward"), _defineProperty({}, "".concat(namespace, "__button--no-index"), forwardButtonDisabled)),
+    className: cx(`${namespace}__button`, `${namespace}__button--forward`, {
+      [`${namespace}__button--no-index`]: forwardButtonDisabled
+    }),
     label: forwardText,
-    onClick: function onClick() {
-      return incrementPage();
-    }
+    onClick: () => incrementPage()
   }, _CaretRight || (_CaretRight = /*#__PURE__*/React__default.createElement(CaretRight, null)))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
-    className: cx("".concat(namespace, "__button"), "".concat(namespace, "__button--backward"), _defineProperty({}, "".concat(namespace, "__button--no-index"), backButtonDisabled)),
-    onClick: function onClick() {
-      return decrementPage();
-    },
+    className: cx(`${namespace}__button`, `${namespace}__button--backward`, {
+      [`${namespace}__button--no-index`]: backButtonDisabled
+    }),
+    onClick: () => decrementPage(),
     disabled: backButtonDisabled,
     hasIconOnly: true,
     renderIcon: CaretLeft,
@@ -150,10 +137,10 @@ function Pagination(_ref) {
     tooltipPosition: "top",
     iconDescription: backwardText
   }), /*#__PURE__*/React__default.createElement(Button, {
-    className: cx("".concat(namespace, "__button"), "".concat(namespace, "__button--forward"), _defineProperty({}, "".concat(namespace, "__button--no-index"), forwardButtonDisabled)),
-    onClick: function onClick() {
-      return incrementPage();
-    },
+    className: cx(`${namespace}__button`, `${namespace}__button--forward`, {
+      [`${namespace}__button--no-index`]: forwardButtonDisabled
+    }),
+    onClick: () => incrementPage(),
     disabled: forwardButtonDisabled,
     hasIconOnly: true,
     renderIcon: CaretRight,
@@ -260,21 +247,13 @@ Pagination.defaultProps = {
   forwardText: 'Next page',
   id: 1,
   itemsPerPageText: 'Items per page:',
-  itemRangeText: function itemRangeText(min, max, total) {
-    return "".concat(min, "\u2013").concat(max, " of ").concat(total, " items");
-  },
-  itemText: function itemText(min, max) {
-    return "".concat(min, "\u2013").concat(max, " items");
-  },
+  itemRangeText: (min, max, total) => `${min}–${max} of ${total} items`,
+  itemText: (min, max) => `${min}–${max} items`,
   initialPage: 1,
-  pageRangeText: function pageRangeText(current, total) {
-    return "".concat(current, " of ").concat(total, " pages");
-  },
+  pageRangeText: (current, total) => `${current} of ${total} pages`,
   pageSize: 10,
   pageSizes: undefined,
-  pageText: function pageText(page) {
-    return "page ".concat(page);
-  },
+  pageText: page => `page ${page}`,
   pagesUnknown: false,
   totalItems: undefined
 };

package/es/components/PaginationNav/PaginationNav.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, toConsumableArray as _toConsumableArray, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default, { useState, useEffect, useRef } from 'react';
 import cx from 'classnames';
@@ -15,10 +15,8 @@ import { IconButton } from '../IconButton/index.js';
 import * as FeatureFlags from '@carbon/feature-flags';
 import { usePrefix } from '../../internal/usePrefix.js';
 
-var _excluded = ["className", "onChange", "totalItems", "itemsShown", "page", "loop", "translateWithId"];
-
 var _CaretRight, _CaretLeft, _option;
-var translationIds = {
+const translationIds = {
   'carbon.pagination-nav.next': 'Next',
   'carbon.pagination-nav.previous': 'Previous',
   'carbon.pagination-nav.item': 'Page',
@@ -32,15 +30,15 @@ function translateWithId(messageId) {
 
 
 function usePrevious(value) {
-  var ref = useRef();
-  useEffect(function () {
+  const ref = useRef();
+  useEffect(() => {
     ref.current = value;
   });
   return ref.current;
 }
 
 function getCuts(page, totalItems, itemsThatFit) {
-  var splitPoint = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  let splitPoint = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
 
   if (itemsThatFit >= totalItems) {
     return {
@@ -49,9 +47,9 @@ function getCuts(page, totalItems, itemsThatFit) {
     };
   }
 
-  var split = splitPoint || Math.ceil(itemsThatFit / 2) - 1;
-  var frontHidden = page + 1 - split;
-  var backHidden = totalItems - page - (itemsThatFit - split) + 1;
+  const split = splitPoint || Math.ceil(itemsThatFit / 2) - 1;
+  let frontHidden = page + 1 - split;
+  let backHidden = totalItems - page - (itemsThatFit - split) + 1;
 
   if (frontHidden <= 1) {
     backHidden -= frontHidden <= 0 ? Math.abs(frontHidden) + 1 : 0;
@@ -70,14 +68,16 @@ function getCuts(page, totalItems, itemsThatFit) {
 }
 
 function DirectionButton(_ref) {
-  var direction = _ref.direction,
-      label = _ref.label,
-      disabled = _ref.disabled,
-      onClick = _ref.onClick;
-  var prefix = usePrefix();
-  var icon = direction === 'forward' ? CaretRight : CaretLeft;
+  let {
+    direction,
+    label,
+    disabled,
+    onClick
+  } = _ref;
+  const prefix = usePrefix();
+  const icon = direction === 'forward' ? CaretRight : CaretLeft;
   return /*#__PURE__*/React__default.createElement("li", {
-    className: "".concat(prefix, "--pagination-nav__list-item")
+    className: `${prefix}--pagination-nav__list-item`
   }, FeatureFlags.enabled('enable-v11-release') ? /*#__PURE__*/React__default.createElement(IconButton, {
     align: "bottom",
     disabled: disabled,
@@ -97,59 +97,61 @@ function DirectionButton(_ref) {
 }
 
 function PaginationItem(_ref2) {
-  var page = _ref2.page,
-      isActive = _ref2.isActive,
-      onClick = _ref2.onClick,
-      _ref2$translateWithId = _ref2.translateWithId,
-      t = _ref2$translateWithId === void 0 ? translateWithId : _ref2$translateWithId;
-  var prefix = usePrefix();
-  var itemLabel = t('carbon.pagination-nav.item');
+  let {
+    page,
+    isActive,
+    onClick,
+    translateWithId: t = translateWithId
+  } = _ref2;
+  const prefix = usePrefix();
+  const itemLabel = t('carbon.pagination-nav.item');
   return /*#__PURE__*/React__default.createElement("li", {
-    className: "".concat(prefix, "--pagination-nav__list-item")
+    className: `${prefix}--pagination-nav__list-item`
   }, /*#__PURE__*/React__default.createElement("button", {
     type: "button",
-    className: cx("".concat(prefix, "--pagination-nav__page"), _defineProperty({}, "".concat(prefix, "--pagination-nav__page--active"), isActive)),
+    className: cx(`${prefix}--pagination-nav__page`, {
+      [`${prefix}--pagination-nav__page--active`]: isActive
+    }),
     onClick: onClick,
     "data-page": page,
     "aria-current": isActive ? 'page' : null
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: "".concat(prefix, "--pagination-nav__accessibility-label")
-  }, isActive ? "".concat(t('carbon.pagination-nav.active'), ", ").concat(itemLabel) : itemLabel), page));
+    className: `${prefix}--pagination-nav__accessibility-label`
+  }, isActive ? `${t('carbon.pagination-nav.active')}, ${itemLabel}` : itemLabel), page));
 }
 
 function PaginationOverflow(_ref3) {
-  var fromIndex = _ref3.fromIndex,
-      count = _ref3.count,
-      onSelect = _ref3.onSelect,
-      _ref3$translateWithId = _ref3.translateWithId,
-      t = _ref3$translateWithId === void 0 ? translateWithId : _ref3$translateWithId;
-  var prefix = usePrefix();
+  let {
+    fromIndex,
+    count,
+    onSelect,
+    translateWithId: t = translateWithId
+  } = _ref3;
+  const prefix = usePrefix();
 
   if (count > 1) {
     return /*#__PURE__*/React__default.createElement("li", {
-      className: "".concat(prefix, "--pagination-nav__list-item")
+      className: `${prefix}--pagination-nav__list-item`
     }, /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(prefix, "--pagination-nav__select")
+      className: `${prefix}--pagination-nav__select`
     }, /*#__PURE__*/React__default.createElement("select", {
-      className: "".concat(prefix, "--pagination-nav__page ").concat(prefix, "--pagination-nav__page--select"),
-      "aria-label": "Select ".concat(t('carbon.pagination-nav.item'), " number"),
-      onChange: function onChange(e) {
-        var index = Number(e.target.value);
+      className: `${prefix}--pagination-nav__page ${prefix}--pagination-nav__page--select`,
+      "aria-label": `Select ${t('carbon.pagination-nav.item')} number`,
+      onChange: e => {
+        const index = Number(e.target.value);
         onSelect(index);
       }
     }, _option || (_option = /*#__PURE__*/React__default.createElement("option", {
       value: "",
       hidden: true
-    })), _toConsumableArray(Array(count)).map(function (e, i) {
-      return /*#__PURE__*/React__default.createElement("option", {
-        value: (fromIndex + i).toString(),
-        "data-page": fromIndex + i + 1,
-        key: "overflow-".concat(fromIndex + i)
-      }, fromIndex + i + 1);
-    })), /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(prefix, "--pagination-nav__select-icon-wrapper")
+    })), [...Array(count)].map((e, i) => /*#__PURE__*/React__default.createElement("option", {
+      value: (fromIndex + i).toString(),
+      "data-page": fromIndex + i + 1,
+      key: `overflow-${fromIndex + i}`
+    }, fromIndex + i + 1))), /*#__PURE__*/React__default.createElement("div", {
+      className: `${prefix}--pagination-nav__select-icon-wrapper`
     }, /*#__PURE__*/React__default.createElement(OverflowMenuHorizontal, {
-      className: "".concat(prefix, "--pagination-nav__select-icon")
+      className: `${prefix}--pagination-nav__select-icon`
     }))));
   }
 
@@ -157,7 +159,7 @@ function PaginationOverflow(_ref3) {
     return /*#__PURE__*/React__default.createElement(PaginationItem, {
       page: fromIndex + 1,
       translateWithId: t,
-      onClick: function onClick() {
+      onClick: () => {
         onSelect(fromIndex);
       }
     });
@@ -166,38 +168,22 @@ function PaginationOverflow(_ref3) {
   return null;
 }
 
-var PaginationNav = /*#__PURE__*/React__default.forwardRef(function PaginationNav(_ref4, ref) {
-  var className = _ref4.className,
-      _ref4$onChange = _ref4.onChange,
-      onChange = _ref4$onChange === void 0 ? function () {} : _ref4$onChange,
-      totalItems = _ref4.totalItems,
-      _ref4$itemsShown = _ref4.itemsShown,
-      itemsShown = _ref4$itemsShown === void 0 ? 10 : _ref4$itemsShown,
-      _ref4$page = _ref4.page,
-      page = _ref4$page === void 0 ? 0 : _ref4$page,
-      _ref4$loop = _ref4.loop,
-      loop = _ref4$loop === void 0 ? false : _ref4$loop,
-      _ref4$translateWithId = _ref4.translateWithId,
-      t = _ref4$translateWithId === void 0 ? translateWithId : _ref4$translateWithId,
-      rest = _objectWithoutProperties(_ref4, _excluded);
-
-  var _useState = useState(page),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentPage = _useState2[0],
-      setCurrentPage = _useState2[1];
-
-  var _useState3 = useState(itemsShown >= 4 ? itemsShown : 4),
-      _useState4 = _slicedToArray(_useState3, 2),
-      itemsThatFit = _useState4[0],
-      setItemsThatFit = _useState4[1];
-
-  var _useState5 = useState(getCuts(currentPage, totalItems, itemsThatFit)),
-      _useState6 = _slicedToArray(_useState5, 2),
-      cuts = _useState6[0],
-      setCuts = _useState6[1];
-
-  var prevPage = usePrevious(currentPage);
-  var prefix = usePrefix();
+const PaginationNav = /*#__PURE__*/React__default.forwardRef(function PaginationNav(_ref4, ref) {
+  let {
+    className,
+    onChange = () => {},
+    totalItems,
+    itemsShown = 10,
+    page = 0,
+    loop = false,
+    translateWithId: t = translateWithId,
+    ...rest
+  } = _ref4;
+  const [currentPage, setCurrentPage] = useState(page);
+  const [itemsThatFit, setItemsThatFit] = useState(itemsShown >= 4 ? itemsShown : 4);
+  const [cuts, setCuts] = useState(getCuts(currentPage, totalItems, itemsThatFit));
+  const prevPage = usePrevious(currentPage);
+  const prefix = usePrefix();
 
   function jumpToItem(index) {
     if (index >= 0 && index < totalItems) {
@@ -207,7 +193,7 @@ var PaginationNav = /*#__PURE__*/React__default.forwardRef(function PaginationNa
   }
 
   function jumpToNext() {
-    var nextIndex = currentPage + 1;
+    const nextIndex = currentPage + 1;
 
     if (nextIndex >= totalItems) {
       if (loop) {
@@ -219,7 +205,7 @@ var PaginationNav = /*#__PURE__*/React__default.forwardRef(function PaginationNa
   }
 
   function jumpToPrevious() {
-    var previousIndex = currentPage - 1;
+    const previousIndex = currentPage - 1;
 
     if (previousIndex < 0) {
       if (loop) {
@@ -231,49 +217,48 @@ var PaginationNav = /*#__PURE__*/React__default.forwardRef(function PaginationNa
   }
 
   function pageWouldBeHidden(page) {
-    var startOffset = itemsThatFit <= 4 && page > 1 ? 0 : 1;
-    var wouldBeHiddenInFront = page >= startOffset && page <= cuts.front;
-    var wouldBeHiddenInBack = page >= totalItems - cuts.back - 1 && page <= totalItems - 2;
+    const startOffset = itemsThatFit <= 4 && page > 1 ? 0 : 1;
+    const wouldBeHiddenInFront = page >= startOffset && page <= cuts.front;
+    const wouldBeHiddenInBack = page >= totalItems - cuts.back - 1 && page <= totalItems - 2;
     return wouldBeHiddenInFront || wouldBeHiddenInBack;
   } // jump to new page if props.page is updated
 
 
-  useEffect(function () {
+  useEffect(() => {
     setCurrentPage(page);
   }, [page]); // re-calculate cuts if props.totalItems or props.itemsShown change
 
-  useEffect(function () {
+  useEffect(() => {
     setItemsThatFit(itemsShown >= 4 ? itemsShown : 4);
     setCuts(getCuts(currentPage, totalItems, itemsShown));
   }, [totalItems, itemsShown]); // eslint-disable-line react-hooks/exhaustive-deps
   // update cuts if necessary whenever currentPage changes
 
-  useEffect(function () {
+  useEffect(() => {
     if (pageWouldBeHidden(currentPage)) {
-      var delta = currentPage - prevPage || 0;
+      const delta = currentPage - prevPage || 0;
 
       if (delta > 0) {
-        var splitPoint = itemsThatFit - 3;
+        const splitPoint = itemsThatFit - 3;
         setCuts(getCuts(currentPage, totalItems, itemsThatFit, splitPoint));
       } else {
-        var _splitPoint = itemsThatFit > 4 ? 2 : 1;
-
-        setCuts(getCuts(currentPage, totalItems, itemsThatFit, _splitPoint));
+        const splitPoint = itemsThatFit > 4 ? 2 : 1;
+        setCuts(getCuts(currentPage, totalItems, itemsThatFit, splitPoint));
       }
     }
   }, [currentPage]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  var classNames = cx("".concat(prefix, "--pagination-nav"), className);
-  var backwardButtonDisabled = !loop && currentPage === 0;
-  var forwardButtonDisabled = !loop && currentPage === totalItems - 1;
-  var startOffset = itemsThatFit <= 4 && currentPage > 1 ? 0 : 1;
+  const classNames = cx(`${prefix}--pagination-nav`, className);
+  const backwardButtonDisabled = !loop && currentPage === 0;
+  const forwardButtonDisabled = !loop && currentPage === totalItems - 1;
+  const startOffset = itemsThatFit <= 4 && currentPage > 1 ? 0 : 1;
   return /*#__PURE__*/React__default.createElement("nav", _extends({
     className: classNames,
     ref: ref
   }, rest, {
     "aria-label": "pagination"
   }), /*#__PURE__*/React__default.createElement("ul", {
-    className: "".concat(prefix, "--pagination-nav__list")
+    className: `${prefix}--pagination-nav__list`
   }, /*#__PURE__*/React__default.createElement(DirectionButton, {
     direction: "backward",
     label: t('carbon.pagination-nav.previous'),
@@ -285,7 +270,7 @@ var PaginationNav = /*#__PURE__*/React__default.forwardRef(function PaginationNa
     page: 1,
     translateWithId: t,
     isActive: currentPage === 0,
-    onClick: function onClick() {
+    onClick: () => {
       jumpToItem(0);
     }
   }), /*#__PURE__*/React__default.createElement(PaginationOverflow, {
@@ -293,19 +278,15 @@ var PaginationNav = /*#__PURE__*/React__default.forwardRef(function PaginationNa
     count: cuts.front,
     onSelect: jumpToItem
   }), // render items between overflows
-  _toConsumableArray(Array(totalItems)).map(function (e, i) {
-    return i;
-  }).slice(startOffset + cuts.front, (1 + cuts.back) * -1).map(function (item) {
-    return /*#__PURE__*/React__default.createElement(PaginationItem, {
-      key: "item-".concat(item),
-      page: item + 1,
-      translateWithId: t,
-      isActive: currentPage === item,
-      onClick: function onClick() {
-        jumpToItem(item);
-      }
-    });
-  }), /*#__PURE__*/React__default.createElement(PaginationOverflow, {
+  [...Array(totalItems)].map((e, i) => i).slice(startOffset + cuts.front, (1 + cuts.back) * -1).map(item => /*#__PURE__*/React__default.createElement(PaginationItem, {
+    key: `item-${item}`,
+    page: item + 1,
+    translateWithId: t,
+    isActive: currentPage === item,
+    onClick: () => {
+      jumpToItem(item);
+    }
+  })), /*#__PURE__*/React__default.createElement(PaginationOverflow, {
     fromIndex: totalItems - cuts.back - 1,
     count: cuts.back,
     onSelect: jumpToItem
@@ -314,7 +295,7 @@ var PaginationNav = /*#__PURE__*/React__default.forwardRef(function PaginationNa
     page: totalItems,
     translateWithId: t,
     isActive: currentPage === totalItems - 1,
-    onClick: function onClick() {
+    onClick: () => {
       jumpToItem(totalItems - 1);
     }
   }), /*#__PURE__*/React__default.createElement(DirectionButton, {
@@ -325,8 +306,8 @@ var PaginationNav = /*#__PURE__*/React__default.forwardRef(function PaginationNa
   })), /*#__PURE__*/React__default.createElement("div", {
     "aria-live": "polite",
     "aria-atomic": "true",
-    className: "".concat(prefix, "--pagination-nav__accessibility-label")
-  }, "".concat(t('carbon.pagination-nav.item'), " ").concat(currentPage + 1, " ").concat(t('carbon.pagination-nav.of'), " ").concat(totalItems)));
+    className: `${prefix}--pagination-nav__accessibility-label`
+  }, `${t('carbon.pagination-nav.item')} ${currentPage + 1} ${t('carbon.pagination-nav.of')} ${totalItems}`));
 });
 DirectionButton.propTypes = {
   /**