@vuu-ui/vuu-filters 0.0.26

package/cjs/filter-bar/filterBarFocusManagement.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+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") {
+        console.log("to the button");
+        const filterBar = vuuUtils.queryClosest(el, ".vuuFilterBar");
+        const addButton = filterBar?.querySelector(
+          ".vuuFilterBar-add"
+        );
+        addButton?.focus();
+      }
+    }
+  } else {
+    const button = vuuUtils.queryClosest(el, ".vuuFilterBar-add");
+    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/filter-bar/filterBarFocusManagement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filterBarFocusManagement.js","sources":["../../src/filter-bar/filterBarFocusManagement.ts"],"sourcesContent":["import {\n  getElementByDataIndex,\n  getElementDataIndex,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\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        console.log(\"to the button\");\n        const filterBar = queryClosest(el, \".vuuFilterBar\");\n        const addButton = filterBar?.querySelector(\n          \".vuuFilterBar-add\"\n        ) as HTMLElement;\n        addButton?.focus();\n      }\n    }\n  } else {\n    const button = queryClosest(el, \".vuuFilterBar-add\");\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":";;;;AAMO,MAAM,kBAAqB,GAAA,CAChC,EACA,EAAA,SAAA,GAA2B,KACxB,KAAA;AACH,EAAM,MAAA,IAAA,GAAOA,qBAAa,CAAA,EAAA,EAAI,gBAAgB,CAAA,CAAA;AAC9C,EAAA,IAAI,IAAM,EAAA;AACR,IAAM,MAAA,KAAA,GAAQC,6BAAoB,IAAI,CAAA,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,CAAA;AACzD,MAAA,IAAI,MAAQ,EAAA;AACV,QAAA,MAAA,CAAO,KAAM,EAAA,CAAA;AAAA,OACf,MAAA,IAAW,cAAc,KAAO,EAAA;AAC9B,QAAA,OAAA,CAAQ,IAAI,eAAe,CAAA,CAAA;AAC3B,QAAM,MAAA,SAAA,GAAYF,qBAAa,CAAA,EAAA,EAAI,eAAe,CAAA,CAAA;AAClD,QAAA,MAAM,YAAY,SAAW,EAAA,aAAA;AAAA,UAC3B,mBAAA;AAAA,SACF,CAAA;AACA,QAAA,SAAA,EAAW,KAAM,EAAA,CAAA;AAAA,OACnB;AAAA,KACF;AAAA,GACK,MAAA;AACL,IAAM,MAAA,MAAA,GAASA,qBAAa,CAAA,EAAA,EAAI,mBAAmB,CAAA,CAAA;AACnD,IAAA,IAAI,MAAQ,EAAA;AACV,MAAM,MAAA,SAAA,GAAYA,qBAAa,CAAA,EAAA,EAAI,eAAe,CAAA,CAAA;AAClD,MAAA,MAAM,SAAS,SAAW,EAAA,aAAA;AAAA,QACxB,2BAAA;AAAA,OACF,CAAA;AACA,MAAA,MAAA,EAAQ,KAAM,EAAA,CAAA;AAAA,KAChB;AAAA,GACF;AACF;;;;"}

package/cjs/filter-bar/useApplyFilterOnChange.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var react = require('react');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+function useApplyFilterOnChange({
+  activeFilterIndex,
+  columnsByName,
+  filters,
+  onApplyFilter
+}) {
+  const applyFilter = react.useCallback(
+    (filter) => {
+      const query = filter ? vuuUtils.filterAsQuery(filter, { columnsByName }) : "";
+      onApplyFilter({ filter: query, filterStruct: filter });
+    },
+    [columnsByName, onApplyFilter]
+  );
+  react.useEffect(() => {
+    const activeFilters = activeFilterIndex.map((i) => filters[i]);
+    if (activeFilters.length === 0) {
+      applyFilter();
+    } else if (activeFilters.length === 1) {
+      const [filter] = activeFilters;
+      applyFilter(filter);
+    } else {
+      applyFilter({ op: "and", filters: activeFilters });
+    }
+  }, [activeFilterIndex, applyFilter, filters]);
+}
+
+exports.useApplyFilterOnChange = useApplyFilterOnChange;
+//# sourceMappingURL=useApplyFilterOnChange.js.map

package/cjs/filter-bar/useApplyFilterOnChange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useApplyFilterOnChange.js","sources":["../../src/filter-bar/useApplyFilterOnChange.ts"],"sourcesContent":["import { useCallback, useEffect } from \"react\";\nimport {\n  ColumnDescriptorsByName,\n  Filter,\n  FilterState,\n} from \"@vuu-ui/vuu-filter-types\";\nimport { DataSourceFilter } from \"@vuu-ui/vuu-data-types\";\nimport { filterAsQuery } from \"@vuu-ui/vuu-utils\";\n\ninterface ApplyFilterHookProps {\n  activeFilterIndex: FilterState[\"activeIndices\"];\n  columnsByName: ColumnDescriptorsByName;\n  filters: FilterState[\"filters\"];\n  onApplyFilter: (f: DataSourceFilter) => void;\n}\n\nexport function useApplyFilterOnChange({\n  activeFilterIndex,\n  columnsByName,\n  filters,\n  onApplyFilter,\n}: ApplyFilterHookProps) {\n  const applyFilter = useCallback(\n    (filter?: Filter) => {\n      const query = filter ? filterAsQuery(filter, { columnsByName }) : \"\";\n      onApplyFilter({ filter: query, filterStruct: filter });\n    },\n    [columnsByName, onApplyFilter]\n  );\n\n  useEffect(() => {\n    const activeFilters = activeFilterIndex.map((i) => filters[i]);\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, applyFilter, filters]);\n}\n"],"names":["useCallback","filterAsQuery","useEffect"],"mappings":";;;;;AAgBO,SAAS,sBAAuB,CAAA;AAAA,EACrC,iBAAA;AAAA,EACA,aAAA;AAAA,EACA,OAAA;AAAA,EACA,aAAA;AACF,CAAyB,EAAA;AACvB,EAAA,MAAM,WAAc,GAAAA,iBAAA;AAAA,IAClB,CAAC,MAAoB,KAAA;AACnB,MAAA,MAAM,QAAQ,MAAS,GAAAC,sBAAA,CAAc,QAAQ,EAAE,aAAA,EAAe,CAAI,GAAA,EAAA,CAAA;AAClE,MAAA,aAAA,CAAc,EAAE,MAAA,EAAQ,KAAO,EAAA,YAAA,EAAc,QAAQ,CAAA,CAAA;AAAA,KACvD;AAAA,IACA,CAAC,eAAe,aAAa,CAAA;AAAA,GAC/B,CAAA;AAEA,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,gBAAgB,iBAAkB,CAAA,GAAA,CAAI,CAAC,CAAM,KAAA,OAAA,CAAQ,CAAC,CAAC,CAAA,CAAA;AAC7D,IAAI,IAAA,aAAA,CAAc,WAAW,CAAG,EAAA;AAC9B,MAAY,WAAA,EAAA,CAAA;AAAA,KACd,MAAA,IAAW,aAAc,CAAA,MAAA,KAAW,CAAG,EAAA;AACrC,MAAM,MAAA,CAAC,MAAM,CAAI,GAAA,aAAA,CAAA;AACjB,MAAA,WAAA,CAAY,MAAM,CAAA,CAAA;AAAA,KACb,MAAA;AACL,MAAA,WAAA,CAAY,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,eAAe,CAAA,CAAA;AAAA,KACnD;AAAA,GACC,EAAA,CAAC,iBAAmB,EAAA,WAAA,EAAa,OAAO,CAAC,CAAA,CAAA;AAC9C;;;;"}

package/cjs/filter-bar/useFilterBar.js

@@ -0,0 +1,250 @@
+'use strict';
+
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+var useFilterState = require('./useFilterState.js');
+var useApplyFilterOnChange = require('./useApplyFilterOnChange.js');
+var filterBarFocusManagement = require('./filterBarFocusManagement.js');
+
+const useFilterBar = ({
+  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
+  });
+  useApplyFilterOnChange.useApplyFilterOnChange({
+    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 pillProps = {
+    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 {
+    activeFilterIndex,
+    addButtonProps,
+    columnsByName,
+    filters,
+    interactedFilterState,
+    onCancelEdit: handleCancelEdit,
+    onSave: filterSaveHandler,
+    pillProps,
+    promptProps
+  };
+};
+function columnDescriptorsByName(columns) {
+  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});
+}
+
+exports.useFilterBar = useFilterBar;
+//# sourceMappingURL=useFilterBar.js.map

package/cjs/filter-bar/useFilterBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilterBar.js","sources":["../../src/filter-bar/useFilterBar.ts"],"sourcesContent":["import { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { PromptProps } from \"@vuu-ui/vuu-popups\";\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  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { FilterPillProps } from \"../filter-pill\";\nimport { FilterMenuOptions } from \"../filter-pill-menu\";\nimport { FilterBarProps } from \"./FilterBar\";\nimport { useFilterState } from \"./useFilterState\";\nimport { useApplyFilterOnChange } from \"./useApplyFilterOnChange\";\nimport {\n  FilterEditCancelHandler,\n  FilterEditSaveHandler,\n} from \"../filter-editor\";\nimport { navigateToNextItem } from \"./filterBarFocusManagement\";\n\ntype InteractedFilterState = {\n  filter?: Filter;\n  index: number;\n  state: \"create\" | \"edit\" | \"rename\";\n};\n\nexport interface FilterBarHookProps\n  extends Pick<\n    FilterBarProps,\n    | \"columnDescriptors\"\n    | \"defaultFilterState\"\n    | \"filterState\"\n    | \"onApplyFilter\"\n    | \"onFilterDeleted\"\n    | \"onFilterRenamed\"\n    | \"onFilterStateChanged\"\n  > {\n  containerRef: RefObject<HTMLDivElement>;\n}\n\nexport const useFilterBar = ({\n  columnDescriptors,\n  containerRef,\n  defaultFilterState,\n  filterState,\n  onApplyFilter,\n  onFilterDeleted,\n  onFilterRenamed,\n  onFilterStateChanged,\n}: FilterBarHookProps) => {\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  //TODO do we need it ?\n  useApplyFilterOnChange({\n    activeFilterIndex,\n    columnsByName,\n    filters,\n    onApplyFilter,\n  });\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        confirmButtonLabel: \"Remove\",\n        icon: \"warn-triangle\",\n        onCancel: close,\n        onClose: close,\n        onConfirm: () => {\n          setPromptProps(null);\n          deleteConfirmed(filter);\n        },\n        text: `Are you sure you want to delete  ${filter.name}`,\n        title: \"Remove Filter\",\n        variant: \"warn\",\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  // const handleBeginEditFilterName = useCallback((filter: Filter) => {\n  //   editingFilterRef.current = filter;\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 pillProps: 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    activeFilterIndex,\n    addButtonProps,\n    columnsByName,\n    filters,\n    interactedFilterState,\n    onCancelEdit: handleCancelEdit,\n    onSave: filterSaveHandler,\n    pillProps,\n    promptProps,\n  };\n};\n\nfunction columnDescriptorsByName(\n  columns: ColumnDescriptor[]\n): ColumnDescriptorsByName {\n  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["useRef","useState","NullEditAPI","useMemo","useFilterState","useApplyFilterOnChange","useCallback","navigateToNextItem","queryClosest","getElementDataIndex"],"mappings":"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"}

package/cjs/filter-bar/useFilterState.js

@@ -0,0 +1,150 @@
+'use strict';
+
+var react = require('react');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+
+const getActiveIndices = (indices, toggledIndex, preserveExisting) => {
+  const isActive = indices.includes(toggledIndex);
+  if (isActive) {
+    if (preserveExisting) {
+      return indices.filter((i) => i !== toggledIndex);
+    } else {
+      return [];
+    }
+  } else {
+    if (preserveExisting) {
+      return indices.concat(toggledIndex);
+    } else {
+      return [toggledIndex];
+    }
+  }
+};
+const useFilterState = ({
+  defaultFilterState,
+  onFilterDeleted,
+  onFilterRenamed,
+  onFilterStateChanged,
+  filterState: filterStateProp
+}) => {
+  const [filterState, setFilterState] = vuuUiControls.useControlled({
+    controlled: filterStateProp,
+    default: defaultFilterState ?? { filters: [], activeIndices: [] },
+    name: "useFilterState",
+    state: "FilterState"
+  });
+  const handleFilterStateChange = react.useCallback(
+    (s) => {
+      setFilterState(s);
+      onFilterStateChanged?.(s);
+    },
+    [onFilterStateChanged, setFilterState]
+  );
+  const handleAddFilter = react.useCallback(
+    (filter) => {
+      const index = filterState.filters.length;
+      const newFilters = filterState.filters.concat(filter);
+      const newIndices = appendIfNotPresent(filterState.activeIndices, index);
+      handleFilterStateChange({
+        filters: newFilters,
+        activeIndices: newIndices
+      });
+      return index;
+    },
+    [filterState, handleFilterStateChange]
+  );
+  const handleDeleteFilter = react.useCallback(
+    (filter) => {
+      let index = -1;
+      const newFilters = filterState.filters.filter((f, i) => {
+        if (f !== filter) {
+          return true;
+        } else {
+          index = i;
+          return false;
+        }
+      });
+      const newIndices = removeIndexAndDecrementLarger(
+        filterState.activeIndices,
+        index
+      );
+      handleFilterStateChange({
+        filters: newFilters,
+        activeIndices: newIndices
+      });
+      onFilterDeleted?.(filter);
+      return index;
+    },
+    [
+      filterState.filters,
+      filterState.activeIndices,
+      handleFilterStateChange,
+      onFilterDeleted
+    ]
+  );
+  const handleRenameFilter = react.useCallback(
+    (filter, name) => {
+      let index = -1;
+      const newFilters = filterState.filters.map((f, i) => {
+        if (f === filter) {
+          index = i;
+          return { ...filter, name };
+        } else {
+          return f;
+        }
+      });
+      handleFilterStateChange({ ...filterState, filters: newFilters });
+      onFilterRenamed?.(filter, name);
+      return index;
+    },
+    [filterState, handleFilterStateChange, onFilterRenamed]
+  );
+  const handleChangeFilter = react.useCallback(
+    (oldFilter, newFilter) => {
+      let index = -1;
+      const newFilters = filterState.filters.map((f, i) => {
+        if (f === oldFilter) {
+          index = i;
+          return newFilter;
+        } else {
+          return f;
+        }
+      });
+      handleFilterStateChange({ ...filterState, filters: newFilters });
+      return index;
+    },
+    [filterState, handleFilterStateChange]
+  );
+  const handleToggleFilterActive = react.useCallback(
+    (filterIndex, preserveRemainingFilters = false) => {
+      handleFilterStateChange({
+        ...filterState,
+        activeIndices: getActiveIndices(
+          filterState.activeIndices,
+          filterIndex,
+          preserveRemainingFilters
+        )
+      });
+    },
+    [filterState, handleFilterStateChange]
+  );
+  return {
+    activeFilterIndex: filterState.activeIndices,
+    filters: filterState.filters,
+    onToggleFilterActive: handleToggleFilterActive,
+    onAddFilter: handleAddFilter,
+    onChangeFilter: handleChangeFilter,
+    onDeleteFilter: handleDeleteFilter,
+    onRenameFilter: handleRenameFilter
+  };
+};
+const appendIfNotPresent = (ns, n) => ns.includes(n) ? ns : ns.concat(n);
+const removeIndexAndDecrementLarger = (indices, idxToRemove) => {
+  return indices.reduce((res, i) => {
+    if (i === idxToRemove)
+      return res;
+    return res.concat(i > idxToRemove ? i - 1 : i);
+  }, []);
+};
+
+exports.useFilterState = useFilterState;
+//# sourceMappingURL=useFilterState.js.map

package/cjs/filter-bar/useFilterState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilterState.js","sources":["../../src/filter-bar/useFilterState.ts"],"sourcesContent":["import { useCallback } from \"react\";\nimport { Filter, FilterState } from \"@vuu-ui/vuu-filter-types\";\nimport { useControlled } from \"@vuu-ui/vuu-ui-controls\";\n\nexport interface FiltersHookProps {\n  defaultFilterState?: FilterState;\n  filterState?: FilterState;\n  onFilterDeleted?: (filter: Filter) => void;\n  onFilterRenamed?: (filter: Filter, name: string) => void;\n  onFilterStateChanged?: (s: FilterState) => void;\n}\n\nconst getActiveIndices = (\n  indices: number[],\n  toggledIndex: number,\n  preserveExisting: boolean\n) => {\n  const isActive = indices.includes(toggledIndex);\n  if (isActive) {\n    if (preserveExisting) {\n      return indices.filter((i) => i !== toggledIndex);\n    } else {\n      return [];\n    }\n  } else {\n    if (preserveExisting) {\n      return indices.concat(toggledIndex);\n    } else {\n      return [toggledIndex];\n    }\n  }\n};\n\nexport const useFilterState = ({\n  defaultFilterState,\n  onFilterDeleted,\n  onFilterRenamed,\n  onFilterStateChanged,\n  filterState: filterStateProp,\n}: FiltersHookProps) => {\n  const [filterState, setFilterState] = useControlled<FilterState>({\n    controlled: filterStateProp,\n    default: defaultFilterState ?? { filters: [], activeIndices: [] },\n    name: \"useFilterState\",\n    state: \"FilterState\",\n  });\n\n  const handleFilterStateChange = useCallback(\n    (s: FilterState) => {\n      setFilterState(s);\n      onFilterStateChanged?.(s);\n    },\n    [onFilterStateChanged, setFilterState]\n  );\n\n  const handleAddFilter = useCallback(\n    (filter: Filter) => {\n      const index = filterState.filters.length;\n      const newFilters = filterState.filters.concat(filter);\n      const newIndices = appendIfNotPresent(filterState.activeIndices, index);\n      handleFilterStateChange({\n        filters: newFilters,\n        activeIndices: newIndices,\n      });\n      return index;\n    },\n    [filterState, handleFilterStateChange]\n  );\n\n  const handleDeleteFilter = useCallback(\n    (filter: Filter) => {\n      let index = -1;\n      const newFilters = filterState.filters.filter((f, i) => {\n        if (f !== filter) {\n          return true;\n        } else {\n          index = i;\n          return false;\n        }\n      });\n\n      const newIndices = removeIndexAndDecrementLarger(\n        filterState.activeIndices,\n        index\n      );\n\n      handleFilterStateChange({\n        filters: newFilters,\n        activeIndices: newIndices,\n      });\n      onFilterDeleted?.(filter);\n      return index;\n    },\n    [\n      filterState.filters,\n      filterState.activeIndices,\n      handleFilterStateChange,\n      onFilterDeleted,\n    ]\n  );\n\n  const handleRenameFilter = useCallback(\n    (filter: Filter, name: string) => {\n      let index = -1;\n      const newFilters = filterState.filters.map((f, i) => {\n        if (f === filter) {\n          index = i;\n          return { ...filter, name };\n        } else {\n          return f;\n        }\n      });\n      handleFilterStateChange({ ...filterState, filters: newFilters });\n      onFilterRenamed?.(filter, name);\n\n      return index;\n    },\n    [filterState, handleFilterStateChange, onFilterRenamed]\n  );\n\n  const handleChangeFilter = useCallback(\n    (oldFilter: Filter, newFilter: Filter) => {\n      let index = -1;\n      const newFilters = filterState.filters.map((f, i) => {\n        if (f === oldFilter) {\n          index = i;\n          return newFilter;\n        } else {\n          return f;\n        }\n      });\n      handleFilterStateChange({ ...filterState, filters: newFilters });\n\n      return index;\n    },\n    [filterState, handleFilterStateChange]\n  );\n\n  const handleToggleFilterActive = useCallback(\n    (filterIndex: number, preserveRemainingFilters = false) => {\n      handleFilterStateChange({\n        ...filterState,\n        activeIndices: getActiveIndices(\n          filterState.activeIndices,\n          filterIndex,\n          preserveRemainingFilters\n        ),\n      });\n    },\n    [filterState, handleFilterStateChange]\n  );\n\n  return {\n    activeFilterIndex: filterState.activeIndices,\n    filters: filterState.filters,\n    onToggleFilterActive: handleToggleFilterActive,\n    onAddFilter: handleAddFilter,\n    onChangeFilter: handleChangeFilter,\n    onDeleteFilter: handleDeleteFilter,\n    onRenameFilter: handleRenameFilter,\n  };\n};\n\nconst appendIfNotPresent = (ns: number[], n: number) =>\n  ns.includes(n) ? ns : ns.concat(n);\n\nconst removeIndexAndDecrementLarger = (\n  indices: number[],\n  idxToRemove: number\n) => {\n  return indices.reduce<number[]>((res, i) => {\n    if (i === idxToRemove) return res;\n    return res.concat(i > idxToRemove ? i - 1 : i);\n  }, []);\n};\n"],"names":["useControlled","useCallback"],"mappings":"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"}

package/cjs/filter-clause/ExpandoCombobox.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var expandoBoxCss = ".vuuExpandoCombobox {\n  --expando-combobox-height: var(--vuuExpandoCombobox-height, var(--salt-size-base));\n  --expando-combobox-fontSize: var(--vuuExpandoCombobox-fontSize, 12px);\n\n  --saltInput-outline: none;\n  --saltInput-fontSize: var(--expando-combobox-fontSize);\n  --saltInput-height: var(--expando-combobox-height);\n  --saltInput-minWidth: 4px;\n\n  display: inline-flex;\n  flex-direction: column;\n  height: var(--expando-combobox-height);\n  min-width: 4px;\n  padding: 0;\n}\n\n.vuuExpandoCombobox .saltInput {\n  background-color: transparent;\n  position: absolute;\n}\n\n.vuuExpandoCombobox .vuuDropdown {\n  height: 100%;\n}\n\n/** double up the selector just to increase specificity, won't need when we use cascade layers */\n.vuuExpandoCombobox-Input.saltInput {\n  border: none;\n  left: 0px;\n  margin: 0;\n  min-height: 100%;\n  padding: 0;\n  right: 0px;\n  width: auto;\n}\n\n.vuuExpandoCombobox .saltInput-input {\n  border: none;\n  box-sizing: content-box;\n  display: block;\n  flex: 1;\n  font: inherit;\n  margin: 0;\n  min-width: 0;\n  outline: none;\n  padding: 0;\n}\n\n.vuuExpandoCombobox:before {\n  content: attr(data-text);\n  display: block;\n  font-size: var(--expando-combobox-fontSize);\n  height: 0px;\n  overflow: hidden;\n  /* visibility: hidden; */\n  white-space: pre-wrap;\n  /* position: absolute; */\n}\n";
+
+module.exports = expandoBoxCss;
+//# sourceMappingURL=ExpandoCombobox.css.js.map

package/cjs/filter-clause/ExpandoCombobox.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandoCombobox.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}