@jakubmazanec/ui 0.1.0-unstable.081bdf1

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

@@ -0,0 +1,418 @@
+"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,
+  useDeferredValue,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { Button } from "../Button.js";
+import { Checkbox } from "../Checkbox.js";
+import { CheckboxField } from "../CheckboxField.js";
+import { Combobox } from "../Combobox.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 { Popover } from "../Popover.js";
+import { PopoverButton } from "../PopoverButton.js";
+import { PopoverPanel } from "../PopoverPanel.js";
+import { TableHeader } from "../TableHeader.js";
+import { getCommonPinningClasses } from "./internals/getCommonPinningClasses.js";
+import { getCommonPinningStyles } from "./internals/getCommonPinningStyles.js";
+export function DataTableHeader({
+  header,
+  table,
+  sorting: controlledSorting,
+  onSorting,
+  filters: controlledFilters,
+  onFiltering,
+  faceting
+}) {
+  let { attributes, isDragging, listeners, setNodeRef, transform } = useSortable({
+    id: header.column.id
+  });
+  let handleSortClick = useCallback(() => {
+    if (onSorting) {
+      if (controlledSorting === false || controlledSorting === void 0 || controlledSorting.column !== header.column.id) {
+        onSorting({
+          column: header.column.id,
+          direction: "ascending"
+        });
+      } else if (controlledSorting.column === header.column.id && controlledSorting.direction === "ascending") {
+        onSorting({
+          column: header.column.id,
+          direction: "descending"
+        });
+      } else if (controlledSorting.column === header.column.id && controlledSorting.direction === "descending") {
+        onSorting(false);
+      }
+    }
+  }, [controlledSorting, onSorting, header.column.id]);
+  let handleWidthReset = useCallback(() => {
+    header.column.resetSize();
+  }, [header.column]);
+  let style = {
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    zIndex: isDragging ? 20 : void 0,
+    ...getCommonPinningStyles(header.column)
+  };
+  let isSorted = header.column.getIsSorted();
+  let contentElement = null;
+  if (!header.isPlaceholder) {
+    contentElement = flexRender(header.column.columnDef.header, header.getContext());
+  }
+  let sortElement = null;
+  if (onSorting) {
+    if (controlledSorting === false || controlledSorting === void 0 || controlledSorting.column !== header.column.id) {
+      sortElement = /* @__PURE__ */ jsx(Icon, { name: "ArrowsUpDown", size: "small", className: "text-gray-200 select-none" });
+    } else if (controlledSorting.direction === "ascending" && controlledSorting.column === header.column.id) {
+      sortElement = /* @__PURE__ */ jsx(Icon, { name: "ArrowUp", size: "small", className: "text-gray-950 select-none" });
+    } else if (controlledSorting.direction === "descending" && controlledSorting.column === header.column.id) {
+      sortElement = /* @__PURE__ */ jsx(Icon, { name: "ArrowDown", size: "small", className: "text-gray-950 select-none" });
+    }
+  } else {
+    if (!header.isPlaceholder && isSorted === false) {
+      sortElement = /* @__PURE__ */ jsx(Icon, { name: "ArrowsUpDown", size: "small", className: "text-gray-200 select-none" });
+    }
+    if (!header.isPlaceholder && isSorted === "asc") {
+      sortElement = /* @__PURE__ */ jsx(Icon, { name: "ArrowUp", size: "small", className: "text-gray-950 select-none" });
+    }
+    if (!header.isPlaceholder && isSorted === "desc") {
+      sortElement = /* @__PURE__ */ jsx(Icon, { name: "ArrowDown", size: "small", className: "text-gray-950 select-none" });
+    }
+  }
+  let title;
+  if (onSorting) {
+    if (controlledSorting === false || controlledSorting === void 0) {
+      title = "Sort ascending";
+    } else if (controlledSorting.direction === "ascending" && controlledSorting.column === header.column.id) {
+      title = "Sort descending";
+    } else if (controlledSorting.direction === "descending" && controlledSorting.column === header.column.id) {
+      title = "Clear sort";
+    }
+  } else if (header.column.getCanSort()) {
+    if (header.column.getNextSortingOrder() === "asc") {
+      title = "Sort ascending";
+    } else if (header.column.getNextSortingOrder() === "desc") {
+      title = "Sort descending";
+    } else {
+      title = "Clear sort";
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    TableHeader,
+    {
+      ref: setNodeRef,
+      colSpan: header.colSpan,
+      className: getCommonPinningClasses(header.column),
+      style,
+      children: /* @__PURE__ */ jsx("span", { className: "w-full overflow-hidden", children: /* @__PURE__ */ jsxs("span", { className: "flex justify-between items-center gap-x-1", children: [
+        header.column.getCanSort() ? /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "text",
+            size: "small",
+            className: "inline-flex mr-auto cursor-move",
+            title,
+            onClick: onSorting ? handleSortClick : header.column.getToggleSortingHandler(),
+            ...attributes,
+            ...listeners,
+            children: [
+              sortElement,
+              contentElement
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(Popover, { children: [
+          /* @__PURE__ */ jsx(PopoverButton, { children: /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", "aria-label": "Settings", children: /* @__PURE__ */ jsx(Icon, { size: "small", name: "Cog6Tooth" }) }) }),
+          /* @__PURE__ */ jsx(PopoverPanel, { anchor: "right start", className: "flex flex-col gap-y-2", children: /* @__PURE__ */ jsxs(Form, { children: [
+            header.column.getCanPin() ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Pin column" }),
+              /* @__PURE__ */ jsx(Field, { children: /* @__PURE__ */ jsxs("div", { className: "flex gap-x-2", children: [
+                header.column.getIsPinned() === "left" ? null : /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    "aria-label": "Pin to left",
+                    onClick: () => {
+                      header.column.pin("left");
+                    },
+                    children: /* @__PURE__ */ jsx(Icon, { size: "large", name: "ArrowLeftEndOnRectangle" })
+                  }
+                ),
+                header.column.getIsPinned() ? /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    "aria-label": "Unpin",
+                    onClick: () => {
+                      header.column.pin(false);
+                    },
+                    children: /* @__PURE__ */ jsx(Icon, { size: "large", name: "XMark" })
+                  }
+                ) : null,
+                header.column.getIsPinned() === "right" ? null : /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "outline",
+                    "aria-label": "Pin to right",
+                    onClick: () => {
+                      header.column.pin("right");
+                    },
+                    children: /* @__PURE__ */ jsx(Icon, { size: "large", name: "ArrowRightEndOnRectangle" })
+                  }
+                )
+              ] }) })
+            ] }) : null,
+            header.column.getCanFilter() ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Filter" }),
+              /* @__PURE__ */ jsx(Field, { children: /* @__PURE__ */ jsx(
+                DataTableHeaderFilter,
+                {
+                  column: header.column,
+                  filters: controlledFilters,
+                  onFiltering,
+                  faceting
+                }
+              ) })
+            ] }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Visible columns" }),
+              table.getAllLeafColumns().map((column) => /* @__PURE__ */ jsx(DataTableHeaderColumnCheckbox, { column, table }, column.id))
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "invisible",
+            size: "small",
+            "aria-label": "Resize",
+            className: "cursor-col-resize select-none",
+            onDoubleClick: handleWidthReset,
+            onMouseDown: header.getResizeHandler(),
+            onTouchStart: header.getResizeHandler(),
+            children: /* @__PURE__ */ jsx(Icon, { size: "small", name: "ArrowsRightLeft" })
+          }
+        )
+      ] }) })
+    }
+  );
+}
+function DataTableHeaderColumnCheckbox({ column, table }) {
+  let handleChange = useCallback(
+    (checked) => {
+      if (!checked && table.getFlatHeaders().length >= 2) {
+        column.toggleVisibility(checked);
+      } else if (checked) {
+        column.toggleVisibility(checked);
+      }
+    },
+    [column, table]
+  );
+  return /* @__PURE__ */ jsxs(CheckboxField, { children: [
+    /* @__PURE__ */ jsx(
+      Checkbox,
+      {
+        checked: column.getIsVisible(),
+        disabled: table.getFlatHeaders().length <= 1 && column.getIsVisible(),
+        onChange: handleChange
+      }
+    ),
+    /* @__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 }
+    }) })
+  ] }, column.id);
+}
+function addFilter(filters, column, newFilter) {
+  let newFilters = [];
+  if (filters) {
+    let wasUpdated = false;
+    for (let filter of filters) {
+      if (filter.column === column) {
+        newFilters.push({
+          column,
+          filter: newFilter
+        });
+        wasUpdated = true;
+      } else {
+        newFilters.push(filter);
+      }
+    }
+    if (!wasUpdated) {
+      newFilters.push({
+        column,
+        filter: newFilter
+      });
+    }
+  } else {
+    newFilters.push({
+      column,
+      filter: newFilter
+    });
+  }
+  return newFilters;
+}
+function removeFilter(filters, column) {
+  let newFilters = [];
+  if (filters) {
+    for (let filter of filters) {
+      if (filter.column !== column) {
+        newFilters.push(filter);
+      }
+    }
+  } else {
+    return false;
+  }
+  if (!newFilters.length) {
+    return false;
+  }
+  return newFilters;
+}
+function DataTableHeaderFilter({
+  column,
+  filters: controlledFilters,
+  onFiltering,
+  faceting
+}) {
+  let { filterVariant } = column.columnDef.meta ?? {};
+  let filter = onFiltering ? controlledFilters ? controlledFilters.find((filter2) => filter2.column === column.id)?.filter : void 0 : column.getFilterValue();
+  let currentMin = filterVariant === "range" ? filter?.[0] ?? void 0 : void 0;
+  let currentMax = filterVariant === "range" ? filter?.[1] ?? void 0 : void 0;
+  let [min, setMin] = useState(currentMin);
+  let [max, setMax] = useState(currentMax);
+  let deferredMin = useDeferredValue(min);
+  let deferredMax = useDeferredValue(max);
+  useEffect(() => {
+    if (currentMin === deferredMin && currentMax === deferredMax) {
+      return;
+    }
+    if (!deferredMin && !deferredMax) {
+      if (onFiltering) {
+        onFiltering(removeFilter(controlledFilters, column.id));
+      } else {
+        column.setFilterValue(void 0);
+      }
+    } else if (onFiltering) {
+      onFiltering(addFilter(controlledFilters, column.id, [deferredMin, deferredMax]));
+    } else {
+      column.setFilterValue([deferredMin, deferredMax]);
+    }
+  }, [deferredMin, deferredMax, column, onFiltering, controlledFilters, currentMin, currentMax]);
+  let handleResetClick = useCallback(() => {
+    setMin(void 0);
+    setMax(void 0);
+    if (onFiltering) {
+      onFiltering(removeFilter(controlledFilters, column.id));
+    } else {
+      column.setFilterValue(void 0);
+    }
+  }, [column, controlledFilters, onFiltering]);
+  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 handleSelectChange = useCallback(
+    (value) => {
+      if (onFiltering) {
+        onFiltering(addFilter(controlledFilters, column.id, value));
+      } else {
+        column.setFilterValue(value);
+      }
+    },
+    [column, controlledFilters, onFiltering]
+  );
+  let handleTextChange = useCallback(
+    (value) => {
+      if (onFiltering) {
+        onFiltering(addFilter(controlledFilters, column.id, value));
+      } else {
+        column.setFilterValue(value);
+      }
+    },
+    [column, controlledFilters, onFiltering]
+  );
+  let facetingValues = useMemo(() => {
+    if (onFiltering) {
+      return faceting?.[column.id]?.values ?? [];
+    }
+    if (filterVariant === "range") {
+      return [];
+    }
+    return [...column.getFacetedUniqueValues().keys()].sort().slice(0, 5e3);
+  }, [column, faceting, filterVariant, onFiltering]);
+  let facetingMin = onFiltering ? faceting?.[column.id]?.min ?? null : Number(column.getFacetedMinMaxValues()?.[0] ?? null);
+  let facetingMax = onFiltering ? faceting?.[column.id]?.max ?? null : Number(column.getFacetedMinMaxValues()?.[1] ?? null);
+  if (filterVariant === "range") {
+    return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: "flex space-x-2", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "number",
+          min: String(facetingMin ?? ""),
+          max: String(facetingMax ?? ""),
+          value: min ?? "",
+          placeholder: `Min ${facetingMin === null ? "" : `(${facetingMin})`}`,
+          onChange: handleMinRangeChange
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          type: "number",
+          min: String(facetingMin ?? ""),
+          max: String(facetingMax ?? ""),
+          value: max ?? "",
+          placeholder: `Max ${facetingMax === null ? "" : `(${facetingMax})`}`,
+          onChange: handleMaxRangeChange
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", "aria-label": "Cancel", onClick: handleResetClick, children: /* @__PURE__ */ jsx(Icon, { size: "large", name: "XMark" }) })
+    ] }) });
+  }
+  if (filterVariant === "select") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex gap-x-2", children: [
+      /* @__PURE__ */ jsx(
+        Listbox,
+        {
+          value: filter,
+          items: facetingValues.map((value) => ({
+            value,
+            label: `${value}`
+          })),
+          onChange: handleSelectChange
+        }
+      ),
+      /* @__PURE__ */ jsx(Button, { variant: "outline", "aria-label": "Cancel", onClick: handleResetClick, children: /* @__PURE__ */ jsx(Icon, { size: "large", name: "XMark" }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex gap-x-2", children: [
+    /* @__PURE__ */ jsx(
+      Combobox,
+      {
+        customValue: true,
+        value: filter ?? "",
+        items: facetingValues.map((value) => ({
+          value,
+          label: `${value}`
+        })),
+        onChange: handleTextChange
+      }
+    ),
+    /* @__PURE__ */ jsx(Button, { variant: "outline", "aria-label": "Cancel", onClick: handleResetClick, children: /* @__PURE__ */ jsx(Icon, { size: "large", name: "XMark" }) })
+  ] });
+}
+//# sourceMappingURL=DataTableHeader.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../source/components/data-table/DataTableHeader.tsx"],
+  "sourcesContent": ["// TODO: fix somehow\n/* eslint-disable complexity -- TODO */\nimport {useSortable} from '@dnd-kit/sortable';\nimport {CSS} from '@dnd-kit/utilities';\nimport {type Column, flexRender, type Header, type Table} from '@tanstack/react-table';\nimport {\n  type ChangeEvent,\n  type CSSProperties,\n  useCallback,\n  useDeferredValue,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\n\nimport {Button} from '../Button.js';\nimport {Checkbox} from '../Checkbox.js';\nimport {CheckboxField} from '../CheckboxField.js';\nimport {Combobox} from '../Combobox.js';\nimport {type DataTableProps} from '../DataTable.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 {Popover} from '../Popover.js';\nimport {PopoverButton} from '../PopoverButton.js';\nimport {PopoverPanel} from '../PopoverPanel.js';\nimport {TableHeader} from '../TableHeader.js';\nimport {getCommonPinningClasses} from './internals/getCommonPinningClasses.js';\nimport {getCommonPinningStyles} from './internals/getCommonPinningStyles.js';\n\ntype DataTableHeaderProps = {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  header: Header<any, any>;\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  sorting: DataTableProps<any, any>['sorting'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  onSorting: DataTableProps<any, any>['onSorting'];\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>['onFiltering'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  faceting: DataTableProps<any, any>['faceting'];\n};\n\nexport function DataTableHeader({\n  header,\n  table,\n  sorting: controlledSorting,\n  onSorting,\n  filters: controlledFilters,\n  onFiltering,\n  faceting,\n}: DataTableHeaderProps) {\n  let {attributes, isDragging, listeners, setNodeRef, transform} = useSortable({\n    id: header.column.id,\n  });\n\n  let handleSortClick = useCallback(() => {\n    if (onSorting) {\n      if (\n        controlledSorting === false ||\n        controlledSorting === undefined ||\n        controlledSorting.column !== header.column.id\n      ) {\n        onSorting({\n          column: header.column.id,\n          direction: 'ascending',\n        });\n      } else if (\n        controlledSorting.column === header.column.id &&\n        controlledSorting.direction === 'ascending'\n      ) {\n        onSorting({\n          column: header.column.id,\n          direction: 'descending',\n        });\n      } else if (\n        controlledSorting.column === header.column.id &&\n        controlledSorting.direction === 'descending'\n      ) {\n        onSorting(false);\n      }\n    }\n  }, [controlledSorting, onSorting, header.column.id]);\n\n  let handleWidthReset = useCallback(() => {\n    header.column.resetSize();\n  }, [header.column]);\n\n  let style: CSSProperties = {\n    transform: CSS.Translate.toString(transform),\n    transition: 'width transform 0.2s ease-in-out',\n    zIndex: isDragging ? 20 : undefined,\n    ...getCommonPinningStyles(header.column),\n  };\n\n  let isSorted = header.column.getIsSorted();\n\n  let contentElement = null;\n\n  if (!header.isPlaceholder) {\n    contentElement = flexRender(header.column.columnDef.header, header.getContext());\n  }\n\n  let sortElement = null;\n\n  if (onSorting) {\n    if (\n      controlledSorting === false ||\n      controlledSorting === undefined ||\n      controlledSorting.column !== header.column.id\n    ) {\n      sortElement = <Icon name=\"ArrowsUpDown\" size=\"small\" className=\"text-gray-200 select-none\" />;\n    } else if (\n      controlledSorting.direction === 'ascending' &&\n      controlledSorting.column === header.column.id\n    ) {\n      sortElement = <Icon name=\"ArrowUp\" size=\"small\" className=\"text-gray-950 select-none\" />;\n    } else if (\n      controlledSorting.direction === 'descending' &&\n      controlledSorting.column === header.column.id\n    ) {\n      sortElement = <Icon name=\"ArrowDown\" size=\"small\" className=\"text-gray-950 select-none\" />;\n    }\n  } else {\n    if (!header.isPlaceholder && isSorted === false) {\n      sortElement = <Icon name=\"ArrowsUpDown\" size=\"small\" className=\"text-gray-200 select-none\" />;\n    }\n\n    if (!header.isPlaceholder && isSorted === 'asc') {\n      sortElement = <Icon name=\"ArrowUp\" size=\"small\" className=\"text-gray-950 select-none\" />;\n    }\n\n    if (!header.isPlaceholder && isSorted === 'desc') {\n      sortElement = <Icon name=\"ArrowDown\" size=\"small\" className=\"text-gray-950 select-none\" />;\n    }\n  }\n\n  let title: string | undefined;\n\n  if (onSorting) {\n    if (controlledSorting === false || controlledSorting === undefined) {\n      title = 'Sort ascending';\n    } else if (\n      controlledSorting.direction === 'ascending' &&\n      controlledSorting.column === header.column.id\n    ) {\n      title = 'Sort descending';\n    } else if (\n      controlledSorting.direction === 'descending' &&\n      controlledSorting.column === header.column.id\n    ) {\n      title = 'Clear sort';\n    }\n  } else if (header.column.getCanSort()) {\n    if (header.column.getNextSortingOrder() === 'asc') {\n      title = 'Sort ascending';\n    } else if (header.column.getNextSortingOrder() === 'desc') {\n      title = 'Sort descending';\n    } else {\n      title = 'Clear sort';\n    }\n  }\n\n  return (\n    <TableHeader\n      ref={setNodeRef}\n      colSpan={header.colSpan}\n      className={getCommonPinningClasses(header.column)}\n      style={style}\n    >\n      <span className=\"w-full overflow-hidden\">\n        <span className=\"flex justify-between items-center gap-x-1\">\n          {header.column.getCanSort() ?\n            <Button\n              variant=\"text\"\n              size=\"small\"\n              className=\"inline-flex mr-auto cursor-move\"\n              title={title}\n              onClick={onSorting ? handleSortClick : header.column.getToggleSortingHandler()}\n              {...attributes}\n              {...listeners}\n            >\n              {sortElement}\n              {contentElement}\n            </Button>\n          : null}\n          <Popover>\n            <PopoverButton>\n              <Button variant=\"text\" size=\"small\" aria-label=\"Settings\">\n                <Icon size=\"small\" name=\"Cog6Tooth\" />\n              </Button>\n            </PopoverButton>\n            <PopoverPanel anchor=\"right start\" className=\"flex flex-col gap-y-2\">\n              <Form>\n                {header.column.getCanPin() ?\n                  <div className=\"flex flex-col gap-y-2\">\n                    <p className=\"text-sm\">Pin column</p>\n\n                    <Field>\n                      <div className=\"flex gap-x-2\">\n                        {header.column.getIsPinned() === 'left' ? null : (\n                          <Button\n                            variant=\"outline\"\n                            aria-label=\"Pin to left\"\n                            onClick={() => {\n                              header.column.pin('left');\n                            }}\n                          >\n                            <Icon size=\"large\" name=\"ArrowLeftEndOnRectangle\" />\n                          </Button>\n                        )}\n                        {header.column.getIsPinned() ?\n                          <Button\n                            variant=\"outline\"\n                            aria-label=\"Unpin\"\n                            onClick={() => {\n                              header.column.pin(false);\n                            }}\n                          >\n                            <Icon size=\"large\" name=\"XMark\" />\n                          </Button>\n                        : null}\n                        {header.column.getIsPinned() === 'right' ? null : (\n                          <Button\n                            variant=\"outline\"\n                            aria-label=\"Pin to right\"\n                            onClick={() => {\n                              header.column.pin('right');\n                            }}\n                          >\n                            <Icon size=\"large\" name=\"ArrowRightEndOnRectangle\" />\n                          </Button>\n                        )}\n                      </div>\n                    </Field>\n                  </div>\n                : null}\n\n                {header.column.getCanFilter() ?\n                  <div className=\"flex flex-col gap-y-2\">\n                    <p className=\"text-sm\">Filter</p>\n\n                    <Field>\n                      <DataTableHeaderFilter\n                        column={header.column}\n                        filters={controlledFilters}\n                        onFiltering={onFiltering}\n                        faceting={faceting}\n                      />\n                    </Field>\n                  </div>\n                : null}\n\n                <div className=\"flex flex-col gap-y-2\">\n                  <p className=\"text-sm\">Visible columns</p>\n\n                  {table.getAllLeafColumns().map((column) => (\n                    <DataTableHeaderColumnCheckbox key={column.id} column={column} table={table} />\n                  ))}\n                </div>\n              </Form>\n            </PopoverPanel>\n          </Popover>\n          <Button\n            variant=\"invisible\"\n            size=\"small\"\n            aria-label=\"Resize\"\n            className=\"cursor-col-resize select-none\"\n            onDoubleClick={handleWidthReset}\n            onMouseDown={header.getResizeHandler()}\n            onTouchStart={header.getResizeHandler()}\n          >\n            <Icon size=\"small\" name=\"ArrowsRightLeft\" />\n          </Button>\n        </span>\n      </span>\n    </TableHeader>\n  );\n}\n\ntype DataTableHeaderColumnCheckboxProps = {\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  table: Table<any>;\n};\n\nfunction DataTableHeaderColumnCheckbox({column, table}: DataTableHeaderColumnCheckboxProps) {\n  let handleChange = useCallback(\n    (checked: boolean) => {\n      if (!checked && table.getFlatHeaders().length >= 2) {\n        column.toggleVisibility(checked);\n      } else if (checked) {\n        column.toggleVisibility(checked);\n      }\n    },\n    [column, table],\n  );\n\n  return (\n    <CheckboxField key={column.id}>\n      <Checkbox\n        checked={column.getIsVisible()}\n        disabled={table.getFlatHeaders().length <= 1 && column.getIsVisible()}\n        onChange={handleChange}\n      />\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    </CheckboxField>\n  );\n}\n\nfunction addFilter(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  filters: DataTableProps<any, any>['filters'],\n  column: string,\n  newFilter: unknown,\n) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  let newFilters: DataTableProps<any, any>['filters'] = [];\n\n  if (filters) {\n    let wasUpdated = false;\n\n    for (let filter of filters) {\n      if (filter.column === column) {\n        newFilters.push({\n          column,\n          filter: newFilter as string | [number, number],\n        });\n\n        wasUpdated = true;\n      } else {\n        newFilters.push(filter);\n      }\n    }\n\n    if (!wasUpdated) {\n      newFilters.push({\n        column,\n        filter: newFilter as string | [number, number],\n      });\n    }\n  } else {\n    newFilters.push({\n      column,\n      filter: newFilter as string | [number, number],\n    });\n  }\n\n  return newFilters;\n}\n\nfunction removeFilter(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  filters: DataTableProps<any, any>['filters'],\n  column: string,\n) {\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  let newFilters: DataTableProps<any, any>['filters'] = [];\n\n  if (filters) {\n    for (let filter of filters) {\n      if (filter.column !== column) {\n        newFilters.push(filter);\n      }\n    }\n  } else {\n    return false;\n  }\n\n  if (!newFilters.length) {\n    return false;\n  }\n\n  return newFilters;\n}\n\ntype DataTableHeaderFilterProps = {\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  filters: DataTableProps<any, any>['filters'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  onFiltering: DataTableProps<any, any>['onFiltering'];\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\n  faceting: DataTableProps<any, any>['faceting'];\n};\n\nfunction DataTableHeaderFilter({\n  column,\n  filters: controlledFilters,\n  onFiltering,\n  faceting,\n}: DataTableHeaderFilterProps) {\n  let {filterVariant} = column.columnDef.meta ?? {};\n\n  let filter =\n    onFiltering ?\n      controlledFilters ? controlledFilters.find((filter) => filter.column === column.id)?.filter\n      : undefined\n    : column.getFilterValue();\n\n  let currentMin =\n    filterVariant === 'range' ?\n      (filter as [number?, number?] | undefined)?.[0] ?? undefined\n    : undefined;\n  let currentMax =\n    filterVariant === 'range' ?\n      (filter as [number?, number?] | undefined)?.[1] ?? undefined\n    : undefined;\n\n  let [min, setMin] = useState(currentMin);\n  let [max, setMax] = useState(currentMax);\n\n  let deferredMin = useDeferredValue(min);\n  let deferredMax = useDeferredValue(max);\n\n  useEffect(() => {\n    if (currentMin === deferredMin && currentMax === deferredMax) {\n      return;\n    }\n\n    if (!deferredMin && !deferredMax) {\n      if (onFiltering) {\n        onFiltering(removeFilter(controlledFilters, column.id));\n      } else {\n        column.setFilterValue(undefined);\n      }\n    } else if (onFiltering) {\n      onFiltering(addFilter(controlledFilters, column.id, [deferredMin, deferredMax]));\n    } else {\n      column.setFilterValue([deferredMin, deferredMax]);\n    }\n  }, [deferredMin, deferredMax, column, onFiltering, controlledFilters, currentMin, currentMax]);\n\n  let handleResetClick = useCallback(() => {\n    setMin(undefined);\n    setMax(undefined);\n\n    if (onFiltering) {\n      onFiltering(removeFilter(controlledFilters, column.id));\n    } else {\n      column.setFilterValue(undefined);\n    }\n  }, [column, controlledFilters, onFiltering]);\n\n  let handleMinRangeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n    setMin(event.target.value ? Number(event.target.value) : undefined);\n    // if (onFiltering) {\n    //   onFiltering(\n    //     addFilter(controlledFilters, column.id, [\n    //       event.target.value,\n    //       (filter as [number, number] | undefined)?.[1],\n    //     ]),\n    //   );\n    // } else {\n    //   column.setFilterValue((old: [number, number] | undefined) => [\n    //     event.target.value,\n    //     old?.[1],\n    //   ]);\n    // }\n  }, []);\n\n  let handleMaxRangeChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n    setMax(event.target.value ? Number(event.target.value) : undefined);\n    // if (onFiltering) {\n    //   onFiltering(\n    //     addFilter(controlledFilters, column.id, [\n    //       (filter as [number, number] | undefined)?.[0],\n    //       event.target.value,\n    //     ]),\n    //   );\n    // } else {\n    //   column.setFilterValue((old: [number, number] | undefined) => [\n    //     old?.[0],\n    //     event.target.value,\n    //   ]);\n    // }\n  }, []);\n\n  let handleSelectChange = useCallback(\n    (value: string) => {\n      if (onFiltering) {\n        onFiltering(addFilter(controlledFilters, column.id, value));\n      } else {\n        column.setFilterValue(value);\n      }\n    },\n    [column, controlledFilters, onFiltering],\n  );\n\n  let handleTextChange = useCallback(\n    (value: string | undefined) => {\n      if (onFiltering) {\n        onFiltering(addFilter(controlledFilters, column.id, value));\n      } else {\n        column.setFilterValue(value);\n      }\n    },\n    [column, controlledFilters, onFiltering],\n  );\n\n  let facetingValues = useMemo(() => {\n    if (onFiltering) {\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  }, [column, faceting, filterVariant, onFiltering]);\n\n  let facetingMin =\n    onFiltering ?\n      faceting?.[column.id]?.min ?? null\n    : Number(column.getFacetedMinMaxValues()?.[0] ?? null);\n  let facetingMax =\n    onFiltering ?\n      faceting?.[column.id]?.max ?? null\n    : Number(column.getFacetedMinMaxValues()?.[1] ?? null);\n\n  if (filterVariant === 'range') {\n    return (\n      <div>\n        <div className=\"flex space-x-2\">\n          <Input\n            type=\"number\"\n            min={String(facetingMin ?? '')}\n            max={String(facetingMax ?? '')}\n            // value={(filter as [number?, number?] | undefined)?.[0] ?? ''}\n            value={min ?? ''}\n            placeholder={`Min ${facetingMin === null ? '' : `(${facetingMin})`}`}\n            onChange={handleMinRangeChange}\n          />\n          <Input\n            type=\"number\"\n            min={String(facetingMin ?? '')}\n            max={String(facetingMax ?? '')}\n            // value={(filter as [number?, number?] | undefined)?.[1] ?? ''}\n            value={max ?? ''}\n            placeholder={`Max ${facetingMax === null ? '' : `(${facetingMax})`}`}\n            onChange={handleMaxRangeChange}\n          />\n          <Button variant=\"outline\" aria-label=\"Cancel\" onClick={handleResetClick}>\n            <Icon size=\"large\" name=\"XMark\" />\n          </Button>\n        </div>\n      </div>\n    );\n  }\n\n  if (filterVariant === 'select') {\n    return (\n      <div className=\"flex gap-x-2\">\n        <Listbox\n          value={filter as string}\n          items={(facetingValues as string[]).map((value: string) => ({\n            value,\n            label: `${value as unknown}`,\n          }))}\n          onChange={handleSelectChange}\n        />\n        <Button variant=\"outline\" aria-label=\"Cancel\" onClick={handleResetClick}>\n          <Icon size=\"large\" name=\"XMark\" />\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex gap-x-2\">\n      <Combobox\n        customValue\n        value={(filter ?? '') as string}\n        items={(facetingValues as string[]).map((value: string) => ({\n          value,\n          label: `${value as unknown}`,\n        }))}\n        onChange={handleTextChange}\n      />\n      <Button variant=\"outline\" aria-label=\"Cancel\" onClick={handleResetClick}>\n        <Icon size=\"large\" name=\"XMark\" />\n      </Button>\n    </div>\n  );\n}\n"],
+  "mappings": "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",
+  "names": ["filter"]
+}

package/build/components/data-table/DataTablePageButton.d.ts

@@ -0,0 +1,6 @@
+export type DataTablePageButtonProps = {
+    page: number;
+    isSelected: boolean;
+    onClick: (page: number) => void;
+};
+export declare function DataTablePageButton({ page, isSelected, onClick }: DataTablePageButtonProps): import("react/jsx-runtime").JSX.Element;

package/build/components/data-table/DataTablePageButton.js

@@ -0,0 +1,11 @@
+"use strict";
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { Button } from "../Button.js";
+export function DataTablePageButton({ page, isSelected, onClick }) {
+  let handleClick = useCallback(() => {
+    onClick(page);
+  }, [onClick, page]);
+  return /* @__PURE__ */ jsx(Button, { variant: isSelected ? "solid" : "outline", onClick: handleClick, children: page });
+}
+//# sourceMappingURL=DataTablePageButton.js.map

package/build/components/data-table/DataTablePageButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../source/components/data-table/DataTablePageButton.tsx"],
+  "sourcesContent": ["import {useCallback} from 'react';\n\nimport {Button} from '../Button.js';\n\nexport type DataTablePageButtonProps = {\n  page: number;\n  isSelected: boolean;\n  onClick: (page: number) => void;\n};\n\nexport function DataTablePageButton({page, isSelected, onClick}: DataTablePageButtonProps) {\n  let handleClick = useCallback(() => {\n    onClick(page);\n  }, [onClick, page]);\n\n  return (\n    <Button variant={isSelected ? 'solid' : 'outline'} onClick={handleClick}>\n      {page}\n    </Button>\n  );\n}\n"],
+  "mappings": ";AAgBI;AAhBJ,SAAQ,mBAAkB;AAE1B,SAAQ,cAAa;AAQd,gBAAS,oBAAoB,EAAC,MAAM,YAAY,QAAO,GAA6B;AACzF,MAAI,cAAc,YAAY,MAAM;AAClC,YAAQ,IAAI;AAAA,EACd,GAAG,CAAC,SAAS,IAAI,CAAC;AAElB,SACE,oBAAC,UAAO,SAAS,aAAa,UAAU,WAAW,SAAS,aACzD,gBACH;AAEJ;",
+  "names": []
+}

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

@@ -0,0 +1,3 @@
+export declare const MAX_PAGE_BUTTONS_COUNT = 10;
+export declare const PAGE_SIZES: readonly [10, 25, 50, 75, 100];
+export declare const DEFAULT_PAGE_SIZE = 50;

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

@@ -0,0 +1,5 @@
+"use strict";
+export const MAX_PAGE_BUTTONS_COUNT = 10;
+export const PAGE_SIZES = [10, 25, 50, 75, 100];
+export const DEFAULT_PAGE_SIZE = 50;
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../source/components/data-table/internals/constants.ts"],
+  "sourcesContent": ["export const MAX_PAGE_BUTTONS_COUNT = 10;\nexport const PAGE_SIZES = [10, 25, 50, 75, 100] as const;\nexport const DEFAULT_PAGE_SIZE = 50;\n"],
+  "mappings": ";AAAO,aAAM,yBAAyB;AAC/B,aAAM,aAAa,CAAC,IAAI,IAAI,IAAI,IAAI,GAAG;AACvC,aAAM,oBAAoB;",
+  "names": []
+}

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

@@ -0,0 +1,2 @@
+import { type Column } from '@tanstack/react-table';
+export declare function getCommonPinningClasses(column: Column<any>): string;

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

@@ -0,0 +1,13 @@
+"use strict";
+export function getCommonPinningClasses(column) {
+  let isPinned = column.getIsPinned();
+  let isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
+  let isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
+  let borderClassName = isLastLeftPinnedColumn ? "border-r-2 border-gray-100" : isFirstRightPinnedColumn ? "border-l-2 border-gray-100" : void 0;
+  let opacityClassName = isPinned ? "opacity-90" : "opacity-100";
+  let positionClassName = isPinned ? "sticky" : "relative";
+  let zIndexClassName = isPinned ? "z-10" : "z-0";
+  let bgClassName = isPinned ? "bg-white" : "bg-transparent";
+  return `${bgClassName} ${borderClassName} ${opacityClassName} ${positionClassName} ${zIndexClassName}`;
+}
+//# sourceMappingURL=getCommonPinningClasses.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../source/components/data-table/internals/getCommonPinningClasses.ts"],
+  "sourcesContent": ["import {type Column} from '@tanstack/react-table';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\nexport function getCommonPinningClasses(column: Column<any>): string {\n  let isPinned = column.getIsPinned();\n  let isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');\n  let isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');\n\n  let borderClassName =\n    isLastLeftPinnedColumn ? 'border-r-2 border-gray-100'\n    : isFirstRightPinnedColumn ? 'border-l-2 border-gray-100'\n    : undefined;\n  let opacityClassName = isPinned ? 'opacity-90' : 'opacity-100';\n  let positionClassName = isPinned ? 'sticky' : 'relative';\n  let zIndexClassName = isPinned ? 'z-10' : 'z-0';\n  let bgClassName = isPinned ? 'bg-white' : 'bg-transparent';\n\n  return `${bgClassName} ${borderClassName} ${opacityClassName} ${positionClassName} ${zIndexClassName}`;\n}\n"],
+  "mappings": ";AAGO,gBAAS,wBAAwB,QAA6B;AACnE,MAAI,WAAW,OAAO,YAAY;AAClC,MAAI,yBAAyB,aAAa,UAAU,OAAO,gBAAgB,MAAM;AACjF,MAAI,2BAA2B,aAAa,WAAW,OAAO,iBAAiB,OAAO;AAEtF,MAAI,kBACF,yBAAyB,+BACvB,2BAA2B,+BAC3B;AACJ,MAAI,mBAAmB,WAAW,eAAe;AACjD,MAAI,oBAAoB,WAAW,WAAW;AAC9C,MAAI,kBAAkB,WAAW,SAAS;AAC1C,MAAI,cAAc,WAAW,aAAa;AAE1C,SAAO,GAAG,WAAW,IAAI,eAAe,IAAI,gBAAgB,IAAI,iBAAiB,IAAI,eAAe;AACtG;",
+  "names": []
+}

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

@@ -0,0 +1,3 @@
+import { type Column } from '@tanstack/react-table';
+import { type CSSProperties } from 'react';
+export declare function getCommonPinningStyles(column: Column<any>): CSSProperties;

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

@@ -0,0 +1,10 @@
+"use strict";
+export function getCommonPinningStyles(column) {
+  let isPinned = column.getIsPinned();
+  return {
+    left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
+    right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
+    width: column.getSize()
+  };
+}
+//# sourceMappingURL=getCommonPinningStyles.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../source/components/data-table/internals/getCommonPinningStyles.ts"],
+  "sourcesContent": ["import {type Column} from '@tanstack/react-table';\nimport {type CSSProperties} from 'react';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\nexport function getCommonPinningStyles(column: Column<any>): CSSProperties {\n  let isPinned = column.getIsPinned();\n\n  return {\n    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,\n    right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,\n    width: column.getSize(),\n  };\n}\n"],
+  "mappings": ";AAIO,gBAAS,uBAAuB,QAAoC;AACzE,MAAI,WAAW,OAAO,YAAY;AAElC,SAAO;AAAA,IACL,MAAM,aAAa,SAAS,GAAG,OAAO,SAAS,MAAM,CAAC,OAAO;AAAA,IAC7D,OAAO,aAAa,UAAU,GAAG,OAAO,SAAS,OAAO,CAAC,OAAO;AAAA,IAChE,OAAO,OAAO,QAAQ;AAAA,EACxB;AACF;",
+  "names": []
+}

package/build/components/internals/fieldContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type FieldMetadata } from '@conform-to/react';
+export declare const fieldContext: import("react").Context<FieldMetadata | undefined>;

package/build/components/internals/fieldContext.js

@@ -0,0 +1,4 @@
+"use strict";
+import { createContext } from "react";
+export const fieldContext = createContext(void 0);
+//# sourceMappingURL=fieldContext.js.map

package/build/components/internals/fieldContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../source/components/internals/fieldContext.ts"],
+  "sourcesContent": ["import {type FieldMetadata} from '@conform-to/react';\nimport {createContext} from 'react';\n\nexport const fieldContext = createContext<FieldMetadata | undefined>(undefined);\n"],
+  "mappings": ";AACA,SAAQ,qBAAoB;AAErB,aAAM,eAAe,cAAyC,MAAS;",
+  "names": []
+}

package/build/components/internals/fieldNameContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" resolution-mode="require"/>
+import { type FieldName } from '@conform-to/react';
+export declare const fieldNameContext: import("react").Context<FieldName<any> | undefined>;

package/build/components/internals/fieldNameContext.js

@@ -0,0 +1,4 @@
+"use strict";
+import { createContext } from "react";
+export const fieldNameContext = createContext(void 0);
+//# sourceMappingURL=fieldNameContext.js.map

package/build/components/internals/fieldNameContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../source/components/internals/fieldNameContext.ts"],
+  "sourcesContent": ["import {type FieldName} from '@conform-to/react';\nimport {createContext} from 'react';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any -- needed\nexport const fieldNameContext = createContext<FieldName<any> | undefined>(undefined);\n"],
+  "mappings": ";AACA,SAAQ,qBAAoB;AAGrB,aAAM,mBAAmB,cAA0C,MAAS;",
+  "names": []
+}

package/build/components/internals/filterProps.d.ts

@@ -0,0 +1,4 @@
+import { type ElementType } from 'react';
+export declare function filterProps<const T extends Record<string, unknown> & {
+    as?: ElementType | undefined;
+}>(props: T): T;