@jakubmazanec/ui 0.4.2 → 0.5.0-next.7fc14073

package/build/components/data-table/internals/DataTableFilter.js

@@ -0,0 +1,275 @@
+"use strict";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { flexRender } from "@tanstack/react-table";
+import { useCallback, useMemo, useState } from "react";
+import { Button } from "../../Button.js";
+import { Combobox } from "../../Combobox.js";
+import { Container } from "../../Container.js";
+import { Field } from "../../Field.js";
+import { Form } from "../../Form.js";
+import { Icon } from "../../Icon.js";
+import { Input } from "../../Input.js";
+import { Label } from "../../Label.js";
+import { Listbox } from "../../Listbox.js";
+import { addFilter } from "./addFilter.js";
+import { normalizeFilter } from "./normalizeFilter.js";
+import { normalizeFilters } from "./normalizeFilters.js";
+import { removeFilter } from "./removeFilter.js";
+export function DataTableFilter({
+  table,
+  column,
+  clientFilters,
+  filters: controlledFilters,
+  onFiltering,
+  clientFaceting,
+  faceting
+}) {
+  let { filterVariant } = column.columnDef.meta ?? {};
+  let currentFilters = clientFilters ? normalizeFilters(table) : normalizeFilters(table, controlledFilters);
+  let currentFilter = clientFilters ? normalizeFilter(column) : normalizeFilter(column, controlledFilters);
+  let currentMin = filterVariant === "range" ? currentFilter?.[0] ?? void 0 : void 0;
+  let currentMax = filterVariant === "range" ? currentFilter?.[1] ?? void 0 : void 0;
+  let [filter, setFilter] = useState(
+    typeof currentFilter === "string" ? currentFilter : void 0
+  );
+  let [min, setMin] = useState(currentMin);
+  let [max, setMax] = useState(currentMax);
+  let facetingValues = useMemo(() => {
+    if (!clientFaceting) {
+      return faceting?.[column.id]?.values ?? [];
+    }
+    if (filterVariant === "range") {
+      return [];
+    }
+    return [...column.getFacetedUniqueValues().keys()].sort().slice(0, 5e3);
+  }, [clientFaceting, column, faceting, filterVariant]);
+  let facetingMin = clientFaceting ? Number(column.getFacetedMinMaxValues()?.[0] ?? null) : faceting?.[column.id]?.min ?? null;
+  let facetingMax = clientFaceting ? Number(column.getFacetedMinMaxValues()?.[1] ?? null) : faceting?.[column.id]?.max ?? null;
+  let handleMinRangeChange = useCallback((event) => {
+    setMin(event.target.value ? Number(event.target.value) : void 0);
+  }, []);
+  let handleMaxRangeChange = useCallback((event) => {
+    setMax(event.target.value ? Number(event.target.value) : void 0);
+  }, []);
+  let handleSelectFilterChange = useCallback(
+    (value) => {
+      if (clientFilters) {
+        column.setFilterValue(value);
+      }
+      if (onFiltering) {
+        onFiltering(addFilter(currentFilters, column.id, value));
+      }
+    },
+    [clientFilters, column, currentFilters, onFiltering]
+  );
+  let handleTextFilterChange = useCallback(
+    (value) => {
+      if (value) {
+        if (clientFilters) {
+          column.setFilterValue(value);
+        }
+        if (onFiltering) {
+          onFiltering(addFilter(currentFilters, column.id, value));
+        }
+      } else {
+        if (clientFilters) {
+          column.setFilterValue(void 0);
+        }
+        if (onFiltering) {
+          onFiltering(removeFilter(currentFilters, column.id));
+        }
+      }
+    },
+    [clientFilters, column, currentFilters, onFiltering]
+  );
+  let handleFilterChange = useCallback((event) => {
+    if (event.target.value) {
+      setFilter(event.target.value);
+    } else {
+      setFilter(void 0);
+    }
+  }, []);
+  let handleFilterClick = useCallback(() => {
+    if (filterVariant === "range") {
+      if (!min && !max) {
+        if (clientFilters) {
+          column.setFilterValue(void 0);
+        }
+        if (onFiltering) {
+          onFiltering(removeFilter(currentFilters, column.id));
+        }
+      } else {
+        if (clientFilters) {
+          column.setFilterValue([min, max]);
+        }
+        if (onFiltering) {
+          onFiltering(addFilter(currentFilters, column.id, [min, max]));
+        }
+      }
+    }
+    if (filterVariant === "text" && !facetingValues.length || !filterVariant) {
+      if (filter) {
+        if (clientFilters) {
+          column.setFilterValue(filter);
+        }
+        if (onFiltering) {
+          onFiltering(addFilter(currentFilters, column.id, filter));
+        }
+      } else {
+        if (clientFilters) {
+          column.setFilterValue(void 0);
+        }
+        if (onFiltering) {
+          onFiltering(removeFilter(currentFilters, column.id));
+        }
+      }
+    }
+  }, [
+    clientFilters,
+    column,
+    currentFilters,
+    facetingValues.length,
+    filter,
+    filterVariant,
+    max,
+    min,
+    onFiltering
+  ]);
+  let handleFilterSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+      if (filterVariant === "range") {
+        if (min === void 0 && max === void 0) {
+          if (clientFilters) {
+            column.setFilterValue(void 0);
+          }
+          if (onFiltering) {
+            onFiltering(removeFilter(currentFilters, column.id));
+          }
+        } else {
+          if (clientFilters) {
+            column.setFilterValue([min, max]);
+          }
+          if (onFiltering) {
+            onFiltering(addFilter(currentFilters, column.id, [min, max]));
+          }
+        }
+      }
+      if (filterVariant === "text" && !facetingValues.length || !filterVariant) {
+        if (filter) {
+          if (clientFilters) {
+            column.setFilterValue(filter);
+          }
+          if (onFiltering) {
+            onFiltering(addFilter(currentFilters, column.id, filter));
+          }
+        } else {
+          if (clientFilters) {
+            column.setFilterValue(void 0);
+          }
+          if (onFiltering) {
+            onFiltering(removeFilter(currentFilters, column.id));
+          }
+        }
+      }
+    },
+    [
+      clientFilters,
+      column,
+      currentFilters,
+      facetingValues.length,
+      filter,
+      filterVariant,
+      max,
+      min,
+      onFiltering
+    ]
+  );
+  let handleResetClick = useCallback(() => {
+    setFilter(void 0);
+    setMin(void 0);
+    setMax(void 0);
+    if (clientFilters) {
+      column.setFilterValue(void 0);
+    }
+    if (onFiltering) {
+      onFiltering(removeFilter(currentFilters, column.id));
+    }
+  }, [clientFilters, column, currentFilters, onFiltering]);
+  let filterElement = null;
+  if (filterVariant === "range") {
+    filterElement = /* @__PURE__ */ jsxs(Container, { spacing: "small", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          max: String(facetingMax ?? ""),
+          min: String(facetingMin ?? ""),
+          placeholder: `Min ${facetingMin === null ? "" : `(${facetingMin})`}`,
+          type: "number",
+          value: min ?? "",
+          onChange: handleMinRangeChange
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          max: String(facetingMax ?? ""),
+          min: String(facetingMin ?? ""),
+          placeholder: `Max ${facetingMax === null ? "" : `(${facetingMax})`}`,
+          type: "number",
+          value: max ?? "",
+          onChange: handleMaxRangeChange
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { submit: true, "aria-label": "Filter", variant: "outline", onClick: handleFilterClick, children: /* @__PURE__ */ jsx(Icon, { name: "Funnel", size: "large" }) }),
+      /* @__PURE__ */ jsx(Button, { "aria-label": "Cancel", variant: "outline", onClick: handleResetClick, children: /* @__PURE__ */ jsx(Icon, { name: "XMark", size: "large" }) })
+    ] });
+  } else if (filterVariant === "select" && facetingValues.length) {
+    filterElement = /* @__PURE__ */ jsxs(Container, { spacing: "small", children: [
+      /* @__PURE__ */ jsx(
+        Listbox,
+        {
+          items: facetingValues.map((value) => ({
+            value,
+            label: `${value}`
+          })),
+          value: currentFilter,
+          onChange: handleSelectFilterChange
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { "aria-label": "Cancel", variant: "outline", onClick: handleResetClick, children: /* @__PURE__ */ jsx(Icon, { name: "XMark", size: "large" }) })
+    ] });
+  } else if (filterVariant === "text" && facetingValues.length) {
+    filterElement = /* @__PURE__ */ jsxs(Container, { spacing: "small", children: [
+      /* @__PURE__ */ jsx(
+        Combobox,
+        {
+          customValue: true,
+          items: facetingValues.map((value) => ({
+            value,
+            label: `${value}`
+          })),
+          value: currentFilter ?? "",
+          onChange: handleTextFilterChange
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { "aria-label": "Cancel", variant: "outline", onClick: handleResetClick, children: /* @__PURE__ */ jsx(Icon, { name: "XMark", size: "large" }) })
+    ] });
+  } else if (filterVariant === "text" && !facetingValues.length || !filterVariant) {
+    filterElement = /* @__PURE__ */ jsxs(Container, { spacing: "small", children: [
+      /* @__PURE__ */ jsx(Input, { value: filter ?? "", onChange: handleFilterChange }),
+      /* @__PURE__ */ jsx(Button, { "aria-label": "Filter", variant: "outline", onClick: handleFilterClick, children: /* @__PURE__ */ jsx(Icon, { name: "Funnel", size: "large" }) }),
+      /* @__PURE__ */ jsx(Button, { "aria-label": "Cancel", variant: "outline", onClick: handleResetClick, children: /* @__PURE__ */ jsx(Icon, { name: "XMark", size: "large" }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Form, { onSubmit: handleFilterSubmit, children: /* @__PURE__ */ jsxs(Field, { className: "gap-2", children: [
+    /* @__PURE__ */ jsx(Label, { children: flexRender(column.columnDef.header, {
+      table,
+      column,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed
+      header: { column }
+    }) }),
+    filterElement
+  ] }) });
+}
+//# sourceMappingURL=DataTableFilter.js.map

package/build/components/data-table/internals/DataTableFilter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../source/components/data-table/internals/DataTableFilter.tsx"],
+  "sourcesContent": ["import {type Column, flexRender, type Header, type Table} from '@tanstack/react-table';\nimport {type ChangeEvent, type FormEvent, useCallback, useMemo, useState} from 'react';\n\nimport {Button} from '../../Button.js';\nimport {Combobox} from '../../Combobox.js';\nimport {Container} from '../../Container.js';\nimport {Field} from '../../Field.js';\nimport {Form} from '../../Form.js';\nimport {Icon} from '../../Icon.js';\nimport {Input} from '../../Input.js';\nimport {Label} from '../../Label.js';\nimport {Listbox} from '../../Listbox.js';\nimport {type DataTableProps} from '../DataTable.js';\nimport {addFilter} from './addFilter.js';\nimport {normalizeFilter} from './normalizeFilter.js';\nimport {normalizeFilters} from './normalizeFilters.js';\nimport {removeFilter} from './removeFilter.js';\n\nexport type DataTableFilterProps = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  table: Table<any>;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  column: Column<any>;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  clientFilters: DataTableProps<any, any>['clientFilters'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  filters: DataTableProps<any, any>['filters'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  onFiltering: DataTableProps<any, any>['onFiltersChange'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  clientFaceting: DataTableProps<any, any>['clientFaceting'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  faceting: DataTableProps<any, any>['faceting'];\n};\n\nexport function DataTableFilter({\n  table,\n  column,\n  clientFilters,\n  filters: controlledFilters,\n  onFiltering,\n  clientFaceting,\n  faceting,\n}: DataTableFilterProps) {\n  let {filterVariant} = column.columnDef.meta ?? {};\n\n  let currentFilters =\n    clientFilters ? normalizeFilters(table) : normalizeFilters(table, controlledFilters);\n  let currentFilter =\n    clientFilters ? normalizeFilter(column) : normalizeFilter(column, controlledFilters);\n\n  let currentMin =\n    filterVariant === 'range' ?\n      ((currentFilter as [number?, number?] | undefined)?.[0] ?? undefined)\n    : undefined;\n  let currentMax =\n    filterVariant === 'range' ?\n      ((currentFilter as [number?, number?] | undefined)?.[1] ?? undefined)\n    : undefined;\n\n  let [filter, setFilter] = useState<string | undefined>(\n    typeof currentFilter === 'string' ? currentFilter : undefined,\n  );\n  let [min, setMin] = useState(currentMin);\n  let [max, setMax] = useState(currentMax);\n\n  let facetingValues = useMemo(() => {\n    if (!clientFaceting) {\n      return faceting?.[column.id]?.values ?? [];\n    }\n\n    if (filterVariant === 'range') {\n      return [];\n    }\n\n    return [...column.getFacetedUniqueValues().keys()].sort().slice(0, 5000) as unknown[];\n  }, [clientFaceting, column, faceting, filterVariant]);\n\n  let facetingMin =\n    clientFaceting ?\n      Number(column.getFacetedMinMaxValues()?.[0] ?? null)\n    : (faceting?.[column.id]?.min ?? null);\n  let facetingMax =\n    clientFaceting ?\n      Number(column.getFacetedMinMaxValues()?.[1] ?? null)\n    : (faceting?.[column.id]?.max ?? null);\n\n  let handleMinRangeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n    setMin(event.target.value ? Number(event.target.value) : undefined);\n  }, []);\n\n  let handleMaxRangeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n    setMax(event.target.value ? Number(event.target.value) : undefined);\n  }, []);\n\n  let handleSelectFilterChange = useCallback(\n    (value: string) => {\n      if (clientFilters) {\n        column.setFilterValue(value);\n      }\n\n      if (onFiltering) {\n        onFiltering(addFilter(currentFilters, column.id, value));\n      }\n    },\n    [clientFilters, column, currentFilters, onFiltering],\n  );\n\n  let handleTextFilterChange = useCallback(\n    (value: string | undefined) => {\n      if (value) {\n        if (clientFilters) {\n          column.setFilterValue(value);\n        }\n\n        if (onFiltering) {\n          onFiltering(addFilter(currentFilters, column.id, value));\n        }\n      } else {\n        if (clientFilters) {\n          column.setFilterValue(undefined);\n        }\n\n        if (onFiltering) {\n          onFiltering(removeFilter(currentFilters, column.id));\n        }\n      }\n    },\n    [clientFilters, column, currentFilters, onFiltering],\n  );\n\n  let handleFilterChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n    if (event.target.value) {\n      setFilter(event.target.value);\n    } else {\n      setFilter(undefined);\n    }\n  }, []);\n\n  let handleFilterClick = useCallback(() => {\n    if (filterVariant === 'range') {\n      if (!min && !max) {\n        if (clientFilters) {\n          column.setFilterValue(undefined);\n        }\n\n        if (onFiltering) {\n          onFiltering(removeFilter(currentFilters, column.id));\n        }\n      } else {\n        if (clientFilters) {\n          column.setFilterValue([min, max]);\n        }\n\n        if (onFiltering) {\n          onFiltering(addFilter(currentFilters, column.id, [min, max]));\n        }\n      }\n    }\n\n    if ((filterVariant === 'text' && !facetingValues.length) || !filterVariant) {\n      if (filter) {\n        if (clientFilters) {\n          column.setFilterValue(filter);\n        }\n\n        if (onFiltering) {\n          onFiltering(addFilter(currentFilters, column.id, filter));\n        }\n      } else {\n        if (clientFilters) {\n          column.setFilterValue(undefined);\n        }\n\n        if (onFiltering) {\n          onFiltering(removeFilter(currentFilters, column.id));\n        }\n      }\n    }\n  }, [\n    clientFilters,\n    column,\n    currentFilters,\n    facetingValues.length,\n    filter,\n    filterVariant,\n    max,\n    min,\n    onFiltering,\n  ]);\n\n  let handleFilterSubmit = useCallback(\n    (event: FormEvent<HTMLFormElement>) => {\n      event.preventDefault();\n\n      if (filterVariant === 'range') {\n        if (min === undefined && max === undefined) {\n          if (clientFilters) {\n            column.setFilterValue(undefined);\n          }\n\n          if (onFiltering) {\n            onFiltering(removeFilter(currentFilters, column.id));\n          }\n        } else {\n          if (clientFilters) {\n            column.setFilterValue([min, max]);\n          }\n\n          if (onFiltering) {\n            onFiltering(addFilter(currentFilters, column.id, [min, max]));\n          }\n        }\n      }\n\n      if ((filterVariant === 'text' && !facetingValues.length) || !filterVariant) {\n        if (filter) {\n          if (clientFilters) {\n            column.setFilterValue(filter);\n          }\n\n          if (onFiltering) {\n            onFiltering(addFilter(currentFilters, column.id, filter));\n          }\n        } else {\n          if (clientFilters) {\n            column.setFilterValue(undefined);\n          }\n\n          if (onFiltering) {\n            onFiltering(removeFilter(currentFilters, column.id));\n          }\n        }\n      }\n    },\n    [\n      clientFilters,\n      column,\n      currentFilters,\n      facetingValues.length,\n      filter,\n      filterVariant,\n      max,\n      min,\n      onFiltering,\n    ],\n  );\n\n  let handleResetClick = useCallback(() => {\n    setFilter(undefined);\n    setMin(undefined);\n    setMax(undefined);\n\n    if (clientFilters) {\n      column.setFilterValue(undefined);\n    }\n\n    if (onFiltering) {\n      onFiltering(removeFilter(currentFilters, column.id));\n    }\n  }, [clientFilters, column, currentFilters, onFiltering]);\n\n  let filterElement = null;\n\n  if (filterVariant === 'range') {\n    filterElement = (\n      <Container spacing=\"small\">\n        <Input\n          max={String(facetingMax ?? '')}\n          min={String(facetingMin ?? '')}\n          placeholder={`Min ${facetingMin === null ? '' : `(${facetingMin})`}`}\n          type=\"number\"\n          value={min ?? ''}\n          onChange={handleMinRangeChange}\n        />\n        <Input\n          max={String(facetingMax ?? '')}\n          min={String(facetingMin ?? '')}\n          placeholder={`Max ${facetingMax === null ? '' : `(${facetingMax})`}`}\n          type=\"number\"\n          value={max ?? ''}\n          onChange={handleMaxRangeChange}\n        />\n        <Button submit aria-label=\"Filter\" variant=\"outline\" onClick={handleFilterClick}>\n          <Icon name=\"Funnel\" size=\"large\" />\n        </Button>\n        <Button aria-label=\"Cancel\" variant=\"outline\" onClick={handleResetClick}>\n          <Icon name=\"XMark\" size=\"large\" />\n        </Button>\n      </Container>\n    );\n  } else if (filterVariant === 'select' && facetingValues.length) {\n    filterElement = (\n      <Container spacing=\"small\">\n        <Listbox\n          items={(facetingValues as string[]).map((value: string) => ({\n            value,\n            label: `${value as unknown}`,\n          }))}\n          value={currentFilter as string}\n          onChange={handleSelectFilterChange}\n        />\n        <Button aria-label=\"Cancel\" variant=\"outline\" onClick={handleResetClick}>\n          <Icon name=\"XMark\" size=\"large\" />\n        </Button>\n      </Container>\n    );\n  } else if (filterVariant === 'text' && facetingValues.length) {\n    filterElement = (\n      <Container spacing=\"small\">\n        <Combobox\n          customValue\n          items={(facetingValues as string[]).map((value: string) => ({\n            value,\n            label: `${value as unknown}`,\n          }))}\n          value={(currentFilter ?? '') as string}\n          onChange={handleTextFilterChange}\n        />\n        <Button aria-label=\"Cancel\" variant=\"outline\" onClick={handleResetClick}>\n          <Icon name=\"XMark\" size=\"large\" />\n        </Button>\n      </Container>\n    );\n  } else if ((filterVariant === 'text' && !facetingValues.length) || !filterVariant) {\n    filterElement = (\n      <Container spacing=\"small\">\n        <Input value={filter ?? ''} onChange={handleFilterChange} />\n        <Button aria-label=\"Filter\" variant=\"outline\" onClick={handleFilterClick}>\n          <Icon name=\"Funnel\" size=\"large\" />\n        </Button>\n        <Button aria-label=\"Cancel\" variant=\"outline\" onClick={handleResetClick}>\n          <Icon name=\"XMark\" size=\"large\" />\n        </Button>\n      </Container>\n    );\n  }\n\n  return (\n    <Form onSubmit={handleFilterSubmit}>\n      <Field className=\"gap-2\">\n        <Label>\n          {flexRender(column.columnDef.header, {\n            table,\n            column,\n            // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions -- needed\n            header: {column} as Header<any, any>,\n          })}\n        </Label>\n        {filterElement}\n      </Field>\n    </Form>\n  );\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/build/components/data-table/internals/DataTableFilters.d.ts

@@ -0,0 +1,11 @@
+import { type Table } from '@tanstack/react-table';
+import { type DataTableProps } from '../DataTable.js';
+export type DataTableFiltersProps = {
+    table: Table<any>;
+    clientFilters: DataTableProps<any, any>['clientFilters'];
+    filters: DataTableProps<any, any>['filters'];
+    onFiltering: DataTableProps<any, any>['onFiltersChange'];
+    clientFaceting: DataTableProps<any, any>['clientFaceting'];
+    faceting: DataTableProps<any, any>['faceting'];
+};
+export declare function DataTableFilters({ table, clientFilters, filters: controlledFilters, onFiltering, clientFaceting, faceting, }: DataTableFiltersProps): import("react/jsx-runtime").JSX.Element;

package/build/components/data-table/internals/DataTableFilters.js

@@ -0,0 +1,40 @@
+"use strict";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Container } from "../../Container.js";
+import { Heading } from "../../Heading.js";
+import { DataTableFilter } from "./DataTableFilter.js";
+export function DataTableFilters({
+  table,
+  clientFilters,
+  filters: controlledFilters,
+  onFiltering,
+  clientFaceting,
+  faceting
+}) {
+  return /* @__PURE__ */ jsxs(
+    Container,
+    {
+      className: "hidden w-full justify-items-stretch bg-white sm:order-first sm:row-span-3 sm:border-r-2 sm:border-neutral-100 sm:pr-4 [[data-show-filters]_&]:flex",
+      direction: "column",
+      children: [
+        /* @__PURE__ */ jsx(Heading, { size: "small", children: "Filters" }),
+        table.getAllLeafColumns().map(
+          (column) => column.getCanFilter() ? /* @__PURE__ */ jsx(
+            DataTableFilter,
+            {
+              clientFaceting,
+              clientFilters,
+              column,
+              faceting,
+              filters: controlledFilters,
+              table,
+              onFiltering
+            },
+            column.id
+          ) : null
+        )
+      ]
+    }
+  );
+}
+//# sourceMappingURL=DataTableFilters.js.map

package/build/components/data-table/internals/DataTableFilters.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../source/components/data-table/internals/DataTableFilters.tsx"],
+  "sourcesContent": ["import {type Table} from '@tanstack/react-table';\n\nimport {Container} from '../../Container.js';\nimport {Heading} from '../../Heading.js';\nimport {type DataTableProps} from '../DataTable.js';\nimport {DataTableFilter} from './DataTableFilter.js';\n\nexport type DataTableFiltersProps = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  table: Table<any>;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  clientFilters: DataTableProps<any, any>['clientFilters'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  filters: DataTableProps<any, any>['filters'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  onFiltering: DataTableProps<any, any>['onFiltersChange'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  clientFaceting: DataTableProps<any, any>['clientFaceting'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  faceting: DataTableProps<any, any>['faceting'];\n};\n\nexport function DataTableFilters({\n  table,\n  clientFilters,\n  filters: controlledFilters,\n  onFiltering,\n  clientFaceting,\n  faceting,\n}: DataTableFiltersProps) {\n  return (\n    <Container\n      className=\"hidden w-full justify-items-stretch bg-white sm:order-first sm:row-span-3 sm:border-r-2 sm:border-neutral-100 sm:pr-4 [[data-show-filters]_&]:flex\"\n      direction=\"column\"\n    >\n      <Heading size=\"small\">Filters</Heading>\n\n      {table\n        .getAllLeafColumns()\n        .map((column) =>\n          column.getCanFilter() ?\n            <DataTableFilter\n              key={column.id}\n              clientFaceting={clientFaceting}\n              clientFilters={clientFilters}\n              column={column}\n              faceting={faceting}\n              filters={controlledFilters}\n              table={table}\n              onFiltering={onFiltering}\n            />\n          : null,\n        )}\n    </Container>\n  );\n}\n"],
+  "mappings": ";AA+BI,SAIE,KAJF;AA7BJ,SAAQ,iBAAgB;AACxB,SAAQ,eAAc;AAEtB,SAAQ,uBAAsB;AAiBvB,gBAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,WAAU;AAAA,MAEV;AAAA,4BAAC,WAAQ,MAAK,SAAQ,qBAAO;AAAA,QAE5B,MACE,kBAAkB,EAClB;AAAA,UAAI,CAAC,WACJ,OAAO,aAAa,IAClB;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA,SAAS;AAAA,cACT;AAAA,cACA;AAAA;AAAA,YAPK,OAAO;AAAA,UAQd,IACA;AAAA,QACJ;AAAA;AAAA;AAAA,EACJ;AAEJ;",
+  "names": []
+}

package/build/components/data-table/internals/DataTableHeader.d.ts

@@ -1,21 +1,12 @@
-import { type Header, type Table } from '@tanstack/react-table';
+import { type Header } from '@tanstack/react-table';
 import { type DataTableProps } from '../DataTable.js';
 export type DataTableHeaderProps = {
-    table: Table<any>;
     header: Header<any, any>;
     clientSorting: DataTableProps<any, any>['clientSorting'];
     hideSorting: DataTableProps<any, any>['hideSorting'];
     sorting: DataTableProps<any, any>['sorting'];
     onSorting: DataTableProps<any, any>['onSortingChange'];
-    clientFilters: DataTableProps<any, any>['clientFilters'];
-    hideFilters: DataTableProps<any, any>['hideFilters'];
-    filters: DataTableProps<any, any>['filters'];
-    onFiltering: DataTableProps<any, any>['onFiltersChange'];
-    clientFaceting: DataTableProps<any, any>['clientFaceting'];
-    faceting: DataTableProps<any, any>['faceting'];
-    hideColumnVisibility: DataTableProps<any, any>['hideColumnVisibility'];
     hideColumnOrder: DataTableProps<any, any>['hideColumnOrder'];
-    hideColumnPinning: DataTableProps<any, any>['hideColumnPinning'];
     hideColumnResizing: DataTableProps<any, any>['hideColumnResizing'];
 };
-export declare function DataTableHeader({ table, header, clientSorting, hideSorting, sorting: controlledSorting, onSorting, clientFilters, hideFilters, filters: controlledFilters, onFiltering, clientFaceting, faceting, hideColumnVisibility, hideColumnOrder, hideColumnPinning, hideColumnResizing, }: DataTableHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableHeader({ header, clientSorting, hideSorting, sorting: controlledSorting, onSorting, hideColumnOrder, hideColumnResizing, }: DataTableHeaderProps): import("react/jsx-runtime").JSX.Element;

package/build/components/data-table/internals/DataTableHeader.js

@@ -1,51 +1,24 @@
 "use strict";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useSortable } from "@dnd-kit/sortable";
-import { CSS } from "@dnd-kit/utilities";
 import { flexRender } from "@tanstack/react-table";
 import { useCallback } from "react";
 import { Button } from "../../Button.js";
 import { Container } from "../../Container.js";
-import { Field } from "../../Field.js";
 import { Icon } from "../../Icon.js";
-import { Popover } from "../../Popover.js";
-import { PopoverButton } from "../../PopoverButton.js";
-import { PopoverPanel } from "../../PopoverPanel.js";
 import { TableHeader } from "../../TableHeader.js";
-import { Text } from "../../Text.js";
-import { DataTableHeaderColumnCheckbox } from "./DataTableHeaderColumnCheckbox.js";
-import { DataTableHeaderFilter } from "./DataTableHeaderFilter.js";
 import { getCommonPinningClasses } from "./getCommonPinningClasses.js";
 import { getCommonPinningStyles } from "./getCommonPinningStyles.js";
 import { normalizeSorting } from "./normalizeSorting.js";
 export function DataTableHeader({
-  table,
   header,
   clientSorting,
   hideSorting = false,
   sorting: controlledSorting,
   onSorting,
-  clientFilters,
-  hideFilters = false,
-  filters: controlledFilters,
-  onFiltering,
-  clientFaceting,
-  faceting,
-  hideColumnVisibility = false,
   hideColumnOrder = false,
-  hideColumnPinning = false,
   hideColumnResizing = false
 }) {
-  let { attributes, isDragging, listeners, setNodeRef, transform } = useSortable({
-    id: header.column.id
-  });
   let sorting = clientSorting ? normalizeSorting(header) : normalizeSorting(header, controlledSorting);
-  let style = {
-    transform: CSS.Translate.toString(transform),
-    transition: "width transform 0.2s ease-in-out",
-    zIndex: isDragging ? 20 : void 0,
-    ...getCommonPinningStyles(header.column)
-  };
   let contentElement = null;
   if (!header.isPlaceholder) {
     contentElement = flexRender(header.column.columnDef.header, header.getContext());
@@ -97,22 +70,14 @@ export function DataTableHeader({
   let handleWidthReset = useCallback(() => {
     header.column.resetSize();
   }, [header.column]);
-  let handlePinLeftClick = useCallback(() => {
-    header.column.pin("left");
-  }, [header.column]);
-  let handlePinRightClick = useCallback(() => {
-    header.column.pin("right");
-  }, [header.column]);
-  let handleUnpinClick = useCallback(() => {
-    header.column.pin(false);
-  }, [header.column]);
-  let resolvedHideFilters = hideFilters || !header.column.getCanFilter();
   let resolvedHideSorting = hideSorting || !header.column.getCanSort();
-  let resolvedHideColumnPinning = hideColumnPinning || !header.column.getCanPin();
+  let style = {
+    transition: "width transform 0.2s ease-in-out",
+    ...getCommonPinningStyles(header.column)
+  };
   return /* @__PURE__ */ jsxs(
     TableHeader,
     {
-      ref: setNodeRef,
       className: getCommonPinningClasses(header.column),
       colSpan: header.colSpan,
       style,
@@ -121,79 +86,20 @@ export function DataTableHeader({
           "span",
           {
             className: hideColumnResizing ? "relative block overflow-hidden" : "relative mr-6 block overflow-hidden",
-            children: /* @__PURE__ */ jsxs(Container, { align: "center", justify: "end", spacing: "extra-small", children: [
-              resolvedHideSorting && hideColumnOrder ? contentElement : /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  className: hideColumnOrder ? "inline-flex" : "inline-flex cursor-move",
-                  size: "small",
-                  title,
-                  variant: "text",
-                  onClick: resolvedHideSorting ? void 0 : handleSortClick,
-                  ...hideColumnOrder ? {} : attributes,
-                  ...hideColumnOrder ? {} : listeners,
-                  children: [
-                    resolvedHideSorting ? null : sortElement,
-                    contentElement
-                  ]
-                }
-              ),
-              resolvedHideColumnPinning && resolvedHideFilters && hideColumnVisibility ? null : /* @__PURE__ */ jsxs(Popover, { children: [
-                /* @__PURE__ */ jsx(PopoverButton, { children: /* @__PURE__ */ jsx(Button, { "aria-label": "Settings", size: "small", variant: "text", children: /* @__PURE__ */ jsx(Icon, { name: "Cog6Tooth", size: "small" }) }) }),
-                /* @__PURE__ */ jsx(PopoverPanel, { anchor: "right start", children: /* @__PURE__ */ jsxs(Container, { direction: "column", spacing: "large", children: [
-                  resolvedHideColumnPinning ? null : /* @__PURE__ */ jsxs(Container, { direction: "row", spacing: "small", children: [
-                    /* @__PURE__ */ jsx(Text, { children: "Pin column" }),
-                    /* @__PURE__ */ jsx(Field, { children: /* @__PURE__ */ jsxs(Container, { spacing: "small", children: [
-                      header.column.getIsPinned() === "left" ? null : /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          "aria-label": "Pin to left",
-                          variant: "outline",
-                          onClick: handlePinLeftClick,
-                          children: /* @__PURE__ */ jsx(Icon, { name: "ArrowLeftEndOnRectangle", size: "large" })
-                        }
-                      ),
-                      header.column.getIsPinned() ? /* @__PURE__ */ jsx(Button, { "aria-label": "Unpin", variant: "outline", onClick: handleUnpinClick, children: /* @__PURE__ */ jsx(Icon, { name: "XMark", size: "large" }) }) : null,
-                      header.column.getIsPinned() === "right" ? null : /* @__PURE__ */ jsx(
-                        Button,
-                        {
-                          "aria-label": "Pin to right",
-                          variant: "outline",
-                          onClick: handlePinRightClick,
-                          children: /* @__PURE__ */ jsx(Icon, { name: "ArrowRightEndOnRectangle", size: "large" })
-                        }
-                      )
-                    ] }) })
-                  ] }),
-                  resolvedHideFilters ? null : /* @__PURE__ */ jsxs(Container, { direction: "column", spacing: "small", children: [
-                    /* @__PURE__ */ jsx(Text, { children: "Filter" }),
-                    /* @__PURE__ */ jsx(Field, { children: /* @__PURE__ */ jsx(
-                      DataTableHeaderFilter,
-                      {
-                        clientFaceting,
-                        clientFilters,
-                        column: header.column,
-                        faceting,
-                        filters: controlledFilters,
-                        table,
-                        onFiltering
-                      }
-                    ) })
-                  ] }),
-                  hideColumnVisibility ? null : /* @__PURE__ */ jsxs(Container, { direction: "column", spacing: "small", children: [
-                    /* @__PURE__ */ jsx(Text, { children: "Visible columns" }),
-                    table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsx(
-                      DataTableHeaderColumnCheckbox,
-                      {
-                        column,
-                        table
-                      },
-                      column.id
-                    ))
-                  ] })
-                ] }) })
-              ] })
-            ] })
+            children: /* @__PURE__ */ jsx(Container, { align: "center", justify: "end", spacing: "extra-small", children: resolvedHideSorting && hideColumnOrder ? contentElement : /* @__PURE__ */ jsxs(
+              Button,
+              {
+                className: "inline-flex",
+                size: "small",
+                title,
+                variant: "text",
+                onClick: resolvedHideSorting ? void 0 : handleSortClick,
+                children: [
+                  resolvedHideSorting ? null : sortElement,
+                  contentElement
+                ]
+              }
+            ) })
           }
         ),
         hideColumnResizing ? null : /* @__PURE__ */ jsx(