@j2-health/design-system 0.2.0 → 0.3.0

package/dist/src/components/filterform/FiltersForm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FiltersForm.js","sources":["../../../../src/components/filterform/FiltersForm.tsx"],"sourcesContent":["import { Button } from '../button'\nimport { PlusCircleIcon, TrashIcon } from '@phosphor-icons/react'\nimport s from './FiltersForm.module.css'\nimport cx from 'classnames'\nimport { FilterForm, FilterConfig } from '.'\nimport { isEmptyFilter, isFilter } from './filterHelpers'\nimport { useMemo } from 'react'\nimport { FilterInput } from './FilterInput'\nimport { useFiltersForm } from './useFiltersForm'\nimport { FilterGroup } from './FilterGroup'\n\ntype Props = {\n  filterConfigs: FilterConfig[]\n  title?: string\n  onSubmit: (values: FilterForm) => void\n  initialValues?: FilterForm\n  maxFiltersPerField?: number\n}\n\nexport const FiltersForm = ({\n  title,\n  filterConfigs,\n  onSubmit,\n  initialValues,\n  maxFiltersPerField = 5,\n}: Props) => {\n  const { dispatch, filterGroups, isNewFilterInputOpen, isValid, isEmpty } =\n    useFiltersForm({\n      initialValues,\n    })\n\n  const handleSubmit = () => {\n    onSubmit({\n      filters: filterGroups\n        .flatMap((group) => group.filters)\n        .filter((filter) => isFilter(filter))\n        .filter((filter) => !isEmptyFilter(filter)),\n    })\n  }\n\n  const availableFilterConfigs = useMemo(() => {\n    const filterFieldCounts = filterGroups.reduce(\n      (acc, filterGroup) => {\n        acc[filterGroup.field] = filterGroup.filters.length\n        return acc\n      },\n      {} as Record<string, number>\n    )\n\n    return filterConfigs.map((config) => ({\n      ...config,\n      disabled: (filterFieldCounts[config.field] || 0) >= maxFiltersPerField,\n    }))\n  }, [\n    filterConfigs,\n    filterGroups.map((g) => `${g.field}-${g.filters.length}`).join(','),\n    maxFiltersPerField,\n  ])\n\n  return (\n    <div className={cx(s.j2FilterForm)}>\n      <div\n        className={cx(\n          s.filterFormFieldsContainer,\n          'flex flex-col gap-4',\n          'p-4 mb-6'\n        )}\n      >\n        {title && <span className={s.filterFormTitle}>{title}</span>}\n        {filterGroups.map((filterGroup, groupIndex) => (\n          <div\n            key={`filter-group-${filterGroup.field}-${filterGroup.filters.length}`}\n            className={cx('flex gap-3', {\n              'items-center': filterGroup.filters.length === 1,\n            })}\n          >\n            {groupIndex > 0 ? (\n              <span\n                className={cx(s.filterFormConjunction, {\n                  'pt-4': filterGroup.filters.length > 1,\n                })}\n              >\n                and\n              </span>\n            ) : null}\n            <FilterGroup\n              filterGroup={filterGroup}\n              groupIndex={groupIndex}\n              filterConfigs={availableFilterConfigs}\n              className=\"grow\"\n              onChange={(filter, filterIndex) => {\n                dispatch({\n                  type: 'changeFilter',\n                  payload: { groupIndex, filterIndex, filter },\n                })\n              }}\n              onDone={(filter, filterIndex) => {\n                dispatch({\n                  type: 'updateFilter',\n                  payload: { groupIndex, filterIndex, filter },\n                })\n              }}\n              onRemove={(filterIndex) => {\n                dispatch({\n                  type: 'removeFilter',\n                  payload: { groupIndex, filterIndex },\n                })\n              }}\n            />\n          </div>\n        ))}\n        {isNewFilterInputOpen && (\n          <div className={cx('flex gap-3 items-center')}>\n            {filterGroups.length > 0 ? (\n              <span className={cx(s.filterFormConjunction)}>and</span>\n            ) : null}\n            <div className={cx('flex items-center justify-between', 'grow')}>\n              <FilterInput\n                key={JSON.stringify(filterGroups)}\n                filterConfigs={availableFilterConfigs}\n                className=\"flex-1\"\n                onChange={(filter) => {\n                  dispatch({ type: 'changeNewFilter', payload: filter })\n                }}\n                onBlur={(filter) => {\n                  dispatch({ type: 'addNewFilter', payload: filter })\n                }}\n              />\n              <div className=\"mr-3\">\n                {filterGroups.length > 0 ? (\n                  <Button\n                    type=\"text\"\n                    icon={<TrashIcon />}\n                    onClick={() => dispatch({ type: 'removeNewFilter' })}\n                  />\n                ) : (\n                  <div className=\"w-8\" />\n                )}\n              </div>\n            </div>\n          </div>\n        )}\n        <div className=\"flex items-center\">\n          <Button\n            icon={<PlusCircleIcon />}\n            onClick={() => dispatch({ type: 'openNewFilterInput' })}\n            disabled={!isValid}\n          >\n            Add Rule\n          </Button>\n          <Button\n            type=\"text\"\n            onClick={() => {\n              dispatch({\n                type: 'clearAllFilters',\n              })\n            }}\n          >\n            Clear All Rules\n          </Button>\n        </div>\n      </div>\n      <div className=\"flex justify-end\">\n        <Button\n          onClick={handleSubmit}\n          type=\"primary\"\n          disabled={isEmpty ? false : !isValid}\n        >\n          Apply Filters\n        </Button>\n      </div>\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/src/components/filterform/FiltersForm.module.css.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const j2FilterForm = "_j2FilterForm_rdja9_1";
+const filterFormTitle = "_filterFormTitle_rdja9_2";
+const filterFormConjunction = "_filterFormConjunction_rdja9_6";
+const filterFormFieldsContainer = "_filterFormFieldsContainer_rdja9_10";
+const filterFormGroupContainer = "_filterFormGroupContainer_rdja9_15";
+const s = {
+  j2FilterForm,
+  filterFormTitle,
+  filterFormConjunction,
+  filterFormFieldsContainer,
+  filterFormGroupContainer
+};
+exports.default = s;
+exports.filterFormConjunction = filterFormConjunction;
+exports.filterFormFieldsContainer = filterFormFieldsContainer;
+exports.filterFormGroupContainer = filterFormGroupContainer;
+exports.filterFormTitle = filterFormTitle;
+exports.j2FilterForm = j2FilterForm;
+//# sourceMappingURL=FiltersForm.module.css.cjs.map

package/dist/src/components/filterform/FiltersForm.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FiltersForm.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/src/components/filterform/FiltersForm.module.css.js

@@ -0,0 +1,21 @@
+const j2FilterForm = "_j2FilterForm_rdja9_1";
+const filterFormTitle = "_filterFormTitle_rdja9_2";
+const filterFormConjunction = "_filterFormConjunction_rdja9_6";
+const filterFormFieldsContainer = "_filterFormFieldsContainer_rdja9_10";
+const filterFormGroupContainer = "_filterFormGroupContainer_rdja9_15";
+const s = {
+  j2FilterForm,
+  filterFormTitle,
+  filterFormConjunction,
+  filterFormFieldsContainer,
+  filterFormGroupContainer
+};
+export {
+  s as default,
+  filterFormConjunction,
+  filterFormFieldsContainer,
+  filterFormGroupContainer,
+  filterFormTitle,
+  j2FilterForm
+};
+//# sourceMappingURL=FiltersForm.module.css.js.map

package/dist/src/components/filterform/FiltersForm.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FiltersForm.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/src/components/filterform/filterHelpers.cjs

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const isMultiValueTextOperator = (operator) => operator === "isAnyOf" || operator === "isNoneOf";
+const normalizeMultiValues = (raw) => {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const value of raw ?? []) {
+    if (value === null || value === void 0) continue;
+    const trimmed = String(value).trim();
+    if (trimmed === "") continue;
+    const key = trimmed.toLowerCase();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(trimmed);
+  }
+  return out;
+};
+const tooManyValuesMessage = (maxValues) => `Up to ${maxValues} values`;
+const exceedsMaxValues = (values, limits) => (limits == null ? void 0 : limits.maxValues) !== void 0 && values !== void 0 && values.length > limits.maxValues;
+const isEmptyFilter = (filter) => {
+  if (filter.operator === "blank" || filter.operator === "notBlank") {
+    return false;
+  }
+  if (filter.values && filter.values.length > 0 && filter.values.every(
+    (value) => value !== "" && value !== void 0 && value !== null
+  )) {
+    return false;
+  }
+  return true;
+};
+const isEmptyFormFilter = (filter) => {
+  if (filter.operator === "blank" || filter.operator === "notBlank") {
+    return false;
+  }
+  if (filter.values && filter.values.length > 0 && filter.values.every(
+    (value) => value !== "" && value !== void 0 && value !== null
+  )) {
+    return false;
+  }
+  return true;
+};
+const validateFormFilter = (filter, limits) => {
+  const errors = [];
+  if (!filter.operator) {
+    errors.push("Operator is required");
+    return errors;
+  }
+  if (isEmptyFormFilter(filter)) {
+    errors.push("Value is required");
+  }
+  if (exceedsMaxValues(filter.values, limits)) {
+    errors.push(tooManyValuesMessage(limits.maxValues));
+  }
+  if (filter.type === "number" && filter.operator === "inRange") {
+    if (filter.values && filter.values.length !== 2) {
+      errors.push("Value is required");
+    }
+  }
+  return errors;
+};
+const isFilter = (filter) => {
+  return filter.operator !== void 0 && filter.field !== void 0 && filter.type !== void 0;
+};
+exports.isEmptyFilter = isEmptyFilter;
+exports.isEmptyFormFilter = isEmptyFormFilter;
+exports.isFilter = isFilter;
+exports.isMultiValueTextOperator = isMultiValueTextOperator;
+exports.normalizeMultiValues = normalizeMultiValues;
+exports.tooManyValuesMessage = tooManyValuesMessage;
+exports.validateFormFilter = validateFormFilter;
+//# sourceMappingURL=filterHelpers.cjs.map

package/dist/src/components/filterform/filterHelpers.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterHelpers.cjs","sources":["../../../../src/components/filterform/filterHelpers.ts"],"sourcesContent":["import { Filter } from './types'\n\n// Multi-value text operators — the value is a chip list, not a single string.\nexport const isMultiValueTextOperator = (\n  operator: string | undefined\n): boolean => operator === 'isAnyOf' || operator === 'isNoneOf'\n\n/**\n * Normalize a chip list: trim, drop empties, dedupe case-insensitively (the\n * match is case-insensitive, so `ABC` and `abc` are the same rule). Keeps\n * first-seen casing and order so the chips read the way they were pasted.\n *\n * Applied when values enter reducer state (`useFilterField`), so the chips\n * on screen, the validation count and the submitted `values` are one array.\n */\nexport const normalizeMultiValues = (\n  raw: (string | number | undefined | null)[] | undefined\n): string[] => {\n  const seen = new Set<string>()\n  const out: string[] = []\n  for (const value of raw ?? []) {\n    if (value === null || value === undefined) continue\n    const trimmed = String(value).trim()\n    if (trimmed === '') continue\n    const key = trimmed.toLowerCase()\n    if (seen.has(key)) continue\n    seen.add(key)\n    out.push(trimmed)\n  }\n  return out\n}\n\n// The only `FilterConfig` fields validation consults. Passed separately from\n// the filter because a submitted `Filter` doesn't carry its config.\nexport type FilterValueLimits = { maxValues?: number }\n\nexport const tooManyValuesMessage = (maxValues: number) =>\n  `Up to ${maxValues} values`\n\nconst exceedsMaxValues = (\n  values: unknown[] | undefined,\n  limits: FilterValueLimits | undefined\n): limits is { maxValues: number } =>\n  limits?.maxValues !== undefined &&\n  values !== undefined &&\n  values.length > limits.maxValues\n\nexport const isEmptyFilter = (filter: Filter) => {\n  if (filter.operator === 'blank' || filter.operator === 'notBlank') {\n    return false\n  }\n\n  if (\n    filter.values &&\n    filter.values.length > 0 &&\n    filter.values.every(\n      (value) => value !== '' && value !== undefined && value !== null\n    )\n  ) {\n    return false\n  }\n\n  return true\n}\n\nexport const isValidFilter = (filter: Filter, limits?: FilterValueLimits) => {\n  return validateFilterField(filter, limits).length === 0\n}\n\nexport const validateFilterField = (\n  filter: Filter,\n  limits?: FilterValueLimits\n): { field: string; message: string }[] => {\n  const errors = []\n\n  if (!filter.operator) {\n    errors.push({ field: filter.field, message: 'Operator is required' })\n    return errors\n  }\n\n  if (isEmptyFilter(filter)) {\n    errors.push({ field: filter.field, message: 'Value is required' })\n  }\n\n  if (exceedsMaxValues(filter.values, limits)) {\n    errors.push({\n      field: filter.field,\n      message: tooManyValuesMessage(limits.maxValues),\n    })\n  }\n\n  if (filter.type === 'number' && filter.operator === 'inRange') {\n    if (filter.values && filter.values.length !== 2) {\n      errors.push({ field: filter.field, message: 'Value is required' })\n    }\n  }\n\n  return errors\n}\n\nimport { FormFilter } from './types'\n\nexport const isEmptyFormFilter = (filter: FormFilter) => {\n  if (filter.operator === 'blank' || filter.operator === 'notBlank') {\n    return false\n  }\n\n  if (\n    filter.values &&\n    filter.values.length > 0 &&\n    filter.values.every(\n      (value) => value !== '' && value !== undefined && value !== null\n    )\n  ) {\n    return false\n  }\n\n  return true\n}\n\nexport const isValidFormFilter = (\n  filter: FormFilter,\n  limits?: FilterValueLimits\n) => {\n  return validateFormFilter(filter, limits).length === 0\n}\n\nexport const validateFormFilter = (\n  filter: FormFilter,\n  limits?: FilterValueLimits\n): string[] => {\n  const errors = []\n\n  if (!filter.operator) {\n    errors.push('Operator is required')\n    return errors\n  }\n\n  if (isEmptyFormFilter(filter)) {\n    errors.push('Value is required')\n  }\n\n  if (exceedsMaxValues(filter.values, limits)) {\n    errors.push(tooManyValuesMessage(limits.maxValues))\n  }\n\n  if (filter.type === 'number' && filter.operator === 'inRange') {\n    if (filter.values && filter.values.length !== 2) {\n      errors.push('Value is required')\n    }\n  }\n\n  return errors\n}\n\nexport const isFilter = (filter: FormFilter): filter is Filter => {\n  return (\n    filter.operator !== undefined &&\n    filter.field !== undefined &&\n    filter.type !== undefined\n  )\n}\n"],"names":[],"mappings":";;AAGO,MAAM,2BAA2B,CACtC,aACY,aAAa,aAAa,aAAa;AAU9C,MAAM,uBAAuB,CAClC,QACa;AACb,QAAM,2BAAW,IAAA;AACjB,QAAM,MAAgB,CAAA;AACtB,aAAW,SAAS,OAAO,IAAI;AAC7B,QAAI,UAAU,QAAQ,UAAU,OAAW;AAC3C,UAAM,UAAU,OAAO,KAAK,EAAE,KAAA;AAC9B,QAAI,YAAY,GAAI;AACpB,UAAM,MAAM,QAAQ,YAAA;AACpB,QAAI,KAAK,IAAI,GAAG,EAAG;AACnB,SAAK,IAAI,GAAG;AACZ,QAAI,KAAK,OAAO;AAAA,EAClB;AACA,SAAO;AACT;AAMO,MAAM,uBAAuB,CAAC,cACnC,SAAS,SAAS;AAEpB,MAAM,mBAAmB,CACvB,QACA,YAEA,iCAAQ,eAAc,UACtB,WAAW,UACX,OAAO,SAAS,OAAO;AAElB,MAAM,gBAAgB,CAAC,WAAmB;AAC/C,MAAI,OAAO,aAAa,WAAW,OAAO,aAAa,YAAY;AACjE,WAAO;AAAA,EACT;AAEA,MACE,OAAO,UACP,OAAO,OAAO,SAAS,KACvB,OAAO,OAAO;AAAA,IACZ,CAAC,UAAU,UAAU,MAAM,UAAU,UAAa,UAAU;AAAA,EAAA,GAE9D;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAuCO,MAAM,oBAAoB,CAAC,WAAuB;AACvD,MAAI,OAAO,aAAa,WAAW,OAAO,aAAa,YAAY;AACjE,WAAO;AAAA,EACT;AAEA,MACE,OAAO,UACP,OAAO,OAAO,SAAS,KACvB,OAAO,OAAO;AAAA,IACZ,CAAC,UAAU,UAAU,MAAM,UAAU,UAAa,UAAU;AAAA,EAAA,GAE9D;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AASO,MAAM,qBAAqB,CAChC,QACA,WACa;AACb,QAAM,SAAS,CAAA;AAEf,MAAI,CAAC,OAAO,UAAU;AACpB,WAAO,KAAK,sBAAsB;AAClC,WAAO;AAAA,EACT;AAEA,MAAI,kBAAkB,MAAM,GAAG;AAC7B,WAAO,KAAK,mBAAmB;AAAA,EACjC;AAEA,MAAI,iBAAiB,OAAO,QAAQ,MAAM,GAAG;AAC3C,WAAO,KAAK,qBAAqB,OAAO,SAAS,CAAC;AAAA,EACpD;AAEA,MAAI,OAAO,SAAS,YAAY,OAAO,aAAa,WAAW;AAC7D,QAAI,OAAO,UAAU,OAAO,OAAO,WAAW,GAAG;AAC/C,aAAO,KAAK,mBAAmB;AAAA,IACjC;AAAA,EACF;AAEA,SAAO;AACT;AAEO,MAAM,WAAW,CAAC,WAAyC;AAChE,SACE,OAAO,aAAa,UACpB,OAAO,UAAU,UACjB,OAAO,SAAS;AAEpB;;;;;;;;"}

package/dist/src/components/filterform/filterHelpers.d.ts

@@ -1,11 +1,25 @@
 import { Filter, FormFilter } from './types.js';
+export declare const isMultiValueTextOperator: (operator: string | undefined) => boolean;
+/**
+ * Normalize a chip list: trim, drop empties, dedupe case-insensitively (the
+ * match is case-insensitive, so `ABC` and `abc` are the same rule). Keeps
+ * first-seen casing and order so the chips read the way they were pasted.
+ *
+ * Applied when values enter reducer state (`useFilterField`), so the chips
+ * on screen, the validation count and the submitted `values` are one array.
+ */
+export declare const normalizeMultiValues: (raw: (string | number | undefined | null)[] | undefined) => string[];
+export type FilterValueLimits = {
+    maxValues?: number;
+};
+export declare const tooManyValuesMessage: (maxValues: number) => string;
 export declare const isEmptyFilter: (filter: Filter) => boolean;
-export declare const isValidFilter: (filter: Filter) => boolean;
-export declare const validateFilterField: (filter: Filter) => {
+export declare const isValidFilter: (filter: Filter, limits?: FilterValueLimits) => boolean;
+export declare const validateFilterField: (filter: Filter, limits?: FilterValueLimits) => {
     field: string;
     message: string;
 }[];
 export declare const isEmptyFormFilter: (filter: FormFilter) => boolean;
-export declare const isValidFormFilter: (filter: FormFilter) => boolean;
-export declare const validateFormFilter: (filter: FormFilter) => string[];
+export declare const isValidFormFilter: (filter: FormFilter, limits?: FilterValueLimits) => boolean;
+export declare const validateFormFilter: (filter: FormFilter, limits?: FilterValueLimits) => string[];
 export declare const isFilter: (filter: FormFilter) => filter is Filter;

package/dist/src/components/filterform/filterHelpers.js

@@ -0,0 +1,71 @@
+const isMultiValueTextOperator = (operator) => operator === "isAnyOf" || operator === "isNoneOf";
+const normalizeMultiValues = (raw) => {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const value of raw ?? []) {
+    if (value === null || value === void 0) continue;
+    const trimmed = String(value).trim();
+    if (trimmed === "") continue;
+    const key = trimmed.toLowerCase();
+    if (seen.has(key)) continue;
+    seen.add(key);
+    out.push(trimmed);
+  }
+  return out;
+};
+const tooManyValuesMessage = (maxValues) => `Up to ${maxValues} values`;
+const exceedsMaxValues = (values, limits) => (limits == null ? void 0 : limits.maxValues) !== void 0 && values !== void 0 && values.length > limits.maxValues;
+const isEmptyFilter = (filter) => {
+  if (filter.operator === "blank" || filter.operator === "notBlank") {
+    return false;
+  }
+  if (filter.values && filter.values.length > 0 && filter.values.every(
+    (value) => value !== "" && value !== void 0 && value !== null
+  )) {
+    return false;
+  }
+  return true;
+};
+const isEmptyFormFilter = (filter) => {
+  if (filter.operator === "blank" || filter.operator === "notBlank") {
+    return false;
+  }
+  if (filter.values && filter.values.length > 0 && filter.values.every(
+    (value) => value !== "" && value !== void 0 && value !== null
+  )) {
+    return false;
+  }
+  return true;
+};
+const validateFormFilter = (filter, limits) => {
+  const errors = [];
+  if (!filter.operator) {
+    errors.push("Operator is required");
+    return errors;
+  }
+  if (isEmptyFormFilter(filter)) {
+    errors.push("Value is required");
+  }
+  if (exceedsMaxValues(filter.values, limits)) {
+    errors.push(tooManyValuesMessage(limits.maxValues));
+  }
+  if (filter.type === "number" && filter.operator === "inRange") {
+    if (filter.values && filter.values.length !== 2) {
+      errors.push("Value is required");
+    }
+  }
+  return errors;
+};
+const isFilter = (filter) => {
+  return filter.operator !== void 0 && filter.field !== void 0 && filter.type !== void 0;
+};
+export {
+  isEmptyFilter,
+  isEmptyFormFilter,
+  isFilter,
+  isMultiValueTextOperator,
+  normalizeMultiValues,
+  tooManyValuesMessage,
+  validateFormFilter
+};
+//# sourceMappingURL=filterHelpers.js.map

package/dist/src/components/filterform/filterHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterHelpers.js","sources":["../../../../src/components/filterform/filterHelpers.ts"],"sourcesContent":["import { Filter } from './types'\n\n// Multi-value text operators — the value is a chip list, not a single string.\nexport const isMultiValueTextOperator = (\n  operator: string | undefined\n): boolean => operator === 'isAnyOf' || operator === 'isNoneOf'\n\n/**\n * Normalize a chip list: trim, drop empties, dedupe case-insensitively (the\n * match is case-insensitive, so `ABC` and `abc` are the same rule). Keeps\n * first-seen casing and order so the chips read the way they were pasted.\n *\n * Applied when values enter reducer state (`useFilterField`), so the chips\n * on screen, the validation count and the submitted `values` are one array.\n */\nexport const normalizeMultiValues = (\n  raw: (string | number | undefined | null)[] | undefined\n): string[] => {\n  const seen = new Set<string>()\n  const out: string[] = []\n  for (const value of raw ?? []) {\n    if (value === null || value === undefined) continue\n    const trimmed = String(value).trim()\n    if (trimmed === '') continue\n    const key = trimmed.toLowerCase()\n    if (seen.has(key)) continue\n    seen.add(key)\n    out.push(trimmed)\n  }\n  return out\n}\n\n// The only `FilterConfig` fields validation consults. Passed separately from\n// the filter because a submitted `Filter` doesn't carry its config.\nexport type FilterValueLimits = { maxValues?: number }\n\nexport const tooManyValuesMessage = (maxValues: number) =>\n  `Up to ${maxValues} values`\n\nconst exceedsMaxValues = (\n  values: unknown[] | undefined,\n  limits: FilterValueLimits | undefined\n): limits is { maxValues: number } =>\n  limits?.maxValues !== undefined &&\n  values !== undefined &&\n  values.length > limits.maxValues\n\nexport const isEmptyFilter = (filter: Filter) => {\n  if (filter.operator === 'blank' || filter.operator === 'notBlank') {\n    return false\n  }\n\n  if (\n    filter.values &&\n    filter.values.length > 0 &&\n    filter.values.every(\n      (value) => value !== '' && value !== undefined && value !== null\n    )\n  ) {\n    return false\n  }\n\n  return true\n}\n\nexport const isValidFilter = (filter: Filter, limits?: FilterValueLimits) => {\n  return validateFilterField(filter, limits).length === 0\n}\n\nexport const validateFilterField = (\n  filter: Filter,\n  limits?: FilterValueLimits\n): { field: string; message: string }[] => {\n  const errors = []\n\n  if (!filter.operator) {\n    errors.push({ field: filter.field, message: 'Operator is required' })\n    return errors\n  }\n\n  if (isEmptyFilter(filter)) {\n    errors.push({ field: filter.field, message: 'Value is required' })\n  }\n\n  if (exceedsMaxValues(filter.values, limits)) {\n    errors.push({\n      field: filter.field,\n      message: tooManyValuesMessage(limits.maxValues),\n    })\n  }\n\n  if (filter.type === 'number' && filter.operator === 'inRange') {\n    if (filter.values && filter.values.length !== 2) {\n      errors.push({ field: filter.field, message: 'Value is required' })\n    }\n  }\n\n  return errors\n}\n\nimport { FormFilter } from './types'\n\nexport const isEmptyFormFilter = (filter: FormFilter) => {\n  if (filter.operator === 'blank' || filter.operator === 'notBlank') {\n    return false\n  }\n\n  if (\n    filter.values &&\n    filter.values.length > 0 &&\n    filter.values.every(\n      (value) => value !== '' && value !== undefined && value !== null\n    )\n  ) {\n    return false\n  }\n\n  return true\n}\n\nexport const isValidFormFilter = (\n  filter: FormFilter,\n  limits?: FilterValueLimits\n) => {\n  return validateFormFilter(filter, limits).length === 0\n}\n\nexport const validateFormFilter = (\n  filter: FormFilter,\n  limits?: FilterValueLimits\n): string[] => {\n  const errors = []\n\n  if (!filter.operator) {\n    errors.push('Operator is required')\n    return errors\n  }\n\n  if (isEmptyFormFilter(filter)) {\n    errors.push('Value is required')\n  }\n\n  if (exceedsMaxValues(filter.values, limits)) {\n    errors.push(tooManyValuesMessage(limits.maxValues))\n  }\n\n  if (filter.type === 'number' && filter.operator === 'inRange') {\n    if (filter.values && filter.values.length !== 2) {\n      errors.push('Value is required')\n    }\n  }\n\n  return errors\n}\n\nexport const isFilter = (filter: FormFilter): filter is Filter => {\n  return (\n    filter.operator !== undefined &&\n    filter.field !== undefined &&\n    filter.type !== undefined\n  )\n}\n"],"names":[],"mappings":"AAGO,MAAM,2BAA2B,CACtC,aACY,aAAa,aAAa,aAAa;AAU9C,MAAM,uBAAuB,CAClC,QACa;AACb,QAAM,2BAAW,IAAA;AACjB,QAAM,MAAgB,CAAA;AACtB,aAAW,SAAS,OAAO,IAAI;AAC7B,QAAI,UAAU,QAAQ,UAAU,OAAW;AAC3C,UAAM,UAAU,OAAO,KAAK,EAAE,KAAA;AAC9B,QAAI,YAAY,GAAI;AACpB,UAAM,MAAM,QAAQ,YAAA;AACpB,QAAI,KAAK,IAAI,GAAG,EAAG;AACnB,SAAK,IAAI,GAAG;AACZ,QAAI,KAAK,OAAO;AAAA,EAClB;AACA,SAAO;AACT;AAMO,MAAM,uBAAuB,CAAC,cACnC,SAAS,SAAS;AAEpB,MAAM,mBAAmB,CACvB,QACA,YAEA,iCAAQ,eAAc,UACtB,WAAW,UACX,OAAO,SAAS,OAAO;AAElB,MAAM,gBAAgB,CAAC,WAAmB;AAC/C,MAAI,OAAO,aAAa,WAAW,OAAO,aAAa,YAAY;AACjE,WAAO;AAAA,EACT;AAEA,MACE,OAAO,UACP,OAAO,OAAO,SAAS,KACvB,OAAO,OAAO;AAAA,IACZ,CAAC,UAAU,UAAU,MAAM,UAAU,UAAa,UAAU;AAAA,EAAA,GAE9D;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAuCO,MAAM,oBAAoB,CAAC,WAAuB;AACvD,MAAI,OAAO,aAAa,WAAW,OAAO,aAAa,YAAY;AACjE,WAAO;AAAA,EACT;AAEA,MACE,OAAO,UACP,OAAO,OAAO,SAAS,KACvB,OAAO,OAAO;AAAA,IACZ,CAAC,UAAU,UAAU,MAAM,UAAU,UAAa,UAAU;AAAA,EAAA,GAE9D;AACA,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AASO,MAAM,qBAAqB,CAChC,QACA,WACa;AACb,QAAM,SAAS,CAAA;AAEf,MAAI,CAAC,OAAO,UAAU;AACpB,WAAO,KAAK,sBAAsB;AAClC,WAAO;AAAA,EACT;AAEA,MAAI,kBAAkB,MAAM,GAAG;AAC7B,WAAO,KAAK,mBAAmB;AAAA,EACjC;AAEA,MAAI,iBAAiB,OAAO,QAAQ,MAAM,GAAG;AAC3C,WAAO,KAAK,qBAAqB,OAAO,SAAS,CAAC;AAAA,EACpD;AAEA,MAAI,OAAO,SAAS,YAAY,OAAO,aAAa,WAAW;AAC7D,QAAI,OAAO,UAAU,OAAO,OAAO,WAAW,GAAG;AAC/C,aAAO,KAAK,mBAAmB;AAAA,IACjC;AAAA,EACF;AAEA,SAAO;AACT;AAEO,MAAM,WAAW,CAAC,WAAyC;AAChE,SACE,OAAO,aAAa,UACpB,OAAO,UAAU,UACjB,OAAO,SAAS;AAEpB;"}

package/dist/src/components/filterform/index.d.ts

@@ -1,2 +1,4 @@
 export { FiltersForm } from './FiltersForm.js';
-export type { FilterForm, FilterConfig, FilterType, Filter, FilterGroup, } from './types.js';
+export type { FilterForm, FilterConfig, FilterType, Filter, FilterGroup, Operator, } from './types.js';
+export { MultiValueTextOperatorOptions, operatorOptionsFor, } from './useFilterField.js';
+export { isMultiValueTextOperator, normalizeMultiValues } from './filterHelpers.js';

package/dist/src/components/filterform/types.d.ts

@@ -28,8 +28,10 @@ export type FilterConfig = {
     type: FilterType;
     disabled?: boolean;
     options?: SelectOptionsType | NumberOptionsType;
+    operators?: Operator[];
+    maxValues?: number;
 };
-export type Operator = 'equals' | 'notEqual' | 'blank' | 'notBlank' | 'greaterThan' | 'greaterThanOrEqual' | 'lessThan' | 'lessThanOrEqual' | 'inRange' | 'contains' | 'notContains' | 'startsWith' | 'endsWith';
+export type Operator = 'equals' | 'notEqual' | 'blank' | 'notBlank' | 'greaterThan' | 'greaterThanOrEqual' | 'lessThan' | 'lessThanOrEqual' | 'inRange' | 'contains' | 'notContains' | 'startsWith' | 'endsWith' | 'isAnyOf' | 'isNoneOf';
 type SelectFilter = {
     field: string;
     type: 'select';
@@ -45,7 +47,7 @@ type NumberFilter = {
 type TextFilter = {
     field: string;
     type: 'text';
-    operator: Extract<Operator, 'contains' | 'notContains' | 'startsWith' | 'endsWith' | 'blank' | 'notBlank'> | undefined;
+    operator: Extract<Operator, 'contains' | 'notContains' | 'startsWith' | 'endsWith' | 'blank' | 'notBlank' | 'isAnyOf' | 'isNoneOf'> | undefined;
     values: string[];
 };
 export type Filter = SelectFilter | NumberFilter | TextFilter;

package/dist/src/components/filterform/useFilterField.cjs

@@ -0,0 +1,245 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const filterHelpers = require("./filterHelpers.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const TypeToOperatorOptions = {
+  select: [
+    { label: "is any of", value: "equals" },
+    { label: "is not any of", value: "notEqual" },
+    { label: "has no value", value: "blank" },
+    { label: "has any value", value: "notBlank" }
+  ],
+  number: [
+    { label: "is", value: "equals" },
+    { label: "is not", value: "notEqual" },
+    { label: "is greater than", value: "greaterThan" },
+    { label: "is greater than or equal to", value: "greaterThanOrEqual" },
+    { label: "is less than", value: "lessThan" },
+    { label: "is less than or equal to", value: "lessThanOrEqual" },
+    { label: "has no value", value: "blank" },
+    { label: "has any value", value: "notBlank" },
+    { label: "is between", value: "inRange" }
+  ],
+  text: [
+    { label: "contains", value: "contains" },
+    { label: "does not contain", value: "notContains" },
+    { label: "starts with", value: "startsWith" },
+    { label: "ends with", value: "endsWith" },
+    { label: "has no value", value: "blank" },
+    { label: "has any value", value: "notBlank" }
+  ]
+};
+const MultiValueTextOperatorOptions = [
+  { label: "is any of", value: "isAnyOf" },
+  { label: "is not any of", value: "isNoneOf" }
+];
+const operatorOptionsFor = (config) => {
+  const defaults = TypeToOperatorOptions[config.type];
+  if (!config.operators) return defaults;
+  const known = config.type === "text" ? [...defaults, ...MultiValueTextOperatorOptions] : defaults;
+  return config.operators.flatMap((operator) => {
+    const option = known.find((candidate) => candidate.value === operator);
+    return option ? [option] : [];
+  });
+};
+const buildValueInputConfig = (config, operator) => {
+  if (config.type === "select") {
+    if (operator === "blank" || operator === "notBlank") return;
+    return {
+      type: "select",
+      valueOptions: config.options || []
+    };
+  }
+  if (config.type === "number") {
+    if (operator === "blank" || operator === "notBlank") return;
+    return {
+      type: "number",
+      inputCount: operator === "inRange" ? 2 : 1,
+      numberOptions: config.options
+    };
+  }
+  if (config.type === "text") {
+    if (operator === "blank" || operator === "notBlank") return;
+    return {
+      type: "text",
+      multiValue: filterHelpers.isMultiValueTextOperator(operator),
+      maxValues: config.maxValues
+    };
+  }
+};
+const filterFieldReducer = (state, action) => {
+  var _a, _b, _c, _d, _e;
+  switch (action.type) {
+    case "setField": {
+      const config = state.filterConfigs.find(
+        (config2) => config2.field === action.payload
+      );
+      if (!config) return state;
+      const operatorOptions = operatorOptionsFor(config);
+      const newFilter = {
+        ...state.filter,
+        type: config.type,
+        field: action.payload,
+        operator: (_a = operatorOptions[0]) == null ? void 0 : _a.value,
+        values: []
+      };
+      const pendingFilter = {
+        ...newFilter,
+        errors: filterHelpers.validateFormFilter(newFilter, config)
+      };
+      return {
+        ...state,
+        filter: pendingFilter,
+        config,
+        operatorOptions,
+        valueInputConfig: operatorOptions.length > 0 ? buildValueInputConfig(config, operatorOptions[0].value) : void 0
+      };
+    }
+    case "setOperator": {
+      if (!state.config) return state;
+      if (!action.payload) return state;
+      const pendingFilter = {
+        ...state.filter,
+        operator: action.payload,
+        values: []
+      };
+      return {
+        ...state,
+        filter: {
+          ...pendingFilter,
+          errors: filterHelpers.validateFormFilter(pendingFilter, state.config)
+        },
+        valueInputConfig: buildValueInputConfig(state.config, action.payload)
+      };
+    }
+    case "setValues": {
+      if (!state.filter) return state;
+      const values = state.filter.type === "number" ? action.payload.map((value) => Number(value)) : filterHelpers.isMultiValueTextOperator(state.filter.operator) ? (
+        // Normalized on the way into state, not just for display —
+        // validation counts and `onSubmit` emit exactly these chips.
+        filterHelpers.normalizeMultiValues(action.payload)
+      ) : action.payload.filter(
+        (value) => value !== null && value !== void 0
+      );
+      const pendingFilter = {
+        ...state.filter,
+        values
+      };
+      pendingFilter.errors = filterHelpers.validateFormFilter(pendingFilter, state.config);
+      return {
+        ...state,
+        filter: pendingFilter
+      };
+    }
+    case "initialize": {
+      const field = ((_b = state.filter) == null ? void 0 : _b.field) || ((_c = state.filterConfigs.find((config2) => !config2.disabled)) == null ? void 0 : _c.field);
+      const config = state.filterConfigs.find(
+        (config2) => config2.field === field
+      );
+      if (!config) return state;
+      const operatorOptions = operatorOptionsFor(config);
+      const persisted = (_d = state.filter) == null ? void 0 : _d.operator;
+      const persistedAllowed = persisted !== void 0 && operatorOptions.some((option) => option.value === persisted);
+      const operator = persistedAllowed ? persisted : (_e = operatorOptions[0]) == null ? void 0 : _e.value;
+      let filter;
+      if (!state.filter) {
+        filter = {
+          field,
+          type: config.type,
+          operator,
+          values: []
+        };
+      } else if (!persistedAllowed) {
+        filter = { ...state.filter, operator, values: [] };
+      } else if (filterHelpers.isMultiValueTextOperator(operator)) {
+        filter = {
+          ...state.filter,
+          values: filterHelpers.normalizeMultiValues(state.filter.values)
+        };
+      } else {
+        filter = { ...state.filter };
+      }
+      filter.errors = filterHelpers.validateFormFilter(filter, config);
+      return {
+        ...state,
+        config,
+        filter,
+        operatorOptions,
+        valueInputConfig: operatorOptions.length > 0 ? buildValueInputConfig(config, operator) : void 0
+      };
+    }
+    default:
+      return state;
+  }
+};
+const useFilterField = ({
+  filterConfigs,
+  filter: initialFilter
+}) => {
+  const [{ filter, config, operatorOptions, valueInputConfig }, dispatch] = React__namespace.useReducer(
+    filterFieldReducer,
+    {
+      filter: initialFilter,
+      filterConfigs,
+      config: void 0,
+      operatorOptions: [],
+      valueInputConfig: void 0
+    },
+    (state) => {
+      return filterFieldReducer(state, {
+        type: "initialize",
+        payload: void 0
+      });
+    }
+  );
+  const handleFieldChange = (value) => {
+    dispatch({
+      type: "setField",
+      payload: value
+    });
+  };
+  const handleOperatorChange = (value) => {
+    dispatch({
+      type: "setOperator",
+      payload: value
+    });
+  };
+  const handleValuesChange = (value) => {
+    dispatch({
+      type: "setValues",
+      payload: value
+    });
+  };
+  return {
+    filter,
+    config,
+    operatorOptions,
+    valueInputConfig,
+    handleFieldChange,
+    handleOperatorChange,
+    handleValuesChange
+  };
+};
+exports.isMultiValueTextOperator = filterHelpers.isMultiValueTextOperator;
+exports.MultiValueTextOperatorOptions = MultiValueTextOperatorOptions;
+exports.TypeToOperatorOptions = TypeToOperatorOptions;
+exports.operatorOptionsFor = operatorOptionsFor;
+exports.useFilterField = useFilterField;
+//# sourceMappingURL=useFilterField.cjs.map

package/dist/src/components/filterform/useFilterField.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilterField.cjs","sources":["../../../../src/components/filterform/useFilterField.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  FilterConfig,\n  FilterType,\n  FormFilter,\n  NumberOptionsType,\n  Operator,\n  SelectOptionsType,\n} from './types'\nimport {\n  isMultiValueTextOperator,\n  normalizeMultiValues,\n  validateFormFilter,\n} from './filterHelpers'\nexport { isMultiValueTextOperator } from './filterHelpers'\nexport type UseFilterFieldInputs = {\n  filterConfigs: FilterConfig[]\n  filter?: FormFilter\n}\n\ntype UseFilterFieldOutputs = {\n  filter: FormFilter | undefined\n  config: FilterConfig | undefined\n  operatorOptions: { label: string; value: string }[]\n  valueInputConfig: ValueInputConfig | undefined\n  handleFieldChange: (value: string) => void\n  handleOperatorChange: (value: string) => void\n  handleValuesChange: (value: (string | number | undefined | null)[]) => void\n}\n\nexport const TypeToOperatorOptions: Record<\n  FilterType,\n  { label: string; value: Operator }[]\n> = {\n  select: [\n    { label: 'is any of', value: 'equals' },\n    { label: 'is not any of', value: 'notEqual' },\n    { label: 'has no value', value: 'blank' },\n    { label: 'has any value', value: 'notBlank' },\n  ],\n  number: [\n    { label: 'is', value: 'equals' },\n    { label: 'is not', value: 'notEqual' },\n    { label: 'is greater than', value: 'greaterThan' },\n    { label: 'is greater than or equal to', value: 'greaterThanOrEqual' },\n    { label: 'is less than', value: 'lessThan' },\n    { label: 'is less than or equal to', value: 'lessThanOrEqual' },\n    { label: 'has no value', value: 'blank' },\n    { label: 'has any value', value: 'notBlank' },\n    { label: 'is between', value: 'inRange' },\n  ],\n  text: [\n    { label: 'contains', value: 'contains' },\n    { label: 'does not contain', value: 'notContains' },\n    { label: 'starts with', value: 'startsWith' },\n    { label: 'ends with', value: 'endsWith' },\n    { label: 'has no value', value: 'blank' },\n    { label: 'has any value', value: 'notBlank' },\n  ],\n}\n\n// Multi-value exact-match operators for text fields. Deliberately NOT part of\n// `TypeToOperatorOptions.text`: a field only offers them when its\n// `FilterConfig.operators` lists them, so every existing consumer keeps the\n// operator list it has today (see the `operators` doc in types.ts).\nexport const MultiValueTextOperatorOptions: {\n  label: string\n  value: Operator\n}[] = [\n  { label: 'is any of', value: 'isAnyOf' },\n  { label: 'is not any of', value: 'isNoneOf' },\n]\n\n/**\n * Operator options a field offers: its type's default list unless the config\n * names its own (`operators`), in which case that list — in the given order,\n * dropping anything the type can't express. `operators` may therefore both\n * narrow the defaults and add the opt-in multi-value text operators.\n */\nexport const operatorOptionsFor = (\n  config: FilterConfig\n): { label: string; value: Operator }[] => {\n  const defaults = TypeToOperatorOptions[config.type]\n  if (!config.operators) return defaults\n  const known =\n    config.type === 'text'\n      ? [...defaults, ...MultiValueTextOperatorOptions]\n      : defaults\n  return config.operators.flatMap((operator) => {\n    const option = known.find((candidate) => candidate.value === operator)\n    return option ? [option] : []\n  })\n}\n\ntype SelectValueInputConfig = {\n  type: 'select'\n  valueOptions: { label: string; value: string }[]\n}\n\ntype NumberValueInputConfig = {\n  type: 'number'\n  inputCount: number\n  numberOptions?: { max: number; min: number; step: number }\n}\n\ntype TextValueInputConfig = {\n  type: 'text'\n  // True for `isAnyOf` / `isNoneOf`: the value input is a chips list rather\n  // than a single text box. `maxValues` is the config's cap, if any.\n  multiValue?: boolean\n  maxValues?: number\n}\n\nexport type ValueInputConfig =\n  SelectValueInputConfig | NumberValueInputConfig | TextValueInputConfig\n\ntype FilterFieldState = {\n  filter: FormFilter | undefined\n  filterConfigs: FilterConfig[]\n  config: FilterConfig | undefined\n  operatorOptions: { label: string; value: string }[]\n  valueInputConfig: ValueInputConfig | undefined\n}\n\ntype Action = {\n  type: 'setField' | 'setOperator' | 'initialize'\n  payload: string | undefined\n}\ntype SetValuesAction = {\n  type: 'setValues'\n  payload: (string | number | undefined | null)[]\n}\n\nconst buildValueInputConfig = (\n  config: FilterConfig,\n  operator: string\n): ValueInputConfig | undefined => {\n  if (config.type === 'select') {\n    if (operator === 'blank' || operator === 'notBlank') return\n\n    return {\n      type: 'select',\n      valueOptions: (config.options as SelectOptionsType) || [],\n    }\n  }\n\n  if (config.type === 'number') {\n    if (operator === 'blank' || operator === 'notBlank') return\n\n    return {\n      type: 'number',\n      inputCount: operator === 'inRange' ? 2 : 1,\n      numberOptions: config.options as NumberOptionsType,\n    }\n  }\n\n  if (config.type === 'text') {\n    if (operator === 'blank' || operator === 'notBlank') return\n\n    return {\n      type: 'text',\n      multiValue: isMultiValueTextOperator(operator),\n      maxValues: config.maxValues,\n    }\n  }\n}\n\nconst filterFieldReducer = (\n  state: FilterFieldState,\n  action: Action | SetValuesAction\n) => {\n  switch (action.type) {\n    case 'setField': {\n      const config = state.filterConfigs.find(\n        (config) => config.field === action.payload\n      )\n\n      if (!config) return state\n\n      const operatorOptions = operatorOptionsFor(config)\n\n      const newFilter = {\n        ...state.filter,\n        type: config.type,\n        field: action.payload,\n        operator: operatorOptions[0]?.value,\n        values: [],\n      } as FormFilter\n\n      const pendingFilter = {\n        ...newFilter,\n        errors: validateFormFilter(newFilter, config),\n      }\n\n      return {\n        ...state,\n        filter: pendingFilter,\n        config,\n        operatorOptions,\n        valueInputConfig:\n          operatorOptions.length > 0\n            ? buildValueInputConfig(config, operatorOptions[0].value)\n            : undefined,\n      }\n    }\n    case 'setOperator': {\n      if (!state.config) return state\n      if (!action.payload) return state\n\n      const pendingFilter = {\n        ...state.filter,\n        operator: action.payload,\n        values: [],\n      } as FormFilter\n\n      return {\n        ...state,\n        filter: {\n          ...pendingFilter,\n          errors: validateFormFilter(pendingFilter, state.config),\n        },\n        valueInputConfig: buildValueInputConfig(state.config, action.payload),\n      }\n    }\n    case 'setValues': {\n      if (!state.filter) return state\n\n      const values =\n        state.filter.type === 'number'\n          ? action.payload.map((value) => Number(value))\n          : isMultiValueTextOperator(state.filter.operator)\n            ? // Normalized on the way into state, not just for display —\n              // validation counts and `onSubmit` emit exactly these chips.\n              normalizeMultiValues(action.payload)\n            : (action.payload.filter(\n                (value) => value !== null && value !== undefined\n              ) as string[])\n\n      const pendingFilter = {\n        ...state.filter,\n        values: values,\n      }\n\n      pendingFilter.errors = validateFormFilter(pendingFilter, state.config)\n\n      return {\n        ...state,\n        filter: pendingFilter,\n      }\n    }\n    case 'initialize': {\n      const field =\n        state.filter?.field ||\n        state.filterConfigs.find((config) => !config.disabled)?.field\n      const config = state.filterConfigs.find(\n        (config) => config.field === field\n      )\n\n      if (!config) return state\n\n      const operatorOptions = operatorOptionsFor(config)\n\n      // A persisted filter's operator must still be one this field offers.\n      // Configs change between sessions (a field narrowed to `contains`, or\n      // one that never opted into the multi-value operators), and the\n      // backend may not understand a stale operator — so it falls back to\n      // the field's first operator with its values cleared, rather than\n      // re-submitting something the config no longer allows.\n      const persisted = state.filter?.operator\n      const persistedAllowed =\n        persisted !== undefined &&\n        operatorOptions.some((option) => option.value === persisted)\n      const operator = persistedAllowed ? persisted : operatorOptions[0]?.value\n\n      let filter: FormFilter\n      if (!state.filter) {\n        filter = {\n          field,\n          type: config.type,\n          operator,\n          values: [],\n        } as FormFilter\n      } else if (!persistedAllowed) {\n        filter = { ...state.filter, operator, values: [] } as FormFilter\n      } else if (isMultiValueTextOperator(operator)) {\n        // Same normalization as `setValues`, so a persisted chip list that\n        // predates it (or was hand-edited) can't show one chip and count two.\n        filter = {\n          ...state.filter,\n          values: normalizeMultiValues(state.filter.values),\n        }\n      } else {\n        // A copy: the incoming object is the caller's, and writing `errors`\n        // onto it would hide the correction from `FilterInput`'s comparison\n        // of what it was given against what it initialized to.\n        filter = { ...state.filter }\n      }\n\n      filter.errors = validateFormFilter(filter, config)\n\n      return {\n        ...state,\n        config,\n        filter,\n        operatorOptions,\n        valueInputConfig:\n          operatorOptions.length > 0\n            ? buildValueInputConfig(config, operator)\n            : undefined,\n      }\n    }\n    default:\n      return state\n  }\n}\n\nexport const useFilterField = ({\n  filterConfigs,\n  filter: initialFilter,\n}: UseFilterFieldInputs): UseFilterFieldOutputs => {\n  const [{ filter, config, operatorOptions, valueInputConfig }, dispatch] =\n    React.useReducer(\n      filterFieldReducer,\n      {\n        filter: initialFilter,\n        filterConfigs,\n        config: undefined,\n        operatorOptions: [],\n        valueInputConfig: undefined,\n      },\n      (state) => {\n        return filterFieldReducer(state, {\n          type: 'initialize',\n          payload: undefined,\n        })\n      }\n    )\n\n  const handleFieldChange = (value: string) => {\n    dispatch({\n      type: 'setField',\n      payload: value,\n    })\n  }\n\n  const handleOperatorChange = (value: string) => {\n    dispatch({\n      type: 'setOperator',\n      payload: value,\n    })\n  }\n\n  const handleValuesChange = (\n    value: (string | number | undefined | null)[]\n  ) => {\n    dispatch({\n      type: 'setValues',\n      payload: value,\n    })\n  }\n\n  return {\n    filter,\n    config,\n    operatorOptions,\n    valueInputConfig,\n    handleFieldChange,\n    handleOperatorChange,\n    handleValuesChange,\n  }\n}\n"],"names":["isMultiValueTextOperator","config","validateFormFilter","normalizeMultiValues","React"],"mappings":"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"}

package/dist/src/components/filterform/useFilterField.d.ts

@@ -1,4 +1,5 @@
 import { FilterConfig, FilterType, FormFilter, Operator } from './types.js';
+export { isMultiValueTextOperator } from './filterHelpers.js';
 export type UseFilterFieldInputs = {
     filterConfigs: FilterConfig[];
     filter?: FormFilter;
@@ -19,6 +20,20 @@ export declare const TypeToOperatorOptions: Record<FilterType, {
     label: string;
     value: Operator;
 }[]>;
+export declare const MultiValueTextOperatorOptions: {
+    label: string;
+    value: Operator;
+}[];
+/**
+ * Operator options a field offers: its type's default list unless the config
+ * names its own (`operators`), in which case that list — in the given order,
+ * dropping anything the type can't express. `operators` may therefore both
+ * narrow the defaults and add the opt-in multi-value text operators.
+ */
+export declare const operatorOptionsFor: (config: FilterConfig) => {
+    label: string;
+    value: Operator;
+}[];
 type SelectValueInputConfig = {
     type: 'select';
     valueOptions: {
@@ -37,7 +52,8 @@ type NumberValueInputConfig = {
 };
 type TextValueInputConfig = {
     type: 'text';
+    multiValue?: boolean;
+    maxValues?: number;
 };
 export type ValueInputConfig = SelectValueInputConfig | NumberValueInputConfig | TextValueInputConfig;
 export declare const useFilterField: ({ filterConfigs, filter: initialFilter, }: UseFilterFieldInputs) => UseFilterFieldOutputs;
-export {};