@datarobot/design-system 28.2.2

package/cjs/pagination/pagination.js

@@ -0,0 +1,272 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = PaginationControls;
+var _react = _interopRequireDefault(require("react"));
+var _faChevronLeft = require("@fortawesome/free-solid-svg-icons/faChevronLeft");
+var _faChevronRight = require("@fortawesome/free-solid-svg-icons/faChevronRight");
+var _fontAwesomeIcon = require("../font-awesome-icon");
+var _button = require("../button");
+var _useTranslation = require("../hooks/use-translation");
+var _dropdownMenu = require("../dropdown-menu");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/* USAGE EXAMPLE
+  <PaginationControls
+    total={this.state.total}
+    count={this.state.count}
+    currentPage={this.state.currentPage}
+    pageSize={this.state.pageSize}
+    availableSizes={this.state.paginationOptions}
+    onPageChange={this.handlePageChange}
+    onPageSizeChange={this.handlePageSizeChange}
+  />
+*/
+
+const STEP = 1;
+const START_PAGE = 0;
+/** Pagination allows navigate through pages and change page size. */
+function PaginationControls(props) {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  const buildTriggerLabel = data => {
+    const {
+      isDisabled,
+      isExceededTotalLimit,
+      startOfPage,
+      endOfPage,
+      total,
+      totalLimit
+    } = data;
+    let triggerContent;
+    if (isDisabled) {
+      triggerContent = t('0-0 of 0');
+    } else if (endOfPage === null) {
+      triggerContent = isExceededTotalLimit ? t('{{startOfPage}} of {{totalLimit}}', {
+        startOfPage,
+        totalLimit
+      }) : t('{{startOfPage}} of {{total}}', {
+        startOfPage,
+        total
+      });
+    } else {
+      triggerContent = isExceededTotalLimit ? t('{{startOfPage}}-{{endOfPage}} of {{totalLimit}}+', {
+        startOfPage,
+        endOfPage,
+        totalLimit
+      }) : t('{{startOfPage}}-{{endOfPage}} of {{total}}', {
+        startOfPage,
+        endOfPage,
+        total
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: triggerContent
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(PaginationControlsBase, {
+    prevPageAriaLabel: t('Previous page'),
+    nextPageAriaLabel: t('Next page'),
+    noPageSizesText: t('No available page sizes'),
+    buildTriggerLabel: buildTriggerLabel,
+    ...props
+  });
+}
+class PaginationControlsBase extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    this.getLabel = this.getLabel.bind(this);
+    this.next = this.next.bind(this);
+    this.prev = this.prev.bind(this);
+    this.shouldShowPaginationDropdown = this.shouldShowPaginationDropdown.bind(this);
+    if (props.totalLimit && props.nextPage === undefined) {
+      throw new Error('PaginationControls must be used with defined nextPage if totalLimit is used');
+    }
+  }
+  next() {
+    const {
+      onPageChange,
+      currentPage,
+      pageSize
+    } = this.props;
+    if (this.isOnLastPage()) {
+      return;
+    }
+    onPageChange(currentPage + STEP, pageSize);
+  }
+  prev() {
+    const {
+      onPageChange,
+      currentPage,
+      pageSize
+    } = this.props;
+    if (this.isOnFirstPage()) {
+      return;
+    }
+    onPageChange(currentPage - STEP, pageSize);
+  }
+  changeSize(size) {
+    const {
+      onPageChange,
+      onPageSizeChange,
+      pageSize,
+      currentPage
+    } = this.props;
+    if (pageSize === size) {
+      return;
+    }
+    onPageSizeChange?.(size);
+    if (currentPage !== START_PAGE) {
+      onPageChange(START_PAGE, size);
+    }
+  }
+  isOnFirstPage() {
+    return this.props.currentPage === START_PAGE;
+  }
+  isOnLastPage() {
+    if (this.isExceededTotalLimit()) {
+      return !this.props.nextPage;
+    }
+    const numPages = Math.ceil(this.props.total / (this.props.pageSize ?? 1)); // if pageSize is not defined - assume it's 1
+    return this.props.currentPage >= numPages - STEP;
+  }
+  isExceededTotalLimit() {
+    const {
+      total,
+      totalLimit
+    } = this.props;
+    return !!totalLimit && total >= totalLimit;
+  }
+  getPageStart() {
+    const {
+      currentPage,
+      pageSize,
+      total
+    } = this.props;
+    if (total !== 0 && pageSize && pageSize >= total) {
+      return 1;
+    }
+    return total === 0 ? START_PAGE : currentPage * (pageSize ?? 1) + STEP;
+  }
+  getPageEnd() {
+    const {
+      currentPage,
+      pageSize,
+      count,
+      total
+    } = this.props;
+    const currentCount = (currentPage + STEP) * (pageSize ?? 1);
+    if (this.isExceededTotalLimit() && total < currentCount && count) {
+      return Math.min(currentCount, (pageSize ?? 1) * currentPage + count);
+    }
+    return Math.min(currentCount, total);
+  }
+  getLabel() {
+    const {
+      total,
+      isDisabled,
+      buildTriggerLabel,
+      totalLimit,
+      pageSize,
+      onPageSizeChange
+    } = this.props;
+    const isEndOfPageAvailable = !!pageSize && !!onPageSizeChange;
+    const startOfPage = this.getPageStart();
+    const endOfPage = isEndOfPageAvailable ? this.getPageEnd() : null;
+    return typeof buildTriggerLabel === 'function' ? buildTriggerLabel({
+      isDisabled,
+      startOfPage,
+      endOfPage,
+      total,
+      totalLimit,
+      isExceededTotalLimit: this.isExceededTotalLimit()
+    }) : null;
+  }
+  getPageSizeOptions() {
+    return this.generateSizeOptions();
+  }
+  generateSizeOptions() {
+    const {
+      total,
+      availableSizes
+    } = this.props;
+    const sizeOptions = availableSizes?.length ? availableSizes : [20, 50, 100];
+    if (total === 0 || total <= sizeOptions[0]) {
+      return [];
+    }
+    const filteredSizes = sizeOptions.filter(option => option <= total);
+    if (filteredSizes.length < sizeOptions.length) {
+      return [...filteredSizes, total];
+    }
+    return sizeOptions;
+  }
+  generateDropdownPaginationOptions() {
+    return this.getPageSizeOptions().map(option => ({
+      id: String(option),
+      key: option,
+      title: option,
+      activeItemId: String(option),
+      testId: 'pagination-menu-item'
+    }));
+  }
+  shouldShowPaginationDropdown() {
+    return this.props.pageSize && this.props.onPageSizeChange;
+  }
+  render() {
+    const {
+      isDisabled,
+      pageSize,
+      testId,
+      isLoading,
+      prevPageAriaLabel,
+      nextPageAriaLabel,
+      noPageSizesText
+    } = this.props;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("menu", {
+      className: "control-pagination",
+      "test-id": testId,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        "aria-label": prevPageAriaLabel,
+        className: "button command page-number-button",
+        "test-id": "pagination-control-prev-page",
+        onClick: this.prev,
+        disabled: this.isOnFirstPage() || isDisabled || isLoading,
+        type: _button.BUTTON_TYPES.BUTTON,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+          icon: _faChevronLeft.faChevronLeft
+        })
+      }), this.shouldShowPaginationDropdown() ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownMenu.DropdownMenu, {
+        triggerDynamicContent: this.getLabel,
+        triggerTestId: "pagination-control-label",
+        triggerClassName: "page-size-button",
+        wrapperContentTestId: "page-size-dropdown-content",
+        options: this.generateDropdownPaginationOptions(),
+        noResultsText: noPageSizesText,
+        selectedKey: pageSize,
+        isDisabled: isDisabled,
+        onSelect: option => {
+          this.changeSize(option?.key);
+        },
+        contentTestId: "pagination-control-menu",
+        placement: _dropdownMenu.DROPDOWN_MENU_PLACEMENT_TYPES.BOTTOM
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: "pagination-simple-label",
+        "test-id": "pagination-simple-label",
+        children: this.getLabel()
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+        "aria-label": nextPageAriaLabel,
+        className: "button command page-number-button",
+        "test-id": "pagination-control-next-page",
+        onClick: this.next,
+        disabled: this.isOnLastPage() || isDisabled || isLoading,
+        type: _button.BUTTON_TYPES.BUTTON,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_fontAwesomeIcon.FontAwesomeIcon, {
+          icon: _faChevronRight.faChevronRight
+        })
+      })]
+    });
+  }
+}

package/cjs/pagination-new/index.d.ts

@@ -0,0 +1,3 @@
+import PaginationNew, { PaginationNewPropsType, PaginationLocalizationType } from './pagination-new';
+export type { PaginationNewPropsType, PaginationLocalizationType };
+export { PaginationNew };

package/cjs/pagination-new/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PaginationNew", {
+  enumerable: true,
+  get: function () {
+    return _paginationNew.default;
+  }
+});
+var _paginationNew = _interopRequireDefault(require("./pagination-new"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/cjs/pagination-new/pages-buttons.d.ts

@@ -0,0 +1,7 @@
+type PagesButtonsPropType = {
+    selectedPage: number;
+    pageCount: number;
+    onPageSelect: (newPage: number) => void;
+};
+export declare function PagesButtons({ pageCount, selectedPage, onPageSelect, }: PagesButtonsPropType): import("react/jsx-runtime").JSX.Element;
+export {};

package/cjs/pagination-new/pages-buttons.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PagesButtons = PagesButtons;
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _button = require("../button");
+var _useTranslation = require("../hooks/use-translation");
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function PagesButtons({
+  pageCount,
+  selectedPage,
+  onPageSelect
+}) {
+  const layoutArray = (0, _react.useMemo)(() => (0, _utils.getPaginationLayout)({
+    selectedPage,
+    pageCount
+  }), [selectedPage, pageCount]);
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: layoutArray.map((item, index, array) => {
+      if (item === '...') {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "pagination-buttons-dots",
+          children: "..."
+        }, index);
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        accentType: _button.ACCENT_TYPES.GHOST,
+        onClick: () => {
+          if (item !== selectedPage) {
+            onPageSelect(item);
+          }
+        },
+        "aria-current": item === selectedPage,
+        "aria-label": t('Page {{number}}', {
+          number: item + 1
+        }),
+        className: (0, _classnames.default)('page-button', {
+          active: item === selectedPage,
+          first: index === 0,
+          last: index === array.length - 1
+        }),
+        testId: `page-button-${item + 1}`,
+        children: item + 1
+      }, index);
+    })
+  });
+}

package/cjs/pagination-new/pagination-new.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import './pagination-new.less';
+export type PaginationParams = {
+    selectedPage: number;
+    itemsPerPage: number;
+    total: number;
+    totalLimit?: number;
+    isExceededTotalLimit?: boolean;
+};
+export type PaginationLocalizationType = {
+    nextBtnText: string;
+    previousBtnText: string;
+    paginationGroupText: string;
+    getSelectedPageSizeText: (itemsPerPage: number, totalItems: number) => string;
+    getPaginationSummaryText: (paginationParams: PaginationParams) => string;
+};
+export type PaginationNewPropsType = {
+    /** index of currently selected page */
+    selectedPage: number;
+    /** total number of items */
+    total: number;
+    /** number of items per page */
+    itemsPerPage: number;
+    /** Possible items per page options */
+    pageSizeOptions?: number[];
+    /** Callback to be invoked upon page change */
+    onPageSelect: (newPage: number) => void;
+    /** Callback to be invoked upon items per page change */
+    onItemsPerPageChange: (itemsPerPage: number) => unknown;
+    /** Shows skeleton instead of pagination controls */
+    isLoading?: boolean;
+    nextBtnText?: PaginationLocalizationType['nextBtnText'];
+    previousBtnText?: PaginationLocalizationType['previousBtnText'];
+    paginationGroupText?: PaginationLocalizationType['paginationGroupText'];
+    getSelectedPageSizeText?: PaginationLocalizationType['getSelectedPageSizeText'];
+    getPaginationSummaryText?: PaginationLocalizationType['getPaginationSummaryText'];
+    /** Limit for the total number. (If total is gte than total limit "<totalLimit>+" will be rendered in the label e.g. 1-100 of 3000+) */
+    totalLimit?: number;
+    isExceededTotalLimit?: boolean;
+    /** Determines if nextPage is available */
+    nextPage?: boolean;
+};
+/**
+ * New Pagination component to be used with new table component and likely in other places where pagination is needed
+ * Designed for UXR only UI.
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ * @uxr-only-supported
+ */
+declare function PaginationNew({ selectedPage, total, totalLimit, isExceededTotalLimit, nextPage, itemsPerPage, pageSizeOptions, onPageSelect, onItemsPerPageChange, isLoading, nextBtnText: nextBtnTextParams, previousBtnText: previousBtnTextParams, paginationGroupText, getSelectedPageSizeText, getPaginationSummaryText, }: PaginationNewPropsType): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof PaginationNew>;
+export default _default;

package/cjs/pagination-new/pagination-new.js

@@ -0,0 +1,196 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _uniqueId = _interopRequireDefault(require("lodash-es/uniqueId"));
+var _faChevronLeft = require("@fortawesome/pro-solid-svg-icons/faChevronLeft");
+var _faChevronRight = require("@fortawesome/pro-solid-svg-icons/faChevronRight");
+var _pagesButtons = require("./pages-buttons");
+var _button = require("../button");
+var _dropdownMenu = require("../dropdown-menu");
+var _truncateWithTooltip = require("../truncate-with-tooltip");
+var _skeleton = require("../skeleton");
+var _useTranslation = require("../hooks/use-translation");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * New Pagination component to be used with new table component and likely in other places where pagination is needed
+ * Designed for UXR only UI.
+ * @midnight-gray-supported
+ * @alpine-light-supported
+ * @uxr-only-supported
+ */
+function PaginationNew({
+  selectedPage,
+  total,
+  totalLimit,
+  isExceededTotalLimit = !!totalLimit && total >= totalLimit,
+  nextPage,
+  itemsPerPage,
+  pageSizeOptions = [10, 20, 50],
+  onPageSelect,
+  onItemsPerPageChange,
+  isLoading = false,
+  nextBtnText: nextBtnTextParams,
+  previousBtnText: previousBtnTextParams,
+  paginationGroupText,
+  getSelectedPageSizeText,
+  getPaginationSummaryText
+}) {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  const nextBtnText = nextBtnTextParams ?? t('Next page');
+  const previousBtnText = previousBtnTextParams ?? t('Previous page');
+  (0, _react.useEffect)(() => {
+    if (totalLimit && nextPage === undefined && process.env.NODE_ENV === 'development') {
+      // eslint-disable-next-line no-console
+      console.error('[PaginationNew] PaginationNew must be used with defined nextPage if totalLimit is used');
+    }
+  }, []);
+  const pageSizeOpts = (0, _react.useMemo)(() => {
+    if (total === 0) {
+      return [];
+    }
+    const filteredSizes = pageSizeOptions.filter(option => option < total);
+    if (filteredSizes.length < pageSizeOptions.length) {
+      return [...filteredSizes, total];
+    }
+    return pageSizeOptions;
+  }, [pageSizeOptions, total]);
+  const itemsPerPageOptions = (0, _react.useMemo)(() => pageSizeOpts.map(item => ({
+    key: item,
+    title: item,
+    testId: `page-size-option-${item}`
+  })), [pageSizeOpts]);
+  const numberOfPages = (0, _react.useMemo)(() => {
+    if (isExceededTotalLimit) {
+      if (!nextPage) {
+        return selectedPage + 1;
+      }
+      return selectedPage >= Math.ceil(totalLimit / itemsPerPage) ? selectedPage + 1 : Math.ceil(totalLimit / itemsPerPage);
+    }
+    return Math.ceil(total / itemsPerPage);
+  }, [itemsPerPage, total, totalLimit, nextPage, selectedPage, isExceededTotalLimit]);
+  const isNextDisabled = isExceededTotalLimit ? !nextPage : selectedPage + 1 >= numberOfPages;
+  const [perPageTriggerId] = (0, _react.useState)(`pagination-items-per-page-trigger-${(0, _uniqueId.default)()}`);
+  const getDefaultPaginationSummaryText = () => {
+    const start = total === 0 ? 0 : itemsPerPage * selectedPage + 1;
+    const endNumber = itemsPerPage * (selectedPage + 1);
+    const endNumberToTotalItems = total < endNumber ? total : endNumber;
+    const end = total === 0 ? 0 : endNumberToTotalItems;
+    const endLimited = selectedPage * itemsPerPage + itemsPerPage;
+    return isExceededTotalLimit ? t('{{start}}-{{endLimited}} of {{totalLimit}}+ items', {
+      start,
+      endLimited,
+      totalLimit: totalLimit
+    }) : t('{{start}}-{{end}} of {{total}} items', {
+      start,
+      end,
+      total
+    });
+  };
+  if (isLoading) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "pagination-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "pagination-buttons-container",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+          type: _skeleton.SKELETON_TYPES.ROUNDED,
+          width: 300,
+          className: "pagination-loading-skeleton",
+          testId: "pagination-loading-skeleton"
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+        type: _skeleton.SKELETON_TYPES.ROUNDED,
+        width: 90,
+        className: "pagination-loading-skeleton",
+        testId: "pagination-loading-skeleton"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "pagination-summary-container",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_skeleton.Skeleton, {
+          type: _skeleton.SKELETON_TYPES.ROUNDED,
+          width: 120,
+          className: "pagination-loading-skeleton",
+          testId: "pagination-loading-skeleton"
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: "pagination-container",
+    "aria-label": paginationGroupText ?? t('Pagination'),
+    role: "group",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "pagination-buttons-container",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        accentType: _button.ACCENT_TYPES.GHOST,
+        leftIcon: _faChevronLeft.faChevronLeft,
+        className: "pagination-prev-btn",
+        isDisabled: selectedPage === 0,
+        onClick: () => onPageSelect(selectedPage - 1),
+        testId: "pagination-previous-btn",
+        "aria-label": previousBtnText,
+        children: previousBtnText
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_pagesButtons.PagesButtons, {
+        selectedPage: selectedPage,
+        pageCount: numberOfPages,
+        onPageSelect: onPageSelect
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
+        accentType: _button.ACCENT_TYPES.GHOST,
+        rightIcon: _faChevronRight.faChevronRight,
+        className: "pagination-next-btn",
+        isDisabled: isNextDisabled,
+        onClick: () => onPageSelect(selectedPage + 1),
+        testId: "pagination-next-btn",
+        "aria-label": nextBtnText,
+        children: nextBtnText
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownMenu.DropdownMenu, {
+      options: itemsPerPageOptions,
+      selectedKey: itemsPerPage,
+      onSelect: selectedOption => {
+        if (selectedOption) {
+          onItemsPerPageChange(selectedOption.key);
+        }
+      },
+      triggerDynamicContent: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "long-page-size-trigger-name",
+            children: getSelectedPageSizeText?.(itemsPerPage, total) ?? t('{{pages}} per page', {
+              pages: total < itemsPerPage ? total : itemsPerPage
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "short-page-size-trigger-name",
+            children: itemsPerPage
+          })]
+        })
+      }),
+      isDisabled: total === 0,
+      triggerClassName: "pagination-items-per-page-dropdown",
+      triggerId: perPageTriggerId,
+      triggerTestId: "pagination-items-per-page-trigger",
+      contentTestId: "pagination-items-per-page-dropdown-content"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "pagination-summary-container",
+      "test-id": "pagination-summary-container",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_truncateWithTooltip.TruncateWithTooltip, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: getPaginationSummaryText?.({
+            selectedPage,
+            itemsPerPage,
+            total,
+            totalLimit,
+            isExceededTotalLimit
+          }) ?? getDefaultPaginationSummaryText()
+        })
+      })
+    })]
+  });
+}
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(PaginationNew);

package/cjs/pagination-new/utils.d.ts

@@ -0,0 +1,6 @@
+type PaginationLayoutParams = {
+    selectedPage: number;
+    pageCount: number;
+};
+export declare function getPaginationLayout({ selectedPage, pageCount, }: PaginationLayoutParams): (string | number)[];
+export {};

package/cjs/pagination-new/utils.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPaginationLayout = getPaginationLayout;
+const DOTS = '...';
+function range(start, end) {
+  return Array.from({
+    length: end - start || 1
+  }).map((_, index) => start + index);
+}
+function getPaginationLayout({
+  selectedPage,
+  pageCount
+}) {
+  const siblingsCount = 1;
+  const MAX_ELEMENTS = 2 * siblingsCount + 5; // selected, right sibling, left sibling, first, last, 2 dots
+
+  // if the number of pages is less than MAX_ELEMENTS - render all numbers
+  if (pageCount <= MAX_ELEMENTS) {
+    return range(0, pageCount);
+  }
+  const isLeftDotsVisible = selectedPage - siblingsCount > 2;
+  const isRightDotsVisible = pageCount - 1 - (selectedPage + siblingsCount) > 2;
+  if (isLeftDotsVisible && isRightDotsVisible) {
+    return [0, DOTS, selectedPage - 1, selectedPage, selectedPage + 1, DOTS, pageCount - 1];
+  }
+  if (isRightDotsVisible) {
+    return [...range(0, MAX_ELEMENTS - 2), DOTS, pageCount - 1];
+  }
+  if (isLeftDotsVisible) {
+    return [0, DOTS, ...range(pageCount - (MAX_ELEMENTS - 2), pageCount)];
+  }
+  return [];
+}

package/cjs/pill/index.d.ts

@@ -0,0 +1,2 @@
+export type { PillProps } from './pill';
+export { default as Pill } from './pill';

package/cjs/pill/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Pill", {
+  enumerable: true,
+  get: function () {
+    return _pill.default;
+  }
+});
+var _pill = _interopRequireDefault(require("./pill"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/cjs/pill/pill.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './pill.less';
+export type PillProps = {
+    children: React.ReactElement;
+    isActive?: boolean;
+    onClick?: (event: React.MouseEvent) => void;
+    className?: string;
+    testId?: string;
+};
+/** Pills should label page content. */
+export default function Pill({ children, isActive, onClick, className, testId, }: PillProps): import("react/jsx-runtime").JSX.Element;