@undevy-org/tablewright 0.7.1 → 0.7.3

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,14 +211,27 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
     ] });
   }
   if (config.type === "enum") {
-    const selected = Array.isArray(value) ? value[0] ?? "" : "";
+    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(
         Combobox,
         {
-          value: selected || null,
-          onChange: (v) => onChange(v ? [v] : void 0),
+          value: comboboxValue,
+          onChange: (v) => onChange(v === null ? void 0 : [v]),
           options: config.options ?? [],
           placeholder: labels.anyPlaceholder,
           triggerAriaLabel: config.label,
@@ -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,12 +361,27 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
               );
             }
             if (sub.type === "enum") {
-              const selected = Array.isArray(subValue) ? subValue[0] ?? "" : "";
+              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,
                 {
-                  value: selected || null,
-                  onChange: (v) => updateSub(sub.key, v ? [v] : void 0),
+                  value: comboboxValue,
+                  onChange: (v) => updateSub(sub.key, v === null ? void 0 : [v]),
                   options: sub.options ?? [],
                   placeholder: sub.label,
                   triggerAriaLabel: sub.label,
@@ -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/styles.css

@@ -469,6 +469,9 @@
 .z-50 {
     z-index: 50
 }
+.col-span-full {
+    grid-column: 1 / -1
+}
 .mx-3 {
     margin-left: 0.75rem;
     margin-right: 0.75rem
@@ -889,6 +892,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 +1286,9 @@
 .leading-none {
     line-height: 1
 }
+.leading-snug {
+    line-height: 1.375
+}
 .leading-tight {
     line-height: 1.25
 }

package/dist/tablewright.cjs

@@ -2825,6 +2825,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 +4001,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 +4134,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 +4188,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 +4264,7 @@ function FilterFormPanel({
             {
               config,
               value: state[fieldId],
-              onChange: (v) => setField(fieldId, v),
+              onChange: (v, compoundSubKey) => setField(fieldId, v, compoundSubKey),
               fieldId,
               hiddenSubSet,
               labels
@@ -4171,7 +4292,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,14 +4323,27 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
     ] });
   }
   if (config.type === "enum") {
-    const selected = Array.isArray(value) ? value[0] ?? "" : "";
+    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(
         Combobox,
         {
-          value: selected || null,
-          onChange: (v) => onChange(v ? [v] : void 0),
+          value: comboboxValue,
+          onChange: (v) => onChange(v === null ? void 0 : [v]),
           options: config.options ?? [],
           placeholder: labels.anyPlaceholder,
           triggerAriaLabel: config.label,
@@ -4277,10 +4424,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 +4441,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,12 +4473,27 @@ function Field({ config, value, onChange, fieldId, hiddenSubSet, labels }) {
               );
             }
             if (sub.type === "enum") {
-              const selected = Array.isArray(subValue) ? subValue[0] ?? "" : "";
+              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,
                 {
-                  value: selected || null,
-                  onChange: (v) => updateSub(sub.key, v ? [v] : void 0),
+                  value: comboboxValue,
+                  onChange: (v) => updateSub(sub.key, v === null ? void 0 : [v]),
                   options: sub.options ?? [],
                   placeholder: sub.label,
                   triggerAriaLabel: sub.label,
@@ -4375,6 +4549,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;

package/dist/tablewright.css

@@ -317,6 +317,9 @@
 .z-50 {
     z-index: 50
 }
+.col-span-full {
+    grid-column: 1 / -1
+}
 .mx-3 {
     margin-left: 0.75rem;
     margin-right: 0.75rem
@@ -737,6 +740,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 +1134,9 @@
 .leading-none {
     line-height: 1
 }
+.leading-snug {
+    line-height: 1.375
+}
 .leading-tight {
     line-height: 1.25
 }

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@undevy-org/tablewright",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "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": {