@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.5f0cd13

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

@@ -0,0 +1,23 @@
+@layer payload-default {
+  .simple-pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-3);
+  }
+
+  .simple-pagination__info {
+    color: var(--color-text-secondary);
+    font-family: var(--text-body-medium-font-family);
+    font-size: var(--text-body-medium-font-size);
+    font-weight: var(--text-body-medium-font-weight);
+    line-height: var(--text-body-medium-line-height);
+    letter-spacing: var(--text-body-medium-letter-spacing);
+    white-space: nowrap;
+  }
+
+  .simple-pagination__arrows {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-1);
+  }
+}

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

@@ -0,0 +1,13 @@
+import type { PaginatedDocs } from 'payload';
+import React from 'react';
+import './index.css';
+export type SimplePaginationProps = {
+    data: PaginatedDocs;
+    onChange?: (page: number) => void;
+};
+/**
+ * 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 declare const SimplePagination: React.FC<SimplePaginationProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Pagination/SimplePagination/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,qBAAqB,GAAG;IAClC,IAAI,EAAE,aAAa,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAClC,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAgD5D,CAAA"}

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

@@ -0,0 +1,110 @@
+'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 { 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(20);
+  const {
+    data,
+    onChange
+  } = t0;
+  const {
+    i18n
+  } = useTranslation();
+  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] !== startItem || $[17] !== totalDocs || $[18] !== 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, {
+          direction: "left",
+          isDisabled: !hasPrevPage,
+          updatePage: handlePrevPage
+        }), _jsx(ClickableArrow, {
+          direction: "right",
+          isDisabled: !hasNextPage,
+          updatePage: handleNextPage
+        })]
+      })]
+    });
+    $[10] = endItem;
+    $[11] = handleNextPage;
+    $[12] = handlePrevPage;
+    $[13] = hasNextPage;
+    $[14] = hasPrevPage;
+    $[15] = i18n;
+    $[16] = startItem;
+    $[17] = totalDocs;
+    $[18] = totalPages;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  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","ClickableArrow","baseClass","SimplePagination","t0","$","data","onChange","i18n","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","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 { 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}\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 }) => {\n  const { i18n } = useTranslation()\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 direction=\"left\" isDisabled={!hasPrevPage} updatePage={handlePrevPage} />\n          <ClickableArrow direction=\"right\" isDisabled={!hasNextPage} updatePage={handleNextPage} />\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Pagination/index.css

@@ -0,0 +1,50 @@
+@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-family: var(--text-body-medium-font-family);
+    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;
+    }
+  }
+
+  .paginator__page-total {
+    color: var(--color-text);
+    font-family: var(--text-body-medium-font-family);
+    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;
@@ -11,16 +11,5 @@ export type PaginationProps = {
     prevPage?: number;
     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,KAAgC,MAAM,OAAO,CAAA;AAGpD,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,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAsGhD,CAAA"}

package/dist/elements/Pagination/index.js

@@ -1,115 +1,199 @@
 '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, useState } from 'react';
 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(34);
   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,
+    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 [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));
       }
-    });
-  }
-  // Add next separator if necessary
-  if (currentPage + numberOfNeighbors + 1 < totalPages) {
-    nodes.push({
-      type: 'Separator'
-    });
+    };
+    $[6] = currentPage;
+    $[7] = inputValue;
+    $[8] = totalPages;
+    $[9] = updatePage;
+    $[10] = t10;
+  } else {
+    t10 = $[10];
   }
-  // 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)
-    }
-  });
-  nodes.unshift({
-    type: 'ClickableArrow',
-    props: {
-      direction: 'left',
-      isDisabled: !hasPrevPage,
-      updatePage: () => updatePage(prevPage ?? Math.max(1, currentPage - 1))
+  const handleInputKeyDown = t11;
+  if (!totalPages || totalPages <= 1) {
+    return null;
+  }
+  const t12 = !hasPrevPage;
+  let t13;
+  if ($[15] !== currentPage || $[16] !== prevPage || $[17] !== updatePage) {
+    t13 = () => updatePage(prevPage ?? Math.max(1, currentPage - 1));
+    $[15] = currentPage;
+    $[16] = prevPage;
+    $[17] = updatePage;
+    $[18] = t13;
+  } else {
+    t13 = $[18];
+  }
+  let t14;
+  if ($[19] !== currentPage || $[20] !== handleInputBlur || $[21] !== handleInputKeyDown || $[22] !== hasNextPage || $[23] !== inputValue || $[24] !== nextPage || $[25] !== t12 || $[26] !== t13 || $[27] !== totalPages || $[28] !== updatePage) {
+    let t15;
+    if ($[30] !== currentPage || $[31] !== nextPage || $[32] !== updatePage) {
+      t15 = () => updatePage(nextPage ?? currentPage + 1);
+      $[30] = currentPage;
+      $[31] = nextPage;
+      $[32] = updatePage;
+      $[33] = t15;
+    } else {
+      t15 = $[33];
     }
-  });
-  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);
-    })
-  });
+    t14 = _jsxs("div", {
+      className: baseClass,
+      children: [_jsx(ClickableArrow, {
+        direction: "left",
+        isDisabled: t12,
+        updatePage: t13
+      }), _jsx(ClickableArrow, {
+        direction: "right",
+        isDisabled: !hasNextPage,
+        updatePage: t15
+      }), _jsxs("div", {
+        className: `${baseClass}__page-input-wrapper`,
+        children: [_jsx("input", {
+          "aria-label": "Go to page",
+          className: `${baseClass}__page-input`,
+          inputMode: "numeric",
+          max: totalPages,
+          min: 1,
+          onBlur: handleInputBlur,
+          onChange: handleInputChange,
+          onKeyDown: handleInputKeyDown,
+          style: {
+            width: `${Math.max(inputValue.length, 1)}ch`
+          },
+          type: "text",
+          value: inputValue
+        }), _jsxs("span", {
+          className: `${baseClass}__page-total`,
+          children: ["of ", totalPages]
+        })]
+      })]
+    });
+    $[19] = currentPage;
+    $[20] = handleInputBlur;
+    $[21] = handleInputKeyDown;
+    $[22] = hasNextPage;
+    $[23] = inputValue;
+    $[24] = nextPage;
+    $[25] = t12;
+    $[26] = t13;
+    $[27] = totalPages;
+    $[28] = updatePage;
+    $[29] = t14;
+  } else {
+    t14 = $[29];
+  }
+  return t14;
 };
 //# 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","useState","ClickableArrow","baseClass","Pagination","props","$","hasNextPage","t0","hasPrevPage","t1","nextPage","t2","onChange","page","t3","prevPage","t4","totalPages","t5","undefined","currentPage","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","t12","t13","t14","t15","_jsxs","className","children","_jsx","direction","isDisabled","inputMode","onBlur","onKeyDown","style","width","length","type"],"sources":["../../../src/elements/Pagination/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useState } from 'react'\n\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  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    totalPages = 1,\n  } = props\n\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  if (!totalPages || totalPages <= 1) {\n    return null\n  }\n\n  return (\n    <div className={baseClass}>\n      <ClickableArrow\n        direction=\"left\"\n        isDisabled={!hasPrevPage}\n        updatePage={() => updatePage(prevPage ?? Math.max(1, currentPage - 1))}\n      />\n      <ClickableArrow\n        direction=\"right\"\n        isDisabled={!hasNextPage}\n        updatePage={() => updatePage(nextPage ?? currentPage + 1)}\n      />\n      <div className={`${baseClass}__page-input-wrapper`}>\n        <input\n          aria-label=\"Go to page\"\n          className={`${baseClass}__page-input`}\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={`${baseClass}__page-total`}>of {totalPages}</span>\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/PerPage/index.css

@@ -0,0 +1,29 @@
+@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-family: var(--text-body-medium-font-family);
+    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,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type PerPageProps = {
     readonly defaultLimit?: number;
     readonly handleChange?: (limit: number) => void;

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;CAC7B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAkD1C,CAAA"}