@j2-health/design-system 0.2.0 → 0.2.1

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

@@ -0,0 +1,210 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const filterHelpers = require("./filterHelpers.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const TypeToOperatorOptions = {
+  select: [
+    { label: "is any of", value: "equals" },
+    { label: "is not any of", value: "notEqual" },
+    { label: "has no value", value: "blank" },
+    { label: "has any value", value: "notBlank" }
+  ],
+  number: [
+    { label: "is", value: "equals" },
+    { label: "is not", value: "notEqual" },
+    { label: "is greater than", value: "greaterThan" },
+    { label: "is greater than or equal to", value: "greaterThanOrEqual" },
+    { label: "is less than", value: "lessThan" },
+    { label: "is less than or equal to", value: "lessThanOrEqual" },
+    { label: "has no value", value: "blank" },
+    { label: "has any value", value: "notBlank" },
+    { label: "is between", value: "inRange" }
+  ],
+  text: [
+    { label: "contains", value: "contains" },
+    { label: "does not contain", value: "notContains" },
+    { label: "starts with", value: "startsWith" },
+    { label: "ends with", value: "endsWith" },
+    { label: "has no value", value: "blank" },
+    { label: "has any value", value: "notBlank" }
+  ]
+};
+const 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"
+    };
+  }
+};
+const filterFieldReducer = (state, action) => {
+  var _a, _b, _c;
+  switch (action.type) {
+    case "setField": {
+      const config = state.filterConfigs.find(
+        (config2) => config2.field === action.payload
+      );
+      if (!config) return state;
+      const operatorOptions = config ? TypeToOperatorOptions[config.type] : [];
+      const newFilter = {
+        ...state.filter,
+        type: config.type,
+        field: action.payload,
+        operator: operatorOptions[0].value,
+        values: []
+      };
+      const pendingFilter = {
+        ...newFilter,
+        errors: filterHelpers.validateFormFilter(newFilter)
+      };
+      return {
+        ...state,
+        filter: pendingFilter,
+        config,
+        operatorOptions,
+        valueInputConfig: operatorOptions.length > 0 ? buildValueInputConfig(config, operatorOptions[0].value) : void 0
+      };
+    }
+    case "setOperator": {
+      if (!state.config) return state;
+      if (!action.payload) return state;
+      const pendingFilter = {
+        ...state.filter,
+        operator: action.payload,
+        values: []
+      };
+      return {
+        ...state,
+        filter: {
+          ...pendingFilter,
+          errors: filterHelpers.validateFormFilter(pendingFilter)
+        },
+        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)) : action.payload.filter(
+        (value) => value !== null && value !== void 0
+      );
+      const pendingFilter = {
+        ...state.filter,
+        values
+      };
+      pendingFilter.errors = filterHelpers.validateFormFilter(pendingFilter);
+      return {
+        ...state,
+        filter: pendingFilter
+      };
+    }
+    case "initialize": {
+      const field = ((_a = state.filter) == null ? void 0 : _a.field) || ((_b = state.filterConfigs.find((config2) => !config2.disabled)) == null ? void 0 : _b.field);
+      const config = state.filterConfigs.find(
+        (config2) => config2.field === field
+      );
+      if (!config) return state;
+      const operatorOptions = config ? TypeToOperatorOptions[config.type] : [];
+      const operator = ((_c = state.filter) == null ? void 0 : _c.operator) || operatorOptions[0].value;
+      const filter = state.filter ?? {
+        field,
+        type: config.type,
+        operator,
+        values: []
+      };
+      const errors = filterHelpers.validateFormFilter(filter);
+      filter.errors = errors;
+      return {
+        ...state,
+        config,
+        filter,
+        operatorOptions,
+        valueInputConfig: operatorOptions.length > 0 ? buildValueInputConfig(config, operator) : void 0
+      };
+    }
+    default:
+      return state;
+  }
+};
+const useFilterField = ({
+  filterConfigs,
+  filter: initialFilter
+}) => {
+  const [{ filter, config, operatorOptions, valueInputConfig }, dispatch] = React__namespace.useReducer(
+    filterFieldReducer,
+    {
+      filter: initialFilter,
+      filterConfigs,
+      config: void 0,
+      operatorOptions: [],
+      valueInputConfig: void 0
+    },
+    (state) => {
+      return filterFieldReducer(state, {
+        type: "initialize",
+        payload: void 0
+      });
+    }
+  );
+  const handleFieldChange = (value) => {
+    dispatch({
+      type: "setField",
+      payload: value
+    });
+  };
+  const handleOperatorChange = (value) => {
+    dispatch({
+      type: "setOperator",
+      payload: value
+    });
+  };
+  const handleValuesChange = (value) => {
+    dispatch({
+      type: "setValues",
+      payload: value
+    });
+  };
+  return {
+    filter,
+    config,
+    operatorOptions,
+    valueInputConfig,
+    handleFieldChange,
+    handleOperatorChange,
+    handleValuesChange
+  };
+};
+exports.TypeToOperatorOptions = TypeToOperatorOptions;
+exports.useFilterField = useFilterField;
+//# sourceMappingURL=useFilterField.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFilterField.cjs","sources":["../../../../src/components/filterform/useFilterField.tsx"],"sourcesContent":["import * as React from 'react'\nimport {\n  FilterConfig,\n  FilterType,\n  FormFilter,\n  NumberOptionsType,\n  Operator,\n  SelectOptionsType,\n} from './types'\nimport { validateFormFilter } 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\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}\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    }\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 = config ? TypeToOperatorOptions[config.type] : []\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),\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),\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          : (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)\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 = config ? TypeToOperatorOptions[config.type] : []\n\n      const operator = state.filter?.operator || operatorOptions[0].value\n\n      const filter =\n        state.filter ??\n        ({\n          field,\n          type: config.type,\n          operator,\n          values: [],\n        } as FormFilter)\n\n      const errors = validateFormFilter(filter)\n      filter.errors = errors\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","validateFormFilter","React"],"mappings":"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"}

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

@@ -0,0 +1,193 @@
+import * as React from "react";
+import { 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 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"
+    };
+  }
+};
+const filterFieldReducer = (state, action) => {
+  var _a, _b, _c;
+  switch (action.type) {
+    case "setField": {
+      const config = state.filterConfigs.find(
+        (config2) => config2.field === action.payload
+      );
+      if (!config) return state;
+      const operatorOptions = config ? TypeToOperatorOptions[config.type] : [];
+      const newFilter = {
+        ...state.filter,
+        type: config.type,
+        field: action.payload,
+        operator: operatorOptions[0].value,
+        values: []
+      };
+      const pendingFilter = {
+        ...newFilter,
+        errors: validateFormFilter(newFilter)
+      };
+      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)
+        },
+        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)) : action.payload.filter(
+        (value) => value !== null && value !== void 0
+      );
+      const pendingFilter = {
+        ...state.filter,
+        values
+      };
+      pendingFilter.errors = validateFormFilter(pendingFilter);
+      return {
+        ...state,
+        filter: pendingFilter
+      };
+    }
+    case "initialize": {
+      const field = ((_a = state.filter) == null ? void 0 : _a.field) || ((_b = state.filterConfigs.find((config2) => !config2.disabled)) == null ? void 0 : _b.field);
+      const config = state.filterConfigs.find(
+        (config2) => config2.field === field
+      );
+      if (!config) return state;
+      const operatorOptions = config ? TypeToOperatorOptions[config.type] : [];
+      const operator = ((_c = state.filter) == null ? void 0 : _c.operator) || operatorOptions[0].value;
+      const filter = state.filter ?? {
+        field,
+        type: config.type,
+        operator,
+        values: []
+      };
+      const errors = validateFormFilter(filter);
+      filter.errors = errors;
+      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 {
+  TypeToOperatorOptions,
+  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 { validateFormFilter } 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\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}\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    }\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 = config ? TypeToOperatorOptions[config.type] : []\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),\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),\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          : (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)\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 = config ? TypeToOperatorOptions[config.type] : []\n\n      const operator = state.filter?.operator || operatorOptions[0].value\n\n      const filter =\n        state.filter ??\n        ({\n          field,\n          type: config.type,\n          operator,\n          values: [],\n        } as FormFilter)\n\n      const errors = validateFormFilter(filter)\n      filter.errors = errors\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":"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"}

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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"}