@vuu-ui/vuu-filters 0.13.25 → 0.13.26

package/cjs/custom-filters/CustomFilters.js

@@ -2,7 +2,6 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
-var vuuPopups = require('@vuu-ui/vuu-popups');
 var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
 var FilterEditor = require('../filter-editor/FilterEditor.js');
 var FilterPill = require('../filter-pill/FilterPill.js');
@@ -78,17 +77,7 @@ const CustomFilters = ({
           variant: "secondary"
         }
       ),
-      promptProps ? /* @__PURE__ */ jsxRuntime.jsx(
-        vuuPopups.Prompt,
-        {
-          ...promptProps,
-          PopupProps: {
-            anchorElement: rootRef,
-            offsetTop: 16,
-            placement: "below-center"
-          }
-        }
-      ) : null
+      promptProps ? /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Prompt, { ...promptProps, open: true }) : null
     ] }),
     filterModel && vuuTable && /* @__PURE__ */ jsxRuntime.jsx(
       FilterEditor.FilterEditor,

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

@@ -1 +1 @@
-{"version":3,"file":"CustomFilters.js","sources":["../../../../packages/vuu-filters/src/custom-filters/CustomFilters.tsx"],"sourcesContent":["import { Prompt } from \"@vuu-ui/vuu-popups\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { HTMLAttributes, ReactElement, useRef } from \"react\";\nimport { type FilterBarProps } from \"../filter-bar\";\nimport { FilterEditor } from \"../filter-editor\";\nimport { FilterPill } from \"../filter-pill\";\nimport { FilterModel } from \"../FilterModel\";\nimport { isEditFilterState, useCustomFilters } from \"./useCustomFilters\";\n\nconst classBase = \"vuuCustomFilters\";\n\nexport interface CustomFilterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<\n      FilterBarProps,\n      | \"defaultFilterState\"\n      | \"filterState\"\n      | \"onApplyFilter\"\n      | \"onFilterDeleted\"\n      | \"onFilterRenamed\"\n      | \"onFilterStateChanged\"\n      | \"vuuTable\"\n    > {\n  columnDescriptors: ColumnDescriptor[];\n}\n\nexport const CustomFilters = ({\n  columnDescriptors,\n  defaultFilterState,\n  filterState,\n  onApplyFilter,\n  onFilterDeleted,\n  onFilterRenamed,\n  onFilterStateChanged,\n  vuuTable,\n}: CustomFilterProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const {\n    activeFilterIndex,\n    addButtonProps,\n    columnsByName,\n    filters,\n    interactedFilterState,\n    onCancelEdit,\n    onSave,\n    FilterPillProps,\n    promptProps,\n  } = useCustomFilters({\n    containerRef: rootRef,\n    columnDescriptors,\n    defaultFilterState,\n    filterState,\n    onApplyFilter,\n    onFilterStateChanged,\n    onFilterDeleted,\n    onFilterRenamed,\n  });\n\n  const indexOfFilterBeingRenamed =\n    interactedFilterState?.state === \"rename\"\n      ? interactedFilterState.index\n      : -1;\n\n  const filterModel = isEditFilterState(interactedFilterState?.state)\n    ? new FilterModel(interactedFilterState.filter)\n    : undefined;\n\n  const getFilterPills = () => {\n    const items: ReactElement[] = [];\n    filters.forEach((filter, i) => {\n      items.push(\n        <FilterPill\n          {...FilterPillProps}\n          editing={indexOfFilterBeingRenamed === i}\n          columnsByName={columnsByName}\n          data-index={i}\n          filter={filter}\n          key={`filter-${i}`}\n          selected={activeFilterIndex.includes(i)}\n        />,\n      );\n    });\n    return items;\n  };\n\n  return (\n    <>\n      <div className=\"vuuCustomFilters\" ref={rootRef}>\n        <div className={`${classBase}-filters`}>{getFilterPills()}</div>\n        <IconButton\n          {...addButtonProps}\n          aria-label=\"Add filter\"\n          data-selectable={false}\n          icon=\"plus\"\n          key=\"filter-add\"\n          tabIndex={0}\n          variant=\"secondary\"\n        />\n\n        {promptProps ? (\n          <Prompt\n            {...promptProps}\n            PopupProps={{\n              anchorElement: rootRef,\n              offsetTop: 16,\n              placement: \"below-center\",\n            }}\n          />\n        ) : null}\n      </div>\n      {filterModel && vuuTable && (\n        <FilterEditor\n          columnDescriptors={columnDescriptors}\n          key=\"filter-editor\"\n          onCancel={onCancelEdit}\n          onSave={onSave}\n          filter={interactedFilterState?.filter}\n          vuuTable={vuuTable}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["useRef","useCustomFilters","isEditFilterState","FilterModel","createElement","FilterPill","jsxs","Fragment","jsx","IconButton","Prompt","FilterEditor"],"mappings":"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"}
+{"version":3,"file":"CustomFilters.js","sources":["../../../../packages/vuu-filters/src/custom-filters/CustomFilters.tsx"],"sourcesContent":["import { Prompt } from \"@vuu-ui/vuu-ui-controls\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { IconButton } from \"@vuu-ui/vuu-ui-controls\";\nimport { HTMLAttributes, ReactElement, useRef } from \"react\";\nimport { type FilterBarProps } from \"../filter-bar\";\nimport { FilterEditor } from \"../filter-editor\";\nimport { FilterPill } from \"../filter-pill\";\nimport { FilterModel } from \"../FilterModel\";\nimport { isEditFilterState, useCustomFilters } from \"./useCustomFilters\";\n\nconst classBase = \"vuuCustomFilters\";\n\nexport interface CustomFilterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<\n      FilterBarProps,\n      | \"defaultFilterState\"\n      | \"filterState\"\n      | \"onApplyFilter\"\n      | \"onFilterDeleted\"\n      | \"onFilterRenamed\"\n      | \"onFilterStateChanged\"\n      | \"vuuTable\"\n    > {\n  columnDescriptors: ColumnDescriptor[];\n}\n\nexport const CustomFilters = ({\n  columnDescriptors,\n  defaultFilterState,\n  filterState,\n  onApplyFilter,\n  onFilterDeleted,\n  onFilterRenamed,\n  onFilterStateChanged,\n  vuuTable,\n}: CustomFilterProps) => {\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const {\n    activeFilterIndex,\n    addButtonProps,\n    columnsByName,\n    filters,\n    interactedFilterState,\n    onCancelEdit,\n    onSave,\n    FilterPillProps,\n    promptProps,\n  } = useCustomFilters({\n    containerRef: rootRef,\n    columnDescriptors,\n    defaultFilterState,\n    filterState,\n    onApplyFilter,\n    onFilterStateChanged,\n    onFilterDeleted,\n    onFilterRenamed,\n  });\n\n  const indexOfFilterBeingRenamed =\n    interactedFilterState?.state === \"rename\"\n      ? interactedFilterState.index\n      : -1;\n\n  const filterModel = isEditFilterState(interactedFilterState?.state)\n    ? new FilterModel(interactedFilterState.filter)\n    : undefined;\n\n  const getFilterPills = () => {\n    const items: ReactElement[] = [];\n    filters.forEach((filter, i) => {\n      items.push(\n        <FilterPill\n          {...FilterPillProps}\n          editing={indexOfFilterBeingRenamed === i}\n          columnsByName={columnsByName}\n          data-index={i}\n          filter={filter}\n          key={`filter-${i}`}\n          selected={activeFilterIndex.includes(i)}\n        />,\n      );\n    });\n    return items;\n  };\n\n  return (\n    <>\n      <div className=\"vuuCustomFilters\" ref={rootRef}>\n        <div className={`${classBase}-filters`}>{getFilterPills()}</div>\n        <IconButton\n          {...addButtonProps}\n          aria-label=\"Add filter\"\n          data-selectable={false}\n          icon=\"plus\"\n          key=\"filter-add\"\n          tabIndex={0}\n          variant=\"secondary\"\n        />\n\n        {promptProps ? <Prompt {...promptProps} open /> : null}\n      </div>\n      {filterModel && vuuTable && (\n        <FilterEditor\n          columnDescriptors={columnDescriptors}\n          key=\"filter-editor\"\n          onCancel={onCancelEdit}\n          onSave={onSave}\n          filter={interactedFilterState?.filter}\n          vuuTable={vuuTable}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["useRef","useCustomFilters","isEditFilterState","FilterModel","createElement","FilterPill","jsxs","Fragment","jsx","IconButton","Prompt","FilterEditor"],"mappings":";;;;;;;;;;AAUA,MAAM,SAAY,GAAA,kBAAA;AAiBX,MAAM,gBAAgB,CAAC;AAAA,EAC5B,iBAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA,oBAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAM,MAAA,OAAA,GAAUA,aAAuB,IAAI,CAAA;AAE3C,EAAM,MAAA;AAAA,IACJ,iBAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,qBAAA;AAAA,IACA,YAAA;AAAA,IACA,MAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,MACEC,iCAAiB,CAAA;AAAA,IACnB,YAAc,EAAA,OAAA;AAAA,IACd,iBAAA;AAAA,IACA,kBAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,oBAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,yBACJ,GAAA,qBAAA,EAAuB,KAAU,KAAA,QAAA,GAC7B,sBAAsB,KACtB,GAAA,CAAA,CAAA;AAEN,EAAM,MAAA,WAAA,GAAcC,mCAAkB,qBAAuB,EAAA,KAAK,IAC9D,IAAIC,uBAAA,CAAY,qBAAsB,CAAA,MAAM,CAC5C,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAA,MAAM,QAAwB,EAAC;AAC/B,IAAQ,OAAA,CAAA,OAAA,CAAQ,CAAC,MAAA,EAAQ,CAAM,KAAA;AAC7B,MAAM,KAAA,CAAA,IAAA;AAAA,wBACJC,mBAAA;AAAA,UAACC,qBAAA;AAAA,UAAA;AAAA,YACE,GAAG,eAAA;AAAA,YACJ,SAAS,yBAA8B,KAAA,CAAA;AAAA,YACvC,aAAA;AAAA,YACA,YAAY,EAAA,CAAA;AAAA,YACZ,MAAA;AAAA,YACA,GAAA,EAAK,UAAU,CAAC,CAAA,CAAA;AAAA,YAChB,QAAA,EAAU,iBAAkB,CAAA,QAAA,CAAS,CAAC;AAAA;AAAA;AACxC,OACF;AAAA,KACD,CAAA;AACD,IAAO,OAAA,KAAA;AAAA,GACT;AAEA,EAAA,uBAEIC,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAAD,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAU,kBAAmB,EAAA,GAAA,EAAK,OACrC,EAAA,QAAA,EAAA;AAAA,sBAAAE,cAAA,CAAC,SAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CAAA,QAAA,CAAA,EAAa,0BAAiB,EAAA,CAAA;AAAA,sBAC1DJ,mBAAA;AAAA,QAACK,wBAAA;AAAA,QAAA;AAAA,UACE,GAAG,cAAA;AAAA,UACJ,YAAW,EAAA,YAAA;AAAA,UACX,iBAAiB,EAAA,KAAA;AAAA,UACjB,IAAK,EAAA,MAAA;AAAA,UACL,GAAI,EAAA,YAAA;AAAA,UACJ,QAAU,EAAA,CAAA;AAAA,UACV,OAAQ,EAAA;AAAA;AAAA,OACV;AAAA,MAEC,8BAAeD,cAAA,CAAAE,oBAAA,EAAA,EAAQ,GAAG,WAAa,EAAA,IAAA,EAAI,MAAC,CAAK,GAAA;AAAA,KACpD,EAAA,CAAA;AAAA,IACC,eAAe,QACd,oBAAAF,cAAA;AAAA,MAACG,yBAAA;AAAA,MAAA;AAAA,QACC,iBAAA;AAAA,QAEA,QAAU,EAAA,YAAA;AAAA,QACV,MAAA;AAAA,QACA,QAAQ,qBAAuB,EAAA,MAAA;AAAA,QAC/B;AAAA,OAAA;AAAA,MAJI;AAAA;AAKN,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/cjs/custom-filters/useCustomFilters.js

@@ -95,17 +95,19 @@ const useCustomFilters = ({
         focusFilterPill();
       };
       return {
+        className: "vuuFilterDeletePrompt",
         confirmButtonLabel: "Remove",
         icon: "warn-triangle",
+        initialFocusedItem: "confirm",
         onCancel: close,
         onClose: close,
         onConfirm: () => {
           setPromptProps(null);
           deleteConfirmed(filter);
         },
-        text: `Are you sure you want to delete  ${filter.name}`,
+        children: `Are you sure you want to delete filter '${filter.name}'`,
         title: "Remove Filter",
-        variant: "warn"
+        status: "warning"
       };
     },
     [deleteConfirmed, focusFilterPill]

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

@@ -1 +1 @@
-{"version":3,"file":"useCustomFilters.js","sources":["../../../../packages/vuu-filters/src/custom-filters/useCustomFilters.ts"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { PromptProps } from \"@vuu-ui/vuu-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 | null>;\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":["../../../../packages/vuu-filters/src/custom-filters/useCustomFilters.ts"],"sourcesContent":["import { ColumnDescriptorsByName, Filter } from \"@vuu-ui/vuu-filter-types\";\nimport { PromptProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  EditableLabelProps,\n  EditAPI,\n  NullEditAPI,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\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 | null>;\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        className: \"vuuFilterDeletePrompt\",\n        confirmButtonLabel: \"Remove\",\n        icon: \"warn-triangle\",\n        initialFocusedItem: \"confirm\",\n        onCancel: close,\n        onClose: close,\n        onConfirm: () => {\n          setPromptProps(null);\n          deleteConfirmed(filter);\n        },\n        children: `Are you sure you want to delete filter '${filter.name}'`,\n        title: \"Remove Filter\",\n        status: \"warning\",\n      } as PromptProps;\n    },\n    [deleteConfirmed, focusFilterPill],\n  );\n\n  const deleteFilter = useCallback(\n    (filter: Filter, withPrompt: boolean) => {\n      if (withPrompt) {\n        setPromptProps(getDeletePrompt(filter));\n      } else {\n        deleteConfirmed(filter);\n      }\n    },\n    [deleteConfirmed, getDeletePrompt],\n  );\n\n  // TODO handle cancel edit name\n  const handleExitEditFilterName: EditableLabelProps[\"onExitEditMode\"] =\n    useCallback(\n      (_, editedValue = \"\") => {\n        if (\n          interactedFilterState?.state === \"rename\" &&\n          interactedFilterState.filter\n        ) {\n          const { filter } = interactedFilterState;\n          const indexOfEditedFilter = onRenameFilter(filter, editedValue);\n\n          setInteractedFilterState(undefined);\n          focusFilterPill(indexOfEditedFilter);\n        }\n        setInteractedFilterState(undefined);\n      },\n      [focusFilterPill, interactedFilterState, onRenameFilter],\n    );\n\n  const handlePillMenuAction = useCallback<MenuActionHandler>(\n    (menuId, options) => {\n      switch (menuId) {\n        case \"delete-filter\": {\n          const { filter } = options as FilterMenuOptions;\n          deleteFilter(filter, true);\n          return true;\n        }\n        case \"rename-filter\": {\n          const { filter } = options as FilterMenuOptions;\n          const index = filters.indexOf(filter);\n          editPillLabel(index, filter);\n          return true;\n        }\n        case \"edit-filter\": {\n          const { filter } = options as FilterMenuOptions;\n          setInteractedFilterState({\n            filter,\n            index: filters.indexOf(filter),\n            state: \"edit\",\n          });\n          return true;\n        }\n        default:\n          return false;\n      }\n    },\n    [deleteFilter, editPillLabel, filters],\n  );\n\n  const handlePillKeyDown = useCallback<KeyboardEventHandler>((e) => {\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowLeft\") {\n      navigateToNextItem(e.target, e.key === \"ArrowLeft\" ? \"bwd\" : \"fwd\");\n    }\n  }, []);\n\n  const addIfNewElseUpdate = useCallback(\n    (newOrUpdatedFilter: Filter, existing: Filter | undefined) => {\n      if (existing === undefined) {\n        const idx = onAddFilter(newOrUpdatedFilter);\n        focusFilterPill(idx);\n        editPillLabel(idx, newOrUpdatedFilter);\n      } else {\n        const idx = onChangeFilter(existing, newOrUpdatedFilter);\n        focusFilterPill(idx);\n      }\n    },\n    [editPillLabel, focusFilterPill, onAddFilter, onChangeFilter],\n  );\n\n  const filterSaveHandler = useCallback<FilterEditSaveHandler>(\n    (filter) => {\n      if (interactedFilterState) {\n        const { filter: existingFilter } = interactedFilterState;\n        setInteractedFilterState(undefined);\n        addIfNewElseUpdate(filter, existingFilter);\n      }\n    },\n    [addIfNewElseUpdate, interactedFilterState],\n  );\n\n  const handlePillClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n    (e) => {\n      const isEditing = (e.target as HTMLElement).querySelector(\n        \".vuuEditableLabel-editing\",\n      );\n      if (!isEditing) {\n        const pill = queryClosest(e.target, \".vuuFilterPill\");\n        if (pill) {\n          const index = getElementDataIndex(pill);\n          onToggleFilterActive(index, e.shiftKey);\n        }\n      }\n    },\n    [onToggleFilterActive],\n  );\n\n  const FilterPillProps: Omit<FilterPillProps, \"filter\" | \"selected\"> = {\n    editLabelApiRef: editPillLabelAPI,\n    // onBeginEdit: handleBeginEditFilterName,\n    onClick: handlePillClick,\n    onKeyDown: handlePillKeyDown,\n    onMenuAction: handlePillMenuAction,\n    onExitEditMode: handleExitEditFilterName,\n  };\n\n  const handleClickAddButton = useCallback(() => {\n    setInteractedFilterState({\n      index: -1,\n      state: \"create\",\n    });\n  }, []);\n\n  const handleKeyDownAddButton = useCallback<KeyboardEventHandler>((evt) => {\n    if (evt.key === \"ArrowLeft\") {\n      navigateToNextItem(evt.target, \"bwd\");\n    }\n  }, []);\n\n  const handleCancelEdit = useCallback<FilterEditCancelHandler>(() => {\n    if (interactedFilterState) {\n      const { index } = interactedFilterState;\n      if (index === -1) {\n        addButtonRef.current?.focus();\n      } else {\n        focusFilterPill(index);\n      }\n      setInteractedFilterState(undefined);\n    }\n  }, [focusFilterPill, interactedFilterState]);\n\n  const addButtonProps = {\n    ref: addButtonRef,\n    onClick: handleClickAddButton,\n    onKeyDown: handleKeyDownAddButton,\n  };\n\n  return {\n    FilterPillProps,\n    activeFilterIndex,\n    addButtonProps,\n    columnsByName,\n    filters,\n    interactedFilterState,\n    onCancelEdit: handleCancelEdit,\n    onSave: filterSaveHandler,\n    promptProps,\n  };\n};\n\nfunction columnDescriptorsByName(\n  columns: 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":";;;;;;;;AAoCO,MAAM,iBAAoB,GAAA,CAC/B,WAEA,KAAA,WAAA,KAAgB,UAAU,WAAgB,KAAA;AAsBrC,MAAM,mBAAmB,CAAC;AAAA,EAC/B,iBAAA;AAAA,EACA,YAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA;AAAA,EACA,eAAA;AAAA,EACA,eAAA;AAAA,EACA;AACF,CAA6B,KAAA;AAC3B,EAAM,MAAA,YAAA,GAAeA,aAA0B,IAAI,CAAA;AACnD,EAAA,MAAM,CAAC,qBAAA,EAAuB,wBAAwB,CAAA,GAAIC,cAExD,EAAA;AACF,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIA,eAA6B,IAAI,CAAA;AACvE,EAAM,MAAA,gBAAA,GAAmBD,aAAgBE,yBAAW,CAAA;AAEpD,EAAA,MAAM,aAAgB,GAAAC,aAAA;AAAA,IACpB,MAAM,wBAAwB,iBAAiB,CAAA;AAAA,IAC/C,CAAC,iBAAiB;AAAA,GACpB;AAEA,EAAM,MAAA;AAAA,IACJ,iBAAA;AAAA,IACA,OAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,MACEC,6BAAe,CAAA;AAAA,IACjB,kBAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,gBAAgB,iBAAkB,CAAA,GAAA,CAAI,CAAC,CAAM,KAAA,OAAA,CAAQ,CAAC,CAAC,CAAA;AAC7D,IAAM,MAAA,WAAA,GAAc,CAAC,MAAoB,KAAA;AACvC,MAAA,MAAM,QAAQ,MAAS,GAAAC,sBAAA,CAAc,QAAQ,EAAE,aAAA,EAAe,CAAI,GAAA,EAAA;AAClE,MAAA,aAAA,CAAc,EAAE,MAAA,EAAQ,KAAO,EAAA,YAAA,EAAc,QAAQ,CAAA;AAAA,KACvD;AACA,IAAI,IAAA,aAAA,CAAc,WAAW,CAAG,EAAA;AAC9B,MAAY,WAAA,EAAA;AAAA,KACd,MAAA,IAAW,aAAc,CAAA,MAAA,KAAW,CAAG,EAAA;AACrC,MAAM,MAAA,CAAC,MAAM,CAAI,GAAA,aAAA;AACjB,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,KACb,MAAA;AACL,MAAA,WAAA,CAAY,EAAE,EAAA,EAAI,KAAO,EAAA,OAAA,EAAS,eAAe,CAAA;AAAA;AACnD,KACC,CAAC,iBAAA,EAAmB,aAAe,EAAA,OAAA,EAAS,aAAa,CAAC,CAAA;AAE7D,EAAA,MAAM,aAAgB,GAAAC,iBAAA,CAAY,CAAC,KAAA,EAAe,MAAmB,KAAA;AACnE,IAAA,UAAA,CAAW,MAAM;AACf,MAAyB,wBAAA,CAAA;AAAA,QACvB,MAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAO,EAAA;AAAA,OACR,CAAA;AAAA,OACA,GAAG,CAAA;AAAA,GACR,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,eAAkB,GAAAA,iBAAA;AAAA,IACtB,CAAC,QAAQ,CAAM,KAAA;AACb,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAM,MAAA,MAAA,GAAS,aAAa,OAAS,EAAA,aAAA;AAAA,UACnC,8BAA8B,KAAK,CAAA,SAAA;AAAA,SACrC;AACA,QAAA,IAAI,MAAQ,EAAA;AACV,UAAA,MAAA,CAAO,KAAM,EAAA;AAAA;AACf,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,MAAM,eAAkB,GAAAA,iBAAA;AAAA,IACtB,CAAC,MAAmB,KAAA;AAClB,MAAA,cAAA,CAAe,MAAM,CAAA;AAGrB,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,IAAI,QAAQ,MAAQ,EAAA;AAClB,UAAA,eAAA,CAAgB,CAAC,CAAA;AAAA;AACnB,OACD,CAAA;AAAA,KACH;AAAA,IACA,CAAC,OAAA,CAAQ,MAAQ,EAAA,eAAA,EAAiB,cAAc;AAAA,GAClD;AAEA,EAAA,MAAM,eAAkB,GAAAJ,aAAA;AAAA,IACtB,MAAM,CAAC,MAAmB,KAAA;AACxB,MAAA,MAAM,QAAQ,MAAM;AAClB,QAAA,cAAA,CAAe,IAAI,CAAA;AACnB,QAAgB,eAAA,EAAA;AAAA,OAClB;AACA,MAAO,OAAA;AAAA,QACL,SAAW,EAAA,uBAAA;AAAA,QACX,kBAAoB,EAAA,QAAA;AAAA,QACpB,IAAM,EAAA,eAAA;AAAA,QACN,kBAAoB,EAAA,SAAA;AAAA,QACpB,QAAU,EAAA,KAAA;AAAA,QACV,OAAS,EAAA,KAAA;AAAA,QACT,WAAW,MAAM;AACf,UAAA,cAAA,CAAe,IAAI,CAAA;AACnB,UAAA,eAAA,CAAgB,MAAM,CAAA;AAAA,SACxB;AAAA,QACA,QAAA,EAAU,CAA2C,wCAAA,EAAA,MAAA,CAAO,IAAI,CAAA,CAAA,CAAA;AAAA,QAChE,KAAO,EAAA,eAAA;AAAA,QACP,MAAQ,EAAA;AAAA,OACV;AAAA,KACF;AAAA,IACA,CAAC,iBAAiB,eAAe;AAAA,GACnC;AAEA,EAAA,MAAM,YAAe,GAAAI,iBAAA;AAAA,IACnB,CAAC,QAAgB,UAAwB,KAAA;AACvC,MAAA,IAAI,UAAY,EAAA;AACd,QAAe,cAAA,CAAA,eAAA,CAAgB,MAAM,CAAC,CAAA;AAAA,OACjC,MAAA;AACL,QAAA,eAAA,CAAgB,MAAM,CAAA;AAAA;AACxB,KACF;AAAA,IACA,CAAC,iBAAiB,eAAe;AAAA,GACnC;AAGA,EAAA,MAAM,wBACJ,GAAAA,iBAAA;AAAA,IACE,CAAC,CAAG,EAAA,WAAA,GAAc,EAAO,KAAA;AACvB,MAAA,IACE,qBAAuB,EAAA,KAAA,KAAU,QACjC,IAAA,qBAAA,CAAsB,MACtB,EAAA;AACA,QAAM,MAAA,EAAE,QAAW,GAAA,qBAAA;AACnB,QAAM,MAAA,mBAAA,GAAsB,cAAe,CAAA,MAAA,EAAQ,WAAW,CAAA;AAE9D,QAAA,wBAAA,CAAyB,KAAS,CAAA,CAAA;AAClC,QAAA,eAAA,CAAgB,mBAAmB,CAAA;AAAA;AAErC,MAAA,wBAAA,CAAyB,KAAS,CAAA,CAAA;AAAA,KACpC;AAAA,IACA,CAAC,eAAiB,EAAA,qBAAA,EAAuB,cAAc;AAAA,GACzD;AAEF,EAAA,MAAM,oBAAuB,GAAAA,iBAAA;AAAA,IAC3B,CAAC,QAAQ,OAAY,KAAA;AACnB,MAAA,QAAQ,MAAQ;AAAA,QACd,KAAK,eAAiB,EAAA;AACpB,UAAM,MAAA,EAAE,QAAW,GAAA,OAAA;AACnB,UAAA,YAAA,CAAa,QAAQ,IAAI,CAAA;AACzB,UAAO,OAAA,IAAA;AAAA;AACT,QACA,KAAK,eAAiB,EAAA;AACpB,UAAM,MAAA,EAAE,QAAW,GAAA,OAAA;AACnB,UAAM,MAAA,KAAA,GAAQ,OAAQ,CAAA,OAAA,CAAQ,MAAM,CAAA;AACpC,UAAA,aAAA,CAAc,OAAO,MAAM,CAAA;AAC3B,UAAO,OAAA,IAAA;AAAA;AACT,QACA,KAAK,aAAe,EAAA;AAClB,UAAM,MAAA,EAAE,QAAW,GAAA,OAAA;AACnB,UAAyB,wBAAA,CAAA;AAAA,YACvB,MAAA;AAAA,YACA,KAAA,EAAO,OAAQ,CAAA,OAAA,CAAQ,MAAM,CAAA;AAAA,YAC7B,KAAO,EAAA;AAAA,WACR,CAAA;AACD,UAAO,OAAA,IAAA;AAAA;AACT,QACA;AACE,UAAO,OAAA,KAAA;AAAA;AACX,KACF;AAAA,IACA,CAAC,YAAc,EAAA,aAAA,EAAe,OAAO;AAAA,GACvC;AAEA,EAAM,MAAA,iBAAA,GAAoBA,iBAAkC,CAAA,CAAC,CAAM,KAAA;AACjE,IAAA,IAAI,CAAE,CAAA,GAAA,KAAQ,YAAgB,IAAA,CAAA,CAAE,QAAQ,WAAa,EAAA;AACnD,MAAAC,2CAAA,CAAmB,EAAE,MAAQ,EAAA,CAAA,CAAE,GAAQ,KAAA,WAAA,GAAc,QAAQ,KAAK,CAAA;AAAA;AACpE,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,kBAAqB,GAAAD,iBAAA;AAAA,IACzB,CAAC,oBAA4B,QAAiC,KAAA;AAC5D,MAAA,IAAI,aAAa,KAAW,CAAA,EAAA;AAC1B,QAAM,MAAA,GAAA,GAAM,YAAY,kBAAkB,CAAA;AAC1C,QAAA,eAAA,CAAgB,GAAG,CAAA;AACnB,QAAA,aAAA,CAAc,KAAK,kBAAkB,CAAA;AAAA,OAChC,MAAA;AACL,QAAM,MAAA,GAAA,GAAM,cAAe,CAAA,QAAA,EAAU,kBAAkB,CAAA;AACvD,QAAA,eAAA,CAAgB,GAAG,CAAA;AAAA;AACrB,KACF;AAAA,IACA,CAAC,aAAA,EAAe,eAAiB,EAAA,WAAA,EAAa,cAAc;AAAA,GAC9D;AAEA,EAAA,MAAM,iBAAoB,GAAAA,iBAAA;AAAA,IACxB,CAAC,MAAW,KAAA;AACV,MAAA,IAAI,qBAAuB,EAAA;AACzB,QAAM,MAAA,EAAE,MAAQ,EAAA,cAAA,EAAmB,GAAA,qBAAA;AACnC,QAAA,wBAAA,CAAyB,KAAS,CAAA,CAAA;AAClC,QAAA,kBAAA,CAAmB,QAAQ,cAAc,CAAA;AAAA;AAC3C,KACF;AAAA,IACA,CAAC,oBAAoB,qBAAqB;AAAA,GAC5C;AAEA,EAAA,MAAM,eAAkB,GAAAA,iBAAA;AAAA,IACtB,CAAC,CAAM,KAAA;AACL,MAAM,MAAA,SAAA,GAAa,EAAE,MAAuB,CAAA,aAAA;AAAA,QAC1C;AAAA,OACF;AACA,MAAA,IAAI,CAAC,SAAW,EAAA;AACd,QAAA,MAAM,IAAO,GAAAE,qBAAA,CAAa,CAAE,CAAA,MAAA,EAAQ,gBAAgB,CAAA;AACpD,QAAA,IAAI,IAAM,EAAA;AACR,UAAM,MAAA,KAAA,GAAQC,6BAAoB,IAAI,CAAA;AACtC,UAAqB,oBAAA,CAAA,KAAA,EAAO,EAAE,QAAQ,CAAA;AAAA;AACxC;AACF,KACF;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAA,MAAMC,gBAAgE,GAAA;AAAA,IACpE,eAAiB,EAAA,gBAAA;AAAA;AAAA,IAEjB,OAAS,EAAA,eAAA;AAAA,IACT,SAAW,EAAA,iBAAA;AAAA,IACX,YAAc,EAAA,oBAAA;AAAA,IACd,cAAgB,EAAA;AAAA,GAClB;AAEA,EAAM,MAAA,oBAAA,GAAuBJ,kBAAY,MAAM;AAC7C,IAAyB,wBAAA,CAAA;AAAA,MACvB,KAAO,EAAA,CAAA,CAAA;AAAA,MACP,KAAO,EAAA;AAAA,KACR,CAAA;AAAA,GACH,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,sBAAA,GAAyBA,iBAAkC,CAAA,CAAC,GAAQ,KAAA;AACxE,IAAI,IAAA,GAAA,CAAI,QAAQ,WAAa,EAAA;AAC3B,MAAmBC,2CAAA,CAAA,GAAA,CAAI,QAAQ,KAAK,CAAA;AAAA;AACtC,GACF,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,gBAAA,GAAmBD,kBAAqC,MAAM;AAClE,IAAA,IAAI,qBAAuB,EAAA;AACzB,MAAM,MAAA,EAAE,OAAU,GAAA,qBAAA;AAClB,MAAA,IAAI,UAAU,CAAI,CAAA,EAAA;AAChB,QAAA,YAAA,CAAa,SAAS,KAAM,EAAA;AAAA,OACvB,MAAA;AACL,QAAA,eAAA,CAAgB,KAAK,CAAA;AAAA;AAEvB,MAAA,wBAAA,CAAyB,KAAS,CAAA,CAAA;AAAA;AACpC,GACC,EAAA,CAAC,eAAiB,EAAA,qBAAqB,CAAC,CAAA;AAE3C,EAAA,MAAM,cAAiB,GAAA;AAAA,IACrB,GAAK,EAAA,YAAA;AAAA,IACL,OAAS,EAAA,oBAAA;AAAA,IACT,SAAW,EAAA;AAAA,GACb;AAEA,EAAO,OAAA;AAAA,IACL,eAAAI,EAAAA,gBAAAA;AAAA,IACA,iBAAA;AAAA,IACA,cAAA;AAAA,IACA,aAAA;AAAA,IACA,OAAA;AAAA,IACA,qBAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,MAAQ,EAAA,iBAAA;AAAA,IACR;AAAA,GACF;AACF;AAEA,SAAS,wBACP,OACyB,EAAA;AACzB,EAAA,OAAO,OAAQ,CAAA,MAAA,CAAO,CAAC,CAAA,EAAG,SAAS,EAAE,GAAG,CAAG,EAAA,CAAC,IAAI,IAAI,GAAG,GAAI,EAAA,CAAA,EAAI,EAAE,CAAA;AACnE;;;;;"}

package/cjs/filter-clause/ColumnPicker.js

@@ -11,7 +11,8 @@ const ColumnPicker = react.forwardRef(function ColumnPicker2({
   columns,
   inputProps,
   onSelect,
-  value: valueProp
+  value: valueProp,
+  dropdownOnAutofocus = true
 }, forwardedRef) {
   const comboProps = useExpandoCombobox.useExpandoComboBox({
     onSelect,
@@ -26,6 +27,7 @@ const ColumnPicker = react.forwardRef(function ColumnPicker2({
       "data-field": "column",
       ref: forwardedRef,
       title: "column",
+      dropdownOnAutofocus,
       children: columns.filter(
         ({ name }) => name.toLowerCase().includes(comboProps.value.toLowerCase())
       ).map(({ name, label = name }) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: name, children: label }, name))

package/cjs/filter-clause/ColumnPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnPicker.js","sources":["../../../../packages/vuu-filters/src/filter-clause/ColumnPicker.tsx"],"sourcesContent":["import type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ExpandoCombobox } from \"./ExpandoCombobox\";\nimport { ComboBoxProps, Option } from \"@salt-ds/core\";\nimport { ForwardedRef, SyntheticEvent, forwardRef } from \"react\";\nimport { useExpandoComboBox } from \"./useExpandoCombobox\";\n\nexport type ColumnPickerProps = Pick<\n  ComboBoxProps,\n  \"className\" | \"inputProps\" | \"value\"\n> & {\n  columns: ColumnDescriptor[];\n  onSelect: (evt: SyntheticEvent, columnName: string) => void;\n};\n\nexport const ColumnPicker = forwardRef(function ColumnPicker(\n  {\n    className,\n    columns,\n    inputProps,\n    onSelect,\n    value: valueProp,\n  }: ColumnPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const comboProps = useExpandoComboBox({\n    onSelect,\n    value: valueProp?.toString() ?? \"\",\n  });\n\n  return (\n    <ExpandoCombobox\n      {...comboProps}\n      inputProps={inputProps}\n      className={className}\n      data-field=\"column\"\n      ref={forwardedRef}\n      title=\"column\"\n    >\n      {columns\n        .filter(({ name }) =>\n          name.toLowerCase().includes(comboProps.value.toLowerCase()),\n        )\n        .map(({ name, label = name }) => (\n          <Option value={name} key={name}>\n            {label}\n          </Option>\n        ))}\n    </ExpandoCombobox>\n  );\n});\n"],"names":["forwardRef","ColumnPicker","useExpandoComboBox","jsx","ExpandoCombobox","Option"],"mappings":";;;;;;;;AAca,MAAA,YAAA,GAAeA,gBAAW,CAAA,SAASC,aAC9C,CAAA;AAAA,EACE,SAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAO,EAAA;AACT,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,aAAaC,qCAAmB,CAAA;AAAA,IACpC,QAAA;AAAA,IACA,KAAA,EAAO,SAAW,EAAA,QAAA,EAAc,IAAA;AAAA,GACjC,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,+BAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,UAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAW,EAAA,QAAA;AAAA,MACX,GAAK,EAAA,YAAA;AAAA,MACL,KAAM,EAAA,QAAA;AAAA,MAEL,QACE,EAAA,OAAA,CAAA,MAAA;AAAA,QAAO,CAAC,EAAE,IAAA,EACT,KAAA,IAAA,CAAK,WAAY,EAAA,CAAE,QAAS,CAAA,UAAA,CAAW,KAAM,CAAA,WAAA,EAAa;AAAA,OAE3D,CAAA,GAAA,CAAI,CAAC,EAAE,MAAM,KAAQ,GAAA,IAAA,EACpB,qBAAAD,cAAA,CAACE,WAAO,EAAA,EAAA,KAAA,EAAO,IACZ,EAAA,QAAA,EAAA,KAAA,EAAA,EADuB,IAE1B,CACD;AAAA;AAAA,GACL;AAEJ,CAAC;;;;"}
+{"version":3,"file":"ColumnPicker.js","sources":["../../../../packages/vuu-filters/src/filter-clause/ColumnPicker.tsx"],"sourcesContent":["import type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ExpandoCombobox } from \"./ExpandoCombobox\";\nimport { ComboBoxProps, Option } from \"@salt-ds/core\";\nimport { ForwardedRef, SyntheticEvent, forwardRef } from \"react\";\nimport { useExpandoComboBox } from \"./useExpandoCombobox\";\n\nexport type ColumnPickerProps = Pick<\n  ComboBoxProps,\n  \"className\" | \"inputProps\" | \"value\"\n> & {\n  columns: ColumnDescriptor[];\n  onSelect: (evt: SyntheticEvent, columnName: string) => void;\n  dropdownOnAutofocus?: boolean;\n};\n\nexport const ColumnPicker = forwardRef(function ColumnPicker(\n  {\n    className,\n    columns,\n    inputProps,\n    onSelect,\n    value: valueProp,\n    dropdownOnAutofocus = true,\n  }: ColumnPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const comboProps = useExpandoComboBox({\n    onSelect,\n    value: valueProp?.toString() ?? \"\",\n  });\n\n  return (\n    <ExpandoCombobox\n      {...comboProps}\n      inputProps={inputProps}\n      className={className}\n      data-field=\"column\"\n      ref={forwardedRef}\n      title=\"column\"\n      dropdownOnAutofocus={dropdownOnAutofocus}\n    >\n      {columns\n        .filter(({ name }) =>\n          name.toLowerCase().includes(comboProps.value.toLowerCase()),\n        )\n        .map(({ name, label = name }) => (\n          <Option value={name} key={name}>\n            {label}\n          </Option>\n        ))}\n    </ExpandoCombobox>\n  );\n});\n"],"names":["forwardRef","ColumnPicker","useExpandoComboBox","jsx","ExpandoCombobox","Option"],"mappings":";;;;;;;;AAea,MAAA,YAAA,GAAeA,gBAAW,CAAA,SAASC,aAC9C,CAAA;AAAA,EACE,SAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,mBAAsB,GAAA;AACxB,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,aAAaC,qCAAmB,CAAA;AAAA,IACpC,QAAA;AAAA,IACA,KAAA,EAAO,SAAW,EAAA,QAAA,EAAc,IAAA;AAAA,GACjC,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAACC,+BAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,UAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAW,EAAA,QAAA;AAAA,MACX,GAAK,EAAA,YAAA;AAAA,MACL,KAAM,EAAA,QAAA;AAAA,MACN,mBAAA;AAAA,MAEC,QACE,EAAA,OAAA,CAAA,MAAA;AAAA,QAAO,CAAC,EAAE,IAAA,EACT,KAAA,IAAA,CAAK,WAAY,EAAA,CAAE,QAAS,CAAA,UAAA,CAAW,KAAM,CAAA,WAAA,EAAa;AAAA,OAE3D,CAAA,GAAA,CAAI,CAAC,EAAE,MAAM,KAAQ,GAAA,IAAA,EACpB,qBAAAD,cAAA,CAACE,WAAO,EAAA,EAAA,KAAA,EAAO,IACZ,EAAA,QAAA,EAAA,KAAA,EAAA,EADuB,IAE1B,CACD;AAAA;AAAA,GACL;AAEJ,CAAC;;;;"}

package/cjs/filter-clause/ExpandoCombobox.js

@@ -26,6 +26,7 @@ const ExpandoCombobox = react.forwardRef(function ExpandoCombobox2({
   onSelectionChange,
   onOpenChange,
   value: valueProp,
+  dropdownOnAutofocus = true,
   ...props
 }, forwardedRef) {
   const targetWindow = window.useWindow();
@@ -73,12 +74,13 @@ const ExpandoCombobox = react.forwardRef(function ExpandoCombobox2({
       ...inputPropsProp,
       onFocus: (evt) => {
         inputPropsProp?.onFocus?.(evt);
+        if (!dropdownOnAutofocus) return;
         setTimeout(() => {
           setOpen(true);
         }, 100);
       }
     };
-  }, [inputPropsProp]);
+  }, [inputPropsProp, dropdownOnAutofocus]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {

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

@@ -1 +1 @@
-{"version":3,"file":"ExpandoCombobox.js","sources":["../../../../packages/vuu-filters/src/filter-clause/ExpandoCombobox.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { ComboBox, ComboBoxProps } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  ForwardedRef,\n  ReactElement,\n  Ref,\n  SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport expandoComboboxCss from \"./ExpandoCombobox.css\";\n\nconst classBase = \"vuuExpandoCombobox\";\n\nexport interface ExpandoComboboxProps<Item = string>\n  extends ComboBoxProps<Item> {\n  itemToString?: (item: Item) => string;\n}\n\nexport type ComboBoxOpenChangeHandler = Exclude<\n  ComboBoxProps[\"onOpenChange\"],\n  undefined\n>;\n\nconst defaultItemToString = (item: unknown) => {\n  if (typeof item === \"string\") {\n    return item;\n  } else {\n    return item?.toString() ?? \"\";\n  }\n};\nexport const ExpandoCombobox = forwardRef(function ExpandoCombobox<\n  Item = string,\n>(\n  {\n    children,\n    className,\n    inputProps: inputPropsProp,\n    itemToString = defaultItemToString,\n    multiselect,\n    onChange,\n    onSelectionChange,\n    onOpenChange,\n    value: valueProp,\n    ...props\n  }: ExpandoComboboxProps<Item>,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-expando-combobox\",\n    css: expandoComboboxCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useState(false);\n  const [value, setValue] = useState(\n    valueProp === undefined ? \"\" : valueProp.toString(),\n  );\n\n  const handleChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const value = evt.target.value;\n      onChange?.(evt);\n      setValue(value);\n    },\n    [onChange],\n  );\n\n  const handleSelectionChange = useCallback(\n    (evt: SyntheticEvent, newSelected: Item[]) => {\n      if (multiselect) {\n        onSelectionChange?.(evt, newSelected);\n      } else {\n        const [selectedValue] = newSelected;\n        setTimeout(() => {\n          onSelectionChange?.(evt, newSelected);\n          setValue(itemToString(selectedValue));\n        }, 100);\n      }\n    },\n    [onSelectionChange, itemToString, multiselect],\n  );\n\n  const handleOpenChange = useCallback<ComboBoxOpenChangeHandler>(\n    (open, reason) => {\n      onOpenChange?.(open, reason);\n      setOpen(open);\n    },\n    [onOpenChange],\n  );\n\n  const inputProps = useMemo<ComboBoxProps<Item>[\"inputProps\"]>(() => {\n    return {\n      autoComplete: \"off\",\n      ...inputPropsProp,\n      onFocus: (evt) => {\n        inputPropsProp?.onFocus?.(evt);\n\n        setTimeout(() => {\n          setOpen(true);\n        }, 100);\n      },\n    };\n  }, [inputPropsProp]);\n\n  return (\n    <div\n      className={cx(classBase, className)}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      <ComboBox<Item>\n        {...props}\n        inputProps={inputProps}\n        multiselect={multiselect}\n        onChange={handleChange}\n        onOpenChange={handleOpenChange}\n        onSelectionChange={handleSelectionChange}\n        open={open}\n        value={value}\n      >\n        {children}\n      </ComboBox>\n    </div>\n  );\n}) as <Item = string>(\n  props: ExpandoComboboxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n"],"names":["forwardRef","ExpandoCombobox","useWindow","useComponentCssInjection","expandoComboboxCss","useState","useCallback","value","open","useMemo","jsx","ComboBox"],"mappings":"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"}
+{"version":3,"file":"ExpandoCombobox.js","sources":["../../../../packages/vuu-filters/src/filter-clause/ExpandoCombobox.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { ComboBox, ComboBoxProps } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  ForwardedRef,\n  ReactElement,\n  Ref,\n  SyntheticEvent,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport expandoComboboxCss from \"./ExpandoCombobox.css\";\n\nconst classBase = \"vuuExpandoCombobox\";\n\nexport interface ExpandoComboboxProps<Item = string>\n  extends ComboBoxProps<Item> {\n  itemToString?: (item: Item) => string;\n  dropdownOnAutofocus?: boolean;\n}\n\nexport type ComboBoxOpenChangeHandler = Exclude<\n  ComboBoxProps[\"onOpenChange\"],\n  undefined\n>;\n\nconst defaultItemToString = (item: unknown) => {\n  if (typeof item === \"string\") {\n    return item;\n  } else {\n    return item?.toString() ?? \"\";\n  }\n};\nexport const ExpandoCombobox = forwardRef(function ExpandoCombobox<\n  Item = string,\n>(\n  {\n    children,\n    className,\n    inputProps: inputPropsProp,\n    itemToString = defaultItemToString,\n    multiselect,\n    onChange,\n    onSelectionChange,\n    onOpenChange,\n    value: valueProp,\n    dropdownOnAutofocus = true,\n    ...props\n  }: ExpandoComboboxProps<Item>,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-expando-combobox\",\n    css: expandoComboboxCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useState(false);\n  const [value, setValue] = useState(\n    valueProp === undefined ? \"\" : valueProp.toString(),\n  );\n\n  const handleChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const value = evt.target.value;\n      onChange?.(evt);\n      setValue(value);\n    },\n    [onChange],\n  );\n\n  const handleSelectionChange = useCallback(\n    (evt: SyntheticEvent, newSelected: Item[]) => {\n      if (multiselect) {\n        onSelectionChange?.(evt, newSelected);\n      } else {\n        const [selectedValue] = newSelected;\n        setTimeout(() => {\n          onSelectionChange?.(evt, newSelected);\n          setValue(itemToString(selectedValue));\n        }, 100);\n      }\n    },\n    [onSelectionChange, itemToString, multiselect],\n  );\n\n  const handleOpenChange = useCallback<ComboBoxOpenChangeHandler>(\n    (open, reason) => {\n      onOpenChange?.(open, reason);\n      setOpen(open);\n    },\n    [onOpenChange],\n  );\n\n  const inputProps = useMemo<ComboBoxProps<Item>[\"inputProps\"]>(() => {\n    return {\n      autoComplete: \"off\",\n      ...inputPropsProp,\n      onFocus: (evt) => {\n        inputPropsProp?.onFocus?.(evt);\n        if (!dropdownOnAutofocus) return;\n\n        setTimeout(() => {\n          setOpen(true);\n        }, 100);\n      },\n    };\n  }, [inputPropsProp, dropdownOnAutofocus]);\n\n  return (\n    <div\n      className={cx(classBase, className)}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      <ComboBox<Item>\n        {...props}\n        inputProps={inputProps}\n        multiselect={multiselect}\n        onChange={handleChange}\n        onOpenChange={handleOpenChange}\n        onSelectionChange={handleSelectionChange}\n        open={open}\n        value={value}\n      >\n        {children}\n      </ComboBox>\n    </div>\n  );\n}) as <Item = string>(\n  props: ExpandoComboboxProps<Item> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n"],"names":["forwardRef","ExpandoCombobox","useWindow","useComponentCssInjection","expandoComboboxCss","useState","useCallback","value","open","useMemo","jsx","ComboBox"],"mappings":"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"}

package/cjs/filter-clause/FilterClause.js

@@ -20,7 +20,7 @@ const FilterClause = ({
   onFocusSave,
   filterClauseModel,
   vuuTable,
-  openDropdownOnFocus = true,
+  dropdownOnAutofocus = true,
   ...htmlAttributes
 }) => {
   const {
@@ -34,13 +34,14 @@ const FilterClause = ({
     onOpenChange,
     operatorRef,
     selectedColumn,
-    valueRef
+    valueRef,
+    showDropdownOnAutoFocus
   } = useFilterClause.useFilterClause({
     filterClauseModel,
     onCancel,
     onFocusSave,
     columnsByName,
-    openDropdownOnFocus
+    dropdownOnAutofocus
   });
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
@@ -58,7 +59,8 @@ const FilterClause = ({
         columns,
         onSelect: onSelectColumn,
         ref: columnRef,
-        value: filterClauseModel.column ?? ""
+        value: filterClauseModel.column ?? "",
+        dropdownOnAutofocus: showDropdownOnAutoFocus
       },
       "column-field"
     ),
@@ -72,7 +74,8 @@ const FilterClause = ({
         }),
         onSelect: onSelectOperator,
         ref: operatorRef,
-        value: filterClauseModel.op ?? ""
+        value: filterClauseModel.op ?? "",
+        dropdownOnAutofocus: showDropdownOnAutoFocus
       },
       "operator-field"
     ) : null,
@@ -87,7 +90,8 @@ const FilterClause = ({
         ref: valueRef,
         selectedColumn,
         table: vuuTable,
-        value: filterClause?.values ?? filterClause?.value
+        value: filterClause?.values ?? filterClause?.value,
+        dropdownOnAutofocus: showDropdownOnAutoFocus
       },
       "value-field"
     ) : null

package/cjs/filter-clause/FilterClause.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterClause.js","sources":["../../../../packages/vuu-filters/src/filter-clause/FilterClause.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  ColumnDescriptorsByName,\n  MultiValueFilterClause,\n  SingleValueFilterClause,\n} from \"@vuu-ui/vuu-filter-types\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { FilterClauseModel } from \"../FilterModel\";\nimport { ColumnPicker } from \"./ColumnPicker\";\nimport { useFilterClause } from \"./useFilterClause\";\nimport { FilterClauseValueEditor } from \"./value-editors/FilterClauseValueEditor\";\n\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport filterClauseCss from \"./FilterClause.css\";\nimport { OperatorPicker } from \"./OperatorPicker\";\n\nexport type FilterClauseCancelType = \"Backspace\" | \"Escape\";\nexport type FilterClauseCancelHandler = (\n  filterClause: FilterClauseModel,\n  reason: FilterClauseCancelType,\n) => void;\n\nexport interface FilterClauseProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  columnsByName: ColumnDescriptorsByName;\n  filterClauseModel: FilterClauseModel;\n  onCancel?: FilterClauseCancelHandler;\n  onDropdownOpen?: () => void;\n  onFocusSave?: () => void;\n  openDropdownOnFocus?: boolean;\n  vuuTable: VuuTable;\n}\n\nconst classBase = \"vuuFilterClause\";\n\nexport const FilterClause = ({\n  className,\n  columnsByName,\n  onCancel,\n  onDropdownOpen,\n  onFocusSave,\n  filterClauseModel,\n  vuuTable,\n  openDropdownOnFocus = true,\n  ...htmlAttributes\n}: FilterClauseProps) => {\n\n  const {\n    inputProps,\n    columnRef,\n    filterClause,\n    onChangeValue,\n    onSelectColumn,\n    onSelectOperator,\n    onDeselectValue,\n    onOpenChange,\n    operatorRef,\n    selectedColumn,\n    valueRef,\n  } = useFilterClause({\n    filterClauseModel,\n    onCancel,\n    onFocusSave,\n    columnsByName,\n    openDropdownOnFocus,\n  });\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-clause\",\n    css: filterClauseCss,\n    window: targetWindow,\n  });\n\n  const columns = useMemo(() => Object.values(columnsByName), [columnsByName]);\n\n  return (\n    <div className={cx(classBase, className)} {...htmlAttributes} tabIndex={0}>\n      <ColumnPicker\n        inputProps={inputProps}\n        className={cx(`${classBase}Field`, `${classBase}Column`)}\n        columns={columns}\n        key=\"column-field\"\n        onSelect={onSelectColumn}\n        ref={columnRef}\n        value={filterClauseModel.column ?? \"\"}\n      />\n      {selectedColumn?.name ? (\n        <OperatorPicker\n          column={selectedColumn}\n          inputProps={inputProps}\n          className={cx(`${classBase}Field`, `${classBase}Operator`, {\n            [`${classBase}Operator-hidden`]: selectedColumn === null,\n          })}\n          key=\"operator-field\"\n          onSelect={onSelectOperator}\n          ref={operatorRef}\n          value={filterClauseModel.op ?? \"\"}\n        />\n      ) : null}\n      {filterClauseModel.op ? (\n        <FilterClauseValueEditor\n          inputProps={inputProps}\n          key=\"value-field\"\n          onChangeValue={onChangeValue}\n          onOpenChange={onOpenChange}\n          onDeselectValue={onDeselectValue}\n          operator={filterClauseModel.op}\n          ref={valueRef}\n          selectedColumn={selectedColumn}\n          table={vuuTable}\n          value={\n            (filterClause as MultiValueFilterClause)?.values ??\n            (filterClause as SingleValueFilterClause)?.value\n          }\n        />\n      ) : null}\n    </div>\n  );\n};\n"],"names":["useFilterClause","useWindow","useComponentCssInjection","filterClauseCss","useMemo","jsxs","jsx","ColumnPicker","OperatorPicker","FilterClauseValueEditor"],"mappings":";;;;;;;;;;;;;AAmCA,MAAM,SAAY,GAAA,iBAAA;AAEX,MAAM,eAAe,CAAC;AAAA,EAC3B,SAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,mBAAsB,GAAA,IAAA;AAAA,EACtB,GAAG;AACL,CAAyB,KAAA;AAEvB,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,MACEA,+BAAgB,CAAA;AAAA,IAClB,iBAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,OAAA,GAAUC,cAAQ,MAAM,MAAA,CAAO,OAAO,aAAa,CAAA,EAAG,CAAC,aAAa,CAAC,CAAA;AAE3E,EACE,uBAAAC,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAI,EAAA,GAAG,cAAgB,EAAA,QAAA,EAAU,CACtE,EAAA,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAACC,yBAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAQ,MAAA,CAAA,CAAA;AAAA,QACvD,OAAA;AAAA,QAEA,QAAU,EAAA,cAAA;AAAA,QACV,GAAK,EAAA,SAAA;AAAA,QACL,KAAA,EAAO,kBAAkB,MAAU,IAAA;AAAA,OAAA;AAAA,MAH/B;AAAA,KAIN;AAAA,IACC,gBAAgB,IACf,mBAAAD,cAAA;AAAA,MAACE,6BAAA;AAAA,MAAA;AAAA,QACC,MAAQ,EAAA,cAAA;AAAA,QACR,UAAA;AAAA,QACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAY,QAAA,CAAA,EAAA;AAAA,UACzD,CAAC,CAAA,EAAG,SAAS,CAAA,eAAA,CAAiB,GAAG,cAAmB,KAAA;AAAA,SACrD,CAAA;AAAA,QAED,QAAU,EAAA,gBAAA;AAAA,QACV,GAAK,EAAA,WAAA;AAAA,QACL,KAAA,EAAO,kBAAkB,EAAM,IAAA;AAAA,OAAA;AAAA,MAH3B;AAAA,KAKJ,GAAA,IAAA;AAAA,IACH,kBAAkB,EACjB,mBAAAF,cAAA;AAAA,MAACG,+CAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QAEA,aAAA;AAAA,QACA,YAAA;AAAA,QACA,eAAA;AAAA,QACA,UAAU,iBAAkB,CAAA,EAAA;AAAA,QAC5B,GAAK,EAAA,QAAA;AAAA,QACL,cAAA;AAAA,QACA,KAAO,EAAA,QAAA;AAAA,QACP,KAAA,EACG,YAAyC,EAAA,MAAA,IACzC,YAA0C,EAAA;AAAA,OAAA;AAAA,MAVzC;AAAA,KAaJ,GAAA;AAAA,GACN,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"FilterClause.js","sources":["../../../../packages/vuu-filters/src/filter-clause/FilterClause.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  ColumnDescriptorsByName,\n  MultiValueFilterClause,\n  SingleValueFilterClause,\n} from \"@vuu-ui/vuu-filter-types\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { FilterClauseModel } from \"../FilterModel\";\nimport { ColumnPicker } from \"./ColumnPicker\";\nimport { useFilterClause } from \"./useFilterClause\";\nimport { FilterClauseValueEditor } from \"./value-editors/FilterClauseValueEditor\";\n\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport filterClauseCss from \"./FilterClause.css\";\nimport { OperatorPicker } from \"./OperatorPicker\";\n\nexport type FilterClauseCancelType = \"Backspace\" | \"Escape\";\nexport type FilterClauseCancelHandler = (\n  filterClause: FilterClauseModel,\n  reason: FilterClauseCancelType,\n) => void;\n\nexport interface FilterClauseProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  columnsByName: ColumnDescriptorsByName;\n  filterClauseModel: FilterClauseModel;\n  onCancel?: FilterClauseCancelHandler;\n  onDropdownOpen?: () => void;\n  onFocusSave?: () => void;\n  dropdownOnAutofocus?: boolean;\n  vuuTable: VuuTable;\n}\n\nconst classBase = \"vuuFilterClause\";\n\nexport const FilterClause = ({\n  className,\n  columnsByName,\n  onCancel,\n  onDropdownOpen,\n  onFocusSave,\n  filterClauseModel,\n  vuuTable,\n  dropdownOnAutofocus = true,\n  ...htmlAttributes\n}: FilterClauseProps) => {\n  const {\n    inputProps,\n    columnRef,\n    filterClause,\n    onChangeValue,\n    onSelectColumn,\n    onSelectOperator,\n    onDeselectValue,\n    onOpenChange,\n    operatorRef,\n    selectedColumn,\n    valueRef,\n    showDropdownOnAutoFocus,\n  } = useFilterClause({\n    filterClauseModel,\n    onCancel,\n    onFocusSave,\n    columnsByName,\n    dropdownOnAutofocus,\n  });\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-clause\",\n    css: filterClauseCss,\n    window: targetWindow,\n  });\n\n  const columns = useMemo(() => Object.values(columnsByName), [columnsByName]);\n\n  return (\n    <div className={cx(classBase, className)} {...htmlAttributes} tabIndex={0}>\n      <ColumnPicker\n        inputProps={inputProps}\n        className={cx(`${classBase}Field`, `${classBase}Column`)}\n        columns={columns}\n        key=\"column-field\"\n        onSelect={onSelectColumn}\n        ref={columnRef}\n        value={filterClauseModel.column ?? \"\"}\n        dropdownOnAutofocus={showDropdownOnAutoFocus}\n      />\n      {selectedColumn?.name ? (\n        <OperatorPicker\n          column={selectedColumn}\n          inputProps={inputProps}\n          className={cx(`${classBase}Field`, `${classBase}Operator`, {\n            [`${classBase}Operator-hidden`]: selectedColumn === null,\n          })}\n          key=\"operator-field\"\n          onSelect={onSelectOperator}\n          ref={operatorRef}\n          value={filterClauseModel.op ?? \"\"}\n          dropdownOnAutofocus={showDropdownOnAutoFocus}\n        />\n      ) : null}\n      {filterClauseModel.op ? (\n        <FilterClauseValueEditor\n          inputProps={inputProps}\n          key=\"value-field\"\n          onChangeValue={onChangeValue}\n          onOpenChange={onOpenChange}\n          onDeselectValue={onDeselectValue}\n          operator={filterClauseModel.op}\n          ref={valueRef}\n          selectedColumn={selectedColumn}\n          table={vuuTable}\n          value={\n            (filterClause as MultiValueFilterClause)?.values ??\n            (filterClause as SingleValueFilterClause)?.value\n          }\n          dropdownOnAutofocus={showDropdownOnAutoFocus}\n        />\n      ) : null}\n    </div>\n  );\n};\n"],"names":["useFilterClause","useWindow","useComponentCssInjection","filterClauseCss","useMemo","jsxs","jsx","ColumnPicker","OperatorPicker","FilterClauseValueEditor"],"mappings":"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"}

package/cjs/filter-clause/OperatorPicker.js

@@ -7,13 +7,7 @@ var react = require('react');
 var ExpandoCombobox = require('./ExpandoCombobox.js');
 var operatorUtils = require('./operator-utils.js');
 
-const OperatorPicker = react.forwardRef(function ColumnPicker({
-  className,
-  column,
-  inputProps,
-  onSelect,
-  value
-}, forwardedRef) {
+const OperatorPicker = react.forwardRef(function ColumnPicker({ className, column, inputProps, onSelect, value, dropdownOnAutofocus = true }, forwardedRef) {
   const handleSelectionChange = (evt, newSelected) => {
     const [selectedValue] = newSelected;
     if (vuuUtils.isValidFilterClauseOp(selectedValue)) {
@@ -30,6 +24,7 @@ const OperatorPicker = react.forwardRef(function ColumnPicker({
       ref: forwardedRef,
       title: "operator",
       value,
+      dropdownOnAutofocus,
       children: operatorUtils.getOperators(column).map((op) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: op }, op))
     }
   );

package/cjs/filter-clause/OperatorPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"OperatorPicker.js","sources":["../../../../packages/vuu-filters/src/filter-clause/OperatorPicker.tsx"],"sourcesContent":["import type { FilterClauseOp } from \"@vuu-ui/vuu-filter-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { isValidFilterClauseOp } from \"@vuu-ui/vuu-utils\";\nimport { ComboBoxProps, Option } from \"@salt-ds/core\";\nimport { ForwardedRef, SyntheticEvent, forwardRef } from \"react\";\nimport { ExpandoCombobox } from \"./ExpandoCombobox\";\nimport { getOperators } from \"./operator-utils\";\n\nexport type OperatorPickerProps = Pick<\n  ComboBoxProps,\n  \"className\" | \"inputProps\" | \"value\"\n> & {\n  column: ColumnDescriptor;\n  onSelect: (evt: SyntheticEvent, operator: FilterClauseOp) => void;\n};\n\nexport const OperatorPicker = forwardRef(function ColumnPicker(\n  {\n    className,\n    column,\n    inputProps,\n    onSelect,\n    value,\n  }: OperatorPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const handleSelectionChange = (\n    evt: SyntheticEvent,\n    newSelected: string[],\n  ) => {\n    const [selectedValue] = newSelected;\n    if (isValidFilterClauseOp(selectedValue)) {\n      onSelect(evt, selectedValue);\n    }\n  };\n\n  return (\n    <ExpandoCombobox\n      inputProps={inputProps}\n      className={className}\n      data-field=\"operator\"\n      onSelectionChange={handleSelectionChange}\n      ref={forwardedRef}\n      title=\"operator\"\n      value={value}\n    >\n      {getOperators(column).map((op) => (\n        <Option value={op} key={op} />\n      ))}\n    </ExpandoCombobox>\n  );\n});\n"],"names":["forwardRef","isValidFilterClauseOp","jsx","ExpandoCombobox","getOperators","Option"],"mappings":";;;;;;;;;AAgBa,MAAA,cAAA,GAAiBA,gBAAW,CAAA,SAAS,YAChD,CAAA;AAAA,EACE,SAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAA,EACA,YACA,EAAA;AACA,EAAM,MAAA,qBAAA,GAAwB,CAC5B,GAAA,EACA,WACG,KAAA;AACH,IAAM,MAAA,CAAC,aAAa,CAAI,GAAA,WAAA;AACxB,IAAI,IAAAC,8BAAA,CAAsB,aAAa,CAAG,EAAA;AACxC,MAAA,QAAA,CAAS,KAAK,aAAa,CAAA;AAAA;AAC7B,GACF;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,+BAAA;AAAA,IAAA;AAAA,MACC,UAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAW,EAAA,UAAA;AAAA,MACX,iBAAmB,EAAA,qBAAA;AAAA,MACnB,GAAK,EAAA,YAAA;AAAA,MACL,KAAM,EAAA,UAAA;AAAA,MACN,KAAA;AAAA,MAEC,QAAA,EAAAC,0BAAA,CAAa,MAAM,CAAA,CAAE,GAAI,CAAA,CAAC,EACzB,qBAAAF,cAAA,CAACG,WAAO,EAAA,EAAA,KAAA,EAAO,EAAS,EAAA,EAAA,EAAI,CAC7B;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}
+{"version":3,"file":"OperatorPicker.js","sources":["../../../../packages/vuu-filters/src/filter-clause/OperatorPicker.tsx"],"sourcesContent":["import type { FilterClauseOp } from \"@vuu-ui/vuu-filter-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { isValidFilterClauseOp } from \"@vuu-ui/vuu-utils\";\nimport { ComboBoxProps, Option } from \"@salt-ds/core\";\nimport { ForwardedRef, SyntheticEvent, forwardRef } from \"react\";\nimport { ExpandoCombobox } from \"./ExpandoCombobox\";\nimport { getOperators } from \"./operator-utils\";\n\nexport type OperatorPickerProps = Pick<\n  ComboBoxProps,\n  \"className\" | \"inputProps\" | \"value\"\n> & {\n  column: ColumnDescriptor;\n  onSelect: (evt: SyntheticEvent, operator: FilterClauseOp) => void;\n  dropdownOnAutofocus?: boolean;\n};\n\nexport const OperatorPicker = forwardRef(function ColumnPicker(\n  { className, column, inputProps, onSelect, value, dropdownOnAutofocus = true }: OperatorPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const handleSelectionChange = (\n    evt: SyntheticEvent,\n    newSelected: string[],\n  ) => {\n    const [selectedValue] = newSelected;\n    if (isValidFilterClauseOp(selectedValue)) {\n      onSelect(evt, selectedValue);\n    }\n  };\n\n  return (\n    <ExpandoCombobox\n      inputProps={inputProps}\n      className={className}\n      data-field=\"operator\"\n      onSelectionChange={handleSelectionChange}\n      ref={forwardedRef}\n      title=\"operator\"\n      value={value}\n      dropdownOnAutofocus={dropdownOnAutofocus}\n    >\n      {getOperators(column).map((op) => (\n        <Option value={op} key={op} />\n      ))}\n    </ExpandoCombobox>\n  );\n});\n"],"names":["forwardRef","isValidFilterClauseOp","jsx","ExpandoCombobox","getOperators","Option"],"mappings":";;;;;;;;;AAiBO,MAAM,cAAiB,GAAAA,gBAAA,CAAW,SAAS,YAAA,CAChD,EAAE,SAAA,EAAW,MAAQ,EAAA,UAAA,EAAY,QAAU,EAAA,KAAA,EAAO,mBAAsB,GAAA,IAAA,IACxE,YACA,EAAA;AACA,EAAM,MAAA,qBAAA,GAAwB,CAC5B,GAAA,EACA,WACG,KAAA;AACH,IAAM,MAAA,CAAC,aAAa,CAAI,GAAA,WAAA;AACxB,IAAI,IAAAC,8BAAA,CAAsB,aAAa,CAAG,EAAA;AACxC,MAAA,QAAA,CAAS,KAAK,aAAa,CAAA;AAAA;AAC7B,GACF;AAEA,EACE,uBAAAC,cAAA;AAAA,IAACC,+BAAA;AAAA,IAAA;AAAA,MACC,UAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAW,EAAA,UAAA;AAAA,MACX,iBAAmB,EAAA,qBAAA;AAAA,MACnB,GAAK,EAAA,YAAA;AAAA,MACL,KAAM,EAAA,UAAA;AAAA,MACN,KAAA;AAAA,MACA,mBAAA;AAAA,MAEC,QAAA,EAAAC,0BAAA,CAAa,MAAM,CAAA,CAAE,GAAI,CAAA,CAAC,EACzB,qBAAAF,cAAA,CAACG,WAAO,EAAA,EAAA,KAAA,EAAO,EAAS,EAAA,EAAA,EAAI,CAC7B;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/cjs/filter-clause/useFilterClause.js

@@ -10,7 +10,7 @@ const useFilterClause = ({
   columnsByName,
   onFocusSave,
   onOpenChange,
-  openDropdownOnFocus = true
+  dropdownOnAutofocus = true
 }) => {
   const [filterClause, setFilterClause] = react.useState(
     filterClauseModel.isValid ? filterClauseModel.asFilter() : {}
@@ -24,23 +24,14 @@ const useFilterClause = ({
   const operatorRef = react.useRef(null);
   const valueRef = react.useRef(null);
   const filterTouched = react.useRef(false);
-  const filterClauseTouched = react.useCallback(() => {
-    const unTouched = !openDropdownOnFocus && !filterTouched.current;
-    const setTouched = (state) => filterTouched.current = state;
-    if (unTouched) {
-      setTouched(true);
-      return false;
-    }
-    return true;
-  }, [openDropdownOnFocus]);
   const setValueRef = react.useCallback(
     (el) => {
       valueRef.current = el;
-      if (!filterClauseModel.isValid && filterClauseTouched()) {
+      if (!filterClauseModel.isValid) {
         el?.querySelector("input")?.focus();
       }
     },
-    [filterClauseModel.isValid, filterClauseTouched]
+    [filterClauseModel.isValid]
   );
   const removeAndNavigateToNextInputIfAtBoundary = react.useCallback(
     (evt) => {
@@ -144,20 +135,19 @@ const useFilterClause = ({
   const inputProps = react.useMemo(
     () => ({
       onKeyDownCapture: handleKeyDownCaptureNavigation,
-      tabIndex: -1
+      tabIndex: -1,
+      onFocus: () => filterTouched.current = true
     }),
     [handleKeyDownCaptureNavigation]
   );
   react.useEffect(() => {
     const inputRef = filterClauseModel.column === void 0 ? columnRef : filterClauseModel.op === void 0 ? operatorRef : null;
     if (!filterClauseModel.isValid && inputRef) {
-      if (filterClauseTouched()) {
-        requestAnimationFrame(() => {
-          inputRef.current?.querySelector("input")?.focus();
-        });
-      }
+      requestAnimationFrame(() => {
+        inputRef.current?.querySelector("input")?.focus();
+      });
     }
-  }, [filterClauseModel, filterClauseTouched]);
+  }, [filterClauseModel]);
   return {
     inputProps,
     columnRef,
@@ -169,7 +159,8 @@ const useFilterClause = ({
     onOpenChange: handleOpenChange,
     operatorRef,
     selectedColumn: columnsByName[filterClauseModel.column ?? ""],
-    valueRef: setValueRef
+    valueRef: setValueRef,
+    showDropdownOnAutoFocus: dropdownOnAutofocus || filterTouched.current
   };
 };
 

package/cjs/filter-clause/useFilterClause.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFilterClause.js","sources":["../../../../packages/vuu-filters/src/filter-clause/useFilterClause.ts"],"sourcesContent":["import { FilterClause, FilterClauseOp } from \"@vuu-ui/vuu-filter-types\";\nimport { hasOpenOptionList } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  RefCallback,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { FilterClauseProps } from \"./FilterClause\";\nimport {\n  clauseIsNotFirst,\n  focusNextElement,\n  focusNextFocusableElement,\n  navigateToNextItemIfAtBoundary,\n  tabToPreviousFilterCombinator,\n} from \"./filterClauseFocusManagement\";\nimport { ComboBoxOpenChangeHandler } from \"./ExpandoCombobox\";\n\nexport type FilterClauseEditorHookProps = Pick<\n  FilterClauseProps,\n  \"columnsByName\" | \"filterClauseModel\" | \"onCancel\" | \"onFocusSave\"\n> & { onOpenChange?: ComboBoxOpenChangeHandler; openDropdownOnFocus?: boolean };\n\nexport type FilterClauseValueChangeHandler = (\n  value: string | string[] | number | number[],\n  isFinal?: boolean,\n) => void;\n\nexport const useFilterClause = ({\n  filterClauseModel,\n  onCancel,\n  columnsByName,\n  onFocusSave,\n  onOpenChange,\n  openDropdownOnFocus = true,\n}: FilterClauseEditorHookProps) => {\n  const [filterClause, setFilterClause] = useState<Partial<FilterClause>>(\n    filterClauseModel.isValid ? filterClauseModel.asFilter() : {},\n  );\n\n  useMemo(() => {\n    filterClauseModel.on(\"filterClause\", (filterClause) => {\n      setFilterClause(filterClause);\n    });\n  }, [filterClauseModel]);\n\n  const columnRef = useRef<HTMLDivElement>(null);\n  const operatorRef = useRef<HTMLDivElement>(null);\n  const valueRef = useRef<HTMLDivElement | null>(null);\n  const filterTouched = useRef(false);\n\n  const filterClauseTouched = useCallback(() => {\n    const unTouched = !openDropdownOnFocus && !filterTouched.current;\n    const setTouched = (state: boolean) => filterTouched.current = state;\n    if (unTouched) {\n      setTouched(true);\n      return false;\n    }\n    return true;\n  }, [openDropdownOnFocus]);\n\n  const setValueRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      valueRef.current = el;\n      if (!filterClauseModel.isValid && filterClauseTouched()) {        \n        el?.querySelector(\"input\")?.focus();\n      }\n    },\n    [filterClauseModel.isValid, filterClauseTouched],\n  );\n\n  const removeAndNavigateToNextInputIfAtBoundary = useCallback(\n    (evt: KeyboardEvent) => {\n      const input = evt.target as HTMLInputElement;\n      if (input.value === \"\") {\n        const field = input.closest(\"[data-field]\") as HTMLElement;\n        switch (field?.dataset?.field) {\n          case \"operator\": {\n            filterClauseModel.column = undefined;\n            focusNextFocusableElement(\"bwd\");\n            break;\n          }\n          case \"value\": {\n            filterClauseModel.setOp(undefined);\n            focusNextFocusableElement(\"bwd\");\n            break;\n          }\n          case \"column\": {\n            if (clauseIsNotFirst(input)) {\n              // When we backspace from an empty clause, the clause will be removed.filterClause\n              // In this case, we will reposition focus on previous clause, but we\n              // don't want the backspace to be effect an edit on that clause.\n              evt.preventDefault();\n              onCancel?.(filterClauseModel, \"Backspace\");\n            }\n          }\n        }\n      }\n    },\n    [filterClauseModel, onCancel],\n  );\n\n  const onSelectColumn = (evt: SyntheticEvent, selectedColumn: string) => {\n    if (selectedColumn) {\n      if (evt?.type === \"keydown\") {\n        const { key } = evt as KeyboardEvent;\n        if (key === \"Tab\") {\n          if (filterClauseModel.column === selectedColumn) {\n            // No selection change, allow normal Tab navigation (to Save button)\n            return;\n          } else {\n            // Tab is being used to change selection, keep focus within the clause\n            evt.preventDefault();\n          }\n        }\n      }\n    }\n    filterClauseModel.column = selectedColumn;\n    setTimeout(() => {\n      focusNextElement();\n    }, 100);\n  };\n\n  const onSelectOperator = useCallback(\n    (_: SyntheticEvent, selectedOp: FilterClauseOp) => {\n      filterClauseModel.setOp(selectedOp);\n      focusNextElement();\n    },\n    [filterClauseModel],\n  );\n\n  const handleChangeValue = useCallback<FilterClauseValueChangeHandler>(\n    (value, isFinal) => filterClauseModel.setValue(value, isFinal),\n    [filterClauseModel],\n  );\n\n  const handleDeselectValue = useCallback(\n    () => filterClauseModel.setValue(undefined),\n    [filterClauseModel],\n  );\n\n  const handleKeyDownCaptureNavigation = useCallback(\n    (evt: KeyboardEvent<HTMLInputElement>) => {\n      if ([\"ArrowLeft\", \"ArrowRight\"].includes(evt.key)) {\n        navigateToNextItemIfAtBoundary(evt);\n      } else if (evt.key === \"Backspace\") {\n        removeAndNavigateToNextInputIfAtBoundary(evt);\n      } else if (evt.key === \"Escape\") {\n        // ignore when optionlist is open, the optionList will be collapsed\n        if (!hasOpenOptionList(evt.target)) {\n          onCancel?.(filterClauseModel, \"Escape\");\n        }\n      } else if (evt.key === \"Tab\" && evt.shiftKey) {\n        evt.preventDefault();\n        tabToPreviousFilterCombinator(evt.target as HTMLElement);\n      } else if (evt.key === \"Tab\") {\n        // if the clause is valid, skip to save\n        if (filterClauseModel.isValid) {\n          evt.preventDefault();\n          evt.stopPropagation();\n          // TODO focus cancel if not changed\n          onFocusSave?.();\n        }\n      }\n    },\n    [\n      filterClauseModel,\n      onCancel,\n      onFocusSave,\n      removeAndNavigateToNextInputIfAtBoundary,\n    ],\n  );\n\n  const handleOpenChange = useCallback<ComboBoxOpenChangeHandler>(\n    (open, closeReason) => {\n      const isMultiSelect = filterClauseModel.op === \"in\";\n      const filterHasNoValue =\n        !filterClauseModel.isValid &&\n        filterClauseModel.op !== undefined &&\n        filterClauseModel.column !== undefined;\n\n      if (\n        !open &&\n        isMultiSelect &&\n        (filterClauseModel.isValid || filterHasNoValue)\n      ) {\n        filterClauseModel.commit();\n      }\n      onOpenChange?.(open, closeReason);\n    },\n    [filterClauseModel, onOpenChange],\n  );\n\n  const inputProps = useMemo(\n    () => ({\n      onKeyDownCapture: handleKeyDownCaptureNavigation,\n      tabIndex: -1,\n    }),\n    [handleKeyDownCaptureNavigation],\n  );\n\n  // Do we need this or can we leave it to the filterEditor\n  useEffect(() => {\n    // leave the valueInput to callbackRef handler above, may\n    // fire after the requestAnimationFrame\n    const inputRef =\n      filterClauseModel.column === undefined\n        ? columnRef\n        : filterClauseModel.op === undefined\n          ? operatorRef\n          : null;\n\n    if (!filterClauseModel.isValid && inputRef) {\n      if (filterClauseTouched()) {\n        requestAnimationFrame(() => {\n          inputRef.current?.querySelector(\"input\")?.focus();\n        });\n      }\n    }\n  }, [filterClauseModel, filterClauseTouched]);\n\n  return {\n    inputProps,\n    columnRef,\n    filterClause,\n    onChangeValue: handleChangeValue,\n    onDeselectValue: handleDeselectValue,\n    onSelectColumn,\n    onSelectOperator,\n    onOpenChange: handleOpenChange,\n    operatorRef,\n    selectedColumn: columnsByName[filterClauseModel.column ?? \"\"],\n    valueRef: setValueRef,\n  };\n};\n"],"names":["useState","useMemo","filterClause","useRef","useCallback","focusNextFocusableElement","clauseIsNotFirst","focusNextElement","navigateToNextItemIfAtBoundary","hasOpenOptionList","tabToPreviousFilterCombinator","useEffect"],"mappings":"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"}
+{"version":3,"file":"useFilterClause.js","sources":["../../../../packages/vuu-filters/src/filter-clause/useFilterClause.ts"],"sourcesContent":["import { FilterClause, FilterClauseOp } from \"@vuu-ui/vuu-filter-types\";\nimport { hasOpenOptionList } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  RefCallback,\n  SyntheticEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { FilterClauseProps } from \"./FilterClause\";\nimport {\n  clauseIsNotFirst,\n  focusNextElement,\n  focusNextFocusableElement,\n  navigateToNextItemIfAtBoundary,\n  tabToPreviousFilterCombinator,\n} from \"./filterClauseFocusManagement\";\nimport { ComboBoxOpenChangeHandler } from \"./ExpandoCombobox\";\n\nexport type FilterClauseEditorHookProps = Pick<\n  FilterClauseProps,\n  \"columnsByName\" | \"filterClauseModel\" | \"onCancel\" | \"onFocusSave\"\n> & { onOpenChange?: ComboBoxOpenChangeHandler; dropdownOnAutofocus?: boolean };\n\nexport type FilterClauseValueChangeHandler = (\n  value: string | string[] | number | number[],\n  isFinal?: boolean,\n) => void;\n\nexport const useFilterClause = ({\n  filterClauseModel,\n  onCancel,\n  columnsByName,\n  onFocusSave,\n  onOpenChange,\n  dropdownOnAutofocus = true,\n}: FilterClauseEditorHookProps) => {\n  const [filterClause, setFilterClause] = useState<Partial<FilterClause>>(\n    filterClauseModel.isValid ? filterClauseModel.asFilter() : {},\n  );\n\n  useMemo(() => {\n    filterClauseModel.on(\"filterClause\", (filterClause) => {\n      setFilterClause(filterClause);\n    });\n  }, [filterClauseModel]);\n\n  const columnRef = useRef<HTMLDivElement>(null);\n  const operatorRef = useRef<HTMLDivElement>(null);\n  const valueRef = useRef<HTMLDivElement | null>(null);\n  const filterTouched = useRef(false);\n\n  const setValueRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      valueRef.current = el;\n      if (!filterClauseModel.isValid) {\n        el?.querySelector(\"input\")?.focus();\n      }\n    },\n    [filterClauseModel.isValid],\n  );\n\n  const removeAndNavigateToNextInputIfAtBoundary = useCallback(\n    (evt: KeyboardEvent) => {\n      const input = evt.target as HTMLInputElement;\n      if (input.value === \"\") {\n        const field = input.closest(\"[data-field]\") as HTMLElement;\n        switch (field?.dataset?.field) {\n          case \"operator\": {\n            filterClauseModel.column = undefined;\n            focusNextFocusableElement(\"bwd\");\n            break;\n          }\n          case \"value\": {\n            filterClauseModel.setOp(undefined);\n            focusNextFocusableElement(\"bwd\");\n            break;\n          }\n          case \"column\": {\n            if (clauseIsNotFirst(input)) {\n              // When we backspace from an empty clause, the clause will be removed.filterClause\n              // In this case, we will reposition focus on previous clause, but we\n              // don't want the backspace to be effect an edit on that clause.\n              evt.preventDefault();\n              onCancel?.(filterClauseModel, \"Backspace\");\n            }\n          }\n        }\n      }\n    },\n    [filterClauseModel, onCancel],\n  );\n\n  const onSelectColumn = (evt: SyntheticEvent, selectedColumn: string) => {\n    if (selectedColumn) {\n      if (evt?.type === \"keydown\") {\n        const { key } = evt as KeyboardEvent;\n        if (key === \"Tab\") {\n          if (filterClauseModel.column === selectedColumn) {\n            // No selection change, allow normal Tab navigation (to Save button)\n            return;\n          } else {\n            // Tab is being used to change selection, keep focus within the clause\n            evt.preventDefault();\n          }\n        }\n      }\n    }\n    filterClauseModel.column = selectedColumn;\n    setTimeout(() => {\n      focusNextElement();\n    }, 100);\n  };\n\n  const onSelectOperator = useCallback(\n    (_: SyntheticEvent, selectedOp: FilterClauseOp) => {\n      filterClauseModel.setOp(selectedOp);\n      focusNextElement();\n    },\n    [filterClauseModel],\n  );\n\n  const handleChangeValue = useCallback<FilterClauseValueChangeHandler>(\n    (value, isFinal) => filterClauseModel.setValue(value, isFinal),\n    [filterClauseModel],\n  );\n\n  const handleDeselectValue = useCallback(\n    () => filterClauseModel.setValue(undefined),\n    [filterClauseModel],\n  );\n\n  const handleKeyDownCaptureNavigation = useCallback(\n    (evt: KeyboardEvent<HTMLInputElement>) => {\n      if ([\"ArrowLeft\", \"ArrowRight\"].includes(evt.key)) {\n        navigateToNextItemIfAtBoundary(evt);\n      } else if (evt.key === \"Backspace\") {\n        removeAndNavigateToNextInputIfAtBoundary(evt);\n      } else if (evt.key === \"Escape\") {\n        // ignore when optionlist is open, the optionList will be collapsed\n        if (!hasOpenOptionList(evt.target)) {\n          onCancel?.(filterClauseModel, \"Escape\");\n        }\n      } else if (evt.key === \"Tab\" && evt.shiftKey) {\n        evt.preventDefault();\n        tabToPreviousFilterCombinator(evt.target as HTMLElement);\n      } else if (evt.key === \"Tab\") {\n        // if the clause is valid, skip to save\n        if (filterClauseModel.isValid) {\n          evt.preventDefault();\n          evt.stopPropagation();\n          // TODO focus cancel if not changed\n          onFocusSave?.();\n        }\n      }\n    },\n    [\n      filterClauseModel,\n      onCancel,\n      onFocusSave,\n      removeAndNavigateToNextInputIfAtBoundary,\n    ],\n  );\n\n  const handleOpenChange = useCallback<ComboBoxOpenChangeHandler>(\n    (open, closeReason) => {\n      const isMultiSelect = filterClauseModel.op === \"in\";\n      const filterHasNoValue =\n        !filterClauseModel.isValid &&\n        filterClauseModel.op !== undefined &&\n        filterClauseModel.column !== undefined;\n\n      if (\n        !open &&\n        isMultiSelect &&\n        (filterClauseModel.isValid || filterHasNoValue)\n      ) {\n        filterClauseModel.commit();\n      }\n      onOpenChange?.(open, closeReason);\n    },\n    [filterClauseModel, onOpenChange],\n  );\n\n  const inputProps = useMemo(\n    () => ({\n      onKeyDownCapture: handleKeyDownCaptureNavigation,\n      tabIndex: -1,\n      onFocus: () => filterTouched.current = true,\n    }),\n    [handleKeyDownCaptureNavigation],\n  );\n\n  // Do we need this or can we leave it to the filterEditor\n  useEffect(() => {\n    // leave the valueInput to callbackRef handler above, may\n    // fire after the requestAnimationFrame\n    const inputRef =\n      filterClauseModel.column === undefined\n        ? columnRef\n        : filterClauseModel.op === undefined\n          ? operatorRef\n          : null;\n\n    if (!filterClauseModel.isValid && inputRef) {\n      requestAnimationFrame(() => {\n        inputRef.current?.querySelector(\"input\")?.focus();\n      });\n    }\n  }, [filterClauseModel]);\n\n  return {\n    inputProps,\n    columnRef,\n    filterClause,\n    onChangeValue: handleChangeValue,\n    onDeselectValue: handleDeselectValue,\n    onSelectColumn,\n    onSelectOperator,\n    onOpenChange: handleOpenChange,\n    operatorRef,\n    selectedColumn: columnsByName[filterClauseModel.column ?? \"\"],\n    valueRef: setValueRef,\n    showDropdownOnAutoFocus: dropdownOnAutofocus || filterTouched.current,\n  };\n};\n"],"names":["useState","useMemo","filterClause","useRef","useCallback","focusNextFocusableElement","clauseIsNotFirst","focusNextElement","navigateToNextItemIfAtBoundary","hasOpenOptionList","tabToPreviousFilterCombinator","useEffect"],"mappings":"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"}

package/cjs/filter-clause/value-editors/FilterClauseValueEditor.js

@@ -19,7 +19,8 @@ const FilterClauseValueEditor = react.forwardRef(
     onDeselectValue,
     onOpenChange,
     table,
-    value
+    value,
+    dropdownOnAutofocus = true
   }, forwardedRef) {
     if (selectedColumn === void 0 || operator === void 0) {
       return null;
@@ -62,7 +63,8 @@ const FilterClauseValueEditor = react.forwardRef(
             operator,
             ref: forwardedRef,
             table,
-            value: value === void 0 ? "" : Array.isArray(value) ? value.map((val) => val.toString()) : value.toString()
+            value: value === void 0 ? "" : Array.isArray(value) ? value.map((val) => val.toString()) : value.toString(),
+            dropdownOnAutofocus
           }
         );
       case "int":

package/cjs/filter-clause/value-editors/FilterClauseValueEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterClauseValueEditor.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditor.tsx"],"sourcesContent":["import { TableSchemaTable } from \"@vuu-ui/vuu-data-types\";\nimport cx from \"clsx\";\nimport { useFilterClause } from \"../useFilterClause\";\nimport { FilterClauseValueEditorNumber } from \"./FilterClauseValueEditorNumber\";\nimport { FilterClauseValueEditorText } from \"./FilterClauseValueEditorText\";\n\nimport {\n  NumericFilterClauseOp,\n  SingleValueFilterClauseOp,\n} from \"@vuu-ui/vuu-filter-types\";\nimport { isDateTimeDataValue, isTimeDataValue } from \"@vuu-ui/vuu-utils\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { FilterClauseValueEditorDate } from \"./FilterClauseValueEditorDate\";\nimport { FilterClauseValueEditorTime } from \"./FilterClauseValueEditorTime\";\n\nconst classBase = \"vuuFilterClause\";\n\ntype FilterClauseValueEditorProps = Pick<\n  ReturnType<typeof useFilterClause>,\n  | \"selectedColumn\"\n  | \"inputProps\"\n  | \"onChangeValue\"\n  | \"onDeselectValue\"\n  | \"onOpenChange\"\n> & {\n  table?: TableSchemaTable;\n} & {\n  operator?: SingleValueFilterClauseOp | \"in\";\n  value?: string | string[] | number | number[] | boolean | boolean[];\n};\n\nexport const FilterClauseValueEditor = forwardRef(\n  function FilterClauseValueEditor(\n    {\n      selectedColumn,\n      operator,\n      inputProps,\n      onChangeValue,\n      onDeselectValue,\n      onOpenChange,\n      table,\n      value,\n    }: FilterClauseValueEditorProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n  ) {\n    if (selectedColumn === undefined || operator === undefined) {\n      return null;\n    }\n\n    if (isDateTimeDataValue(selectedColumn)) {\n      return (\n        <FilterClauseValueEditorDate\n          inputProps={inputProps}\n          className={cx(`${classBase}Field`, `${classBase}Value`)}\n          value={value as number}\n          operator={operator as NumericFilterClauseOp}\n          onChangeValue={onChangeValue}\n        />\n      );\n    } else if (isTimeDataValue(selectedColumn)) {\n      return (\n        <FilterClauseValueEditorTime\n          inputProps={inputProps}\n          className={cx(`${classBase}Field`, `${classBase}Value`)}\n          value={value as number}\n          operator={operator as NumericFilterClauseOp}\n          onChangeValue={onChangeValue}\n        />\n      );\n    }\n\n    switch (selectedColumn.serverDataType) {\n      case \"string\":\n      case \"char\":\n        return (\n          <FilterClauseValueEditorText\n            inputProps={inputProps}\n            className={cx(`${classBase}Field`, `${classBase}Value`)}\n            column={selectedColumn}\n            onDeselect={onDeselectValue}\n            onChangeValue={onChangeValue}\n            onOpenChange={onOpenChange}\n            operator={operator}\n            ref={forwardedRef}\n            table={table}\n            value={\n              value === undefined\n                ? \"\"\n                : Array.isArray(value)\n                  ? value.map((val) => val.toString())\n                  : (value.toString() as string | string[])\n            }\n          />\n        );\n      case \"int\":\n      case \"long\":\n      case \"double\":\n        return (\n          <FilterClauseValueEditorNumber\n            inputProps={inputProps}\n            className={cx(`${classBase}Field`, `${classBase}Value`)}\n            column={selectedColumn}\n            data-field=\"value\"\n            onChangeValue={onChangeValue}\n            operator={operator}\n            ref={forwardedRef}\n          />\n        );\n      default:\n        console.log(\"returning null\");\n        return null;\n    }\n  },\n);\n"],"names":["forwardRef","FilterClauseValueEditor","isDateTimeDataValue","jsx","FilterClauseValueEditorDate","isTimeDataValue","FilterClauseValueEditorTime","FilterClauseValueEditorText","FilterClauseValueEditorNumber"],"mappings":";;;;;;;;;;;AAeA,MAAM,SAAY,GAAA,iBAAA;AAgBX,MAAM,uBAA0B,GAAAA,gBAAA;AAAA,EACrC,SAASC,wBACP,CAAA;AAAA,IACE,cAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,KAEF,YACA,EAAA;AACA,IAAI,IAAA,cAAA,KAAmB,KAAa,CAAA,IAAA,QAAA,KAAa,KAAW,CAAA,EAAA;AAC1D,MAAO,OAAA,IAAA;AAAA;AAGT,IAAI,IAAAC,4BAAA,CAAoB,cAAc,CAAG,EAAA;AACvC,MACE,uBAAAC,cAAA;AAAA,QAACC,uDAAA;AAAA,QAAA;AAAA,UACC,UAAA;AAAA,UACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,UACtD,KAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA,OACF;AAAA,KAEJ,MAAA,IAAWC,wBAAgB,CAAA,cAAc,CAAG,EAAA;AAC1C,MACE,uBAAAF,cAAA;AAAA,QAACG,uDAAA;AAAA,QAAA;AAAA,UACC,UAAA;AAAA,UACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,UACtD,KAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA,OACF;AAAA;AAIJ,IAAA,QAAQ,eAAe,cAAgB;AAAA,MACrC,KAAK,QAAA;AAAA,MACL,KAAK,MAAA;AACH,QACE,uBAAAH,cAAA;AAAA,UAACI,uDAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,YACtD,MAAQ,EAAA,cAAA;AAAA,YACR,UAAY,EAAA,eAAA;AAAA,YACZ,aAAA;AAAA,YACA,YAAA;AAAA,YACA,QAAA;AAAA,YACA,GAAK,EAAA,YAAA;AAAA,YACL,KAAA;AAAA,YACA,OACE,KAAU,KAAA,KAAA,CAAA,GACN,EACA,GAAA,KAAA,CAAM,QAAQ,KAAK,CAAA,GACjB,KAAM,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA,GAAA,CAAI,UAAU,CAAA,GAChC,MAAM,QAAS;AAAA;AAAA,SAE1B;AAAA,MAEJ,KAAK,KAAA;AAAA,MACL,KAAK,MAAA;AAAA,MACL,KAAK,QAAA;AACH,QACE,uBAAAJ,cAAA;AAAA,UAACK,2DAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,YACtD,MAAQ,EAAA,cAAA;AAAA,YACR,YAAW,EAAA,OAAA;AAAA,YACX,aAAA;AAAA,YACA,QAAA;AAAA,YACA,GAAK,EAAA;AAAA;AAAA,SACP;AAAA,MAEJ;AACE,QAAA,OAAA,CAAQ,IAAI,gBAAgB,CAAA;AAC5B,QAAO,OAAA,IAAA;AAAA;AACX;AAEJ;;;;"}
+{"version":3,"file":"FilterClauseValueEditor.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditor.tsx"],"sourcesContent":["import { TableSchemaTable } from \"@vuu-ui/vuu-data-types\";\nimport cx from \"clsx\";\nimport { useFilterClause } from \"../useFilterClause\";\nimport { FilterClauseValueEditorNumber } from \"./FilterClauseValueEditorNumber\";\nimport { FilterClauseValueEditorText } from \"./FilterClauseValueEditorText\";\n\nimport {\n  NumericFilterClauseOp,\n  SingleValueFilterClauseOp,\n} from \"@vuu-ui/vuu-filter-types\";\nimport { isDateTimeDataValue, isTimeDataValue } from \"@vuu-ui/vuu-utils\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { FilterClauseValueEditorDate } from \"./FilterClauseValueEditorDate\";\nimport { FilterClauseValueEditorTime } from \"./FilterClauseValueEditorTime\";\n\nconst classBase = \"vuuFilterClause\";\n\ntype FilterClauseValueEditorProps = Pick<\n  ReturnType<typeof useFilterClause>,\n  | \"selectedColumn\"\n  | \"inputProps\"\n  | \"onChangeValue\"\n  | \"onDeselectValue\"\n  | \"onOpenChange\"\n> & {\n  table?: TableSchemaTable;\n} & {\n  operator?: SingleValueFilterClauseOp | \"in\";\n  value?: string | string[] | number | number[] | boolean | boolean[];\n  dropdownOnAutofocus?: boolean,\n};\n\nexport const FilterClauseValueEditor = forwardRef(\n  function FilterClauseValueEditor(\n    {\n      selectedColumn,\n      operator,\n      inputProps,\n      onChangeValue,\n      onDeselectValue,\n      onOpenChange,\n      table,\n      value,\n      dropdownOnAutofocus = true,\n    }: FilterClauseValueEditorProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n  ) {\n    if (selectedColumn === undefined || operator === undefined) {\n      return null;\n    }\n\n    if (isDateTimeDataValue(selectedColumn)) {\n      return (\n        <FilterClauseValueEditorDate\n          inputProps={inputProps}\n          className={cx(`${classBase}Field`, `${classBase}Value`)}\n          value={value as number}\n          operator={operator as NumericFilterClauseOp}\n          onChangeValue={onChangeValue}\n        />\n      );\n    } else if (isTimeDataValue(selectedColumn)) {\n      return (\n        <FilterClauseValueEditorTime\n          inputProps={inputProps}\n          className={cx(`${classBase}Field`, `${classBase}Value`)}\n          value={value as number}\n          operator={operator as NumericFilterClauseOp}\n          onChangeValue={onChangeValue}\n        />\n      );\n    }\n\n    switch (selectedColumn.serverDataType) {\n      case \"string\":\n      case \"char\":\n        return (\n          <FilterClauseValueEditorText\n            inputProps={inputProps}\n            className={cx(`${classBase}Field`, `${classBase}Value`)}\n            column={selectedColumn}\n            onDeselect={onDeselectValue}\n            onChangeValue={onChangeValue}\n            onOpenChange={onOpenChange}\n            operator={operator}\n            ref={forwardedRef}\n            table={table}\n            value={\n              value === undefined\n                ? \"\"\n                : Array.isArray(value)\n                  ? value.map((val) => val.toString())\n                  : (value.toString() as string | string[])\n            }\n            dropdownOnAutofocus={dropdownOnAutofocus}\n          />\n        );\n      case \"int\":\n      case \"long\":\n      case \"double\":\n        return (\n          <FilterClauseValueEditorNumber\n            inputProps={inputProps}\n            className={cx(`${classBase}Field`, `${classBase}Value`)}\n            column={selectedColumn}\n            data-field=\"value\"\n            onChangeValue={onChangeValue}\n            operator={operator}\n            ref={forwardedRef}\n          />\n        );\n      default:\n        console.log(\"returning null\");\n        return null;\n    }\n  },\n);\n"],"names":["forwardRef","FilterClauseValueEditor","isDateTimeDataValue","jsx","FilterClauseValueEditorDate","isTimeDataValue","FilterClauseValueEditorTime","FilterClauseValueEditorText","FilterClauseValueEditorNumber"],"mappings":";;;;;;;;;;;AAeA,MAAM,SAAY,GAAA,iBAAA;AAiBX,MAAM,uBAA0B,GAAAA,gBAAA;AAAA,EACrC,SAASC,wBACP,CAAA;AAAA,IACE,cAAA;AAAA,IACA,QAAA;AAAA,IACA,UAAA;AAAA,IACA,aAAA;AAAA,IACA,eAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA;AAAA,IACA,KAAA;AAAA,IACA,mBAAsB,GAAA;AAAA,KAExB,YACA,EAAA;AACA,IAAI,IAAA,cAAA,KAAmB,KAAa,CAAA,IAAA,QAAA,KAAa,KAAW,CAAA,EAAA;AAC1D,MAAO,OAAA,IAAA;AAAA;AAGT,IAAI,IAAAC,4BAAA,CAAoB,cAAc,CAAG,EAAA;AACvC,MACE,uBAAAC,cAAA;AAAA,QAACC,uDAAA;AAAA,QAAA;AAAA,UACC,UAAA;AAAA,UACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,UACtD,KAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA,OACF;AAAA,KAEJ,MAAA,IAAWC,wBAAgB,CAAA,cAAc,CAAG,EAAA;AAC1C,MACE,uBAAAF,cAAA;AAAA,QAACG,uDAAA;AAAA,QAAA;AAAA,UACC,UAAA;AAAA,UACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,UACtD,KAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA,OACF;AAAA;AAIJ,IAAA,QAAQ,eAAe,cAAgB;AAAA,MACrC,KAAK,QAAA;AAAA,MACL,KAAK,MAAA;AACH,QACE,uBAAAH,cAAA;AAAA,UAACI,uDAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,YACtD,MAAQ,EAAA,cAAA;AAAA,YACR,UAAY,EAAA,eAAA;AAAA,YACZ,aAAA;AAAA,YACA,YAAA;AAAA,YACA,QAAA;AAAA,YACA,GAAK,EAAA,YAAA;AAAA,YACL,KAAA;AAAA,YACA,OACE,KAAU,KAAA,KAAA,CAAA,GACN,EACA,GAAA,KAAA,CAAM,QAAQ,KAAK,CAAA,GACjB,KAAM,CAAA,GAAA,CAAI,CAAC,GAAQ,KAAA,GAAA,CAAI,UAAU,CAAA,GAChC,MAAM,QAAS,EAAA;AAAA,YAExB;AAAA;AAAA,SACF;AAAA,MAEJ,KAAK,KAAA;AAAA,MACL,KAAK,MAAA;AAAA,MACL,KAAK,QAAA;AACH,QACE,uBAAAJ,cAAA;AAAA,UAACK,2DAAA;AAAA,UAAA;AAAA,YACC,UAAA;AAAA,YACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,YACtD,MAAQ,EAAA,cAAA;AAAA,YACR,YAAW,EAAA,OAAA;AAAA,YACX,aAAA;AAAA,YACA,QAAA;AAAA,YACA,GAAK,EAAA;AAAA;AAAA,SACP;AAAA,MAEJ;AACE,QAAA,OAAA,CAAQ,IAAI,gBAAgB,CAAA;AAC5B,QAAO,OAAA,IAAA;AAAA;AACX;AAEJ;;;;"}

package/cjs/filter-clause/value-editors/FilterClauseValueEditorText.js

@@ -17,7 +17,8 @@ const FilterClauseValueEditorText = react.forwardRef(
     onOpenChange,
     operator,
     table,
-    value
+    value,
+    dropdownOnAutofocus = true
   }, forwardedRef) {
     const isMultiValue = operator === "in";
     const [valueInputValue, setValueInputValue] = react.useState(
@@ -123,6 +124,7 @@ const FilterClauseValueEditorText = react.forwardRef(
               multiselect: true,
               truncate: true,
               value,
+              dropdownOnAutofocus,
               children: typeaheadValues.map((state) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: state }, state))
             }
           );
@@ -137,6 +139,7 @@ const FilterClauseValueEditorText = react.forwardRef(
               onSelectionChange: handleSingleValueSelectionChange,
               ref: forwardedRef,
               value,
+              dropdownOnAutofocus,
               children: typeaheadValues.map((state) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: state, disabled: true }, state))
             }
           );
@@ -165,6 +168,7 @@ const FilterClauseValueEditorText = react.forwardRef(
               onSelectionChange: handleSingleValueSelectionChange,
               ref: forwardedRef,
               value,
+              dropdownOnAutofocus,
               children: typeaheadValues.map((state) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: state }, state))
             }
           ) : null;
@@ -182,7 +186,8 @@ const FilterClauseValueEditorText = react.forwardRef(
       handleMultiValueSelectionChange,
       value,
       handleSingleValueSelectionChange,
-      onOpenChange
+      onOpenChange,
+      dropdownOnAutofocus
     ]);
     return getValueInputField();
   }