@undevy-org/tablewright 0.7.2 → 0.7.4

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

@@ -6,7 +6,8 @@ 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 { isFilterValueEmpty, getDateRange, getNumberRange, getCompoundValue } from "./filter-values.js";
+import { recordFilterFieldTouch, patchFieldState, resolveFieldApplyChange, formatTextMultiSummary, singleStringDraftValue, formatEnumMultiSummary, enumComboboxSelection, mergeCompoundSubDraft } from "./filter-form-panel-apply.js";
+import { isFilterValueEmpty, getDateRange, getNumberRange, getStringArray, getCompoundValue } from "./filter-values.js";
 import { hasActiveManagedFilters } from "./managed-filters.js";
 const DEFAULT_LABELS = {
   closeFiltersAriaLabel: "Close filters",
@@ -21,7 +22,11 @@ const DEFAULT_LABELS = {
   compoundSubRangeFromAriaLabel: (subLabel) => `${subLabel} — from`,
   compoundSubRangeToAriaLabel: (subLabel) => `${subLabel} — to`,
   compoundSubRangeFromPlaceholder: (subLabel) => `${subLabel} from`,
-  compoundSubRangeToPlaceholder: (subLabel) => `${subLabel} to`
+  compoundSubRangeToPlaceholder: (subLabel) => `${subLabel} to`,
+  multiValueFormHint: "Multiple values — edit using the column filter chips or popover above the table.",
+  valuesCount: (count) => `${count} values`,
+  selectedCount: (count) => `${count} selected`,
+  clearFieldForSingleEdit: "Clear to edit one value"
 };
 function deriveInitialState(fields, filters) {
   const byId = new Map(filters.map((f) => [f.columnId, f.value]));
@@ -71,24 +76,38 @@ function FilterFormPanel({
       return changed ? next : prev;
     });
   }, [filters, renderableFields]);
-  const setField = useCallback((id2, value) => {
-    touchedRef.current.add(id2);
-    setState((prev) => ({ ...prev, [id2]: value }));
-  }, []);
+  const setField = useCallback(
+    (id2, value, compoundSubKey) => {
+      recordFilterFieldTouch(touchedRef.current, id2, compoundSubKey);
+      setState((prev) => patchFieldState(prev, id2, value));
+    },
+    []
+  );
   const handleApply = useCallback(() => {
     const activeIds = new Set(filters.map((f) => f.columnId));
+    const committedById = new Map(filters.map((f) => [f.columnId, f.value]));
+    const touched = touchedRef.current;
     const changes = [];
     for (const id2 of renderableFields) {
-      const value = state[id2];
-      if (value === void 0 || isFilterValueEmpty(value)) {
-        if (activeIds.has(id2)) changes.push({ columnId: id2, action: "remove" });
-      } else {
-        changes.push({ columnId: id2, action: "set", value });
-      }
+      const config = filterConfigs[id2];
+      const committed = committedById.get(id2);
+      const draft = state[id2];
+      const resolution = resolveFieldApplyChange(
+        config,
+        id2,
+        committed,
+        draft,
+        touched,
+        hiddenSubSet,
+        activeIds.has(id2)
+      );
+      if (resolution.kind === "skip") continue;
+      if (resolution.kind === "remove") changes.push({ columnId: id2, action: "remove" });
+      else changes.push({ columnId: id2, action: "set", value: resolution.value });
     }
     onApply(changes);
     touchedRef.current.clear();
-  }, [filters, onApply, renderableFields, state]);
+  }, [filterConfigs, filters, hiddenSubSet, onApply, renderableFields, state]);
   const handleClear = useCallback(() => {
     setState(deriveInitialState(renderableFields, []));
     onClear(renderableFields);
@@ -133,7 +152,7 @@ function FilterFormPanel({
             {
               config,
               value: state[fieldId],
-              onChange: (v) => setField(fieldId, v),
+              onChange: (v, compoundSubKey) => setField(fieldId, v, compoundSubKey),
               fieldId,
               hiddenSubSet,
               labels
@@ -161,7 +180,20 @@ function FilterFormPanel({
 }
 function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
   if (config.type === "text") {
-    const text = Array.isArray(value) ? value[0] ?? "" : "";
+    const strings = getStringArray(value);
+    if (strings.length > 1) {
+      return /* @__PURE__ */ jsx(
+        MultiValueStringSummary,
+        {
+          label: config.label,
+          summary: formatTextMultiSummary(strings, labels),
+          hint: labels.multiValueFormHint,
+          clearLabel: labels.clearFieldForSingleEdit,
+          onClearForEdit: () => onChange(void 0)
+        }
+      );
+    }
+    const text = singleStringDraftValue(strings);
     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(
@@ -179,7 +211,20 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
     ] });
   }
   if (config.type === "enum") {
-    const comboboxValue = Array.isArray(value) && value.length > 0 ? value[0] : null;
+    const strings = getStringArray(value);
+    if (strings.length > 1) {
+      return /* @__PURE__ */ jsx(
+        MultiValueStringSummary,
+        {
+          label: config.label,
+          summary: formatEnumMultiSummary(strings, config.options, labels),
+          hint: labels.multiValueFormHint,
+          clearLabel: labels.clearFieldForSingleEdit,
+          onClearForEdit: () => onChange(void 0)
+        }
+      );
+    }
+    const comboboxValue = enumComboboxSelection(strings);
     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(
@@ -267,10 +312,7 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
   if (config.type === "compound") {
     const compound = getCompoundValue(value);
     const updateSub = (subKey, next) => {
-      const rest = { ...compound };
-      delete rest[subKey];
-      const merged = next === void 0 || isFilterValueEmpty(next) ? rest : { ...rest, [subKey]: next };
-      onChange(Object.keys(merged).length === 0 ? void 0 : merged);
+      onChange(mergeCompoundSubDraft(compound, subKey, next), subKey);
     };
     const visibleSubs = (config.subFilters ?? []).filter(
       (sub) => !hiddenSubSet.has(`${fieldId}:${sub.key}`)
@@ -287,7 +329,22 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
           /* @__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.key];
             if (sub.type === "text") {
-              const text = Array.isArray(subValue) ? subValue[0] ?? "" : "";
+              const strings = getStringArray(subValue);
+              if (strings.length > 1) {
+                return /* @__PURE__ */ jsx(
+                  MultiValueStringSummary,
+                  {
+                    label: sub.label,
+                    summary: formatTextMultiSummary(strings, labels),
+                    hint: labels.multiValueFormHint,
+                    clearLabel: labels.clearFieldForSingleEdit,
+                    onClearForEdit: () => updateSub(sub.key, void 0),
+                    compact: true
+                  },
+                  sub.key
+                );
+              }
+              const text = singleStringDraftValue(strings);
               return /* @__PURE__ */ jsx(
                 Input,
                 {
@@ -304,7 +361,22 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
               );
             }
             if (sub.type === "enum") {
-              const comboboxValue = Array.isArray(subValue) && subValue.length > 0 ? subValue[0] : null;
+              const strings = getStringArray(subValue);
+              if (strings.length > 1) {
+                return /* @__PURE__ */ jsx(
+                  MultiValueStringSummary,
+                  {
+                    label: sub.label,
+                    summary: formatEnumMultiSummary(strings, sub.options, labels),
+                    hint: labels.multiValueFormHint,
+                    clearLabel: labels.clearFieldForSingleEdit,
+                    onClearForEdit: () => updateSub(sub.key, void 0),
+                    compact: true
+                  },
+                  sub.key
+                );
+              }
+              const comboboxValue = enumComboboxSelection(strings);
               return /* @__PURE__ */ jsx(
                 Combobox,
                 {
@@ -365,6 +437,31 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
   }
   return null;
 }
+function MultiValueStringSummary({
+  label,
+  summary,
+  hint,
+  clearLabel,
+  onClearForEdit,
+  compact
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col gap-1.5", compact && "col-span-full"), children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: label }),
+    /* @__PURE__ */ jsx("p", { className: "text-[12px] text-[var(--text-primary)]", children: summary }),
+    /* @__PURE__ */ jsx("p", { className: "text-[11px] leading-snug text-[var(--text-secondary)]", children: hint }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "secondary",
+        size: "sm",
+        className: "h-9 self-start",
+        onClick: onClearForEdit,
+        children: clearLabel
+      }
+    )
+  ] });
+}
 export {
   FilterFormPanel
 };

package/dist/es/components/data-table/filter-form-panel-apply.js

@@ -0,0 +1,114 @@
+import { isFilterValueEmpty, isMultiStringFilterValue, getCompoundValue } from "./filter-values.js";
+function compoundSubTouchKey(fieldId, subKey) {
+  return `${fieldId}:${subKey}`;
+}
+function recordFilterFieldTouch(touched, fieldId, compoundSubKey) {
+  touched.add(fieldId);
+  if (compoundSubKey) {
+    touched.add(compoundSubTouchKey(fieldId, compoundSubKey));
+  }
+}
+function singleStringDraftValue(strings) {
+  return strings[0] ?? "";
+}
+function enumComboboxSelection(strings) {
+  return strings.length > 0 ? strings[0] : null;
+}
+function patchFieldState(prev, fieldId, value) {
+  return { ...prev, [fieldId]: value };
+}
+function mergeCompoundSubDraft(compound, subKey, next) {
+  const rest = { ...compound };
+  delete rest[subKey];
+  const merged = next === void 0 || isFilterValueEmpty(next) ? rest : { ...rest, [subKey]: next };
+  return Object.keys(merged).length === 0 ? void 0 : merged;
+}
+function formatTextMultiSummary(values, labels) {
+  if (values.length === 2) {
+    const joined = values.join(", ");
+    return joined.length > 24 ? labels.valuesCount(values.length) : joined;
+  }
+  return labels.valuesCount(values.length);
+}
+function formatEnumMultiSummary(values, options, labels) {
+  if (values.length === 2) {
+    const parts = values.map((v) => options?.find((o) => o.value === v)?.label ?? v);
+    const joined = parts.join(", ");
+    return joined.length > 24 ? labels.selectedCount(values.length) : joined;
+  }
+  return labels.selectedCount(values.length);
+}
+function shouldPreserveMultiSubOnApply(sub, subCommitted, touchKey, touched) {
+  if (sub.type !== "text" && sub.type !== "enum") return false;
+  return isMultiStringFilterValue(subCommitted) && !touched.has(touchKey);
+}
+function mergeCompoundValueForApply(config, fieldId, committed, draft, touched, hiddenSubSet) {
+  const committedCompound = getCompoundValue(committed);
+  const draftCompound = getCompoundValue(draft);
+  const merged = {};
+  for (const sub of config.subFilters ?? []) {
+    if (hiddenSubSet.has(compoundSubTouchKey(fieldId, sub.key))) continue;
+    const touchKey = compoundSubTouchKey(fieldId, sub.key);
+    const subCommitted = committedCompound[sub.key];
+    const subDraft = draftCompound[sub.key];
+    if (shouldPreserveMultiSubOnApply(sub, subCommitted, touchKey, touched)) {
+      if (subCommitted !== void 0 && !isFilterValueEmpty(subCommitted)) {
+        merged[sub.key] = subCommitted;
+      }
+      continue;
+    }
+    if (subDraft === void 0 || isFilterValueEmpty(subDraft)) continue;
+    merged[sub.key] = subDraft;
+  }
+  return Object.keys(merged).length === 0 ? void 0 : merged;
+}
+function resolveFieldApplyChange(config, fieldId, committed, draft, touched, hiddenSubSet, isActive) {
+  switch (config.type) {
+    case "text":
+    case "enum": {
+      if (isMultiStringFilterValue(committed) && !touched.has(fieldId)) {
+        return { kind: "skip" };
+      }
+      if (draft === void 0 || isFilterValueEmpty(draft)) {
+        return isActive ? { kind: "remove" } : { kind: "skip" };
+      }
+      return { kind: "set", value: draft };
+    }
+    case "date":
+    case "number-range": {
+      if (draft === void 0 || isFilterValueEmpty(draft)) {
+        return isActive ? { kind: "remove" } : { kind: "skip" };
+      }
+      return { kind: "set", value: draft };
+    }
+    case "compound": {
+      const merged = mergeCompoundValueForApply(
+        config,
+        fieldId,
+        committed,
+        draft,
+        touched,
+        hiddenSubSet
+      );
+      if (merged === void 0 || isFilterValueEmpty(merged)) {
+        return isActive ? { kind: "remove" } : { kind: "skip" };
+      }
+      return { kind: "set", value: merged };
+    }
+    default:
+      return { kind: "skip" };
+  }
+}
+export {
+  compoundSubTouchKey,
+  enumComboboxSelection,
+  formatEnumMultiSummary,
+  formatTextMultiSummary,
+  mergeCompoundSubDraft,
+  mergeCompoundValueForApply,
+  patchFieldState,
+  recordFilterFieldTouch,
+  resolveFieldApplyChange,
+  shouldPreserveMultiSubOnApply,
+  singleStringDraftValue
+};

package/dist/es/components/data-table/filter-values.js

@@ -4,6 +4,9 @@ function isObjectValue(value) {
 function getStringArray(value) {
   return Array.isArray(value) ? value : [];
 }
+function isMultiStringFilterValue(value) {
+  return getStringArray(value).length > 1;
+}
 function getDateRange(value) {
   const range = {};
   if (!isObjectValue(value)) return range;
@@ -32,5 +35,6 @@ export {
   getDateRange,
   getNumberRange,
   getStringArray,
-  isFilterValueEmpty
+  isFilterValueEmpty,
+  isMultiStringFilterValue
 };

package/dist/es/components/layout/SidebarAccountMenu.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { ChevronDown, SunMoon, LogOut } from "lucide-react";
-import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "../ui/dropdown-menu.js";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "../ui/dropdown-menu.js";
 import { ThemeSwitch } from "../ui/theme-switch.js";
 import { cn } from "../../lib/utils.js";
 import { useAppShell } from "./app-shell-context.js";
@@ -57,37 +57,51 @@ function SidebarAccountMenu({
         sideOffset: 6,
         className: "min-w-[220px]",
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-2 py-2", children: [
-            avatarUrl ? /* @__PURE__ */ jsx(
-              "img",
+          /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              disabled: true,
+              className: "gap-2.5 px-2 py-2 opacity-100 focus:bg-transparent data-[disabled]:opacity-100",
+              children: [
+                avatarUrl ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: avatarUrl,
+                    alt: "",
+                    className: "h-8 w-8 shrink-0 rounded-full object-cover"
+                  }
+                ) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[11px] font-semibold text-[var(--text-secondary)]", children: getInitials(name) }),
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsx("div", { className: "truncate text-[13px] font-medium text-[var(--text-primary)]", children: name }),
+                  role && /* @__PURE__ */ jsx("div", { className: "truncate text-[12px] text-[var(--text-secondary)]", children: role })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          showTheme && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
               {
-                src: avatarUrl,
-                alt: "",
-                className: "h-8 w-8 shrink-0 rounded-full object-cover"
+                className: "flex items-center justify-between px-3 py-2 focus:bg-transparent",
+                onSelect: (event) => event.preventDefault(),
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(SunMoon, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ jsx("span", { className: "text-[13px]", children: "Theme" })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    ThemeSwitch,
+                    {
+                      variant: "icon",
+                      value: theme,
+                      onValueChange: onThemeChange
+                    }
+                  )
+                ]
               }
-            ) : /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[11px] font-semibold text-[var(--text-secondary)]", children: getInitials(name) }),
-            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsx("div", { className: "truncate text-[13px] font-medium text-[var(--text-primary)]", children: name }),
-              role && /* @__PURE__ */ jsx("div", { className: "truncate text-[12px] text-[var(--text-secondary)]", children: role })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" }),
-          showTheme && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx(SunMoon, { className: "h-4 w-4" }),
-                /* @__PURE__ */ jsx("span", { className: "text-[13px]", children: "Theme" })
-              ] }),
-              /* @__PURE__ */ jsx(
-                ThemeSwitch,
-                {
-                  variant: "icon",
-                  value: theme,
-                  onValueChange: onThemeChange
-                }
-              )
-            ] }),
-            hasItemsBelow && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" })
+            ),
+            hasItemsBelow && /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
           ] }),
           menuItems && menuItems.map((item) => {
             const Icon = item.icon;
@@ -107,7 +121,7 @@ function SidebarAccountMenu({
               item.key
             );
           }),
-          menuItems && menuItems.length > 0 && onSignOut && /* @__PURE__ */ jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" }),
+          menuItems && menuItems.length > 0 && onSignOut && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
           onSignOut && /* @__PURE__ */ jsxs(
             DropdownMenuItem,
             {

package/dist/es/components/ui/dropdown-menu.js

@@ -55,12 +55,36 @@ const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checke
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-[13px] font-semibold text-[var(--text-primary)]",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-[var(--border-subtle)]", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 export {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuPortal,
+  DropdownMenuSeparator,
   DropdownMenuTrigger
 };

package/dist/es/index.js

@@ -2,7 +2,7 @@ import { Badge, badgeVariants } from "./components/ui/badge.js";
 import { Button, buttonVariants } from "./components/ui/button.js";
 import { Checkbox } from "./components/ui/checkbox.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/ui/dialog.js";
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuPortal, DropdownMenuTrigger } from "./components/ui/dropdown-menu.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuTrigger } from "./components/ui/dropdown-menu.js";
 import { Input } from "./components/ui/input.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from "./components/ui/popover.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./components/ui/select.js";
@@ -121,7 +121,9 @@ export {
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuPortal,
+  DropdownMenuSeparator,
   DropdownMenuTrigger,
   DualLineCell,
   EmptyState,

package/dist/styles.css

@@ -469,6 +469,13 @@
 .z-50 {
     z-index: 50
 }
+.col-span-full {
+    grid-column: 1 / -1
+}
+.-mx-1 {
+    margin-left: -0.25rem;
+    margin-right: -0.25rem
+}
 .mx-3 {
     margin-left: 0.75rem;
     margin-right: 0.75rem
@@ -604,6 +611,9 @@
 .h-full {
     height: 100%
 }
+.h-px {
+    height: 1px
+}
 .max-h-\[280px\] {
     max-height: 280px
 }
@@ -889,6 +899,9 @@
     margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(1rem * var(--tw-space-y-reverse))
 }
+.self-start {
+    align-self: flex-start
+}
 .self-stretch {
     align-self: stretch
 }
@@ -1280,6 +1293,9 @@
 .leading-none {
     line-height: 1
 }
+.leading-snug {
+    line-height: 1.375
+}
 .leading-tight {
     line-height: 1.25
 }
@@ -1542,6 +1558,9 @@
 .focus\:border-\[var\(--border-focus\)\]:focus {
     border-color: var(--border-focus)
 }
+.focus\:bg-transparent:focus {
+    background-color: transparent
+}
 .focus\:outline-none:focus {
     outline: 2px solid transparent;
     outline-offset: 2px
@@ -1661,6 +1680,9 @@
 .data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
     opacity: 0.5
 }
+.data-\[disabled\]\:opacity-100[data-disabled] {
+    opacity: 1
+}
 .data-\[state\=open\]\:opacity-100[data-state="open"] {
     opacity: 1
 }

package/dist/tablewright.cjs

@@ -235,6 +235,28 @@ const DropdownMenuCheckboxItem = React__namespace.forwardRef(({ className, child
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive__namespace.CheckboxItem.displayName;
+const DropdownMenuLabel = React__namespace.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-[13px] font-semibold text-[var(--text-primary)]",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive__namespace.Label.displayName;
+const DropdownMenuSeparator = React__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  DropdownMenuPrimitive__namespace.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-[var(--border-subtle)]", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive__namespace.Separator.displayName;
 const Input = React__namespace.forwardRef(
   ({ className, type, error, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2237,37 +2259,51 @@ function SidebarAccountMenu({
         sideOffset: 6,
         className: "min-w-[220px]",
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 px-2 py-2", children: [
-            avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            DropdownMenuItem,
+            {
+              disabled: true,
+              className: "gap-2.5 px-2 py-2 opacity-100 focus:bg-transparent data-[disabled]:opacity-100",
+              children: [
+                avatarUrl ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: avatarUrl,
+                    alt: "",
+                    className: "h-8 w-8 shrink-0 rounded-full object-cover"
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[11px] font-semibold text-[var(--text-secondary)]", children: getInitials(name) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-[13px] font-medium text-[var(--text-primary)]", children: name }),
+                  role && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-[12px] text-[var(--text-secondary)]", children: role })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+          showTheme && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              DropdownMenuItem,
               {
-                src: avatarUrl,
-                alt: "",
-                className: "h-8 w-8 shrink-0 rounded-full object-cover"
+                className: "flex items-center justify-between px-3 py-2 focus:bg-transparent",
+                onSelect: (event) => event.preventDefault(),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SunMoon, { className: "h-4 w-4" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px]", children: "Theme" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    ThemeSwitch,
+                    {
+                      variant: "icon",
+                      value: theme,
+                      onValueChange: onThemeChange
+                    }
+                  )
+                ]
               }
-            ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--bg-tertiary)] text-[11px] font-semibold text-[var(--text-secondary)]", children: getInitials(name) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-[13px] font-medium text-[var(--text-primary)]", children: name }),
-              role && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-[12px] text-[var(--text-secondary)]", children: role })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" }),
-          showTheme && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-3 py-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SunMoon, { className: "h-4 w-4" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px]", children: "Theme" })
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                ThemeSwitch,
-                {
-                  variant: "icon",
-                  value: theme,
-                  onValueChange: onThemeChange
-                }
-              )
-            ] }),
-            hasItemsBelow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" })
+            ),
+            hasItemsBelow && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {})
           ] }),
           menuItems && menuItems.map((item) => {
             const Icon = item.icon;
@@ -2287,7 +2323,7 @@ function SidebarAccountMenu({
               item.key
             );
           }),
-          menuItems && menuItems.length > 0 && onSignOut && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "my-1 border-t border-[var(--border-subtle)]" }),
+          menuItems && menuItems.length > 0 && onSignOut && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
           onSignOut && /* @__PURE__ */ jsxRuntime.jsxs(
             DropdownMenuItem,
             {
@@ -2825,6 +2861,9 @@ function isObjectValue(value) {
 function getStringArray(value) {
   return Array.isArray(value) ? value : [];
 }
+function isMultiStringFilterValue(value) {
+  return getStringArray(value).length > 1;
+}
 function getDateRange(value) {
   const range = {};
   if (!isObjectValue(value)) return range;
@@ -3998,6 +4037,106 @@ function AppliedStateChips({
     )
   ] });
 }
+function compoundSubTouchKey(fieldId, subKey) {
+  return `${fieldId}:${subKey}`;
+}
+function recordFilterFieldTouch(touched, fieldId, compoundSubKey) {
+  touched.add(fieldId);
+  if (compoundSubKey) {
+    touched.add(compoundSubTouchKey(fieldId, compoundSubKey));
+  }
+}
+function singleStringDraftValue(strings) {
+  return strings[0] ?? "";
+}
+function enumComboboxSelection(strings) {
+  return strings.length > 0 ? strings[0] : null;
+}
+function patchFieldState(prev, fieldId, value) {
+  return { ...prev, [fieldId]: value };
+}
+function mergeCompoundSubDraft(compound, subKey, next) {
+  const rest = { ...compound };
+  delete rest[subKey];
+  const merged = next === void 0 || isFilterValueEmpty(next) ? rest : { ...rest, [subKey]: next };
+  return Object.keys(merged).length === 0 ? void 0 : merged;
+}
+function formatTextMultiSummary(values, labels) {
+  if (values.length === 2) {
+    const joined = values.join(", ");
+    return joined.length > 24 ? labels.valuesCount(values.length) : joined;
+  }
+  return labels.valuesCount(values.length);
+}
+function formatEnumMultiSummary(values, options, labels) {
+  if (values.length === 2) {
+    const parts = values.map((v) => options?.find((o) => o.value === v)?.label ?? v);
+    const joined = parts.join(", ");
+    return joined.length > 24 ? labels.selectedCount(values.length) : joined;
+  }
+  return labels.selectedCount(values.length);
+}
+function shouldPreserveMultiSubOnApply(sub, subCommitted, touchKey, touched) {
+  if (sub.type !== "text" && sub.type !== "enum") return false;
+  return isMultiStringFilterValue(subCommitted) && !touched.has(touchKey);
+}
+function mergeCompoundValueForApply(config, fieldId, committed, draft, touched, hiddenSubSet) {
+  const committedCompound = getCompoundValue(committed);
+  const draftCompound = getCompoundValue(draft);
+  const merged = {};
+  for (const sub of config.subFilters ?? []) {
+    if (hiddenSubSet.has(compoundSubTouchKey(fieldId, sub.key))) continue;
+    const touchKey = compoundSubTouchKey(fieldId, sub.key);
+    const subCommitted = committedCompound[sub.key];
+    const subDraft = draftCompound[sub.key];
+    if (shouldPreserveMultiSubOnApply(sub, subCommitted, touchKey, touched)) {
+      if (subCommitted !== void 0 && !isFilterValueEmpty(subCommitted)) {
+        merged[sub.key] = subCommitted;
+      }
+      continue;
+    }
+    if (subDraft === void 0 || isFilterValueEmpty(subDraft)) continue;
+    merged[sub.key] = subDraft;
+  }
+  return Object.keys(merged).length === 0 ? void 0 : merged;
+}
+function resolveFieldApplyChange(config, fieldId, committed, draft, touched, hiddenSubSet, isActive) {
+  switch (config.type) {
+    case "text":
+    case "enum": {
+      if (isMultiStringFilterValue(committed) && !touched.has(fieldId)) {
+        return { kind: "skip" };
+      }
+      if (draft === void 0 || isFilterValueEmpty(draft)) {
+        return isActive ? { kind: "remove" } : { kind: "skip" };
+      }
+      return { kind: "set", value: draft };
+    }
+    case "date":
+    case "number-range": {
+      if (draft === void 0 || isFilterValueEmpty(draft)) {
+        return isActive ? { kind: "remove" } : { kind: "skip" };
+      }
+      return { kind: "set", value: draft };
+    }
+    case "compound": {
+      const merged = mergeCompoundValueForApply(
+        config,
+        fieldId,
+        committed,
+        draft,
+        touched,
+        hiddenSubSet
+      );
+      if (merged === void 0 || isFilterValueEmpty(merged)) {
+        return isActive ? { kind: "remove" } : { kind: "skip" };
+      }
+      return { kind: "set", value: merged };
+    }
+    default:
+      return { kind: "skip" };
+  }
+}
 function applyManagedChanges(orch, changes) {
   const activeIds = new Set(orch.columnFilters.map((f) => f.columnId));
   for (const change of changes) {
@@ -4031,7 +4170,11 @@ const DEFAULT_LABELS = {
   compoundSubRangeFromAriaLabel: (subLabel) => `${subLabel} — from`,
   compoundSubRangeToAriaLabel: (subLabel) => `${subLabel} — to`,
   compoundSubRangeFromPlaceholder: (subLabel) => `${subLabel} from`,
-  compoundSubRangeToPlaceholder: (subLabel) => `${subLabel} to`
+  compoundSubRangeToPlaceholder: (subLabel) => `${subLabel} to`,
+  multiValueFormHint: "Multiple values — edit using the column filter chips or popover above the table.",
+  valuesCount: (count) => `${count} values`,
+  selectedCount: (count) => `${count} selected`,
+  clearFieldForSingleEdit: "Clear to edit one value"
 };
 function deriveInitialState(fields, filters) {
   const byId = new Map(filters.map((f) => [f.columnId, f.value]));
@@ -4081,24 +4224,38 @@ function FilterFormPanel({
       return changed ? next : prev;
     });
   }, [filters, renderableFields]);
-  const setField = React.useCallback((id2, value) => {
-    touchedRef.current.add(id2);
-    setState((prev) => ({ ...prev, [id2]: value }));
-  }, []);
+  const setField = React.useCallback(
+    (id2, value, compoundSubKey) => {
+      recordFilterFieldTouch(touchedRef.current, id2, compoundSubKey);
+      setState((prev) => patchFieldState(prev, id2, value));
+    },
+    []
+  );
   const handleApply = React.useCallback(() => {
     const activeIds = new Set(filters.map((f) => f.columnId));
+    const committedById = new Map(filters.map((f) => [f.columnId, f.value]));
+    const touched = touchedRef.current;
     const changes = [];
     for (const id2 of renderableFields) {
-      const value = state[id2];
-      if (value === void 0 || isFilterValueEmpty(value)) {
-        if (activeIds.has(id2)) changes.push({ columnId: id2, action: "remove" });
-      } else {
-        changes.push({ columnId: id2, action: "set", value });
-      }
+      const config = filterConfigs[id2];
+      const committed = committedById.get(id2);
+      const draft = state[id2];
+      const resolution = resolveFieldApplyChange(
+        config,
+        id2,
+        committed,
+        draft,
+        touched,
+        hiddenSubSet,
+        activeIds.has(id2)
+      );
+      if (resolution.kind === "skip") continue;
+      if (resolution.kind === "remove") changes.push({ columnId: id2, action: "remove" });
+      else changes.push({ columnId: id2, action: "set", value: resolution.value });
     }
     onApply(changes);
     touchedRef.current.clear();
-  }, [filters, onApply, renderableFields, state]);
+  }, [filterConfigs, filters, hiddenSubSet, onApply, renderableFields, state]);
   const handleClear = React.useCallback(() => {
     setState(deriveInitialState(renderableFields, []));
     onClear(renderableFields);
@@ -4143,7 +4300,7 @@ function FilterFormPanel({
             {
               config,
               value: state[fieldId],
-              onChange: (v) => setField(fieldId, v),
+              onChange: (v, compoundSubKey) => setField(fieldId, v, compoundSubKey),
               fieldId,
               hiddenSubSet,
               labels
@@ -4171,7 +4328,20 @@ function FilterFormPanel({
 }
 function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
   if (config.type === "text") {
-    const text = Array.isArray(value) ? value[0] ?? "" : "";
+    const strings = getStringArray(value);
+    if (strings.length > 1) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        MultiValueStringSummary,
+        {
+          label: config.label,
+          summary: formatTextMultiSummary(strings, labels),
+          hint: labels.multiValueFormHint,
+          clearLabel: labels.clearFieldForSingleEdit,
+          onClearForEdit: () => onChange(void 0)
+        }
+      );
+    }
+    const text = singleStringDraftValue(strings);
     return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex min-w-0 flex-col gap-1.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: config.label }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -4189,7 +4359,20 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
     ] });
   }
   if (config.type === "enum") {
-    const comboboxValue = Array.isArray(value) && value.length > 0 ? value[0] : null;
+    const strings = getStringArray(value);
+    if (strings.length > 1) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        MultiValueStringSummary,
+        {
+          label: config.label,
+          summary: formatEnumMultiSummary(strings, config.options, labels),
+          hint: labels.multiValueFormHint,
+          clearLabel: labels.clearFieldForSingleEdit,
+          onClearForEdit: () => onChange(void 0)
+        }
+      );
+    }
+    const comboboxValue = enumComboboxSelection(strings);
     return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex min-w-0 flex-col gap-1.5", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: config.label }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -4277,10 +4460,7 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
   if (config.type === "compound") {
     const compound = getCompoundValue(value);
     const updateSub = (subKey, next) => {
-      const rest = { ...compound };
-      delete rest[subKey];
-      const merged = next === void 0 || isFilterValueEmpty(next) ? rest : { ...rest, [subKey]: next };
-      onChange(Object.keys(merged).length === 0 ? void 0 : merged);
+      onChange(mergeCompoundSubDraft(compound, subKey, next), subKey);
     };
     const visibleSubs = (config.subFilters ?? []).filter(
       (sub) => !hiddenSubSet.has(`${fieldId}:${sub.key}`)
@@ -4297,7 +4477,22 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
           /* @__PURE__ */ jsxRuntime.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.key];
             if (sub.type === "text") {
-              const text = Array.isArray(subValue) ? subValue[0] ?? "" : "";
+              const strings = getStringArray(subValue);
+              if (strings.length > 1) {
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  MultiValueStringSummary,
+                  {
+                    label: sub.label,
+                    summary: formatTextMultiSummary(strings, labels),
+                    hint: labels.multiValueFormHint,
+                    clearLabel: labels.clearFieldForSingleEdit,
+                    onClearForEdit: () => updateSub(sub.key, void 0),
+                    compact: true
+                  },
+                  sub.key
+                );
+              }
+              const text = singleStringDraftValue(strings);
               return /* @__PURE__ */ jsxRuntime.jsx(
                 Input,
                 {
@@ -4314,7 +4509,22 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
               );
             }
             if (sub.type === "enum") {
-              const comboboxValue = Array.isArray(subValue) && subValue.length > 0 ? subValue[0] : null;
+              const strings = getStringArray(subValue);
+              if (strings.length > 1) {
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  MultiValueStringSummary,
+                  {
+                    label: sub.label,
+                    summary: formatEnumMultiSummary(strings, sub.options, labels),
+                    hint: labels.multiValueFormHint,
+                    clearLabel: labels.clearFieldForSingleEdit,
+                    onClearForEdit: () => updateSub(sub.key, void 0),
+                    compact: true
+                  },
+                  sub.key
+                );
+              }
+              const comboboxValue = enumComboboxSelection(strings);
               return /* @__PURE__ */ jsxRuntime.jsx(
                 Combobox,
                 {
@@ -4375,6 +4585,31 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
   }
   return null;
 }
+function MultiValueStringSummary({
+  label,
+  summary,
+  hint,
+  clearLabel,
+  onClearForEdit,
+  compact
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-w-0 flex-col gap-1.5", compact && "col-span-full"), children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] font-medium text-[var(--text-secondary)]", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-[var(--text-primary)]", children: summary }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] leading-snug text-[var(--text-secondary)]", children: hint }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        type: "button",
+        variant: "secondary",
+        size: "sm",
+        className: "h-9 self-start",
+        onClick: onClearForEdit,
+        children: clearLabel
+      }
+    )
+  ] });
+}
 const STORAGE_PREFIX = "tablewright.filters.open.";
 function readPersisted(persistKey, fallback) {
   if (typeof window === "undefined") return fallback;
@@ -5640,7 +5875,9 @@ exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
 exports.DropdownMenuContent = DropdownMenuContent;
 exports.DropdownMenuGroup = DropdownMenuGroup;
 exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuLabel = DropdownMenuLabel;
 exports.DropdownMenuPortal = DropdownMenuPortal;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.DualLineCell = DualLineCell;
 exports.EmptyState = EmptyState;

package/dist/tablewright.css

@@ -317,6 +317,13 @@
 .z-50 {
     z-index: 50
 }
+.col-span-full {
+    grid-column: 1 / -1
+}
+.-mx-1 {
+    margin-left: -0.25rem;
+    margin-right: -0.25rem
+}
 .mx-3 {
     margin-left: 0.75rem;
     margin-right: 0.75rem
@@ -452,6 +459,9 @@
 .h-full {
     height: 100%
 }
+.h-px {
+    height: 1px
+}
 .max-h-\[280px\] {
     max-height: 280px
 }
@@ -737,6 +747,9 @@
     margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
     margin-bottom: calc(1rem * var(--tw-space-y-reverse))
 }
+.self-start {
+    align-self: flex-start
+}
 .self-stretch {
     align-self: stretch
 }
@@ -1128,6 +1141,9 @@
 .leading-none {
     line-height: 1
 }
+.leading-snug {
+    line-height: 1.375
+}
 .leading-tight {
     line-height: 1.25
 }
@@ -1390,6 +1406,9 @@
 .focus\:border-\[var\(--border-focus\)\]:focus {
     border-color: var(--border-focus)
 }
+.focus\:bg-transparent:focus {
+    background-color: transparent
+}
 .focus\:outline-none:focus {
     outline: 2px solid transparent;
     outline-offset: 2px
@@ -1509,6 +1528,9 @@
 .data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
     opacity: 0.5
 }
+.data-\[disabled\]\:opacity-100[data-disabled] {
+    opacity: 1
+}
 .data-\[state\=open\]\:opacity-100[data-state="open"] {
     opacity: 1
 }

package/dist/types/components/data-table/FilterFormPanel.d.ts

@@ -14,6 +14,12 @@ export interface FilterFormPanelLabels {
     compoundSubRangeToAriaLabel: (subLabel: string) => string;
     compoundSubRangeFromPlaceholder: (subLabel: string) => string;
     compoundSubRangeToPlaceholder: (subLabel: string) => string;
+    /** Shown under read-only multi-value text fields in the form panel. */
+    multiValueFormHint: string;
+    valuesCount: (count: number) => string;
+    selectedCount: (count: number) => string;
+    /** Clears a multi-value field so the user can enter a single value. */
+    clearFieldForSingleEdit: string;
 }
 export interface FilterFormPanelProps {
     /** All known filter configs (same shape used by GroupedFilterAdd). */

package/dist/types/components/data-table/filter-form-panel-apply.d.ts

@@ -0,0 +1,27 @@
+import type { ActiveFilterValue, ColumnFilterConfig, CompoundFilterValue, CompoundSubFilter } from "./filter-types.js";
+export interface MultiValueSummaryLabels {
+    valuesCount: (count: number) => string;
+    selectedCount: (count: number) => string;
+}
+export declare function compoundSubTouchKey(fieldId: string, subKey: string): string;
+export declare function recordFilterFieldTouch(touched: Set<string>, fieldId: string, compoundSubKey?: string): void;
+export declare function singleStringDraftValue(strings: string[]): string;
+export declare function enumComboboxSelection(strings: string[]): string | null;
+export declare function patchFieldState<T extends Record<string, ActiveFilterValue | undefined>>(prev: T, fieldId: string, value: ActiveFilterValue | undefined): T;
+export declare function mergeCompoundSubDraft(compound: CompoundFilterValue, subKey: string, next: ActiveFilterValue | undefined): ActiveFilterValue | undefined;
+export declare function formatTextMultiSummary(values: string[], labels: MultiValueSummaryLabels): string;
+export declare function formatEnumMultiSummary(values: string[], options: {
+    label: string;
+    value: string;
+}[] | undefined, labels: MultiValueSummaryLabels): string;
+export declare function shouldPreserveMultiSubOnApply(sub: CompoundSubFilter, subCommitted: ActiveFilterValue | undefined, touchKey: string, touched: Set<string>): boolean;
+export declare function mergeCompoundValueForApply(config: ColumnFilterConfig, fieldId: string, committed: ActiveFilterValue | undefined, draft: ActiveFilterValue | undefined, touched: Set<string>, hiddenSubSet: Set<string>): ActiveFilterValue | undefined;
+export type ApplyResolution = {
+    kind: "skip";
+} | {
+    kind: "remove";
+} | {
+    kind: "set";
+    value: ActiveFilterValue;
+};
+export declare function resolveFieldApplyChange(config: ColumnFilterConfig, fieldId: string, committed: ActiveFilterValue | undefined, draft: ActiveFilterValue | undefined, touched: Set<string>, hiddenSubSet: Set<string>, isActive: boolean): ApplyResolution;

package/dist/types/components/data-table/filter-types.d.ts

@@ -34,6 +34,14 @@ export type NumberRangeValue = {
 export type CompoundFilterValue = {
     [key: string]: ActiveFilterValue;
 };
+/**
+ * Stored filter payload for one column. Text and enum filters are usually `string[]`
+ * (one element for a single selection; multiple for popover/chip multi-select).
+ *
+ * `FilterFormPanel` edits at most one string per text/enum field (and per compound
+ * sub-filter of those types). Multi-value text/enum filters are edited via column
+ * filter chips and `ColumnFilterPopover`, not the form panel.
+ */
 export type ActiveFilterValue = string | string[] | DateRangeValue | NumberRangeValue | CompoundFilterValue;
 export interface ActiveFilter {
     columnId: string;

package/dist/types/components/data-table/filter-values.d.ts

@@ -1,6 +1,8 @@
 import type { ActiveFilterValue, CompoundFilterValue, DateRangeValue, NumberRangeValue } from "./filter-types.js";
 /** Read a text/enum filter value. Non-array values read as `[]`. */
 export declare function getStringArray(value: ActiveFilterValue | undefined): string[];
+/** True when a text/enum value selects more than one string (popover/chip multi-select). */
+export declare function isMultiStringFilterValue(value: ActiveFilterValue | undefined): boolean;
 /** Read a date filter value. Non-string bounds are dropped. */
 export declare function getDateRange(value: ActiveFilterValue | undefined): DateRangeValue;
 /** Read a number-range filter value. Non-number bounds are dropped. */

package/dist/types/components/ui/dropdown-menu.d.ts

@@ -7,4 +7,8 @@ declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPor
 declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuPortal, DropdownMenuTrigger, };
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuTrigger, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@undevy-org/tablewright",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "description": "React data-table and application-shell components: filters, drawers, row controls, sortable and resizable columns, built on Radix UI and TanStack Table.",
   "license": "MIT",
   "repository": {