@payloadcms/ui 4.0.0-internal.d28e9fb → 4.0.0-internal.d7d662c

package/dist/elements/Pagination/SimplePagination/index.js

@@ -0,0 +1,116 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { useTableID } from '../../Table/TableIdentity.js';
+import { ClickableArrow } from '../ClickableArrow/index.js';
+import './index.css';
+const baseClass = 'simple-pagination';
+/**
+ * A simplified pagination component for inline use (e.g., in table headers).
+ * Shows "X-Y of Z" with prev/next arrows. No page input or per-page selector.
+ */
+export const SimplePagination = t0 => {
+  const $ = _c(21);
+  const {
+    data,
+    onChange,
+    tableId
+  } = t0;
+  const {
+    i18n
+  } = useTranslation();
+  const resolvedTableID = useTableID(tableId);
+  const {
+    hasNextPage: t1,
+    hasPrevPage: t2,
+    limit,
+    nextPage,
+    page: t3,
+    pagingCounter,
+    prevPage,
+    totalDocs,
+    totalPages: t4
+  } = data;
+  const hasNextPage = t1 === undefined ? false : t1;
+  const hasPrevPage = t2 === undefined ? false : t2;
+  const currentPage = t3 === undefined ? 1 : t3;
+  const totalPages = t4 === undefined ? 1 : t4;
+  let t5;
+  if ($[0] !== currentPage || $[1] !== hasPrevPage || $[2] !== onChange || $[3] !== prevPage) {
+    t5 = () => {
+      if (onChange && hasPrevPage) {
+        onChange(prevPage ?? Math.max(1, currentPage - 1));
+      }
+    };
+    $[0] = currentPage;
+    $[1] = hasPrevPage;
+    $[2] = onChange;
+    $[3] = prevPage;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  const handlePrevPage = t5;
+  let t6;
+  if ($[5] !== currentPage || $[6] !== hasNextPage || $[7] !== nextPage || $[8] !== onChange) {
+    t6 = () => {
+      if (onChange && hasNextPage) {
+        onChange(nextPage ?? currentPage + 1);
+      }
+    };
+    $[5] = currentPage;
+    $[6] = hasNextPage;
+    $[7] = nextPage;
+    $[8] = onChange;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  const handleNextPage = t6;
+  if (totalDocs === 0) {
+    return null;
+  }
+  const startItem = pagingCounter ?? (currentPage - 1) * limit + 1;
+  const endItem = Math.min(startItem + limit - 1, totalDocs);
+  let t7;
+  if ($[10] !== endItem || $[11] !== handleNextPage || $[12] !== handlePrevPage || $[13] !== hasNextPage || $[14] !== hasPrevPage || $[15] !== i18n || $[16] !== resolvedTableID || $[17] !== startItem || $[18] !== totalDocs || $[19] !== totalPages) {
+    t7 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsxs("span", {
+        className: `${baseClass}__info`,
+        children: [startItem, "-", endItem, " ", i18n.t("general:of"), " ", totalDocs]
+      }), totalPages > 1 && _jsxs("div", {
+        className: `${baseClass}__arrows`,
+        children: [_jsx(ClickableArrow, {
+          ariaControls: resolvedTableID,
+          direction: "left",
+          isDisabled: !hasPrevPage,
+          updatePage: handlePrevPage
+        }), _jsx(ClickableArrow, {
+          ariaControls: resolvedTableID,
+          direction: "right",
+          isDisabled: !hasNextPage,
+          updatePage: handleNextPage
+        })]
+      })]
+    });
+    $[10] = endItem;
+    $[11] = handleNextPage;
+    $[12] = handlePrevPage;
+    $[13] = hasNextPage;
+    $[14] = hasPrevPage;
+    $[15] = i18n;
+    $[16] = resolvedTableID;
+    $[17] = startItem;
+    $[18] = totalDocs;
+    $[19] = totalPages;
+    $[20] = t7;
+  } else {
+    t7 = $[20];
+  }
+  return t7;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Pagination/SimplePagination/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useTranslation","useTableID","ClickableArrow","baseClass","SimplePagination","t0","$","data","onChange","tableId","i18n","resolvedTableID","hasNextPage","t1","hasPrevPage","t2","limit","nextPage","page","t3","pagingCounter","prevPage","totalDocs","totalPages","t4","undefined","currentPage","t5","Math","max","handlePrevPage","t6","handleNextPage","startItem","endItem","min","t7","_jsxs","className","children","t","_jsx","ariaControls","direction","isDisabled","updatePage"],"sources":["../../../../src/elements/Pagination/SimplePagination/index.tsx"],"sourcesContent":["'use client'\nimport type { PaginatedDocs } from 'payload'\n\nimport React from 'react'\n\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { useTableID } from '../../Table/TableIdentity.js'\nimport { ClickableArrow } from '../ClickableArrow/index.js'\nimport './index.css'\n\nconst baseClass = 'simple-pagination'\n\nexport type SimplePaginationProps = {\n  data: PaginatedDocs\n  onChange?: (page: number) => void\n  tableId?: string\n}\n\n/**\n * A simplified pagination component for inline use (e.g., in table headers).\n * Shows \"X-Y of Z\" with prev/next arrows. No page input or per-page selector.\n */\nexport const SimplePagination: React.FC<SimplePaginationProps> = ({ data, onChange, tableId }) => {\n  const { i18n } = useTranslation()\n  const resolvedTableID = useTableID(tableId)\n\n  const {\n    hasNextPage = false,\n    hasPrevPage = false,\n    limit,\n    nextPage,\n    page: currentPage = 1,\n    pagingCounter,\n    prevPage,\n    totalDocs,\n    totalPages = 1,\n  } = data\n\n  const handlePrevPage = () => {\n    if (onChange && hasPrevPage) {\n      onChange(prevPage ?? Math.max(1, currentPage - 1))\n    }\n  }\n\n  const handleNextPage = () => {\n    if (onChange && hasNextPage) {\n      onChange(nextPage ?? currentPage + 1)\n    }\n  }\n\n  // Don't render if no docs or only one page\n  if (totalDocs === 0) {\n    return null\n  }\n\n  const startItem = pagingCounter ?? (currentPage - 1) * limit + 1\n  const endItem = Math.min(startItem + limit - 1, totalDocs)\n\n  return (\n    <div className={baseClass}>\n      <span className={`${baseClass}__info`}>\n        {startItem}-{endItem} {i18n.t('general:of')} {totalDocs}\n      </span>\n      {totalPages > 1 && (\n        <div className={`${baseClass}__arrows`}>\n          <ClickableArrow\n            ariaControls={resolvedTableID}\n            direction=\"left\"\n            isDisabled={!hasPrevPage}\n            updatePage={handlePrevPage}\n          />\n          <ClickableArrow\n            ariaControls={resolvedTableID}\n            direction=\"right\"\n            isDisabled={!hasNextPage}\n            updatePage={handleNextPage}\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Pagination/index.css

@@ -0,0 +1,53 @@
+@layer payload-default {
+  .paginator {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+  }
+
+  .paginator__page-input-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+  }
+
+  .paginator__page-input {
+    box-sizing: content-box;
+    min-width: calc(var(--spacer-3) - 2px); /* -2px for content-box sizing */
+    min-height: calc(var(--control-height) - 2px);
+    padding: 0 var(--spacer-1);
+    border: var(--stroke-width-small) solid var(--field-color-border);
+    border-radius: var(--field-border-radius);
+    background: var(--color-bg-secondary);
+    color: var(--field-color-text);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    text-align: center;
+
+    &:hover:not(:focus) {
+      border-color: var(--color-border);
+    }
+
+    &:focus {
+      border-color: var(--color-border-selected);
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  .paginator__page-total {
+    color: var(--color-text);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    white-space: nowrap;
+  }
+}

package/dist/elements/Pagination/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type PaginationProps = {
     hasNextPage?: boolean;
     hasPrevPage?: boolean;
@@ -9,18 +9,8 @@ export type PaginationProps = {
     onChange?: (page: number) => void;
     page?: number;
     prevPage?: number;
+    tableId?: string;
     totalPages?: number;
 };
-export type Node = {
-    props?: {
-        direction?: 'left' | 'right';
-        isDisabled?: boolean;
-        isFirstPage?: boolean;
-        isLastPage?: boolean;
-        page?: number;
-        updatePage: (page?: number) => void;
-    };
-    type: 'ClickableArrow' | 'Page' | 'Separator';
-} | number;
 export declare const Pagination: React.FC<PaginationProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Pagination/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pagination/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAYrB,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,MAAM,MAAM,IAAI,GACZ;IACE,KAAK,CAAC,EAAE;QACN,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;QAC5B,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,WAAW,CAAC,EAAE,OAAO,CAAA;QACrB,UAAU,CAAC,EAAE,OAAO,CAAA;QACpB,IAAI,CAAC,EAAE,MAAM,CAAA;QACb,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;KACpC,CAAA;IACD,IAAI,EAAE,gBAAgB,GAAG,MAAM,GAAG,WAAW,CAAA;CAC9C,GACD,MAAM,CAAA;AAEV,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0GhD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pagination/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAuC,MAAM,OAAO,CAAA;AAI3D,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,eAAe,GAAG;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAiHhD,CAAA"}

package/dist/elements/Pagination/index.js

@@ -1,115 +1,217 @@
 'use client';
 
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useId, useState } from 'react';
+import { useTranslation } from '../../providers/Translation/index.js';
 import { ClickableArrow } from './ClickableArrow/index.js';
-import './index.scss';
-import { Page } from './Page/index.js';
-import { Separator } from './Separator/index.js';
-const nodeTypes = {
-  ClickableArrow,
-  Page,
-  Separator
-};
+import './index.css';
 const baseClass = 'paginator';
 export const Pagination = props => {
+  const $ = _c(38);
   const {
-    hasNextPage = false,
-    hasPrevPage = false,
-    nextPage = null,
-    numberOfNeighbors = 1,
+    hasNextPage: t0,
+    hasPrevPage: t1,
+    nextPage: t2,
     onChange,
-    page: currentPage,
-    prevPage = null,
-    totalPages = null
+    page: t3,
+    prevPage: t4,
+    tableId,
+    totalPages: t5
   } = props;
-  if (!hasPrevPage && !hasNextPage) {
-    return null;
+  const hasNextPage = t0 === undefined ? false : t0;
+  const hasPrevPage = t1 === undefined ? false : t1;
+  const nextPage = t2 === undefined ? null : t2;
+  const currentPage = t3 === undefined ? 1 : t3;
+  const prevPage = t4 === undefined ? null : t4;
+  const totalPages = t5 === undefined ? 1 : t5;
+  const pageDescriptionID = useId();
+  const {
+    t
+  } = useTranslation();
+  const [inputValue, setInputValue] = useState(String(currentPage));
+  let t6;
+  let t7;
+  if ($[0] !== currentPage) {
+    t6 = () => {
+      setInputValue(String(currentPage));
+    };
+    t7 = [currentPage];
+    $[0] = currentPage;
+    $[1] = t6;
+    $[2] = t7;
+  } else {
+    t6 = $[1];
+    t7 = $[2];
   }
-  const updatePage = page => {
-    if (typeof onChange === 'function') {
-      onChange(page);
-    }
-  };
-  // Create array of integers for each page
-  const pages = Array.from({
-    length: totalPages
-  }, (_, index) => index + 1);
-  // Assign indices for start and end of the range of pages that should be shown in paginator
-  let rangeStartIndex = currentPage - 1 - numberOfNeighbors;
-  // Sanitize rangeStartIndex in case it is less than zero for safe split
-  if (rangeStartIndex <= 0) {
-    rangeStartIndex = 0;
+  React.useEffect(t6, t7);
+  let t8;
+  if ($[3] !== onChange) {
+    t8 = page => {
+      if (typeof onChange === "function") {
+        onChange(page);
+      }
+    };
+    $[3] = onChange;
+    $[4] = t8;
+  } else {
+    t8 = $[4];
   }
-  const rangeEndIndex = currentPage - 1 + numberOfNeighbors + 1;
-  // Slice out the range of pages that we want to render
-  const nodes = pages.slice(rangeStartIndex, rangeEndIndex);
-  // Add prev separator if necessary
-  if (currentPage - numberOfNeighbors - 1 >= 2) {
-    nodes.unshift({
-      type: 'Separator'
-    });
+  const updatePage = t8;
+  let t9;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = e => {
+      setInputValue(e.target.value);
+    };
+    $[5] = t9;
+  } else {
+    t9 = $[5];
   }
-  // Add first page if necessary
-  if (currentPage > numberOfNeighbors + 1) {
-    nodes.unshift({
-      type: 'Page',
-      props: {
-        isFirstPage: true,
-        page: 1,
-        updatePage
+  const handleInputChange = t9;
+  let t10;
+  if ($[6] !== currentPage || $[7] !== inputValue || $[8] !== totalPages || $[9] !== updatePage) {
+    t10 = () => {
+      const parsed = parseInt(inputValue, 10);
+      if (!isNaN(parsed)) {
+        const clamped = Math.max(1, Math.min(parsed, totalPages));
+        if (clamped !== currentPage) {
+          updatePage(clamped);
+        } else {
+          setInputValue(String(currentPage));
+        }
+      } else {
+        setInputValue(String(currentPage));
       }
-    });
+    };
+    $[6] = currentPage;
+    $[7] = inputValue;
+    $[8] = totalPages;
+    $[9] = updatePage;
+    $[10] = t10;
+  } else {
+    t10 = $[10];
   }
-  // Add next separator if necessary
-  if (currentPage + numberOfNeighbors + 1 < totalPages) {
-    nodes.push({
-      type: 'Separator'
-    });
-  }
-  // Add last page if necessary
-  if (rangeEndIndex < totalPages) {
-    nodes.push({
-      type: 'Page',
-      props: {
-        isLastPage: true,
-        page: totalPages,
-        updatePage
+  const handleInputBlur = t10;
+  let t11;
+  if ($[11] !== currentPage || $[12] !== inputValue || $[13] !== totalPages) {
+    t11 = e_0 => {
+      if (e_0.key === "Enter") {
+        e_0.currentTarget.blur();
+      } else {
+        if (e_0.key === "Escape") {
+          setInputValue(String(currentPage));
+          e_0.currentTarget.blur();
+        } else {
+          if (e_0.key === "ArrowUp") {
+            e_0.preventDefault();
+            const parsed_0 = parseInt(inputValue, 10);
+            if (!isNaN(parsed_0) && parsed_0 < totalPages) {
+              setInputValue(String(parsed_0 + 1));
+            }
+          } else {
+            if (e_0.key === "ArrowDown") {
+              e_0.preventDefault();
+              const parsed_1 = parseInt(inputValue, 10);
+              if (!isNaN(parsed_1) && parsed_1 > 1) {
+                setInputValue(String(parsed_1 - 1));
+              }
+            }
+          }
+        }
       }
-    });
+    };
+    $[11] = currentPage;
+    $[12] = inputValue;
+    $[13] = totalPages;
+    $[14] = t11;
+  } else {
+    t11 = $[14];
   }
-  // Add prev and next arrows based on necessity
-  nodes.unshift({
-    type: 'ClickableArrow',
-    props: {
-      direction: 'right',
-      isDisabled: !hasNextPage,
-      updatePage: () => updatePage(nextPage ?? currentPage + 1)
+  const handleInputKeyDown = t11;
+  const isSinglePage = !totalPages || totalPages <= 1;
+  let t12;
+  if ($[15] !== currentPage || $[16] !== handleInputBlur || $[17] !== handleInputKeyDown || $[18] !== hasNextPage || $[19] !== hasPrevPage || $[20] !== inputValue || $[21] !== isSinglePage || $[22] !== nextPage || $[23] !== pageDescriptionID || $[24] !== prevPage || $[25] !== t || $[26] !== tableId || $[27] !== totalPages || $[28] !== updatePage) {
+    let t13;
+    if ($[30] !== currentPage || $[31] !== prevPage || $[32] !== updatePage) {
+      t13 = () => updatePage(prevPage ?? Math.max(1, currentPage - 1));
+      $[30] = currentPage;
+      $[31] = prevPage;
+      $[32] = updatePage;
+      $[33] = t13;
+    } else {
+      t13 = $[33];
     }
-  });
-  nodes.unshift({
-    type: 'ClickableArrow',
-    props: {
-      direction: 'left',
-      isDisabled: !hasPrevPage,
-      updatePage: () => updatePage(prevPage ?? Math.max(1, currentPage - 1))
+    let t14;
+    if ($[34] !== currentPage || $[35] !== nextPage || $[36] !== updatePage) {
+      t14 = () => updatePage(nextPage ?? currentPage + 1);
+      $[34] = currentPage;
+      $[35] = nextPage;
+      $[36] = updatePage;
+      $[37] = t14;
+    } else {
+      t14 = $[37];
     }
-  });
-  return /*#__PURE__*/_jsx("div", {
-    className: baseClass,
-    children: nodes.map((node, i) => {
-      if (typeof node === 'number') {
-        return /*#__PURE__*/_jsx(Page, {
-          isCurrent: currentPage === node,
-          page: node,
-          updatePage: updatePage
-        }, i);
-      }
-      const NodeType = nodeTypes[node.type];
-      return /*#__PURE__*/_jsx(NodeType, {
-        ...node.props
-      }, i);
-    })
-  });
+    t12 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsx(ClickableArrow, {
+        ariaControls: tableId,
+        direction: "left",
+        isDisabled: isSinglePage || !hasPrevPage,
+        updatePage: t13
+      }), _jsx(ClickableArrow, {
+        ariaControls: tableId,
+        direction: "right",
+        isDisabled: isSinglePage || !hasNextPage,
+        updatePage: t14
+      }), _jsxs("div", {
+        className: `${baseClass}__page-input-wrapper`,
+        children: [_jsx("input", {
+          "aria-controls": tableId,
+          "aria-describedby": pageDescriptionID,
+          "aria-label": t("general:goToPage"),
+          className: `${baseClass}__page-input`,
+          disabled: isSinglePage,
+          inputMode: "numeric",
+          max: totalPages,
+          min: 1,
+          onBlur: handleInputBlur,
+          onChange: handleInputChange,
+          onKeyDown: handleInputKeyDown,
+          style: {
+            width: `${Math.max(inputValue.length, 1)}ch`
+          },
+          type: "text",
+          value: inputValue
+        }), _jsx("span", {
+          className: "sr-only",
+          id: pageDescriptionID,
+          children: t("general:pageNumberRange", {
+            totalPages: isSinglePage ? 1 : totalPages
+          })
+        }), _jsxs("span", {
+          className: `${baseClass}__page-total`,
+          children: [t("general:of"), " ", isSinglePage ? 1 : totalPages]
+        })]
+      })]
+    });
+    $[15] = currentPage;
+    $[16] = handleInputBlur;
+    $[17] = handleInputKeyDown;
+    $[18] = hasNextPage;
+    $[19] = hasPrevPage;
+    $[20] = inputValue;
+    $[21] = isSinglePage;
+    $[22] = nextPage;
+    $[23] = pageDescriptionID;
+    $[24] = prevPage;
+    $[25] = t;
+    $[26] = tableId;
+    $[27] = totalPages;
+    $[28] = updatePage;
+    $[29] = t12;
+  } else {
+    t12 = $[29];
+  }
+  return t12;
 };
 //# sourceMappingURL=index.js.map

package/dist/elements/Pagination/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","ClickableArrow","Page","Separator","nodeTypes","baseClass","Pagination","props","hasNextPage","hasPrevPage","nextPage","numberOfNeighbors","onChange","page","currentPage","prevPage","totalPages","updatePage","pages","Array","from","length","_","index","rangeStartIndex","rangeEndIndex","nodes","slice","unshift","type","isFirstPage","push","isLastPage","direction","isDisabled","Math","max","_jsx","className","map","node","i","isCurrent","NodeType"],"sources":["../../../src/elements/Pagination/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { ClickableArrow } from './ClickableArrow/index.js'\nimport './index.scss'\nimport { Page } from './Page/index.js'\nimport { Separator } from './Separator/index.js'\n\nconst nodeTypes = {\n  ClickableArrow,\n  Page,\n  Separator,\n}\n\nconst baseClass = 'paginator'\n\nexport type PaginationProps = {\n  hasNextPage?: boolean\n  hasPrevPage?: boolean\n  limit?: number\n  nextPage?: number\n  numberOfNeighbors?: number\n  onChange?: (page: number) => void\n  page?: number\n  prevPage?: number\n  totalPages?: number\n}\n\nexport type Node =\n  | {\n      props?: {\n        direction?: 'left' | 'right'\n        isDisabled?: boolean\n        isFirstPage?: boolean\n        isLastPage?: boolean\n        page?: number\n        updatePage: (page?: number) => void\n      }\n      type: 'ClickableArrow' | 'Page' | 'Separator'\n    }\n  | number\n\nexport const Pagination: React.FC<PaginationProps> = (props) => {\n  const {\n    hasNextPage = false,\n    hasPrevPage = false,\n    nextPage = null,\n    numberOfNeighbors = 1,\n    onChange,\n    page: currentPage,\n    prevPage = null,\n    totalPages = null,\n  } = props\n\n  if (!hasPrevPage && !hasNextPage) {\n    return null\n  }\n\n  const updatePage = (page) => {\n    if (typeof onChange === 'function') {\n      onChange(page)\n    }\n  }\n\n  // Create array of integers for each page\n  const pages = Array.from({ length: totalPages }, (_, index) => index + 1)\n\n  // Assign indices for start and end of the range of pages that should be shown in paginator\n  let rangeStartIndex = currentPage - 1 - numberOfNeighbors\n\n  // Sanitize rangeStartIndex in case it is less than zero for safe split\n  if (rangeStartIndex <= 0) {\n    rangeStartIndex = 0\n  }\n\n  const rangeEndIndex = currentPage - 1 + numberOfNeighbors + 1\n\n  // Slice out the range of pages that we want to render\n  const nodes: Node[] = pages.slice(rangeStartIndex, rangeEndIndex)\n\n  // Add prev separator if necessary\n  if (currentPage - numberOfNeighbors - 1 >= 2) {\n    nodes.unshift({ type: 'Separator' })\n  }\n\n  // Add first page if necessary\n  if (currentPage > numberOfNeighbors + 1) {\n    nodes.unshift({\n      type: 'Page',\n      props: {\n        isFirstPage: true,\n        page: 1,\n        updatePage,\n      },\n    })\n  }\n\n  // Add next separator if necessary\n  if (currentPage + numberOfNeighbors + 1 < totalPages) {\n    nodes.push({ type: 'Separator' })\n  }\n\n  // Add last page if necessary\n  if (rangeEndIndex < totalPages) {\n    nodes.push({\n      type: 'Page',\n      props: {\n        isLastPage: true,\n        page: totalPages,\n        updatePage,\n      },\n    })\n  }\n\n  // Add prev and next arrows based on necessity\n  nodes.unshift({\n    type: 'ClickableArrow',\n    props: {\n      direction: 'right',\n      isDisabled: !hasNextPage,\n      updatePage: () => updatePage(nextPage ?? currentPage + 1),\n    },\n  })\n\n  nodes.unshift({\n    type: 'ClickableArrow',\n    props: {\n      direction: 'left',\n      isDisabled: !hasPrevPage,\n      updatePage: () => updatePage(prevPage ?? Math.max(1, currentPage - 1)),\n    },\n  })\n\n  return (\n    <div className={baseClass}>\n      {nodes.map((node, i) => {\n        if (typeof node === 'number') {\n          return (\n            <Page isCurrent={currentPage === node} key={i} page={node} updatePage={updatePage} />\n          )\n        }\n\n        const NodeType = nodeTypes[node.type]\n\n        return <NodeType key={i} {...node.props} />\n      })}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useId","useState","useTranslation","ClickableArrow","baseClass","Pagination","props","$","hasNextPage","t0","hasPrevPage","t1","nextPage","t2","onChange","page","t3","prevPage","t4","tableId","totalPages","t5","undefined","currentPage","pageDescriptionID","t","inputValue","setInputValue","String","t6","t7","useEffect","t8","updatePage","t9","Symbol","for","e","target","value","handleInputChange","t10","parsed","parseInt","isNaN","clamped","Math","max","min","handleInputBlur","t11","e_0","key","currentTarget","blur","preventDefault","parsed_0","parsed_1","handleInputKeyDown","isSinglePage","t12","t13","t14","_jsxs","className","children","_jsx","ariaControls","direction","isDisabled","disabled","inputMode","onBlur","onKeyDown","style","width","length","type","id"],"sources":["../../../src/elements/Pagination/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useId, useState } from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ClickableArrow } from './ClickableArrow/index.js'\nimport './index.css'\n\nconst baseClass = 'paginator'\n\nexport type PaginationProps = {\n  hasNextPage?: boolean\n  hasPrevPage?: boolean\n  limit?: number\n  nextPage?: number\n  numberOfNeighbors?: number\n  onChange?: (page: number) => void\n  page?: number\n  prevPage?: number\n  tableId?: string\n  totalPages?: number\n}\n\nexport const Pagination: React.FC<PaginationProps> = (props) => {\n  const {\n    hasNextPage = false,\n    hasPrevPage = false,\n    nextPage = null,\n    onChange,\n    page: currentPage = 1,\n    prevPage = null,\n    tableId,\n    totalPages = 1,\n  } = props\n\n  const pageDescriptionID = useId()\n  const { t } = useTranslation()\n  const [inputValue, setInputValue] = useState(String(currentPage))\n\n  // Sync input value when currentPage changes externally\n  React.useEffect(() => {\n    setInputValue(String(currentPage))\n  }, [currentPage])\n\n  const updatePage = useCallback(\n    (page: number) => {\n      if (typeof onChange === 'function') {\n        onChange(page)\n      }\n    },\n    [onChange],\n  )\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setInputValue(e.target.value)\n  }\n\n  const handleInputBlur = () => {\n    const parsed = parseInt(inputValue, 10)\n    if (!isNaN(parsed)) {\n      // Clamp to valid range\n      const clamped = Math.max(1, Math.min(parsed, totalPages))\n      if (clamped !== currentPage) {\n        updatePage(clamped)\n      } else {\n        setInputValue(String(currentPage))\n      }\n    } else {\n      // Reset to current page if not a number\n      setInputValue(String(currentPage))\n    }\n  }\n\n  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter') {\n      e.currentTarget.blur()\n    } else if (e.key === 'Escape') {\n      setInputValue(String(currentPage))\n      e.currentTarget.blur()\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault()\n      const parsed = parseInt(inputValue, 10)\n      if (!isNaN(parsed) && parsed < totalPages) {\n        setInputValue(String(parsed + 1))\n      }\n    } else if (e.key === 'ArrowDown') {\n      e.preventDefault()\n      const parsed = parseInt(inputValue, 10)\n      if (!isNaN(parsed) && parsed > 1) {\n        setInputValue(String(parsed - 1))\n      }\n    }\n  }\n\n  const isSinglePage = !totalPages || totalPages <= 1\n\n  return (\n    <div className={baseClass}>\n      <ClickableArrow\n        ariaControls={tableId}\n        direction=\"left\"\n        isDisabled={isSinglePage || !hasPrevPage}\n        updatePage={() => updatePage(prevPage ?? Math.max(1, currentPage - 1))}\n      />\n      <ClickableArrow\n        ariaControls={tableId}\n        direction=\"right\"\n        isDisabled={isSinglePage || !hasNextPage}\n        updatePage={() => updatePage(nextPage ?? currentPage + 1)}\n      />\n      <div className={`${baseClass}__page-input-wrapper`}>\n        <input\n          aria-controls={tableId}\n          aria-describedby={pageDescriptionID}\n          aria-label={t('general:goToPage')}\n          className={`${baseClass}__page-input`}\n          disabled={isSinglePage}\n          inputMode=\"numeric\"\n          max={totalPages}\n          min={1}\n          onBlur={handleInputBlur}\n          onChange={handleInputChange}\n          onKeyDown={handleInputKeyDown}\n          style={{ width: `${Math.max(inputValue.length, 1)}ch` }}\n          type=\"text\"\n          value={inputValue}\n        />\n        <span className=\"sr-only\" id={pageDescriptionID}>\n          {t('general:pageNumberRange', { totalPages: isSinglePage ? 1 : totalPages })}\n        </span>\n        <span className={`${baseClass}__page-total`}>\n          {t('general:of')} {isSinglePage ? 1 : totalPages}\n        </span>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/PerPage/index.css

@@ -0,0 +1,28 @@
+@layer payload-default {
+  .per-page {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+
+    .btn {
+      min-height: var(--control-height);
+      height: unset;
+    }
+  }
+
+  .per-page__label {
+    color: var(--color-text-secondary);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    white-space: nowrap;
+  }
+
+  .btn.btn--style-secondary.per-page--active {
+    background-color: var(--color-bg-transparent-pressed);
+  }
+
+  .per-page__icon {
+    color: var(--color-icon-secondary);
+  }
+}

package/dist/elements/PerPage/index.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type PerPageProps = {
     readonly defaultLimit?: number;
     readonly handleChange?: (limit: number) => void;
     readonly limit: number;
     readonly limits: number[];
     readonly resetPage?: boolean;
+    readonly tableId?: string;
 };
 export declare const PerPage: React.FC<PerPageProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/PerPage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PerPage/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAA;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAsD1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PerPage/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,aAAa,CAAA;AAMpB,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,MAAM,EAAE,MAAM,EAAE,CAAA;IACzB,QAAQ,CAAC,SAAS,CAAC,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAwD1C,CAAA"}