@undevy-org/tablewright 0.1.0

package/dist/es/components/data-table/FilterFormPanel.js

@@ -0,0 +1,357 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo, useState, useRef, useEffect, useCallback } from "react";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { ButtonFooter } from "../ui/button-footer.js";
+import { Input } from "../ui/input.js";
+import { Combobox } from "../ui/combobox.js";
+import { hasActiveManagedFilters } from "./managed-filters.js";
+function isValueEmpty(v) {
+  if (v === void 0) return true;
+  if (Array.isArray(v)) return v.length === 0 || v.every((x) => x === "" || x == null);
+  if (typeof v === "string") return v.length === 0;
+  if (typeof v === "object" && v !== null) {
+    return Object.values(v).every((x) => isValueEmpty(x));
+  }
+  return false;
+}
+function deriveInitialState(fields, filters) {
+  const byId = new Map(filters.map((f) => [f.columnId, f.value]));
+  const next = {};
+  for (const id of fields) next[id] = byId.get(id);
+  return next;
+}
+function FilterFormPanel({
+  filterConfigs,
+  fields,
+  filters,
+  onApply,
+  onClear,
+  title = "Filters",
+  className,
+  id,
+  onClose,
+  hiddenSubFilterKeys
+}) {
+  const hiddenSubSet = useMemo(() => new Set(hiddenSubFilterKeys ?? []), [hiddenSubFilterKeys]);
+  const renderableFields = useMemo(
+    () => fields.filter((id2) => {
+      if (filterConfigs[id2]) return true;
+      console.warn(`[FilterFormPanel] Unknown columnId in 'fields': ${id2}`);
+      return false;
+    }),
+    [fields, filterConfigs]
+  );
+  const [state, setState] = useState(
+    () => deriveInitialState(renderableFields, filters)
+  );
+  const touchedRef = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    const fresh = deriveInitialState(renderableFields, filters);
+    setState((prev) => {
+      const next = { ...prev };
+      let changed = false;
+      for (const fieldId of renderableFields) {
+        if (touchedRef.current.has(fieldId)) continue;
+        if (next[fieldId] !== fresh[fieldId]) {
+          next[fieldId] = fresh[fieldId];
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [filters, renderableFields]);
+  const setField = useCallback((id2, value) => {
+    touchedRef.current.add(id2);
+    setState((prev) => ({ ...prev, [id2]: value }));
+  }, []);
+  const handleApply = useCallback(() => {
+    const activeIds = new Set(filters.map((f) => f.columnId));
+    const changes = [];
+    for (const id2 of renderableFields) {
+      const value = state[id2];
+      if (isValueEmpty(value)) {
+        if (activeIds.has(id2)) changes.push({ columnId: id2, action: "remove" });
+      } else {
+        changes.push({ columnId: id2, action: "set", value });
+      }
+    }
+    onApply(changes);
+    touchedRef.current.clear();
+  }, [filters, onApply, renderableFields, state]);
+  const handleClear = useCallback(() => {
+    setState(deriveInitialState(renderableFields, []));
+    onClear(renderableFields);
+    touchedRef.current.clear();
+  }, [onClear, renderableFields]);
+  const isClearDisabled = !hasActiveManagedFilters(filters, renderableFields) && renderableFields.every((fieldId) => isValueEmpty(state[fieldId]));
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      id,
+      "aria-label": title,
+      onSubmit: (e) => {
+        e.preventDefault();
+        handleApply();
+      },
+      className: cn(
+        "mb-3 rounded-md border border-[var(--border-subtle)] bg-[var(--bg-surface-sunken)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-6 pb-2 pt-4", children: [
+          /* @__PURE__ */ jsx("h2", { className: "text-[12px] font-semibold uppercase tracking-[0.08em] text-[var(--text-secondary)]", children: title }),
+          onClose ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              "aria-label": "Close filters",
+              title: "Close filters",
+              onClick: onClose,
+              className: "h-7 w-7",
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-[repeat(auto-fit,minmax(220px,1fr))] items-end gap-3 px-6 pb-4", children: renderableFields.map((fieldId) => {
+          const config = filterConfigs[fieldId];
+          if (!config) return null;
+          return /* @__PURE__ */ jsx(
+            Field,
+            {
+              config,
+              value: state[fieldId],
+              onChange: (v) => setField(fieldId, v),
+              fieldId,
+              hiddenSubSet
+            },
+            fieldId
+          );
+        }) }),
+        /* @__PURE__ */ jsx("div", { className: "px-6 pb-4", children: /* @__PURE__ */ jsxs(ButtonFooter, { align: "end", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "sm",
+              onClick: handleClear,
+              disabled: isClearDisabled,
+              children: "Clear"
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: "Apply" })
+        ] }) })
+      ]
+    }
+  );
+}
+function Field({ config, value, onChange, fieldId, hiddenSubSet }) {
+  if (config.type === "text") {
+    const text = Array.isArray(value) ? value[0] ?? "" : "";
+    return /* @__PURE__ */ jsxs("label", { className: "flex min-w-0 flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: config.label }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          "aria-label": config.label,
+          value: text,
+          onChange: (e) => {
+            const v = e.target.value;
+            onChange(v === "" ? void 0 : [v]);
+          },
+          className: "h-9 min-w-0"
+        }
+      )
+    ] });
+  }
+  if (config.type === "enum") {
+    const selected = Array.isArray(value) ? value[0] ?? "" : "";
+    return /* @__PURE__ */ jsxs("label", { className: "flex min-w-0 flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: config.label }),
+      /* @__PURE__ */ jsx(
+        Combobox,
+        {
+          value: selected || null,
+          onChange: (v) => onChange(v ? [v] : void 0),
+          options: config.options ?? [],
+          placeholder: "Any",
+          triggerAriaLabel: config.label,
+          triggerClassName: "h-9 min-w-0"
+        }
+      )
+    ] });
+  }
+  if (config.type === "date") {
+    const range = value && !Array.isArray(value) && typeof value === "object" ? value : {};
+    const update = (key) => (e) => {
+      const v = e.target.value;
+      const next = { ...range, [key]: v || void 0 };
+      const cleaned = next.from || next.to ? next : void 0;
+      onChange(cleaned);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5 [grid-column:span_2]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: config.label }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "date",
+            "aria-label": `${config.label} — from`,
+            value: range.from ?? "",
+            onChange: update("from"),
+            className: "h-9 min-w-0 flex-1"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "date",
+            "aria-label": `${config.label} — to`,
+            value: range.to ?? "",
+            onChange: update("to"),
+            className: "h-9 min-w-0 flex-1"
+          }
+        )
+      ] })
+    ] });
+  }
+  if (config.type === "number-range") {
+    const range = value && !Array.isArray(value) && typeof value === "object" ? value : {};
+    const update = (key) => (e) => {
+      const raw = e.target.value;
+      const parsed = raw === "" ? void 0 : Number(raw);
+      const next = { ...range, [key]: Number.isFinite(parsed) ? parsed : void 0 };
+      const cleaned = next.from !== void 0 || next.to !== void 0 ? next : void 0;
+      onChange(cleaned);
+    };
+    return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1.5 [grid-column:span_2]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: config.label }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            "aria-label": `${config.label} — from`,
+            value: range.from ?? "",
+            onChange: update("from"),
+            placeholder: "From",
+            className: "h-9 min-w-0 flex-1"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "number",
+            "aria-label": `${config.label} — to`,
+            value: range.to ?? "",
+            onChange: update("to"),
+            placeholder: "To",
+            className: "h-9 min-w-0 flex-1"
+          }
+        )
+      ] })
+    ] });
+  }
+  if (config.type === "compound") {
+    const compound = value && !Array.isArray(value) && typeof value === "object" ? value : {};
+    const updateSub = (subField, next) => {
+      const rest = { ...compound };
+      delete rest[subField];
+      const merged = next === void 0 || isValueEmpty(next) ? rest : { ...rest, [subField]: next };
+      onChange(Object.keys(merged).length === 0 ? void 0 : merged);
+    };
+    const visibleSubs = (config.subFilters ?? []).filter(
+      (sub) => !hiddenSubSet.has(`${fieldId}:${sub.key}`)
+    );
+    if (visibleSubs.length === 0) return null;
+    const subCount = visibleSubs.length;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "flex min-w-0 flex-col gap-1.5",
+        style: { gridColumn: `span ${Math.max(2, Math.min(subCount, 4))}` },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: config.label }),
+          /* @__PURE__ */ jsx("div", { className: "grid min-w-0 gap-2 grid-cols-[repeat(auto-fit,minmax(180px,1fr))]", children: visibleSubs.map((sub) => {
+            const subValue = compound[sub.field];
+            if (sub.type === "text") {
+              const text = Array.isArray(subValue) ? subValue[0] ?? "" : "";
+              return /* @__PURE__ */ jsx(
+                Input,
+                {
+                  "aria-label": sub.label,
+                  placeholder: sub.label,
+                  value: text,
+                  onChange: (e) => {
+                    const v = e.target.value;
+                    updateSub(sub.field, v === "" ? void 0 : [v]);
+                  },
+                  className: "h-9 min-w-0"
+                },
+                sub.key
+              );
+            }
+            if (sub.type === "enum") {
+              const selected = Array.isArray(subValue) ? subValue[0] ?? "" : "";
+              return /* @__PURE__ */ jsx(
+                Combobox,
+                {
+                  value: selected || null,
+                  onChange: (v) => updateSub(sub.field, v ? [v] : void 0),
+                  options: sub.options ?? [],
+                  placeholder: sub.label,
+                  triggerAriaLabel: sub.label,
+                  triggerClassName: "h-9 min-w-0"
+                },
+                sub.key
+              );
+            }
+            if (sub.type === "number-range") {
+              const range = subValue && !Array.isArray(subValue) && typeof subValue === "object" ? subValue : {};
+              const updateRange = (key) => (e) => {
+                const raw = e.target.value;
+                const parsed = raw === "" ? void 0 : Number(raw);
+                const next = { ...range, [key]: Number.isFinite(parsed) ? parsed : void 0 };
+                const cleaned = next.from !== void 0 || next.to !== void 0 ? next : void 0;
+                updateSub(sub.field, cleaned);
+              };
+              return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 gap-2", children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "number",
+                    "aria-label": `${sub.label} — from`,
+                    value: range.from ?? "",
+                    onChange: updateRange("from"),
+                    placeholder: `${sub.label} from`,
+                    className: "h-9 min-w-0 flex-1"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "number",
+                    "aria-label": `${sub.label} — to`,
+                    value: range.to ?? "",
+                    onChange: updateRange("to"),
+                    placeholder: `${sub.label} to`,
+                    className: "h-9 min-w-0 flex-1"
+                  }
+                )
+              ] }, sub.key);
+            }
+            return null;
+          }) })
+        ]
+      }
+    );
+  }
+  return null;
+}
+export {
+  FilterFormPanel
+};

package/dist/es/components/data-table/FilterFormToggle.js

@@ -0,0 +1,77 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Filter, ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+const STORAGE_PREFIX = "tablewright.filters.open.";
+function readPersisted(persistKey, fallback) {
+  if (typeof window === "undefined") return fallback;
+  const raw = window.localStorage.getItem(STORAGE_PREFIX + persistKey);
+  if (raw === "1") return true;
+  if (raw === "0") return false;
+  return fallback;
+}
+function useFilterFormOpen(persistKey, defaultOpen = false) {
+  const [open, setOpen] = useState(() => readPersisted(persistKey, defaultOpen));
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(STORAGE_PREFIX + persistKey, open ? "1" : "0");
+  }, [open, persistKey]);
+  return [open, setOpen];
+}
+function FilterFormToggle({
+  open,
+  onOpenChange,
+  hasActiveFilters = false,
+  controlsId,
+  variant = "icon",
+  label = "Filter",
+  className
+}) {
+  const showDot = !open && hasActiveFilters;
+  const isButton = variant === "button";
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant: "secondary",
+      size: isButton ? "default" : "icon",
+      "aria-label": isButton ? void 0 : "Filter form",
+      "aria-expanded": open,
+      "aria-controls": controlsId,
+      title: open ? "Hide filters" : "Show filters",
+      onClick: () => onOpenChange(!open),
+      className: cn(
+        "relative",
+        open && "border-[var(--border-accent,#6366f1)] bg-[var(--bg-accent-subtle,rgba(99,102,241,0.12))] text-[var(--text-accent,#3730a3)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Filter, { className: "h-4 w-4" }),
+        isButton ? /* @__PURE__ */ jsx("span", { children: label }) : null,
+        isButton ? /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            className: cn(
+              "h-4 w-4 text-[var(--text-tertiary)] transition-transform duration-200",
+              open && "rotate-180"
+            ),
+            "aria-hidden": "true"
+          }
+        ) : null,
+        showDot ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-testid": "filter-form-toggle-dot",
+            className: "absolute right-0.5 top-0.5 h-1.5 w-1.5 rounded-full border border-[var(--bg-elevated,#ffffff)] bg-[var(--bg-accent,#6366f1)]",
+            "aria-hidden": "true"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  FilterFormToggle,
+  useFilterFormOpen
+};

package/dist/es/components/data-table/FilterPopoverFooter.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { ButtonFooter } from "../ui/button-footer.js";
+function FilterPopoverFooter({
+  onApply,
+  onClear,
+  applyLabel = "Apply",
+  clearLabel = "Clear",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(ButtonFooter, { className: cn("px-3 py-2.5", className), children: [
+    onClear && /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", size: "sm", onClick: onClear, children: clearLabel }),
+    /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", onClick: onApply, children: applyLabel })
+  ] });
+}
+export {
+  FilterPopoverFooter
+};

package/dist/es/components/data-table/FilterToolbar.js

@@ -0,0 +1,131 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Columns3, ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { SegmentedControl } from "../ui/segmented-control.js";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuCheckboxItem } from "../ui/dropdown-menu.js";
+function Root({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("section", { className: cn("py-3", className), ...props, children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-start gap-2.5 lg:items-center", children }) });
+}
+function SearchForm({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "form",
+    {
+      className: cn(
+        "flex min-w-[280px] flex-[0_1_360px] items-center gap-2 md:max-w-[460px]",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function Filters({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex min-w-0 flex-wrap items-center gap-2.5 lg:flex-nowrap lg:gap-2", className),
+      ...props,
+      children
+    }
+  );
+}
+function Utility({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-wrap items-center gap-2 lg:flex-nowrap", className),
+      ...props,
+      children
+    }
+  );
+}
+function Actions({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-wrap items-center gap-2 xl:ml-auto", className),
+      ...props,
+      children
+    }
+  );
+}
+function ActiveFilters({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-2", className), children });
+}
+function ColumnVisibilityMenu({
+  columns,
+  onColumnToggle,
+  label = "Show/Hide columns",
+  buttonClassName
+}) {
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "secondary", className: cn("shrink-0", buttonClassName), children: [
+      /* @__PURE__ */ jsx(Columns3, { className: "h-4 w-4" }),
+      label,
+      /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5" })
+    ] }) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", className: "w-64", children: /* @__PURE__ */ jsx(DropdownMenuGroup, { children: columns.map((column) => /* @__PURE__ */ jsx(
+      DropdownMenuCheckboxItem,
+      {
+        checked: column.checked,
+        disabled: column.disabled,
+        onCheckedChange: () => onColumnToggle(column.id),
+        children: column.label
+      },
+      column.id
+    )) }) })
+  ] });
+}
+function DensityControl({
+  density,
+  onDensityChange,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    SegmentedControl,
+    {
+      value: density,
+      options: [
+        { value: "normal", label: "Normal" },
+        { value: "dense", label: "Dense" }
+      ],
+      onValueChange: onDensityChange,
+      variant: "toolbar",
+      className
+    }
+  );
+}
+export {
+  Actions,
+  ActiveFilters,
+  ColumnVisibilityMenu,
+  DensityControl,
+  Filters,
+  Root,
+  SearchForm,
+  Utility
+};

package/dist/es/components/data-table/FlatColumnToggle.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Columns, ChevronDown } from "lucide-react";
+import { Button } from "../ui/button.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { Popover, PopoverTrigger, PopoverContent } from "../ui/popover.js";
+function FlatColumnToggle({
+  toggleableColumnIds,
+  columnLabels,
+  columnVisibility,
+  onColumnToggle,
+  open,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "secondary", children: [
+      /* @__PURE__ */ jsx(Columns, { size: 14 }),
+      "Columns",
+      /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-[var(--text-tertiary)]" })
+    ] }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "w-48 p-1", children: toggleableColumnIds.map((columnId) => {
+      const isChecked = columnVisibility[columnId] !== false;
+      return /* @__PURE__ */ jsxs(
+        "label",
+        {
+          className: "flex w-full cursor-pointer items-center gap-2.5 rounded-md px-2 py-2 text-left hover:bg-[var(--bg-hover)]",
+          style: { fontSize: 13 },
+          children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: isChecked,
+                onCheckedChange: () => onColumnToggle(columnId),
+                className: "h-3.5 w-3.5 rounded-[3px]"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { children: columnLabels[columnId] ?? columnId })
+          ]
+        },
+        columnId
+      );
+    }) })
+  ] });
+}
+export {
+  FlatColumnToggle
+};

package/dist/es/components/data-table/GapIndicator.js

@@ -0,0 +1,29 @@
+import { jsx } from "react/jsx-runtime";
+const GAP_HEADER_ATTR = "data-gap-header";
+const GAP_CELL_ATTR = "data-gap-cell";
+function GapIndicator({
+  onClick,
+  ariaLabel = "Show hidden columns",
+  children = "‹›"
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...{ [GAP_HEADER_ATTR]: true },
+      className: "absolute inset-0 flex cursor-pointer items-center justify-center bg-[rgba(128,128,128,0.03)] text-[10px] text-[var(--text-secondary)] transition-colors hover:bg-[rgba(128,128,128,0.08)] hover:text-[var(--text-accent,var(--text-primary))]",
+      onClick,
+      "aria-label": ariaLabel,
+      children
+    }
+  );
+}
+function GapCell() {
+  return /* @__PURE__ */ jsx("div", { ...{ [GAP_CELL_ATTR]: true } });
+}
+export {
+  GAP_CELL_ATTR,
+  GAP_HEADER_ATTR,
+  GapCell,
+  GapIndicator
+};