@ai-matrx/design-system 0.18.21 → 0.19.0

package/dist/data-table/pagination.js

@@ -151,7 +151,7 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 // src/data-table/icons.tsx
 import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 function Icon({ children, ...props }) {
-  return /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": "true", ...props, children });
+  return /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...props, children });
 }
 var ChevronLeft = (p) => /* @__PURE__ */ jsx4(Icon, { ...p, children: /* @__PURE__ */ jsx4("path", { d: "m15 18-6-6 6-6" }) });
 var ChevronRight = (p) => /* @__PURE__ */ jsx4(Icon, { ...p, children: /* @__PURE__ */ jsx4("path", { d: "m9 18 6-6-6-6" }) });
@@ -351,8 +351,18 @@ var SelectSeparator = React4.forwardRef(({ className, ...props }, ref) => /* @__
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
+// src/data-table/host.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var HOST_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.table-host-context");
+var hostRegistry = globalThis;
+var HostContext = hostRegistry[HOST_SLOT] ??= createContext2({});
+function useMatrxDataTableHost() {
+  return useContext2(HostContext);
+}
+
 // src/data-table/pagination.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function PageNavigationControl({
   label,
   disabledHint,
@@ -361,17 +371,17 @@ function PageNavigationControl({
   className,
   ...props
 }) {
-  const button = /* @__PURE__ */ jsx7(
+  const button = /* @__PURE__ */ jsx8(
     Button,
     {
       ...props,
       disabled,
       "aria-label": label,
-      className: cn(visibilityClassName, className)
+      className: cn(visibilityClassName, className, "[&_svg]:size-3.5")
     }
   );
   return /* @__PURE__ */ jsxs4(Tooltip, { children: [
-    /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(TooltipTrigger, { asChild: true, children: disabled ? /* @__PURE__ */ jsx8(
       "span",
       {
         className: cn(visibilityClassName, "rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring"),
@@ -380,9 +390,49 @@ function PageNavigationControl({
         children: button
       }
     ) : button }),
-    /* @__PURE__ */ jsx7(TooltipContent, { children: disabled ? disabledHint : label })
+    /* @__PURE__ */ jsx8(TooltipContent, { children: disabled ? disabledHint : label })
   ] });
 }
+function PaginationAction({
+  HostAction,
+  active = false,
+  disabledHint,
+  visibilityClassName = "inline-flex",
+  fallbackClassName,
+  ...props
+}) {
+  if (HostAction) {
+    return /* @__PURE__ */ jsx8("span", { className: visibilityClassName, children: /* @__PURE__ */ jsx8(
+      HostAction,
+      {
+        ...props,
+        active,
+        tooltip: props.disabled ? disabledHint : props.tooltip ?? props.ariaLabel
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx8(
+    PageNavigationControl,
+    {
+      variant: "outline",
+      size: "icon",
+      visibilityClassName,
+      label: props.ariaLabel,
+      disabledHint,
+      disabled: props.disabled,
+      onClick: props.onClick,
+      className: cn(
+        PAGINATION_ACTION_CLASS,
+        active && PAGINATION_ACTIVE_CLASS,
+        fallbackClassName
+      ),
+      "aria-current": active ? "page" : void 0,
+      children: props.children
+    }
+  );
+}
+var PAGINATION_ACTION_CLASS = "relative isolate h-11 w-11 min-h-11 min-w-11 border-0 bg-transparent p-0 text-xs shadow-none before:absolute before:inset-1.5 before:z-0 before:rounded-md before:border before:border-border before:bg-card before:content-[''] hover:bg-transparent hover:before:bg-accent disabled:bg-transparent disabled:before:opacity-40 [&>*]:relative [&>*]:z-10";
+var PAGINATION_ACTIVE_CLASS = "text-primary-foreground before:border-primary before:bg-primary hover:before:bg-primary/90";
 function GenericTablePagination({
   totalItems,
   itemsPerPage,
@@ -408,8 +458,10 @@ function GenericTablePagination({
   layoutType = "grid",
   labelFormat,
   compact = false,
-  hideEntriesInfo = false
+  hideEntriesInfo = false,
+  progressive
 }) {
+  const host = useMatrxDataTableHost();
   const positivePageSizes = pageSizeOptions.filter((size) => size > 0);
   const availablePageSizes = itemsPerPage > 0 && !positivePageSizes.includes(itemsPerPage) ? [...positivePageSizes, itemsPerPage].sort((a, b) => a - b) : positivePageSizes;
   const effectiveItemsPerPage = itemsPerPage === 0 ? Math.max(totalItems, 1) : Math.max(itemsPerPage, 1);
@@ -425,24 +477,22 @@ function GenericTablePagination({
   };
   const isFirstPageDisabled = currentPage <= 1;
   const isLastPageDisabled = currentPage >= totalPages;
-  const startItem = totalItems === 0 ? 0 : (currentPage - 1) * effectiveItemsPerPage + 1;
-  const endItem = Math.min(currentPage * effectiveItemsPerPage, totalItems);
+  const startItem = totalItems === 0 ? 0 : progressive ? 1 : (currentPage - 1) * effectiveItemsPerPage + 1;
+  const endItem = Math.min(progressive?.shownCount ?? currentPage * effectiveItemsPerPage, totalItems);
   const defaultLabelFormat = (start, end, total) => {
     return compact ? `${start}-${end} of ${total}` : `Showing ${start} to ${end} of ${total} entries`;
   };
   const formatLabel = labelFormat || defaultLabelFormat;
-  const buttonSize = compact ? "sm" : "icon";
-  const compactButtonClass = "relative isolate h-11 w-11 min-w-11 border-0 bg-transparent p-0 text-xs shadow-none before:absolute before:inset-1.5 before:z-0 before:rounded-md before:border before:border-border before:bg-card before:content-[''] hover:bg-transparent hover:before:bg-accent disabled:bg-transparent disabled:before:opacity-40 [&_svg]:relative [&_svg]:z-10 lg:h-7 lg:min-h-7 lg:w-7 lg:min-w-7 lg:border lg:border-input lg:bg-background lg:before:hidden lg:hover:bg-accent";
-  const compactActiveButtonClass = "text-primary-foreground before:border-primary before:bg-primary hover:before:bg-primary/90 lg:border-primary lg:bg-primary lg:hover:bg-primary/90";
   const containerClass = cn(
-    "w-full items-center border-t border-border",
+    "w-full items-center",
+    !compact && "border-t border-border",
     layoutType === "grid" ? "grid grid-cols-[auto_minmax(0,1fr)_auto]" : "flex flex-nowrap justify-between",
-    compact ? "h-11 gap-0 px-0 py-0 lg:h-8" : "gap-1 px-2 py-1 sm:gap-4 sm:px-3",
+    compact ? "box-border h-11 gap-0 px-0 py-0" : "gap-1 px-2 py-1 sm:gap-4 sm:px-3",
     className,
     containerClassName
   );
-  return /* @__PURE__ */ jsx7(TooltipProvider, { children: /* @__PURE__ */ jsxs4("div", { "data-matrx-table-footer": true, className: containerClass, children: [
-    showItemsPerPageSelect && /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(TooltipProvider, { children: /* @__PURE__ */ jsxs4("div", { "data-matrx-table-footer": true, className: containerClass, children: [
+    showItemsPerPageSelect && /* @__PURE__ */ jsx8(
       "div",
       {
         className: cn(
@@ -456,27 +506,27 @@ function GenericTablePagination({
             value: itemsPerPage.toString(),
             onValueChange: (value) => onItemsPerPageChange(parseInt(value)),
             children: [
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(
                 SelectTrigger,
                 {
                   "aria-label": "Rows per page",
                   className: cn(
                     "focus:ring-0",
-                    compact ? "relative isolate h-11 w-14 border-0 bg-transparent px-2 text-xs before:absolute before:inset-x-1 before:inset-y-1.5 before:z-0 before:rounded-md before:border before:border-border before:bg-card before:content-[''] hover:before:bg-accent [&>*]:relative [&>*]:z-10 lg:h-7 lg:min-h-7 lg:w-16 lg:border lg:border-input lg:bg-background lg:px-2 lg:before:hidden" : "h-8 w-[3.75rem] text-xs sm:w-36 sm:text-sm"
+                    compact ? "relative isolate h-11 w-16 border-0 bg-transparent px-1 text-xs before:absolute before:inset-1.5 before:z-0 before:rounded-md before:border before:border-border before:bg-card before:content-[''] hover:before:bg-accent [&>*]:relative [&>*]:z-10 [&_svg]:h-3.5 [&_svg]:w-3.5" : "h-8 w-[3.75rem] text-xs sm:w-36 sm:text-sm"
                   ),
-                  children: /* @__PURE__ */ jsx7(SelectValue, { placeholder: itemsPerPage.toString() })
+                  children: /* @__PURE__ */ jsx8(SelectValue, { placeholder: itemsPerPage.toString() })
                 }
               ),
               /* @__PURE__ */ jsxs4(SelectContent, { children: [
-                availablePageSizes.map((size) => /* @__PURE__ */ jsx7(SelectItem, { value: size.toString(), children: size }, size)),
-                showAllOption ? /* @__PURE__ */ jsx7(SelectItem, { value: allValue.toString(), children: allOptionLabel }) : null
+                availablePageSizes.map((size) => /* @__PURE__ */ jsx8(SelectItem, { value: size.toString(), children: size }, size)),
+                showAllOption ? /* @__PURE__ */ jsx8(SelectItem, { value: allValue.toString(), children: allOptionLabel }) : null
               ] })
             ]
           }
         )
       }
     ),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       "div",
       {
         className: cn("flex min-w-0 justify-center", infoContainerClassName),
@@ -488,7 +538,7 @@ function GenericTablePagination({
             " / ",
             totalItems
           ] }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(
             "span",
             {
               className: `hidden whitespace-nowrap ${compact ? "text-xs" : "text-sm"} text-muted-foreground sm:inline`,
@@ -498,7 +548,17 @@ function GenericTablePagination({
         ] })
       }
     ),
-    showPageControls && /* @__PURE__ */ jsxs4(
+    progressive ? /* @__PURE__ */ jsx8(
+      PaginationAction,
+      {
+        HostAction: host.ToolbarAction,
+        ariaLabel: progressive.hasMore ? "Show more rows" : "All rows shown",
+        disabledHint: "All rows shown",
+        disabled: !progressive.hasMore,
+        onClick: progressive.onShowMore,
+        children: /* @__PURE__ */ jsx8(ChevronRight, { className: "h-3.5 w-3.5 rotate-90" })
+      }
+    ) : showPageControls && /* @__PURE__ */ jsxs4(
       "div",
       {
         className: cn(
@@ -507,107 +567,85 @@ function GenericTablePagination({
           controlsContainerClassName
         ),
         children: [
-          /* @__PURE__ */ jsx7(
-            PageNavigationControl,
+          /* @__PURE__ */ jsx8(
+            PaginationAction,
             {
-              variant: "outline",
-              size: buttonSize,
-              visibilityClassName: "hidden sm:inline-flex",
-              label: "First page",
+              HostAction: host.ToolbarAction,
+              ariaLabel: "First page",
               disabledHint: "Already on the first page",
+              visibilityClassName: "hidden sm:inline-flex",
+              fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(1),
               disabled: isFirstPageDisabled,
-              className: cn(
-                compact ? compactButtonClass : "h-8 w-8 p-0",
-                navButtonClassName
-              ),
-              children: /* @__PURE__ */ jsx7(ChevronsLeft, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+              children: /* @__PURE__ */ jsx8(ChevronsLeft, { className: "h-3.5 w-3.5" })
             }
           ),
-          /* @__PURE__ */ jsx7(
-            PageNavigationControl,
+          /* @__PURE__ */ jsx8(
+            PaginationAction,
             {
-              variant: "outline",
-              size: buttonSize,
-              label: "Previous page",
+              HostAction: host.ToolbarAction,
+              ariaLabel: "Previous page",
               disabledHint: "Already on the first page",
+              fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(currentPage - 1),
               disabled: isFirstPageDisabled,
-              className: cn(
-                compact ? compactButtonClass : "h-8 w-8 p-0",
-                navButtonClassName
-              ),
-              children: /* @__PURE__ */ jsx7(ChevronLeft, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+              children: /* @__PURE__ */ jsx8(ChevronLeft, { className: "h-3.5 w-3.5" })
             }
           ),
-          getPageNumbers(3).map((page) => /* @__PURE__ */ jsx7(
-            Button,
+          getPageNumbers(3).map((page) => /* @__PURE__ */ jsx8(
+            PaginationAction,
             {
-              variant: currentPage === page ? "default" : "outline",
-              size: buttonSize,
-              "aria-label": `Page ${page}`,
-              "aria-current": currentPage === page ? "page" : void 0,
-              onClick: () => onPageChange(page),
-              className: cn(
+              HostAction: host.ToolbarAction,
+              ariaLabel: `Page ${page}`,
+              active: currentPage === page,
+              disabledHint: `Already on page ${page}`,
+              visibilityClassName: cn(
                 "sm:hidden",
-                page === currentPage ? "inline-flex" : "hidden min-[360px]:inline-flex",
-                compact ? compactButtonClass : "h-8 w-8 p-0",
-                compact && page === currentPage && compactActiveButtonClass,
-                page === currentPage ? pageActiveButtonClassName : pageButtonClassName
+                page === currentPage ? "inline-flex" : "hidden min-[360px]:inline-flex"
               ),
-              children: /* @__PURE__ */ jsx7("span", { className: "relative z-10", children: page })
+              fallbackClassName: page === currentPage ? pageActiveButtonClassName : pageButtonClassName,
+              onClick: () => onPageChange(page),
+              children: /* @__PURE__ */ jsx8("span", { children: page })
             },
             `mobile-${page}`
           )),
-          getPageNumbers().map((page) => /* @__PURE__ */ jsx7(
-            Button,
+          getPageNumbers().map((page) => /* @__PURE__ */ jsx8(
+            PaginationAction,
             {
-              variant: currentPage === page ? "default" : "outline",
-              size: buttonSize,
-              "aria-label": `Page ${page}`,
-              "aria-current": currentPage === page ? "page" : void 0,
+              HostAction: host.ToolbarAction,
+              ariaLabel: `Page ${page}`,
+              active: currentPage === page,
+              disabledHint: `Already on page ${page}`,
+              visibilityClassName: "hidden sm:inline-flex",
+              fallbackClassName: currentPage === page ? pageActiveButtonClassName : pageButtonClassName,
               onClick: () => onPageChange(page),
-              className: cn(
-                "hidden sm:inline-flex",
-                compact ? compactButtonClass : "h-8 w-8 p-0",
-                compact && page === currentPage && compactActiveButtonClass,
-                currentPage === page ? pageActiveButtonClassName : pageButtonClassName
-              ),
-              children: /* @__PURE__ */ jsx7("span", { className: "relative z-10", children: page })
+              children: /* @__PURE__ */ jsx8("span", { children: page })
             },
             `desktop-${page}`
           )),
-          /* @__PURE__ */ jsx7(
-            PageNavigationControl,
+          /* @__PURE__ */ jsx8(
+            PaginationAction,
             {
-              variant: "outline",
-              size: buttonSize,
-              label: "Next page",
+              HostAction: host.ToolbarAction,
+              ariaLabel: "Next page",
               disabledHint: "Already on the last page",
+              fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(currentPage + 1),
               disabled: isLastPageDisabled,
-              className: cn(
-                compact ? compactButtonClass : "h-8 w-8 p-0",
-                navButtonClassName
-              ),
-              children: /* @__PURE__ */ jsx7(ChevronRight, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+              children: /* @__PURE__ */ jsx8(ChevronRight, { className: "h-3.5 w-3.5" })
             }
           ),
-          /* @__PURE__ */ jsx7(
-            PageNavigationControl,
+          /* @__PURE__ */ jsx8(
+            PaginationAction,
             {
-              variant: "outline",
-              size: buttonSize,
-              visibilityClassName: "hidden sm:inline-flex",
-              label: "Last page",
+              HostAction: host.ToolbarAction,
+              ariaLabel: "Last page",
               disabledHint: "Already on the last page",
+              visibilityClassName: "hidden sm:inline-flex",
+              fallbackClassName: navButtonClassName,
               onClick: () => onPageChange(totalPages),
               disabled: isLastPageDisabled,
-              className: cn(
-                compact ? compactButtonClass : "h-8 w-8 p-0",
-                navButtonClassName
-              ),
-              children: /* @__PURE__ */ jsx7(ChevronsRight, { className: compact ? "h-3.5 w-3.5" : "h-4 w-4" })
+              children: /* @__PURE__ */ jsx8(ChevronsRight, { className: "h-3.5 w-3.5" })
             }
           )
         ]