@j2-health/design-system 0.2.0 → 0.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterInput.cjs","sources":["../../../../src/components/filterform/FilterInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport { FilterConfig } from '.'\nimport { useFilterField, ValueInputConfig } from './useFilterField'\nimport { Input, InputNumber, Select, Typography } from 'antd'\nimport { FormFilter } from './types'\nimport { normalizeMultiValues, tooManyValuesMessage } from './filterHelpers'\nimport cx from 'classnames'\nimport { SizeType } from 'antd/es/config-provider/SizeContext'\n\ntype FilterInputProps = {\n  value?: FormFilter\n  filterConfigs: FilterConfig[]\n  onChange?: (value: FormFilter) => void\n  onBlur?: (value: FormFilter) => void\n  className?: string\n  size?: SizeType\n}\n\nexport const FilterInput = ({\n  value,\n  filterConfigs,\n  onChange,\n  onBlur,\n  className,\n  size = 'middle',\n}: FilterInputProps) => {\n  const {\n    filter,\n    operatorOptions,\n    valueInputConfig,\n    handleFieldChange,\n    handleOperatorChange,\n    handleValuesChange,\n  } = useFilterField({\n    filterConfigs,\n    filter: value,\n  })\n\n  const fieldOptions = filterConfigs.map((config) => ({\n    label: config.label,\n    value: config.field,\n    disabled: config.disabled,\n  }))\n\n  // Mirror of the reducer's filter for callbacks that run after a render.\n  const latestFilterRef = React.useRef(filter)\n  latestFilterRef.current = filter\n\n  // Deferred a tick, and read from the ref rather than the closure. A tags\n  // `Select` commits unseparated search text as a chip inside its own blur\n  // handling, so `onChange` and `onBlur` arrive in the same browser event and\n  // React flushes the resulting reducer update only after both return. A\n  // synchronous `onBlur` would hand the parent the filter from *before* that\n  // last chip — and for a new rule the parent finalizes and unmounts this\n  // input, silently dropping the value. After the flush the ref holds it.\n  const handleBlur = () => {\n    setTimeout(() => {\n      const latest = latestFilterRef.current\n      if (latest) onBlur?.(latest)\n    }, 0)\n  }\n\n  // Track if this is a user-driven change (not initialization)\n  const isInitialMount = React.useRef(true)\n  const prevFilterRef = React.useRef(filter)\n\n  React.useEffect(() => {\n    // Skip the initial mount to avoid calling onChange during initialization\n    // — unless initialization itself corrected the persisted filter (an\n    // operator the field no longer offers, or a chip list that needed\n    // normalizing). Then the parent must learn about it, or it would keep\n    // and submit the stale filter until the user happened to touch the rule.\n    if (isInitialMount.current) {\n      isInitialMount.current = false\n      prevFilterRef.current = filter\n      if (value && filter && wasCorrectedOnInit(value, filter)) {\n        onChange?.(filter)\n      }\n      return\n    }\n\n    // Only call onChange if the filter actually changed\n    if (filter && filter !== prevFilterRef.current) {\n      prevFilterRef.current = filter\n      onChange?.(filter)\n    }\n  }, [filter, onChange])\n\n  return (\n    <div className={cx('grid grid-cols-3 gap-2', className)}>\n      <Select\n        options={fieldOptions}\n        value={filter?.field}\n        showSearch\n        optionFilterProp=\"label\"\n        onChange={handleFieldChange}\n        size={size}\n      />\n      <div className=\"col-span-2 flex gap-2\">\n        <Select\n          options={operatorOptions}\n          value={filter?.operator}\n          onChange={handleOperatorChange}\n          onBlur={handleBlur}\n          size={size}\n          popupMatchSelectWidth={false}\n        />\n        {valueInputConfig && (\n          <ValueInput\n            valueInputConfig={valueInputConfig}\n            values={filter?.values}\n            onChange={handleValuesChange}\n            onBlur={handleBlur}\n            size={size}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst sameList = (a: readonly unknown[], b: readonly unknown[]) =>\n  a.length === b.length && a.every((item, i) => item === b[i])\n\n// Whether initializing from a persisted filter changed anything the parent\n// holds — operator, values, or the validation result. `errors` counts: a\n// persisted rule can be unchanged yet newly invalid (a lowered `maxValues`),\n// or arrive with no `errors` at all (a plain `FilterForm` from storage), and\n// the form's validity is computed from the errors it holds, not from ours.\nconst wasCorrectedOnInit = (persisted: FormFilter, current: FormFilter) =>\n  persisted.operator !== current.operator ||\n  !sameList(persisted.values, current.values) ||\n  persisted.errors === undefined ||\n  !sameList(persisted.errors, current.errors ?? [])\n\ntype ValueInputProps = {\n  valueInputConfig: ValueInputConfig\n  values?: (string | number | undefined | null)[]\n  onChange: (value: (string | number | undefined | null)[]) => void\n  onBlur: () => void\n  size: SizeType\n}\n\nconst ValueInput = ({\n  valueInputConfig,\n  values,\n  onChange,\n  onBlur,\n  size,\n}: ValueInputProps) => {\n  const handleChange = (value: string | number | null) => {\n    if (value === null) {\n      onChange([])\n    } else {\n      onChange([value])\n    }\n  }\n\n  const handleNumberChange = (value: string | number | null, index: number) => {\n    const newValues: (string | number | undefined | null)[] = [\n      ...(values ?? []),\n    ]\n    newValues[index] = value\n    onChange(newValues)\n  }\n\n  switch (valueInputConfig.type) {\n    case 'select':\n      return (\n        <Select\n          options={valueInputConfig.valueOptions}\n          onChange={onChange}\n          showSearch\n          allowClear\n          mode=\"multiple\"\n          onBlur={onBlur}\n          value={values}\n          className=\"w-full truncate\"\n          size={size}\n          optionFilterProp=\"label\"\n        />\n      )\n    case 'number':\n      return (\n        <div className=\"flex gap-2 grow\">\n          {Array.from({ length: valueInputConfig.inputCount }).map(\n            (_, index) => (\n              <React.Fragment key={`number-input-${index}`}>\n                {index !== 0 && <span className=\"my-auto\">and</span>}\n                <InputNumber\n                  onChange={(value) => handleNumberChange(value, index)}\n                  onBlur={onBlur}\n                  value={values?.[index]}\n                  className=\"basis-1/2\"\n                  size={size}\n                  {...(valueInputConfig.numberOptions ?? {})}\n                />\n              </React.Fragment>\n            )\n          )}\n        </div>\n      )\n    case 'text':\n      if (valueInputConfig.multiValue) {\n        return (\n          <MultiValueTextInput\n            values={values}\n            maxValues={valueInputConfig.maxValues}\n            onChange={onChange}\n            onBlur={onBlur}\n            size={size}\n          />\n        )\n      }\n      return (\n        <Input\n          onBlur={onBlur}\n          value={values?.[0] ?? undefined}\n          onChange={(e) => handleChange(e.target.value)}\n          className=\"w-full\"\n          size={size}\n        />\n      )\n    default:\n      return null\n  }\n}\n\n// Commas, newlines (both flavours) and tabs: a column pasted from Excel or a\n// comma-separated list from an email both land as one chip per value.\nexport const MULTI_VALUE_TOKEN_SEPARATORS = [',', '\\n', '\\r', '\\t']\n\n/**\n * Chips input for the multi-value text operators (`isAnyOf` / `isNoneOf`).\n *\n * A tags Select rather than a text box split at query time: every token is\n * visible and individually removable before Apply, so a pasted value that\n * itself contains a comma (street addresses do) can be seen and fixed\n * instead of being silently shredded. The dropdown is kept closed — there\n * are no options to pick from; Enter or a separator commits a chip.\n */\nconst MultiValueTextInput = ({\n  values,\n  maxValues,\n  onChange,\n  onBlur,\n  size,\n}: {\n  values?: (string | number | undefined | null)[]\n  maxValues?: number\n  onChange: (value: (string | number | undefined | null)[]) => void\n  onBlur: () => void\n  size: SizeType\n}) => {\n  // Rendered as stored: `useFilterField` normalizes values on the way into\n  // state, so what the chips show is exactly what validation counts and\n  // what `onSubmit` emits. (Numbers/nulls can't occur for a text filter;\n  // the map is only for the shared `values` type.)\n  const chips = (values ?? []).flatMap((value) =>\n    value === null || value === undefined ? [] : [String(value)]\n  )\n  const over = maxValues !== undefined && chips.length > maxValues\n\n  return (\n    <div className=\"flex flex-col gap-1 w-full min-w-0\">\n      <Select\n        mode=\"tags\"\n        tokenSeparators={MULTI_VALUE_TOKEN_SEPARATORS}\n        value={chips}\n        onChange={(next: string[]) => onChange(normalizeMultiValues(next))}\n        onBlur={onBlur}\n        open={false}\n        suffixIcon={null}\n        placeholder=\"Type or paste values, separated by commas\"\n        className=\"w-full\"\n        size={size}\n        status={over ? 'error' : undefined}\n        aria-label=\"Values\"\n      />\n      {maxValues !== undefined && (\n        <Typography.Text\n          type={over ? 'danger' : 'secondary'}\n          className=\"text-xs\"\n          role={over ? 'alert' : undefined}\n        >\n          {over\n            ? `${tooManyValuesMessage(maxValues)} — remove ${\n                chips.length - maxValues\n              } to apply`\n            : `${chips.length} / ${maxValues} values`}\n        </Typography.Text>\n      )}\n    </div>\n  )\n}\n"],"names":["useFilterField","React","jsx","Select","jsxs","InputNumber","Input","normalizeMultiValues","Typography","tooManyValuesMessage"],"mappings":"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"}

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

@@ -11,4 +11,5 @@ type FilterInputProps = {
     size?: SizeType;
 };
 export declare const FilterInput: ({ value, filterConfigs, onChange, onBlur, className, size, }: FilterInputProps) => React.JSX.Element;
+export declare const MULTI_VALUE_TOKEN_SEPARATORS: string[];
 export {};

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

@@ -0,0 +1,221 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useFilterField } from "./useFilterField.js";
+import { Select, Input, InputNumber, Typography } from "antd";
+import { normalizeMultiValues, tooManyValuesMessage } from "./filterHelpers.js";
+import cx from "classnames";
+const FilterInput = ({
+  value,
+  filterConfigs,
+  onChange,
+  onBlur,
+  className,
+  size = "middle"
+}) => {
+  const {
+    filter,
+    operatorOptions,
+    valueInputConfig,
+    handleFieldChange,
+    handleOperatorChange,
+    handleValuesChange
+  } = useFilterField({
+    filterConfigs,
+    filter: value
+  });
+  const fieldOptions = filterConfigs.map((config) => ({
+    label: config.label,
+    value: config.field,
+    disabled: config.disabled
+  }));
+  const latestFilterRef = React.useRef(filter);
+  latestFilterRef.current = filter;
+  const handleBlur = () => {
+    setTimeout(() => {
+      const latest = latestFilterRef.current;
+      if (latest) onBlur == null ? void 0 : onBlur(latest);
+    }, 0);
+  };
+  const isInitialMount = React.useRef(true);
+  const prevFilterRef = React.useRef(filter);
+  React.useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      prevFilterRef.current = filter;
+      if (value && filter && wasCorrectedOnInit(value, filter)) {
+        onChange == null ? void 0 : onChange(filter);
+      }
+      return;
+    }
+    if (filter && filter !== prevFilterRef.current) {
+      prevFilterRef.current = filter;
+      onChange == null ? void 0 : onChange(filter);
+    }
+  }, [filter, onChange]);
+  return /* @__PURE__ */ jsxs("div", { className: cx("grid grid-cols-3 gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        options: fieldOptions,
+        value: filter == null ? void 0 : filter.field,
+        showSearch: true,
+        optionFilterProp: "label",
+        onChange: handleFieldChange,
+        size
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "col-span-2 flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          options: operatorOptions,
+          value: filter == null ? void 0 : filter.operator,
+          onChange: handleOperatorChange,
+          onBlur: handleBlur,
+          size,
+          popupMatchSelectWidth: false
+        }
+      ),
+      valueInputConfig && /* @__PURE__ */ jsx(
+        ValueInput,
+        {
+          valueInputConfig,
+          values: filter == null ? void 0 : filter.values,
+          onChange: handleValuesChange,
+          onBlur: handleBlur,
+          size
+        }
+      )
+    ] })
+  ] });
+};
+const sameList = (a, b) => a.length === b.length && a.every((item, i) => item === b[i]);
+const wasCorrectedOnInit = (persisted, current) => persisted.operator !== current.operator || !sameList(persisted.values, current.values) || persisted.errors === void 0 || !sameList(persisted.errors, current.errors ?? []);
+const ValueInput = ({
+  valueInputConfig,
+  values,
+  onChange,
+  onBlur,
+  size
+}) => {
+  const handleChange = (value) => {
+    if (value === null) {
+      onChange([]);
+    } else {
+      onChange([value]);
+    }
+  };
+  const handleNumberChange = (value, index) => {
+    const newValues = [
+      ...values ?? []
+    ];
+    newValues[index] = value;
+    onChange(newValues);
+  };
+  switch (valueInputConfig.type) {
+    case "select":
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          options: valueInputConfig.valueOptions,
+          onChange,
+          showSearch: true,
+          allowClear: true,
+          mode: "multiple",
+          onBlur,
+          value: values,
+          className: "w-full truncate",
+          size,
+          optionFilterProp: "label"
+        }
+      );
+    case "number":
+      return /* @__PURE__ */ jsx("div", { className: "flex gap-2 grow", children: Array.from({ length: valueInputConfig.inputCount }).map(
+        (_, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          index !== 0 && /* @__PURE__ */ jsx("span", { className: "my-auto", children: "and" }),
+          /* @__PURE__ */ jsx(
+            InputNumber,
+            {
+              onChange: (value) => handleNumberChange(value, index),
+              onBlur,
+              value: values == null ? void 0 : values[index],
+              className: "basis-1/2",
+              size,
+              ...valueInputConfig.numberOptions ?? {}
+            }
+          )
+        ] }, `number-input-${index}`)
+      ) });
+    case "text":
+      if (valueInputConfig.multiValue) {
+        return /* @__PURE__ */ jsx(
+          MultiValueTextInput,
+          {
+            values,
+            maxValues: valueInputConfig.maxValues,
+            onChange,
+            onBlur,
+            size
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          onBlur,
+          value: (values == null ? void 0 : values[0]) ?? void 0,
+          onChange: (e) => handleChange(e.target.value),
+          className: "w-full",
+          size
+        }
+      );
+    default:
+      return null;
+  }
+};
+const MULTI_VALUE_TOKEN_SEPARATORS = [",", "\n", "\r", "	"];
+const MultiValueTextInput = ({
+  values,
+  maxValues,
+  onChange,
+  onBlur,
+  size
+}) => {
+  const chips = (values ?? []).flatMap(
+    (value) => value === null || value === void 0 ? [] : [String(value)]
+  );
+  const over = maxValues !== void 0 && chips.length > maxValues;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 w-full min-w-0", children: [
+    /* @__PURE__ */ jsx(
+      Select,
+      {
+        mode: "tags",
+        tokenSeparators: MULTI_VALUE_TOKEN_SEPARATORS,
+        value: chips,
+        onChange: (next) => onChange(normalizeMultiValues(next)),
+        onBlur,
+        open: false,
+        suffixIcon: null,
+        placeholder: "Type or paste values, separated by commas",
+        className: "w-full",
+        size,
+        status: over ? "error" : void 0,
+        "aria-label": "Values"
+      }
+    ),
+    maxValues !== void 0 && /* @__PURE__ */ jsx(
+      Typography.Text,
+      {
+        type: over ? "danger" : "secondary",
+        className: "text-xs",
+        role: over ? "alert" : void 0,
+        children: over ? `${tooManyValuesMessage(maxValues)} — remove ${chips.length - maxValues} to apply` : `${chips.length} / ${maxValues} values`
+      }
+    )
+  ] });
+};
+export {
+  FilterInput,
+  MULTI_VALUE_TOKEN_SEPARATORS
+};
+//# sourceMappingURL=FilterInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterInput.js","sources":["../../../../src/components/filterform/FilterInput.tsx"],"sourcesContent":["import * as React from 'react'\nimport { FilterConfig } from '.'\nimport { useFilterField, ValueInputConfig } from './useFilterField'\nimport { Input, InputNumber, Select, Typography } from 'antd'\nimport { FormFilter } from './types'\nimport { normalizeMultiValues, tooManyValuesMessage } from './filterHelpers'\nimport cx from 'classnames'\nimport { SizeType } from 'antd/es/config-provider/SizeContext'\n\ntype FilterInputProps = {\n  value?: FormFilter\n  filterConfigs: FilterConfig[]\n  onChange?: (value: FormFilter) => void\n  onBlur?: (value: FormFilter) => void\n  className?: string\n  size?: SizeType\n}\n\nexport const FilterInput = ({\n  value,\n  filterConfigs,\n  onChange,\n  onBlur,\n  className,\n  size = 'middle',\n}: FilterInputProps) => {\n  const {\n    filter,\n    operatorOptions,\n    valueInputConfig,\n    handleFieldChange,\n    handleOperatorChange,\n    handleValuesChange,\n  } = useFilterField({\n    filterConfigs,\n    filter: value,\n  })\n\n  const fieldOptions = filterConfigs.map((config) => ({\n    label: config.label,\n    value: config.field,\n    disabled: config.disabled,\n  }))\n\n  // Mirror of the reducer's filter for callbacks that run after a render.\n  const latestFilterRef = React.useRef(filter)\n  latestFilterRef.current = filter\n\n  // Deferred a tick, and read from the ref rather than the closure. A tags\n  // `Select` commits unseparated search text as a chip inside its own blur\n  // handling, so `onChange` and `onBlur` arrive in the same browser event and\n  // React flushes the resulting reducer update only after both return. A\n  // synchronous `onBlur` would hand the parent the filter from *before* that\n  // last chip — and for a new rule the parent finalizes and unmounts this\n  // input, silently dropping the value. After the flush the ref holds it.\n  const handleBlur = () => {\n    setTimeout(() => {\n      const latest = latestFilterRef.current\n      if (latest) onBlur?.(latest)\n    }, 0)\n  }\n\n  // Track if this is a user-driven change (not initialization)\n  const isInitialMount = React.useRef(true)\n  const prevFilterRef = React.useRef(filter)\n\n  React.useEffect(() => {\n    // Skip the initial mount to avoid calling onChange during initialization\n    // — unless initialization itself corrected the persisted filter (an\n    // operator the field no longer offers, or a chip list that needed\n    // normalizing). Then the parent must learn about it, or it would keep\n    // and submit the stale filter until the user happened to touch the rule.\n    if (isInitialMount.current) {\n      isInitialMount.current = false\n      prevFilterRef.current = filter\n      if (value && filter && wasCorrectedOnInit(value, filter)) {\n        onChange?.(filter)\n      }\n      return\n    }\n\n    // Only call onChange if the filter actually changed\n    if (filter && filter !== prevFilterRef.current) {\n      prevFilterRef.current = filter\n      onChange?.(filter)\n    }\n  }, [filter, onChange])\n\n  return (\n    <div className={cx('grid grid-cols-3 gap-2', className)}>\n      <Select\n        options={fieldOptions}\n        value={filter?.field}\n        showSearch\n        optionFilterProp=\"label\"\n        onChange={handleFieldChange}\n        size={size}\n      />\n      <div className=\"col-span-2 flex gap-2\">\n        <Select\n          options={operatorOptions}\n          value={filter?.operator}\n          onChange={handleOperatorChange}\n          onBlur={handleBlur}\n          size={size}\n          popupMatchSelectWidth={false}\n        />\n        {valueInputConfig && (\n          <ValueInput\n            valueInputConfig={valueInputConfig}\n            values={filter?.values}\n            onChange={handleValuesChange}\n            onBlur={handleBlur}\n            size={size}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n\nconst sameList = (a: readonly unknown[], b: readonly unknown[]) =>\n  a.length === b.length && a.every((item, i) => item === b[i])\n\n// Whether initializing from a persisted filter changed anything the parent\n// holds — operator, values, or the validation result. `errors` counts: a\n// persisted rule can be unchanged yet newly invalid (a lowered `maxValues`),\n// or arrive with no `errors` at all (a plain `FilterForm` from storage), and\n// the form's validity is computed from the errors it holds, not from ours.\nconst wasCorrectedOnInit = (persisted: FormFilter, current: FormFilter) =>\n  persisted.operator !== current.operator ||\n  !sameList(persisted.values, current.values) ||\n  persisted.errors === undefined ||\n  !sameList(persisted.errors, current.errors ?? [])\n\ntype ValueInputProps = {\n  valueInputConfig: ValueInputConfig\n  values?: (string | number | undefined | null)[]\n  onChange: (value: (string | number | undefined | null)[]) => void\n  onBlur: () => void\n  size: SizeType\n}\n\nconst ValueInput = ({\n  valueInputConfig,\n  values,\n  onChange,\n  onBlur,\n  size,\n}: ValueInputProps) => {\n  const handleChange = (value: string | number | null) => {\n    if (value === null) {\n      onChange([])\n    } else {\n      onChange([value])\n    }\n  }\n\n  const handleNumberChange = (value: string | number | null, index: number) => {\n    const newValues: (string | number | undefined | null)[] = [\n      ...(values ?? []),\n    ]\n    newValues[index] = value\n    onChange(newValues)\n  }\n\n  switch (valueInputConfig.type) {\n    case 'select':\n      return (\n        <Select\n          options={valueInputConfig.valueOptions}\n          onChange={onChange}\n          showSearch\n          allowClear\n          mode=\"multiple\"\n          onBlur={onBlur}\n          value={values}\n          className=\"w-full truncate\"\n          size={size}\n          optionFilterProp=\"label\"\n        />\n      )\n    case 'number':\n      return (\n        <div className=\"flex gap-2 grow\">\n          {Array.from({ length: valueInputConfig.inputCount }).map(\n            (_, index) => (\n              <React.Fragment key={`number-input-${index}`}>\n                {index !== 0 && <span className=\"my-auto\">and</span>}\n                <InputNumber\n                  onChange={(value) => handleNumberChange(value, index)}\n                  onBlur={onBlur}\n                  value={values?.[index]}\n                  className=\"basis-1/2\"\n                  size={size}\n                  {...(valueInputConfig.numberOptions ?? {})}\n                />\n              </React.Fragment>\n            )\n          )}\n        </div>\n      )\n    case 'text':\n      if (valueInputConfig.multiValue) {\n        return (\n          <MultiValueTextInput\n            values={values}\n            maxValues={valueInputConfig.maxValues}\n            onChange={onChange}\n            onBlur={onBlur}\n            size={size}\n          />\n        )\n      }\n      return (\n        <Input\n          onBlur={onBlur}\n          value={values?.[0] ?? undefined}\n          onChange={(e) => handleChange(e.target.value)}\n          className=\"w-full\"\n          size={size}\n        />\n      )\n    default:\n      return null\n  }\n}\n\n// Commas, newlines (both flavours) and tabs: a column pasted from Excel or a\n// comma-separated list from an email both land as one chip per value.\nexport const MULTI_VALUE_TOKEN_SEPARATORS = [',', '\\n', '\\r', '\\t']\n\n/**\n * Chips input for the multi-value text operators (`isAnyOf` / `isNoneOf`).\n *\n * A tags Select rather than a text box split at query time: every token is\n * visible and individually removable before Apply, so a pasted value that\n * itself contains a comma (street addresses do) can be seen and fixed\n * instead of being silently shredded. The dropdown is kept closed — there\n * are no options to pick from; Enter or a separator commits a chip.\n */\nconst MultiValueTextInput = ({\n  values,\n  maxValues,\n  onChange,\n  onBlur,\n  size,\n}: {\n  values?: (string | number | undefined | null)[]\n  maxValues?: number\n  onChange: (value: (string | number | undefined | null)[]) => void\n  onBlur: () => void\n  size: SizeType\n}) => {\n  // Rendered as stored: `useFilterField` normalizes values on the way into\n  // state, so what the chips show is exactly what validation counts and\n  // what `onSubmit` emits. (Numbers/nulls can't occur for a text filter;\n  // the map is only for the shared `values` type.)\n  const chips = (values ?? []).flatMap((value) =>\n    value === null || value === undefined ? [] : [String(value)]\n  )\n  const over = maxValues !== undefined && chips.length > maxValues\n\n  return (\n    <div className=\"flex flex-col gap-1 w-full min-w-0\">\n      <Select\n        mode=\"tags\"\n        tokenSeparators={MULTI_VALUE_TOKEN_SEPARATORS}\n        value={chips}\n        onChange={(next: string[]) => onChange(normalizeMultiValues(next))}\n        onBlur={onBlur}\n        open={false}\n        suffixIcon={null}\n        placeholder=\"Type or paste values, separated by commas\"\n        className=\"w-full\"\n        size={size}\n        status={over ? 'error' : undefined}\n        aria-label=\"Values\"\n      />\n      {maxValues !== undefined && (\n        <Typography.Text\n          type={over ? 'danger' : 'secondary'}\n          className=\"text-xs\"\n          role={over ? 'alert' : undefined}\n        >\n          {over\n            ? `${tooManyValuesMessage(maxValues)} — remove ${\n                chips.length - maxValues\n              } to apply`\n            : `${chips.length} / ${maxValues} values`}\n        </Typography.Text>\n      )}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,168 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("@phosphor-icons/react");
+const FiltersForm_module = require("./FiltersForm.module.css.cjs");
+const cx = require("classnames");
+const filterHelpers = require("./filterHelpers.cjs");
+const React = require("react");
+const FilterInput = require("./FilterInput.cjs");
+const useFiltersForm = require("./useFiltersForm.cjs");
+const FilterGroup = require("./FilterGroup.cjs");
+const Button = require("../button/Button.cjs");
+const FiltersForm = ({
+  title,
+  filterConfigs,
+  onSubmit,
+  initialValues,
+  maxFiltersPerField = 5
+}) => {
+  const { dispatch, filterGroups, isNewFilterInputOpen, isValid, isEmpty } = useFiltersForm.useFiltersForm({
+    initialValues
+  });
+  const handleSubmit = () => {
+    onSubmit({
+      filters: filterGroups.flatMap((group) => group.filters).filter((filter) => filterHelpers.isFilter(filter)).filter((filter) => !filterHelpers.isEmptyFilter(filter))
+    });
+  };
+  const availableFilterConfigs = React.useMemo(() => {
+    const filterFieldCounts = filterGroups.reduce(
+      (acc, filterGroup) => {
+        acc[filterGroup.field] = filterGroup.filters.length;
+        return acc;
+      },
+      {}
+    );
+    return filterConfigs.map((config) => ({
+      ...config,
+      disabled: (filterFieldCounts[config.field] || 0) >= maxFiltersPerField
+    }));
+  }, [
+    filterConfigs,
+    filterGroups.map((g) => `${g.field}-${g.filters.length}`).join(","),
+    maxFiltersPerField
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx(FiltersForm_module.default.j2FilterForm), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cx(
+          FiltersForm_module.default.filterFormFieldsContainer,
+          "flex flex-col gap-4",
+          "p-4 mb-6"
+        ),
+        children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: FiltersForm_module.default.filterFormTitle, children: title }),
+          filterGroups.map((filterGroup, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cx("flex gap-3", {
+                "items-center": filterGroup.filters.length === 1
+              }),
+              children: [
+                groupIndex > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cx(FiltersForm_module.default.filterFormConjunction, {
+                      "pt-4": filterGroup.filters.length > 1
+                    }),
+                    children: "and"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  FilterGroup.FilterGroup,
+                  {
+                    filterGroup,
+                    groupIndex,
+                    filterConfigs: availableFilterConfigs,
+                    className: "grow",
+                    onChange: (filter, filterIndex) => {
+                      dispatch({
+                        type: "changeFilter",
+                        payload: { groupIndex, filterIndex, filter }
+                      });
+                    },
+                    onDone: (filter, filterIndex) => {
+                      dispatch({
+                        type: "updateFilter",
+                        payload: { groupIndex, filterIndex, filter }
+                      });
+                    },
+                    onRemove: (filterIndex) => {
+                      dispatch({
+                        type: "removeFilter",
+                        payload: { groupIndex, filterIndex }
+                      });
+                    }
+                  }
+                )
+              ]
+            },
+            `filter-group-${filterGroup.field}-${filterGroup.filters.length}`
+          )),
+          isNewFilterInputOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex gap-3 items-center"), children: [
+            filterGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx(FiltersForm_module.default.filterFormConjunction), children: "and" }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex items-center justify-between", "grow"), children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                FilterInput.FilterInput,
+                {
+                  filterConfigs: availableFilterConfigs,
+                  className: "flex-1",
+                  onChange: (filter) => {
+                    dispatch({ type: "changeNewFilter", payload: filter });
+                  },
+                  onBlur: (filter) => {
+                    dispatch({ type: "addNewFilter", payload: filter });
+                  }
+                },
+                JSON.stringify(filterGroups)
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mr-3", children: filterGroups.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                Button.Button,
+                {
+                  type: "text",
+                  icon: /* @__PURE__ */ jsxRuntime.jsx(react.TrashIcon, {}),
+                  onClick: () => dispatch({ type: "removeNewFilter" })
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-8" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button.Button,
+              {
+                icon: /* @__PURE__ */ jsxRuntime.jsx(react.PlusCircleIcon, {}),
+                onClick: () => dispatch({ type: "openNewFilterInput" }),
+                disabled: !isValid,
+                children: "Add Rule"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Button.Button,
+              {
+                type: "text",
+                onClick: () => {
+                  dispatch({
+                    type: "clearAllFilters"
+                  });
+                },
+                children: "Clear All Rules"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button.Button,
+      {
+        onClick: handleSubmit,
+        type: "primary",
+        disabled: isEmpty ? false : !isValid,
+        children: "Apply Filters"
+      }
+    ) })
+  ] });
+};
+exports.FiltersForm = FiltersForm;
+//# sourceMappingURL=FiltersForm.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FiltersForm.cjs","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":["useFiltersForm","isFilter","isEmptyFilter","useMemo","s","jsxs","jsx","FilterGroup","FilterInput","Button","TrashIcon","PlusCircleIcon"],"mappings":";;;;;;;;;;;;AAmBO,MAAM,cAAc,CAAC;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,qBAAqB;AACvB,MAAa;AACX,QAAM,EAAE,UAAU,cAAc,sBAAsB,SAAS,QAAA,IAC7DA,8BAAe;AAAA,IACb;AAAA,EAAA,CACD;AAEH,QAAM,eAAe,MAAM;AACzB,aAAS;AAAA,MACP,SAAS,aACN,QAAQ,CAAC,UAAU,MAAM,OAAO,EAChC,OAAO,CAAC,WAAWC,cAAAA,SAAS,MAAM,CAAC,EACnC,OAAO,CAAC,WAAW,CAACC,cAAAA,cAAc,MAAM,CAAC;AAAA,IAAA,CAC7C;AAAA,EACH;AAEA,QAAM,yBAAyBC,MAAAA,QAAQ,MAAM;AAC3C,UAAM,oBAAoB,aAAa;AAAA,MACrC,CAAC,KAAK,gBAAgB;AACpB,YAAI,YAAY,KAAK,IAAI,YAAY,QAAQ;AAC7C,eAAO;AAAA,MACT;AAAA,MACA,CAAA;AAAA,IAAC;AAGH,WAAO,cAAc,IAAI,CAAC,YAAY;AAAA,MACpC,GAAG;AAAA,MACH,WAAW,kBAAkB,OAAO,KAAK,KAAK,MAAM;AAAA,IAAA,EACpD;AAAA,EACJ,GAAG;AAAA,IACD;AAAA,IACA,aAAa,IAAI,CAAC,MAAM,GAAG,EAAE,KAAK,IAAI,EAAE,QAAQ,MAAM,EAAE,EAAE,KAAK,GAAG;AAAA,IAClE;AAAA,EAAA,CACD;AAED,yCACG,OAAA,EAAI,WAAW,GAAGC,2BAAE,YAAY,GAC/B,UAAA;AAAA,IAAAC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACTD,mBAAAA,QAAE;AAAA,UACF;AAAA,UACA;AAAA,QAAA;AAAA,QAGD,UAAA;AAAA,UAAA,SAASE,2BAAAA,IAAC,QAAA,EAAK,WAAWF,mBAAAA,QAAE,iBAAkB,UAAA,OAAM;AAAA,UACpD,aAAa,IAAI,CAAC,aAAa,eAC9BC,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cAEC,WAAW,GAAG,cAAc;AAAA,gBAC1B,gBAAgB,YAAY,QAAQ,WAAW;AAAA,cAAA,CAChD;AAAA,cAEA,UAAA;AAAA,gBAAA,aAAa,IACZC,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAW,GAAGF,mBAAAA,QAAE,uBAAuB;AAAA,sBACrC,QAAQ,YAAY,QAAQ,SAAS;AAAA,oBAAA,CACtC;AAAA,oBACF,UAAA;AAAA,kBAAA;AAAA,gBAAA,IAGC;AAAA,gBACJE,2BAAAA;AAAAA,kBAACC,YAAAA;AAAAA,kBAAA;AAAA,oBACC;AAAA,oBACA;AAAA,oBACA,eAAe;AAAA,oBACf,WAAU;AAAA,oBACV,UAAU,CAAC,QAAQ,gBAAgB;AACjC,+BAAS;AAAA,wBACP,MAAM;AAAA,wBACN,SAAS,EAAE,YAAY,aAAa,OAAA;AAAA,sBAAO,CAC5C;AAAA,oBACH;AAAA,oBACA,QAAQ,CAAC,QAAQ,gBAAgB;AAC/B,+BAAS;AAAA,wBACP,MAAM;AAAA,wBACN,SAAS,EAAE,YAAY,aAAa,OAAA;AAAA,sBAAO,CAC5C;AAAA,oBACH;AAAA,oBACA,UAAU,CAAC,gBAAgB;AACzB,+BAAS;AAAA,wBACP,MAAM;AAAA,wBACN,SAAS,EAAE,YAAY,YAAA;AAAA,sBAAY,CACpC;AAAA,oBACH;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA;AAAA,YArCK,gBAAgB,YAAY,KAAK,IAAI,YAAY,QAAQ,MAAM;AAAA,UAAA,CAuCvE;AAAA,UACA,wBACCF,2BAAAA,KAAC,OAAA,EAAI,WAAW,GAAG,yBAAyB,GACzC,UAAA;AAAA,YAAA,aAAa,SAAS,IACrBC,2BAAAA,IAAC,QAAA,EAAK,WAAW,GAAGF,mBAAAA,QAAE,qBAAqB,GAAG,UAAA,MAAA,CAAG,IAC/C;AAAA,4CACH,OAAA,EAAI,WAAW,GAAG,qCAAqC,MAAM,GAC5D,UAAA;AAAA,cAAAE,2BAAAA;AAAAA,gBAACE,YAAAA;AAAAA,gBAAA;AAAA,kBAEC,eAAe;AAAA,kBACf,WAAU;AAAA,kBACV,UAAU,CAAC,WAAW;AACpB,6BAAS,EAAE,MAAM,mBAAmB,SAAS,QAAQ;AAAA,kBACvD;AAAA,kBACA,QAAQ,CAAC,WAAW;AAClB,6BAAS,EAAE,MAAM,gBAAgB,SAAS,QAAQ;AAAA,kBACpD;AAAA,gBAAA;AAAA,gBARK,KAAK,UAAU,YAAY;AAAA,cAAA;AAAA,6CAUjC,OAAA,EAAI,WAAU,QACZ,UAAA,aAAa,SAAS,IACrBF,2BAAAA;AAAAA,gBAACG,OAAAA;AAAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,qCAAOC,MAAAA,WAAA,EAAU;AAAA,kBACjB,SAAS,MAAM,SAAS,EAAE,MAAM,mBAAmB;AAAA,gBAAA;AAAA,cAAA,IAGrDJ,2BAAAA,IAAC,OAAA,EAAI,WAAU,OAAM,EAAA,CAEzB;AAAA,YAAA,EAAA,CACF;AAAA,UAAA,GACF;AAAA,UAEFD,2BAAAA,KAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,YAAAC,2BAAAA;AAAAA,cAACG,OAAAA;AAAAA,cAAA;AAAA,gBACC,qCAAOE,MAAAA,gBAAA,EAAe;AAAA,gBACtB,SAAS,MAAM,SAAS,EAAE,MAAM,sBAAsB;AAAA,gBACtD,UAAU,CAAC;AAAA,gBACZ,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAGDL,2BAAAA;AAAAA,cAACG,OAAAA;AAAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,MAAM;AACb,2BAAS;AAAA,oBACP,MAAM;AAAA,kBAAA,CACP;AAAA,gBACH;AAAA,gBACD,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEFH,2BAAAA,IAAC,OAAA,EAAI,WAAU,oBACb,UAAAA,2BAAAA;AAAAA,MAACG,OAAAA;AAAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,MAAK;AAAA,QACL,UAAU,UAAU,QAAQ,CAAC;AAAA,QAC9B,UAAA;AAAA,MAAA;AAAA,IAAA,EAED,CACF;AAAA,EAAA,GACF;AAEJ;;"}

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

@@ -0,0 +1,168 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { TrashIcon, PlusCircleIcon } from "@phosphor-icons/react";
+import s from "./FiltersForm.module.css.js";
+import cx from "classnames";
+import { isFilter, isEmptyFilter } from "./filterHelpers.js";
+import { useMemo } from "react";
+import { FilterInput } from "./FilterInput.js";
+import { useFiltersForm } from "./useFiltersForm.js";
+import { FilterGroup } from "./FilterGroup.js";
+import { Button } from "../button/Button.js";
+const FiltersForm = ({
+  title,
+  filterConfigs,
+  onSubmit,
+  initialValues,
+  maxFiltersPerField = 5
+}) => {
+  const { dispatch, filterGroups, isNewFilterInputOpen, isValid, isEmpty } = useFiltersForm({
+    initialValues
+  });
+  const handleSubmit = () => {
+    onSubmit({
+      filters: filterGroups.flatMap((group) => group.filters).filter((filter) => isFilter(filter)).filter((filter) => !isEmptyFilter(filter))
+    });
+  };
+  const availableFilterConfigs = useMemo(() => {
+    const filterFieldCounts = filterGroups.reduce(
+      (acc, filterGroup) => {
+        acc[filterGroup.field] = filterGroup.filters.length;
+        return acc;
+      },
+      {}
+    );
+    return filterConfigs.map((config) => ({
+      ...config,
+      disabled: (filterFieldCounts[config.field] || 0) >= maxFiltersPerField
+    }));
+  }, [
+    filterConfigs,
+    filterGroups.map((g) => `${g.field}-${g.filters.length}`).join(","),
+    maxFiltersPerField
+  ]);
+  return /* @__PURE__ */ jsxs("div", { className: cx(s.j2FilterForm), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(
+          s.filterFormFieldsContainer,
+          "flex flex-col gap-4",
+          "p-4 mb-6"
+        ),
+        children: [
+          title && /* @__PURE__ */ jsx("span", { className: s.filterFormTitle, children: title }),
+          filterGroups.map((filterGroup, groupIndex) => /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cx("flex gap-3", {
+                "items-center": filterGroup.filters.length === 1
+              }),
+              children: [
+                groupIndex > 0 ? /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cx(s.filterFormConjunction, {
+                      "pt-4": filterGroup.filters.length > 1
+                    }),
+                    children: "and"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  FilterGroup,
+                  {
+                    filterGroup,
+                    groupIndex,
+                    filterConfigs: availableFilterConfigs,
+                    className: "grow",
+                    onChange: (filter, filterIndex) => {
+                      dispatch({
+                        type: "changeFilter",
+                        payload: { groupIndex, filterIndex, filter }
+                      });
+                    },
+                    onDone: (filter, filterIndex) => {
+                      dispatch({
+                        type: "updateFilter",
+                        payload: { groupIndex, filterIndex, filter }
+                      });
+                    },
+                    onRemove: (filterIndex) => {
+                      dispatch({
+                        type: "removeFilter",
+                        payload: { groupIndex, filterIndex }
+                      });
+                    }
+                  }
+                )
+              ]
+            },
+            `filter-group-${filterGroup.field}-${filterGroup.filters.length}`
+          )),
+          isNewFilterInputOpen && /* @__PURE__ */ jsxs("div", { className: cx("flex gap-3 items-center"), children: [
+            filterGroups.length > 0 ? /* @__PURE__ */ jsx("span", { className: cx(s.filterFormConjunction), children: "and" }) : null,
+            /* @__PURE__ */ jsxs("div", { className: cx("flex items-center justify-between", "grow"), children: [
+              /* @__PURE__ */ jsx(
+                FilterInput,
+                {
+                  filterConfigs: availableFilterConfigs,
+                  className: "flex-1",
+                  onChange: (filter) => {
+                    dispatch({ type: "changeNewFilter", payload: filter });
+                  },
+                  onBlur: (filter) => {
+                    dispatch({ type: "addNewFilter", payload: filter });
+                  }
+                },
+                JSON.stringify(filterGroups)
+              ),
+              /* @__PURE__ */ jsx("div", { className: "mr-3", children: filterGroups.length > 0 ? /* @__PURE__ */ jsx(
+                Button,
+                {
+                  type: "text",
+                  icon: /* @__PURE__ */ jsx(TrashIcon, {}),
+                  onClick: () => dispatch({ type: "removeNewFilter" })
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "w-8" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: /* @__PURE__ */ jsx(PlusCircleIcon, {}),
+                onClick: () => dispatch({ type: "openNewFilterInput" }),
+                disabled: !isValid,
+                children: "Add Rule"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "text",
+                onClick: () => {
+                  dispatch({
+                    type: "clearAllFilters"
+                  });
+                },
+                children: "Clear All Rules"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: handleSubmit,
+        type: "primary",
+        disabled: isEmpty ? false : !isValid,
+        children: "Apply Filters"
+      }
+    ) })
+  ] });
+};
+export {
+  FiltersForm
+};
+//# sourceMappingURL=FiltersForm.js.map