@j2-health/design-system 0.2.0 → 0.3.0

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

@@ -0,0 +1,228 @@
+import * as React from "react";
+import { isMultiValueTextOperator, normalizeMultiValues, validateFormFilter } from "./filterHelpers.js";
+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: 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: 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: 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)) : isMultiValueTextOperator(state.filter.operator) ? (
+        // Normalized on the way into state, not just for display —
+        // validation counts and `onSubmit` emit exactly these chips.
+        normalizeMultiValues(action.payload)
+      ) : action.payload.filter(
+        (value) => value !== null && value !== void 0
+      );
+      const pendingFilter = {
+        ...state.filter,
+        values
+      };
+      pendingFilter.errors = 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 (isMultiValueTextOperator(operator)) {
+        filter = {
+          ...state.filter,
+          values: normalizeMultiValues(state.filter.values)
+        };
+      } else {
+        filter = { ...state.filter };
+      }
+      filter.errors = 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.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
+  };
+};
+export {
+  MultiValueTextOperatorOptions,
+  TypeToOperatorOptions,
+  isMultiValueTextOperator,
+  operatorOptionsFor,
+  useFilterField
+};
+//# sourceMappingURL=useFilterField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFilterField.js","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":["config"],"mappings":";;AA8BO,MAAM,wBAGT;AAAA,EACF,QAAQ;AAAA,IACN,EAAE,OAAO,aAAa,OAAO,SAAA;AAAA,IAC7B,EAAE,OAAO,iBAAiB,OAAO,WAAA;AAAA,IACjC,EAAE,OAAO,gBAAgB,OAAO,QAAA;AAAA,IAChC,EAAE,OAAO,iBAAiB,OAAO,WAAA;AAAA,EAAW;AAAA,EAE9C,QAAQ;AAAA,IACN,EAAE,OAAO,MAAM,OAAO,SAAA;AAAA,IACtB,EAAE,OAAO,UAAU,OAAO,WAAA;AAAA,IAC1B,EAAE,OAAO,mBAAmB,OAAO,cAAA;AAAA,IACnC,EAAE,OAAO,+BAA+B,OAAO,qBAAA;AAAA,IAC/C,EAAE,OAAO,gBAAgB,OAAO,WAAA;AAAA,IAChC,EAAE,OAAO,4BAA4B,OAAO,kBAAA;AAAA,IAC5C,EAAE,OAAO,gBAAgB,OAAO,QAAA;AAAA,IAChC,EAAE,OAAO,iBAAiB,OAAO,WAAA;AAAA,IACjC,EAAE,OAAO,cAAc,OAAO,UAAA;AAAA,EAAU;AAAA,EAE1C,MAAM;AAAA,IACJ,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,IAC5B,EAAE,OAAO,oBAAoB,OAAO,cAAA;AAAA,IACpC,EAAE,OAAO,eAAe,OAAO,aAAA;AAAA,IAC/B,EAAE,OAAO,aAAa,OAAO,WAAA;AAAA,IAC7B,EAAE,OAAO,gBAAgB,OAAO,QAAA;AAAA,IAChC,EAAE,OAAO,iBAAiB,OAAO,WAAA;AAAA,EAAW;AAEhD;AAMO,MAAM,gCAGP;AAAA,EACJ,EAAE,OAAO,aAAa,OAAO,UAAA;AAAA,EAC7B,EAAE,OAAO,iBAAiB,OAAO,WAAA;AACnC;AAQO,MAAM,qBAAqB,CAChC,WACyC;AACzC,QAAM,WAAW,sBAAsB,OAAO,IAAI;AAClD,MAAI,CAAC,OAAO,UAAW,QAAO;AAC9B,QAAM,QACJ,OAAO,SAAS,SACZ,CAAC,GAAG,UAAU,GAAG,6BAA6B,IAC9C;AACN,SAAO,OAAO,UAAU,QAAQ,CAAC,aAAa;AAC5C,UAAM,SAAS,MAAM,KAAK,CAAC,cAAc,UAAU,UAAU,QAAQ;AACrE,WAAO,SAAS,CAAC,MAAM,IAAI,CAAA;AAAA,EAC7B,CAAC;AACH;AAyCA,MAAM,wBAAwB,CAC5B,QACA,aACiC;AACjC,MAAI,OAAO,SAAS,UAAU;AAC5B,QAAI,aAAa,WAAW,aAAa,WAAY;AAErD,WAAO;AAAA,MACL,MAAM;AAAA,MACN,cAAe,OAAO,WAAiC,CAAA;AAAA,IAAC;AAAA,EAE5D;AAEA,MAAI,OAAO,SAAS,UAAU;AAC5B,QAAI,aAAa,WAAW,aAAa,WAAY;AAErD,WAAO;AAAA,MACL,MAAM;AAAA,MACN,YAAY,aAAa,YAAY,IAAI;AAAA,MACzC,eAAe,OAAO;AAAA,IAAA;AAAA,EAE1B;AAEA,MAAI,OAAO,SAAS,QAAQ;AAC1B,QAAI,aAAa,WAAW,aAAa,WAAY;AAErD,WAAO;AAAA,MACL,MAAM;AAAA,MACN,YAAY,yBAAyB,QAAQ;AAAA,MAC7C,WAAW,OAAO;AAAA,IAAA;AAAA,EAEtB;AACF;AAEA,MAAM,qBAAqB,CACzB,OACA,WACG;;AACH,UAAQ,OAAO,MAAA;AAAA,IACb,KAAK,YAAY;AACf,YAAM,SAAS,MAAM,cAAc;AAAA,QACjC,CAACA,YAAWA,QAAO,UAAU,OAAO;AAAA,MAAA;AAGtC,UAAI,CAAC,OAAQ,QAAO;AAEpB,YAAM,kBAAkB,mBAAmB,MAAM;AAEjD,YAAM,YAAY;AAAA,QAChB,GAAG,MAAM;AAAA,QACT,MAAM,OAAO;AAAA,QACb,OAAO,OAAO;AAAA,QACd,WAAU,qBAAgB,CAAC,MAAjB,mBAAoB;AAAA,QAC9B,QAAQ,CAAA;AAAA,MAAC;AAGX,YAAM,gBAAgB;AAAA,QACpB,GAAG;AAAA,QACH,QAAQ,mBAAmB,WAAW,MAAM;AAAA,MAAA;AAG9C,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA,kBACE,gBAAgB,SAAS,IACrB,sBAAsB,QAAQ,gBAAgB,CAAC,EAAE,KAAK,IACtD;AAAA,MAAA;AAAA,IAEV;AAAA,IACA,KAAK,eAAe;AAClB,UAAI,CAAC,MAAM,OAAQ,QAAO;AAC1B,UAAI,CAAC,OAAO,QAAS,QAAO;AAE5B,YAAM,gBAAgB;AAAA,QACpB,GAAG,MAAM;AAAA,QACT,UAAU,OAAO;AAAA,QACjB,QAAQ,CAAA;AAAA,MAAC;AAGX,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ;AAAA,UACN,GAAG;AAAA,UACH,QAAQ,mBAAmB,eAAe,MAAM,MAAM;AAAA,QAAA;AAAA,QAExD,kBAAkB,sBAAsB,MAAM,QAAQ,OAAO,OAAO;AAAA,MAAA;AAAA,IAExE;AAAA,IACA,KAAK,aAAa;AAChB,UAAI,CAAC,MAAM,OAAQ,QAAO;AAE1B,YAAM,SACJ,MAAM,OAAO,SAAS,WAClB,OAAO,QAAQ,IAAI,CAAC,UAAU,OAAO,KAAK,CAAC,IAC3C,yBAAyB,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,QAG5C,qBAAqB,OAAO,OAAO;AAAA,UAClC,OAAO,QAAQ;AAAA,QACd,CAAC,UAAU,UAAU,QAAQ,UAAU;AAAA,MAAA;AAGjD,YAAM,gBAAgB;AAAA,QACpB,GAAG,MAAM;AAAA,QACT;AAAA,MAAA;AAGF,oBAAc,SAAS,mBAAmB,eAAe,MAAM,MAAM;AAErE,aAAO;AAAA,QACL,GAAG;AAAA,QACH,QAAQ;AAAA,MAAA;AAAA,IAEZ;AAAA,IACA,KAAK,cAAc;AACjB,YAAM,UACJ,WAAM,WAAN,mBAAc,YACd,WAAM,cAAc,KAAK,CAACA,YAAW,CAACA,QAAO,QAAQ,MAArD,mBAAwD;AAC1D,YAAM,SAAS,MAAM,cAAc;AAAA,QACjC,CAACA,YAAWA,QAAO,UAAU;AAAA,MAAA;AAG/B,UAAI,CAAC,OAAQ,QAAO;AAEpB,YAAM,kBAAkB,mBAAmB,MAAM;AAQjD,YAAM,aAAY,WAAM,WAAN,mBAAc;AAChC,YAAM,mBACJ,cAAc,UACd,gBAAgB,KAAK,CAAC,WAAW,OAAO,UAAU,SAAS;AAC7D,YAAM,WAAW,mBAAmB,aAAY,qBAAgB,CAAC,MAAjB,mBAAoB;AAEpE,UAAI;AACJ,UAAI,CAAC,MAAM,QAAQ;AACjB,iBAAS;AAAA,UACP;AAAA,UACA,MAAM,OAAO;AAAA,UACb;AAAA,UACA,QAAQ,CAAA;AAAA,QAAC;AAAA,MAEb,WAAW,CAAC,kBAAkB;AAC5B,iBAAS,EAAE,GAAG,MAAM,QAAQ,UAAU,QAAQ,GAAC;AAAA,MACjD,WAAW,yBAAyB,QAAQ,GAAG;AAG7C,iBAAS;AAAA,UACP,GAAG,MAAM;AAAA,UACT,QAAQ,qBAAqB,MAAM,OAAO,MAAM;AAAA,QAAA;AAAA,MAEpD,OAAO;AAIL,iBAAS,EAAE,GAAG,MAAM,OAAA;AAAA,MACtB;AAEA,aAAO,SAAS,mBAAmB,QAAQ,MAAM;AAEjD,aAAO;AAAA,QACL,GAAG;AAAA,QACH;AAAA,QACA;AAAA,QACA;AAAA,QACA,kBACE,gBAAgB,SAAS,IACrB,sBAAsB,QAAQ,QAAQ,IACtC;AAAA,MAAA;AAAA,IAEV;AAAA,IACA;AACE,aAAO;AAAA,EAAA;AAEb;AAEO,MAAM,iBAAiB,CAAC;AAAA,EAC7B;AAAA,EACA,QAAQ;AACV,MAAmD;AACjD,QAAM,CAAC,EAAE,QAAQ,QAAQ,iBAAiB,oBAAoB,QAAQ,IACpE,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,MACE,QAAQ;AAAA,MACR;AAAA,MACA,QAAQ;AAAA,MACR,iBAAiB,CAAA;AAAA,MACjB,kBAAkB;AAAA,IAAA;AAAA,IAEpB,CAAC,UAAU;AACT,aAAO,mBAAmB,OAAO;AAAA,QAC/B,MAAM;AAAA,QACN,SAAS;AAAA,MAAA,CACV;AAAA,IACH;AAAA,EAAA;AAGJ,QAAM,oBAAoB,CAAC,UAAkB;AAC3C,aAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IAAA,CACV;AAAA,EACH;AAEA,QAAM,uBAAuB,CAAC,UAAkB;AAC9C,aAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IAAA,CACV;AAAA,EACH;AAEA,QAAM,qBAAqB,CACzB,UACG;AACH,aAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IAAA,CACV;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

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

@@ -0,0 +1,160 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const cloneDeep = require("lodash/cloneDeep.js");
+const filterHelpers = require("./filterHelpers.cjs");
+const copyFilterGroups = (filterGroups) => {
+  return cloneDeep(filterGroups);
+};
+const addFilter = (filter, filterGroups) => {
+  const copy = copyFilterGroups(filterGroups);
+  const filterGroupIndex = copy.findIndex(
+    (filterGroup) => filterGroup.field === filter.field
+  );
+  if (filterGroupIndex === -1) {
+    copy.push({ field: filter.field, filters: [filter] });
+  } else {
+    copy[filterGroupIndex].filters.push(filter);
+  }
+  return copy;
+};
+const removeFilter = (groupIndex, filterIndex, filterGroups) => {
+  const copy = copyFilterGroups(filterGroups);
+  copy[groupIndex].filters.splice(filterIndex, 1);
+  return copy.filter((group) => group.filters.length > 0);
+};
+const filterFormReducer = (state, action) => {
+  var _a;
+  switch (action.type) {
+    case "initialize": {
+      const filterGroups = (_a = action.payload) == null ? void 0 : _a.filters.reduce(
+        (acc, filter) => {
+          return addFilter(filter, acc);
+        },
+        [...state.filterGroups]
+      );
+      return {
+        ...state,
+        filterGroups: filterGroups ?? [],
+        isNewFilterInputOpen: !(filterGroups == null ? void 0 : filterGroups.length)
+      };
+    }
+    case "openNewFilterInput": {
+      return {
+        ...state,
+        isNewFilterInputOpen: true
+      };
+    }
+    case "addNewFilter": {
+      if (action.payload.errors && action.payload.errors.length > 0) {
+        return state;
+      }
+      const filterGroups = addFilter(action.payload, state.filterGroups);
+      return {
+        ...state,
+        filterGroups,
+        newFilter: void 0,
+        isNewFilterInputOpen: false
+      };
+    }
+    case "changeNewFilter": {
+      return {
+        ...state,
+        newFilter: action.payload
+      };
+    }
+    case "removeNewFilter": {
+      const allFiltersRemoved = state.filterGroups.every(
+        (group) => group.filters.length === 0
+      );
+      return {
+        ...state,
+        newFilter: void 0,
+        isNewFilterInputOpen: allFiltersRemoved
+      };
+    }
+    case "updateFilter": {
+      const { groupIndex, filterIndex, filter } = action.payload;
+      let filterGroups = copyFilterGroups(state.filterGroups);
+      const groupField = filterGroups[groupIndex].field;
+      if (groupField === filter.field) {
+        filterGroups[groupIndex].filters[filterIndex] = filter;
+      } else {
+        filterGroups = removeFilter(groupIndex, filterIndex, filterGroups);
+        filterGroups = addFilter(filter, filterGroups);
+      }
+      return {
+        ...state,
+        filterGroups
+      };
+    }
+    case "changeFilter": {
+      const { groupIndex, filterIndex, filter } = action.payload;
+      const filterGroups = copyFilterGroups(state.filterGroups);
+      const group = filterGroups[groupIndex];
+      if (group) {
+        group.filters[filterIndex] = filter;
+      }
+      return {
+        ...state,
+        filterGroups
+      };
+    }
+    case "removeFilter": {
+      const { groupIndex, filterIndex } = action.payload;
+      const filterGroups = removeFilter(
+        groupIndex,
+        filterIndex,
+        state.filterGroups
+      );
+      return {
+        ...state,
+        filterGroups,
+        isNewFilterInputOpen: state.isNewFilterInputOpen || filterGroups.length === 0
+      };
+    }
+    case "clearAllFilters": {
+      return {
+        ...state,
+        filterGroups: [],
+        isNewFilterInputOpen: true
+      };
+    }
+    default:
+      return state;
+  }
+};
+const useFiltersForm = ({
+  initialValues
+}) => {
+  const [{ filterGroups, newFilter, isNewFilterInputOpen }, dispatch] = React.useReducer(
+    filterFormReducer,
+    {
+      filterGroups: [],
+      newFilter: void 0,
+      isNewFilterInputOpen: true
+    },
+    (state) => {
+      return filterFormReducer(state, {
+        type: "initialize",
+        payload: initialValues
+      });
+    }
+  );
+  const isValid = (filterGroups.length === 0 || filterGroups.every(
+    (group) => group.filters.every(
+      (filter) => filter.errors && filter.errors.length === 0
+    )
+  )) && ((newFilter == null ? void 0 : newFilter.errors) ? newFilter.errors.length === 0 : true);
+  const isEmpty = filterGroups.length === 0 && (newFilter ? filterHelpers.isEmptyFormFilter(newFilter) : true);
+  return {
+    dispatch,
+    filterGroups,
+    newFilter,
+    isNewFilterInputOpen,
+    isValid,
+    isEmpty
+  };
+};
+exports.useFiltersForm = useFiltersForm;
+//# sourceMappingURL=useFiltersForm.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFiltersForm.cjs","sources":["../../../../src/components/filterform/useFiltersForm.ts"],"sourcesContent":["import { useReducer } from 'react'\nimport { FilterForm, FilterGroup, FormFilter } from './types'\n// Deep import, not `import { cloneDeep } from 'lodash'`: lodash is CommonJS\n// and Node cannot statically detect its named exports, so the bundled\n// package throws \"Named export 'cloneDeep' not found\" when a consumer\n// loads it through native Node ESM (SSR, or vitest without a bundler).\nimport cloneDeep from 'lodash/cloneDeep.js'\nimport { isEmptyFormFilter } from './filterHelpers'\n\ntype UseFiltersFormInput = {\n  initialValues?: FilterForm\n}\n\ntype UseFiltersFormOutput = {\n  dispatch: (action: Action) => void\n  filterGroups: FilterGroup[]\n  newFilter: FormFilter | undefined\n  isNewFilterInputOpen: boolean\n  isValid: boolean\n  isEmpty: boolean\n}\n\ntype FilterFormState = {\n  filterGroups: FilterGroup[]\n  newFilter: FormFilter | undefined\n  isNewFilterInputOpen: boolean\n}\n\ntype InitializeAction = {\n  type: 'initialize'\n  payload: FilterForm | undefined\n}\n\ntype OpenNewFilterInputAction = {\n  type: 'openNewFilterInput'\n}\n\ntype AddNewFilterAction = {\n  type: 'addNewFilter'\n  payload: FormFilter\n}\n\ntype ChangeNewFilterAction = {\n  type: 'changeNewFilter'\n  payload: FormFilter\n}\n\ntype RemoveNewFilterAction = {\n  type: 'removeNewFilter'\n}\n\ntype ClearAllFiltersAction = {\n  type: 'clearAllFilters'\n}\n\ntype UpdateFilterAction = {\n  type: 'updateFilter'\n  payload: {\n    groupIndex: number\n    filterIndex: number\n    filter: FormFilter\n  }\n}\n\ntype ChangeFilterAction = {\n  type: 'changeFilter'\n  payload: {\n    groupIndex: number\n    filterIndex: number\n    filter: FormFilter\n  }\n}\n\ntype RemoveFilterAction = {\n  type: 'removeFilter'\n  payload: {\n    groupIndex: number\n    filterIndex: number\n  }\n}\n\ntype Action =\n  | AddNewFilterAction\n  | UpdateFilterAction\n  | ClearAllFiltersAction\n  | ChangeNewFilterAction\n  | OpenNewFilterInputAction\n  | ChangeFilterAction\n  | RemoveFilterAction\n  | InitializeAction\n  | RemoveNewFilterAction\n\nconst copyFilterGroups = (filterGroups: FilterGroup[]): FilterGroup[] => {\n  return cloneDeep(filterGroups)\n}\n\nconst addFilter = (\n  filter: FormFilter,\n  filterGroups: FilterGroup[]\n): FilterGroup[] => {\n  const copy = copyFilterGroups(filterGroups)\n  const filterGroupIndex = copy.findIndex(\n    (filterGroup) => filterGroup.field === filter.field\n  )\n\n  if (filterGroupIndex === -1) {\n    copy.push({ field: filter.field, filters: [filter] })\n  } else {\n    copy[filterGroupIndex].filters.push(filter)\n  }\n\n  return copy\n}\n\nconst removeFilter = (\n  groupIndex: number,\n  filterIndex: number,\n  filterGroups: FilterGroup[]\n): FilterGroup[] => {\n  const copy = copyFilterGroups(filterGroups)\n  copy[groupIndex].filters.splice(filterIndex, 1)\n\n  return copy.filter((group) => group.filters.length > 0)\n}\n\nconst filterFormReducer = (state: FilterFormState, action: Action) => {\n  switch (action.type) {\n    case 'initialize': {\n      const filterGroups = action.payload?.filters.reduce(\n        (acc, filter) => {\n          return addFilter(filter, acc)\n        },\n        [...state.filterGroups]\n      )\n\n      return {\n        ...state,\n        filterGroups: filterGroups ?? [],\n        isNewFilterInputOpen: !filterGroups?.length,\n      }\n    }\n    case 'openNewFilterInput': {\n      return {\n        ...state,\n        isNewFilterInputOpen: true,\n      }\n    }\n    case 'addNewFilter': {\n      if (action.payload.errors && action.payload.errors.length > 0) {\n        return state\n      }\n\n      const filterGroups = addFilter(action.payload, state.filterGroups)\n\n      return {\n        ...state,\n        filterGroups,\n        newFilter: undefined,\n        isNewFilterInputOpen: false,\n      }\n    }\n    case 'changeNewFilter': {\n      return {\n        ...state,\n        newFilter: action.payload,\n      }\n    }\n    case 'removeNewFilter': {\n      const allFiltersRemoved = state.filterGroups.every(\n        (group) => group.filters.length === 0\n      )\n      return {\n        ...state,\n        newFilter: undefined,\n        isNewFilterInputOpen: allFiltersRemoved,\n      }\n    }\n    case 'updateFilter': {\n      const { groupIndex, filterIndex, filter } = action.payload\n      let filterGroups = copyFilterGroups(state.filterGroups)\n      const groupField = filterGroups[groupIndex].field\n\n      if (groupField === filter.field) {\n        filterGroups[groupIndex].filters[filterIndex] = filter\n      } else {\n        filterGroups = removeFilter(groupIndex, filterIndex, filterGroups)\n        filterGroups = addFilter(filter, filterGroups)\n      }\n\n      return {\n        ...state,\n        filterGroups,\n      }\n    }\n    case 'changeFilter': {\n      const { groupIndex, filterIndex, filter } = action.payload\n      const filterGroups = copyFilterGroups(state.filterGroups)\n      const group = filterGroups[groupIndex]\n      if (group) {\n        group.filters[filterIndex] = filter\n      }\n\n      return {\n        ...state,\n        filterGroups,\n      }\n    }\n    case 'removeFilter': {\n      const { groupIndex, filterIndex } = action.payload\n\n      const filterGroups = removeFilter(\n        groupIndex,\n        filterIndex,\n        state.filterGroups\n      )\n\n      return {\n        ...state,\n        filterGroups,\n        isNewFilterInputOpen:\n          state.isNewFilterInputOpen || filterGroups.length === 0,\n      }\n    }\n    case 'clearAllFilters': {\n      return {\n        ...state,\n        filterGroups: [],\n        isNewFilterInputOpen: true,\n      }\n    }\n    default:\n      return state\n  }\n}\n\nexport const useFiltersForm = ({\n  initialValues,\n}: UseFiltersFormInput): UseFiltersFormOutput => {\n  const [{ filterGroups, newFilter, isNewFilterInputOpen }, dispatch] =\n    useReducer(\n      filterFormReducer,\n      {\n        filterGroups: [],\n        newFilter: undefined,\n        isNewFilterInputOpen: true,\n      },\n      (state) => {\n        return filterFormReducer(state, {\n          type: 'initialize',\n          payload: initialValues,\n        })\n      }\n    )\n\n  const isValid =\n    (filterGroups.length === 0 ||\n      filterGroups.every((group) =>\n        group.filters.every(\n          (filter) => filter.errors && filter.errors.length === 0\n        )\n      )) &&\n    (newFilter?.errors ? newFilter.errors.length === 0 : true)\n\n  const isEmpty =\n    filterGroups.length === 0 &&\n    (newFilter ? isEmptyFormFilter(newFilter) : true)\n\n  return {\n    dispatch,\n    filterGroups,\n    newFilter,\n    isNewFilterInputOpen,\n    isValid,\n    isEmpty,\n  }\n}\n"],"names":["useReducer","isEmptyFormFilter"],"mappings":"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"}

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

@@ -0,0 +1,160 @@
+import { useReducer } from "react";
+import cloneDeep from "lodash/cloneDeep.js";
+import { isEmptyFormFilter } from "./filterHelpers.js";
+const copyFilterGroups = (filterGroups) => {
+  return cloneDeep(filterGroups);
+};
+const addFilter = (filter, filterGroups) => {
+  const copy = copyFilterGroups(filterGroups);
+  const filterGroupIndex = copy.findIndex(
+    (filterGroup) => filterGroup.field === filter.field
+  );
+  if (filterGroupIndex === -1) {
+    copy.push({ field: filter.field, filters: [filter] });
+  } else {
+    copy[filterGroupIndex].filters.push(filter);
+  }
+  return copy;
+};
+const removeFilter = (groupIndex, filterIndex, filterGroups) => {
+  const copy = copyFilterGroups(filterGroups);
+  copy[groupIndex].filters.splice(filterIndex, 1);
+  return copy.filter((group) => group.filters.length > 0);
+};
+const filterFormReducer = (state, action) => {
+  var _a;
+  switch (action.type) {
+    case "initialize": {
+      const filterGroups = (_a = action.payload) == null ? void 0 : _a.filters.reduce(
+        (acc, filter) => {
+          return addFilter(filter, acc);
+        },
+        [...state.filterGroups]
+      );
+      return {
+        ...state,
+        filterGroups: filterGroups ?? [],
+        isNewFilterInputOpen: !(filterGroups == null ? void 0 : filterGroups.length)
+      };
+    }
+    case "openNewFilterInput": {
+      return {
+        ...state,
+        isNewFilterInputOpen: true
+      };
+    }
+    case "addNewFilter": {
+      if (action.payload.errors && action.payload.errors.length > 0) {
+        return state;
+      }
+      const filterGroups = addFilter(action.payload, state.filterGroups);
+      return {
+        ...state,
+        filterGroups,
+        newFilter: void 0,
+        isNewFilterInputOpen: false
+      };
+    }
+    case "changeNewFilter": {
+      return {
+        ...state,
+        newFilter: action.payload
+      };
+    }
+    case "removeNewFilter": {
+      const allFiltersRemoved = state.filterGroups.every(
+        (group) => group.filters.length === 0
+      );
+      return {
+        ...state,
+        newFilter: void 0,
+        isNewFilterInputOpen: allFiltersRemoved
+      };
+    }
+    case "updateFilter": {
+      const { groupIndex, filterIndex, filter } = action.payload;
+      let filterGroups = copyFilterGroups(state.filterGroups);
+      const groupField = filterGroups[groupIndex].field;
+      if (groupField === filter.field) {
+        filterGroups[groupIndex].filters[filterIndex] = filter;
+      } else {
+        filterGroups = removeFilter(groupIndex, filterIndex, filterGroups);
+        filterGroups = addFilter(filter, filterGroups);
+      }
+      return {
+        ...state,
+        filterGroups
+      };
+    }
+    case "changeFilter": {
+      const { groupIndex, filterIndex, filter } = action.payload;
+      const filterGroups = copyFilterGroups(state.filterGroups);
+      const group = filterGroups[groupIndex];
+      if (group) {
+        group.filters[filterIndex] = filter;
+      }
+      return {
+        ...state,
+        filterGroups
+      };
+    }
+    case "removeFilter": {
+      const { groupIndex, filterIndex } = action.payload;
+      const filterGroups = removeFilter(
+        groupIndex,
+        filterIndex,
+        state.filterGroups
+      );
+      return {
+        ...state,
+        filterGroups,
+        isNewFilterInputOpen: state.isNewFilterInputOpen || filterGroups.length === 0
+      };
+    }
+    case "clearAllFilters": {
+      return {
+        ...state,
+        filterGroups: [],
+        isNewFilterInputOpen: true
+      };
+    }
+    default:
+      return state;
+  }
+};
+const useFiltersForm = ({
+  initialValues
+}) => {
+  const [{ filterGroups, newFilter, isNewFilterInputOpen }, dispatch] = useReducer(
+    filterFormReducer,
+    {
+      filterGroups: [],
+      newFilter: void 0,
+      isNewFilterInputOpen: true
+    },
+    (state) => {
+      return filterFormReducer(state, {
+        type: "initialize",
+        payload: initialValues
+      });
+    }
+  );
+  const isValid = (filterGroups.length === 0 || filterGroups.every(
+    (group) => group.filters.every(
+      (filter) => filter.errors && filter.errors.length === 0
+    )
+  )) && ((newFilter == null ? void 0 : newFilter.errors) ? newFilter.errors.length === 0 : true);
+  const isEmpty = filterGroups.length === 0 && (newFilter ? isEmptyFormFilter(newFilter) : true);
+  return {
+    dispatch,
+    filterGroups,
+    newFilter,
+    isNewFilterInputOpen,
+    isValid,
+    isEmpty
+  };
+};
+export {
+  useFiltersForm
+};
+//# sourceMappingURL=useFiltersForm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFiltersForm.js","sources":["../../../../src/components/filterform/useFiltersForm.ts"],"sourcesContent":["import { useReducer } from 'react'\nimport { FilterForm, FilterGroup, FormFilter } from './types'\n// Deep import, not `import { cloneDeep } from 'lodash'`: lodash is CommonJS\n// and Node cannot statically detect its named exports, so the bundled\n// package throws \"Named export 'cloneDeep' not found\" when a consumer\n// loads it through native Node ESM (SSR, or vitest without a bundler).\nimport cloneDeep from 'lodash/cloneDeep.js'\nimport { isEmptyFormFilter } from './filterHelpers'\n\ntype UseFiltersFormInput = {\n  initialValues?: FilterForm\n}\n\ntype UseFiltersFormOutput = {\n  dispatch: (action: Action) => void\n  filterGroups: FilterGroup[]\n  newFilter: FormFilter | undefined\n  isNewFilterInputOpen: boolean\n  isValid: boolean\n  isEmpty: boolean\n}\n\ntype FilterFormState = {\n  filterGroups: FilterGroup[]\n  newFilter: FormFilter | undefined\n  isNewFilterInputOpen: boolean\n}\n\ntype InitializeAction = {\n  type: 'initialize'\n  payload: FilterForm | undefined\n}\n\ntype OpenNewFilterInputAction = {\n  type: 'openNewFilterInput'\n}\n\ntype AddNewFilterAction = {\n  type: 'addNewFilter'\n  payload: FormFilter\n}\n\ntype ChangeNewFilterAction = {\n  type: 'changeNewFilter'\n  payload: FormFilter\n}\n\ntype RemoveNewFilterAction = {\n  type: 'removeNewFilter'\n}\n\ntype ClearAllFiltersAction = {\n  type: 'clearAllFilters'\n}\n\ntype UpdateFilterAction = {\n  type: 'updateFilter'\n  payload: {\n    groupIndex: number\n    filterIndex: number\n    filter: FormFilter\n  }\n}\n\ntype ChangeFilterAction = {\n  type: 'changeFilter'\n  payload: {\n    groupIndex: number\n    filterIndex: number\n    filter: FormFilter\n  }\n}\n\ntype RemoveFilterAction = {\n  type: 'removeFilter'\n  payload: {\n    groupIndex: number\n    filterIndex: number\n  }\n}\n\ntype Action =\n  | AddNewFilterAction\n  | UpdateFilterAction\n  | ClearAllFiltersAction\n  | ChangeNewFilterAction\n  | OpenNewFilterInputAction\n  | ChangeFilterAction\n  | RemoveFilterAction\n  | InitializeAction\n  | RemoveNewFilterAction\n\nconst copyFilterGroups = (filterGroups: FilterGroup[]): FilterGroup[] => {\n  return cloneDeep(filterGroups)\n}\n\nconst addFilter = (\n  filter: FormFilter,\n  filterGroups: FilterGroup[]\n): FilterGroup[] => {\n  const copy = copyFilterGroups(filterGroups)\n  const filterGroupIndex = copy.findIndex(\n    (filterGroup) => filterGroup.field === filter.field\n  )\n\n  if (filterGroupIndex === -1) {\n    copy.push({ field: filter.field, filters: [filter] })\n  } else {\n    copy[filterGroupIndex].filters.push(filter)\n  }\n\n  return copy\n}\n\nconst removeFilter = (\n  groupIndex: number,\n  filterIndex: number,\n  filterGroups: FilterGroup[]\n): FilterGroup[] => {\n  const copy = copyFilterGroups(filterGroups)\n  copy[groupIndex].filters.splice(filterIndex, 1)\n\n  return copy.filter((group) => group.filters.length > 0)\n}\n\nconst filterFormReducer = (state: FilterFormState, action: Action) => {\n  switch (action.type) {\n    case 'initialize': {\n      const filterGroups = action.payload?.filters.reduce(\n        (acc, filter) => {\n          return addFilter(filter, acc)\n        },\n        [...state.filterGroups]\n      )\n\n      return {\n        ...state,\n        filterGroups: filterGroups ?? [],\n        isNewFilterInputOpen: !filterGroups?.length,\n      }\n    }\n    case 'openNewFilterInput': {\n      return {\n        ...state,\n        isNewFilterInputOpen: true,\n      }\n    }\n    case 'addNewFilter': {\n      if (action.payload.errors && action.payload.errors.length > 0) {\n        return state\n      }\n\n      const filterGroups = addFilter(action.payload, state.filterGroups)\n\n      return {\n        ...state,\n        filterGroups,\n        newFilter: undefined,\n        isNewFilterInputOpen: false,\n      }\n    }\n    case 'changeNewFilter': {\n      return {\n        ...state,\n        newFilter: action.payload,\n      }\n    }\n    case 'removeNewFilter': {\n      const allFiltersRemoved = state.filterGroups.every(\n        (group) => group.filters.length === 0\n      )\n      return {\n        ...state,\n        newFilter: undefined,\n        isNewFilterInputOpen: allFiltersRemoved,\n      }\n    }\n    case 'updateFilter': {\n      const { groupIndex, filterIndex, filter } = action.payload\n      let filterGroups = copyFilterGroups(state.filterGroups)\n      const groupField = filterGroups[groupIndex].field\n\n      if (groupField === filter.field) {\n        filterGroups[groupIndex].filters[filterIndex] = filter\n      } else {\n        filterGroups = removeFilter(groupIndex, filterIndex, filterGroups)\n        filterGroups = addFilter(filter, filterGroups)\n      }\n\n      return {\n        ...state,\n        filterGroups,\n      }\n    }\n    case 'changeFilter': {\n      const { groupIndex, filterIndex, filter } = action.payload\n      const filterGroups = copyFilterGroups(state.filterGroups)\n      const group = filterGroups[groupIndex]\n      if (group) {\n        group.filters[filterIndex] = filter\n      }\n\n      return {\n        ...state,\n        filterGroups,\n      }\n    }\n    case 'removeFilter': {\n      const { groupIndex, filterIndex } = action.payload\n\n      const filterGroups = removeFilter(\n        groupIndex,\n        filterIndex,\n        state.filterGroups\n      )\n\n      return {\n        ...state,\n        filterGroups,\n        isNewFilterInputOpen:\n          state.isNewFilterInputOpen || filterGroups.length === 0,\n      }\n    }\n    case 'clearAllFilters': {\n      return {\n        ...state,\n        filterGroups: [],\n        isNewFilterInputOpen: true,\n      }\n    }\n    default:\n      return state\n  }\n}\n\nexport const useFiltersForm = ({\n  initialValues,\n}: UseFiltersFormInput): UseFiltersFormOutput => {\n  const [{ filterGroups, newFilter, isNewFilterInputOpen }, dispatch] =\n    useReducer(\n      filterFormReducer,\n      {\n        filterGroups: [],\n        newFilter: undefined,\n        isNewFilterInputOpen: true,\n      },\n      (state) => {\n        return filterFormReducer(state, {\n          type: 'initialize',\n          payload: initialValues,\n        })\n      }\n    )\n\n  const isValid =\n    (filterGroups.length === 0 ||\n      filterGroups.every((group) =>\n        group.filters.every(\n          (filter) => filter.errors && filter.errors.length === 0\n        )\n      )) &&\n    (newFilter?.errors ? newFilter.errors.length === 0 : true)\n\n  const isEmpty =\n    filterGroups.length === 0 &&\n    (newFilter ? isEmptyFormFilter(newFilter) : true)\n\n  return {\n    dispatch,\n    filterGroups,\n    newFilter,\n    isNewFilterInputOpen,\n    isValid,\n    isEmpty,\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/src/components/form/Form.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const formikAntd = require("formik-antd");
+;/* empty css           */
+const Form = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(formikAntd.Form, { ...props, children });
+};
+Form.Item = formikAntd.FormItem;
+exports.Form = Form;
+//# sourceMappingURL=Form.cjs.map

package/dist/src/components/form/Form.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.cjs","sources":["../../../../src/components/form/Form.tsx"],"sourcesContent":["import { FormProps } from 'antd'\nimport { Form as AntdForm, FormItem } from 'formik-antd'\nimport './Form.css'\n\ntype Props = Expand<FormProps>\n\nexport const Form = ({ children, ...props }: Props) => {\n  return <AntdForm {...props}>{children}</AntdForm>\n}\n\nForm.Item = FormItem\n"],"names":["jsx","AntdForm","FormItem"],"mappings":";;;;;AAMO,MAAM,OAAO,CAAC,EAAE,UAAU,GAAG,YAAmB;AACrD,SAAOA,2BAAAA,IAACC,WAAAA,MAAA,EAAU,GAAG,OAAQ,SAAA,CAAS;AACxC;AAEA,KAAK,OAAOC,WAAAA;;"}

package/dist/src/components/form/Form.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { Form as Form$1, FormItem } from "formik-antd";
+/* empty css         */
+const Form = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx(Form$1, { ...props, children });
+};
+Form.Item = FormItem;
+export {
+  Form
+};
+//# sourceMappingURL=Form.js.map

package/dist/src/components/form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sources":["../../../../src/components/form/Form.tsx"],"sourcesContent":["import { FormProps } from 'antd'\nimport { Form as AntdForm, FormItem } from 'formik-antd'\nimport './Form.css'\n\ntype Props = Expand<FormProps>\n\nexport const Form = ({ children, ...props }: Props) => {\n  return <AntdForm {...props}>{children}</AntdForm>\n}\n\nForm.Item = FormItem\n"],"names":["AntdForm"],"mappings":";;;AAMO,MAAM,OAAO,CAAC,EAAE,UAAU,GAAG,YAAmB;AACrD,SAAO,oBAACA,QAAA,EAAU,GAAG,OAAQ,SAAA,CAAS;AACxC;AAEA,KAAK,OAAO;"}