@tetrascience-npm/tetrascience-react-ui 0.5.0-beta.55.1 → 0.5.0-beta.58.1

package/dist/components/ui/data-table/data-table-filter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-filter.cjs","sources":["../../../../src/components/ui/data-table/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport { ListFilterIcon, PlusIcon, XIcon } from \"lucide-react\"\nimport { Popover } from \"radix-ui\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport type { FilterColumnConfig, FilterCondition, FilterOperator } from \"./data-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\n// ---------------------------------------------------------------------------\n// Operator metadata\n// ---------------------------------------------------------------------------\n\nconst OPERATOR_LABELS: Record<FilterOperator, string> = {\n  contains:     \"contains\",\n  equals:       \"equals\",\n  not_equals:   \"not equals\",\n  starts_with:  \"starts with\",\n  ends_with:    \"ends with\",\n  is_empty:     \"is empty\",\n  is_not_empty: \"is not empty\",\n}\n\nconst VALUE_FREE_OPERATORS: FilterOperator[] = [\"is_empty\", \"is_not_empty\"]\n\nconst DEFAULT_OPERATORS: FilterOperator[] = [\n  \"contains\",\n  \"equals\",\n  \"not_equals\",\n  \"starts_with\",\n  \"ends_with\",\n  \"is_empty\",\n  \"is_not_empty\",\n]\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getColumnLabel(\n  colId: string,\n  columnLabels: Record<string, string>,\n\n  col: any,\n): string {\n  return (\n    columnLabels[colId] ??\n    (col?.columnDef?.meta as { label?: string } | undefined)?.label ??\n    (typeof col?.columnDef?.header === \"string\" ? col.columnDef.header : undefined) ??\n    colId\n  )\n}\n\nfunction makeCondition(\n  columnId: string,\n  allowedOperators?: FilterOperator[],\n): FilterCondition {\n  const operator = allowedOperators?.[0] ?? \"contains\"\n  return { id: crypto.randomUUID(), columnId, operator, value: \"\" }\n}\n\n// ---------------------------------------------------------------------------\n// DataTableFilter\n// ---------------------------------------------------------------------------\n\ninterface DataTableFilterProps {\n  className?: string\n}\n\nfunction DataTableFilter({ className }: DataTableFilterProps) {\n  const { table, columnLabels, filters, setFilters, filterConfig, enableFiltering } =\n    useDataTable()\n\n  if (!enableFiltering) return null\n\n  const allLeafColumns = table.getAllLeafColumns()\n\n  const resolvedColumns: FilterColumnConfig[] =\n    filterConfig.length > 0\n      ? filterConfig\n      : allLeafColumns\n          .filter((col) => \"accessorKey\" in col.columnDef || \"accessorFn\" in col.columnDef)\n          .map((col) => ({ columnId: col.id }))\n\n  const firstColumn = resolvedColumns[0]\n  const firstColumnId = firstColumn?.columnId ?? \"\"\n\n  function addFilter() {\n    setFilters([...filters, makeCondition(firstColumnId, firstColumn?.operators)])\n  }\n\n  function removeFilter(id: string) {\n    setFilters(filters.filter((f) => f.id !== id))\n  }\n\n  function updateFilter(id: string, patch: Partial<FilterCondition>) {\n    setFilters(filters.map((f) => (f.id === id ? { ...f, ...patch } : f)))\n  }\n\n  function clearAll() {\n    setFilters([])\n  }\n\n  const activeCount = filters.length\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          data-slot=\"data-table-filter\"\n          className={cn(className)}\n          aria-label={activeCount > 0 ? `Filter (${activeCount} active)` : \"Filter\"}\n        >\n          <ListFilterIcon className=\"size-3.5\" />\n          Filter\n          {activeCount > 0 && (\n            <span className=\"flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground\">\n              {activeCount}\n            </span>\n          )}\n        </Button>\n      </Popover.Trigger>\n\n      <Popover.Portal>\n        <Popover.Content\n          data-slot=\"data-table-filter-panel\"\n          align=\"end\"\n          sideOffset={4}\n          className={cn(\n            \"z-50 min-w-80 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md outline-none\",\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n            \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          )}\n        >\n          <div className=\"flex flex-col gap-2\">\n            {filters.map((condition) => {\n              const colConfig = resolvedColumns.find((c) => c.columnId === condition.columnId)\n              const operators = colConfig?.operators ?? DEFAULT_OPERATORS\n              const isValueFree = VALUE_FREE_OPERATORS.includes(condition.operator)\n\n              return (\n                <div key={condition.id} className=\"flex items-center gap-2\">\n                  {/* Column selector */}\n                  <Select\n                    value={condition.columnId}\n                    onValueChange={(v) => {\n                      const nextConfig = resolvedColumns.find((c) => c.columnId === v)\n                      const nextOperators = nextConfig?.operators ?? DEFAULT_OPERATORS\n                      const nextOperator = nextOperators.includes(condition.operator)\n                        ? condition.operator\n                        : (nextOperators[0] ?? \"contains\")\n                      updateFilter(condition.id, {\n                        columnId: v,\n                        operator: nextOperator,\n                        value: \"\",\n                      })\n                    }}\n                  >\n                    <SelectTrigger size=\"sm\" className=\"w-36\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {resolvedColumns.map((c) => {\n                        const col = allLeafColumns.find((lc) => lc.id === c.columnId)\n                        return (\n                          <SelectItem key={c.columnId} value={c.columnId}>\n                            {c.label ?? getColumnLabel(c.columnId, columnLabels, col)}\n                          </SelectItem>\n                        )\n                      })}\n                    </SelectContent>\n                  </Select>\n\n                  {/* Operator selector */}\n                  <Select\n                    value={condition.operator}\n                    onValueChange={(v) =>\n                      updateFilter(condition.id, {\n                        operator: v as FilterOperator,\n                        value: \"\",\n                      })\n                    }\n                  >\n                    <SelectTrigger size=\"sm\" className=\"w-32\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {operators.map((op) => (\n                        <SelectItem key={op} value={op}>\n                          {OPERATOR_LABELS[op]}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n\n                  {/* Value input — hidden for value-free operators */}\n                  {isValueFree ? (\n                    <div className=\"h-8 w-40\" aria-hidden />\n                  ) : (\n                    <Input\n                      className=\"w-40\"\n                      placeholder=\"Value…\"\n                      value={condition.value}\n                      onChange={(e) => updateFilter(condition.id, { value: e.target.value })}\n                    />\n                  )}\n\n                  {/* Remove button */}\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"size-8 shrink-0 text-muted-foreground hover:text-foreground\"\n                    onClick={() => removeFilter(condition.id)}\n                    aria-label=\"Remove filter\"\n                  >\n                    <XIcon className=\"size-3.5\" />\n                  </Button>\n                </div>\n              )\n            })}\n\n            <div className=\"flex items-center gap-2\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={addFilter}\n                disabled={resolvedColumns.length === 0}\n              >\n                <PlusIcon className=\"size-3.5\" />\n                Add filter\n              </Button>\n              {filters.length > 0 && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"text-muted-foreground\"\n                  onClick={clearAll}\n                >\n                  Clear all\n                </Button>\n              )}\n            </div>\n          </div>\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nDataTableFilter.displayName = \"DataTableFilter\"\n\nexport { DataTableFilter }\nexport type { DataTableFilterProps }\n"],"names":["OPERATOR_LABELS","VALUE_FREE_OPERATORS","DEFAULT_OPERATORS","getColumnLabel","colId","columnLabels","col","makeCondition","columnId","allowedOperators","operator","DataTableFilter","className","table","filters","setFilters","filterConfig","enableFiltering","useDataTable","allLeafColumns","resolvedColumns","firstColumn","firstColumnId","addFilter","removeFilter","id","f","updateFilter","patch","clearAll","activeCount","jsxs","Popover","jsx","Button","cn","ListFilterIcon","condition","operators","c","isValueFree","Select","v","nextOperators","nextOperator","SelectTrigger","SelectValue","SelectContent","lc","SelectItem","op","Input","e","XIcon","PlusIcon"],"mappings":"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"}
+{"version":3,"file":"data-table-filter.cjs","sources":["../../../../src/components/ui/data-table/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport { ListFilterIcon, PlusIcon, XIcon } from \"lucide-react\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport type { FilterColumnConfig, FilterCondition, FilterOperator } from \"./data-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\n// ---------------------------------------------------------------------------\n// Operator metadata\n// ---------------------------------------------------------------------------\n\nconst OPERATOR_LABELS: Record<FilterOperator, string> = {\n  contains:     \"contains\",\n  equals:       \"equals\",\n  not_equals:   \"not equals\",\n  starts_with:  \"starts with\",\n  ends_with:    \"ends with\",\n  is_empty:     \"is empty\",\n  is_not_empty: \"is not empty\",\n}\n\nconst VALUE_FREE_OPERATORS: FilterOperator[] = [\"is_empty\", \"is_not_empty\"]\n\nconst DEFAULT_OPERATORS: FilterOperator[] = [\n  \"contains\",\n  \"equals\",\n  \"not_equals\",\n  \"starts_with\",\n  \"ends_with\",\n  \"is_empty\",\n  \"is_not_empty\",\n]\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getColumnLabel(\n  colId: string,\n  columnLabels: Record<string, string>,\n\n  col: any,\n): string {\n  return (\n    columnLabels[colId] ??\n    (col?.columnDef?.meta as { label?: string } | undefined)?.label ??\n    (typeof col?.columnDef?.header === \"string\" ? col.columnDef.header : undefined) ??\n    colId\n  )\n}\n\nfunction makeCondition(\n  columnId: string,\n  allowedOperators?: FilterOperator[],\n): FilterCondition {\n  const operator = allowedOperators?.[0] ?? \"contains\"\n  return { id: crypto.randomUUID(), columnId, operator, value: \"\" }\n}\n\n// ---------------------------------------------------------------------------\n// DataTableFilter\n// ---------------------------------------------------------------------------\n\ninterface DataTableFilterProps {\n  className?: string\n}\n\nfunction DataTableFilter({ className }: DataTableFilterProps) {\n  const { table, columnLabels, filters, setFilters, filterConfig, enableFiltering } =\n    useDataTable()\n\n  if (!enableFiltering) return null\n\n  const allLeafColumns = table.getAllLeafColumns()\n\n  const resolvedColumns: FilterColumnConfig[] =\n    filterConfig.length > 0\n      ? filterConfig\n      : allLeafColumns\n          .filter((col) => \"accessorKey\" in col.columnDef || \"accessorFn\" in col.columnDef)\n          .map((col) => ({ columnId: col.id }))\n\n  const firstColumn = resolvedColumns[0]\n  const firstColumnId = firstColumn?.columnId ?? \"\"\n\n  function addFilter() {\n    setFilters([...filters, makeCondition(firstColumnId, firstColumn?.operators)])\n  }\n\n  function removeFilter(id: string) {\n    setFilters(filters.filter((f) => f.id !== id))\n  }\n\n  function updateFilter(id: string, patch: Partial<FilterCondition>) {\n    setFilters(filters.map((f) => (f.id === id ? { ...f, ...patch } : f)))\n  }\n\n  function clearAll() {\n    setFilters([])\n  }\n\n  const activeCount = filters.length\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          data-slot=\"data-table-filter\"\n          className={cn(className)}\n          aria-label={activeCount > 0 ? `Filter (${activeCount} active)` : \"Filter\"}\n        >\n          <ListFilterIcon className=\"size-3.5\" />\n          Filter\n          {activeCount > 0 && (\n            <span className=\"flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground\">\n              {activeCount}\n            </span>\n          )}\n        </Button>\n      </PopoverTrigger>\n\n      <PopoverContent data-slot=\"data-table-filter-panel\" align=\"end\" className=\"min-w-80\">\n          <div className=\"flex flex-col gap-2\">\n            {filters.map((condition) => {\n              const colConfig = resolvedColumns.find((c) => c.columnId === condition.columnId)\n              const operators = colConfig?.operators ?? DEFAULT_OPERATORS\n              const isValueFree = VALUE_FREE_OPERATORS.includes(condition.operator)\n\n              return (\n                <div key={condition.id} className=\"flex items-center gap-2\">\n                  {/* Column selector */}\n                  <Select\n                    value={condition.columnId}\n                    onValueChange={(v) => {\n                      const nextConfig = resolvedColumns.find((c) => c.columnId === v)\n                      const nextOperators = nextConfig?.operators ?? DEFAULT_OPERATORS\n                      const nextOperator = nextOperators.includes(condition.operator)\n                        ? condition.operator\n                        : (nextOperators[0] ?? \"contains\")\n                      updateFilter(condition.id, {\n                        columnId: v,\n                        operator: nextOperator,\n                        value: \"\",\n                      })\n                    }}\n                  >\n                    <SelectTrigger size=\"sm\" className=\"w-36\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {resolvedColumns.map((c) => {\n                        const col = allLeafColumns.find((lc) => lc.id === c.columnId)\n                        return (\n                          <SelectItem key={c.columnId} value={c.columnId}>\n                            {c.label ?? getColumnLabel(c.columnId, columnLabels, col)}\n                          </SelectItem>\n                        )\n                      })}\n                    </SelectContent>\n                  </Select>\n\n                  {/* Operator selector */}\n                  <Select\n                    value={condition.operator}\n                    onValueChange={(v) =>\n                      updateFilter(condition.id, {\n                        operator: v as FilterOperator,\n                        value: \"\",\n                      })\n                    }\n                  >\n                    <SelectTrigger size=\"sm\" className=\"w-32\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {operators.map((op) => (\n                        <SelectItem key={op} value={op}>\n                          {OPERATOR_LABELS[op]}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n\n                  {/* Value input — hidden for value-free operators */}\n                  {isValueFree ? (\n                    <div className=\"h-8 w-40\" aria-hidden />\n                  ) : (\n                    <Input\n                      className=\"w-40\"\n                      placeholder=\"Value…\"\n                      value={condition.value}\n                      onChange={(e) => updateFilter(condition.id, { value: e.target.value })}\n                    />\n                  )}\n\n                  {/* Remove button */}\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"size-8 shrink-0 text-muted-foreground hover:text-foreground\"\n                    onClick={() => removeFilter(condition.id)}\n                    aria-label=\"Remove filter\"\n                  >\n                    <XIcon className=\"size-3.5\" />\n                  </Button>\n                </div>\n              )\n            })}\n\n            <div className=\"flex items-center gap-2\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={addFilter}\n                disabled={resolvedColumns.length === 0}\n              >\n                <PlusIcon className=\"size-3.5\" />\n                Add filter\n              </Button>\n              {filters.length > 0 && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"text-muted-foreground\"\n                  onClick={clearAll}\n                >\n                  Clear all\n                </Button>\n              )}\n            </div>\n          </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nDataTableFilter.displayName = \"DataTableFilter\"\n\nexport { DataTableFilter }\nexport type { DataTableFilterProps }\n"],"names":["OPERATOR_LABELS","VALUE_FREE_OPERATORS","DEFAULT_OPERATORS","getColumnLabel","colId","columnLabels","col","makeCondition","columnId","allowedOperators","operator","DataTableFilter","className","table","filters","setFilters","filterConfig","enableFiltering","useDataTable","allLeafColumns","resolvedColumns","firstColumn","firstColumnId","addFilter","removeFilter","id","f","updateFilter","patch","clearAll","activeCount","Popover","jsx","PopoverTrigger","jsxs","Button","cn","ListFilterIcon","PopoverContent","condition","operators","c","isValueFree","Select","v","nextOperators","nextOperator","SelectTrigger","SelectValue","SelectContent","lc","SelectItem","op","Input","e","XIcon","PlusIcon"],"mappings":"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"}

package/dist/components/ui/data-table/data-table-filter.js

@@ -1,12 +1,12 @@
-import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { ListFilterIcon as q, XIcon as P, PlusIcon as V } from "lucide-react";
-import { Popover as f } from "radix-ui";
-import { useDataTable as k } from "./data-table.js";
-import { Button as h } from "../button.js";
-import { Input as U } from "../input.js";
-import { Select as y, SelectTrigger as _, SelectValue as I, SelectContent as N, SelectItem as F } from "../select.js";
-import { cn as z } from "../../../lib/utils.js";
-const j = {
+import { jsxs as a, jsx as l } from "react/jsx-runtime";
+import { ListFilterIcon as R, XIcon as S, PlusIcon as P } from "lucide-react";
+import { useDataTable as q } from "./data-table.js";
+import { Button as f } from "../button.js";
+import { Input as V } from "../input.js";
+import { Popover as k, PopoverTrigger as U, PopoverContent as j } from "../popover.js";
+import { Select as y, SelectTrigger as _, SelectValue as x, SelectContent as I, SelectItem as N } from "../select.js";
+import { cn as B } from "../../../lib/utils.js";
+const K = {
   contains: "contains",
   equals: "equals",
   not_equals: "not equals",
@@ -14,7 +14,7 @@ const j = {
   ends_with: "ends with",
   is_empty: "is empty",
   is_not_empty: "is not empty"
-}, B = ["is_empty", "is_not_empty"], w = [
+}, X = ["is_empty", "is_not_empty"], F = [
   "contains",
   "equals",
   "not_equals",
@@ -23,156 +23,141 @@ const j = {
   "is_empty",
   "is_not_empty"
 ];
-function K(o, s, n) {
-  return s[o] ?? n?.columnDef?.meta?.label ?? (typeof n?.columnDef?.header == "string" ? n.columnDef.header : void 0) ?? o;
+function $(r, s, n) {
+  return s[r] ?? n?.columnDef?.meta?.label ?? (typeof n?.columnDef?.header == "string" ? n.columnDef.header : void 0) ?? r;
 }
-function X(o, s) {
+function G(r, s) {
   const n = s?.[0] ?? "contains";
-  return { id: crypto.randomUUID(), columnId: o, operator: n, value: "" };
+  return { id: crypto.randomUUID(), columnId: r, operator: n, value: "" };
 }
-function $({ className: o }) {
-  const { table: s, columnLabels: n, filters: r, setFilters: m, filterConfig: v, enableFiltering: D } = k();
-  if (!D) return null;
-  const b = s.getAllLeafColumns(), i = v.length > 0 ? v : b.filter((e) => "accessorKey" in e.columnDef || "accessorFn" in e.columnDef).map((e) => ({ columnId: e.id })), C = i[0], A = C?.columnId ?? "";
-  function L() {
-    m([...r, X(A, C?.operators)]);
+function H({ className: r }) {
+  const { table: s, columnLabels: n, filters: o, setFilters: m, filterConfig: g, enableFiltering: w } = q();
+  if (!w) return null;
+  const v = s.getAllLeafColumns(), i = g.length > 0 ? g : v.filter((e) => "accessorKey" in e.columnDef || "accessorFn" in e.columnDef).map((e) => ({ columnId: e.id })), C = i[0], z = C?.columnId ?? "";
+  function D() {
+    m([...o, G(z, C?.operators)]);
   }
-  function O(e) {
-    m(r.filter((u) => u.id !== e));
+  function A(e) {
+    m(o.filter((d) => d.id !== e));
   }
-  function g(e, u) {
-    m(r.map((d) => d.id === e ? { ...d, ...u } : d));
+  function h(e, d) {
+    m(o.map((c) => c.id === e ? { ...c, ...d } : c));
   }
-  function R() {
+  function L() {
     m([]);
   }
-  const c = r.length;
-  return /* @__PURE__ */ l(f.Root, { children: [
-    /* @__PURE__ */ t(f.Trigger, { asChild: !0, children: /* @__PURE__ */ l(
-      h,
+  const u = o.length;
+  return /* @__PURE__ */ a(k, { children: [
+    /* @__PURE__ */ l(U, { asChild: !0, children: /* @__PURE__ */ a(
+      f,
       {
         type: "button",
         variant: "outline",
         size: "sm",
         "data-slot": "data-table-filter",
-        className: z(o),
-        "aria-label": c > 0 ? `Filter (${c} active)` : "Filter",
+        className: B(r),
+        "aria-label": u > 0 ? `Filter (${u} active)` : "Filter",
         children: [
-          /* @__PURE__ */ t(q, { className: "size-3.5" }),
+          /* @__PURE__ */ l(R, { className: "size-3.5" }),
           "Filter",
-          c > 0 && /* @__PURE__ */ t("span", { className: "flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground", children: c })
+          u > 0 && /* @__PURE__ */ l("span", { className: "flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground", children: u })
         ]
       }
     ) }),
-    /* @__PURE__ */ t(f.Portal, { children: /* @__PURE__ */ t(
-      f.Content,
-      {
-        "data-slot": "data-table-filter-panel",
-        align: "end",
-        sideOffset: 4,
-        className: z(
-          "z-50 min-w-80 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md outline-none",
-          "data-[state=open]:animate-in data-[state=closed]:animate-out",
-          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-          "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2"
+    /* @__PURE__ */ l(j, { "data-slot": "data-table-filter-panel", align: "end", className: "min-w-80", children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-2", children: [
+      o.map((e) => {
+        const c = i.find((t) => t.columnId === e.columnId)?.operators ?? F, T = X.includes(e.operator);
+        return /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ a(
+            y,
+            {
+              value: e.columnId,
+              onValueChange: (t) => {
+                const p = i.find((O) => O.columnId === t)?.operators ?? F, E = p.includes(e.operator) ? e.operator : p[0] ?? "contains";
+                h(e.id, {
+                  columnId: t,
+                  operator: E,
+                  value: ""
+                });
+              },
+              children: [
+                /* @__PURE__ */ l(_, { size: "sm", className: "w-36", children: /* @__PURE__ */ l(x, {}) }),
+                /* @__PURE__ */ l(I, { children: i.map((t) => {
+                  const b = v.find((p) => p.id === t.columnId);
+                  return /* @__PURE__ */ l(N, { value: t.columnId, children: t.label ?? $(t.columnId, n, b) }, t.columnId);
+                }) })
+              ]
+            }
+          ),
+          /* @__PURE__ */ a(
+            y,
+            {
+              value: e.operator,
+              onValueChange: (t) => h(e.id, {
+                operator: t,
+                value: ""
+              }),
+              children: [
+                /* @__PURE__ */ l(_, { size: "sm", className: "w-32", children: /* @__PURE__ */ l(x, {}) }),
+                /* @__PURE__ */ l(I, { children: c.map((t) => /* @__PURE__ */ l(N, { value: t, children: K[t] }, t)) })
+              ]
+            }
+          ),
+          T ? /* @__PURE__ */ l("div", { className: "h-8 w-40", "aria-hidden": !0 }) : /* @__PURE__ */ l(
+            V,
+            {
+              className: "w-40",
+              placeholder: "Value…",
+              value: e.value,
+              onChange: (t) => h(e.id, { value: t.target.value })
+            }
+          ),
+          /* @__PURE__ */ l(
+            f,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              className: "size-8 shrink-0 text-muted-foreground hover:text-foreground",
+              onClick: () => A(e.id),
+              "aria-label": "Remove filter",
+              children: /* @__PURE__ */ l(S, { className: "size-3.5" })
+            }
+          )
+        ] }, e.id);
+      }),
+      /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ a(
+          f,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: D,
+            disabled: i.length === 0,
+            children: [
+              /* @__PURE__ */ l(P, { className: "size-3.5" }),
+              "Add filter"
+            ]
+          }
         ),
-        children: /* @__PURE__ */ l("div", { className: "flex flex-col gap-2", children: [
-          r.map((e) => {
-            const d = i.find((a) => a.columnId === e.columnId)?.operators ?? w, T = B.includes(e.operator);
-            return /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ l(
-                y,
-                {
-                  value: e.columnId,
-                  onValueChange: (a) => {
-                    const p = i.find((S) => S.columnId === a)?.operators ?? w, E = p.includes(e.operator) ? e.operator : p[0] ?? "contains";
-                    g(e.id, {
-                      columnId: a,
-                      operator: E,
-                      value: ""
-                    });
-                  },
-                  children: [
-                    /* @__PURE__ */ t(_, { size: "sm", className: "w-36", children: /* @__PURE__ */ t(I, {}) }),
-                    /* @__PURE__ */ t(N, { children: i.map((a) => {
-                      const x = b.find((p) => p.id === a.columnId);
-                      return /* @__PURE__ */ t(F, { value: a.columnId, children: a.label ?? K(a.columnId, n, x) }, a.columnId);
-                    }) })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ l(
-                y,
-                {
-                  value: e.operator,
-                  onValueChange: (a) => g(e.id, {
-                    operator: a,
-                    value: ""
-                  }),
-                  children: [
-                    /* @__PURE__ */ t(_, { size: "sm", className: "w-32", children: /* @__PURE__ */ t(I, {}) }),
-                    /* @__PURE__ */ t(N, { children: d.map((a) => /* @__PURE__ */ t(F, { value: a, children: j[a] }, a)) })
-                  ]
-                }
-              ),
-              T ? /* @__PURE__ */ t("div", { className: "h-8 w-40", "aria-hidden": !0 }) : /* @__PURE__ */ t(
-                U,
-                {
-                  className: "w-40",
-                  placeholder: "Value…",
-                  value: e.value,
-                  onChange: (a) => g(e.id, { value: a.target.value })
-                }
-              ),
-              /* @__PURE__ */ t(
-                h,
-                {
-                  type: "button",
-                  variant: "ghost",
-                  size: "icon",
-                  className: "size-8 shrink-0 text-muted-foreground hover:text-foreground",
-                  onClick: () => O(e.id),
-                  "aria-label": "Remove filter",
-                  children: /* @__PURE__ */ t(P, { className: "size-3.5" })
-                }
-              )
-            ] }, e.id);
-          }),
-          /* @__PURE__ */ l("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ l(
-              h,
-              {
-                type: "button",
-                variant: "outline",
-                size: "sm",
-                onClick: L,
-                disabled: i.length === 0,
-                children: [
-                  /* @__PURE__ */ t(V, { className: "size-3.5" }),
-                  "Add filter"
-                ]
-              }
-            ),
-            r.length > 0 && /* @__PURE__ */ t(
-              h,
-              {
-                type: "button",
-                variant: "ghost",
-                size: "sm",
-                className: "text-muted-foreground",
-                onClick: R,
-                children: "Clear all"
-              }
-            )
-          ] })
-        ] })
-      }
-    ) })
+        o.length > 0 && /* @__PURE__ */ l(
+          f,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "text-muted-foreground",
+            onClick: L,
+            children: "Clear all"
+          }
+        )
+      ] })
+    ] }) })
   ] });
 }
-$.displayName = "DataTableFilter";
+H.displayName = "DataTableFilter";
 export {
-  $ as DataTableFilter
+  H as DataTableFilter
 };
 //# sourceMappingURL=data-table-filter.js.map

package/dist/components/ui/data-table/data-table-filter.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-filter.js","sources":["../../../../src/components/ui/data-table/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport { ListFilterIcon, PlusIcon, XIcon } from \"lucide-react\"\nimport { Popover } from \"radix-ui\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport type { FilterColumnConfig, FilterCondition, FilterOperator } from \"./data-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\n// ---------------------------------------------------------------------------\n// Operator metadata\n// ---------------------------------------------------------------------------\n\nconst OPERATOR_LABELS: Record<FilterOperator, string> = {\n  contains:     \"contains\",\n  equals:       \"equals\",\n  not_equals:   \"not equals\",\n  starts_with:  \"starts with\",\n  ends_with:    \"ends with\",\n  is_empty:     \"is empty\",\n  is_not_empty: \"is not empty\",\n}\n\nconst VALUE_FREE_OPERATORS: FilterOperator[] = [\"is_empty\", \"is_not_empty\"]\n\nconst DEFAULT_OPERATORS: FilterOperator[] = [\n  \"contains\",\n  \"equals\",\n  \"not_equals\",\n  \"starts_with\",\n  \"ends_with\",\n  \"is_empty\",\n  \"is_not_empty\",\n]\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getColumnLabel(\n  colId: string,\n  columnLabels: Record<string, string>,\n\n  col: any,\n): string {\n  return (\n    columnLabels[colId] ??\n    (col?.columnDef?.meta as { label?: string } | undefined)?.label ??\n    (typeof col?.columnDef?.header === \"string\" ? col.columnDef.header : undefined) ??\n    colId\n  )\n}\n\nfunction makeCondition(\n  columnId: string,\n  allowedOperators?: FilterOperator[],\n): FilterCondition {\n  const operator = allowedOperators?.[0] ?? \"contains\"\n  return { id: crypto.randomUUID(), columnId, operator, value: \"\" }\n}\n\n// ---------------------------------------------------------------------------\n// DataTableFilter\n// ---------------------------------------------------------------------------\n\ninterface DataTableFilterProps {\n  className?: string\n}\n\nfunction DataTableFilter({ className }: DataTableFilterProps) {\n  const { table, columnLabels, filters, setFilters, filterConfig, enableFiltering } =\n    useDataTable()\n\n  if (!enableFiltering) return null\n\n  const allLeafColumns = table.getAllLeafColumns()\n\n  const resolvedColumns: FilterColumnConfig[] =\n    filterConfig.length > 0\n      ? filterConfig\n      : allLeafColumns\n          .filter((col) => \"accessorKey\" in col.columnDef || \"accessorFn\" in col.columnDef)\n          .map((col) => ({ columnId: col.id }))\n\n  const firstColumn = resolvedColumns[0]\n  const firstColumnId = firstColumn?.columnId ?? \"\"\n\n  function addFilter() {\n    setFilters([...filters, makeCondition(firstColumnId, firstColumn?.operators)])\n  }\n\n  function removeFilter(id: string) {\n    setFilters(filters.filter((f) => f.id !== id))\n  }\n\n  function updateFilter(id: string, patch: Partial<FilterCondition>) {\n    setFilters(filters.map((f) => (f.id === id ? { ...f, ...patch } : f)))\n  }\n\n  function clearAll() {\n    setFilters([])\n  }\n\n  const activeCount = filters.length\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          data-slot=\"data-table-filter\"\n          className={cn(className)}\n          aria-label={activeCount > 0 ? `Filter (${activeCount} active)` : \"Filter\"}\n        >\n          <ListFilterIcon className=\"size-3.5\" />\n          Filter\n          {activeCount > 0 && (\n            <span className=\"flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground\">\n              {activeCount}\n            </span>\n          )}\n        </Button>\n      </Popover.Trigger>\n\n      <Popover.Portal>\n        <Popover.Content\n          data-slot=\"data-table-filter-panel\"\n          align=\"end\"\n          sideOffset={4}\n          className={cn(\n            \"z-50 min-w-80 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md outline-none\",\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n            \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          )}\n        >\n          <div className=\"flex flex-col gap-2\">\n            {filters.map((condition) => {\n              const colConfig = resolvedColumns.find((c) => c.columnId === condition.columnId)\n              const operators = colConfig?.operators ?? DEFAULT_OPERATORS\n              const isValueFree = VALUE_FREE_OPERATORS.includes(condition.operator)\n\n              return (\n                <div key={condition.id} className=\"flex items-center gap-2\">\n                  {/* Column selector */}\n                  <Select\n                    value={condition.columnId}\n                    onValueChange={(v) => {\n                      const nextConfig = resolvedColumns.find((c) => c.columnId === v)\n                      const nextOperators = nextConfig?.operators ?? DEFAULT_OPERATORS\n                      const nextOperator = nextOperators.includes(condition.operator)\n                        ? condition.operator\n                        : (nextOperators[0] ?? \"contains\")\n                      updateFilter(condition.id, {\n                        columnId: v,\n                        operator: nextOperator,\n                        value: \"\",\n                      })\n                    }}\n                  >\n                    <SelectTrigger size=\"sm\" className=\"w-36\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {resolvedColumns.map((c) => {\n                        const col = allLeafColumns.find((lc) => lc.id === c.columnId)\n                        return (\n                          <SelectItem key={c.columnId} value={c.columnId}>\n                            {c.label ?? getColumnLabel(c.columnId, columnLabels, col)}\n                          </SelectItem>\n                        )\n                      })}\n                    </SelectContent>\n                  </Select>\n\n                  {/* Operator selector */}\n                  <Select\n                    value={condition.operator}\n                    onValueChange={(v) =>\n                      updateFilter(condition.id, {\n                        operator: v as FilterOperator,\n                        value: \"\",\n                      })\n                    }\n                  >\n                    <SelectTrigger size=\"sm\" className=\"w-32\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {operators.map((op) => (\n                        <SelectItem key={op} value={op}>\n                          {OPERATOR_LABELS[op]}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n\n                  {/* Value input — hidden for value-free operators */}\n                  {isValueFree ? (\n                    <div className=\"h-8 w-40\" aria-hidden />\n                  ) : (\n                    <Input\n                      className=\"w-40\"\n                      placeholder=\"Value…\"\n                      value={condition.value}\n                      onChange={(e) => updateFilter(condition.id, { value: e.target.value })}\n                    />\n                  )}\n\n                  {/* Remove button */}\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"size-8 shrink-0 text-muted-foreground hover:text-foreground\"\n                    onClick={() => removeFilter(condition.id)}\n                    aria-label=\"Remove filter\"\n                  >\n                    <XIcon className=\"size-3.5\" />\n                  </Button>\n                </div>\n              )\n            })}\n\n            <div className=\"flex items-center gap-2\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={addFilter}\n                disabled={resolvedColumns.length === 0}\n              >\n                <PlusIcon className=\"size-3.5\" />\n                Add filter\n              </Button>\n              {filters.length > 0 && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"text-muted-foreground\"\n                  onClick={clearAll}\n                >\n                  Clear all\n                </Button>\n              )}\n            </div>\n          </div>\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nDataTableFilter.displayName = \"DataTableFilter\"\n\nexport { DataTableFilter }\nexport type { DataTableFilterProps }\n"],"names":["OPERATOR_LABELS","VALUE_FREE_OPERATORS","DEFAULT_OPERATORS","getColumnLabel","colId","columnLabels","col","makeCondition","columnId","allowedOperators","operator","DataTableFilter","className","table","filters","setFilters","filterConfig","enableFiltering","useDataTable","allLeafColumns","resolvedColumns","firstColumn","firstColumnId","addFilter","removeFilter","id","f","updateFilter","patch","clearAll","activeCount","jsxs","Popover","jsx","Button","cn","ListFilterIcon","condition","operators","c","isValueFree","Select","v","nextOperators","nextOperator","SelectTrigger","SelectValue","SelectContent","lc","SelectItem","op","Input","e","XIcon","PlusIcon"],"mappings":"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"}
+{"version":3,"file":"data-table-filter.js","sources":["../../../../src/components/ui/data-table/data-table-filter.tsx"],"sourcesContent":["\"use client\"\n\nimport { ListFilterIcon, PlusIcon, XIcon } from \"lucide-react\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport type { FilterColumnConfig, FilterCondition, FilterOperator } from \"./data-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/ui/popover\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\n// ---------------------------------------------------------------------------\n// Operator metadata\n// ---------------------------------------------------------------------------\n\nconst OPERATOR_LABELS: Record<FilterOperator, string> = {\n  contains:     \"contains\",\n  equals:       \"equals\",\n  not_equals:   \"not equals\",\n  starts_with:  \"starts with\",\n  ends_with:    \"ends with\",\n  is_empty:     \"is empty\",\n  is_not_empty: \"is not empty\",\n}\n\nconst VALUE_FREE_OPERATORS: FilterOperator[] = [\"is_empty\", \"is_not_empty\"]\n\nconst DEFAULT_OPERATORS: FilterOperator[] = [\n  \"contains\",\n  \"equals\",\n  \"not_equals\",\n  \"starts_with\",\n  \"ends_with\",\n  \"is_empty\",\n  \"is_not_empty\",\n]\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getColumnLabel(\n  colId: string,\n  columnLabels: Record<string, string>,\n\n  col: any,\n): string {\n  return (\n    columnLabels[colId] ??\n    (col?.columnDef?.meta as { label?: string } | undefined)?.label ??\n    (typeof col?.columnDef?.header === \"string\" ? col.columnDef.header : undefined) ??\n    colId\n  )\n}\n\nfunction makeCondition(\n  columnId: string,\n  allowedOperators?: FilterOperator[],\n): FilterCondition {\n  const operator = allowedOperators?.[0] ?? \"contains\"\n  return { id: crypto.randomUUID(), columnId, operator, value: \"\" }\n}\n\n// ---------------------------------------------------------------------------\n// DataTableFilter\n// ---------------------------------------------------------------------------\n\ninterface DataTableFilterProps {\n  className?: string\n}\n\nfunction DataTableFilter({ className }: DataTableFilterProps) {\n  const { table, columnLabels, filters, setFilters, filterConfig, enableFiltering } =\n    useDataTable()\n\n  if (!enableFiltering) return null\n\n  const allLeafColumns = table.getAllLeafColumns()\n\n  const resolvedColumns: FilterColumnConfig[] =\n    filterConfig.length > 0\n      ? filterConfig\n      : allLeafColumns\n          .filter((col) => \"accessorKey\" in col.columnDef || \"accessorFn\" in col.columnDef)\n          .map((col) => ({ columnId: col.id }))\n\n  const firstColumn = resolvedColumns[0]\n  const firstColumnId = firstColumn?.columnId ?? \"\"\n\n  function addFilter() {\n    setFilters([...filters, makeCondition(firstColumnId, firstColumn?.operators)])\n  }\n\n  function removeFilter(id: string) {\n    setFilters(filters.filter((f) => f.id !== id))\n  }\n\n  function updateFilter(id: string, patch: Partial<FilterCondition>) {\n    setFilters(filters.map((f) => (f.id === id ? { ...f, ...patch } : f)))\n  }\n\n  function clearAll() {\n    setFilters([])\n  }\n\n  const activeCount = filters.length\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          data-slot=\"data-table-filter\"\n          className={cn(className)}\n          aria-label={activeCount > 0 ? `Filter (${activeCount} active)` : \"Filter\"}\n        >\n          <ListFilterIcon className=\"size-3.5\" />\n          Filter\n          {activeCount > 0 && (\n            <span className=\"flex size-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground\">\n              {activeCount}\n            </span>\n          )}\n        </Button>\n      </PopoverTrigger>\n\n      <PopoverContent data-slot=\"data-table-filter-panel\" align=\"end\" className=\"min-w-80\">\n          <div className=\"flex flex-col gap-2\">\n            {filters.map((condition) => {\n              const colConfig = resolvedColumns.find((c) => c.columnId === condition.columnId)\n              const operators = colConfig?.operators ?? DEFAULT_OPERATORS\n              const isValueFree = VALUE_FREE_OPERATORS.includes(condition.operator)\n\n              return (\n                <div key={condition.id} className=\"flex items-center gap-2\">\n                  {/* Column selector */}\n                  <Select\n                    value={condition.columnId}\n                    onValueChange={(v) => {\n                      const nextConfig = resolvedColumns.find((c) => c.columnId === v)\n                      const nextOperators = nextConfig?.operators ?? DEFAULT_OPERATORS\n                      const nextOperator = nextOperators.includes(condition.operator)\n                        ? condition.operator\n                        : (nextOperators[0] ?? \"contains\")\n                      updateFilter(condition.id, {\n                        columnId: v,\n                        operator: nextOperator,\n                        value: \"\",\n                      })\n                    }}\n                  >\n                    <SelectTrigger size=\"sm\" className=\"w-36\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {resolvedColumns.map((c) => {\n                        const col = allLeafColumns.find((lc) => lc.id === c.columnId)\n                        return (\n                          <SelectItem key={c.columnId} value={c.columnId}>\n                            {c.label ?? getColumnLabel(c.columnId, columnLabels, col)}\n                          </SelectItem>\n                        )\n                      })}\n                    </SelectContent>\n                  </Select>\n\n                  {/* Operator selector */}\n                  <Select\n                    value={condition.operator}\n                    onValueChange={(v) =>\n                      updateFilter(condition.id, {\n                        operator: v as FilterOperator,\n                        value: \"\",\n                      })\n                    }\n                  >\n                    <SelectTrigger size=\"sm\" className=\"w-32\">\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      {operators.map((op) => (\n                        <SelectItem key={op} value={op}>\n                          {OPERATOR_LABELS[op]}\n                        </SelectItem>\n                      ))}\n                    </SelectContent>\n                  </Select>\n\n                  {/* Value input — hidden for value-free operators */}\n                  {isValueFree ? (\n                    <div className=\"h-8 w-40\" aria-hidden />\n                  ) : (\n                    <Input\n                      className=\"w-40\"\n                      placeholder=\"Value…\"\n                      value={condition.value}\n                      onChange={(e) => updateFilter(condition.id, { value: e.target.value })}\n                    />\n                  )}\n\n                  {/* Remove button */}\n                  <Button\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon\"\n                    className=\"size-8 shrink-0 text-muted-foreground hover:text-foreground\"\n                    onClick={() => removeFilter(condition.id)}\n                    aria-label=\"Remove filter\"\n                  >\n                    <XIcon className=\"size-3.5\" />\n                  </Button>\n                </div>\n              )\n            })}\n\n            <div className=\"flex items-center gap-2\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"sm\"\n                onClick={addFilter}\n                disabled={resolvedColumns.length === 0}\n              >\n                <PlusIcon className=\"size-3.5\" />\n                Add filter\n              </Button>\n              {filters.length > 0 && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"text-muted-foreground\"\n                  onClick={clearAll}\n                >\n                  Clear all\n                </Button>\n              )}\n            </div>\n          </div>\n      </PopoverContent>\n    </Popover>\n  )\n}\n\nDataTableFilter.displayName = \"DataTableFilter\"\n\nexport { DataTableFilter }\nexport type { DataTableFilterProps }\n"],"names":["OPERATOR_LABELS","VALUE_FREE_OPERATORS","DEFAULT_OPERATORS","getColumnLabel","colId","columnLabels","col","makeCondition","columnId","allowedOperators","operator","DataTableFilter","className","table","filters","setFilters","filterConfig","enableFiltering","useDataTable","allLeafColumns","resolvedColumns","firstColumn","firstColumnId","addFilter","removeFilter","id","f","updateFilter","patch","clearAll","activeCount","Popover","jsx","PopoverTrigger","jsxs","Button","cn","ListFilterIcon","PopoverContent","condition","operators","c","isValueFree","Select","v","nextOperators","nextOperator","SelectTrigger","SelectValue","SelectContent","lc","SelectItem","op","Input","e","XIcon","PlusIcon"],"mappings":"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"}

package/dist/components/ui/data-table/data-table-group.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("lucide-react"),d=require("radix-ui"),C=require("react"),G=require("./data-table.cjs"),f=require("../button.cjs"),o=require("../select.cjs"),h=require("../../../lib/utils.cjs");function j(l,s,n){const r=n?.columnDef.meta;return s[l]??r?.label??(typeof n?.columnDef.header=="string"?n.columnDef.header:void 0)??l}const m="__none__";function v({className:l}){const s=C.useId(),{table:n,columnLabels:r,grouping:a,setGrouping:p,groupConfig:g,enableGrouping:I}=G.useDataTable();if(!I)return null;const c=n.getAllLeafColumns(),x=g.length>0?g:c.filter(t=>"accessorKey"in t.columnDef||"accessorFn"in t.columnDef).map(t=>({columnId:t.id,label:void 0})),i=a?x.find(t=>t.columnId===a)??{columnId:a}:null,u=i?i.label??j(i.columnId,r,c.find(t=>t.id===i.columnId)):null;return e.jsxs(d.Popover.Root,{children:[e.jsx(d.Popover.Trigger,{asChild:!0,children:e.jsxs(f.Button,{type:"button",variant:"outline",size:"sm","data-slot":"data-table-group",className:h.cn(l),"aria-label":u?`Grouped by ${u}`:"Group by",children:[e.jsx(b.GroupIcon,{className:"size-3.5"}),u?e.jsxs(e.Fragment,{children:["Grouped by",e.jsx("span",{className:"rounded-sm bg-primary px-1.5 text-[10px] font-medium text-primary-foreground",children:u})]}):"Group"]})}),e.jsx(d.Popover.Portal,{children:e.jsx(d.Popover.Content,{"data-slot":"data-table-group-panel",align:"end",sideOffset:4,className:h.cn("z-50 min-w-64 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md outline-none","data-[state=open]:animate-in data-[state=closed]:animate-out","data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0","data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95","data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2"),children:e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsx("label",{className:"text-xs font-medium text-muted-foreground",htmlFor:s,children:"Group rows by"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs(o.Select,{value:a??m,onValueChange:t=>p(t===m?null:t),children:[e.jsx(o.SelectTrigger,{id:s,size:"sm",className:"w-44",children:e.jsx(o.SelectValue,{placeholder:"Select column"})}),e.jsxs(o.SelectContent,{children:[e.jsx(o.SelectItem,{value:m,children:"None"}),x.map(t=>{const N=c.find(y=>y.id===t.columnId);return e.jsx(o.SelectItem,{value:t.columnId,children:t.label??j(t.columnId,r,N)},t.columnId)})]})]}),a&&e.jsx(f.Button,{type:"button",variant:"ghost",size:"icon",className:"size-8 shrink-0 text-muted-foreground hover:text-foreground",onClick:()=>p(null),"aria-label":"Clear grouping",children:e.jsx(b.XIcon,{className:"size-3.5"})})]})]})})})]})}v.displayName="DataTableGroup";exports.DataTableGroup=v;
+//# sourceMappingURL=data-table-group.cjs.map

package/dist/components/ui/data-table/data-table-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-group.cjs","sources":["../../../../src/components/ui/data-table/data-table-group.tsx"],"sourcesContent":["\"use client\"\n\nimport { GroupIcon, XIcon } from \"lucide-react\"\nimport { Popover } from \"radix-ui\"\nimport { useId } from \"react\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport type { Column } from \"@tanstack/react-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getColumnLabel(\n  colId: string,\n  columnLabels: Record<string, string>,\n  col: Column<unknown, unknown> | undefined,\n): string {\n  const meta = col?.columnDef.meta as { label?: string } | undefined\n  return (\n    columnLabels[colId] ??\n    meta?.label ??\n    (typeof col?.columnDef.header === \"string\" ? col.columnDef.header : undefined) ??\n    colId\n  )\n}\n\n// ---------------------------------------------------------------------------\n// DataTableGroup\n// ---------------------------------------------------------------------------\n\nconst NO_GROUPING = \"__none__\"\n\ninterface DataTableGroupProps {\n  className?: string\n}\n\nfunction DataTableGroup({ className }: DataTableGroupProps) {\n  const selectId = useId()\n  const {\n    table,\n    columnLabels,\n    grouping,\n    setGrouping,\n    groupConfig,\n    enableGrouping,\n  } = useDataTable()\n\n  if (!enableGrouping) return null\n\n  const allLeafColumns = table.getAllLeafColumns()\n\n  const resolvedColumns =\n    groupConfig.length > 0\n      ? groupConfig\n      : allLeafColumns\n          .filter((col) => \"accessorKey\" in col.columnDef || \"accessorFn\" in col.columnDef)\n          .map((col) => ({ columnId: col.id, label: undefined as string | undefined }))\n\n  const activeColumn = grouping\n    ? resolvedColumns.find((c) => c.columnId === grouping) ?? { columnId: grouping }\n    : null\n\n  const activeColumnLabel = activeColumn\n    ? activeColumn.label ??\n      getColumnLabel(\n        activeColumn.columnId,\n        columnLabels,\n        allLeafColumns.find((lc) => lc.id === activeColumn.columnId),\n      )\n    : null\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          data-slot=\"data-table-group\"\n          className={cn(className)}\n          aria-label={\n            activeColumnLabel ? `Grouped by ${activeColumnLabel}` : \"Group by\"\n          }\n        >\n          <GroupIcon className=\"size-3.5\" />\n          {activeColumnLabel ? (\n            <>\n              Grouped by\n              <span className=\"rounded-sm bg-primary px-1.5 text-[10px] font-medium text-primary-foreground\">\n                {activeColumnLabel}\n              </span>\n            </>\n          ) : (\n            \"Group\"\n          )}\n        </Button>\n      </Popover.Trigger>\n\n      <Popover.Portal>\n        <Popover.Content\n          data-slot=\"data-table-group-panel\"\n          align=\"end\"\n          sideOffset={4}\n          className={cn(\n            \"z-50 min-w-64 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md outline-none\",\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n            \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          )}\n        >\n          <div className=\"flex flex-col gap-2\">\n            <label\n              className=\"text-xs font-medium text-muted-foreground\"\n              htmlFor={selectId}\n            >\n              Group rows by\n            </label>\n            <div className=\"flex items-center gap-2\">\n              <Select\n                value={grouping ?? NO_GROUPING}\n                onValueChange={(v) => setGrouping(v === NO_GROUPING ? null : v)}\n              >\n                <SelectTrigger\n                  id={selectId}\n                  size=\"sm\"\n                  className=\"w-44\"\n                >\n                  <SelectValue placeholder=\"Select column\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value={NO_GROUPING}>None</SelectItem>\n                  {resolvedColumns.map((c) => {\n                    const col = allLeafColumns.find((lc) => lc.id === c.columnId)\n                    return (\n                      <SelectItem key={c.columnId} value={c.columnId}>\n                        {c.label ?? getColumnLabel(c.columnId, columnLabels, col)}\n                      </SelectItem>\n                    )\n                  })}\n                </SelectContent>\n              </Select>\n              {grouping && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"size-8 shrink-0 text-muted-foreground hover:text-foreground\"\n                  onClick={() => setGrouping(null)}\n                  aria-label=\"Clear grouping\"\n                >\n                  <XIcon className=\"size-3.5\" />\n                </Button>\n              )}\n            </div>\n          </div>\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nDataTableGroup.displayName = \"DataTableGroup\"\n\nexport { DataTableGroup }\nexport type { DataTableGroupProps }\n"],"names":["getColumnLabel","colId","columnLabels","col","meta","NO_GROUPING","DataTableGroup","className","selectId","useId","table","grouping","setGrouping","groupConfig","enableGrouping","useDataTable","allLeafColumns","resolvedColumns","activeColumn","c","activeColumnLabel","lc","jsxs","Popover","jsx","Button","cn","GroupIcon","Fragment","Select","v","SelectTrigger","SelectValue","SelectContent","SelectItem","XIcon"],"mappings":"gTAwBA,SAASA,EACPC,EACAC,EACAC,EACQ,CACR,MAAMC,EAAOD,GAAK,UAAU,KAC5B,OACED,EAAaD,CAAK,GAClBG,GAAM,QACL,OAAOD,GAAK,UAAU,QAAW,SAAWA,EAAI,UAAU,OAAS,SACpEF,CAEJ,CAMA,MAAMI,EAAc,WAMpB,SAASC,EAAe,CAAE,UAAAC,GAAkC,CAC1D,MAAMC,EAAWC,EAAAA,MAAA,EACX,CACJ,MAAAC,EACA,aAAAR,EACA,SAAAS,EACA,YAAAC,EACA,YAAAC,EACA,eAAAC,CAAA,EACEC,eAAA,EAEJ,GAAI,CAACD,EAAgB,OAAO,KAE5B,MAAME,EAAiBN,EAAM,kBAAA,EAEvBO,EACJJ,EAAY,OAAS,EACjBA,EACAG,EACG,OAAQb,GAAQ,gBAAiBA,EAAI,WAAa,eAAgBA,EAAI,SAAS,EAC/E,IAAKA,IAAS,CAAE,SAAUA,EAAI,GAAI,MAAO,MAAA,EAAkC,EAE9Ee,EAAeP,EACjBM,EAAgB,KAAME,GAAMA,EAAE,WAAaR,CAAQ,GAAK,CAAE,SAAUA,GACpE,KAEES,EAAoBF,EACtBA,EAAa,OACblB,EACEkB,EAAa,SACbhB,EACAc,EAAe,KAAMK,GAAOA,EAAG,KAAOH,EAAa,QAAQ,CAAA,EAE7D,KAEJ,OACEI,OAACC,EAAAA,QAAQ,KAAR,CACC,SAAA,CAAAC,EAAAA,IAACD,EAAAA,QAAQ,QAAR,CAAgB,QAAO,GACtB,SAAAD,EAAAA,KAACG,EAAAA,OAAA,CACC,KAAK,SACL,QAAQ,UACR,KAAK,KACL,YAAU,mBACV,UAAWC,EAAAA,GAAGnB,CAAS,EACvB,aACEa,EAAoB,cAAcA,CAAiB,GAAK,WAG1D,SAAA,CAAAI,EAAAA,IAACG,EAAAA,UAAA,CAAU,UAAU,UAAA,CAAW,EAC/BP,EACCE,EAAAA,KAAAM,WAAA,CAAE,SAAA,CAAA,aAEAJ,EAAAA,IAAC,OAAA,CAAK,UAAU,+EACb,SAAAJ,CAAA,CACH,CAAA,CAAA,CACF,EAEA,OAAA,CAAA,CAAA,EAGN,EAEAI,EAAAA,IAACD,EAAAA,QAAQ,OAAR,CACC,SAAAC,EAAAA,IAACD,EAAAA,QAAQ,QAAR,CACC,YAAU,yBACV,MAAM,MACN,WAAY,EACZ,UAAWG,EAAAA,GACT,gGACA,+DACA,6DACA,+DACA,+EAAA,EAGF,SAAAJ,EAAAA,KAAC,MAAA,CAAI,UAAU,sBACb,SAAA,CAAAE,EAAAA,IAAC,QAAA,CACC,UAAU,4CACV,QAAShB,EACV,SAAA,eAAA,CAAA,EAGDc,EAAAA,KAAC,MAAA,CAAI,UAAU,0BACb,SAAA,CAAAA,EAAAA,KAACO,EAAAA,OAAA,CACC,MAAOlB,GAAYN,EACnB,cAAgByB,GAAMlB,EAAYkB,IAAMzB,EAAc,KAAOyB,CAAC,EAE9D,SAAA,CAAAN,EAAAA,IAACO,EAAAA,cAAA,CACC,GAAIvB,EACJ,KAAK,KACL,UAAU,OAEV,SAAAgB,EAAAA,IAACQ,EAAAA,YAAA,CAAY,YAAY,eAAA,CAAgB,CAAA,CAAA,SAE1CC,EAAAA,cAAA,CACC,SAAA,CAAAT,EAAAA,IAACU,EAAAA,WAAA,CAAW,MAAO7B,EAAa,SAAA,OAAI,EACnCY,EAAgB,IAAKE,GAAM,CAC1B,MAAMhB,EAAMa,EAAe,KAAMK,GAAOA,EAAG,KAAOF,EAAE,QAAQ,EAC5D,OACEK,EAAAA,IAACU,EAAAA,WAAA,CAA4B,MAAOf,EAAE,SACnC,SAAAA,EAAE,OAASnB,EAAemB,EAAE,SAAUjB,EAAcC,CAAG,CAAA,EADzCgB,EAAE,QAEnB,CAEJ,CAAC,CAAA,CAAA,CACH,CAAA,CAAA,CAAA,EAEDR,GACCa,EAAAA,IAACC,EAAAA,OAAA,CACC,KAAK,SACL,QAAQ,QACR,KAAK,OACL,UAAU,8DACV,QAAS,IAAMb,EAAY,IAAI,EAC/B,aAAW,iBAEX,SAAAY,EAAAA,IAACW,EAAAA,MAAA,CAAM,UAAU,UAAA,CAAW,CAAA,CAAA,CAC9B,CAAA,CAEJ,CAAA,CAAA,CACF,CAAA,CAAA,CACF,CACF,CAAA,EACF,CAEJ,CAEA7B,EAAe,YAAc"}

package/dist/components/ui/data-table/data-table-group.js

@@ -0,0 +1,118 @@
+import { jsxs as t, jsx as o, Fragment as G } from "react/jsx-runtime";
+import { GroupIcon as y, XIcon as z } from "lucide-react";
+import { Popover as m } from "radix-ui";
+import { useId as D } from "react";
+import { useDataTable as S } from "./data-table.js";
+import { Button as b } from "../button.js";
+import { Select as L, SelectTrigger as T, SelectValue as _, SelectContent as w, SelectItem as h } from "../select.js";
+import { cn as x } from "../../../lib/utils.js";
+function v(a, r, n) {
+  const i = n?.columnDef.meta;
+  return r[a] ?? i?.label ?? (typeof n?.columnDef.header == "string" ? n.columnDef.header : void 0) ?? a;
+}
+const c = "__none__";
+function F({ className: a }) {
+  const r = D(), {
+    table: n,
+    columnLabels: i,
+    grouping: l,
+    setGrouping: p,
+    groupConfig: f,
+    enableGrouping: I
+  } = S();
+  if (!I) return null;
+  const u = n.getAllLeafColumns(), g = f.length > 0 ? f : u.filter((e) => "accessorKey" in e.columnDef || "accessorFn" in e.columnDef).map((e) => ({ columnId: e.id, label: void 0 })), d = l ? g.find((e) => e.columnId === l) ?? { columnId: l } : null, s = d ? d.label ?? v(
+    d.columnId,
+    i,
+    u.find((e) => e.id === d.columnId)
+  ) : null;
+  return /* @__PURE__ */ t(m.Root, { children: [
+    /* @__PURE__ */ o(m.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
+      b,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        "data-slot": "data-table-group",
+        className: x(a),
+        "aria-label": s ? `Grouped by ${s}` : "Group by",
+        children: [
+          /* @__PURE__ */ o(y, { className: "size-3.5" }),
+          s ? /* @__PURE__ */ t(G, { children: [
+            "Grouped by",
+            /* @__PURE__ */ o("span", { className: "rounded-sm bg-primary px-1.5 text-[10px] font-medium text-primary-foreground", children: s })
+          ] }) : "Group"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ o(m.Portal, { children: /* @__PURE__ */ o(
+      m.Content,
+      {
+        "data-slot": "data-table-group-panel",
+        align: "end",
+        sideOffset: 4,
+        className: x(
+          "z-50 min-w-64 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md outline-none",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+          "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2"
+        ),
+        children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ o(
+            "label",
+            {
+              className: "text-xs font-medium text-muted-foreground",
+              htmlFor: r,
+              children: "Group rows by"
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ t(
+              L,
+              {
+                value: l ?? c,
+                onValueChange: (e) => p(e === c ? null : e),
+                children: [
+                  /* @__PURE__ */ o(
+                    T,
+                    {
+                      id: r,
+                      size: "sm",
+                      className: "w-44",
+                      children: /* @__PURE__ */ o(_, { placeholder: "Select column" })
+                    }
+                  ),
+                  /* @__PURE__ */ t(w, { children: [
+                    /* @__PURE__ */ o(h, { value: c, children: "None" }),
+                    g.map((e) => {
+                      const N = u.find((C) => C.id === e.columnId);
+                      return /* @__PURE__ */ o(h, { value: e.columnId, children: e.label ?? v(e.columnId, i, N) }, e.columnId);
+                    })
+                  ] })
+                ]
+              }
+            ),
+            l && /* @__PURE__ */ o(
+              b,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon",
+                className: "size-8 shrink-0 text-muted-foreground hover:text-foreground",
+                onClick: () => p(null),
+                "aria-label": "Clear grouping",
+                children: /* @__PURE__ */ o(z, { className: "size-3.5" })
+              }
+            )
+          ] })
+        ] })
+      }
+    ) })
+  ] });
+}
+F.displayName = "DataTableGroup";
+export {
+  F as DataTableGroup
+};
+//# sourceMappingURL=data-table-group.js.map

package/dist/components/ui/data-table/data-table-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-group.js","sources":["../../../../src/components/ui/data-table/data-table-group.tsx"],"sourcesContent":["\"use client\"\n\nimport { GroupIcon, XIcon } from \"lucide-react\"\nimport { Popover } from \"radix-ui\"\nimport { useId } from \"react\"\n\nimport { useDataTable } from \"./data-table\"\n\nimport type { Column } from \"@tanstack/react-table\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { cn } from \"@/lib/utils\"\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction getColumnLabel(\n  colId: string,\n  columnLabels: Record<string, string>,\n  col: Column<unknown, unknown> | undefined,\n): string {\n  const meta = col?.columnDef.meta as { label?: string } | undefined\n  return (\n    columnLabels[colId] ??\n    meta?.label ??\n    (typeof col?.columnDef.header === \"string\" ? col.columnDef.header : undefined) ??\n    colId\n  )\n}\n\n// ---------------------------------------------------------------------------\n// DataTableGroup\n// ---------------------------------------------------------------------------\n\nconst NO_GROUPING = \"__none__\"\n\ninterface DataTableGroupProps {\n  className?: string\n}\n\nfunction DataTableGroup({ className }: DataTableGroupProps) {\n  const selectId = useId()\n  const {\n    table,\n    columnLabels,\n    grouping,\n    setGrouping,\n    groupConfig,\n    enableGrouping,\n  } = useDataTable()\n\n  if (!enableGrouping) return null\n\n  const allLeafColumns = table.getAllLeafColumns()\n\n  const resolvedColumns =\n    groupConfig.length > 0\n      ? groupConfig\n      : allLeafColumns\n          .filter((col) => \"accessorKey\" in col.columnDef || \"accessorFn\" in col.columnDef)\n          .map((col) => ({ columnId: col.id, label: undefined as string | undefined }))\n\n  const activeColumn = grouping\n    ? resolvedColumns.find((c) => c.columnId === grouping) ?? { columnId: grouping }\n    : null\n\n  const activeColumnLabel = activeColumn\n    ? activeColumn.label ??\n      getColumnLabel(\n        activeColumn.columnId,\n        columnLabels,\n        allLeafColumns.find((lc) => lc.id === activeColumn.columnId),\n      )\n    : null\n\n  return (\n    <Popover.Root>\n      <Popover.Trigger asChild>\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          data-slot=\"data-table-group\"\n          className={cn(className)}\n          aria-label={\n            activeColumnLabel ? `Grouped by ${activeColumnLabel}` : \"Group by\"\n          }\n        >\n          <GroupIcon className=\"size-3.5\" />\n          {activeColumnLabel ? (\n            <>\n              Grouped by\n              <span className=\"rounded-sm bg-primary px-1.5 text-[10px] font-medium text-primary-foreground\">\n                {activeColumnLabel}\n              </span>\n            </>\n          ) : (\n            \"Group\"\n          )}\n        </Button>\n      </Popover.Trigger>\n\n      <Popover.Portal>\n        <Popover.Content\n          data-slot=\"data-table-group-panel\"\n          align=\"end\"\n          sideOffset={4}\n          className={cn(\n            \"z-50 min-w-64 rounded-lg border bg-popover p-3 text-popover-foreground shadow-md outline-none\",\n            \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n            \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n            \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n            \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          )}\n        >\n          <div className=\"flex flex-col gap-2\">\n            <label\n              className=\"text-xs font-medium text-muted-foreground\"\n              htmlFor={selectId}\n            >\n              Group rows by\n            </label>\n            <div className=\"flex items-center gap-2\">\n              <Select\n                value={grouping ?? NO_GROUPING}\n                onValueChange={(v) => setGrouping(v === NO_GROUPING ? null : v)}\n              >\n                <SelectTrigger\n                  id={selectId}\n                  size=\"sm\"\n                  className=\"w-44\"\n                >\n                  <SelectValue placeholder=\"Select column\" />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectItem value={NO_GROUPING}>None</SelectItem>\n                  {resolvedColumns.map((c) => {\n                    const col = allLeafColumns.find((lc) => lc.id === c.columnId)\n                    return (\n                      <SelectItem key={c.columnId} value={c.columnId}>\n                        {c.label ?? getColumnLabel(c.columnId, columnLabels, col)}\n                      </SelectItem>\n                    )\n                  })}\n                </SelectContent>\n              </Select>\n              {grouping && (\n                <Button\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon\"\n                  className=\"size-8 shrink-0 text-muted-foreground hover:text-foreground\"\n                  onClick={() => setGrouping(null)}\n                  aria-label=\"Clear grouping\"\n                >\n                  <XIcon className=\"size-3.5\" />\n                </Button>\n              )}\n            </div>\n          </div>\n        </Popover.Content>\n      </Popover.Portal>\n    </Popover.Root>\n  )\n}\n\nDataTableGroup.displayName = \"DataTableGroup\"\n\nexport { DataTableGroup }\nexport type { DataTableGroupProps }\n"],"names":["getColumnLabel","colId","columnLabels","col","meta","NO_GROUPING","DataTableGroup","className","selectId","useId","table","grouping","setGrouping","groupConfig","enableGrouping","useDataTable","allLeafColumns","resolvedColumns","activeColumn","c","activeColumnLabel","lc","jsxs","Popover","jsx","Button","cn","GroupIcon","Fragment","Select","v","SelectTrigger","SelectValue","SelectContent","SelectItem","XIcon"],"mappings":"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"}