@sth87/shadcn-design-system 0.1.6 → 0.1.8

package/dist/esm/components/Table/data-table-view-options.js

@@ -0,0 +1,258 @@
+import { jsxs as x, Fragment as G, jsx as r } from "react/jsx-runtime";
+import { useSensors as K, useSensor as O, DndContext as $, closestCenter as H, KeyboardSensor as q, PointerSensor as J } from "../../node_modules/.pnpm/@dnd-kit_core@6.3.1_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@dnd-kit/core/dist/core.esm.js";
+import { arrayMove as Q, SortableContext as U, verticalListSortingStrategy as W, sortableKeyboardCoordinates as X, useSortable as Y } from "../../node_modules/.pnpm/@dnd-kit_sortable@10.0.0_@dnd-kit_core@6.3.1_react-dom@19.1.1_react@19.1.1__react@19.1.1__react@19.1.1/node_modules/@dnd-kit/sortable/dist/sortable.esm.js";
+import { CSS as Z } from "../../node_modules/.pnpm/@dnd-kit_utilities@3.2.2_react@19.1.1/node_modules/@dnd-kit/utilities/dist/utilities.esm.js";
+import { Check as _, Settings2 as ee, GripVertical as te } from "lucide-react";
+import * as h from "react";
+import se from "../Command/Command.js";
+import { Popover as re } from "../Popover/index.js";
+import "@radix-ui/react-slot";
+import "../../packages/ui/src/components/button.js";
+import "../../packages/ui/src/components/button-group.js";
+import "../../packages/ui/src/components/input.js";
+import "../../packages/ui/src/components/textarea.js";
+import "@radix-ui/react-label";
+import { cn as N } from "../../packages/ui/src/lib/utils.js";
+import "../../packages/ui/src/components/select.js";
+import "../../packages/ui/src/components/combobox.js";
+import "@radix-ui/react-tooltip";
+import "react-day-picker";
+import "../../packages/ui/src/components/popover.js";
+import "@radix-ui/react-separator";
+import "../../packages/ui/src/components/switch.js";
+import "vaul";
+import "@radix-ui/react-scroll-area";
+import "../../packages/ui/src/components/tree-view.js";
+import "@radix-ui/react-alert-dialog";
+import "@radix-ui/react-avatar";
+import "../../packages/ui/src/components/badge.js";
+import "../../packages/ui/src/components/checkbox.js";
+import "@radix-ui/react-collapsible";
+import "cmdk";
+import "@radix-ui/react-dialog";
+import "@radix-ui/react-dropdown-menu";
+import "../../packages/ui/src/components/input-otp.js";
+import "../../packages/ui/src/components/radio-group.js";
+import "../../packages/ui/src/components/sidebar.js";
+import "@radix-ui/react-slider";
+import "../../packages/ui/src/components/tabs.js";
+import "../../packages/ui/src/components/toggle.js";
+import D from "../Checkbox/Checkbox.js";
+import P from "../Button/Button.js";
+function qe({
+  table: s,
+  variant: o = "command",
+  labels: n,
+  triggerIcon: c = /* @__PURE__ */ r(ee, { className: "ds:text-muted-foreground" }),
+  trigger: d,
+  content: f,
+  contentClassName: g,
+  ...u
+}) {
+  const l = s.getState().columnOrder, a = s.getState().columnPinning, i = h.useMemo(
+    () => w(s, l, a).filter(
+      (e) => typeof e.accessorFn < "u" && e.getCanHide()
+    ),
+    [s, l, a]
+  ), C = h.useCallback(
+    (e) => e.columnDef.meta?.label ?? (typeof e.columnDef.header == "string" ? e.columnDef.header : e.id),
+    []
+  ), y = K(
+    O(J),
+    O(q, {
+      coordinateGetter: X
+    })
+  ), t = h.useMemo(
+    () => i.map((e) => e.id),
+    [i]
+  ), T = i.every((e) => e.getIsVisible()), z = i.some((e) => e.getIsVisible()), A = h.useCallback(
+    (e) => {
+      i.forEach((p) => p.toggleVisibility(e));
+    },
+    [i]
+  ), L = h.useCallback(
+    (e) => {
+      const { active: p, over: S } = e;
+      if (!S || p.id === S.id) return;
+      const V = t.indexOf(String(p.id)), k = t.indexOf(String(S.id));
+      if (V === -1 || k === -1) return;
+      const B = Q(t, V, k), I = new Set(t), R = [...B], E = w(s).map(
+        (m) => I.has(m.id) ? R.shift() ?? m.id : m.id
+      ), v = s.getState().columnPinning, F = {
+        ...v,
+        left: v?.left?.filter((m) => !I.has(m)),
+        right: v?.right?.filter(
+          (m) => !I.has(m)
+        )
+      };
+      s.setColumnOrder(E), s.setColumnPinning(F);
+    },
+    [t, s]
+  ), M = [
+    {
+      type: "group",
+      heading: "",
+      items: i.map((e) => ({
+        type: "item",
+        onClick: () => e.toggleVisibility(!e.getIsVisible()),
+        children: /* @__PURE__ */ x(G, { children: [
+          /* @__PURE__ */ r("span", { className: "ds:truncate", children: C(e) }),
+          /* @__PURE__ */ r(
+            _,
+            {
+              className: N(
+                "ds:ml-auto ds:size-4 ds:shrink-0",
+                e.getIsVisible() ? "ds:opacity-100" : "ds:opacity-0"
+              )
+            }
+          )
+        ] })
+      }))
+    }
+  ], b = {
+    trigger: n?.trigger ?? "View",
+    searchPlaceholder: n?.searchPlaceholder ?? "Search columns...",
+    selectAll: n?.selectAll ?? "Chọn tất cả",
+    reset: n?.reset ?? "Đặt lại"
+  }, j = /* @__PURE__ */ x("div", { className: "ds:flex ds:w-full ds:flex-col", children: [
+    /* @__PURE__ */ x("div", { className: "ds:flex ds:items-center ds:gap-3 ds:px-3 ds:py-3", children: [
+      /* @__PURE__ */ r(
+        D,
+        {
+          "aria-label": "Toggle all columns",
+          checked: T ? !0 : z ? "indeterminate" : !1,
+          onCheckedChange: (e) => A(e === !0)
+        }
+      ),
+      /* @__PURE__ */ r("span", { className: "ds:text-sm ds:font-medium ds:text-foreground", children: b.selectAll })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "ds:mx-3 ds:h-px ds:bg-border" }),
+    /* @__PURE__ */ r(
+      $,
+      {
+        sensors: y,
+        collisionDetection: H,
+        onDragEnd: L,
+        children: /* @__PURE__ */ r(
+          U,
+          {
+            items: t,
+            strategy: W,
+            children: /* @__PURE__ */ r("div", { className: "ds:flex ds:max-h-80 ds:flex-col ds:overflow-y-auto ds:py-2", children: i.map((e) => /* @__PURE__ */ r(
+              ie,
+              {
+                id: e.id,
+                label: C(e),
+                checked: e.getIsVisible(),
+                onCheckedChange: (p) => e.toggleVisibility(p === !0)
+              },
+              e.id
+            )) })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ r("div", { className: "ds:mx-3 ds:h-px ds:bg-border" }),
+    /* @__PURE__ */ r(
+      P,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: "ds:mx-3 ds:my-2 ds:text-primary hover:ds:text-primary",
+        onClick: () => {
+          s.resetColumnVisibility(), s.resetColumnOrder(), s.resetColumnPinning();
+        },
+        children: b.reset
+      }
+    )
+  ] });
+  return /* @__PURE__ */ r(
+    re,
+    {
+      trigger: d ?? /* @__PURE__ */ x(
+        P,
+        {
+          "aria-label": "Toggle columns",
+          role: "combobox",
+          variant: "outline",
+          size: "sm",
+          className: "ds:ml-auto ds:h-8 ds:font-normal ds:lg:flex",
+          children: [
+            c,
+            b.trigger
+          ]
+        }
+      ),
+      content: f ?? (o === "draggable" ? j : /* @__PURE__ */ r(se, { items: M, search: b.searchPlaceholder })),
+      contentClassName: N(
+        "ds:p-0",
+        o === "draggable" ? "ds:w-72" : "ds:w-44",
+        g
+      ),
+      ...u
+    }
+  );
+}
+function w(s, o = s.getState().columnOrder, n = s.getState().columnPinning) {
+  const c = s.getAllLeafColumns(), d = new Map(c.map((t) => [t.id, t])), f = c.map((t) => t.id), g = o ?? [], u = [
+    ...g.filter((t) => d.has(t)),
+    ...f.filter((t) => !g.includes(t))
+  ], l = n ?? {}, a = (l.left ?? []).filter((t) => d.has(t)), i = (l.right ?? []).filter((t) => d.has(t)), C = /* @__PURE__ */ new Set([...a, ...i]), y = u.filter((t) => !C.has(t));
+  return [...a, ...y, ...i].map((t) => d.get(t)).filter((t) => !!t);
+}
+function ie({
+  id: s,
+  label: o,
+  checked: n,
+  onCheckedChange: c
+}) {
+  const {
+    attributes: d,
+    listeners: f,
+    setNodeRef: g,
+    transform: u,
+    transition: l,
+    isDragging: a
+  } = Y({ id: s });
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      ref: g,
+      className: N(
+        "ds:flex ds:min-h-11 ds:items-center ds:gap-3 ds:px-3 ds:text-sm ds:text-foreground",
+        a && "ds:bg-accent"
+      ),
+      style: {
+        transform: Z.Transform.toString(u),
+        transition: l
+      },
+      children: [
+        /* @__PURE__ */ r(
+          "button",
+          {
+            type: "button",
+            className: "ds:flex ds:size-5 ds:shrink-0 ds:cursor-grab ds:items-center ds:justify-center ds:text-muted-foreground active:ds:cursor-grabbing",
+            "aria-label": `Reorder ${o}`,
+            ...d,
+            ...f,
+            children: /* @__PURE__ */ r(te, { className: "ds:size-4" })
+          }
+        ),
+        /* @__PURE__ */ r(
+          D,
+          {
+            "aria-label": `Toggle ${o}`,
+            checked: n,
+            onCheckedChange: c
+          }
+        ),
+        /* @__PURE__ */ r("span", { className: "ds:min-w-0 ds:flex-1 ds:truncate ds:font-medium", children: o })
+      ]
+    }
+  );
+}
+export {
+  qe as DataTableViewOptions
+};
+//# sourceMappingURL=data-table-view-options.js.map

package/dist/esm/components/Table/data-table-view-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-view-options.js","sources":["../../../../src/components/Table/data-table-view-options.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  closestCenter,\n  DndContext,\n  type DragEndEvent,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  useSortable,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport type {\n  Column,\n  ColumnOrderState,\n  ColumnPinningState,\n  Table,\n} from \"@tanstack/react-table\";\nimport { Check, GripVertical, Settings2 } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button } from \"../Button\";\nimport { Checkbox } from \"../Checkbox\";\nimport Command, { type CommandItemType } from \"../Command/Command\";\nimport { Popover } from \"../Popover\";\nimport { cn } from \"@dsui/ui\";\n\nexport type DataTableViewOptionsVariant = \"command\" | \"draggable\";\n\nexport interface DataTableViewOptionsLabels {\n  trigger?: React.ReactNode;\n  searchPlaceholder?: string;\n  selectAll?: React.ReactNode;\n  reset?: React.ReactNode;\n}\n\nexport interface DataTableViewOptionsProps<TData> extends React.ComponentProps<\n  typeof Popover\n> {\n  table: Table<TData>;\n  variant?: DataTableViewOptionsVariant;\n  labels?: DataTableViewOptionsLabels;\n  triggerIcon?: React.ReactNode;\n}\n\nexport function DataTableViewOptions<TData>({\n  table,\n  variant = \"command\",\n  labels,\n  triggerIcon = <Settings2 className=\"ds:text-muted-foreground\" />,\n  trigger,\n  content,\n  contentClassName,\n  ...props\n}: DataTableViewOptionsProps<TData>) {\n  const columnOrder = table.getState().columnOrder;\n  const columnPinning = table.getState().columnPinning;\n\n  const columns = React.useMemo(\n    () =>\n      getOrderedTableColumns(table, columnOrder, columnPinning).filter(\n        (column) =>\n          typeof column.accessorFn !== \"undefined\" && column.getCanHide()\n      ),\n    [table, columnOrder, columnPinning]\n  );\n\n  const getColumnLabel = React.useCallback(\n    (column: (typeof columns)[number]) =>\n      column.columnDef.meta?.label ??\n      (typeof column.columnDef.header === \"string\"\n        ? column.columnDef.header\n        : column.id),\n    []\n  );\n\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    })\n  );\n\n  const columnIds = React.useMemo(\n    () => columns.map((column) => column.id),\n    [columns]\n  );\n\n  const allColumnsVisible = columns.every((column) => column.getIsVisible());\n  const someColumnsVisible = columns.some((column) => column.getIsVisible());\n\n  const onToggleAll = React.useCallback(\n    (checked: boolean) => {\n      columns.forEach((column) => column.toggleVisibility(checked));\n    },\n    [columns]\n  );\n\n  const onDragEnd = React.useCallback(\n    (event: DragEndEvent) => {\n      const { active, over } = event;\n\n      if (!over || active.id === over.id) return;\n\n      const oldIndex = columnIds.indexOf(String(active.id));\n      const newIndex = columnIds.indexOf(String(over.id));\n\n      if (oldIndex === -1 || newIndex === -1) return;\n\n      const orderedOptionIds = arrayMove(columnIds, oldIndex, newIndex);\n      const optionIdSet = new Set(columnIds);\n      const pendingOptionIds = [...orderedOptionIds];\n      const nextColumnOrder = getOrderedTableColumns(table).map((column) =>\n        optionIdSet.has(column.id)\n          ? (pendingOptionIds.shift() ?? column.id)\n          : column.id\n      );\n      const currentColumnPinning = table.getState().columnPinning;\n      const nextColumnPinning = {\n        ...currentColumnPinning,\n        left: currentColumnPinning?.left?.filter((id) => !optionIdSet.has(id)),\n        right: currentColumnPinning?.right?.filter(\n          (id) => !optionIdSet.has(id)\n        ),\n      };\n\n      table.setColumnOrder(nextColumnOrder);\n      table.setColumnPinning(nextColumnPinning);\n    },\n    [columnIds, table]\n  );\n\n  const items: CommandItemType[] = [\n    {\n      type: \"group\",\n      heading: \"\",\n      items: columns.map((column) => ({\n        type: \"item\" as const,\n        onClick: () => column.toggleVisibility(!column.getIsVisible()),\n        children: (\n          <>\n            <span className=\"ds:truncate\">{getColumnLabel(column)}</span>\n            <Check\n              className={cn(\n                \"ds:ml-auto ds:size-4 ds:shrink-0\",\n                column.getIsVisible() ? \"ds:opacity-100\" : \"ds:opacity-0\"\n              )}\n            />\n          </>\n        ),\n      })),\n    },\n  ];\n\n  const resolvedLabels = {\n    trigger: labels?.trigger ?? \"View\",\n    searchPlaceholder: labels?.searchPlaceholder ?? \"Search columns...\",\n    selectAll: labels?.selectAll ?? \"Chọn tất cả\",\n    reset: labels?.reset ?? \"Đặt lại\",\n  };\n\n  const defaultDraggableContent = (\n    <div className=\"ds:flex ds:w-full ds:flex-col\">\n      <div className=\"ds:flex ds:items-center ds:gap-3 ds:px-3 ds:py-3\">\n        <Checkbox\n          aria-label=\"Toggle all columns\"\n          checked={\n            allColumnsVisible\n              ? true\n              : someColumnsVisible\n                ? \"indeterminate\"\n                : false\n          }\n          onCheckedChange={(checked) => onToggleAll(checked === true)}\n        />\n        <span className=\"ds:text-sm ds:font-medium ds:text-foreground\">\n          {resolvedLabels.selectAll}\n        </span>\n      </div>\n      <div className=\"ds:mx-3 ds:h-px ds:bg-border\" />\n      <DndContext\n        sensors={sensors}\n        collisionDetection={closestCenter}\n        onDragEnd={onDragEnd}\n      >\n        <SortableContext\n          items={columnIds}\n          strategy={verticalListSortingStrategy}\n        >\n          <div className=\"ds:flex ds:max-h-80 ds:flex-col ds:overflow-y-auto ds:py-2\">\n            {columns.map((column) => (\n              <DataTableDraggableColumnOption\n                key={column.id}\n                id={column.id}\n                label={getColumnLabel(column)}\n                checked={column.getIsVisible()}\n                onCheckedChange={(checked) =>\n                  column.toggleVisibility(checked === true)\n                }\n              />\n            ))}\n          </div>\n        </SortableContext>\n      </DndContext>\n      <div className=\"ds:mx-3 ds:h-px ds:bg-border\" />\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size=\"sm\"\n        className=\"ds:mx-3 ds:my-2 ds:text-primary hover:ds:text-primary\"\n        onClick={() => {\n          table.resetColumnVisibility();\n          table.resetColumnOrder();\n          table.resetColumnPinning();\n        }}\n      >\n        {resolvedLabels.reset}\n      </Button>\n    </div>\n  );\n\n  return (\n    <Popover\n      trigger={\n        trigger ?? (\n          <Button\n            aria-label=\"Toggle columns\"\n            role=\"combobox\"\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"ds:ml-auto ds:h-8 ds:font-normal ds:lg:flex\"\n          >\n            {triggerIcon}\n            {resolvedLabels.trigger}\n          </Button>\n        )\n      }\n      content={\n        content ??\n        (variant === \"draggable\" ? (\n          defaultDraggableContent\n        ) : (\n          <Command items={items} search={resolvedLabels.searchPlaceholder} />\n        ))\n      }\n      contentClassName={cn(\n        \"ds:p-0\",\n        variant === \"draggable\" ? \"ds:w-72\" : \"ds:w-44\",\n        contentClassName\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction getOrderedTableColumns<TData>(\n  table: Table<TData>,\n  columnOrder: ColumnOrderState = table.getState().columnOrder,\n  columnPinning: ColumnPinningState = table.getState().columnPinning\n) {\n  const allColumns = table.getAllLeafColumns();\n  const columnById = new Map(allColumns.map((column) => [column.id, column]));\n  const columnIds = allColumns.map((column) => column.id);\n  const order = columnOrder ?? [];\n  const orderedIds = [\n    ...order.filter((id) => columnById.has(id)),\n    ...columnIds.filter((id) => !order.includes(id)),\n  ];\n  const pinning = columnPinning ?? {};\n  const leftIds = (pinning.left ?? []).filter((id) => columnById.has(id));\n  const rightIds = (pinning.right ?? []).filter((id) => columnById.has(id));\n  const pinnedIds = new Set([...leftIds, ...rightIds]);\n  const centerIds = orderedIds.filter((id) => !pinnedIds.has(id));\n\n  return [...leftIds, ...centerIds, ...rightIds]\n    .map((id) => columnById.get(id))\n    .filter((column): column is Column<TData, unknown> => Boolean(column));\n}\n\ninterface DataTableDraggableColumnOptionProps {\n  id: string;\n  label: React.ReactNode;\n  checked: boolean;\n  onCheckedChange: React.ComponentProps<typeof Checkbox>[\"onCheckedChange\"];\n}\n\nfunction DataTableDraggableColumnOption({\n  id,\n  label,\n  checked,\n  onCheckedChange,\n}: DataTableDraggableColumnOptionProps) {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id });\n\n  return (\n    <div\n      ref={setNodeRef}\n      className={cn(\n        \"ds:flex ds:min-h-11 ds:items-center ds:gap-3 ds:px-3 ds:text-sm ds:text-foreground\",\n        isDragging && \"ds:bg-accent\"\n      )}\n      style={{\n        transform: CSS.Transform.toString(transform),\n        transition,\n      }}\n    >\n      <button\n        type=\"button\"\n        className=\"ds:flex ds:size-5 ds:shrink-0 ds:cursor-grab ds:items-center ds:justify-center ds:text-muted-foreground active:ds:cursor-grabbing\"\n        aria-label={`Reorder ${label}`}\n        {...attributes}\n        {...listeners}\n      >\n        <GripVertical className=\"ds:size-4\" />\n      </button>\n      <Checkbox\n        aria-label={`Toggle ${label}`}\n        checked={checked}\n        onCheckedChange={onCheckedChange}\n      />\n      <span className=\"ds:min-w-0 ds:flex-1 ds:truncate ds:font-medium\">\n        {label}\n      </span>\n    </div>\n  );\n}\n"],"names":["DataTableViewOptions","table","variant","labels","triggerIcon","jsx","Settings2","trigger","content","contentClassName","props","columnOrder","columnPinning","columns","React","getOrderedTableColumns","column","getColumnLabel","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","sortableKeyboardCoordinates","columnIds","allColumnsVisible","someColumnsVisible","onToggleAll","checked","onDragEnd","event","active","over","oldIndex","newIndex","orderedOptionIds","arrayMove","optionIdSet","pendingOptionIds","nextColumnOrder","currentColumnPinning","nextColumnPinning","id","items","jsxs","Fragment","Check","cn","resolvedLabels","defaultDraggableContent","Checkbox","DndContext","closestCenter","SortableContext","verticalListSortingStrategy","DataTableDraggableColumnOption","Button","Popover","Command","allColumns","columnById","order","orderedIds","pinning","leftIds","rightIds","pinnedIds","centerIds","label","onCheckedChange","attributes","listeners","setNodeRef","transform","transition","isDragging","useSortable","CSS","GripVertical"],"mappings":"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"}

package/dist/esm/components/Table/data-table.js

@@ -64,7 +64,7 @@ function po({
           "div",
           {
             className: a(
-              "ds:overflow-auto ds:rounded-md ds:border ds-border-border",
+              "ds:overflow-auto ds:rounded-md ds:border ds:border-border",
               s && "ds:blur-sm"
             ),
             children: /* @__PURE__ */ i(b, { children: [

package/dist/esm/components/Table/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","sources":["../../../../src/components/Table/data-table.tsx"],"sourcesContent":["import { flexRender, type Table as TanstackTable } from \"@tanstack/react-table\";\nimport type * as React from \"react\";\n\nimport { DataTablePagination } from \"./data-table-pagination\";\nimport {\n  cn,\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@dsui/ui\";\nimport { getCommonPinningStyles } from \"@/utils/data-table\";\nimport { DataTableColumnHeader } from \"./data-table-column-header\";\n\nexport interface DataTableProps<TData> extends React.ComponentProps<\"div\"> {\n  table: TanstackTable<TData>;\n  actionBar?: React.ReactNode;\n  pagination?:\n    | boolean\n    | Omit<React.ComponentProps<typeof DataTablePagination<TData>>, \"table\">;\n  sticky?: boolean | { offsetHeader?: number; offsetScroll?: number };\n  bordered?: boolean;\n  loading?: boolean;\n  footer?: (currentPageData: TData[]) => React.ReactNode;\n}\n\nexport function DataTable<TData>({\n  table,\n  actionBar,\n  children,\n  className,\n  pagination = true,\n  sticky,\n  bordered,\n  loading,\n  footer,\n  ...props\n}: DataTableProps<TData>) {\n  return (\n    <div\n      className={cn(\n        \"ds:flex ds:w-full ds:flex-col ds:gap-2.5 ds:relative\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {loading && (\n        <div className=\"ds:absolute ds:inset-0 ds:bg-background/50 ds:flex ds:items-center ds:justify-center ds:z-20\">\n          Loading...\n        </div>\n      )}\n      <div\n        className={cn(\n          \"ds:overflow-auto ds:rounded-md ds:border ds-border-border\",\n          loading && \"ds:blur-sm\"\n        )}\n      >\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead\n                    key={header.id}\n                    colSpan={header.colSpan}\n                    style={{\n                      ...getCommonPinningStyles({ column: header.column }),\n                    }}\n                  >\n                    {header.isPlaceholder ? null : header.column.columnDef\n                        .header ? (\n                      typeof header.column.columnDef.header === \"function\" ? (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )\n                      ) : (\n                        <DataTableColumnHeader column={header.column} />\n                      )\n                    ) : null}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      key={cell.id}\n                      style={{\n                        ...getCommonPinningStyles({ column: cell.column }),\n                      }}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={table.getAllColumns().length}\n                  className=\"ds:h-24 ds:text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n          {footer && (\n            <tfoot>\n              <TableRow>\n                <TableCell colSpan={table.getAllColumns().length}>\n                  {footer(table.getRowModel().rows.map((row) => row.original))}\n                </TableCell>\n              </TableRow>\n            </tfoot>\n          )}\n        </Table>\n      </div>\n      <div className=\"ds:flex ds:flex-col ds:gap-2.5\">\n        {pagination && (\n          <DataTablePagination\n            table={table}\n            {...(pagination === true ? {} : pagination)}\n          />\n        )}\n        {actionBar &&\n          table.getFilteredSelectedRowModel().rows.length > 0 &&\n          actionBar}\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTable","table","actionBar","children","className","pagination","sticky","bordered","loading","footer","props","jsxs","cn","jsx","Table","TableHeader","headerGroup","TableRow","header","TableHead","getCommonPinningStyles","flexRender","DataTableColumnHeader","TableBody","row","cell","TableCell","DataTablePagination"],"mappings":"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"}
+{"version":3,"file":"data-table.js","sources":["../../../../src/components/Table/data-table.tsx"],"sourcesContent":["import { flexRender, type Table as TanstackTable } from \"@tanstack/react-table\";\nimport type * as React from \"react\";\n\nimport { DataTablePagination } from \"./data-table-pagination\";\nimport {\n  cn,\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@dsui/ui\";\nimport { getCommonPinningStyles } from \"@/utils/data-table\";\nimport { DataTableColumnHeader } from \"./data-table-column-header\";\n\nexport interface DataTableProps<TData> extends React.ComponentProps<\"div\"> {\n  table: TanstackTable<TData>;\n  actionBar?: React.ReactNode;\n  pagination?:\n    | boolean\n    | Omit<React.ComponentProps<typeof DataTablePagination<TData>>, \"table\">;\n  sticky?: boolean | { offsetHeader?: number; offsetScroll?: number };\n  bordered?: boolean;\n  loading?: boolean;\n  footer?: (currentPageData: TData[]) => React.ReactNode;\n}\n\nexport function DataTable<TData>({\n  table,\n  actionBar,\n  children,\n  className,\n  pagination = true,\n  sticky,\n  bordered,\n  loading,\n  footer,\n  ...props\n}: DataTableProps<TData>) {\n  return (\n    <div\n      className={cn(\n        \"ds:flex ds:w-full ds:flex-col ds:gap-2.5 ds:relative\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {loading && (\n        <div className=\"ds:absolute ds:inset-0 ds:bg-background/50 ds:flex ds:items-center ds:justify-center ds:z-20\">\n          Loading...\n        </div>\n      )}\n      <div\n        className={cn(\n          \"ds:overflow-auto ds:rounded-md ds:border ds:border-border\",\n          loading && \"ds:blur-sm\"\n        )}\n      >\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead\n                    key={header.id}\n                    colSpan={header.colSpan}\n                    style={{\n                      ...getCommonPinningStyles({ column: header.column }),\n                    }}\n                  >\n                    {header.isPlaceholder ? null : header.column.columnDef\n                        .header ? (\n                      typeof header.column.columnDef.header === \"function\" ? (\n                        flexRender(\n                          header.column.columnDef.header,\n                          header.getContext()\n                        )\n                      ) : (\n                        <DataTableColumnHeader column={header.column} />\n                      )\n                    ) : null}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {table.getRowModel().rows?.length ? (\n              table.getRowModel().rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  data-state={row.getIsSelected() && \"selected\"}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell\n                      key={cell.id}\n                      style={{\n                        ...getCommonPinningStyles({ column: cell.column }),\n                      }}\n                    >\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext()\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            ) : (\n              <TableRow>\n                <TableCell\n                  colSpan={table.getAllColumns().length}\n                  className=\"ds:h-24 ds:text-center\"\n                >\n                  No results.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n          {footer && (\n            <tfoot>\n              <TableRow>\n                <TableCell colSpan={table.getAllColumns().length}>\n                  {footer(table.getRowModel().rows.map((row) => row.original))}\n                </TableCell>\n              </TableRow>\n            </tfoot>\n          )}\n        </Table>\n      </div>\n      <div className=\"ds:flex ds:flex-col ds:gap-2.5\">\n        {pagination && (\n          <DataTablePagination\n            table={table}\n            {...(pagination === true ? {} : pagination)}\n          />\n        )}\n        {actionBar &&\n          table.getFilteredSelectedRowModel().rows.length > 0 &&\n          actionBar}\n      </div>\n    </div>\n  );\n}\n"],"names":["DataTable","table","actionBar","children","className","pagination","sticky","bordered","loading","footer","props","jsxs","cn","jsx","Table","TableHeader","headerGroup","TableRow","header","TableHead","getCommonPinningStyles","flexRender","DataTableColumnHeader","TableBody","row","cell","TableCell","DataTablePagination"],"mappings":"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"}

package/dist/esm/components/Table/select-column.js

@@ -0,0 +1,33 @@
+import { jsx as l } from "react/jsx-runtime";
+import c from "../Checkbox/Checkbox.js";
+function n(s) {
+  return {
+    id: "select",
+    header: ({ table: e }) => /* @__PURE__ */ l("div", { className: "ds:flex ds:items-center ds:justify-center", children: /* @__PURE__ */ l(
+      c,
+      {
+        checked: e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected() && "indeterminate",
+        onCheckedChange: (t) => e.toggleAllPageRowsSelected(!!t),
+        "aria-label": "Select all"
+      }
+    ) }),
+    cell: ({ row: e }) => /* @__PURE__ */ l("div", { className: "ds:flex ds:items-center ds:justify-center", children: /* @__PURE__ */ l(
+      c,
+      {
+        checked: e.getIsSelected(),
+        onCheckedChange: (t) => e.toggleSelected(!!t),
+        "aria-label": "Select row"
+      }
+    ) }),
+    size: 36,
+    enableSorting: !1,
+    enableHiding: !1,
+    enableColumnFilter: !1,
+    ...s
+  };
+}
+const i = n;
+export {
+  i as selectColumn
+};
+//# sourceMappingURL=select-column.js.map

package/dist/esm/components/Table/select-column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-column.js","sources":["../../../../src/components/Table/select-column.tsx"],"sourcesContent":["import type {\n  CellContext,\n  ColumnDef,\n  HeaderContext,\n} from \"@tanstack/react-table\";\nimport { Checkbox } from \"@/components/Checkbox\";\n\nfunction createSelectColumn<TData>(\n  props?: Partial<ColumnDef<TData>>\n): ColumnDef<TData> {\n  return {\n    id: \"select\",\n    header: ({ table }: HeaderContext<TData, unknown>) => (\n      <div className=\"ds:flex ds:items-center ds:justify-center\">\n        <Checkbox\n          checked={\n            table.getIsAllPageRowsSelected() ||\n            (table.getIsSomePageRowsSelected() && \"indeterminate\")\n          }\n          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}\n          aria-label=\"Select all\"\n        />\n      </div>\n    ),\n    cell: ({ row }: CellContext<TData, unknown>) => (\n      <div className=\"ds:flex ds:items-center ds:justify-center\">\n        <Checkbox\n          checked={row.getIsSelected()}\n          onCheckedChange={(value) => row.toggleSelected(!!value)}\n          aria-label=\"Select row\"\n        />\n      </div>\n    ),\n    size: 36,\n    enableSorting: false,\n    enableHiding: false,\n    enableColumnFilter: false,\n    ...props,\n  };\n}\n\nexport const selectColumn = createSelectColumn;\n"],"names":["createSelectColumn","props","table","jsx","Checkbox","value","row","selectColumn"],"mappings":";;AAOA,SAASA,EACPC,GACkB;AAClB,SAAO;AAAA,IACL,IAAI;AAAA,IACJ,QAAQ,CAAC,EAAE,OAAAC,EAAA,MACT,gBAAAC,EAAC,OAAA,EAAI,WAAU,6CACb,UAAA,gBAAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SACEF,EAAM,yBAAA,KACLA,EAAM,+BAA+B;AAAA,QAExC,iBAAiB,CAACG,MAAUH,EAAM,0BAA0B,CAAC,CAACG,CAAK;AAAA,QACnE,cAAW;AAAA,MAAA;AAAA,IAAA,GAEf;AAAA,IAEF,MAAM,CAAC,EAAE,KAAAC,EAAA,MACP,gBAAAH,EAAC,OAAA,EAAI,WAAU,6CACb,UAAA,gBAAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAASE,EAAI,cAAA;AAAA,QACb,iBAAiB,CAACD,MAAUC,EAAI,eAAe,CAAC,CAACD,CAAK;AAAA,QACtD,cAAW;AAAA,MAAA;AAAA,IAAA,GAEf;AAAA,IAEF,MAAM;AAAA,IACN,eAAe;AAAA,IACf,cAAc;AAAA,IACd,oBAAoB;AAAA,IACpB,GAAGJ;AAAA,EAAA;AAEP;AAEO,MAAMM,IAAeP;"}

package/dist/esm/hooks/use-data-table.js

@@ -1,95 +1,97 @@
-import { useReactTable as oe, getFacetedMinMaxValues as ne, getFacetedUniqueValues as ie, getFacetedRowModel as se, getSortedRowModel as ae, getPaginationRowModel as re, getFilteredRowModel as le, getCoreRowModel as ce } from "@tanstack/react-table";
-import { useQueryState as A, parseAsInteger as v, parseAsArrayOf as ue, parseAsString as Y, useQueryStates as ge } from "nuqs";
+import { useReactTable as ie, getFacetedMinMaxValues as se, getFacetedUniqueValues as ae, getFacetedRowModel as re, getSortedRowModel as le, getPaginationRowModel as ce, getFilteredRowModel as ue, getCoreRowModel as ge } from "@tanstack/react-table";
+import { useQueryState as A, parseAsInteger as v, parseAsArrayOf as de, parseAsString as Y, useQueryStates as fe } from "nuqs";
 import * as t from "react";
-import { useDebouncedCallback as de } from "./use-debounced-callback.js";
-import { getSortingStateParser as fe } from "../utils/parsers.js";
-const pe = "page", me = "perPage", Se = "sort", we = "filters", be = "joinOperator", Me = ",", Re = 300, ye = 50;
-function Ee(j) {
+import { useDebouncedCallback as pe } from "./use-debounced-callback.js";
+import { getSortingStateParser as me } from "../utils/parsers.js";
+const Se = "page", we = "perPage", be = "sort", Ce = "filters", Me = "joinOperator", Re = ",", ye = 300, Pe = 50;
+function Ke(j) {
   const {
     columns: g,
     pageCount: U,
-    initialState: a,
+    initialState: s,
     queryKeys: d,
-    history: E = "replace",
-    debounceMs: p = Re,
-    throttleMs: S = ye,
-    clearOnDefault: K = !1,
+    history: O = "replace",
+    debounceMs: p = ye,
+    throttleMs: S = Pe,
+    clearOnDefault: E = !1,
     enableAdvancedFilter: r = !1,
-    scroll: O = !1,
+    scroll: K = !1,
     shallow: w = !0,
     startTransition: x,
     enableNuqs: i = !1,
     ...b
-  } = j, I = d?.page ?? pe, T = d?.perPage ?? me, _ = d?.sort ?? Se, V = d?.filters ?? we, k = d?.joinOperator ?? be, c = t.useMemo(
+  } = j, I = d?.page ?? Se, T = d?.perPage ?? we, _ = d?.sort ?? be, V = d?.filters ?? Ce, k = d?.joinOperator ?? Me, c = t.useMemo(
     () => ({
-      history: E,
-      scroll: O,
+      history: O,
+      scroll: K,
       shallow: w,
       throttleMs: S,
       debounceMs: p,
-      clearOnDefault: K,
+      clearOnDefault: E,
       startTransition: x
     }),
     [
-      E,
       O,
+      K,
       w,
       S,
       p,
-      K,
+      E,
       x
     ]
   ), [B, N] = t.useState(
-    a?.rowSelection ?? {}
-  ), [G, H] = t.useState(a?.columnVisibility ?? {}), [M, m] = i ? A(
+    s?.rowSelection ?? {}
+  ), [G, H] = t.useState(s?.columnVisibility ?? {}), [L, Q] = t.useState(
+    s?.columnOrder ?? []
+  ), [C, m] = i ? A(
     I,
     v.withOptions(c).withDefault(1)
-  ) : t.useState(a?.pagination?.pageIndex ?? 0), [z, R] = i ? A(
+  ) : t.useState(s?.pagination?.pageIndex ?? 0), [z, M] = i ? A(
     T,
-    v.withOptions(c).withDefault(a?.pagination?.pageSize ?? 10)
-  ) : t.useState(a?.pagination?.pageSize ?? 10), y = t.useMemo(() => ({
-    pageIndex: i ? M - 1 : M,
+    v.withOptions(c).withDefault(s?.pagination?.pageSize ?? 10)
+  ) : t.useState(s?.pagination?.pageSize ?? 10), R = t.useMemo(() => ({
+    pageIndex: i ? C - 1 : C,
     // zero-based index
     pageSize: z
-  }), [M, z, i]), L = t.useCallback(
+  }), [C, z, i]), Z = t.useCallback(
     (e) => {
       if (typeof e == "function") {
-        const o = e(y);
+        const o = e(R);
         m(
           i ? o.pageIndex + 1 : o.pageIndex
-        ), R(o.pageSize);
+        ), M(o.pageSize);
       } else
         m(
           i ? e.pageIndex + 1 : e.pageIndex
-        ), R(e.pageSize);
+        ), M(e.pageSize);
     },
-    [y, m, R, i]
-  ), Q = t.useMemo(() => new Set(
+    [R, m, M, i]
+  ), J = t.useMemo(() => new Set(
     g.map((e) => e.id).filter(Boolean)
-  ), [g]), [C, P] = i ? A(
+  ), [g]), [y, P] = i ? A(
     _,
-    fe(Q).withOptions(c).withDefault(a?.sorting ?? [])
-  ) : t.useState(a?.sorting ?? []), Z = t.useCallback(
+    me(J).withOptions(c).withDefault(s?.sorting ?? [])
+  ) : t.useState(s?.sorting ?? []), W = t.useCallback(
     (e) => {
       if (typeof e == "function") {
-        const o = e(C);
+        const o = e(y);
         P(o);
       } else
         P(e);
     },
-    [C, P]
-  ), u = t.useMemo(() => r ? [] : g.filter((e) => e.enableColumnFilter), [g, r]), J = t.useMemo(() => r ? {} : u.reduce((e, o) => (o.meta?.variant === "multiSelect" ? e[o.id ?? ""] = ue(
+    [y, P]
+  ), u = t.useMemo(() => r ? [] : g.filter((e) => e.enableColumnFilter), [g, r]), X = t.useMemo(() => r ? {} : u.reduce((e, o) => (o.meta?.variant === "multiSelect" ? e[o.id ?? ""] = de(
     Y,
-    Me
-  ).withOptions(c) : e[o.id ?? ""] = Y.withOptions(c), e), {}), [u, c, r]), [D, W] = i ? ge(J) : t.useState({}), q = de(
+    Re
+  ).withOptions(c) : e[o.id ?? ""] = Y.withOptions(c), e), {}), [u, c, r]), [D, $] = i ? fe(X) : t.useState({}), q = pe(
     (e) => {
-      m(1), W(e);
+      m(1), $(e);
     },
     p
-  ), X = t.useMemo(() => r ? [] : Object.entries(D).reduce(
+  ), ee = t.useMemo(() => r ? [] : Object.entries(D).reduce(
     (e, [o, n]) => {
       if (n !== null) {
-        const s = u.find((f) => f.id === o)?.meta?.variant === "multiSelect", l = Array.isArray(n) ? n : s && typeof n == "string" && /[^a-zA-Z0-9]/.test(n) ? n.split(/[^a-zA-Z0-9]+/).filter(Boolean) : s ? [n] : n;
+        const a = u.find((f) => f.id === o)?.meta?.variant === "multiSelect", l = Array.isArray(n) ? n : a && typeof n == "string" && /[^a-zA-Z0-9]/.test(n) ? n.split(/[^a-zA-Z0-9]+/).filter(Boolean) : a ? [n] : n;
         e.push({
           id: o,
           value: l
@@ -98,19 +100,19 @@ function Ee(j) {
       return e;
     },
     []
-  ), [D, r, u]), [$, ee] = t.useState(X), te = t.useCallback(
+  ), [D, r, u]), [te, oe] = t.useState(ee), ne = t.useCallback(
     (e) => {
-      r || ee((o) => {
-        const n = typeof e == "function" ? e(o) : e, F = n.reduce((s, l) => {
+      r || oe((o) => {
+        const n = typeof e == "function" ? e(o) : e, F = n.reduce((a, l) => {
           const f = u.find((h) => h.id === l.id);
           if (f) {
             const h = f.meta?.variant === "multiSelect";
-            s[l.id] = l.value;
+            a[l.id] = l.value;
           }
-          return console.log("filterParsers", f, s), s;
+          return console.log("filterParsers", f, a), a;
         }, {});
-        for (const s of o)
-          n.some((l) => l.id === s.id) || (F[s.id] = null);
+        for (const a of o)
+          n.some((l) => l.id === a.id) || (F[a.id] = null);
         return i && q(F), n;
       });
     },
@@ -121,15 +123,16 @@ function Ee(j) {
       i
     ]
   );
-  return { table: oe({
-    initialState: a,
+  return { table: ie({
+    initialState: s,
     pageCount: U,
     state: {
-      pagination: y,
-      sorting: C,
+      pagination: R,
+      sorting: y,
       columnVisibility: G,
+      columnOrder: L,
       rowSelection: B,
-      columnFilters: $
+      columnFilters: te
     },
     defaultColumn: {
       ...b.defaultColumn,
@@ -140,17 +143,18 @@ function Ee(j) {
     },
     enableRowSelection: !0,
     onRowSelectionChange: N,
-    onPaginationChange: L,
-    onSortingChange: Z,
-    onColumnFiltersChange: te,
+    onPaginationChange: Z,
+    onSortingChange: W,
+    onColumnFiltersChange: ne,
     onColumnVisibilityChange: H,
-    getCoreRowModel: ce(),
-    getFilteredRowModel: le(),
-    getPaginationRowModel: re(),
-    getSortedRowModel: ae(),
-    getFacetedRowModel: se(),
-    getFacetedUniqueValues: ie(),
-    getFacetedMinMaxValues: ne(),
+    onColumnOrderChange: Q,
+    getCoreRowModel: ge(),
+    getFilteredRowModel: ue(),
+    getPaginationRowModel: ce(),
+    getSortedRowModel: le(),
+    getFacetedRowModel: re(),
+    getFacetedUniqueValues: ae(),
+    getFacetedMinMaxValues: se(),
     meta: {
       ...b.meta,
       queryKeys: {
@@ -166,6 +170,6 @@ function Ee(j) {
   }), shallow: w, debounceMs: p, throttleMs: S };
 }
 export {
-  Ee as useDataTable
+  Ke as useDataTable
 };
 //# sourceMappingURL=use-data-table.js.map