@d4gger/design-system 2.7.0 → 3.0.1

package/dist/components/dataTable/DataTablePagination.d.mts

@@ -9,8 +9,12 @@ type DataTablePaginationProps = {
     onPageSizeChange?: (pageSize: number) => void;
     className?: string;
     siblingCount?: number;
+    align?: 'start' | 'center' | 'end';
+    showFirstLast?: boolean;
+    showPageInput?: boolean;
+    dense?: boolean;
 };
-declare function DataTablePagination({ page: controlledPage, defaultPage, pageSize: controlledPageSize, defaultPageSize, pageSizeOptions, total, onPageChange, onPageSizeChange, className, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
+declare function DataTablePagination({ page: controlledPage, defaultPage, pageSize: controlledPageSize, defaultPageSize, pageSizeOptions, total, onPageChange, onPageSizeChange, className, align, showFirstLast, showPageInput, dense, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTablePagination {
     var displayName: string;
 }

package/dist/components/dataTable/DataTablePagination.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePagination.d.mts","sourceRoot":"","sources":["../../../src/components/dataTable/DataTablePagination.tsx"],"names":[],"mappings":"AAwCA,KAAK,wBAAwB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,iBAAS,mBAAmB,CAAC,EAC3B,IAAI,EAAE,cAAc,EACpB,WAAe,EACf,QAAQ,EAAE,kBAAkB,EAC5B,eAAoB,EACpB,eAAiC,EACjC,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,SAAS,GACV,EAAE,wBAAwB,2CA0G1B;kBApHQ,mBAAmB;;;AAuH5B,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,YAAY,EAAE,wBAAwB,EAAE,CAAA"}
+{"version":3,"file":"DataTablePagination.d.mts","sourceRoot":"","sources":["../../../src/components/dataTable/DataTablePagination.tsx"],"names":[],"mappings":"AA6BA,KAAK,wBAAwB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAQD,iBAAS,mBAAmB,CAAC,EAC3B,IAAI,EAAE,cAAc,EACpB,WAAe,EACf,QAAQ,EAAE,kBAAkB,EAC5B,eAAoB,EACpB,eAAmC,EACnC,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,KAAa,GACd,EAAE,wBAAwB,2CAqI1B;kBAnJQ,mBAAmB;;;AAsJ5B,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,YAAY,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/components/dataTable/DataTablePagination.d.ts

@@ -9,8 +9,12 @@ type DataTablePaginationProps = {
     onPageSizeChange?: (pageSize: number) => void;
     className?: string;
     siblingCount?: number;
+    align?: 'start' | 'center' | 'end';
+    showFirstLast?: boolean;
+    showPageInput?: boolean;
+    dense?: boolean;
 };
-declare function DataTablePagination({ page: controlledPage, defaultPage, pageSize: controlledPageSize, defaultPageSize, pageSizeOptions, total, onPageChange, onPageSizeChange, className, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
+declare function DataTablePagination({ page: controlledPage, defaultPage, pageSize: controlledPageSize, defaultPageSize, pageSizeOptions, total, onPageChange, onPageSizeChange, className, align, showFirstLast, showPageInput, dense, }: DataTablePaginationProps): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTablePagination {
     var displayName: string;
 }

package/dist/components/dataTable/DataTablePagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePagination.d.ts","sourceRoot":"","sources":["../../../src/components/dataTable/DataTablePagination.tsx"],"names":[],"mappings":"AAwCA,KAAK,wBAAwB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAED,iBAAS,mBAAmB,CAAC,EAC3B,IAAI,EAAE,cAAc,EACpB,WAAe,EACf,QAAQ,EAAE,kBAAkB,EAC5B,eAAoB,EACpB,eAAiC,EACjC,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,SAAS,GACV,EAAE,wBAAwB,2CA0G1B;kBApHQ,mBAAmB;;;AAuH5B,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,YAAY,EAAE,wBAAwB,EAAE,CAAA"}
+{"version":3,"file":"DataTablePagination.d.ts","sourceRoot":"","sources":["../../../src/components/dataTable/DataTablePagination.tsx"],"names":[],"mappings":"AA6BA,KAAK,wBAAwB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,CAAA;AAQD,iBAAS,mBAAmB,CAAC,EAC3B,IAAI,EAAE,cAAc,EACpB,WAAe,EACf,QAAQ,EAAE,kBAAkB,EAC5B,eAAoB,EACpB,eAAmC,EACnC,KAAK,EACL,YAAY,EACZ,gBAAgB,EAChB,SAAS,EACT,KAAK,EACL,aAAqB,EACrB,aAAqB,EACrB,KAAa,GACd,EAAE,wBAAwB,2CAqI1B;kBAnJQ,mBAAmB;;;AAsJ5B,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,YAAY,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/components/dataTable/DataTablePagination.js

@@ -6,9 +6,12 @@ import {
   Pagination,
   PaginationContent,
   PaginationEllipsis,
+  PaginationFirst,
   PaginationItem,
+  PaginationLast,
   PaginationLink,
   PaginationNext,
+  PaginationPageInput,
   PaginationPageSize,
   PaginationPrevious
 } from "../pagination/Pagination.js";
@@ -17,32 +20,29 @@ const DATA_TABLE_PAGINATION_STYLE = {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
+  flexWrap: "wrap",
   padding: "var(--dsx-space-sm) var(--dsx-space-md)",
   gap: "var(--dsx-space-sm)"
 };
-const DATA_TABLE_PAGINATION_INFO_STYLE = {
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--dsx-space-xs)",
-  fontSize: "var(--dsx-font-size-xs)",
-  color: "var(--dsx-color-on-surface-variant)",
-  whiteSpace: "nowrap"
-};
-const DATA_TABLE_PAGINATION_CONTROLS_STYLE = {
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--dsx-space-xs)"
+const DATA_TABLE_PAGINATION_JUSTIFY_BY_ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
 };
 function DataTablePagination({
   page: controlledPage,
   defaultPage = 1,
   pageSize: controlledPageSize,
   defaultPageSize = 10,
-  pageSizeOptions = [5, 10, 20, 50],
+  pageSizeOptions = [10, 25, 50, 100],
   total,
   onPageChange,
   onPageSizeChange,
-  className
+  className,
+  align,
+  showFirstLast = false,
+  showPageInput = false,
+  dense = false
 }) {
   const [internalPage, setInternalPage] = React.useState(defaultPage);
   const [internalPageSize, setInternalPageSize] = React.useState(defaultPageSize);
@@ -79,18 +79,73 @@ function DataTablePagination({
       setInternalPage(newPage);
     }
     onPageSizeChange?.(newPageSize);
-    onPageChange?.(newPage);
   }
   const pageNumbers = buildPageNumbers(safePage, totalPages);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: classNames("dsx-data-table-pagination", className),
-      style: DATA_TABLE_PAGINATION_STYLE,
+      style: align ? { ...DATA_TABLE_PAGINATION_STYLE, justifyContent: DATA_TABLE_PAGINATION_JUSTIFY_BY_ALIGN[align] } : DATA_TABLE_PAGINATION_STYLE,
       children: [
-        /* @__PURE__ */ jsxs("div", { style: DATA_TABLE_PAGINATION_INFO_STYLE, children: [
-          /* @__PURE__ */ jsx("span", { children: total > 0 ? `${startRow}\u2013${endRow} of ${total}` : "0 rows" }),
-          /* @__PURE__ */ jsx("span", { style: { margin: "0 var(--dsx-space-xs)", color: "var(--dsx-color-outline)" }, children: "|" }),
+        /* @__PURE__ */ jsx("div", { className: "dsx-data-table-pagination__info", role: "status", "aria-live": "polite", children: total > 0 ? `${startRow}\u2013${endRow} of ${total}` : "0 rows" }),
+        /* @__PURE__ */ jsxs("div", { className: "dsx-data-table-pagination__navigation", children: [
+          /* @__PURE__ */ jsx(Pagination, { "aria-label": "Table pagination", children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
+            showFirstLast ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+              PaginationFirst,
+              {
+                disabled: safePage <= 1,
+                onClick: () => handlePageChange(1)
+              }
+            ) }) : null,
+            /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+              PaginationPrevious,
+              {
+                disabled: safePage <= 1,
+                onClick: () => handlePageChange(safePage - 1)
+              }
+            ) }),
+            pageNumbers.map(
+              (pageOrEllipsis, index) => pageOrEllipsis === "ellipsis" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, `ellipsis-${index}`) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+                PaginationLink,
+                {
+                  active: safePage === pageOrEllipsis,
+                  onClick: () => handlePageChange(pageOrEllipsis),
+                  "aria-label": `Page ${pageOrEllipsis}`,
+                  children: pageOrEllipsis
+                }
+              ) }, pageOrEllipsis)
+            ),
+            /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+              PaginationNext,
+              {
+                disabled: safePage >= totalPages,
+                onClick: () => handlePageChange(safePage + 1)
+              }
+            ) }),
+            showFirstLast ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
+              PaginationLast,
+              {
+                disabled: safePage >= totalPages,
+                onClick: () => handlePageChange(totalPages)
+              }
+            ) }) : null
+          ] }) }),
+          !showPageInput && !dense ? /* @__PURE__ */ jsxs("span", { className: "dsx-data-table-pagination__page-status", children: [
+            "Page ",
+            safePage,
+            " of ",
+            totalPages
+          ] }) : null,
+          showPageInput ? /* @__PURE__ */ jsx(
+            PaginationPageInput,
+            {
+              page: safePage,
+              totalPages,
+              onPageChange: handlePageChange
+            }
+          ) : null
+        ] }),
+        !dense ? /* @__PURE__ */ jsxs("div", { className: "dsx-data-table-pagination__page-size", children: [
           /* @__PURE__ */ jsx("span", { children: "Rows per page:" }),
           /* @__PURE__ */ jsx(
             PaginationPageSize,
@@ -101,34 +156,7 @@ function DataTablePagination({
               "aria-label": "Rows per page"
             }
           )
-        ] }),
-        /* @__PURE__ */ jsx("div", { style: DATA_TABLE_PAGINATION_CONTROLS_STYLE, children: /* @__PURE__ */ jsx(Pagination, { children: /* @__PURE__ */ jsxs(PaginationContent, { children: [
-          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-            PaginationPrevious,
-            {
-              disabled: safePage <= 1,
-              onClick: () => handlePageChange(safePage - 1)
-            }
-          ) }),
-          pageNumbers.map(
-            (pageOrEllipsis, index) => pageOrEllipsis === "ellipsis" ? /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationEllipsis, {}) }, `ellipsis-${index}`) : /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-              PaginationLink,
-              {
-                active: safePage === pageOrEllipsis,
-                onClick: () => handlePageChange(pageOrEllipsis),
-                "aria-label": `Page ${pageOrEllipsis}`,
-                children: pageOrEllipsis
-              }
-            ) }, pageOrEllipsis)
-          ),
-          /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(
-            PaginationNext,
-            {
-              disabled: safePage >= totalPages,
-              onClick: () => handlePageChange(safePage + 1)
-            }
-          ) })
-        ] }) }) })
+        ] }) : null
       ]
     }
   );

package/dist/components/dataTable/DataTablePagination.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/dataTable/DataTablePagination.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\n\nimport {\n  buildPageNumbers,\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationItem,\n  PaginationLink,\n  PaginationNext,\n  PaginationPageSize,\n  PaginationPrevious,\n} from '../pagination/Pagination'\n\nconst DATA_TABLE_PAGINATION_STYLE: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  padding: 'var(--dsx-space-sm) var(--dsx-space-md)',\n  gap: 'var(--dsx-space-sm)',\n}\n\nconst DATA_TABLE_PAGINATION_INFO_STYLE: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 'var(--dsx-space-xs)',\n  fontSize: 'var(--dsx-font-size-xs)',\n  color: 'var(--dsx-color-on-surface-variant)',\n  whiteSpace: 'nowrap',\n}\n\nconst DATA_TABLE_PAGINATION_CONTROLS_STYLE: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  gap: 'var(--dsx-space-xs)',\n}\n\ntype DataTablePaginationProps = {\n  page?: number\n  defaultPage?: number\n  pageSize?: number\n  defaultPageSize?: number\n  pageSizeOptions?: number[]\n  total: number\n  onPageChange?: (page: number) => void\n  onPageSizeChange?: (pageSize: number) => void\n  className?: string\n  siblingCount?: number\n}\n\nfunction DataTablePagination({\n  page: controlledPage,\n  defaultPage = 1,\n  pageSize: controlledPageSize,\n  defaultPageSize = 10,\n  pageSizeOptions = [5, 10, 20, 50],\n  total,\n  onPageChange,\n  onPageSizeChange,\n  className,\n}: DataTablePaginationProps) {\n  const [internalPage, setInternalPage] = React.useState(defaultPage)\n  const [internalPageSize, setInternalPageSize] = React.useState(defaultPageSize)\n\n  const isPageControlled = controlledPage !== undefined\n  const isPageSizeControlled = controlledPageSize !== undefined\n\n  const currentPage = isPageControlled ? controlledPage : internalPage\n  const currentPageSize = isPageSizeControlled ? controlledPageSize : internalPageSize\n\n  const totalPages = Math.max(1, Math.ceil(total / currentPageSize))\n  const safePage = Math.min(currentPage, totalPages)\n\n  const startRow = (safePage - 1) * currentPageSize + 1\n  const endRow = Math.min(safePage * currentPageSize, total)\n\n  React.useEffect(() => {\n    if (safePage !== currentPage) {\n      if (!isPageControlled) {\n        setInternalPage(safePage)\n      }\n      onPageChange?.(safePage)\n    }\n  }, [totalPages, safePage, currentPage, isPageControlled, onPageChange])\n\n  function handlePageChange(newPage: number) {\n    const clampedPage = Math.max(1, Math.min(newPage, totalPages))\n    if (!isPageControlled) {\n      setInternalPage(clampedPage)\n    }\n    onPageChange?.(clampedPage)\n  }\n\n  function handlePageSizeChange(newPageSize: number) {\n    if (!isPageSizeControlled) {\n      setInternalPageSize(newPageSize)\n    }\n    const newTotalPages = Math.max(1, Math.ceil(total / newPageSize))\n    const newPage = Math.min(safePage, newTotalPages)\n    if (!isPageControlled) {\n      setInternalPage(newPage)\n    }\n    onPageSizeChange?.(newPageSize)\n    onPageChange?.(newPage)\n  }\n\n  const pageNumbers = buildPageNumbers(safePage, totalPages)\n\n  return (\n    <div\n      className={classNames('dsx-data-table-pagination', className)}\n      style={DATA_TABLE_PAGINATION_STYLE}\n    >\n      <div style={DATA_TABLE_PAGINATION_INFO_STYLE}>\n        <span>\n          {total > 0 ? `${startRow}\u2013${endRow} of ${total}` : '0 rows'}\n        </span>\n        <span style={{ margin: '0 var(--dsx-space-xs)', color: 'var(--dsx-color-outline)' }}>|</span>\n        <span>Rows per page:</span>\n        <PaginationPageSize\n          value={currentPageSize}\n          options={pageSizeOptions}\n          onChange={handlePageSizeChange}\n          aria-label=\"Rows per page\"\n        />\n      </div>\n\n      <div style={DATA_TABLE_PAGINATION_CONTROLS_STYLE}>\n        <Pagination>\n          <PaginationContent>\n            <PaginationItem>\n              <PaginationPrevious\n                disabled={safePage <= 1}\n                onClick={() => handlePageChange(safePage - 1)}\n              />\n            </PaginationItem>\n\n            {pageNumbers.map((pageOrEllipsis, index) =>\n              pageOrEllipsis === 'ellipsis' ? (\n                <PaginationItem key={`ellipsis-${index}`}>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              ) : (\n                <PaginationItem key={pageOrEllipsis}>\n                  <PaginationLink\n                    active={safePage === pageOrEllipsis}\n                    onClick={() => handlePageChange(pageOrEllipsis)}\n                    aria-label={`Page ${pageOrEllipsis}`}\n                  >\n                    {pageOrEllipsis}\n                  </PaginationLink>\n                </PaginationItem>\n              ),\n            )}\n\n            <PaginationItem>\n              <PaginationNext\n                disabled={safePage >= totalPages}\n                onClick={() => handlePageChange(safePage + 1)}\n              />\n            </PaginationItem>\n          </PaginationContent>\n        </Pagination>\n      </div>\n    </div>\n  )\n}\nDataTablePagination.displayName = 'DataTablePagination'\n\nexport { DataTablePagination }\nexport type { DataTablePaginationProps }\n"],
-  "mappings": "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",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport classNames from 'classnames'\n\nimport {\n  buildPageNumbers,\n  Pagination,\n  PaginationContent,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationItem,\n  PaginationLast,\n  PaginationLink,\n  PaginationNext,\n  PaginationPageInput,\n  PaginationPageSize,\n  PaginationPrevious,\n} from '../pagination/Pagination'\n\nconst DATA_TABLE_PAGINATION_STYLE: React.CSSProperties = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  flexWrap: 'wrap',\n  padding: 'var(--dsx-space-sm) var(--dsx-space-md)',\n  gap: 'var(--dsx-space-sm)',\n}\n\ntype DataTablePaginationProps = {\n  page?: number\n  defaultPage?: number\n  pageSize?: number\n  defaultPageSize?: number\n  pageSizeOptions?: number[]\n  total: number\n  onPageChange?: (page: number) => void\n  onPageSizeChange?: (pageSize: number) => void\n  className?: string\n  siblingCount?: number\n  align?: 'start' | 'center' | 'end'\n  showFirstLast?: boolean\n  showPageInput?: boolean\n  dense?: boolean\n}\n\nconst DATA_TABLE_PAGINATION_JUSTIFY_BY_ALIGN = {\n  start: 'flex-start',\n  center: 'center',\n  end: 'flex-end',\n} as const\n\nfunction DataTablePagination({\n  page: controlledPage,\n  defaultPage = 1,\n  pageSize: controlledPageSize,\n  defaultPageSize = 10,\n  pageSizeOptions = [10, 25, 50, 100],\n  total,\n  onPageChange,\n  onPageSizeChange,\n  className,\n  align,\n  showFirstLast = false,\n  showPageInput = false,\n  dense = false,\n}: DataTablePaginationProps) {\n  const [internalPage, setInternalPage] = React.useState(defaultPage)\n  const [internalPageSize, setInternalPageSize] = React.useState(defaultPageSize)\n\n  const isPageControlled = controlledPage !== undefined\n  const isPageSizeControlled = controlledPageSize !== undefined\n\n  const currentPage = isPageControlled ? controlledPage : internalPage\n  const currentPageSize = isPageSizeControlled ? controlledPageSize : internalPageSize\n\n  const totalPages = Math.max(1, Math.ceil(total / currentPageSize))\n  const safePage = Math.min(currentPage, totalPages)\n\n  const startRow = (safePage - 1) * currentPageSize + 1\n  const endRow = Math.min(safePage * currentPageSize, total)\n\n  React.useEffect(() => {\n    if (safePage !== currentPage) {\n      if (!isPageControlled) {\n        setInternalPage(safePage)\n      }\n      onPageChange?.(safePage)\n    }\n  }, [totalPages, safePage, currentPage, isPageControlled, onPageChange])\n\n  function handlePageChange(newPage: number) {\n    const clampedPage = Math.max(1, Math.min(newPage, totalPages))\n    if (!isPageControlled) {\n      setInternalPage(clampedPage)\n    }\n    onPageChange?.(clampedPage)\n  }\n\n  function handlePageSizeChange(newPageSize: number) {\n    if (!isPageSizeControlled) {\n      setInternalPageSize(newPageSize)\n    }\n    const newTotalPages = Math.max(1, Math.ceil(total / newPageSize))\n    const newPage = Math.min(safePage, newTotalPages)\n    if (!isPageControlled) {\n      setInternalPage(newPage)\n    }\n    onPageSizeChange?.(newPageSize)\n  }\n\n  const pageNumbers = buildPageNumbers(safePage, totalPages)\n\n  return (\n    <div\n      className={classNames('dsx-data-table-pagination', className)}\n      style={align ? { ...DATA_TABLE_PAGINATION_STYLE, justifyContent: DATA_TABLE_PAGINATION_JUSTIFY_BY_ALIGN[align] } : DATA_TABLE_PAGINATION_STYLE}\n    >\n      <div className=\"dsx-data-table-pagination__info\" role=\"status\" aria-live=\"polite\">\n        {total > 0 ? `${startRow}\u2013${endRow} of ${total}` : '0 rows'}\n      </div>\n\n      <div className=\"dsx-data-table-pagination__navigation\">\n        <Pagination aria-label=\"Table pagination\">\n          <PaginationContent>\n            {showFirstLast ? (\n              <PaginationItem>\n                <PaginationFirst\n                  disabled={safePage <= 1}\n                  onClick={() => handlePageChange(1)}\n                />\n              </PaginationItem>\n            ) : null}\n            <PaginationItem>\n              <PaginationPrevious\n                disabled={safePage <= 1}\n                onClick={() => handlePageChange(safePage - 1)}\n              />\n            </PaginationItem>\n\n            {pageNumbers.map((pageOrEllipsis, index) =>\n              pageOrEllipsis === 'ellipsis' ? (\n                <PaginationItem key={`ellipsis-${index}`}>\n                  <PaginationEllipsis />\n                </PaginationItem>\n              ) : (\n                <PaginationItem key={pageOrEllipsis}>\n                  <PaginationLink\n                    active={safePage === pageOrEllipsis}\n                    onClick={() => handlePageChange(pageOrEllipsis)}\n                    aria-label={`Page ${pageOrEllipsis}`}\n                  >\n                    {pageOrEllipsis}\n                  </PaginationLink>\n                </PaginationItem>\n              ),\n            )}\n\n            <PaginationItem>\n              <PaginationNext\n                disabled={safePage >= totalPages}\n                onClick={() => handlePageChange(safePage + 1)}\n              />\n            </PaginationItem>\n            {showFirstLast ? (\n              <PaginationItem>\n                <PaginationLast\n                  disabled={safePage >= totalPages}\n                  onClick={() => handlePageChange(totalPages)}\n                />\n              </PaginationItem>\n            ) : null}\n          </PaginationContent>\n        </Pagination>\n        {!showPageInput && !dense ? (\n          <span className=\"dsx-data-table-pagination__page-status\">Page {safePage} of {totalPages}</span>\n        ) : null}\n        {showPageInput ? (\n          <PaginationPageInput\n            page={safePage}\n            totalPages={totalPages}\n            onPageChange={handlePageChange}\n          />\n        ) : null}\n      </div>\n\n      {!dense ? (\n      <div className=\"dsx-data-table-pagination__page-size\">\n        <span>Rows per page:</span>\n        <PaginationPageSize\n          value={currentPageSize}\n          options={pageSizeOptions}\n          onChange={handlePageSizeChange}\n          aria-label=\"Rows per page\"\n        />\n      </div>\n      ) : null}\n    </div>\n  )\n}\nDataTablePagination.displayName = 'DataTablePagination'\n\nexport { DataTablePagination }\nexport type { DataTablePaginationProps }\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/dataTable/DataTableToolbar.cjs

@@ -41,31 +41,30 @@ var import_classnames = __toESM(require("classnames"), 1);
 var import_Badge = require("../badge/Badge");
 var import_Button = require("../button/Button");
 var import_DropdownMenu = require("../dropdownMenu/DropdownMenu");
+var import_Icon = require("../icon/Icon");
 var import_Input = require("../input/Input");
+var import_DataTableContext = require("./DataTableContext");
+var import_dataTable = require("./dataTable.export");
 var import_jsx_runtime = require("react/jsx-runtime");
-const DATA_TABLE_TOOLBAR_STYLE = {
-  display: "flex",
-  alignItems: "center",
-  flexWrap: "wrap",
-  gap: "var(--dsx-space-sm)",
-  padding: "var(--dsx-space-md)"
-};
 const DATA_TABLE_TOOLBAR_SEARCH_STYLE = {
-  flex: "1 1 200px",
-  minWidth: "160px"
+  width: "100%"
 };
 function DataTableToolbarSearch({
   value,
-  defaultValue = "",
+  defaultValue,
   placeholder = "Search rows",
   onChange
 }) {
-  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const table = (0, import_DataTableContext.useDataTableToolbarContext)();
+  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "");
   const isControlled = value !== void 0;
-  const currentValue = isControlled ? value : internalValue;
+  const usesTableState = !isControlled && defaultValue === void 0 && table !== null;
+  const currentValue = isControlled ? value : usesTableState ? table.query : internalValue;
   function handleChange(event) {
     const nextValue = event.currentTarget.value;
-    if (!isControlled) {
+    if (usesTableState) {
+      table.onQueryChange(nextValue);
+    } else if (!isControlled) {
       setInternalValue(nextValue);
     }
     onChange?.(nextValue);
@@ -74,6 +73,7 @@ function DataTableToolbarSearch({
     import_Input.Input,
     {
       "aria-label": "Search table rows",
+      className: "dsx-data-table-toolbar__search",
       density: "sm",
       onChange: handleChange,
       placeholder,
@@ -90,12 +90,24 @@ function DataTableToolbarColumnVisibility({
   defaultVisibleColumnIds,
   onVisibleColumnIdsChange
 }) {
-  const allColumnIds = React.useMemo(() => new Set(columns.map((col) => col.id)), [columns]);
+  const table = (0, import_DataTableContext.useDataTableToolbarContext)();
+  const resolvedColumns = React.useMemo(
+    () => columns?.map((column) => ({ id: column.id, header: column.header })) ?? table?.columns.map((column) => ({ id: column.id, header: column.label })) ?? null,
+    [columns, table?.columns]
+  );
+  const allColumnIds = React.useMemo(
+    () => new Set(resolvedColumns?.map((column) => column.id) ?? []),
+    [resolvedColumns]
+  );
   const [internalVisibleIds, setInternalVisibleIds] = React.useState(
     () => defaultVisibleColumnIds ?? allColumnIds
   );
-  const isControlled = visibleColumnIds !== void 0;
-  const currentVisibleIds = isControlled ? visibleColumnIds : internalVisibleIds;
+  if (!resolvedColumns) {
+    throw new Error("DataTable.Toolbar.ColumnVisibility requires columns or a parent DataTable.");
+  }
+  const usesTableState = visibleColumnIds === void 0 && defaultVisibleColumnIds === void 0 && table !== null;
+  const isControlled = visibleColumnIds !== void 0 || usesTableState;
+  const currentVisibleIds = visibleColumnIds ?? (usesTableState ? table.visibleColumnIds : internalVisibleIds);
   const visibleCount = currentVisibleIds.size;
   const totalCount = allColumnIds.size;
   function handleToggle(columnId, checked) {
@@ -108,25 +120,40 @@ function DataTableToolbarColumnVisibility({
     if (!isControlled) {
       setInternalVisibleIds(nextIds);
     }
+    if (usesTableState) {
+      table.onVisibleColumnIdsChange(nextIds);
+    }
     onVisibleColumnIdsChange?.(nextIds);
   }
   function handleShowAll() {
     if (!isControlled) {
       setInternalVisibleIds(allColumnIds);
     }
+    if (usesTableState) {
+      table.onVisibleColumnIdsChange(allColumnIds);
+    }
     onVisibleColumnIdsChange?.(allColumnIds);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DropdownMenu.DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Button.Button, { size: "sm", variant: "outline", trailingIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u25BE" }), children: [
-      "Columns",
-      visibleCount < totalCount && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Badge.Badge, { size: "sm", variant: "primary", style: { marginLeft: "var(--dsx-space-xs)" }, children: [
-        visibleCount,
-        "/",
-        totalCount
-      ] })
-    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_Button.Button,
+      {
+        leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { "aria-hidden": "true", name: "list", size: "sm" }),
+        size: "sm",
+        trailingIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { "aria-hidden": "true", name: "chevron-down", size: "sm" }),
+        variant: "outline",
+        children: [
+          "Columns",
+          visibleCount < totalCount && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Badge.Badge, { size: "sm", variant: "primary", style: { marginLeft: "var(--dsx-space-xs)" }, children: [
+            visibleCount,
+            "/",
+            totalCount
+          ] })
+        ]
+      }
+    ) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DropdownMenu.DropdownMenuContent, { align: "end", style: { minWidth: "200px", maxHeight: "320px", overflow: "auto" }, children: [
-      columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      resolvedColumns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_DropdownMenu.DropdownMenuCheckboxItem,
         {
           checked: currentVisibleIds.has(column.id),
@@ -143,41 +170,6 @@ function DataTableToolbarColumnVisibility({
   ] });
 }
 DataTableToolbarColumnVisibility.displayName = "DataTableToolbarColumnVisibility";
-function stringifyCellValue(value) {
-  if (value == null) return "";
-  if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") return String(value);
-  if (value instanceof Date) return value.toISOString();
-  if (Array.isArray(value)) return value.map(stringifyCellValue).join(" ");
-  if (typeof value === "object") return JSON.stringify(value);
-  return String(value);
-}
-function escapeCsvCell(value) {
-  if (value.includes(",") || value.includes('"') || value.includes("\n") || value.includes("\r")) {
-    return `"${value.replace(/"/g, '""')}"`;
-  }
-  return value;
-}
-function exportAsCsv(data, columns) {
-  const headers = columns.map((col) => escapeCsvCell(String(col.header)));
-  const rows = data.map(
-    (row) => columns.map((col) => {
-      const value = col.accessorKey ? row[col.accessorKey] : void 0;
-      return escapeCsvCell(stringifyCellValue(value));
-    }).join(",")
-  );
-  return [headers.join(","), ...rows].join("\n");
-}
-function exportAsJson(data, columns) {
-  const keys = columns.map((col) => col.accessorKey).filter((key) => key !== void 0);
-  const projected = data.map((row) => {
-    const result = {};
-    for (const key of keys) {
-      result[key] = row[key];
-    }
-    return result;
-  });
-  return JSON.stringify(projected, null, 2);
-}
 function DataTableToolbarExport({
   data,
   columns,
@@ -185,9 +177,10 @@ function DataTableToolbarExport({
   filename = "table-export",
   onExport
 }) {
-  const [selectedFormat, setSelectedFormat] = React.useState(format);
-  function handleExport(exportFormat) {
-    const exportData = exportFormat === "csv" ? exportAsCsv(data, columns) : exportAsJson(data, columns);
+  const table = (0, import_DataTableContext.useDataTableToolbarContext)();
+  const [progress, setProgress] = React.useState(null);
+  const rowCount = table?.filteredRowCount ?? data?.length;
+  function download(exportFormat, exportData) {
     onExport?.(exportFormat, exportData);
     const blob = new Blob([exportData], { type: exportFormat === "csv" ? "text/csv" : "application/json" });
     const url = URL.createObjectURL(blob);
@@ -199,45 +192,81 @@ function DataTableToolbarExport({
     document.body.removeChild(link);
     URL.revokeObjectURL(url);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DropdownMenu.DropdownMenu, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { size: "sm", variant: "outline", trailingIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: "\u25BE" }), children: "Export" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DropdownMenu.DropdownMenuContent, { align: "end", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_DropdownMenu.DropdownMenuCheckboxItem,
-        {
-          checked: selectedFormat === "csv",
-          onCheckedChange: () => {
-            setSelectedFormat("csv");
-            handleExport("csv");
-          },
-          children: "CSV"
+  async function handleExport(exportFormat) {
+    if (progress !== null) return;
+    if (data && columns) {
+      if (data.length > import_dataTable.EXPORT_PROGRESS_ROW_THRESHOLD) {
+        setProgress(0);
+        try {
+          download(exportFormat, await (0, import_dataTable.exportDataTableRowsProgressive)(exportFormat, data, columns, setProgress));
+        } finally {
+          setProgress(null);
         }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_DropdownMenu.DropdownMenuCheckboxItem,
-        {
-          checked: selectedFormat === "json",
-          onCheckedChange: () => {
-            setSelectedFormat("json");
-            handleExport("json");
-          },
-          children: "JSON"
+      } else {
+        download(exportFormat, (0, import_dataTable.exportDataTableRows)(exportFormat, data, columns));
+      }
+    } else if (table) {
+      if (table.filteredRowCount > import_dataTable.EXPORT_PROGRESS_ROW_THRESHOLD) {
+        setProgress(0);
+        try {
+          download(exportFormat, await table.exportRowsProgressive(exportFormat, setProgress));
+        } finally {
+          setProgress(null);
         }
-      )
+      } else {
+        download(exportFormat, table.exportRows(exportFormat));
+      }
+    } else {
+      throw new Error("DataTable.Toolbar.Export requires data and columns or a parent DataTable.");
+    }
+  }
+  function formatLabel(exportFormat) {
+    const base = exportFormat === "json" ? "JSON file" : "CSV file";
+    return rowCount === void 0 ? base : `${base} \xB7 ${rowCount} rows`;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DropdownMenu.DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_DropdownMenu.DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_Button.Button,
+      {
+        leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { "aria-hidden": "true", name: "download", size: "sm" }),
+        size: "sm",
+        trailingIcon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { "aria-hidden": "true", name: "chevron-down", size: "sm" }),
+        variant: "outline",
+        disabled: progress !== null,
+        "aria-live": "polite",
+        children: progress !== null ? `Exporting ${progress}%` : "Export"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DropdownMenu.DropdownMenuContent, { align: "end", "aria-label": "Export format", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DropdownMenu.DropdownMenuItem, { onSelect: () => void handleExport(format === "json" ? "json" : "csv"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { "aria-hidden": "true", name: "download", size: "sm" }),
+        formatLabel(format === "json" ? "json" : "csv")
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DropdownMenu.DropdownMenuItem, { onSelect: () => void handleExport(format === "json" ? "csv" : "json"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { "aria-hidden": "true", name: "download", size: "sm" }),
+        formatLabel(format === "json" ? "csv" : "json")
+      ] })
     ] })
   ] });
 }
 DataTableToolbarExport.displayName = "DataTableToolbarExport";
 function DataTableToolbarRowCount({ total, filtered, selected }) {
-  const showFiltered = filtered !== void 0 && filtered !== total;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "var(--dsx-space-xs)", fontSize: "var(--dsx-font-size-xs)", color: "var(--dsx-color-on-surface-variant)" }, children: [
+  const table = (0, import_DataTableContext.useDataTableToolbarContext)();
+  const resolvedTotal = total ?? table?.totalRowCount;
+  const resolvedFiltered = filtered ?? table?.filteredRowCount;
+  const resolvedSelected = selected ?? table?.selectedRowCount;
+  if (resolvedTotal === void 0) {
+    throw new Error("DataTable.Toolbar.RowCount requires total or a parent DataTable.");
+  }
+  const showFiltered = resolvedFiltered !== void 0 && resolvedFiltered !== resolvedTotal;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-data-table-toolbar__row-count", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-      showFiltered ? `${filtered} of ${total}` : `${total}`,
+      showFiltered ? `${resolvedFiltered} of ${resolvedTotal}` : `${resolvedTotal}`,
       " row",
-      total !== 1 ? "s" : ""
+      resolvedTotal !== 1 ? "s" : ""
     ] }),
-    selected !== void 0 && selected > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Badge.Badge, { size: "sm", variant: "primary", children: [
-      selected,
+    resolvedSelected !== void 0 && resolvedSelected > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Badge.Badge, { size: "sm", variant: "primary", children: [
+      resolvedSelected,
       " selected"
     ] })
   ] });
@@ -249,7 +278,7 @@ function DataTableToolbar({ className, children, style, ...restProps }) {
     {
       ...restProps,
       className: (0, import_classnames.default)("dsx-data-table-toolbar", className),
-      style: { ...DATA_TABLE_TOOLBAR_STYLE, ...style },
+      style,
       children
     }
   );