@vuu-ui/vuu-filters 2.1.18 → 2.1.19-beta.2

package/cjs/column-filter/useColumnFilter.js

@@ -1,139 +0,0 @@
-'use strict';
-
-var core = require('@salt-ds/core');
-var react = require('react');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-
-const injectInputProps = (InputProps2, inputProps) => {
-  if (InputProps2 === void 0) {
-    return {
-      inputProps
-    };
-  } else {
-    return {
-      ...InputProps2,
-      inputProps: {
-        ...InputProps2.inputProps,
-        ...inputProps
-      }
-    };
-  }
-};
-const useColumnFilter = ({
-  InputProps: InputPropsProp,
-  column,
-  defaultValue,
-  extendedFilterOptions,
-  onColumnFilterChange,
-  onColumnRangeFilterChange,
-  onCommit,
-  operator = "=",
-  value: valueProp
-}) => {
-  const [isInvalid, setIsInvalid] = react.useState(false);
-  const [value, setValue] = core.useControlled({
-    controlled: valueProp,
-    default: defaultValue,
-    name: "ColumnFilterNext",
-    state: "value"
-  });
-  const handleCommit = react.useCallback(
-    (_e, newValue = "") => {
-      if (Array.isArray(value)) {
-        if (vuuUtils.isBetweenOperator(operator)) {
-          setValue([`${newValue}`, value[1]]);
-          onCommit?.(
-            column,
-            operator,
-            [`${newValue}`, value[1]],
-            extendedFilterOptions
-          );
-        } else {
-          throw Error(
-            `[useColumnFilterNext] value has been initialised incorrectly for non-range filter`
-          );
-        }
-      } else {
-        setValue(newValue);
-        onCommit?.(column, operator, `${newValue}`, extendedFilterOptions);
-      }
-    },
-    [value, operator, setValue, onCommit, column, extendedFilterOptions]
-  );
-  const handleRangeCommit = react.useCallback(
-    (_e, newValue = "") => {
-      if (Array.isArray(value)) {
-        const [firstValue] = value;
-        const newRange = [value[0], `${newValue}`];
-        setValue(newRange);
-        const validRange = vuuUtils.isValidRange(newRange);
-        setIsInvalid(!validRange);
-        if (validRange) {
-          onCommit?.(
-            column,
-            operator,
-            [firstValue, `${newValue}`],
-            extendedFilterOptions
-          );
-        }
-      } else if (value !== "") {
-        const currentValue = `${value}`;
-        setValue([currentValue, `${newValue}`]);
-        onCommit?.(
-          column,
-          operator,
-          [currentValue, `${newValue}`],
-          extendedFilterOptions
-        );
-      } else {
-        throw Error(
-          `[useColumnFilterNext] value has been initialised incorrectly for range filter`
-        );
-      }
-    },
-    [value, setValue, onCommit, column, operator, extendedFilterOptions]
-  );
-  const onChange = react.useCallback(
-    (e) => {
-      const { value: value2 = "" } = e.target;
-      setValue((v) => Array.isArray(v) ? [value2, v[1]] : value2);
-      onColumnFilterChange?.(e.target.value, column, operator);
-    },
-    [column, onColumnFilterChange, operator, setValue]
-  );
-  const onRangeInputChange = react.useCallback(
-    (e) => {
-      const { value: value2 = "" } = e.target;
-      setValue((v) => Array.isArray(v) ? [v[0], value2] : value2);
-      onColumnRangeFilterChange?.(value2, column, operator);
-    },
-    [setValue, onColumnRangeFilterChange, column, operator]
-  );
-  const InputProps2 = react.useMemo(
-    () => injectInputProps(InputPropsProp, {
-      onChange,
-      value: Array.isArray(value) ? value[0] : value
-    }),
-    [InputPropsProp, onChange, value]
-  );
-  const InputPropsRange = react.useMemo(
-    () => injectInputProps(
-      InputPropsProp,
-      Array.isArray(value) ? {
-        onChange: onRangeInputChange,
-        value: value[1]
-      } : void 0
-    ),
-    [InputPropsProp, onRangeInputChange, value]
-  );
-  return {
-    InputProps: InputProps2,
-    InputPropsRange,
-    isInvalid,
-    onCommit: handleCommit,
-    onCommitRange: handleRangeCommit
-  };
-};
-
-exports.useColumnFilter = useColumnFilter;
-//# sourceMappingURL=useColumnFilter.js.map

package/cjs/column-filter/useColumnFilter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/useColumnFilter.ts"],"sourcesContent":["import {\n  ColumnFilterChangeHandler,\n  ColumnFilterCommitHandler,\n  ColumnFilterOp,\n  ColumnFilterValue,\n  ExtendedFilterOptions,\n} from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { InputProps, useControlled } from \"@salt-ds/core\";\nimport { ChangeEventHandler, useCallback, useMemo, useState } from \"react\";\nimport {\n  CommitHandler,\n  isBetweenOperator,\n  isValidRange,\n} from \"@vuu-ui/vuu-utils\";\nimport { DataItemEditControlProps } from \"@vuu-ui/vuu-data-react\";\n\nconst injectInputProps = (\n  InputProps: InputProps | undefined,\n  inputProps: InputProps[\"inputProps\"],\n): InputProps => {\n  if (InputProps === undefined) {\n    return {\n      inputProps,\n    };\n  } else {\n    return {\n      ...InputProps,\n      inputProps: {\n        ...InputProps.inputProps,\n        ...inputProps,\n      },\n    };\n  }\n};\n\nexport interface ColumnFilterHookProps\n  extends Pick<DataItemEditControlProps, \"InputProps\"> {\n  column: ColumnDescriptor;\n  /**\n   * Filter defaultValue. Pair of values expected when operator is\n   * 'between'. If provided, component is uncontrolled\n   */\n\n  defaultValue?: ColumnFilterValue;\n  /**\n   * Provides for custom filters.\n   */\n  extendedFilterOptions?: ExtendedFilterOptions;\n\n  /**\n   * Filter change events.\n   */\n  onColumnFilterChange?: ColumnFilterChangeHandler;\n  /**\n   * Filter change events on second control in range filter\n   */\n  onColumnRangeFilterChange?: ColumnFilterChangeHandler;\n  /**\n   * Called when user 'commits' filter value, either by pressing enter,\n   * tabbing away from control or making selection from list\n   */\n  onCommit: ColumnFilterCommitHandler;\n  operator?: ColumnFilterOp;\n  /**\n   * Filter value. Pair of values expected when operator is\n   * 'between'. If provided, component is controlled.\n   */\n  value?: ColumnFilterValue;\n}\n\nexport const useColumnFilter = ({\n  InputProps: InputPropsProp,\n  column,\n  defaultValue,\n  extendedFilterOptions,\n  onColumnFilterChange,\n  onColumnRangeFilterChange,\n  onCommit,\n  operator = \"=\",\n  value: valueProp,\n}: ColumnFilterHookProps) => {\n  const [isInvalid, setIsInvalid] = useState(false);\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue,\n    name: \"ColumnFilterNext\",\n    state: \"value\",\n  });\n\n  const handleCommit = useCallback<CommitHandler<HTMLElement>>(\n    (_e, newValue = \"\") => {\n      if (Array.isArray(value)) {\n        if (isBetweenOperator(operator)) {\n          setValue([`${newValue}`, value[1]]);\n          onCommit?.(\n            column,\n            operator,\n            [`${newValue}`, value[1]],\n            extendedFilterOptions,\n          );\n        } else {\n          throw Error(\n            `[useColumnFilterNext] value has been initialised incorrectly for non-range filter`,\n          );\n        }\n      } else {\n        setValue(newValue as ColumnFilterValue);\n        onCommit?.(column, operator, `${newValue}`, extendedFilterOptions);\n      }\n    },\n    [value, operator, setValue, onCommit, column, extendedFilterOptions],\n  );\n\n  const handleRangeCommit = useCallback<CommitHandler<HTMLElement>>(\n    (_e, newValue = \"\") => {\n      if (Array.isArray(value)) {\n        const [firstValue] = value as [string, string];\n        const newRange: [string, string] = [value[0], `${newValue}`];\n        setValue(newRange);\n        const validRange = isValidRange(newRange);\n        setIsInvalid(!validRange);\n        if (validRange) {\n          onCommit?.(\n            column,\n            operator,\n            [firstValue, `${newValue}`],\n            extendedFilterOptions,\n          );\n        }\n      } else if (value !== \"\") {\n        // If we have already committed the first value, filter has been\n        // saved as a single value  '='.\n        const currentValue = `${value}`;\n        setValue([currentValue, `${newValue}`]);\n        onCommit?.(\n          column,\n          operator,\n          [currentValue, `${newValue}`],\n          extendedFilterOptions,\n        );\n      } else {\n        throw Error(\n          `[useColumnFilterNext] value has been initialised incorrectly for range filter`,\n        );\n      }\n    },\n    [value, setValue, onCommit, column, operator, extendedFilterOptions],\n  );\n\n  const onChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      const { value = \"\" } = e.target;\n      setValue((v) => (Array.isArray(v) ? [value, v[1]] : value));\n      onColumnFilterChange?.(e.target.value, column, operator);\n    },\n    [column, onColumnFilterChange, operator, setValue],\n  );\n\n  const onRangeInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      const { value = \"\" } = e.target;\n      setValue((v) => (Array.isArray(v) ? [v[0], value] : value));\n\n      onColumnRangeFilterChange?.(value, column, operator);\n    },\n    [setValue, onColumnRangeFilterChange, column, operator],\n  );\n\n  const InputProps = useMemo(\n    () =>\n      injectInputProps(InputPropsProp, {\n        onChange,\n        value: Array.isArray(value) ? value[0] : value,\n      }),\n    [InputPropsProp, onChange, value],\n  );\n\n  const InputPropsRange = useMemo(\n    () =>\n      injectInputProps(\n        InputPropsProp,\n        Array.isArray(value)\n          ? {\n              onChange: onRangeInputChange,\n              value: value[1],\n            }\n          : undefined,\n      ),\n    [InputPropsProp, onRangeInputChange, value],\n  );\n\n  return {\n    InputProps,\n    InputPropsRange,\n    isInvalid,\n    onCommit: handleCommit,\n    onCommitRange: handleRangeCommit,\n  };\n};\n"],"names":["InputProps","useState","useControlled","useCallback","isBetweenOperator","isValidRange","value","useMemo"],"mappings":";;;;;;AAiBA,MAAM,gBAAA,GAAmB,CACvBA,WAAAA,EACA,UACe,KAAA;AACf,EAAA,IAAIA,gBAAe,KAAW,CAAA,EAAA;AAC5B,IAAO,OAAA;AAAA,MACL;AAAA,KACF;AAAA,GACK,MAAA;AACL,IAAO,OAAA;AAAA,MACL,GAAGA,WAAAA;AAAA,MACH,UAAY,EAAA;AAAA,QACV,GAAGA,WAAW,CAAA,UAAA;AAAA,QACd,GAAG;AAAA;AACL,KACF;AAAA;AAEJ,CAAA;AAqCO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,UAAY,EAAA,cAAA;AAAA,EACZ,MAAA;AAAA,EACA,YAAA;AAAA,EACA,qBAAA;AAAA,EACA,oBAAA;AAAA,EACA,yBAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAW,GAAA,GAAA;AAAA,EACX,KAAO,EAAA;AACT,CAA6B,KAAA;AAC3B,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,eAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,kBAAc,CAAA;AAAA,IACtC,UAAY,EAAA,SAAA;AAAA,IACZ,OAAS,EAAA,YAAA;AAAA,IACT,IAAM,EAAA,kBAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAAC,EAAI,EAAA,QAAA,GAAW,EAAO,KAAA;AACrB,MAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACxB,QAAI,IAAAC,0BAAA,CAAkB,QAAQ,CAAG,EAAA;AAC/B,UAAA,QAAA,CAAS,CAAC,CAAG,EAAA,QAAQ,IAAI,KAAM,CAAA,CAAC,CAAC,CAAC,CAAA;AAClC,UAAA,QAAA;AAAA,YACE,MAAA;AAAA,YACA,QAAA;AAAA,YACA,CAAC,CAAG,EAAA,QAAQ,CAAI,CAAA,EAAA,KAAA,CAAM,CAAC,CAAC,CAAA;AAAA,YACxB;AAAA,WACF;AAAA,SACK,MAAA;AACL,UAAM,MAAA,KAAA;AAAA,YACJ,CAAA,iFAAA;AAAA,WACF;AAAA;AACF,OACK,MAAA;AACL,QAAA,QAAA,CAAS,QAA6B,CAAA;AACtC,QAAA,QAAA,GAAW,MAAQ,EAAA,QAAA,EAAU,CAAG,EAAA,QAAQ,IAAI,qBAAqB,CAAA;AAAA;AACnE,KACF;AAAA,IACA,CAAC,KAAO,EAAA,QAAA,EAAU,QAAU,EAAA,QAAA,EAAU,QAAQ,qBAAqB;AAAA,GACrE;AAEA,EAAA,MAAM,iBAAoB,GAAAD,iBAAA;AAAA,IACxB,CAAC,EAAI,EAAA,QAAA,GAAW,EAAO,KAAA;AACrB,MAAI,IAAA,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACxB,QAAM,MAAA,CAAC,UAAU,CAAI,GAAA,KAAA;AACrB,QAAA,MAAM,WAA6B,CAAC,KAAA,CAAM,CAAC,CAAG,EAAA,CAAA,EAAG,QAAQ,CAAE,CAAA,CAAA;AAC3D,QAAA,QAAA,CAAS,QAAQ,CAAA;AACjB,QAAM,MAAA,UAAA,GAAaE,sBAAa,QAAQ,CAAA;AACxC,QAAA,YAAA,CAAa,CAAC,UAAU,CAAA;AACxB,QAAA,IAAI,UAAY,EAAA;AACd,UAAA,QAAA;AAAA,YACE,MAAA;AAAA,YACA,QAAA;AAAA,YACA,CAAC,UAAA,EAAY,CAAG,EAAA,QAAQ,CAAE,CAAA,CAAA;AAAA,YAC1B;AAAA,WACF;AAAA;AACF,OACF,MAAA,IAAW,UAAU,EAAI,EAAA;AAGvB,QAAM,MAAA,YAAA,GAAe,GAAG,KAAK,CAAA,CAAA;AAC7B,QAAA,QAAA,CAAS,CAAC,YAAA,EAAc,CAAG,EAAA,QAAQ,EAAE,CAAC,CAAA;AACtC,QAAA,QAAA;AAAA,UACE,MAAA;AAAA,UACA,QAAA;AAAA,UACA,CAAC,YAAA,EAAc,CAAG,EAAA,QAAQ,CAAE,CAAA,CAAA;AAAA,UAC5B;AAAA,SACF;AAAA,OACK,MAAA;AACL,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,6EAAA;AAAA,SACF;AAAA;AACF,KACF;AAAA,IACA,CAAC,KAAO,EAAA,QAAA,EAAU,QAAU,EAAA,MAAA,EAAQ,UAAU,qBAAqB;AAAA,GACrE;AAEA,EAAA,MAAM,QAAW,GAAAF,iBAAA;AAAA,IACf,CAAC,CAAM,KAAA;AACL,MAAA,MAAM,EAAE,KAAA,EAAAG,MAAQ,GAAA,EAAA,KAAO,CAAE,CAAA,MAAA;AACzB,MAAA,QAAA,CAAS,CAAC,CAAA,KAAO,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA,GAAI,CAACA,MAAAA,EAAO,CAAE,CAAA,CAAC,CAAC,CAAA,GAAIA,MAAM,CAAA;AAC1D,MAAA,oBAAA,GAAuB,CAAE,CAAA,MAAA,CAAO,KAAO,EAAA,MAAA,EAAQ,QAAQ,CAAA;AAAA,KACzD;AAAA,IACA,CAAC,MAAA,EAAQ,oBAAsB,EAAA,QAAA,EAAU,QAAQ;AAAA,GACnD;AAEA,EAAA,MAAM,kBAAqB,GAAAH,iBAAA;AAAA,IACzB,CAAC,CAAM,KAAA;AACL,MAAA,MAAM,EAAE,KAAA,EAAAG,MAAQ,GAAA,EAAA,KAAO,CAAE,CAAA,MAAA;AACzB,MAAA,QAAA,CAAS,CAAC,CAAA,KAAO,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA,GAAI,CAAC,CAAA,CAAE,CAAC,CAAA,EAAGA,MAAK,CAAA,GAAIA,MAAM,CAAA;AAE1D,MAA4BA,yBAAAA,GAAAA,MAAAA,EAAO,QAAQ,QAAQ,CAAA;AAAA,KACrD;AAAA,IACA,CAAC,QAAA,EAAU,yBAA2B,EAAA,MAAA,EAAQ,QAAQ;AAAA,GACxD;AAEA,EAAA,MAAMN,WAAa,GAAAO,aAAA;AAAA,IACjB,MACE,iBAAiB,cAAgB,EAAA;AAAA,MAC/B,QAAA;AAAA,MACA,OAAO,KAAM,CAAA,OAAA,CAAQ,KAAK,CAAI,GAAA,KAAA,CAAM,CAAC,CAAI,GAAA;AAAA,KAC1C,CAAA;AAAA,IACH,CAAC,cAAgB,EAAA,QAAA,EAAU,KAAK;AAAA,GAClC;AAEA,EAAA,MAAM,eAAkB,GAAAA,aAAA;AAAA,IACtB,MACE,gBAAA;AAAA,MACE,cAAA;AAAA,MACA,KAAA,CAAM,OAAQ,CAAA,KAAK,CACf,GAAA;AAAA,QACE,QAAU,EAAA,kBAAA;AAAA,QACV,KAAA,EAAO,MAAM,CAAC;AAAA,OAEhB,GAAA,KAAA;AAAA,KACN;AAAA,IACF,CAAC,cAAgB,EAAA,kBAAA,EAAoB,KAAK;AAAA,GAC5C;AAEA,EAAO,OAAA;AAAA,IACL,UAAAP,EAAAA,WAAAA;AAAA,IACA,eAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,aAAe,EAAA;AAAA,GACjB;AACF;;;;"}

package/cjs/custom-filters/CustomFilters.js

@@ -1,99 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
-var FilterEditor = require('../filter-editor/FilterEditor.js');
-var FilterPill = require('../filter-pill/FilterPill.js');
-var FilterModel = require('../FilterModel.js');
-var useCustomFilters = require('./useCustomFilters.js');
-
-const classBase = "vuuCustomFilters";
-const CustomFilters = ({
-  columnDescriptors,
-  defaultFilterState,
-  filterState,
-  onApplyFilter,
-  onClearFilter,
-  onFilterDeleted,
-  onFilterRenamed,
-  onFilterStateChanged,
-  vuuTable
-}) => {
-  const rootRef = react.useRef(null);
-  const {
-    activeFilterIndex,
-    addButtonProps,
-    columnsByName,
-    filters,
-    interactedFilterState,
-    onCancelEdit,
-    onSave,
-    FilterPillProps,
-    promptProps
-  } = useCustomFilters.useCustomFilters({
-    containerRef: rootRef,
-    columnDescriptors,
-    defaultFilterState,
-    filterState,
-    onApplyFilter,
-    onClearFilter,
-    onFilterStateChanged,
-    onFilterDeleted,
-    onFilterRenamed
-  });
-  const indexOfFilterBeingRenamed = interactedFilterState?.state === "rename" ? interactedFilterState.index : -1;
-  const filterModel = useCustomFilters.isEditFilterState(interactedFilterState?.state) ? new FilterModel.FilterModel(interactedFilterState.filter) : void 0;
-  const getFilterPills = () => {
-    const items = [];
-    filters.forEach((filter, i) => {
-      items.push(
-        /* @__PURE__ */ react.createElement(
-          FilterPill.FilterPill,
-          {
-            ...FilterPillProps,
-            editing: indexOfFilterBeingRenamed === i,
-            columnsByName,
-            "data-index": i,
-            filter,
-            key: `filter-${i}`,
-            selected: activeFilterIndex.includes(i)
-          }
-        )
-      );
-    });
-    return items;
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "vuuCustomFilters", ref: rootRef, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-filters`, children: getFilterPills() }),
-      /* @__PURE__ */ react.createElement(
-        vuuUiControls.IconButton,
-        {
-          ...addButtonProps,
-          "aria-label": "Add filter",
-          "data-selectable": false,
-          icon: "plus",
-          key: "filter-add",
-          tabIndex: 0,
-          variant: "secondary"
-        }
-      ),
-      promptProps ? /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Prompt, { ...promptProps, open: true }) : null
-    ] }),
-    filterModel && vuuTable && /* @__PURE__ */ jsxRuntime.jsx(
-      FilterEditor.FilterEditor,
-      {
-        columnDescriptors,
-        onCancel: onCancelEdit,
-        onSave,
-        filter: interactedFilterState?.filter,
-        vuuTable
-      },
-      "filter-editor"
-    )
-  ] });
-};
-
-exports.CustomFilters = CustomFilters;
-//# sourceMappingURL=CustomFilters.js.map

package/cjs/custom-filters/CustomFilters.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CustomFilters.js","sources":["../../../../packages/vuu-filters/src/custom-filters/CustomFilters.tsx"],"sourcesContent":["import { Prompt } from \"@vuu-ui/vuu-ui-controls\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { HTMLAttributes, ReactElement, useRef } from \"react\";\nimport { type FilterBarProps } from \"../filter-bar\";\nimport { FilterEditor } from \"../filter-editor\";\nimport { FilterPill } from \"../filter-pill\";\nimport { FilterModel } from \"../FilterModel\";\nimport { isEditFilterState, useCustomFilters } from \"./useCustomFilters\";\n\nconst classBase = \"vuuCustomFilters\";\n\nexport interface CustomFilterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<\n      FilterBarProps,\n      | \"defaultFilterState\"\n      | \"filterState\"\n      | \"onApplyFilter\"\n      | \"onClearFilter\"\n      | \"onFilterDeleted\"\n      | \"onFilterRenamed\"\n      | \"onFilterStateChanged\"\n      | \"vuuTable\"\n    > {\n  columnDescriptors: readonly ColumnDescriptor[];\n}\n\nexport const CustomFilters = ({\n  columnDescriptors,\n  defaultFilterState,\n  filterState,\n  onApplyFilter,\n  onClearFilter,\n  onFilterDeleted,\n  onFilterRenamed,\n  onFilterStateChanged,\n  vuuTable,\n}: CustomFilterProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const {\n    activeFilterIndex,\n    addButtonProps,\n    columnsByName,\n    filters,\n    interactedFilterState,\n    onCancelEdit,\n    onSave,\n    FilterPillProps,\n    promptProps,\n  } = useCustomFilters({\n    containerRef: rootRef,\n    columnDescriptors,\n    defaultFilterState,\n    filterState,\n    onApplyFilter,\n    onClearFilter,\n    onFilterStateChanged,\n    onFilterDeleted,\n    onFilterRenamed,\n  });\n\n  const indexOfFilterBeingRenamed =\n    interactedFilterState?.state === \"rename\"\n      ? interactedFilterState.index\n      : -1;\n\n  const filterModel = isEditFilterState(interactedFilterState?.state)\n    ? new FilterModel(interactedFilterState.filter)\n    : undefined;\n\n  const getFilterPills = () => {\n    const items: ReactElement[] = [];\n    filters.forEach((filter, i) => {\n      items.push(\n        <FilterPill\n          {...FilterPillProps}\n          editing={indexOfFilterBeingRenamed === i}\n          columnsByName={columnsByName}\n          data-index={i}\n          filter={filter}\n          key={`filter-${i}`}\n          selected={activeFilterIndex.includes(i)}\n        />,\n      );\n    });\n    return items;\n  };\n\n  return (\n    <>\n      <div className=\"vuuCustomFilters\" ref={rootRef}>\n        <div className={`${classBase}-filters`}>{getFilterPills()}</div>\n        <IconButton\n          {...addButtonProps}\n          aria-label=\"Add filter\"\n          data-selectable={false}\n          icon=\"plus\"\n          key=\"filter-add\"\n          tabIndex={0}\n          variant=\"secondary\"\n        />\n\n        {promptProps ? <Prompt {...promptProps} open /> : null}\n      </div>\n      {filterModel && vuuTable && (\n        <FilterEditor\n          columnDescriptors={columnDescriptors}\n          key=\"filter-editor\"\n          onCancel={onCancelEdit}\n          onSave={onSave}\n          filter={interactedFilterState?.filter}\n          vuuTable={vuuTable}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["useRef","useCustomFilters","isEditFilterState","FilterModel","createElement","FilterPill","jsxs","Fragment","jsx","IconButton","Prompt","FilterEditor"],"mappings":"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"}

package/cjs/custom-filters/filterBarFocusManagement.js

@@ -1,35 +0,0 @@
-'use strict';
-
-var vuuUtils = require('@vuu-ui/vuu-utils');
-
-const QUERY_ADD_BUTTON = '.saltButton:has([aria-label="Add filter"])';
-const navigateToNextItem = (el, direction = "fwd") => {
-  const pill = vuuUtils.queryClosest(el, ".vuuFilterPill");
-  if (pill) {
-    const index = vuuUtils.getElementDataIndex(pill);
-    if (typeof index === "number") {
-      const target = direction === "fwd" ? vuuUtils.getElementByDataIndex(pill.parentElement, index + 1) : vuuUtils.getElementByDataIndex(pill.parentElement, index - 1);
-      if (target) {
-        target.focus();
-      } else if (direction === "fwd") {
-        const filterBar = vuuUtils.queryClosest(el, ".vuuFilterBar");
-        const addButton = filterBar?.querySelector(
-          QUERY_ADD_BUTTON
-        );
-        addButton?.focus();
-      }
-    }
-  } else {
-    const button = vuuUtils.queryClosest(el, QUERY_ADD_BUTTON);
-    if (button) {
-      const filterBar = vuuUtils.queryClosest(el, ".vuuFilterBar");
-      const target = filterBar?.querySelector(
-        ".vuuFilterPill:last-child"
-      );
-      target?.focus();
-    }
-  }
-};
-
-exports.navigateToNextItem = navigateToNextItem;
-//# sourceMappingURL=filterBarFocusManagement.js.map

package/cjs/custom-filters/filterBarFocusManagement.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"filterBarFocusManagement.js","sources":["../../../../packages/vuu-filters/src/custom-filters/filterBarFocusManagement.ts"],"sourcesContent":["import {\n  getElementByDataIndex,\n  getElementDataIndex,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\n\nconst QUERY_ADD_BUTTON = '.saltButton:has([aria-label=\"Add filter\"])';\n\nexport const navigateToNextItem = (\n  el: HTMLElement | EventTarget,\n  direction: \"bwd\" | \"fwd\" = \"fwd\",\n) => {\n  const pill = queryClosest(el, \".vuuFilterPill\");\n  if (pill) {\n    const index = getElementDataIndex(pill);\n    if (typeof index === \"number\") {\n      const target =\n        direction === \"fwd\"\n          ? getElementByDataIndex(pill.parentElement, index + 1)\n          : getElementByDataIndex(pill.parentElement, index - 1);\n      if (target) {\n        target.focus();\n      } else if (direction === \"fwd\") {\n        const filterBar = queryClosest(el, \".vuuFilterBar\");\n        const addButton = filterBar?.querySelector(\n          QUERY_ADD_BUTTON,\n        ) as HTMLElement;\n        addButton?.focus();\n      }\n    }\n  } else {\n    const button = queryClosest(el, QUERY_ADD_BUTTON);\n    if (button) {\n      const filterBar = queryClosest(el, \".vuuFilterBar\");\n      const target = filterBar?.querySelector(\n        \".vuuFilterPill:last-child\",\n      ) as HTMLElement;\n      target?.focus();\n    }\n  }\n};\n"],"names":["queryClosest","getElementDataIndex","getElementByDataIndex"],"mappings":";;;;AAMA,MAAM,gBAAmB,GAAA,4CAAA;AAElB,MAAM,kBAAqB,GAAA,CAChC,EACA,EAAA,SAAA,GAA2B,KACxB,KAAA;AACH,EAAM,MAAA,IAAA,GAAOA,qBAAa,CAAA,EAAA,EAAI,gBAAgB,CAAA;AAC9C,EAAA,IAAI,IAAM,EAAA;AACR,IAAM,MAAA,KAAA,GAAQC,6BAAoB,IAAI,CAAA;AACtC,IAAI,IAAA,OAAO,UAAU,QAAU,EAAA;AAC7B,MAAA,MAAM,MACJ,GAAA,SAAA,KAAc,KACV,GAAAC,8BAAA,CAAsB,IAAK,CAAA,aAAA,EAAe,KAAQ,GAAA,CAAC,CACnD,GAAAA,8BAAA,CAAsB,IAAK,CAAA,aAAA,EAAe,QAAQ,CAAC,CAAA;AACzD,MAAA,IAAI,MAAQ,EAAA;AACV,QAAA,MAAA,CAAO,KAAM,EAAA;AAAA,OACf,MAAA,IAAW,cAAc,KAAO,EAAA;AAC9B,QAAM,MAAA,SAAA,GAAYF,qBAAa,CAAA,EAAA,EAAI,eAAe,CAAA;AAClD,QAAA,MAAM,YAAY,SAAW,EAAA,aAAA;AAAA,UAC3B;AAAA,SACF;AACA,QAAA,SAAA,EAAW,KAAM,EAAA;AAAA;AACnB;AACF,GACK,MAAA;AACL,IAAM,MAAA,MAAA,GAASA,qBAAa,CAAA,EAAA,EAAI,gBAAgB,CAAA;AAChD,IAAA,IAAI,MAAQ,EAAA;AACV,MAAM,MAAA,SAAA,GAAYA,qBAAa,CAAA,EAAA,EAAI,eAAe,CAAA;AAClD,MAAA,MAAM,SAAS,SAAW,EAAA,aAAA;AAAA,QACxB;AAAA,OACF;AACA,MAAA,MAAA,EAAQ,KAAM,EAAA;AAAA;AAChB;AAEJ;;;;"}

package/cjs/custom-filters/useCustomFilters.js

@@ -1,266 +0,0 @@
-'use strict';
-
-var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-var react = require('react');
-var filterBarFocusManagement = require('./filterBarFocusManagement.js');
-var useFilterState = require('./useFilterState.js');
-
-const isEditFilterState = (filterState) => filterState === "edit" || filterState === "create";
-const useCustomFilters = ({
-  columnDescriptors,
-  containerRef,
-  defaultFilterState,
-  filterState,
-  onApplyFilter,
-  onClearFilter,
-  onFilterDeleted,
-  onFilterRenamed,
-  onFilterStateChanged
-}) => {
-  const addButtonRef = react.useRef(null);
-  const [interactedFilterState, setInteractedFilterState] = react.useState();
-  const [promptProps, setPromptProps] = react.useState(null);
-  const editPillLabelAPI = react.useRef(vuuUiControls.NullEditAPI);
-  const columnsByName = react.useMemo(
-    () => columnDescriptorsByName(columnDescriptors),
-    [columnDescriptors]
-  );
-  const {
-    activeFilterIndex,
-    filters,
-    onAddFilter,
-    onChangeFilter,
-    onDeleteFilter,
-    onRenameFilter,
-    onToggleFilterActive
-  } = useFilterState.useFilterState({
-    defaultFilterState,
-    filterState,
-    onFilterDeleted,
-    onFilterRenamed,
-    onFilterStateChanged
-  });
-  react.useEffect(() => {
-    const activeFilters = activeFilterIndex.map((i) => filters[i]);
-    const applyFilter = (filter) => {
-      if (filter) {
-        onApplyFilter(filter);
-      } else {
-        onClearFilter();
-      }
-    };
-    if (activeFilters.length === 0) {
-      applyFilter();
-    } else if (activeFilters.length === 1) {
-      const [filter] = activeFilters;
-      applyFilter(filter);
-    } else {
-      applyFilter({ op: "and", filters: activeFilters });
-    }
-  }, [activeFilterIndex, columnsByName, filters, onApplyFilter, onClearFilter]);
-  const editPillLabel = react.useCallback((index, filter) => {
-    setTimeout(() => {
-      setInteractedFilterState({
-        filter,
-        index,
-        state: "rename"
-      });
-    }, 100);
-  }, []);
-  const focusFilterPill = react.useCallback(
-    (index = 0) => {
-      requestAnimationFrame(() => {
-        const target = containerRef.current?.querySelector(
-          `.vuuFilterPill[data-index="${index}"] button`
-        );
-        if (target) {
-          target.focus();
-        }
-      });
-    },
-    [containerRef]
-  );
-  const deleteConfirmed = react.useCallback(
-    (filter) => {
-      onDeleteFilter(filter);
-      requestAnimationFrame(() => {
-        if (filters.length) {
-          focusFilterPill(0);
-        }
-      });
-    },
-    [filters.length, focusFilterPill, onDeleteFilter]
-  );
-  const getDeletePrompt = react.useMemo(
-    () => (filter) => {
-      const close = () => {
-        setPromptProps(null);
-        focusFilterPill();
-      };
-      return {
-        className: "vuuFilterDeletePrompt",
-        confirmButtonLabel: "Remove",
-        icon: "warn-triangle",
-        initialFocusedItem: "confirm",
-        onCancel: close,
-        onClose: close,
-        onConfirm: () => {
-          setPromptProps(null);
-          deleteConfirmed(filter);
-        },
-        children: `Are you sure you want to delete filter '${filter.name}'`,
-        title: "Remove Filter",
-        status: "warning"
-      };
-    },
-    [deleteConfirmed, focusFilterPill]
-  );
-  const deleteFilter = react.useCallback(
-    (filter, withPrompt) => {
-      if (withPrompt) {
-        setPromptProps(getDeletePrompt(filter));
-      } else {
-        deleteConfirmed(filter);
-      }
-    },
-    [deleteConfirmed, getDeletePrompt]
-  );
-  const handleExitEditFilterName = react.useCallback(
-    (_, editedValue = "") => {
-      if (interactedFilterState?.state === "rename" && interactedFilterState.filter) {
-        const { filter } = interactedFilterState;
-        const indexOfEditedFilter = onRenameFilter(filter, editedValue);
-        setInteractedFilterState(void 0);
-        focusFilterPill(indexOfEditedFilter);
-      }
-      setInteractedFilterState(void 0);
-    },
-    [focusFilterPill, interactedFilterState, onRenameFilter]
-  );
-  const handlePillMenuAction = react.useCallback(
-    (menuId, options) => {
-      switch (menuId) {
-        case "delete-filter": {
-          const { filter } = options;
-          deleteFilter(filter, true);
-          return true;
-        }
-        case "rename-filter": {
-          const { filter } = options;
-          const index = filters.indexOf(filter);
-          editPillLabel(index, filter);
-          return true;
-        }
-        case "edit-filter": {
-          const { filter } = options;
-          setInteractedFilterState({
-            filter,
-            index: filters.indexOf(filter),
-            state: "edit"
-          });
-          return true;
-        }
-        default:
-          return false;
-      }
-    },
-    [deleteFilter, editPillLabel, filters]
-  );
-  const handlePillKeyDown = react.useCallback((e) => {
-    if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
-      filterBarFocusManagement.navigateToNextItem(e.target, e.key === "ArrowLeft" ? "bwd" : "fwd");
-    }
-  }, []);
-  const addIfNewElseUpdate = react.useCallback(
-    (newOrUpdatedFilter, existing) => {
-      if (existing === void 0) {
-        const idx = onAddFilter(newOrUpdatedFilter);
-        focusFilterPill(idx);
-        editPillLabel(idx, newOrUpdatedFilter);
-      } else {
-        const idx = onChangeFilter(existing, newOrUpdatedFilter);
-        focusFilterPill(idx);
-      }
-    },
-    [editPillLabel, focusFilterPill, onAddFilter, onChangeFilter]
-  );
-  const filterSaveHandler = react.useCallback(
-    (filter) => {
-      if (interactedFilterState) {
-        const { filter: existingFilter } = interactedFilterState;
-        setInteractedFilterState(void 0);
-        addIfNewElseUpdate(filter, existingFilter);
-      }
-    },
-    [addIfNewElseUpdate, interactedFilterState]
-  );
-  const handlePillClick = react.useCallback(
-    (e) => {
-      const isEditing = e.target.querySelector(
-        ".vuuEditableLabel-editing"
-      );
-      if (!isEditing) {
-        const pill = vuuUtils.queryClosest(e.target, ".vuuFilterPill");
-        if (pill) {
-          const index = vuuUtils.getElementDataIndex(pill);
-          onToggleFilterActive(index, e.shiftKey);
-        }
-      }
-    },
-    [onToggleFilterActive]
-  );
-  const FilterPillProps2 = {
-    editLabelApiRef: editPillLabelAPI,
-    // onBeginEdit: handleBeginEditFilterName,
-    onClick: handlePillClick,
-    onKeyDown: handlePillKeyDown,
-    onMenuAction: handlePillMenuAction,
-    onExitEditMode: handleExitEditFilterName
-  };
-  const handleClickAddButton = react.useCallback(() => {
-    setInteractedFilterState({
-      index: -1,
-      state: "create"
-    });
-  }, []);
-  const handleKeyDownAddButton = react.useCallback((evt) => {
-    if (evt.key === "ArrowLeft") {
-      filterBarFocusManagement.navigateToNextItem(evt.target, "bwd");
-    }
-  }, []);
-  const handleCancelEdit = react.useCallback(() => {
-    if (interactedFilterState) {
-      const { index } = interactedFilterState;
-      if (index === -1) {
-        addButtonRef.current?.focus();
-      } else {
-        focusFilterPill(index);
-      }
-      setInteractedFilterState(void 0);
-    }
-  }, [focusFilterPill, interactedFilterState]);
-  const addButtonProps = {
-    ref: addButtonRef,
-    onClick: handleClickAddButton,
-    onKeyDown: handleKeyDownAddButton
-  };
-  return {
-    FilterPillProps: FilterPillProps2,
-    activeFilterIndex,
-    addButtonProps,
-    columnsByName,
-    filters,
-    interactedFilterState,
-    onCancelEdit: handleCancelEdit,
-    onSave: filterSaveHandler,
-    promptProps
-  };
-};
-function columnDescriptorsByName(columns) {
-  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});
-}
-
-exports.isEditFilterState = isEditFilterState;
-exports.useCustomFilters = useCustomFilters;
-//# sourceMappingURL=useCustomFilters.js.map

package/cjs/custom-filters/useCustomFilters.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCustomFilters.js","sources":["../../../../packages/vuu-filters/src/custom-filters/useCustomFilters.ts"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { PromptProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  EditableLabelProps,\n  EditAPI,\n  NullEditAPI,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { getElementDataIndex, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEventHandler,\n  MouseEventHandler,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport {\n  FilterEditCancelHandler,\n  FilterEditSaveHandler,\n} from \"../filter-editor\";\nimport { FilterPillProps } from \"../filter-pill\";\nimport { FilterMenuOptions } from \"../filter-pill-menu\";\nimport { navigateToNextItem } from \"./filterBarFocusManagement\";\nimport { useFilterState } from \"./useFilterState\";\nimport { MenuActionHandler } from \"@vuu-ui/vuu-context-menu\";\n\nexport type EditFilterState = \"create\" | \"edit\";\nexport type FilterState = EditFilterState | \"rename\";\nexport const isEditFilterState = (\n  filterState?: string,\n): filterState is EditFilterState =>\n  filterState === \"edit\" || filterState === \"create\";\n\ntype InteractedFilterState = {\n  filter?: Filter;\n  index: number;\n  state: FilterState;\n};\n\nexport interface CustomFilterHookProps\n  extends Pick<\n    FilterBarProps,\n    | \"columnDescriptors\"\n    | \"defaultFilterState\"\n    | \"filterState\"\n    | \"onApplyFilter\"\n    | \"onClearFilter\"\n    | \"onFilterDeleted\"\n    | \"onFilterRenamed\"\n    | \"onFilterStateChanged\"\n  > {\n  containerRef: RefObject<HTMLDivElement | null>;\n}\n\nexport const useCustomFilters = ({\n  columnDescriptors,\n  containerRef,\n  defaultFilterState,\n  filterState,\n  onApplyFilter,\n  onClearFilter,\n  onFilterDeleted,\n  onFilterRenamed,\n  onFilterStateChanged,\n}: CustomFilterHookProps) => {\n  const addButtonRef = useRef<HTMLButtonElement>(null);\n  const [interactedFilterState, setInteractedFilterState] = useState<\n    InteractedFilterState | undefined\n  >();\n  const [promptProps, setPromptProps] = useState<PromptProps | null>(null);\n  const editPillLabelAPI = useRef<EditAPI>(NullEditAPI);\n\n  const columnsByName = useMemo(\n    () => columnDescriptorsByName(columnDescriptors),\n    [columnDescriptors],\n  );\n\n  const {\n    activeFilterIndex,\n    filters,\n    onAddFilter,\n    onChangeFilter,\n    onDeleteFilter,\n    onRenameFilter,\n    onToggleFilterActive,\n  } = useFilterState({\n    defaultFilterState,\n    filterState,\n    onFilterDeleted,\n    onFilterRenamed,\n    onFilterStateChanged,\n  });\n\n  useEffect(() => {\n    const activeFilters = activeFilterIndex.map((i) => filters[i]);\n    const applyFilter = (filter?: Filter) => {\n      if (filter) {\n        onApplyFilter(filter);\n      } else {\n        onClearFilter();\n      }\n    };\n    if (activeFilters.length === 0) {\n      applyFilter();\n    } else if (activeFilters.length === 1) {\n      const [filter] = activeFilters;\n      applyFilter(filter);\n    } else {\n      applyFilter({ op: \"and\", filters: activeFilters });\n    }\n  }, [activeFilterIndex, columnsByName, filters, onApplyFilter, onClearFilter]);\n\n  const editPillLabel = useCallback((index: number, filter: Filter) => {\n    setTimeout(() => {\n      setInteractedFilterState({\n        filter,\n        index,\n        state: \"rename\",\n      });\n    }, 100);\n  }, []);\n\n  const focusFilterPill = useCallback(\n    (index = 0) => {\n      requestAnimationFrame(() => {\n        const target = containerRef.current?.querySelector(\n          `.vuuFilterPill[data-index=\"${index}\"] button`,\n        ) as undefined | HTMLInputElement;\n        if (target) {\n          target.focus();\n        }\n      });\n    },\n    [containerRef],\n  );\n\n  const deleteConfirmed = useCallback(\n    (filter: Filter) => {\n      onDeleteFilter(filter);\n\n      // TODO move focus to next/previous filter\n      requestAnimationFrame(() => {\n        if (filters.length) {\n          focusFilterPill(0);\n        }\n      });\n    },\n    [filters.length, focusFilterPill, onDeleteFilter],\n  );\n\n  const getDeletePrompt = useMemo(\n    () => (filter: Filter) => {\n      const close = () => {\n        setPromptProps(null);\n        focusFilterPill();\n      };\n      return {\n        className: \"vuuFilterDeletePrompt\",\n        confirmButtonLabel: \"Remove\",\n        icon: \"warn-triangle\",\n        initialFocusedItem: \"confirm\",\n        onCancel: close,\n        onClose: close,\n        onConfirm: () => {\n          setPromptProps(null);\n          deleteConfirmed(filter);\n        },\n        children: `Are you sure you want to delete filter '${filter.name}'`,\n        title: \"Remove Filter\",\n        status: \"warning\",\n      } as PromptProps;\n    },\n    [deleteConfirmed, focusFilterPill],\n  );\n\n  const deleteFilter = useCallback(\n    (filter: Filter, withPrompt: boolean) => {\n      if (withPrompt) {\n        setPromptProps(getDeletePrompt(filter));\n      } else {\n        deleteConfirmed(filter);\n      }\n    },\n    [deleteConfirmed, getDeletePrompt],\n  );\n\n  // TODO handle cancel edit name\n  const handleExitEditFilterName: EditableLabelProps[\"onExitEditMode\"] =\n    useCallback(\n      (_, editedValue = \"\") => {\n        if (\n          interactedFilterState?.state === \"rename\" &&\n          interactedFilterState.filter\n        ) {\n          const { filter } = interactedFilterState;\n          const indexOfEditedFilter = onRenameFilter(filter, editedValue);\n\n          setInteractedFilterState(undefined);\n          focusFilterPill(indexOfEditedFilter);\n        }\n        setInteractedFilterState(undefined);\n      },\n      [focusFilterPill, interactedFilterState, onRenameFilter],\n    );\n\n  const handlePillMenuAction = useCallback<MenuActionHandler>(\n    (menuId, options) => {\n      switch (menuId) {\n        case \"delete-filter\": {\n          const { filter } = options as FilterMenuOptions;\n          deleteFilter(filter, true);\n          return true;\n        }\n        case \"rename-filter\": {\n          const { filter } = options as FilterMenuOptions;\n          const index = filters.indexOf(filter);\n          editPillLabel(index, filter);\n          return true;\n        }\n        case \"edit-filter\": {\n          const { filter } = options as FilterMenuOptions;\n          setInteractedFilterState({\n            filter,\n            index: filters.indexOf(filter),\n            state: \"edit\",\n          });\n          return true;\n        }\n        default:\n          return false;\n      }\n    },\n    [deleteFilter, editPillLabel, filters],\n  );\n\n  const handlePillKeyDown = useCallback<KeyboardEventHandler>((e) => {\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n      navigateToNextItem(e.target, e.key === \"ArrowLeft\" ? \"bwd\" : \"fwd\");\n    }\n  }, []);\n\n  const addIfNewElseUpdate = useCallback(\n    (newOrUpdatedFilter: Filter, existing: Filter | undefined) => {\n      if (existing === undefined) {\n        const idx = onAddFilter(newOrUpdatedFilter);\n        focusFilterPill(idx);\n        editPillLabel(idx, newOrUpdatedFilter);\n      } else {\n        const idx = onChangeFilter(existing, newOrUpdatedFilter);\n        focusFilterPill(idx);\n      }\n    },\n    [editPillLabel, focusFilterPill, onAddFilter, onChangeFilter],\n  );\n\n  const filterSaveHandler = useCallback<FilterEditSaveHandler>(\n    (filter) => {\n      if (interactedFilterState) {\n        const { filter: existingFilter } = interactedFilterState;\n        setInteractedFilterState(undefined);\n        addIfNewElseUpdate(filter, existingFilter);\n      }\n    },\n    [addIfNewElseUpdate, interactedFilterState],\n  );\n\n  const handlePillClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (e) => {\n      const isEditing = (e.target as HTMLElement).querySelector(\n        \".vuuEditableLabel-editing\",\n      );\n      if (!isEditing) {\n        const pill = queryClosest(e.target, \".vuuFilterPill\");\n        if (pill) {\n          const index = getElementDataIndex(pill);\n          onToggleFilterActive(index, e.shiftKey);\n        }\n      }\n    },\n    [onToggleFilterActive],\n  );\n\n  const FilterPillProps: Omit<FilterPillProps, \"filter\" | \"selected\"> = {\n    editLabelApiRef: editPillLabelAPI,\n    // onBeginEdit: handleBeginEditFilterName,\n    onClick: handlePillClick,\n    onKeyDown: handlePillKeyDown,\n    onMenuAction: handlePillMenuAction,\n    onExitEditMode: handleExitEditFilterName,\n  };\n\n  const handleClickAddButton = useCallback(() => {\n    setInteractedFilterState({\n      index: -1,\n      state: \"create\",\n    });\n  }, []);\n\n  const handleKeyDownAddButton = useCallback<KeyboardEventHandler>((evt) => {\n    if (evt.key === \"ArrowLeft\") {\n      navigateToNextItem(evt.target, \"bwd\");\n    }\n  }, []);\n\n  const handleCancelEdit = useCallback<FilterEditCancelHandler>(() => {\n    if (interactedFilterState) {\n      const { index } = interactedFilterState;\n      if (index === -1) {\n        addButtonRef.current?.focus();\n      } else {\n        focusFilterPill(index);\n      }\n      setInteractedFilterState(undefined);\n    }\n  }, [focusFilterPill, interactedFilterState]);\n\n  const addButtonProps = {\n    ref: addButtonRef,\n    onClick: handleClickAddButton,\n    onKeyDown: handleKeyDownAddButton,\n  };\n\n  return {\n    FilterPillProps,\n    activeFilterIndex,\n    addButtonProps,\n    columnsByName,\n    filters,\n    interactedFilterState,\n    onCancelEdit: handleCancelEdit,\n    onSave: filterSaveHandler,\n    promptProps,\n  };\n};\n\nfunction columnDescriptorsByName(\n  columns: readonly ColumnDescriptor[],\n): ColumnDescriptorsByName {\n  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["useRef","useState","NullEditAPI","useMemo","useFilterState","useEffect","useCallback","navigateToNextItem","queryClosest","getElementDataIndex","FilterPillProps"],"mappings":"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"}