@vuu-ui/vuu-filters 0.13.8 → 0.13.10

package/cjs/FilterModel.js

@@ -0,0 +1,224 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+var __defProp = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
+var _filterClause, _isValid, _children, _isValid2, _op;
+const hasValues = ({ values }) => Array.isArray(values) && values.length > 0;
+const isValidFilterClause = (filterClause) => {
+  if (filterClause.op === void 0 || filterClause.column === void 0) {
+    return false;
+  } else if (vuuUtils.isMultiValueFilter(filterClause)) {
+    return hasValues(filterClause);
+  } else if (vuuUtils.isSingleValueFilter(filterClause)) {
+    return filterClause.value !== void 0 && filterClause.value !== "";
+  }
+  throw Error("isValidFilterClause should never reach this far");
+};
+const isValidFilter = (filter) => {
+  if (filter === void 0) {
+    return false;
+  } else if (vuuUtils.isMultiClauseFilter(filter)) {
+    return filter.filters.every(isValidFilter);
+  } else {
+    return isValidFilterClause(filter);
+  }
+};
+const isValidFilterModel = (filterModel) => {
+  if (filterModel.isMultiClauseFilter) {
+    return filterModel.filterClauses.every((f) => f.isValid);
+  } else {
+    return filterModel.filterClauses.length === 1 && filterModel.filterClauses[0].isValid;
+  }
+};
+class FilterClauseModel extends vuuUtils.EventEmitter {
+  constructor(filterClause) {
+    super();
+    __privateAdd(this, _filterClause);
+    __privateAdd(this, _isValid);
+    __privateSet(this, _filterClause, filterClause);
+    __privateSet(this, _isValid, isValidFilterClause(filterClause));
+  }
+  get isValid() {
+    return __privateGet(this, _isValid);
+  }
+  setIsValid(isValid) {
+    __privateSet(this, _isValid, isValid);
+    this.emit("isValid", isValid);
+  }
+  get column() {
+    return __privateGet(this, _filterClause).column;
+  }
+  set column(column) {
+    __privateSet(this, _filterClause, {
+      column
+    });
+    const isValid = isValidFilterClause(__privateGet(this, _filterClause));
+    this.emit("filterClause", __privateGet(this, _filterClause), isValid);
+    if (isValid !== __privateGet(this, _isValid)) {
+      this.setIsValid(isValid);
+    }
+  }
+  get op() {
+    return __privateGet(this, _filterClause).op;
+  }
+  setOp(op) {
+    __privateSet(this, _filterClause, {
+      ...__privateGet(this, _filterClause),
+      op
+    });
+    const isValid = isValidFilterClause(__privateGet(this, _filterClause));
+    this.emit("filterClause", __privateGet(this, _filterClause), isValid);
+    if (isValid !== __privateGet(this, _isValid)) {
+      this.setIsValid(isValid);
+    }
+  }
+  setValue(value, isFinal = true) {
+    if (vuuUtils.isSingleValueFilter(__privateGet(this, _filterClause))) {
+      __privateSet(this, _filterClause, {
+        ...__privateGet(this, _filterClause),
+        value
+      });
+    } else if (Array.isArray(value)) {
+      __privateSet(this, _filterClause, {
+        ...__privateGet(this, _filterClause),
+        values: value
+      });
+    }
+    const isValid = isValidFilterClause(__privateGet(this, _filterClause));
+    if (isValid !== __privateGet(this, _isValid)) {
+      this.setIsValid(isValid);
+    }
+    if (isFinal) {
+      this.emit("filterClause", __privateGet(this, _filterClause), isValid);
+    }
+  }
+  asFilter(throwIfInvalid = true) {
+    if (throwIfInvalid && !__privateGet(this, _isValid)) {
+      throw Error("Invalid filter model cannot be returned as Filter");
+    }
+    return __privateGet(this, _filterClause);
+  }
+}
+_filterClause = new WeakMap();
+_isValid = new WeakMap();
+class FilterModel extends vuuUtils.EventEmitter {
+  constructor(filter) {
+    super();
+    __privateAdd(this, _children, []);
+    __privateAdd(this, _isValid2);
+    __privateAdd(this, _op);
+    __publicField(this, "onFilterClauseChange", () => {
+      this.emit("filter", this.asFilter(false), __privateGet(this, _isValid2));
+    });
+    __publicField(this, "onFilterClauseStatusChange", (isValid) => {
+      if (!isValid && __privateGet(this, _isValid2)) {
+        this.setIsValid(false);
+      } else {
+        this.checkValidStatus();
+      }
+    });
+    if (vuuUtils.isMultiClauseFilter(filter)) {
+      __privateSet(this, _op, filter.op);
+      filter.filters.forEach((f) => this.addFilterClause(f));
+    } else if (filter) {
+      this.addFilterClause(filter);
+    } else {
+      this.addNewFilterClause();
+    }
+    __privateSet(this, _isValid2, isValidFilter(filter));
+  }
+  get isValid() {
+    return __privateGet(this, _isValid2);
+  }
+  setIsValid(isValid) {
+    __privateSet(this, _isValid2, isValid);
+    this.emit("isValid", isValid);
+  }
+  addNewFilterClause(operator) {
+    const count = __privateGet(this, _children).length;
+    if (!operator && !__privateGet(this, _op) && count === 1) {
+      __privateSet(this, _op, "and");
+    } else if (operator && !__privateGet(this, _op) && count === 1) {
+      __privateSet(this, _op, operator);
+    } else if (operator && __privateGet(this, _op) && operator !== __privateGet(this, _op)) {
+      throw Error(
+        "FilterModel: use setOp to change the Filter combinator operator"
+      );
+    }
+    const filterClauseModel = new FilterClauseModel({});
+    filterClauseModel.on("isValid", this.onFilterClauseStatusChange);
+    filterClauseModel.on("filterClause", this.onFilterClauseChange);
+    __privateGet(this, _children).push(filterClauseModel);
+    this.setIsValid(false);
+  }
+  addFilterClause(filterClause = {}) {
+    const filterClauseModel = new FilterClauseModel(filterClause);
+    filterClauseModel.on("isValid", this.onFilterClauseStatusChange);
+    filterClauseModel.on("filterClause", this.onFilterClauseChange);
+    __privateGet(this, _children).push(filterClauseModel);
+  }
+  removeFilterClause(filterClause) {
+    if (this.isMultiClauseFilter) {
+      const doomedFilter = this.filterClauses.indexOf(filterClause);
+      if (doomedFilter !== -1) {
+        this.filterClauses.splice(doomedFilter, 1);
+        if (this.filterClauses.length === 1) {
+          __privateSet(this, _op, void 0);
+        }
+        this.checkValidStatus();
+      }
+    }
+  }
+  checkValidStatus() {
+    const nowValid = isValidFilterModel(this);
+    if (nowValid !== __privateGet(this, _isValid2)) {
+      this.setIsValid(nowValid);
+    }
+  }
+  getFilterClause(index) {
+    return __privateGet(this, _children)[index];
+  }
+  get op() {
+    return __privateGet(this, _op);
+  }
+  setOp(op) {
+    __privateSet(this, _op, op);
+    this.emit("filter", this.asFilter(false), __privateGet(this, _isValid2));
+  }
+  get filterClauses() {
+    return __privateGet(this, _children);
+  }
+  get isMultiClauseFilter() {
+    return __privateGet(this, _op) === "and" || __privateGet(this, _op) === "or";
+  }
+  asFilter(throwIfInvalid = true) {
+    if (throwIfInvalid && !__privateGet(this, _isValid2)) {
+      throw Error("Invalid filter model cannot be returned as Filter");
+    }
+    if (__privateGet(this, _op) === "and" || __privateGet(this, _op) === "or") {
+      return {
+        op: __privateGet(this, _op),
+        filters: __privateGet(this, _children).map((f) => f.asFilter(throwIfInvalid))
+      };
+    } else {
+      return __privateGet(this, _children)[0].asFilter(throwIfInvalid);
+    }
+  }
+}
+_children = new WeakMap();
+_isValid2 = new WeakMap();
+_op = new WeakMap();
+
+exports.FilterClauseModel = FilterClauseModel;
+exports.FilterModel = FilterModel;
+//# sourceMappingURL=FilterModel.js.map

package/cjs/FilterModel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterModel.js","sources":["../src/FilterModel.ts"],"sourcesContent":["import {\n  Filter,\n  FilterClause,\n  FilterClauseOp,\n  FilterCombinatorOp,\n  MultiClauseFilter,\n  MultiValueFilterClause,\n  SingleValueFilterClause,\n} from \"@vuu-ui/vuu-filter-types\";\nimport {\n  EventEmitter,\n  isMultiClauseFilter,\n  isMultiValueFilter,\n  isSingleValueFilter,\n} from \"@vuu-ui/vuu-utils\";\n\nexport type FilterStatusChangeHandler = (isValid: boolean) => void;\nexport type FilterChangeHandler = (\n  filter: Partial<Filter>,\n  isValid: boolean,\n) => void;\nexport type FilterClauseChangeHandler = (\n  filter: Partial<FilterClause>,\n  isValid: boolean,\n) => void;\n\nconst hasValues = ({ values }: MultiValueFilterClause) =>\n  Array.isArray(values) && values.length > 0;\n\nconst isValidFilterClause = (\n  filterClause: Partial<FilterClause>,\n): filterClause is FilterClause => {\n  if (filterClause.op === undefined || filterClause.column === undefined) {\n    return false;\n  } else if (isMultiValueFilter(filterClause)) {\n    return hasValues(filterClause);\n  } else if (isSingleValueFilter(filterClause)) {\n    return filterClause.value !== undefined && filterClause.value !== \"\";\n  }\n  throw Error(\"isValidFilterClause should never reach this far\");\n};\n\nconst isValidFilter = (filter?: Filter): boolean => {\n  if (filter === undefined) {\n    return false;\n  } else if (isMultiClauseFilter(filter)) {\n    return filter.filters.every(isValidFilter);\n  } else {\n    return isValidFilterClause(filter);\n  }\n};\n\nconst isValidFilterModel = (filterModel: FilterModel) => {\n  if (filterModel.isMultiClauseFilter) {\n    return filterModel.filterClauses.every((f) => f.isValid);\n  } else {\n    return (\n      filterModel.filterClauses.length === 1 &&\n      filterModel.filterClauses[0].isValid\n    );\n  }\n};\n\nexport type FilterClauseModelEvents = {\n  filterClause: FilterClauseChangeHandler;\n  isValid: FilterStatusChangeHandler;\n};\n\nexport type FilterModelEvents = {\n  // TODO do we need an incomplate filter type\n  filter: FilterChangeHandler;\n  isValid: FilterStatusChangeHandler;\n};\n\nexport class FilterClauseModel extends EventEmitter<FilterClauseModelEvents> {\n  #filterClause: Partial<FilterClause>;\n  #isValid: boolean;\n  constructor(filterClause: Partial<FilterClause>) {\n    super();\n    this.#filterClause = filterClause;\n    this.#isValid = isValidFilterClause(filterClause);\n  }\n  get isValid() {\n    return this.#isValid;\n  }\n\n  private setIsValid(isValid: boolean) {\n    this.#isValid = isValid;\n    this.emit(\"isValid\", isValid);\n  }\n\n  get column() {\n    return this.#filterClause.column;\n  }\n\n  set column(column: undefined | string) {\n    // TODO set op, value to empty\n    this.#filterClause = {\n      column,\n    };\n\n    const isValid = isValidFilterClause(this.#filterClause);\n    this.emit(\"filterClause\", this.#filterClause, isValid);\n    if (isValid !== this.#isValid) {\n      this.setIsValid(isValid);\n    }\n  }\n\n  get op() {\n    return this.#filterClause.op;\n  }\n\n  setOp(op: undefined | FilterClauseOp) {\n    this.#filterClause = {\n      ...this.#filterClause,\n      op,\n    };\n    const isValid = isValidFilterClause(this.#filterClause);\n    this.emit(\"filterClause\", this.#filterClause, isValid);\n    if (isValid !== this.#isValid) {\n      this.setIsValid(isValid);\n    }\n  }\n\n  setValue(\n    value:\n      | undefined\n      | string\n      | string[]\n      | number\n      | number[]\n      | boolean\n      | boolean[],\n    isFinal = true,\n  ) {\n    if (isSingleValueFilter(this.#filterClause)) {\n      this.#filterClause = {\n        ...this.#filterClause,\n        value,\n      } as SingleValueFilterClause;\n    } else if (Array.isArray(value)) {\n      this.#filterClause = {\n        ...this.#filterClause,\n        values: value,\n      } as MultiValueFilterClause;\n    }\n\n    const isValid = isValidFilterClause(this.#filterClause);\n    if (isValid !== this.#isValid) {\n      this.setIsValid(isValid);\n    }\n    if (isFinal) {\n      this.emit(\"filterClause\", this.#filterClause, isValid);\n    }\n  }\n\n  asFilter(throwIfInvalid = true): FilterClause {\n    if (throwIfInvalid && !this.#isValid) {\n      throw Error(\"Invalid filter model cannot be returned as Filter\");\n    }\n    return this.#filterClause as FilterClause;\n  }\n}\n\nexport class FilterModel extends EventEmitter<FilterModelEvents> {\n  #children: FilterClauseModel[] = [];\n  #isValid: boolean;\n  #op?: FilterCombinatorOp;\n\n  constructor(filter?: Filter) {\n    super();\n    if (isMultiClauseFilter(filter)) {\n      this.#op = filter.op;\n      filter.filters.forEach((f) => this.addFilterClause(f as FilterClause));\n    } else if (filter) {\n      this.addFilterClause(filter);\n    } else {\n      this.addNewFilterClause();\n    }\n\n    this.#isValid = isValidFilter(filter);\n  }\n  get isValid() {\n    return this.#isValid;\n  }\n\n  private setIsValid(isValid: boolean) {\n    this.#isValid = isValid;\n    this.emit(\"isValid\", isValid);\n  }\n\n  addNewFilterClause(operator?: FilterCombinatorOp) {\n    const count = this.#children.length;\n    if (!operator && !this.#op && count === 1) {\n      this.#op = \"and\";\n    } else if (operator && !this.#op && count === 1) {\n      this.#op = operator;\n    } else if (operator && this.#op && operator !== this.#op) {\n      throw Error(\n        \"FilterModel: use setOp to change the Filter combinator operator\",\n      );\n    }\n\n    const filterClauseModel = new FilterClauseModel({});\n    filterClauseModel.on(\"isValid\", this.onFilterClauseStatusChange);\n    filterClauseModel.on(\"filterClause\", this.onFilterClauseChange);\n    this.#children.push(filterClauseModel);\n    this.setIsValid(false);\n  }\n\n  addFilterClause(filterClause: Partial<FilterClause> = {}) {\n    const filterClauseModel = new FilterClauseModel(filterClause);\n    filterClauseModel.on(\"isValid\", this.onFilterClauseStatusChange);\n    filterClauseModel.on(\"filterClause\", this.onFilterClauseChange);\n    this.#children.push(filterClauseModel);\n  }\n\n  removeFilterClause(filterClause: FilterClauseModel) {\n    // We never allow the last clause to be removed\n    if (this.isMultiClauseFilter) {\n      const doomedFilter = this.filterClauses.indexOf(filterClause);\n      if (doomedFilter !== -1) {\n        this.filterClauses.splice(doomedFilter, 1);\n        // If we're down the the last clause, we are no longer multi-clause\n        if (this.filterClauses.length === 1) {\n          this.#op = undefined;\n        }\n        this.checkValidStatus();\n      }\n    }\n  }\n\n  checkValidStatus() {\n    const nowValid = isValidFilterModel(this);\n\n    if (nowValid !== this.#isValid) {\n      this.setIsValid(nowValid);\n    }\n  }\n\n  onFilterClauseChange: FilterChangeHandler = () => {\n    this.emit(\"filter\", this.asFilter(false), this.#isValid);\n  };\n\n  onFilterClauseStatusChange = (isValid: boolean) => {\n    if (!isValid && this.#isValid) {\n      this.setIsValid(false);\n    } else {\n      this.checkValidStatus();\n    }\n  };\n\n  getFilterClause(index: number) {\n    return this.#children[index];\n  }\n\n  get op() {\n    return this.#op;\n  }\n\n  setOp(op: FilterCombinatorOp) {\n    this.#op = op;\n    this.emit(\"filter\", this.asFilter(false), this.#isValid);\n  }\n\n  get filterClauses() {\n    return this.#children;\n  }\n\n  get isMultiClauseFilter() {\n    return this.#op === \"and\" || this.#op === \"or\";\n  }\n\n  asFilter(throwIfInvalid = true): Filter {\n    if (throwIfInvalid && !this.#isValid) {\n      throw Error(\"Invalid filter model cannot be returned as Filter\");\n    }\n    if (this.#op === \"and\" || this.#op === \"or\") {\n      return {\n        op: this.#op,\n        filters: this.#children.map((f) => f.asFilter(throwIfInvalid)),\n      } as MultiClauseFilter;\n    } else {\n      return this.#children[0].asFilter(throwIfInvalid);\n    }\n  }\n}\n"],"names":["_isValid","isMultiValueFilter","isSingleValueFilter","isMultiClauseFilter","EventEmitter"],"mappings":"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"}

package/cjs/custom-filters/CustomFilters.js

@@ -0,0 +1,108 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var vuuPopups = require('@vuu-ui/vuu-popups');
+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,
+  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,
+    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(
+        vuuPopups.Prompt,
+        {
+          ...promptProps,
+          PopupProps: {
+            anchorElement: rootRef,
+            offsetTop: 16,
+            placement: "below-center"
+          }
+        }
+      ) : 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

@@ -0,0 +1 @@
+{"version":3,"file":"CustomFilters.js","sources":["../../src/custom-filters/CustomFilters.tsx"],"sourcesContent":["import { Prompt } from \"@vuu-ui/vuu-popups\";\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      | \"onFilterDeleted\"\n      | \"onFilterRenamed\"\n      | \"onFilterStateChanged\"\n      | \"vuuTable\"\n    > {\n  columnDescriptors: ColumnDescriptor[];\n}\n\nexport const CustomFilters = ({\n  columnDescriptors,\n  defaultFilterState,\n  filterState,\n  onApplyFilter,\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    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 ? (\n          <Prompt\n            {...promptProps}\n            PopupProps={{\n              anchorElement: rootRef,\n              offsetTop: 16,\n              placement: \"below-center\",\n            }}\n          />\n        ) : 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

@@ -0,0 +1,35 @@
+'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

@@ -0,0 +1 @@
+{"version":3,"file":"filterBarFocusManagement.js","sources":["../../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

@@ -0,0 +1,260 @@
+'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,
+  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) => {
+      const query = filter ? vuuUtils.filterAsQuery(filter, { columnsByName }) : "";
+      onApplyFilter({ filter: query, filterStruct: filter });
+    };
+    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]);
+  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 {
+        confirmButtonLabel: "Remove",
+        icon: "warn-triangle",
+        onCancel: close,
+        onClose: close,
+        onConfirm: () => {
+          setPromptProps(null);
+          deleteConfirmed(filter);
+        },
+        text: `Are you sure you want to delete  ${filter.name}`,
+        title: "Remove Filter",
+        variant: "warn"
+      };
+    },
+    [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