@vuu-ui/vuu-filters 0.11.3 → 0.12.0

package/cjs/custom-filters/useCustomFilters.js

@@ -133,7 +133,7 @@ const useCustomFilters = ({
     [focusFilterPill, interactedFilterState, onRenameFilter]
   );
   const handlePillMenuAction = react.useCallback(
-    ({ menuId, options }) => {
+    (menuId, options) => {
       switch (menuId) {
         case "delete-filter": {
           const { filter } = options;

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

@@ -1 +1 @@
-{"version":3,"file":"useCustomFilters.js","sources":["../../src/custom-filters/useCustomFilters.ts"],"sourcesContent":["import { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { PromptProps } from \"@vuu-ui/vuu-popups\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  EditableLabelProps,\n  EditAPI,\n  NullEditAPI,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  filterAsQuery,\n  getElementDataIndex,\n  queryClosest,\n} 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\";\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    | \"onFilterDeleted\"\n    | \"onFilterRenamed\"\n    | \"onFilterStateChanged\"\n  > {\n  containerRef: RefObject<HTMLDivElement>;\n}\n\nexport const useCustomFilters = ({\n  columnDescriptors,\n  containerRef,\n  defaultFilterState,\n  filterState,\n  onApplyFilter,\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      const query = filter ? filterAsQuery(filter, { columnsByName }) : \"\";\n      onApplyFilter({ filter: query, filterStruct: filter });\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]);\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  // 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: ColumnDescriptor[],\n): ColumnDescriptorsByName {\n  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["useRef","useState","NullEditAPI","useMemo","useFilterState","useEffect","filterAsQuery","useCallback","navigateToNextItem","queryClosest","getElementDataIndex","FilterPillProps"],"mappings":"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"}
+{"version":3,"file":"useCustomFilters.js","sources":["../../src/custom-filters/useCustomFilters.ts"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { PromptProps } from \"@vuu-ui/vuu-popups\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  EditableLabelProps,\n  EditAPI,\n  NullEditAPI,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  filterAsQuery,\n  getElementDataIndex,\n  queryClosest,\n} 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    | \"onFilterDeleted\"\n    | \"onFilterRenamed\"\n    | \"onFilterStateChanged\"\n  > {\n  containerRef: RefObject<HTMLDivElement>;\n}\n\nexport const useCustomFilters = ({\n  columnDescriptors,\n  containerRef,\n  defaultFilterState,\n  filterState,\n  onApplyFilter,\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      const query = filter ? filterAsQuery(filter, { columnsByName }) : \"\";\n      onApplyFilter({ filter: query, filterStruct: filter });\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]);\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  // 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: ColumnDescriptor[],\n): ColumnDescriptorsByName {\n  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["useRef","useState","NullEditAPI","useMemo","useFilterState","useEffect","filterAsQuery","useCallback","navigateToNextItem","queryClosest","getElementDataIndex","FilterPillProps"],"mappings":"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"}

package/cjs/filter-editor/useFilterEditor.js

@@ -27,13 +27,13 @@ const useFilterEditor = ({
   const saveButtonMenuBuilder = react.useCallback((_2, options) => {
     switch (clauseCombinatorRef.current) {
       case "and":
-        return [{ action: "and-clause", label: "AND", options }];
+        return [{ id: "and-clause", label: "AND", options }];
       case "or":
-        return [{ action: "or-clause", label: "OR", options }];
+        return [{ id: "or-clause", label: "OR", options }];
       default:
         return [
-          { action: "and-clause", label: "AND", options },
-          { action: "or-clause", label: "OR", options }
+          { id: "and-clause", label: "AND", options },
+          { id: "or-clause", label: "OR", options }
         ];
     }
   }, []);
@@ -89,7 +89,7 @@ const useFilterEditor = ({
     [filter, filterModel, onCancel]
   );
   const invokeMenuAction = react.useCallback(
-    ({ menuId }) => {
+    (menuId) => {
       switch (menuId) {
         case "save": {
           const savedFilter = filterModel.asFilter();
@@ -144,11 +144,7 @@ const useFilterEditor = ({
   const handleClickSaveButton = react.useMemo(
     () => () => (
       // onSave() ?
-      invokeMenuAction({
-        menuId: "save",
-        options: {},
-        type: "menu-action"
-      })
+      invokeMenuAction("save")
     ),
     [invokeMenuAction]
   );

package/cjs/filter-editor/useFilterEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFilterEditor.js","sources":["../../src/filter-editor/useFilterEditor.ts"],"sourcesContent":["import type { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-data-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport type {\n  ColumnDescriptorsByName,\n  FilterCombinatorOp,\n} from \"@vuu-ui/vuu-filter-types\";\nimport {\n  KeyboardEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  focusFilterClauseField,\n  focusFirstClauseIfAllClausesValid,\n  focusLastClauseValue,\n  getFocusedFieldDetails,\n  navigateToNextFilterClause,\n} from \"../filter-clause/filterClauseFocusManagement\";\nimport { FilterEditorProps } from \"./FilterEditor\";\nimport {\n  FilterChangeHandler,\n  FilterModel,\n  FilterStatusChangeHandler,\n} from \"../FilterModel\";\nimport { FilterClauseCancelHandler } from \"../filter-clause\";\nimport { FilterClauseCombinatorChangeHandler } from \"./FilterClauseCombinator\";\n\nexport interface FilterEditorHookProps\n  extends Pick<\n    FilterEditorProps,\n    \"columnDescriptors\" | \"filter\" | \"onCancel\" | \"onSave\"\n  > {\n  label?: string;\n}\n\nexport const useFilterEditor = ({\n  columnDescriptors,\n  filter,\n  onCancel,\n  onSave,\n}: FilterEditorHookProps) => {\n  const filterModel = useMemo(() => {\n    return new FilterModel(filter);\n  }, [filter]);\n\n  const [_, forceRefresh] = useState({});\n  const [isValid, setIsValid] = useState(filterModel.isValid);\n  const clauseCombinatorRef = useRef<FilterCombinatorOp | undefined>(undefined);\n  const saveButtonRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const setContainer = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    containerRef.current = el;\n    if (el) {\n      // If there is a new empty clause it will focus itself, otw ...\n      focusFirstClauseIfAllClausesValid(el);\n    }\n  }, []);\n\n  const saveButtonMenuBuilder: MenuBuilder = useCallback((_, options) => {\n    switch (clauseCombinatorRef.current) {\n      case \"and\":\n        return [{ action: \"and-clause\", label: \"AND\", options }];\n      case \"or\":\n        return [{ action: \"or-clause\", label: \"OR\", options }];\n      default:\n        return [\n          { action: \"and-clause\", label: \"AND\", options },\n          { action: \"or-clause\", label: \"OR\", options },\n        ];\n    }\n  }, []);\n\n  const columnsByName = useMemo(\n    () => columnDescriptorsByName(columnDescriptors),\n    [columnDescriptors],\n  );\n\n  const isLastFilterClause = useCallback(\n    (index?: number) =>\n      index !== undefined && filterModel.filterClauses.length === index + 1,\n    [filterModel],\n  );\n\n  const focusSaveButton = useCallback(() => {\n    requestAnimationFrame(() => {\n      saveButtonRef.current?.focus();\n    });\n  }, []);\n\n  useMemo(() => {\n    const setValid: FilterStatusChangeHandler = (isValid) => {\n      // bind the model state change to React state to ensure render\n      setIsValid(isValid);\n    };\n\n    const valueChanged: FilterChangeHandler = (_filter, isValid) => {\n      if (isValid) {\n        const [filterClauseIndex, fieldName] = getFocusedFieldDetails();\n        if (fieldName === \"value\" && isLastFilterClause(filterClauseIndex)) {\n          focusSaveButton();\n        }\n      }\n    };\n    filterModel.on(\"isValid\", setValid);\n    filterModel.on(\"filter\", valueChanged);\n  }, [filterModel, focusSaveButton, isLastFilterClause]);\n\n  const handleCancelFilterClause = useCallback<FilterClauseCancelHandler>(\n    (filterClause, reason) => {\n      if (reason === \"Backspace\") {\n        const indexOfFilterClause =\n          filterModel.filterClauses.indexOf(filterClause);\n        filterModel.removeFilterClause(filterClause);\n        forceRefresh({});\n        if (reason === \"Backspace\" && containerRef.current) {\n          if (indexOfFilterClause > 0) {\n            focusFilterClauseField(\n              containerRef.current,\n              indexOfFilterClause - 1,\n            );\n          }\n        }\n      } else {\n        console.log(\n          `cancel because of Escape valid clause ${filterClause.isValid}`,\n        );\n        onCancel(filter);\n      }\n    },\n    [filter, filterModel, onCancel],\n  );\n\n  const invokeMenuAction = useCallback<MenuActionHandler>(\n    ({ menuId }) => {\n      switch (menuId) {\n        case \"save\": {\n          const savedFilter = filterModel.asFilter();\n          const newOrUpdatedFilter = filter?.name\n            ? {\n                ...savedFilter,\n                name: filter.name,\n              }\n            : savedFilter;\n          onSave(newOrUpdatedFilter);\n          return true;\n        }\n        case \"and-clause\": {\n          clauseCombinatorRef.current = \"and\";\n          filterModel.addNewFilterClause(\"and\");\n          return true;\n        }\n        case \"or-clause\":\n          clauseCombinatorRef.current = \"or\";\n          filterModel.addNewFilterClause(\"or\");\n          return true;\n        default:\n          return false;\n      }\n    },\n    [filter?.name, filterModel, onSave],\n  );\n\n  const handleKeyDownSaveButton = useCallback<KeyboardEventHandler>(\n    (evt) => {\n      if (evt.key === \"Tab\" && evt.shiftKey) {\n        evt.preventDefault();\n        const target = evt.target as HTMLElement;\n        const filterEditor = target.closest(\".vuuFilterEditor\") as HTMLElement;\n        focusLastClauseValue(filterEditor);\n      } else if (evt.key === \"Escape\") {\n        onCancel(filter);\n      }\n    },\n    [filter, onCancel],\n  );\n\n  const handleKeyDownNavigationFromCombinator = useCallback<\n    KeyboardEventHandler<HTMLElement>\n  >((evt) => {\n    const { target, key, shiftKey } = evt;\n    if (key === \"ArrowLeft\") {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"bwd\");\n    } else if (key === \"ArrowRight\") {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"fwd\");\n    } else if (key === \"Tab\" && shiftKey) {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"bwd\");\n    }\n  }, []);\n\n  const handleClickSaveButton = useMemo(\n    () => () =>\n      // onSave() ?\n      invokeMenuAction({\n        menuId: \"save\",\n        options: {},\n        type: \"menu-action\",\n      }),\n    [invokeMenuAction],\n  );\n\n  const saveButtonProps = {\n    PopupMenuProps: {\n      icon: \"more-vert\",\n      menuBuilder: saveButtonMenuBuilder,\n      menuActionHandler: invokeMenuAction,\n      menuLocation: \"filter-save-menu\",\n    },\n    onClick: handleClickSaveButton,\n    onKeyDown: handleKeyDownSaveButton,\n  };\n\n  const onChangeFilterCombinator =\n    useCallback<FilterClauseCombinatorChangeHandler>(\n      (op) => {\n        filterModel.setOp(op);\n        clauseCombinatorRef.current = op;\n        forceRefresh({});\n      },\n      [filterModel],\n    );\n\n  const handleCancelFilterEdit = useCallback(() => {\n    onCancel(filter);\n  }, [filter, onCancel]);\n\n  return {\n    columnsByName,\n    filterModel,\n    focusSaveButton,\n    isValid,\n    onCancelFilterClause: handleCancelFilterClause,\n    onCancelFilterEdit: handleCancelFilterEdit,\n    onChangeFilterCombinator,\n    onKeyDownCombinator: handleKeyDownNavigationFromCombinator,\n    saveButtonProps,\n    saveButtonRef,\n    setContainer,\n  };\n};\n\n// Duplicated in useFilterBar\nfunction columnDescriptorsByName(\n  columns: ColumnDescriptor[],\n): ColumnDescriptorsByName {\n  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["useMemo","FilterModel","useState","useRef","useCallback","focusFirstClauseIfAllClausesValid","_","isValid","getFocusedFieldDetails","focusFilterClauseField","focusLastClauseValue","navigateToNextFilterClause"],"mappings":"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"}
+{"version":3,"file":"useFilterEditor.js","sources":["../../src/filter-editor/useFilterEditor.ts"],"sourcesContent":["import type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport type {\n  ColumnDescriptorsByName,\n  FilterCombinatorOp,\n} from \"@vuu-ui/vuu-filter-types\";\nimport {\n  KeyboardEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  focusFilterClauseField,\n  focusFirstClauseIfAllClausesValid,\n  focusLastClauseValue,\n  getFocusedFieldDetails,\n  navigateToNextFilterClause,\n} from \"../filter-clause/filterClauseFocusManagement\";\nimport { FilterEditorProps } from \"./FilterEditor\";\nimport {\n  FilterChangeHandler,\n  FilterModel,\n  FilterStatusChangeHandler,\n} from \"../FilterModel\";\nimport { FilterClauseCancelHandler } from \"../filter-clause\";\nimport { FilterClauseCombinatorChangeHandler } from \"./FilterClauseCombinator\";\nimport { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface FilterEditorHookProps\n  extends Pick<\n    FilterEditorProps,\n    \"columnDescriptors\" | \"filter\" | \"onCancel\" | \"onSave\"\n  > {\n  label?: string;\n}\n\nexport const useFilterEditor = ({\n  columnDescriptors,\n  filter,\n  onCancel,\n  onSave,\n}: FilterEditorHookProps) => {\n  const filterModel = useMemo(() => {\n    return new FilterModel(filter);\n  }, [filter]);\n\n  const [_, forceRefresh] = useState({});\n  const [isValid, setIsValid] = useState(filterModel.isValid);\n  const clauseCombinatorRef = useRef<FilterCombinatorOp | undefined>(undefined);\n  const saveButtonRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const setContainer = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    containerRef.current = el;\n    if (el) {\n      // If there is a new empty clause it will focus itself, otw ...\n      focusFirstClauseIfAllClausesValid(el);\n    }\n  }, []);\n\n  const saveButtonMenuBuilder: MenuBuilder = useCallback((_, options) => {\n    switch (clauseCombinatorRef.current) {\n      case \"and\":\n        return [{ id: \"and-clause\", label: \"AND\", options }];\n      case \"or\":\n        return [{ id: \"or-clause\", label: \"OR\", options }];\n      default:\n        return [\n          { id: \"and-clause\", label: \"AND\", options },\n          { id: \"or-clause\", label: \"OR\", options },\n        ];\n    }\n  }, []);\n\n  const columnsByName = useMemo(\n    () => columnDescriptorsByName(columnDescriptors),\n    [columnDescriptors],\n  );\n\n  const isLastFilterClause = useCallback(\n    (index?: number) =>\n      index !== undefined && filterModel.filterClauses.length === index + 1,\n    [filterModel],\n  );\n\n  const focusSaveButton = useCallback(() => {\n    requestAnimationFrame(() => {\n      saveButtonRef.current?.focus();\n    });\n  }, []);\n\n  useMemo(() => {\n    const setValid: FilterStatusChangeHandler = (isValid) => {\n      // bind the model state change to React state to ensure render\n      setIsValid(isValid);\n    };\n\n    const valueChanged: FilterChangeHandler = (_filter, isValid) => {\n      if (isValid) {\n        const [filterClauseIndex, fieldName] = getFocusedFieldDetails();\n        if (fieldName === \"value\" && isLastFilterClause(filterClauseIndex)) {\n          focusSaveButton();\n        }\n      }\n    };\n    filterModel.on(\"isValid\", setValid);\n    filterModel.on(\"filter\", valueChanged);\n  }, [filterModel, focusSaveButton, isLastFilterClause]);\n\n  const handleCancelFilterClause = useCallback<FilterClauseCancelHandler>(\n    (filterClause, reason) => {\n      if (reason === \"Backspace\") {\n        const indexOfFilterClause =\n          filterModel.filterClauses.indexOf(filterClause);\n        filterModel.removeFilterClause(filterClause);\n        forceRefresh({});\n        if (reason === \"Backspace\" && containerRef.current) {\n          if (indexOfFilterClause > 0) {\n            focusFilterClauseField(\n              containerRef.current,\n              indexOfFilterClause - 1,\n            );\n          }\n        }\n      } else {\n        console.log(\n          `cancel because of Escape valid clause ${filterClause.isValid}`,\n        );\n        onCancel(filter);\n      }\n    },\n    [filter, filterModel, onCancel],\n  );\n\n  const invokeMenuAction = useCallback<MenuActionHandler>(\n    (menuId) => {\n      switch (menuId) {\n        case \"save\": {\n          const savedFilter = filterModel.asFilter();\n          const newOrUpdatedFilter = filter?.name\n            ? {\n                ...savedFilter,\n                name: filter.name,\n              }\n            : savedFilter;\n          onSave(newOrUpdatedFilter);\n          return true;\n        }\n        case \"and-clause\": {\n          clauseCombinatorRef.current = \"and\";\n          filterModel.addNewFilterClause(\"and\");\n          return true;\n        }\n        case \"or-clause\":\n          clauseCombinatorRef.current = \"or\";\n          filterModel.addNewFilterClause(\"or\");\n          return true;\n        default:\n          return false;\n      }\n    },\n    [filter?.name, filterModel, onSave],\n  );\n\n  const handleKeyDownSaveButton = useCallback<KeyboardEventHandler>(\n    (evt) => {\n      if (evt.key === \"Tab\" && evt.shiftKey) {\n        evt.preventDefault();\n        const target = evt.target as HTMLElement;\n        const filterEditor = target.closest(\".vuuFilterEditor\") as HTMLElement;\n        focusLastClauseValue(filterEditor);\n      } else if (evt.key === \"Escape\") {\n        onCancel(filter);\n      }\n    },\n    [filter, onCancel],\n  );\n\n  const handleKeyDownNavigationFromCombinator = useCallback<\n    KeyboardEventHandler<HTMLElement>\n  >((evt) => {\n    const { target, key, shiftKey } = evt;\n    if (key === \"ArrowLeft\") {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"bwd\");\n    } else if (key === \"ArrowRight\") {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"fwd\");\n    } else if (key === \"Tab\" && shiftKey) {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"bwd\");\n    }\n  }, []);\n\n  const handleClickSaveButton = useMemo(\n    () => () =>\n      // onSave() ?\n      invokeMenuAction(\"save\"),\n    [invokeMenuAction],\n  );\n\n  const saveButtonProps = {\n    PopupMenuProps: {\n      icon: \"more-vert\",\n      menuBuilder: saveButtonMenuBuilder,\n      menuActionHandler: invokeMenuAction,\n      menuLocation: \"filter-save-menu\",\n    },\n    onClick: handleClickSaveButton,\n    onKeyDown: handleKeyDownSaveButton,\n  };\n\n  const onChangeFilterCombinator =\n    useCallback<FilterClauseCombinatorChangeHandler>(\n      (op) => {\n        filterModel.setOp(op);\n        clauseCombinatorRef.current = op;\n        forceRefresh({});\n      },\n      [filterModel],\n    );\n\n  const handleCancelFilterEdit = useCallback(() => {\n    onCancel(filter);\n  }, [filter, onCancel]);\n\n  return {\n    columnsByName,\n    filterModel,\n    focusSaveButton,\n    isValid,\n    onCancelFilterClause: handleCancelFilterClause,\n    onCancelFilterEdit: handleCancelFilterEdit,\n    onChangeFilterCombinator,\n    onKeyDownCombinator: handleKeyDownNavigationFromCombinator,\n    saveButtonProps,\n    saveButtonRef,\n    setContainer,\n  };\n};\n\n// Duplicated in useFilterBar\nfunction columnDescriptorsByName(\n  columns: ColumnDescriptor[],\n): ColumnDescriptorsByName {\n  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["useMemo","FilterModel","useState","useRef","useCallback","focusFirstClauseIfAllClausesValid","_","isValid","getFocusedFieldDetails","focusFilterClauseField","focusLastClauseValue","navigateToNextFilterClause"],"mappings":"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"}

package/cjs/filter-pill/FilterPill.js

@@ -9,7 +9,7 @@ var window = require('@salt-ds/window');
 var cx = require('clsx');
 var react = require('react');
 var filterAsReactNode = require('./filterAsReactNode.js');
-var FilterPillMenuOptions = require('./FilterPillMenuOptions.js');
+var FilterPillMenuOptions = require('../filter-pill-menu/FilterPillMenuOptions.js');
 var getFilterLabel = require('./getFilterLabel.js');
 var getFilterTooltipText = require('./getFilterTooltipText.js');
 var FilterPill$1 = require('./FilterPill.css.js');

package/cjs/filter-pill/FilterPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPill.js","sources":["../../src/filter-pill/FilterPill.tsx"],"sourcesContent":["import {\n  ContextMenuItemDescriptor,\n  MenuActionHandler,\n} from \"@vuu-ui/vuu-data-types\";\nimport { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport {\n  PopupCloseCallback,\n  PopupMenuProps,\n  Tooltip,\n  useTooltip,\n} from \"@vuu-ui/vuu-popups\";\nimport {\n  EditableLabel,\n  EditableLabelProps,\n  ExitEditModeHandler,\n  SplitStateButton,\n  SplitStateButtonProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { FocusEventHandler, useCallback, useMemo, useRef } from \"react\";\nimport { filterAsReactNode } from \"./filterAsReactNode\";\nimport {\n  closeCommand,\n  deleteCommand,\n  editCommand,\n  MenuOptions,\n  renameCommand,\n} from \"./FilterPillMenuOptions\";\nimport { getFilterLabel } from \"./getFilterLabel\";\nimport { getFilterTooltipText } from \"./getFilterTooltipText\";\n\nimport filterPillCss from \"./FilterPill.css\";\nimport { ButtonProps } from \"@salt-ds/core\";\n\nconst classBase = \"vuuFilterPill\";\n\nexport interface FilterPillProps\n  extends SplitStateButtonProps,\n    Pick<\n      Partial<EditableLabelProps>,\n      \"editing\" | \"editLabelApiRef\" | \"onExitEditMode\"\n    > {\n  allowClose?: boolean;\n  allowDelete?: boolean;\n  allowEdit?: boolean;\n  allowRename?: boolean;\n\n  columnsByName?: ColumnDescriptorsByName;\n  editable?: boolean;\n  filter: Filter;\n  index?: number;\n  onBeginEdit?: (filter: Filter) => void;\n  onMenuAction?: MenuActionHandler;\n}\n\nexport const FilterPill = ({\n  allowClose = true,\n  allowDelete = true,\n  allowEdit = true,\n  allowRename = true,\n  className: classNameProp,\n  columnsByName,\n  editable = true,\n  editing = false,\n  editLabelApiRef,\n  filter,\n  id: idProp,\n  onBeginEdit,\n  onExitEditMode,\n  onMenuAction,\n  ...htmlAttributes\n}: FilterPillProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-pill\",\n    css: filterPillCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const handleEnterEditMode: EditableLabelProps[\"onEnterEditMode\"] =\n    useCallback(() => {\n      onBeginEdit?.(filter);\n    }, [filter, onBeginEdit]);\n\n  const getLabel = getFilterLabel(columnsByName);\n  const label = useMemo(\n    () => filter.name ?? getLabel(filter),\n    [getLabel, filter],\n  );\n\n  const getTooltipTextl = getFilterTooltipText(columnsByName);\n\n  const id = useId(idProp);\n\n  const handleMenuClose = useCallback<PopupCloseCallback>((reason) => {\n    if (reason?.type === \"escape\") {\n      requestAnimationFrame(() => {\n        if (rootRef.current) {\n          rootRef.current.focus();\n        }\n      });\n    }\n  }, []);\n\n  const popupMenuProps = useMemo<\n    Pick<\n      PopupMenuProps,\n      \"menuBuilder\" | \"menuActionHandler\" | \"menuOptions\" | \"onMenuClose\"\n    >\n  >(\n    () => ({\n      icon: \"more-vert\",\n      menuBuilder: (_location, options) => {\n        const menuItems: ContextMenuItemDescriptor[] = [];\n        if (allowRename) {\n          menuItems.push(renameCommand(options as MenuOptions));\n        }\n        if (allowEdit) {\n          menuItems.push(editCommand(options as MenuOptions));\n        }\n        if (allowClose) {\n          menuItems.push(closeCommand(options as MenuOptions));\n        }\n        if (allowDelete) {\n          menuItems.push(deleteCommand(options as MenuOptions));\n        }\n        return menuItems;\n      },\n\n      menuActionHandler: onMenuAction,\n      menuLocation: \"filter-pill-menu\",\n      menuOptions: {\n        filter,\n      },\n\n      onMenuClose: handleMenuClose,\n    }),\n    [\n      allowClose,\n      allowDelete,\n      allowEdit,\n      allowRename,\n      filter,\n      handleMenuClose,\n      onMenuAction,\n    ],\n  );\n\n  const handleExitEditMode = useCallback<ExitEditModeHandler>(\n    (originalValue, newValue) => {\n      onExitEditMode?.(originalValue, newValue);\n      requestAnimationFrame(() => {\n        rootRef.current?.querySelector(\"button\")?.focus();\n      });\n    },\n    [onExitEditMode],\n  );\n\n  const { anchorProps, hideTooltip, showTooltip, tooltipProps } = useTooltip({\n    anchorQuery: \".vuuFilterPill\",\n    id,\n    placement: [\"above\", \"below\"],\n    tooltipContent: filterAsReactNode(filter, getTooltipTextl),\n  });\n\n  const buttonProps: Partial<ButtonProps> = {\n    onBlur: () => hideTooltip(),\n    onFocus: useCallback<FocusEventHandler>(() => {\n      showTooltip(rootRef);\n    }, [showTooltip]),\n  };\n\n  return (\n    <SplitStateButton\n      {...anchorProps}\n      {...htmlAttributes}\n      ButtonProps={buttonProps}\n      PopupMenuProps={popupMenuProps}\n      className={cx(classBase, classNameProp)}\n      data-text={label}\n      ref={rootRef}\n    >\n      {editable && onExitEditMode ? (\n        <EditableLabel\n          defaultValue={label}\n          editing={editing}\n          editLabelApiRef={editLabelApiRef}\n          key={label}\n          onEnterEditMode={handleEnterEditMode}\n          onExitEditMode={handleExitEditMode}\n        />\n      ) : (\n        label\n      )}\n      {tooltipProps && (\n        <Tooltip className={`${classBase}-tooltip`} {...tooltipProps} />\n      )}\n    </SplitStateButton>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","filterPillCss","useRef","useCallback","getFilterLabel","useMemo","getFilterTooltipText","useId","renameCommand","editCommand","closeCommand","deleteCommand","useTooltip","filterAsReactNode","jsxs","SplitStateButton","jsx","EditableLabel","Tooltip"],"mappings":"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"}
+{"version":3,"file":"FilterPill.js","sources":["../../src/filter-pill/FilterPill.tsx"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport {\n  PopupCloseCallback,\n  PopupMenuProps,\n  Tooltip,\n  useTooltip,\n} from \"@vuu-ui/vuu-popups\";\nimport {\n  EditableLabel,\n  EditableLabelProps,\n  ExitEditModeHandler,\n  SplitStateButton,\n  SplitStateButtonProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { FocusEventHandler, useCallback, useMemo, useRef } from \"react\";\nimport { filterAsReactNode } from \"./filterAsReactNode\";\nimport {\n  closeCommand,\n  deleteCommand,\n  editCommand,\n  MenuOptions,\n  renameCommand,\n} from \"../filter-pill-menu/FilterPillMenuOptions\";\nimport { getFilterLabel } from \"./getFilterLabel\";\nimport { getFilterTooltipText } from \"./getFilterTooltipText\";\n\nimport filterPillCss from \"./FilterPill.css\";\nimport { ButtonProps } from \"@salt-ds/core\";\nimport {\n  ContextMenuItemDescriptor,\n  MenuActionHandler,\n} from \"@vuu-ui/vuu-context-menu\";\n\nconst classBase = \"vuuFilterPill\";\n\nexport interface FilterPillProps\n  extends SplitStateButtonProps,\n    Pick<\n      Partial<EditableLabelProps>,\n      \"editing\" | \"editLabelApiRef\" | \"onExitEditMode\"\n    > {\n  allowClose?: boolean;\n  allowDelete?: boolean;\n  allowEdit?: boolean;\n  allowRename?: boolean;\n\n  columnsByName?: ColumnDescriptorsByName;\n  editable?: boolean;\n  filter: Filter;\n  index?: number;\n  onBeginEdit?: (filter: Filter) => void;\n  onMenuAction?: MenuActionHandler;\n}\n\nexport const FilterPill = ({\n  allowClose = true,\n  allowDelete = true,\n  allowEdit = true,\n  allowRename = true,\n  className: classNameProp,\n  columnsByName,\n  editable = true,\n  editing = false,\n  editLabelApiRef,\n  filter,\n  id: idProp,\n  onBeginEdit,\n  onExitEditMode,\n  onMenuAction,\n  ...htmlAttributes\n}: FilterPillProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-pill\",\n    css: filterPillCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const handleEnterEditMode: EditableLabelProps[\"onEnterEditMode\"] =\n    useCallback(() => {\n      onBeginEdit?.(filter);\n    }, [filter, onBeginEdit]);\n\n  const getLabel = getFilterLabel(columnsByName);\n  const label = useMemo(\n    () => filter.name ?? getLabel(filter),\n    [getLabel, filter],\n  );\n\n  const getTooltipTextl = getFilterTooltipText(columnsByName);\n\n  const id = useId(idProp);\n\n  const handleMenuClose = useCallback<PopupCloseCallback>((reason) => {\n    if (reason?.type === \"escape\") {\n      requestAnimationFrame(() => {\n        if (rootRef.current) {\n          rootRef.current.focus();\n        }\n      });\n    }\n  }, []);\n\n  const popupMenuProps = useMemo<\n    Pick<\n      PopupMenuProps,\n      \"menuBuilder\" | \"menuActionHandler\" | \"menuOptions\" | \"onMenuClose\"\n    >\n  >(\n    () => ({\n      icon: \"more-vert\",\n      menuBuilder: (_location, options) => {\n        const menuItems: ContextMenuItemDescriptor[] = [];\n        if (allowRename) {\n          menuItems.push(renameCommand(options as MenuOptions));\n        }\n        if (allowEdit) {\n          menuItems.push(editCommand(options as MenuOptions));\n        }\n        if (allowClose) {\n          menuItems.push(closeCommand(options as MenuOptions));\n        }\n        if (allowDelete) {\n          menuItems.push(deleteCommand(options as MenuOptions));\n        }\n        return menuItems;\n      },\n\n      menuActionHandler: onMenuAction,\n      menuLocation: \"filter-pill-menu\",\n      menuOptions: {\n        filter,\n      },\n\n      onMenuClose: handleMenuClose,\n    }),\n    [\n      allowClose,\n      allowDelete,\n      allowEdit,\n      allowRename,\n      filter,\n      handleMenuClose,\n      onMenuAction,\n    ],\n  );\n\n  const handleExitEditMode = useCallback<ExitEditModeHandler>(\n    (originalValue, newValue) => {\n      onExitEditMode?.(originalValue, newValue);\n      requestAnimationFrame(() => {\n        rootRef.current?.querySelector(\"button\")?.focus();\n      });\n    },\n    [onExitEditMode],\n  );\n\n  const { anchorProps, hideTooltip, showTooltip, tooltipProps } = useTooltip({\n    anchorQuery: \".vuuFilterPill\",\n    id,\n    placement: [\"above\", \"below\"],\n    tooltipContent: filterAsReactNode(filter, getTooltipTextl),\n  });\n\n  const buttonProps: Partial<ButtonProps> = {\n    onBlur: () => hideTooltip(),\n    onFocus: useCallback<FocusEventHandler>(() => {\n      showTooltip(rootRef);\n    }, [showTooltip]),\n  };\n\n  return (\n    <SplitStateButton\n      {...anchorProps}\n      {...htmlAttributes}\n      ButtonProps={buttonProps}\n      PopupMenuProps={popupMenuProps}\n      className={cx(classBase, classNameProp)}\n      data-text={label}\n      ref={rootRef}\n    >\n      {editable && onExitEditMode ? (\n        <EditableLabel\n          defaultValue={label}\n          editing={editing}\n          editLabelApiRef={editLabelApiRef}\n          key={label}\n          onEnterEditMode={handleEnterEditMode}\n          onExitEditMode={handleExitEditMode}\n        />\n      ) : (\n        label\n      )}\n      {tooltipProps && (\n        <Tooltip className={`${classBase}-tooltip`} {...tooltipProps} />\n      )}\n    </SplitStateButton>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","filterPillCss","useRef","useCallback","getFilterLabel","useMemo","getFilterTooltipText","useId","renameCommand","editCommand","closeCommand","deleteCommand","useTooltip","filterAsReactNode","jsxs","SplitStateButton","jsx","EditableLabel","Tooltip"],"mappings":"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"}

package/cjs/{filter-pill → filter-pill-menu}/FilterPillMenuOptions.js

@@ -3,25 +3,25 @@
 const closeCommand = (options) => ({
   label: `Close`,
   location: "filter",
-  action: `close-filter`,
+  id: `close-filter`,
   options
 });
 const deleteCommand = (options) => ({
   label: `Delete`,
   location: "filter",
-  action: `delete-filter`,
+  id: `delete-filter`,
   options
 });
 const renameCommand = (options) => ({
   label: `Rename`,
   location: "filter",
-  action: `rename-filter`,
+  id: `rename-filter`,
   options
 });
 const editCommand = (options) => ({
   label: `Edit`,
   location: "filter",
-  action: "edit-filter",
+  id: "edit-filter",
   options
 });
 

package/cjs/filter-pill-menu/FilterPillMenuOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPillMenuOptions.js","sources":["../../src/filter-pill-menu/FilterPillMenuOptions.ts"],"sourcesContent":["import { ContextMenuItemDescriptor } from \"@vuu-ui/vuu-context-menu\";\n\nexport type MenuOptions = { [key: string]: unknown };\n\nexport interface FilterPillMenuOptions {\n  tabIndex: number;\n}\n\nexport const isFilterPillMenuOptions = (\n  options: unknown,\n): options is FilterPillMenuOptions =>\n  typeof options === \"object\" && options !== null && \"filter\" in options;\n\nexport const closeCommand = (options?: MenuOptions) =>\n  ({\n    label: `Close`,\n    location: \"filter\",\n    id: `close-filter`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const deleteCommand = (options?: MenuOptions) =>\n  ({\n    label: `Delete`,\n    location: \"filter\",\n    id: `delete-filter`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const renameCommand = (options?: MenuOptions) =>\n  ({\n    label: `Rename`,\n    location: \"filter\",\n    id: `rename-filter`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const editCommand = (options?: MenuOptions) =>\n  ({\n    label: `Edit`,\n    location: \"filter\",\n    id: \"edit-filter\",\n    options,\n  }) as ContextMenuItemDescriptor;\n"],"names":[],"mappings":";;AAaa,MAAA,YAAA,GAAe,CAAC,OAC1B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,KAAA,CAAA;AAAA,EACP,QAAU,EAAA,QAAA;AAAA,EACV,EAAI,EAAA,CAAA,YAAA,CAAA;AAAA,EACJ;AACF,CAAA;AAEW,MAAA,aAAA,GAAgB,CAAC,OAC3B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,MAAA,CAAA;AAAA,EACP,QAAU,EAAA,QAAA;AAAA,EACV,EAAI,EAAA,CAAA,aAAA,CAAA;AAAA,EACJ;AACF,CAAA;AAEW,MAAA,aAAA,GAAgB,CAAC,OAC3B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,MAAA,CAAA;AAAA,EACP,QAAU,EAAA,QAAA;AAAA,EACV,EAAI,EAAA,CAAA,aAAA,CAAA;AAAA,EACJ;AACF,CAAA;AAEW,MAAA,WAAA,GAAc,CAAC,OACzB,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,IAAA,CAAA;AAAA,EACP,QAAU,EAAA,QAAA;AAAA,EACV,EAAI,EAAA,aAAA;AAAA,EACJ;AACF,CAAA;;;;;;;"}

package/esm/custom-filters/useCustomFilters.js

@@ -131,7 +131,7 @@ const useCustomFilters = ({
     [focusFilterPill, interactedFilterState, onRenameFilter]
   );
   const handlePillMenuAction = useCallback(
-    ({ menuId, options }) => {
+    (menuId, options) => {
       switch (menuId) {
         case "delete-filter": {
           const { filter } = options;

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

@@ -1 +1 @@
-{"version":3,"file":"useCustomFilters.js","sources":["../../src/custom-filters/useCustomFilters.ts"],"sourcesContent":["import { MenuActionHandler } from \"@vuu-ui/vuu-data-types\";\nimport { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { PromptProps } from \"@vuu-ui/vuu-popups\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  EditableLabelProps,\n  EditAPI,\n  NullEditAPI,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  filterAsQuery,\n  getElementDataIndex,\n  queryClosest,\n} 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\";\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    | \"onFilterDeleted\"\n    | \"onFilterRenamed\"\n    | \"onFilterStateChanged\"\n  > {\n  containerRef: RefObject<HTMLDivElement>;\n}\n\nexport const useCustomFilters = ({\n  columnDescriptors,\n  containerRef,\n  defaultFilterState,\n  filterState,\n  onApplyFilter,\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      const query = filter ? filterAsQuery(filter, { columnsByName }) : \"\";\n      onApplyFilter({ filter: query, filterStruct: filter });\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]);\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  // 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: ColumnDescriptor[],\n): ColumnDescriptorsByName {\n  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["FilterPillProps"],"mappings":"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"}
+{"version":3,"file":"useCustomFilters.js","sources":["../../src/custom-filters/useCustomFilters.ts"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { PromptProps } from \"@vuu-ui/vuu-popups\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  EditableLabelProps,\n  EditAPI,\n  NullEditAPI,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  filterAsQuery,\n  getElementDataIndex,\n  queryClosest,\n} 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    | \"onFilterDeleted\"\n    | \"onFilterRenamed\"\n    | \"onFilterStateChanged\"\n  > {\n  containerRef: RefObject<HTMLDivElement>;\n}\n\nexport const useCustomFilters = ({\n  columnDescriptors,\n  containerRef,\n  defaultFilterState,\n  filterState,\n  onApplyFilter,\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      const query = filter ? filterAsQuery(filter, { columnsByName }) : \"\";\n      onApplyFilter({ filter: query, filterStruct: filter });\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]);\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  // 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: ColumnDescriptor[],\n): ColumnDescriptorsByName {\n  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["FilterPillProps"],"mappings":"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"}

package/esm/filter-editor/useFilterEditor.js

@@ -25,13 +25,13 @@ const useFilterEditor = ({
   const saveButtonMenuBuilder = useCallback((_2, options) => {
     switch (clauseCombinatorRef.current) {
       case "and":
-        return [{ action: "and-clause", label: "AND", options }];
+        return [{ id: "and-clause", label: "AND", options }];
       case "or":
-        return [{ action: "or-clause", label: "OR", options }];
+        return [{ id: "or-clause", label: "OR", options }];
       default:
         return [
-          { action: "and-clause", label: "AND", options },
-          { action: "or-clause", label: "OR", options }
+          { id: "and-clause", label: "AND", options },
+          { id: "or-clause", label: "OR", options }
         ];
     }
   }, []);
@@ -87,7 +87,7 @@ const useFilterEditor = ({
     [filter, filterModel, onCancel]
   );
   const invokeMenuAction = useCallback(
-    ({ menuId }) => {
+    (menuId) => {
       switch (menuId) {
         case "save": {
           const savedFilter = filterModel.asFilter();
@@ -142,11 +142,7 @@ const useFilterEditor = ({
   const handleClickSaveButton = useMemo(
     () => () => (
       // onSave() ?
-      invokeMenuAction({
-        menuId: "save",
-        options: {},
-        type: "menu-action"
-      })
+      invokeMenuAction("save")
     ),
     [invokeMenuAction]
   );

package/esm/filter-editor/useFilterEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFilterEditor.js","sources":["../../src/filter-editor/useFilterEditor.ts"],"sourcesContent":["import type { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-data-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport type {\n  ColumnDescriptorsByName,\n  FilterCombinatorOp,\n} from \"@vuu-ui/vuu-filter-types\";\nimport {\n  KeyboardEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  focusFilterClauseField,\n  focusFirstClauseIfAllClausesValid,\n  focusLastClauseValue,\n  getFocusedFieldDetails,\n  navigateToNextFilterClause,\n} from \"../filter-clause/filterClauseFocusManagement\";\nimport { FilterEditorProps } from \"./FilterEditor\";\nimport {\n  FilterChangeHandler,\n  FilterModel,\n  FilterStatusChangeHandler,\n} from \"../FilterModel\";\nimport { FilterClauseCancelHandler } from \"../filter-clause\";\nimport { FilterClauseCombinatorChangeHandler } from \"./FilterClauseCombinator\";\n\nexport interface FilterEditorHookProps\n  extends Pick<\n    FilterEditorProps,\n    \"columnDescriptors\" | \"filter\" | \"onCancel\" | \"onSave\"\n  > {\n  label?: string;\n}\n\nexport const useFilterEditor = ({\n  columnDescriptors,\n  filter,\n  onCancel,\n  onSave,\n}: FilterEditorHookProps) => {\n  const filterModel = useMemo(() => {\n    return new FilterModel(filter);\n  }, [filter]);\n\n  const [_, forceRefresh] = useState({});\n  const [isValid, setIsValid] = useState(filterModel.isValid);\n  const clauseCombinatorRef = useRef<FilterCombinatorOp | undefined>(undefined);\n  const saveButtonRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const setContainer = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    containerRef.current = el;\n    if (el) {\n      // If there is a new empty clause it will focus itself, otw ...\n      focusFirstClauseIfAllClausesValid(el);\n    }\n  }, []);\n\n  const saveButtonMenuBuilder: MenuBuilder = useCallback((_, options) => {\n    switch (clauseCombinatorRef.current) {\n      case \"and\":\n        return [{ action: \"and-clause\", label: \"AND\", options }];\n      case \"or\":\n        return [{ action: \"or-clause\", label: \"OR\", options }];\n      default:\n        return [\n          { action: \"and-clause\", label: \"AND\", options },\n          { action: \"or-clause\", label: \"OR\", options },\n        ];\n    }\n  }, []);\n\n  const columnsByName = useMemo(\n    () => columnDescriptorsByName(columnDescriptors),\n    [columnDescriptors],\n  );\n\n  const isLastFilterClause = useCallback(\n    (index?: number) =>\n      index !== undefined && filterModel.filterClauses.length === index + 1,\n    [filterModel],\n  );\n\n  const focusSaveButton = useCallback(() => {\n    requestAnimationFrame(() => {\n      saveButtonRef.current?.focus();\n    });\n  }, []);\n\n  useMemo(() => {\n    const setValid: FilterStatusChangeHandler = (isValid) => {\n      // bind the model state change to React state to ensure render\n      setIsValid(isValid);\n    };\n\n    const valueChanged: FilterChangeHandler = (_filter, isValid) => {\n      if (isValid) {\n        const [filterClauseIndex, fieldName] = getFocusedFieldDetails();\n        if (fieldName === \"value\" && isLastFilterClause(filterClauseIndex)) {\n          focusSaveButton();\n        }\n      }\n    };\n    filterModel.on(\"isValid\", setValid);\n    filterModel.on(\"filter\", valueChanged);\n  }, [filterModel, focusSaveButton, isLastFilterClause]);\n\n  const handleCancelFilterClause = useCallback<FilterClauseCancelHandler>(\n    (filterClause, reason) => {\n      if (reason === \"Backspace\") {\n        const indexOfFilterClause =\n          filterModel.filterClauses.indexOf(filterClause);\n        filterModel.removeFilterClause(filterClause);\n        forceRefresh({});\n        if (reason === \"Backspace\" && containerRef.current) {\n          if (indexOfFilterClause > 0) {\n            focusFilterClauseField(\n              containerRef.current,\n              indexOfFilterClause - 1,\n            );\n          }\n        }\n      } else {\n        console.log(\n          `cancel because of Escape valid clause ${filterClause.isValid}`,\n        );\n        onCancel(filter);\n      }\n    },\n    [filter, filterModel, onCancel],\n  );\n\n  const invokeMenuAction = useCallback<MenuActionHandler>(\n    ({ menuId }) => {\n      switch (menuId) {\n        case \"save\": {\n          const savedFilter = filterModel.asFilter();\n          const newOrUpdatedFilter = filter?.name\n            ? {\n                ...savedFilter,\n                name: filter.name,\n              }\n            : savedFilter;\n          onSave(newOrUpdatedFilter);\n          return true;\n        }\n        case \"and-clause\": {\n          clauseCombinatorRef.current = \"and\";\n          filterModel.addNewFilterClause(\"and\");\n          return true;\n        }\n        case \"or-clause\":\n          clauseCombinatorRef.current = \"or\";\n          filterModel.addNewFilterClause(\"or\");\n          return true;\n        default:\n          return false;\n      }\n    },\n    [filter?.name, filterModel, onSave],\n  );\n\n  const handleKeyDownSaveButton = useCallback<KeyboardEventHandler>(\n    (evt) => {\n      if (evt.key === \"Tab\" && evt.shiftKey) {\n        evt.preventDefault();\n        const target = evt.target as HTMLElement;\n        const filterEditor = target.closest(\".vuuFilterEditor\") as HTMLElement;\n        focusLastClauseValue(filterEditor);\n      } else if (evt.key === \"Escape\") {\n        onCancel(filter);\n      }\n    },\n    [filter, onCancel],\n  );\n\n  const handleKeyDownNavigationFromCombinator = useCallback<\n    KeyboardEventHandler<HTMLElement>\n  >((evt) => {\n    const { target, key, shiftKey } = evt;\n    if (key === \"ArrowLeft\") {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"bwd\");\n    } else if (key === \"ArrowRight\") {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"fwd\");\n    } else if (key === \"Tab\" && shiftKey) {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"bwd\");\n    }\n  }, []);\n\n  const handleClickSaveButton = useMemo(\n    () => () =>\n      // onSave() ?\n      invokeMenuAction({\n        menuId: \"save\",\n        options: {},\n        type: \"menu-action\",\n      }),\n    [invokeMenuAction],\n  );\n\n  const saveButtonProps = {\n    PopupMenuProps: {\n      icon: \"more-vert\",\n      menuBuilder: saveButtonMenuBuilder,\n      menuActionHandler: invokeMenuAction,\n      menuLocation: \"filter-save-menu\",\n    },\n    onClick: handleClickSaveButton,\n    onKeyDown: handleKeyDownSaveButton,\n  };\n\n  const onChangeFilterCombinator =\n    useCallback<FilterClauseCombinatorChangeHandler>(\n      (op) => {\n        filterModel.setOp(op);\n        clauseCombinatorRef.current = op;\n        forceRefresh({});\n      },\n      [filterModel],\n    );\n\n  const handleCancelFilterEdit = useCallback(() => {\n    onCancel(filter);\n  }, [filter, onCancel]);\n\n  return {\n    columnsByName,\n    filterModel,\n    focusSaveButton,\n    isValid,\n    onCancelFilterClause: handleCancelFilterClause,\n    onCancelFilterEdit: handleCancelFilterEdit,\n    onChangeFilterCombinator,\n    onKeyDownCombinator: handleKeyDownNavigationFromCombinator,\n    saveButtonProps,\n    saveButtonRef,\n    setContainer,\n  };\n};\n\n// Duplicated in useFilterBar\nfunction columnDescriptorsByName(\n  columns: ColumnDescriptor[],\n): ColumnDescriptorsByName {\n  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["_","isValid"],"mappings":"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"}
+{"version":3,"file":"useFilterEditor.js","sources":["../../src/filter-editor/useFilterEditor.ts"],"sourcesContent":["import type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport type {\n  ColumnDescriptorsByName,\n  FilterCombinatorOp,\n} from \"@vuu-ui/vuu-filter-types\";\nimport {\n  KeyboardEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  focusFilterClauseField,\n  focusFirstClauseIfAllClausesValid,\n  focusLastClauseValue,\n  getFocusedFieldDetails,\n  navigateToNextFilterClause,\n} from \"../filter-clause/filterClauseFocusManagement\";\nimport { FilterEditorProps } from \"./FilterEditor\";\nimport {\n  FilterChangeHandler,\n  FilterModel,\n  FilterStatusChangeHandler,\n} from \"../FilterModel\";\nimport { FilterClauseCancelHandler } from \"../filter-clause\";\nimport { FilterClauseCombinatorChangeHandler } from \"./FilterClauseCombinator\";\nimport { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface FilterEditorHookProps\n  extends Pick<\n    FilterEditorProps,\n    \"columnDescriptors\" | \"filter\" | \"onCancel\" | \"onSave\"\n  > {\n  label?: string;\n}\n\nexport const useFilterEditor = ({\n  columnDescriptors,\n  filter,\n  onCancel,\n  onSave,\n}: FilterEditorHookProps) => {\n  const filterModel = useMemo(() => {\n    return new FilterModel(filter);\n  }, [filter]);\n\n  const [_, forceRefresh] = useState({});\n  const [isValid, setIsValid] = useState(filterModel.isValid);\n  const clauseCombinatorRef = useRef<FilterCombinatorOp | undefined>(undefined);\n  const saveButtonRef = useRef<HTMLDivElement>(null);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const setContainer = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    containerRef.current = el;\n    if (el) {\n      // If there is a new empty clause it will focus itself, otw ...\n      focusFirstClauseIfAllClausesValid(el);\n    }\n  }, []);\n\n  const saveButtonMenuBuilder: MenuBuilder = useCallback((_, options) => {\n    switch (clauseCombinatorRef.current) {\n      case \"and\":\n        return [{ id: \"and-clause\", label: \"AND\", options }];\n      case \"or\":\n        return [{ id: \"or-clause\", label: \"OR\", options }];\n      default:\n        return [\n          { id: \"and-clause\", label: \"AND\", options },\n          { id: \"or-clause\", label: \"OR\", options },\n        ];\n    }\n  }, []);\n\n  const columnsByName = useMemo(\n    () => columnDescriptorsByName(columnDescriptors),\n    [columnDescriptors],\n  );\n\n  const isLastFilterClause = useCallback(\n    (index?: number) =>\n      index !== undefined && filterModel.filterClauses.length === index + 1,\n    [filterModel],\n  );\n\n  const focusSaveButton = useCallback(() => {\n    requestAnimationFrame(() => {\n      saveButtonRef.current?.focus();\n    });\n  }, []);\n\n  useMemo(() => {\n    const setValid: FilterStatusChangeHandler = (isValid) => {\n      // bind the model state change to React state to ensure render\n      setIsValid(isValid);\n    };\n\n    const valueChanged: FilterChangeHandler = (_filter, isValid) => {\n      if (isValid) {\n        const [filterClauseIndex, fieldName] = getFocusedFieldDetails();\n        if (fieldName === \"value\" && isLastFilterClause(filterClauseIndex)) {\n          focusSaveButton();\n        }\n      }\n    };\n    filterModel.on(\"isValid\", setValid);\n    filterModel.on(\"filter\", valueChanged);\n  }, [filterModel, focusSaveButton, isLastFilterClause]);\n\n  const handleCancelFilterClause = useCallback<FilterClauseCancelHandler>(\n    (filterClause, reason) => {\n      if (reason === \"Backspace\") {\n        const indexOfFilterClause =\n          filterModel.filterClauses.indexOf(filterClause);\n        filterModel.removeFilterClause(filterClause);\n        forceRefresh({});\n        if (reason === \"Backspace\" && containerRef.current) {\n          if (indexOfFilterClause > 0) {\n            focusFilterClauseField(\n              containerRef.current,\n              indexOfFilterClause - 1,\n            );\n          }\n        }\n      } else {\n        console.log(\n          `cancel because of Escape valid clause ${filterClause.isValid}`,\n        );\n        onCancel(filter);\n      }\n    },\n    [filter, filterModel, onCancel],\n  );\n\n  const invokeMenuAction = useCallback<MenuActionHandler>(\n    (menuId) => {\n      switch (menuId) {\n        case \"save\": {\n          const savedFilter = filterModel.asFilter();\n          const newOrUpdatedFilter = filter?.name\n            ? {\n                ...savedFilter,\n                name: filter.name,\n              }\n            : savedFilter;\n          onSave(newOrUpdatedFilter);\n          return true;\n        }\n        case \"and-clause\": {\n          clauseCombinatorRef.current = \"and\";\n          filterModel.addNewFilterClause(\"and\");\n          return true;\n        }\n        case \"or-clause\":\n          clauseCombinatorRef.current = \"or\";\n          filterModel.addNewFilterClause(\"or\");\n          return true;\n        default:\n          return false;\n      }\n    },\n    [filter?.name, filterModel, onSave],\n  );\n\n  const handleKeyDownSaveButton = useCallback<KeyboardEventHandler>(\n    (evt) => {\n      if (evt.key === \"Tab\" && evt.shiftKey) {\n        evt.preventDefault();\n        const target = evt.target as HTMLElement;\n        const filterEditor = target.closest(\".vuuFilterEditor\") as HTMLElement;\n        focusLastClauseValue(filterEditor);\n      } else if (evt.key === \"Escape\") {\n        onCancel(filter);\n      }\n    },\n    [filter, onCancel],\n  );\n\n  const handleKeyDownNavigationFromCombinator = useCallback<\n    KeyboardEventHandler<HTMLElement>\n  >((evt) => {\n    const { target, key, shiftKey } = evt;\n    if (key === \"ArrowLeft\") {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"bwd\");\n    } else if (key === \"ArrowRight\") {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"fwd\");\n    } else if (key === \"Tab\" && shiftKey) {\n      evt.preventDefault();\n      navigateToNextFilterClause(target as HTMLElement, \"bwd\");\n    }\n  }, []);\n\n  const handleClickSaveButton = useMemo(\n    () => () =>\n      // onSave() ?\n      invokeMenuAction(\"save\"),\n    [invokeMenuAction],\n  );\n\n  const saveButtonProps = {\n    PopupMenuProps: {\n      icon: \"more-vert\",\n      menuBuilder: saveButtonMenuBuilder,\n      menuActionHandler: invokeMenuAction,\n      menuLocation: \"filter-save-menu\",\n    },\n    onClick: handleClickSaveButton,\n    onKeyDown: handleKeyDownSaveButton,\n  };\n\n  const onChangeFilterCombinator =\n    useCallback<FilterClauseCombinatorChangeHandler>(\n      (op) => {\n        filterModel.setOp(op);\n        clauseCombinatorRef.current = op;\n        forceRefresh({});\n      },\n      [filterModel],\n    );\n\n  const handleCancelFilterEdit = useCallback(() => {\n    onCancel(filter);\n  }, [filter, onCancel]);\n\n  return {\n    columnsByName,\n    filterModel,\n    focusSaveButton,\n    isValid,\n    onCancelFilterClause: handleCancelFilterClause,\n    onCancelFilterEdit: handleCancelFilterEdit,\n    onChangeFilterCombinator,\n    onKeyDownCombinator: handleKeyDownNavigationFromCombinator,\n    saveButtonProps,\n    saveButtonRef,\n    setContainer,\n  };\n};\n\n// Duplicated in useFilterBar\nfunction columnDescriptorsByName(\n  columns: ColumnDescriptor[],\n): ColumnDescriptorsByName {\n  return columns.reduce((m, col) => ({ ...m, [col.name]: col }), {});\n}\n"],"names":["_","isValid"],"mappings":"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"}

package/esm/filter-pill/FilterPill.js

@@ -7,7 +7,7 @@ import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
 import { useRef, useCallback, useMemo } from 'react';
 import { filterAsReactNode } from './filterAsReactNode.js';
-import { renameCommand, editCommand, closeCommand, deleteCommand } from './FilterPillMenuOptions.js';
+import { renameCommand, editCommand, closeCommand, deleteCommand } from '../filter-pill-menu/FilterPillMenuOptions.js';
 import { getFilterLabel } from './getFilterLabel.js';
 import { getFilterTooltipText } from './getFilterTooltipText.js';
 import filterPillCss from './FilterPill.css.js';

package/esm/filter-pill/FilterPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterPill.js","sources":["../../src/filter-pill/FilterPill.tsx"],"sourcesContent":["import {\n  ContextMenuItemDescriptor,\n  MenuActionHandler,\n} from \"@vuu-ui/vuu-data-types\";\nimport { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport {\n  PopupCloseCallback,\n  PopupMenuProps,\n  Tooltip,\n  useTooltip,\n} from \"@vuu-ui/vuu-popups\";\nimport {\n  EditableLabel,\n  EditableLabelProps,\n  ExitEditModeHandler,\n  SplitStateButton,\n  SplitStateButtonProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { FocusEventHandler, useCallback, useMemo, useRef } from \"react\";\nimport { filterAsReactNode } from \"./filterAsReactNode\";\nimport {\n  closeCommand,\n  deleteCommand,\n  editCommand,\n  MenuOptions,\n  renameCommand,\n} from \"./FilterPillMenuOptions\";\nimport { getFilterLabel } from \"./getFilterLabel\";\nimport { getFilterTooltipText } from \"./getFilterTooltipText\";\n\nimport filterPillCss from \"./FilterPill.css\";\nimport { ButtonProps } from \"@salt-ds/core\";\n\nconst classBase = \"vuuFilterPill\";\n\nexport interface FilterPillProps\n  extends SplitStateButtonProps,\n    Pick<\n      Partial<EditableLabelProps>,\n      \"editing\" | \"editLabelApiRef\" | \"onExitEditMode\"\n    > {\n  allowClose?: boolean;\n  allowDelete?: boolean;\n  allowEdit?: boolean;\n  allowRename?: boolean;\n\n  columnsByName?: ColumnDescriptorsByName;\n  editable?: boolean;\n  filter: Filter;\n  index?: number;\n  onBeginEdit?: (filter: Filter) => void;\n  onMenuAction?: MenuActionHandler;\n}\n\nexport const FilterPill = ({\n  allowClose = true,\n  allowDelete = true,\n  allowEdit = true,\n  allowRename = true,\n  className: classNameProp,\n  columnsByName,\n  editable = true,\n  editing = false,\n  editLabelApiRef,\n  filter,\n  id: idProp,\n  onBeginEdit,\n  onExitEditMode,\n  onMenuAction,\n  ...htmlAttributes\n}: FilterPillProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-pill\",\n    css: filterPillCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const handleEnterEditMode: EditableLabelProps[\"onEnterEditMode\"] =\n    useCallback(() => {\n      onBeginEdit?.(filter);\n    }, [filter, onBeginEdit]);\n\n  const getLabel = getFilterLabel(columnsByName);\n  const label = useMemo(\n    () => filter.name ?? getLabel(filter),\n    [getLabel, filter],\n  );\n\n  const getTooltipTextl = getFilterTooltipText(columnsByName);\n\n  const id = useId(idProp);\n\n  const handleMenuClose = useCallback<PopupCloseCallback>((reason) => {\n    if (reason?.type === \"escape\") {\n      requestAnimationFrame(() => {\n        if (rootRef.current) {\n          rootRef.current.focus();\n        }\n      });\n    }\n  }, []);\n\n  const popupMenuProps = useMemo<\n    Pick<\n      PopupMenuProps,\n      \"menuBuilder\" | \"menuActionHandler\" | \"menuOptions\" | \"onMenuClose\"\n    >\n  >(\n    () => ({\n      icon: \"more-vert\",\n      menuBuilder: (_location, options) => {\n        const menuItems: ContextMenuItemDescriptor[] = [];\n        if (allowRename) {\n          menuItems.push(renameCommand(options as MenuOptions));\n        }\n        if (allowEdit) {\n          menuItems.push(editCommand(options as MenuOptions));\n        }\n        if (allowClose) {\n          menuItems.push(closeCommand(options as MenuOptions));\n        }\n        if (allowDelete) {\n          menuItems.push(deleteCommand(options as MenuOptions));\n        }\n        return menuItems;\n      },\n\n      menuActionHandler: onMenuAction,\n      menuLocation: \"filter-pill-menu\",\n      menuOptions: {\n        filter,\n      },\n\n      onMenuClose: handleMenuClose,\n    }),\n    [\n      allowClose,\n      allowDelete,\n      allowEdit,\n      allowRename,\n      filter,\n      handleMenuClose,\n      onMenuAction,\n    ],\n  );\n\n  const handleExitEditMode = useCallback<ExitEditModeHandler>(\n    (originalValue, newValue) => {\n      onExitEditMode?.(originalValue, newValue);\n      requestAnimationFrame(() => {\n        rootRef.current?.querySelector(\"button\")?.focus();\n      });\n    },\n    [onExitEditMode],\n  );\n\n  const { anchorProps, hideTooltip, showTooltip, tooltipProps } = useTooltip({\n    anchorQuery: \".vuuFilterPill\",\n    id,\n    placement: [\"above\", \"below\"],\n    tooltipContent: filterAsReactNode(filter, getTooltipTextl),\n  });\n\n  const buttonProps: Partial<ButtonProps> = {\n    onBlur: () => hideTooltip(),\n    onFocus: useCallback<FocusEventHandler>(() => {\n      showTooltip(rootRef);\n    }, [showTooltip]),\n  };\n\n  return (\n    <SplitStateButton\n      {...anchorProps}\n      {...htmlAttributes}\n      ButtonProps={buttonProps}\n      PopupMenuProps={popupMenuProps}\n      className={cx(classBase, classNameProp)}\n      data-text={label}\n      ref={rootRef}\n    >\n      {editable && onExitEditMode ? (\n        <EditableLabel\n          defaultValue={label}\n          editing={editing}\n          editLabelApiRef={editLabelApiRef}\n          key={label}\n          onEnterEditMode={handleEnterEditMode}\n          onExitEditMode={handleExitEditMode}\n        />\n      ) : (\n        label\n      )}\n      {tooltipProps && (\n        <Tooltip className={`${classBase}-tooltip`} {...tooltipProps} />\n      )}\n    </SplitStateButton>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"FilterPill.js","sources":["../../src/filter-pill/FilterPill.tsx"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport {\n  PopupCloseCallback,\n  PopupMenuProps,\n  Tooltip,\n  useTooltip,\n} from \"@vuu-ui/vuu-popups\";\nimport {\n  EditableLabel,\n  EditableLabelProps,\n  ExitEditModeHandler,\n  SplitStateButton,\n  SplitStateButtonProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { useId } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { FocusEventHandler, useCallback, useMemo, useRef } from \"react\";\nimport { filterAsReactNode } from \"./filterAsReactNode\";\nimport {\n  closeCommand,\n  deleteCommand,\n  editCommand,\n  MenuOptions,\n  renameCommand,\n} from \"../filter-pill-menu/FilterPillMenuOptions\";\nimport { getFilterLabel } from \"./getFilterLabel\";\nimport { getFilterTooltipText } from \"./getFilterTooltipText\";\n\nimport filterPillCss from \"./FilterPill.css\";\nimport { ButtonProps } from \"@salt-ds/core\";\nimport {\n  ContextMenuItemDescriptor,\n  MenuActionHandler,\n} from \"@vuu-ui/vuu-context-menu\";\n\nconst classBase = \"vuuFilterPill\";\n\nexport interface FilterPillProps\n  extends SplitStateButtonProps,\n    Pick<\n      Partial<EditableLabelProps>,\n      \"editing\" | \"editLabelApiRef\" | \"onExitEditMode\"\n    > {\n  allowClose?: boolean;\n  allowDelete?: boolean;\n  allowEdit?: boolean;\n  allowRename?: boolean;\n\n  columnsByName?: ColumnDescriptorsByName;\n  editable?: boolean;\n  filter: Filter;\n  index?: number;\n  onBeginEdit?: (filter: Filter) => void;\n  onMenuAction?: MenuActionHandler;\n}\n\nexport const FilterPill = ({\n  allowClose = true,\n  allowDelete = true,\n  allowEdit = true,\n  allowRename = true,\n  className: classNameProp,\n  columnsByName,\n  editable = true,\n  editing = false,\n  editLabelApiRef,\n  filter,\n  id: idProp,\n  onBeginEdit,\n  onExitEditMode,\n  onMenuAction,\n  ...htmlAttributes\n}: FilterPillProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-pill\",\n    css: filterPillCss,\n    window: targetWindow,\n  });\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const handleEnterEditMode: EditableLabelProps[\"onEnterEditMode\"] =\n    useCallback(() => {\n      onBeginEdit?.(filter);\n    }, [filter, onBeginEdit]);\n\n  const getLabel = getFilterLabel(columnsByName);\n  const label = useMemo(\n    () => filter.name ?? getLabel(filter),\n    [getLabel, filter],\n  );\n\n  const getTooltipTextl = getFilterTooltipText(columnsByName);\n\n  const id = useId(idProp);\n\n  const handleMenuClose = useCallback<PopupCloseCallback>((reason) => {\n    if (reason?.type === \"escape\") {\n      requestAnimationFrame(() => {\n        if (rootRef.current) {\n          rootRef.current.focus();\n        }\n      });\n    }\n  }, []);\n\n  const popupMenuProps = useMemo<\n    Pick<\n      PopupMenuProps,\n      \"menuBuilder\" | \"menuActionHandler\" | \"menuOptions\" | \"onMenuClose\"\n    >\n  >(\n    () => ({\n      icon: \"more-vert\",\n      menuBuilder: (_location, options) => {\n        const menuItems: ContextMenuItemDescriptor[] = [];\n        if (allowRename) {\n          menuItems.push(renameCommand(options as MenuOptions));\n        }\n        if (allowEdit) {\n          menuItems.push(editCommand(options as MenuOptions));\n        }\n        if (allowClose) {\n          menuItems.push(closeCommand(options as MenuOptions));\n        }\n        if (allowDelete) {\n          menuItems.push(deleteCommand(options as MenuOptions));\n        }\n        return menuItems;\n      },\n\n      menuActionHandler: onMenuAction,\n      menuLocation: \"filter-pill-menu\",\n      menuOptions: {\n        filter,\n      },\n\n      onMenuClose: handleMenuClose,\n    }),\n    [\n      allowClose,\n      allowDelete,\n      allowEdit,\n      allowRename,\n      filter,\n      handleMenuClose,\n      onMenuAction,\n    ],\n  );\n\n  const handleExitEditMode = useCallback<ExitEditModeHandler>(\n    (originalValue, newValue) => {\n      onExitEditMode?.(originalValue, newValue);\n      requestAnimationFrame(() => {\n        rootRef.current?.querySelector(\"button\")?.focus();\n      });\n    },\n    [onExitEditMode],\n  );\n\n  const { anchorProps, hideTooltip, showTooltip, tooltipProps } = useTooltip({\n    anchorQuery: \".vuuFilterPill\",\n    id,\n    placement: [\"above\", \"below\"],\n    tooltipContent: filterAsReactNode(filter, getTooltipTextl),\n  });\n\n  const buttonProps: Partial<ButtonProps> = {\n    onBlur: () => hideTooltip(),\n    onFocus: useCallback<FocusEventHandler>(() => {\n      showTooltip(rootRef);\n    }, [showTooltip]),\n  };\n\n  return (\n    <SplitStateButton\n      {...anchorProps}\n      {...htmlAttributes}\n      ButtonProps={buttonProps}\n      PopupMenuProps={popupMenuProps}\n      className={cx(classBase, classNameProp)}\n      data-text={label}\n      ref={rootRef}\n    >\n      {editable && onExitEditMode ? (\n        <EditableLabel\n          defaultValue={label}\n          editing={editing}\n          editLabelApiRef={editLabelApiRef}\n          key={label}\n          onEnterEditMode={handleEnterEditMode}\n          onExitEditMode={handleExitEditMode}\n        />\n      ) : (\n        label\n      )}\n      {tooltipProps && (\n        <Tooltip className={`${classBase}-tooltip`} {...tooltipProps} />\n      )}\n    </SplitStateButton>\n  );\n};\n"],"names":[],"mappings":"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"}

package/esm/{filter-pill → filter-pill-menu}/FilterPillMenuOptions.js

@@ -1,25 +1,25 @@
 const closeCommand = (options) => ({
   label: `Close`,
   location: "filter",
-  action: `close-filter`,
+  id: `close-filter`,
   options
 });
 const deleteCommand = (options) => ({
   label: `Delete`,
   location: "filter",
-  action: `delete-filter`,
+  id: `delete-filter`,
   options
 });
 const renameCommand = (options) => ({
   label: `Rename`,
   location: "filter",
-  action: `rename-filter`,
+  id: `rename-filter`,
   options
 });
 const editCommand = (options) => ({
   label: `Edit`,
   location: "filter",
-  action: "edit-filter",
+  id: "edit-filter",
   options
 });
 

package/esm/filter-pill-menu/FilterPillMenuOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPillMenuOptions.js","sources":["../../src/filter-pill-menu/FilterPillMenuOptions.ts"],"sourcesContent":["import { ContextMenuItemDescriptor } from \"@vuu-ui/vuu-context-menu\";\n\nexport type MenuOptions = { [key: string]: unknown };\n\nexport interface FilterPillMenuOptions {\n  tabIndex: number;\n}\n\nexport const isFilterPillMenuOptions = (\n  options: unknown,\n): options is FilterPillMenuOptions =>\n  typeof options === \"object\" && options !== null && \"filter\" in options;\n\nexport const closeCommand = (options?: MenuOptions) =>\n  ({\n    label: `Close`,\n    location: \"filter\",\n    id: `close-filter`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const deleteCommand = (options?: MenuOptions) =>\n  ({\n    label: `Delete`,\n    location: \"filter\",\n    id: `delete-filter`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const renameCommand = (options?: MenuOptions) =>\n  ({\n    label: `Rename`,\n    location: \"filter\",\n    id: `rename-filter`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const editCommand = (options?: MenuOptions) =>\n  ({\n    label: `Edit`,\n    location: \"filter\",\n    id: \"edit-filter\",\n    options,\n  }) as ContextMenuItemDescriptor;\n"],"names":[],"mappings":"AAaa,MAAA,YAAA,GAAe,CAAC,OAC1B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,KAAA,CAAA;AAAA,EACP,QAAU,EAAA,QAAA;AAAA,EACV,EAAI,EAAA,CAAA,YAAA,CAAA;AAAA,EACJ;AACF,CAAA;AAEW,MAAA,aAAA,GAAgB,CAAC,OAC3B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,MAAA,CAAA;AAAA,EACP,QAAU,EAAA,QAAA;AAAA,EACV,EAAI,EAAA,CAAA,aAAA,CAAA;AAAA,EACJ;AACF,CAAA;AAEW,MAAA,aAAA,GAAgB,CAAC,OAC3B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,MAAA,CAAA;AAAA,EACP,QAAU,EAAA,QAAA;AAAA,EACV,EAAI,EAAA,CAAA,aAAA,CAAA;AAAA,EACJ;AACF,CAAA;AAEW,MAAA,WAAA,GAAc,CAAC,OACzB,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,IAAA,CAAA;AAAA,EACP,QAAU,EAAA,QAAA;AAAA,EACV,EAAI,EAAA,aAAA;AAAA,EACJ;AACF,CAAA;;;;"}

package/package.json

@@ -1,21 +1,21 @@
 {
-  "version": "0.11.3",
+  "version": "0.12.0",
   "author": "heswell",
   "license": "Apache-2.0",
   "type": "module",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.11.3",
-    "@vuu-ui/vuu-protocol-types": "0.11.3",
-    "@vuu-ui/vuu-table-types": "0.11.3",
-    "@vuu-ui/vuu-filter-types": "0.11.3"
+    "@vuu-ui/vuu-data-types": "0.12.0",
+    "@vuu-ui/vuu-protocol-types": "0.12.0",
+    "@vuu-ui/vuu-table-types": "0.12.0",
+    "@vuu-ui/vuu-filter-types": "0.12.0"
   },
   "dependencies": {
-    "@vuu-ui/vuu-data-react": "0.11.3",
-    "@vuu-ui/vuu-filter-parser": "0.11.3",
-    "@vuu-ui/vuu-popups": "0.11.3",
-    "@vuu-ui/vuu-ui-controls": "0.11.3",
-    "@vuu-ui/vuu-table": "0.11.3",
-    "@vuu-ui/vuu-utils": "0.11.3",
+    "@vuu-ui/vuu-data-react": "0.12.0",
+    "@vuu-ui/vuu-filter-parser": "0.12.0",
+    "@vuu-ui/vuu-popups": "0.12.0",
+    "@vuu-ui/vuu-ui-controls": "0.12.0",
+    "@vuu-ui/vuu-table": "0.12.0",
+    "@vuu-ui/vuu-utils": "0.12.0",
     "@salt-ds/core": "1.43.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1"

package/types/filter-clause/FilterMenu.d.ts

@@ -1,4 +1,4 @@
-import { MenuActionHandler } from "@vuu-ui/vuu-data-types";
+import { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
 export interface FilterMenuProps {
     allowAnd?: boolean;
     allowOr?: boolean;

package/types/filter-clause/FilterMenuOptions.d.ts

@@ -1,4 +1,4 @@
-import { ContextMenuItemDescriptor } from "@vuu-ui/vuu-data-types";
+import { ContextMenuItemDescriptor } from "@vuu-ui/vuu-context-menu";
 export type MenuOptions = {
     [key: string]: unknown;
 };

package/types/filter-editor/useFilterEditor.d.ts

@@ -1,10 +1,10 @@
-import type { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
 import type { ColumnDescriptorsByName } from "@vuu-ui/vuu-filter-types";
 import { KeyboardEventHandler, RefCallback } from "react";
 import { FilterEditorProps } from "./FilterEditor";
 import { FilterModel } from "../FilterModel";
 import { FilterClauseCancelHandler } from "../filter-clause";
 import { FilterClauseCombinatorChangeHandler } from "./FilterClauseCombinator";
+import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-context-menu";
 export interface FilterEditorHookProps extends Pick<FilterEditorProps, "columnDescriptors" | "filter" | "onCancel" | "onSave"> {
     label?: string;
 }

package/types/filter-pill/FilterPill.d.ts

@@ -1,6 +1,6 @@
-import { MenuActionHandler } from "@vuu-ui/vuu-data-types";
 import { ColumnDescriptorsByName, Filter } from "@vuu-ui/vuu-filter-types";
 import { EditableLabelProps, SplitStateButtonProps } from "@vuu-ui/vuu-ui-controls";
+import { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
 export interface FilterPillProps extends SplitStateButtonProps, Pick<Partial<EditableLabelProps>, "editing" | "editLabelApiRef" | "onExitEditMode"> {
     allowClose?: boolean;
     allowDelete?: boolean;

package/types/filter-pill-menu/FilterPillMenu.d.ts

@@ -1,6 +1,6 @@
-import { MenuActionHandler } from "@vuu-ui/vuu-data-types";
-import { MenuOptions } from "../filter-pill/FilterPillMenuOptions";
+import { MenuOptions } from "./FilterPillMenuOptions";
 import { Filter } from "@vuu-ui/vuu-filter-types";
+import { MenuActionHandler } from "@vuu-ui/vuu-context-menu";
 export interface FilterMenuOptions extends MenuOptions {
     filter: Filter;
 }

package/types/filter-pill-menu/FilterPillMenuOptions.d.ts

@@ -1,4 +1,4 @@
-import { ContextMenuItemDescriptor } from "@vuu-ui/vuu-data-types";
+import { ContextMenuItemDescriptor } from "@vuu-ui/vuu-context-menu";
 export type MenuOptions = {
     [key: string]: unknown;
 };

package/cjs/filter-pill/FilterPillMenuOptions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FilterPillMenuOptions.js","sources":["../../src/filter-pill/FilterPillMenuOptions.ts"],"sourcesContent":["import { ContextMenuItemDescriptor } from \"@vuu-ui/vuu-data-types\";\n\nexport type MenuOptions = { [key: string]: unknown };\n\nexport interface FilterPillMenuOptions {\n  tabIndex: number;\n}\n\nexport const isFilterPillMenuOptions = (\n  options: unknown,\n): options is FilterPillMenuOptions =>\n  typeof options === \"object\" && options !== null && \"filter\" in options;\n\nexport const closeCommand = (options?: MenuOptions) =>\n  ({\n    label: `Close`,\n    location: \"filter\",\n    action: `close-filter`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const deleteCommand = (options?: MenuOptions) =>\n  ({\n    label: `Delete`,\n    location: \"filter\",\n    action: `delete-filter`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const renameCommand = (options?: MenuOptions) =>\n  ({\n    label: `Rename`,\n    location: \"filter\",\n    action: `rename-filter`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const editCommand = (options?: MenuOptions) =>\n  ({\n    label: `Edit`,\n    location: \"filter\",\n    action: \"edit-filter\",\n    options,\n  }) as ContextMenuItemDescriptor;\n"],"names":[],"mappings":";;AAaa,MAAA,YAAA,GAAe,CAAC,OAC1B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,KAAA,CAAA;AAAA,EACP,QAAU,EAAA,QAAA;AAAA,EACV,MAAQ,EAAA,CAAA,YAAA,CAAA;AAAA,EACR;AACF,CAAA;AAEW,MAAA,aAAA,GAAgB,CAAC,OAC3B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,MAAA,CAAA;AAAA,EACP,QAAU,EAAA,QAAA;AAAA,EACV,MAAQ,EAAA,CAAA,aAAA,CAAA;AAAA,EACR;AACF,CAAA;AAEW,MAAA,aAAA,GAAgB,CAAC,OAC3B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,MAAA,CAAA;AAAA,EACP,QAAU,EAAA,QAAA;AAAA,EACV,MAAQ,EAAA,CAAA,aAAA,CAAA;AAAA,EACR;AACF,CAAA;AAEW,MAAA,WAAA,GAAc,CAAC,OACzB,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,IAAA,CAAA;AAAA,EACP,QAAU,EAAA,QAAA;AAAA,EACV,MAAQ,EAAA,aAAA;AAAA,EACR;AACF,CAAA;;;;;;;"}

package/esm/filter-pill/FilterPillMenuOptions.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"FilterPillMenuOptions.js","sources":["../../src/filter-pill/FilterPillMenuOptions.ts"],"sourcesContent":["import { ContextMenuItemDescriptor } from \"@vuu-ui/vuu-data-types\";\n\nexport type MenuOptions = { [key: string]: unknown };\n\nexport interface FilterPillMenuOptions {\n  tabIndex: number;\n}\n\nexport const isFilterPillMenuOptions = (\n  options: unknown,\n): options is FilterPillMenuOptions =>\n  typeof options === \"object\" && options !== null && \"filter\" in options;\n\nexport const closeCommand = (options?: MenuOptions) =>\n  ({\n    label: `Close`,\n    location: \"filter\",\n    action: `close-filter`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const deleteCommand = (options?: MenuOptions) =>\n  ({\n    label: `Delete`,\n    location: \"filter\",\n    action: `delete-filter`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const renameCommand = (options?: MenuOptions) =>\n  ({\n    label: `Rename`,\n    location: \"filter\",\n    action: `rename-filter`,\n    options,\n  }) as ContextMenuItemDescriptor;\n\nexport const editCommand = (options?: MenuOptions) =>\n  ({\n    label: `Edit`,\n    location: \"filter\",\n    action: \"edit-filter\",\n    options,\n  }) as ContextMenuItemDescriptor;\n"],"names":[],"mappings":"AAaa,MAAA,YAAA,GAAe,CAAC,OAC1B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,KAAA,CAAA;AAAA,EACP,QAAU,EAAA,QAAA;AAAA,EACV,MAAQ,EAAA,CAAA,YAAA,CAAA;AAAA,EACR;AACF,CAAA;AAEW,MAAA,aAAA,GAAgB,CAAC,OAC3B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,MAAA,CAAA;AAAA,EACP,QAAU,EAAA,QAAA;AAAA,EACV,MAAQ,EAAA,CAAA,aAAA,CAAA;AAAA,EACR;AACF,CAAA;AAEW,MAAA,aAAA,GAAgB,CAAC,OAC3B,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,MAAA,CAAA;AAAA,EACP,QAAU,EAAA,QAAA;AAAA,EACV,MAAQ,EAAA,CAAA,aAAA,CAAA;AAAA,EACR;AACF,CAAA;AAEW,MAAA,WAAA,GAAc,CAAC,OACzB,MAAA;AAAA,EACC,KAAO,EAAA,CAAA,IAAA,CAAA;AAAA,EACP,QAAU,EAAA,QAAA;AAAA,EACV,MAAQ,EAAA,aAAA;AAAA,EACR;AACF,CAAA;;;;"}

package/types/filter-pill/FilterPillMenuOptions.d.ts

@@ -1,12 +0,0 @@
-import { ContextMenuItemDescriptor } from "@vuu-ui/vuu-data-types";
-export type MenuOptions = {
-    [key: string]: unknown;
-};
-export interface FilterPillMenuOptions {
-    tabIndex: number;
-}
-export declare const isFilterPillMenuOptions: (options: unknown) => options is FilterPillMenuOptions;
-export declare const closeCommand: (options?: MenuOptions) => ContextMenuItemDescriptor;
-export declare const deleteCommand: (options?: MenuOptions) => ContextMenuItemDescriptor;
-export declare const renameCommand: (options?: MenuOptions) => ContextMenuItemDescriptor;
-export declare const editCommand: (options?: MenuOptions) => ContextMenuItemDescriptor;