@epilot/zenith-react 0.2.0-next.1 → 0.2.0-next.4

package/dist/components/table/table-pagination.js

@@ -1,17 +1,17 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import * as Z from "react";
-import { Root as U, Trigger as J, Value as Y, Icon as q, Portal as K, Content as Q, Viewport as ee, Group as te, Label as oe, Item as ne, ItemIndicator as re, ItemText as ie } from "../../vendor/.bun/@radix-ui_react-select@2.2.6_2b23df507bdda662/vendor/@radix-ui/react-select/dist/index.js";
-import { mergeClasses as ae, SLOT_ATTR as se, shorthands as i } from "@epilot/zenith-runtime/v1";
-import { makeZenithStyles as ce } from "../../styles/make-styles.js";
-import { boxModel as c, nativeControl as le } from "../../styles/host-reset.js";
-import { OVERLAY_Z_INDEX as ge } from "../../styles/overlay-layer.js";
-import { accentA3 as E, leadingSm as u, textSm as v, grayA11 as x, fontWeightSemibold as de, leadingXs as pe, textXs as he, body as me, accent8 as ue, grayA4 as C, grayA3 as d, spacingElement1 as ve, spacingGroup1 as R, accent11 as P, trackingNormal as fe, accentA8 as we, spacingElement2 as ke, radiusMd as xe, grayA6 as Ce, radiusLg as W, spacingElement3 as Pe } from "../../tokens/index.js";
-import { useAppearanceAttributes as ye } from "../appearance-boundary/appearance-boundary.js";
-import { useDensity as Ie } from "../density-provider/density-provider.js";
-import { calculatePagination as Ne, getPageNumbers as Le, clampPage as Se } from "../../lib/pagination.js";
-import { TooltipProvider as Te, Tooltip as Be, TooltipTrigger as be, TooltipContent as Ae } from "../tooltip/tooltip.js";
-import { Button as g } from "../button/button.js";
-const je = (o) => /* @__PURE__ */ a(
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import * as Y from "react";
+import { Select as i } from "../../_virtual/_zenith-runtime-family_select.js";
+import { mergeClasses as J, SLOT_ATTR as q, shorthands as a } from "@epilot/zenith-runtime/v1";
+import { makeZenithStyles as K } from "../../styles/make-styles.js";
+import { boxModel as c, nativeControl as Q } from "../../styles/host-reset.js";
+import { OVERLAY_Z_INDEX as R } from "../../styles/overlay-layer.js";
+import { accentA3 as $, leadingSm as f, textSm as v, grayA11 as P, fontWeightSemibold as ee, leadingXs as te, textXs as oe, body as ne, accent8 as re, grayA4 as y, grayA3 as h, spacingElement1 as ie, spacingGroup1 as D, accent11 as C, trackingNormal as ae, accentA8 as se, spacingElement2 as le, radiusMd as ce, grayA6 as de, radiusLg as _, spacingElement3 as ge } from "../../tokens/index.js";
+import { useAppearanceAttributes as pe } from "../appearance-boundary/appearance-boundary.js";
+import { useDensity as he } from "../density-provider/density-provider.js";
+import { calculatePagination as me, getPageNumbers as ue, clampPage as fe } from "../../lib/pagination.js";
+import { TooltipProvider as ve, Tooltip as we, TooltipTrigger as ke, TooltipContent as xe } from "../tooltip/tooltip.js";
+import { Button as p } from "../button/button.js";
+const Pe = (r) => /* @__PURE__ */ s(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -23,13 +23,13 @@ const je = (o) => /* @__PURE__ */ a(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...o,
+    ...r,
     children: [
       /* @__PURE__ */ t("path", { d: "M6 6v12" }),
       /* @__PURE__ */ t("path", { d: "m15 18-6-6 6-6" })
     ]
   }
-), ze = (o) => /* @__PURE__ */ t(
+), ye = (r) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -41,10 +41,10 @@ const je = (o) => /* @__PURE__ */ a(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...o,
+    ...r,
     children: /* @__PURE__ */ t("path", { d: "m15 18-6-6 6-6" })
   }
-), Ee = (o) => /* @__PURE__ */ t(
+), Ce = (r) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -56,10 +56,10 @@ const je = (o) => /* @__PURE__ */ a(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...o,
+    ...r,
     children: /* @__PURE__ */ t("path", { d: "m9 18 6-6-6-6" })
   }
-), Re = (o) => /* @__PURE__ */ a(
+), Ie = (r) => /* @__PURE__ */ s(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -71,13 +71,13 @@ const je = (o) => /* @__PURE__ */ a(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...o,
+    ...r,
     children: [
       /* @__PURE__ */ t("path", { d: "m9 18 6-6-6-6" }),
       /* @__PURE__ */ t("path", { d: "M18 6v12" })
     ]
   }
-), We = (o) => /* @__PURE__ */ t(
+), Ne = (r) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -89,10 +89,10 @@ const je = (o) => /* @__PURE__ */ a(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...o,
+    ...r,
     children: /* @__PURE__ */ t("path", { d: "m6 9 6 6 6-6" })
   }
-), $e = (o) => /* @__PURE__ */ t(
+), Le = (r) => /* @__PURE__ */ t(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -104,34 +104,34 @@ const je = (o) => /* @__PURE__ */ a(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...o,
+    ...r,
     children: /* @__PURE__ */ t("path", { d: "M20 6 9 17l-5-5" })
   }
-), Oe = [10, 25, 50, 100], _e = ce({
+), Se = [10, 25, 50, 100], Te = K({
   root: {
     ...c,
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    gap: R,
-    ...i.paddingBlock(Pe),
+    gap: D,
+    ...a.paddingBlock(ge),
     fontSize: v,
-    lineHeight: u
+    lineHeight: f
   },
   left: {
     display: "flex",
     alignItems: "center",
-    gap: ke
+    gap: le
   },
   navButton: {
-    backgroundColor: d,
-    color: P,
+    backgroundColor: h,
+    color: C,
     ":hover": {
-      backgroundColor: C
+      backgroundColor: y
     },
     ":disabled": {
-      backgroundColor: d,
-      color: we,
+      backgroundColor: h,
+      color: se,
       pointerEvents: "none"
     }
   },
@@ -140,58 +140,58 @@ const je = (o) => /* @__PURE__ */ a(
   },
   pageButtonInactive: {
     backgroundColor: "transparent",
-    color: P,
+    color: C,
     ":hover": {
-      backgroundColor: d
+      backgroundColor: h
     },
     ":active": {
-      backgroundColor: C
+      backgroundColor: y
     }
   },
   ellipsisButton: {
-    letterSpacing: fe,
+    letterSpacing: ae,
     backgroundColor: "transparent",
-    color: P,
+    color: C,
     ":hover": {
-      backgroundColor: d
+      backgroundColor: h
     }
   },
   right: {
     ...c,
     display: "flex",
     alignItems: "center",
-    gap: R,
+    gap: D,
     paddingRight: "0.125rem"
   },
   range: {
     fontSize: v,
-    lineHeight: u,
-    color: x,
+    lineHeight: f,
+    color: P,
     fontVariantNumeric: "tabular-nums"
   },
   selectTrigger: {
-    ...le,
+    ...Q,
     display: "flex",
     height: "2rem",
     width: "auto",
     minWidth: "4rem",
     alignItems: "center",
     justifyContent: "space-between",
-    gap: ve,
-    ...i.borderRadius(W),
-    backgroundColor: d,
-    ...i.paddingInline("0.75rem"),
+    gap: ie,
+    ...a.borderRadius(_),
+    backgroundColor: h,
+    ...a.paddingInline("0.75rem"),
     fontSize: v,
-    lineHeight: u,
+    lineHeight: f,
     cursor: "pointer",
-    ...i.borderWidth(0),
+    ...a.borderWidth(0),
     ":hover": {
-      backgroundColor: C
+      backgroundColor: y
     },
     ":focus": {
       outlineWidth: "2px",
       outlineStyle: "solid",
-      outlineColor: ue,
+      outlineColor: re,
       outlineOffset: "2px"
     },
     ":disabled": {
@@ -202,29 +202,49 @@ const je = (o) => /* @__PURE__ */ a(
   selectIcon: {
     display: "flex",
     alignItems: "center",
-    color: x
+    color: P
+  },
+  // The positioner is what stacks against other layers, as Radix's popper wrapper did, keeping
+  // that wrapper's `max-content` floor.
+  selectPositioner: {
+    zIndex: R,
+    minWidth: "max-content"
   },
   selectContent: {
     ...c,
+    // Radix laid its content out as a column around the viewport.
+    display: "flex",
+    flexDirection: "column",
     position: "relative",
-    zIndex: ge,
-    ...i.overflow("hidden"),
-    ...i.borderRadius(W),
-    ...i.border("1px", "solid", Ce),
-    backgroundColor: me,
+    zIndex: R,
+    ...a.overflow("hidden"),
+    ...a.borderRadius(_),
+    ...a.border("1px", "solid", de),
+    backgroundColor: ne,
     boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)"
   },
   selectViewport: {
     ...c,
-    ...i.padding("0.25rem")
+    // Radix's viewport: the scroller, its scrollbar hidden.
+    position: "relative",
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: "0%",
+    overflowX: "hidden",
+    overflowY: "auto",
+    scrollbarWidth: "none",
+    "&::-webkit-scrollbar": {
+      display: "none"
+    },
+    ...a.padding("0.25rem")
   },
   selectLabel: {
     ...c,
-    ...i.padding("0.375rem", "0.5rem"),
-    fontSize: he,
-    lineHeight: pe,
-    fontWeight: de,
-    color: x
+    ...a.padding("0.375rem", "0.5rem"),
+    fontSize: oe,
+    lineHeight: te,
+    fontWeight: ee,
+    color: P
   },
   selectItem: {
     ...c,
@@ -233,16 +253,17 @@ const je = (o) => /* @__PURE__ */ a(
     cursor: "pointer",
     userSelect: "none",
     alignItems: "center",
-    ...i.borderRadius(xe),
-    ...i.padding("0.375rem", "0.5rem", "0.375rem", "2rem"),
+    ...a.borderRadius(ce),
+    ...a.padding("0.375rem", "0.5rem", "0.375rem", "2rem"),
     fontSize: v,
-    lineHeight: u,
+    lineHeight: f,
     outlineStyle: "none",
-    ":focus": {
-      backgroundColor: E
+    // Base UI highlights the active item without moving focus to it, as Radix did.
+    "&[data-highlighted]": {
+      backgroundColor: $
     },
-    "&[data-state='checked']": {
-      backgroundColor: E
+    "&[data-selected]": {
+      backgroundColor: $
     }
   },
   selectItemIndicator: {
@@ -255,191 +276,207 @@ const je = (o) => /* @__PURE__ */ a(
     alignItems: "center",
     justifyContent: "center"
   }
-}), De = {
+}), be = {
   navigation: "Pagination",
   firstPage: "First page",
   previousPage: "Previous page",
   nextPage: "Next page",
   lastPage: "Last page",
-  goToPage: (o) => `Page ${o}`,
-  jumpToPage: (o) => `Jump to page ${o}`,
-  pageSizeSelector: (o) => `Rows per page: ${o}`
-}, Qe = Z.forwardRef(function({
-  page: y,
-  totalItems: p,
-  pageSize: f,
-  onPageChange: l,
-  onPageSizeChange: $,
-  pageSizeOptions: O = Oe,
-  siblingCount: _ = 2,
-  disabled: s = !1,
-  labels: D,
-  className: V,
-  ...F
-}, H) {
-  var B;
-  const e = { ...De, ...D }, n = _e(), I = Ie(), M = ye(), { totalPages: w, start: N, end: L, isFirstPage: S, isLastPage: T } = Ne({
-    page: y,
-    pageSize: f,
-    totalItems: p
-  }), h = Se(y, w), G = Le(h, w, _), X = (r) => {
-    const m = parseInt(r, 10);
-    isNaN(m) || $(m);
+  goToPage: (r) => `Page ${r}`,
+  jumpToPage: (r) => `Jump to page ${r}`,
+  pageSizeSelector: (r) => `Rows per page: ${r}`
+}, Ve = Y.forwardRef(function({
+  page: I,
+  totalItems: m,
+  pageSize: w,
+  onPageChange: d,
+  onPageSizeChange: O,
+  pageSizeOptions: N = Se,
+  siblingCount: G = 2,
+  disabled: l = !1,
+  labels: V,
+  className: F,
+  ...H
+}, M) {
+  var A;
+  const e = { ...be, ...V }, n = Te(), L = he(), X = pe(), { totalPages: k, start: S, end: T, isFirstPage: b, isLastPage: B } = me({
+    page: I,
+    pageSize: w,
+    totalItems: m
+  }), u = fe(I, k), Z = ue(u, k, G), U = (o) => {
+    const g = parseInt(o, 10);
+    isNaN(g) || O(g);
   };
-  return p === 0 ? null : /* @__PURE__ */ t(Te, { children: /* @__PURE__ */ a(
+  return m === 0 ? null : /* @__PURE__ */ t(ve, { children: /* @__PURE__ */ s(
     "div",
     {
-      ref: H,
+      ref: M,
       "data-slot": "table-pagination",
-      [se]: "table-pagination",
+      [q]: "table-pagination",
       "data-fs-element": "TablePagination",
       role: "navigation",
       "aria-label": e == null ? void 0 : e.navigation,
-      className: ae(n.root, V),
-      ...F,
+      className: J(n.root, F),
+      ...H,
       children: [
-        /* @__PURE__ */ a("div", { className: n.left, children: [
+        /* @__PURE__ */ s("div", { className: n.left, children: [
           /* @__PURE__ */ t(
-            g,
+            p,
             {
               variant: "secondary",
               size: "icon-sm",
               shape: "normal",
-              disabled: s || S,
-              onClick: () => l(1),
+              disabled: l || b,
+              onClick: () => d(1),
               "aria-label": e == null ? void 0 : e.firstPage,
               className: n.navButton,
-              children: /* @__PURE__ */ t(je, {})
+              children: /* @__PURE__ */ t(Pe, {})
             }
           ),
           /* @__PURE__ */ t(
-            g,
+            p,
             {
               variant: "secondary",
               size: "icon-sm",
               shape: "normal",
-              disabled: s || S,
-              onClick: () => l(h - 1),
+              disabled: l || b,
+              onClick: () => d(u - 1),
               "aria-label": e == null ? void 0 : e.previousPage,
               className: n.navButton,
-              children: /* @__PURE__ */ t(ze, {})
+              children: /* @__PURE__ */ t(ye, {})
             }
           ),
-          G.map((r, m) => {
-            var A, j, z;
-            const b = r.type === "ellipsis" ? `ellipsis-${m}-${r.targetPage}` : `page-${r.page}`;
-            if (r.type === "ellipsis")
-              return /* @__PURE__ */ a(Be, { children: [
-                /* @__PURE__ */ t(be, { asChild: !0, children: /* @__PURE__ */ t(
-                  g,
+          Z.map((o, g) => {
+            var z, W, E;
+            const j = o.type === "ellipsis" ? `ellipsis-${g}-${o.targetPage}` : `page-${o.page}`;
+            if (o.type === "ellipsis")
+              return /* @__PURE__ */ s(we, { children: [
+                /* @__PURE__ */ t(ke, { asChild: !0, children: /* @__PURE__ */ t(
+                  p,
                   {
                     variant: "tertiary",
                     size: "icon-sm",
                     shape: "normal",
-                    disabled: s,
-                    onClick: () => l(r.targetPage),
-                    "aria-label": (A = e == null ? void 0 : e.jumpToPage) == null ? void 0 : A.call(e, r.targetPage),
+                    disabled: l,
+                    onClick: () => d(o.targetPage),
+                    "aria-label": (z = e == null ? void 0 : e.jumpToPage) == null ? void 0 : z.call(e, o.targetPage),
                     className: n.ellipsisButton,
                     children: "..."
                   }
                 ) }),
-                /* @__PURE__ */ t(Ae, { children: (j = e == null ? void 0 : e.jumpToPage) == null ? void 0 : j.call(e, r.targetPage) })
-              ] }, b);
-            const k = r.page === h;
+                /* @__PURE__ */ t(xe, { children: (W = e == null ? void 0 : e.jumpToPage) == null ? void 0 : W.call(e, o.targetPage) })
+              ] }, j);
+            const x = o.page === u;
             return /* @__PURE__ */ t(
-              g,
+              p,
               {
-                variant: k ? "secondary" : "tertiary",
+                variant: x ? "secondary" : "tertiary",
                 size: "icon-sm",
                 shape: "normal",
-                disabled: s,
-                onClick: () => l(r.page),
-                "aria-label": (z = e == null ? void 0 : e.goToPage) == null ? void 0 : z.call(e, r.page),
-                "aria-current": k ? "page" : void 0,
-                className: k ? n.pageButtonActive : n.pageButtonInactive,
-                children: r.page
+                disabled: l,
+                onClick: () => d(o.page),
+                "aria-label": (E = e == null ? void 0 : e.goToPage) == null ? void 0 : E.call(e, o.page),
+                "aria-current": x ? "page" : void 0,
+                className: x ? n.pageButtonActive : n.pageButtonInactive,
+                children: o.page
               },
-              b
+              j
             );
           }),
           /* @__PURE__ */ t(
-            g,
+            p,
             {
               variant: "secondary",
               size: "icon-sm",
               shape: "normal",
-              disabled: s || T,
-              onClick: () => l(h + 1),
+              disabled: l || B,
+              onClick: () => d(u + 1),
               "aria-label": e == null ? void 0 : e.nextPage,
               className: n.navButton,
-              children: /* @__PURE__ */ t(Ee, {})
+              children: /* @__PURE__ */ t(Ce, {})
             }
           ),
           /* @__PURE__ */ t(
-            g,
+            p,
             {
               variant: "secondary",
               size: "icon-sm",
               shape: "normal",
-              disabled: s || T,
-              onClick: () => l(w),
+              disabled: l || B,
+              onClick: () => d(k),
               "aria-label": e == null ? void 0 : e.lastPage,
               className: n.navButton,
-              children: /* @__PURE__ */ t(Re, {})
+              children: /* @__PURE__ */ t(Ie, {})
             }
           )
         ] }),
-        /* @__PURE__ */ a("div", { className: n.right, children: [
+        /* @__PURE__ */ s("div", { className: n.right, children: [
           /* @__PURE__ */ t(
             "span",
             {
               "data-slot": "table-pagination-range",
               className: n.range,
               "aria-live": "polite",
-              children: e != null && e.rangeDisplay ? e.rangeDisplay(N, L, p) : `${N}-${L} / ${p}`
+              children: e != null && e.rangeDisplay ? e.rangeDisplay(S, T, m) : `${S}-${T} / ${m}`
             }
           ),
-          /* @__PURE__ */ a(
-            U,
+          /* @__PURE__ */ s(
+            i.Root,
             {
-              value: String(f),
-              onValueChange: X,
-              disabled: s,
+              value: String(w),
+              onValueChange: (o) => {
+                o !== null && U(o);
+              },
+              disabled: l,
               children: [
-                /* @__PURE__ */ a(
-                  J,
+                /* @__PURE__ */ s(
+                  i.Trigger,
                   {
                     className: n.selectTrigger,
-                    "aria-label": (B = e == null ? void 0 : e.pageSizeSelector) == null ? void 0 : B.call(e, f),
+                    "aria-label": (A = e == null ? void 0 : e.pageSizeSelector) == null ? void 0 : A.call(e, w),
                     children: [
-                      /* @__PURE__ */ t(Y, {}),
-                      /* @__PURE__ */ t(q, { className: n.selectIcon, children: /* @__PURE__ */ t(We, {}) })
+                      /* @__PURE__ */ t(i.Value, { children: (o) => N.some((g) => String(g) === o) ? o : null }),
+                      /* @__PURE__ */ t(i.Icon, { className: n.selectIcon, children: /* @__PURE__ */ t(Ne, {}) })
                     ]
                   }
                 ),
-                /* @__PURE__ */ t(K, { children: /* @__PURE__ */ t(
-                  Q,
+                /* @__PURE__ */ t(i.Portal, { children: /* @__PURE__ */ t(
+                  i.Positioner,
                   {
-                    className: n.selectContent,
-                    ...I !== void 0 ? { "data-density": I } : {},
-                    ...M,
-                    position: "popper",
+                    className: n.selectPositioner,
+                    alignItemWithTrigger: !1,
+                    align: "start",
                     sideOffset: 4,
-                    children: /* @__PURE__ */ t(ee, { className: n.selectViewport, children: /* @__PURE__ */ a(te, { children: [
-                      (e == null ? void 0 : e.resultsPerPage) && /* @__PURE__ */ t(oe, { className: n.selectLabel, children: e.resultsPerPage }),
-                      O.map((r) => /* @__PURE__ */ a(
-                        ne,
-                        {
-                          value: String(r),
-                          className: n.selectItem,
-                          children: [
-                            /* @__PURE__ */ t("span", { className: n.selectItemIndicator, children: /* @__PURE__ */ t(re, { children: /* @__PURE__ */ t($e, { style: { width: 16, height: 16 } }) }) }),
-                            /* @__PURE__ */ t(ie, { children: r })
-                          ]
-                        },
-                        r
-                      ))
-                    ] }) })
+                    collisionPadding: 10,
+                    children: /* @__PURE__ */ t(
+                      i.Popup,
+                      {
+                        className: n.selectContent,
+                        ...L !== void 0 ? { "data-density": L } : {},
+                        ...X,
+                        children: /* @__PURE__ */ t(i.List, { className: n.selectViewport, children: /* @__PURE__ */ s(i.Group, { children: [
+                          (e == null ? void 0 : e.resultsPerPage) && /* @__PURE__ */ t(
+                            i.GroupLabel,
+                            {
+                              className: n.selectLabel,
+                              children: e.resultsPerPage
+                            }
+                          ),
+                          N.map((o) => /* @__PURE__ */ s(
+                            i.Item,
+                            {
+                              value: String(o),
+                              className: n.selectItem,
+                              children: [
+                                /* @__PURE__ */ t("span", { className: n.selectItemIndicator, children: /* @__PURE__ */ t(i.ItemIndicator, { children: /* @__PURE__ */ t(Le, { style: { width: 16, height: 16 } }) }) }),
+                                /* @__PURE__ */ t(i.ItemText, { render: /* @__PURE__ */ t("span", {}), children: o })
+                              ]
+                            },
+                            o
+                          ))
+                        ] }) })
+                      }
+                    )
                   }
                 ) })
               ]
@@ -451,6 +488,6 @@ const je = (o) => /* @__PURE__ */ a(
   ) });
 });
 export {
-  Qe as TablePagination
+  Ve as TablePagination
 };
 //# sourceMappingURL=table-pagination.js.map