@vuu-ui/vuu-filters 0.8.94 → 0.8.95

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var filterClauseCss = ".vuuFilterClause {\n  --vuuExpandoInput-top: 0;\n  --content-height: calc(var(--salt-size-base) - var(--salt-spacing-150));\n  --vuuExpandoInput-height: var(--content-height);\n  --vuuExpandoCombobox-height: var(--content-height);\n  --saltButton-height: 16px;\n  --saltButton-width: 16px;\n  --salt-focused-outlineStyle: dotted;\n\n  align-items: center;\n  background: var(--salt-container-primary-background);\n  border-color: var(--vuu-color-gray-45);\n  border-radius: var(--saltButton-borderRadius);\n  border-width: 1px;\n  border-style: solid;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  min-width: calc(var(--salt-size-base) * 4);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n\n  .vuuFilterClauseField {\n    flex: 0 0 auto;\n  }\n  .vuuFilterClauseField:last-child {\n    flex: 1 0 auto;\n  }\n\n  .vuuExpandoCombobox {\n    flex-basis: auto;\n    flex-shrink: 0;\n    flex-grow: 0;\n  }\n\n  &:focus-within {\n    border-color: var(--vuu-color-purple-10);\n  }\n\n  .saltComboBox-focused {\n    outline: none;\n  }\n\n  .saltTokenizedInput {\n    height: 16px;\n    min-height: 16px;\n  }\n\n  .saltTokenizedInput .saltInputPill {\n    --pill-fontSize: 12px;\n    --saltButton-borderStyle: none;\n    --pill-background: none;\n    height: 16px;\n    margin: 0;\n  }\n\n  .saltTokenizedInput-pillGroup {\n    padding: 0;\n    height: 16px;\n  }\n\n  .saltDateInput {\n    width: auto;\n  }\n}\n\n.salt-density-high .vuuFilterClause {\n  padding: 4px 8px;\n  gap: 4px;\n  --salt-text-lineHeight: 12px;\n  --saltInputLegacy-fontSize: 12px;\n  --saltInputLegacy-minWidth: 12px;\n}\n\n.salt-density-high .vuuFilterClause .saltInput {\n  padding: 0;\n  min-height: 16px;\n  height: 16px;\n}\n\n.vuuFilterClauseOperator-hidden {\n  display: none;\n}\n\n.vuuFilterClause .saltInput-focused,\n.vuuFilterClause .saltTokenizedInput-focused {\n  outline: none;\n  color: var(--salt-content-primary-foreground);\n}\n\n.vuuFilterClause-DatePicker {\n  border: none;\n}\n";
+var filterClauseCss = ".vuuFilterClause {\n  --vuuExpandoInput-top: 0;\n  --content-height: calc(var(--salt-size-base) - var(--salt-spacing-150));\n  --vuuExpandoInput-height: var(--content-height);\n  --vuuExpandoCombobox-height: var(--content-height);\n  --saltButton-height: 16px;\n  --saltButton-width: 16px;\n  --salt-focused-outlineStyle: dotted;\n\n  align-items: center;\n  background: var(--salt-container-primary-background);\n  border-color: var(--vuu-color-gray-45);\n  border-radius: var(--saltButton-borderRadius);\n  border-width: 1px;\n  border-style: solid;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  min-width: calc(var(--salt-size-base) * 4);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n\n  .vuuFilterClauseField {\n    flex: 0 0 auto;\n  }\n  .vuuFilterClauseField:last-child {\n    flex: 1 0 auto;\n  }\n\n  .vuuFilterClauseField.vuuExpandoInput {\n    align-items: flex-end;\n    display: inline-flex;\n  }\n\n  .vuuExpandoCombobox {\n    flex-basis: auto;\n    flex-shrink: 0;\n    flex-grow: 0;\n  }\n\n  &:focus-within {\n    border-color: var(--vuu-color-purple-10);\n  }\n\n  .saltComboBox-focused {\n    outline: none;\n  }\n\n  .saltTokenizedInput {\n    height: 16px;\n    min-height: 16px;\n  }\n\n  .saltTokenizedInput .saltInputPill {\n    --pill-fontSize: 12px;\n    --saltButton-borderStyle: none;\n    --pill-background: none;\n    height: 16px;\n    margin: 0;\n  }\n\n  .saltTokenizedInput-pillGroup {\n    padding: 0;\n    height: 16px;\n  }\n\n  .saltDateInput {\n    width: auto;\n  }\n}\n\n.salt-density-high .vuuFilterClause {\n  padding: 4px 8px;\n  gap: 4px;\n  --salt-text-lineHeight: 12px;\n  --saltInputLegacy-fontSize: 12px;\n  --saltInputLegacy-minWidth: 12px;\n}\n\n.salt-density-high .vuuFilterClause .saltInput {\n  padding: 0;\n  min-height: 16px;\n  height: 16px;\n}\n\n.vuuFilterClauseOperator-hidden {\n  display: none;\n}\n\n.vuuFilterClause .saltInput-focused,\n.vuuFilterClause .saltTokenizedInput-focused {\n  outline: none;\n  color: var(--salt-content-primary-foreground);\n}\n\n.vuuFilterClause-DatePicker {\n  border: none;\n}\n";
 
 module.exports = filterClauseCss;
 //# sourceMappingURL=FilterClause.css.js.map

package/cjs/filter-clause/useFilterClause.js

@@ -72,7 +72,6 @@ const useFilterClause = ({
     }
     filterClauseModel.column = selectedColumn;
     setTimeout(() => {
-      console.log(`focus next element`);
       filterClauseFocusManagement.focusNextElement();
     }, 100);
   };

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

@@ -1 +1 @@
-{"version":3,"file":"useFilterClause.js","sources":["../../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\";\nexport type FilterClauseEditorHookProps = Pick<\n  FilterClauseProps,\n  \"columnsByName\" | \"filterClauseModel\" | \"onCancel\" | \"onFocusSave\"\n>;\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}: 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\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      console.log(`focus next element`);\n      focusNextElement();\n    }, 100);\n  };\n\n  const onSelectOperator = useCallback(\n    (_, 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 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    if (!filterClauseModel.isValid) {\n      const inputRef =\n        filterClauseModel.column === undefined\n          ? columnRef\n          : filterClauseModel.op === undefined\n            ? operatorRef\n            : null;\n\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    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":["../../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\";\nexport type FilterClauseEditorHookProps = Pick<\n  FilterClauseProps,\n  \"columnsByName\" | \"filterClauseModel\" | \"onCancel\" | \"onFocusSave\"\n>;\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}: 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\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    (_, 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 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    if (!filterClauseModel.isValid) {\n      const inputRef =\n        filterClauseModel.column === undefined\n          ? columnRef\n          : filterClauseModel.op === undefined\n            ? operatorRef\n            : null;\n\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    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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"}

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

@@ -24,7 +24,9 @@ const FilterClauseValueEditorText = react.forwardRef(
     const [valueInputValue, setValueInputValue] = react.useState(
       value?.toString() ?? ""
     );
-    const [typeaheadValues, setTypeaheadValues] = react.useState([]);
+    const [typeaheadValues, setTypeaheadValues] = react.useState(
+      []
+    );
     const getSuggestions = suggestionProvider();
     const handleSingleValueSelectionChange = react.useCallback(
       (_, [value2]) => onChangeValue(value2),
@@ -40,7 +42,9 @@ const FilterClauseValueEditorText = react.forwardRef(
         const vuuTable = vuuUtils.getVuuTable(table);
         const params = valueInputValue && !isMultiValue ? [vuuTable, column.name, valueInputValue] : [vuuTable, column.name];
         getSuggestions(params).then((suggestions) => {
-          if (suggestions.length === 0 && valueInputValue) {
+          if (suggestions === false) {
+            setTypeaheadValues(false);
+          } else if (suggestions.length === 0 && valueInputValue) {
             setTypeaheadValues(NO_DATA_MATCH);
           } else {
             setTypeaheadValues(suggestions);
@@ -53,7 +57,6 @@ const FilterClauseValueEditorText = react.forwardRef(
     const handleInputChange = react.useCallback(
       (evt) => {
         const { value: value2 } = evt.target;
-        console.log(`handleInputChange "${value2}"`);
         setValueInputValue(value2);
         if (operator === "starts" || operator === "ends" || operator === "contains") {
           onChangeValue(value2, false);
@@ -61,13 +64,18 @@ const FilterClauseValueEditorText = react.forwardRef(
       },
       [onChangeValue, operator]
     );
+    const handleInputCommit = react.useCallback(
+      (evt, value2 = "") => {
+        console.log(`commit value ${value2}`);
+        onChangeValue(value2);
+      },
+      [onChangeValue]
+    );
     const handleKeyDownFreeTextInput = react.useCallback(
       (evt) => {
-        console.log(`handleKeyDownFreeTextInput ${valueInputValue}`);
         if ((evt.key === "Enter" || evt.key === "Tab") && valueInputValue !== "") {
           evt.stopPropagation();
           evt.preventDefault();
-          console.log(`call onInputComplete ${valueInputValue}`);
           onChangeValue(valueInputValue);
         } else {
           inputPropsProp?.onKeyDown?.(evt);
@@ -86,6 +94,20 @@ const FilterClauseValueEditorText = react.forwardRef(
       }
     }, [inputPropsProp, handleKeyDownFreeTextInput, operator]);
     const getValueInputField = react.useCallback(() => {
+      if (typeaheadValues === false) {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          vuuUiControls.ExpandoInput,
+          {
+            inputProps,
+            className,
+            "data-field": "value",
+            value: valueInputValue,
+            ref: forwardedRef,
+            onChange: handleInputChange,
+            onCommit: handleInputCommit
+          }
+        );
+      }
       switch (operator) {
         case "in":
           return /* @__PURE__ */ jsxRuntime.jsx(
@@ -148,15 +170,16 @@ const FilterClauseValueEditorText = react.forwardRef(
         }
       }
     }, [
-      inputProps,
+      typeaheadValues,
       operator,
+      inputProps,
       className,
-      typeaheadValues,
+      valueInputValue,
+      forwardedRef,
       handleInputChange,
+      handleInputCommit,
       handleMultiValueSelectionChange,
-      forwardedRef,
       value,
-      valueInputValue,
       handleSingleValueSelectionChange
     ]);
     return getValueInputField();

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

@@ -1 +1 @@
-{"version":3,"file":"FilterClauseValueEditorText.js","sources":["../../../src/filter-clause/value-editors/FilterClauseValueEditorText.tsx"],"sourcesContent":["import { useTypeaheadSuggestions } from \"@vuu-ui/vuu-data-react\";\nimport type { SuggestionFetcher } from \"@vuu-ui/vuu-data-types\";\nimport type { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport { ExpandoInput, MultiSelectionHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport { getVuuTable } from \"@vuu-ui/vuu-utils\";\nimport { Option } from \"@salt-ds/core\";\nimport {\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEventHandler,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { ExpandoCombobox } from \"../ExpandoCombobox\";\nimport { FilterClauseValueEditor } from \"../filterClauseTypes\";\n\nexport interface FilterClauseTextValueEditorProps\n  extends FilterClauseValueEditor,\n    HTMLAttributes<HTMLDivElement> {\n  \"data-field\"?: string;\n  ref: RefObject<HTMLDivElement>;\n  operator: string;\n  suggestionProvider?: () => SuggestionFetcher;\n  value: string | string[];\n}\n\nconst NO_DATA_MATCH = [\"No matching data\"];\n\nexport const FilterClauseValueEditorText = forwardRef(\n  function FilterClauseTextValueEditor(\n    {\n      inputProps: inputPropsProp,\n      className,\n      column,\n      onChangeValue,\n      operator,\n      suggestionProvider = useTypeaheadSuggestions,\n      table,\n      value,\n    }: FilterClauseTextValueEditorProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n  ) {\n    const isMultiValue = operator === \"in\";\n\n    // If we have a multiselect text value which we are editing, this will render\n    // a comma delimited list of the selected values. That is not what we display\n    // by default when using a multiselect combo. Its not a huge problem - as soon\n    // as user focuses this component and we display dropdown, input text is cleared\n    // (so user can type to filter list) until dropdown closes again. <ight need to\n    // revisit.\n    const [valueInputValue, setValueInputValue] = useState(\n      value?.toString() ?? \"\",\n    );\n    const [typeaheadValues, setTypeaheadValues] = useState<string[]>([]);\n\n    const getSuggestions = suggestionProvider();\n\n    const handleSingleValueSelectionChange = useCallback(\n      (_, [value]: string[]) => onChangeValue(value),\n      [onChangeValue],\n    );\n\n    const handleMultiValueSelectionChange = useCallback<MultiSelectionHandler>(\n      // TODO when will this ever be final ?\n      (_, values) => onChangeValue(values, false),\n      [onChangeValue],\n    );\n\n    useEffect(() => {\n      if (table) {\n        const vuuTable = getVuuTable(table);\n        const params: TypeaheadParams =\n          valueInputValue && !isMultiValue\n            ? [vuuTable, column.name, valueInputValue]\n            : [vuuTable, column.name];\n        getSuggestions(params)\n          .then((suggestions) => {\n            if (suggestions.length === 0 && valueInputValue) {\n              setTypeaheadValues(NO_DATA_MATCH);\n            } else {\n              setTypeaheadValues(suggestions);\n            }\n          })\n          .catch((err) => {\n            console.error(\"Error getting suggestions\", err);\n          });\n      }\n    }, [table, column, valueInputValue, getSuggestions, isMultiValue]);\n\n    const handleInputChange = useCallback(\n      (evt: FormEvent<HTMLInputElement>) => {\n        const { value } = evt.target as HTMLInputElement;\n        console.log(`handleInputChange \"${value}\"`);\n        setValueInputValue(value);\n        // we want to set the filterclause status to valid, but not trigger focus chanmge\n        if (\n          operator === \"starts\" ||\n          operator === \"ends\" ||\n          operator === \"contains\"\n        ) {\n          onChangeValue(value, false);\n        }\n      },\n      [onChangeValue, operator],\n    );\n\n    const handleKeyDownFreeTextInput = useCallback<\n      KeyboardEventHandler<HTMLInputElement>\n    >(\n      (evt) => {\n        console.log(`handleKeyDownFreeTextInput ${valueInputValue}`);\n        if (\n          (evt.key === \"Enter\" || evt.key === \"Tab\") &&\n          valueInputValue !== \"\"\n        ) {\n          evt.stopPropagation();\n          evt.preventDefault();\n          console.log(`call onInputComplete ${valueInputValue}`);\n          onChangeValue(valueInputValue);\n        } else {\n          inputPropsProp?.onKeyDown?.(evt);\n        }\n      },\n      [inputPropsProp, onChangeValue, valueInputValue],\n    );\n\n    const inputProps = useMemo(() => {\n      if (operator === \"starts\" || operator === \"ends\") {\n        return {\n          ...inputPropsProp,\n          onKeyDown: handleKeyDownFreeTextInput,\n        };\n      } else {\n        return inputPropsProp;\n      }\n    }, [inputPropsProp, handleKeyDownFreeTextInput, operator]);\n\n    const getValueInputField = useCallback(() => {\n      switch (operator) {\n        case \"in\":\n          return (\n            <ExpandoCombobox\n              inputProps={inputProps}\n              className={className}\n              data-field=\"value\"\n              onChange={handleInputChange}\n              onSelectionChange={handleMultiValueSelectionChange}\n              ref={forwardedRef}\n              multiselect\n              truncate\n              value={value}\n            >\n              {typeaheadValues\n                // .filter((typeaheadValue) =>\n                //   typeaheadValue\n                //     .toLowerCase()\n                //     .includes(value.trim().toLowerCase())\n                // )\n                .map((state) => (\n                  <Option value={state} key={state} />\n                ))}\n            </ExpandoCombobox>\n          );\n        case \"starts\": {\n          return (\n            <ExpandoCombobox\n              inputProps={inputProps}\n              className={className}\n              data-field=\"value\"\n              onChange={handleInputChange}\n              onSelectionChange={handleSingleValueSelectionChange}\n              ref={forwardedRef}\n              value={value}\n            >\n              {typeaheadValues.map((state) => (\n                <Option value={state} key={state} disabled />\n              ))}\n            </ExpandoCombobox>\n          );\n        }\n\n        case \"ends\":\n          return (\n            <ExpandoInput\n              inputProps={inputProps}\n              className={className}\n              data-field=\"value\"\n              value={valueInputValue}\n              ref={forwardedRef}\n              onChange={handleInputChange}\n            />\n          );\n\n        default: {\n          return typeaheadValues.length > 0 ? (\n            <ExpandoCombobox\n              inputProps={inputProps}\n              className={className}\n              data-field=\"value\"\n              title=\"value\"\n              onChange={handleInputChange}\n              onSelectionChange={handleSingleValueSelectionChange}\n              ref={forwardedRef}\n              value={value}\n            >\n              {typeaheadValues.map((state) => (\n                <Option value={state} key={state} />\n              ))}\n            </ExpandoCombobox>\n          ) : null;\n        }\n      }\n    }, [\n      inputProps,\n      operator,\n      className,\n      typeaheadValues,\n      handleInputChange,\n      handleMultiValueSelectionChange,\n      forwardedRef,\n      value,\n      valueInputValue,\n      handleSingleValueSelectionChange,\n    ]);\n\n    return getValueInputField();\n  },\n);\n"],"names":["forwardRef","useTypeaheadSuggestions","useState","useCallback","value","useEffect","getVuuTable","useMemo","jsx","ExpandoCombobox","Option","ExpandoInput"],"mappings":"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"}
+{"version":3,"file":"FilterClauseValueEditorText.js","sources":["../../../src/filter-clause/value-editors/FilterClauseValueEditorText.tsx"],"sourcesContent":["import { useTypeaheadSuggestions } from \"@vuu-ui/vuu-data-react\";\nimport type { SuggestionFetcher } from \"@vuu-ui/vuu-data-types\";\nimport type { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport { ExpandoInput, MultiSelectionHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport { CommitHandler, getVuuTable } from \"@vuu-ui/vuu-utils\";\nimport { Option } from \"@salt-ds/core\";\nimport {\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEventHandler,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { ExpandoCombobox } from \"../ExpandoCombobox\";\nimport { FilterClauseValueEditor } from \"../filterClauseTypes\";\n\nexport interface FilterClauseTextValueEditorProps\n  extends FilterClauseValueEditor,\n    HTMLAttributes<HTMLDivElement> {\n  \"data-field\"?: string;\n  ref: RefObject<HTMLDivElement>;\n  operator: string;\n  suggestionProvider?: () => SuggestionFetcher;\n  value: string | string[];\n}\n\nconst NO_DATA_MATCH = [\"No matching data\"];\n\nexport const FilterClauseValueEditorText = forwardRef(\n  function FilterClauseTextValueEditor(\n    {\n      inputProps: inputPropsProp,\n      className,\n      column,\n      onChangeValue,\n      operator,\n      suggestionProvider = useTypeaheadSuggestions,\n      table,\n      value,\n    }: FilterClauseTextValueEditorProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n  ) {\n    const isMultiValue = operator === \"in\";\n\n    // If we have a multiselect text value which we are editing, this will render\n    // a comma delimited list of the selected values. That is not what we display\n    // by default when using a multiselect combo. Its not a huge problem - as soon\n    // as user focuses this component and we display dropdown, input text is cleared\n    // (so user can type to filter list) until dropdown closes again. <ight need to\n    // revisit.\n    const [valueInputValue, setValueInputValue] = useState(\n      value?.toString() ?? \"\",\n    );\n    const [typeaheadValues, setTypeaheadValues] = useState<string[] | false>(\n      [],\n    );\n\n    const getSuggestions = suggestionProvider();\n\n    const handleSingleValueSelectionChange = useCallback(\n      (_, [value]: string[]) => onChangeValue(value),\n      [onChangeValue],\n    );\n\n    const handleMultiValueSelectionChange = useCallback<MultiSelectionHandler>(\n      // TODO when will this ever be final ?\n      (_, values) => onChangeValue(values, false),\n      [onChangeValue],\n    );\n\n    useEffect(() => {\n      if (table) {\n        const vuuTable = getVuuTable(table);\n        const params: TypeaheadParams =\n          valueInputValue && !isMultiValue\n            ? [vuuTable, column.name, valueInputValue]\n            : [vuuTable, column.name];\n        getSuggestions(params)\n          .then((suggestions) => {\n            if (suggestions === false) {\n              setTypeaheadValues(false);\n            } else if (suggestions.length === 0 && valueInputValue) {\n              setTypeaheadValues(NO_DATA_MATCH);\n            } else {\n              setTypeaheadValues(suggestions);\n            }\n          })\n          .catch((err) => {\n            console.error(\"Error getting suggestions\", err);\n          });\n      }\n    }, [table, column, valueInputValue, getSuggestions, isMultiValue]);\n\n    const handleInputChange = useCallback(\n      (evt: FormEvent<HTMLInputElement>) => {\n        const { value } = evt.target as HTMLInputElement;\n        setValueInputValue(value);\n        // we want to set the filterclause status to valid, but not trigger focus change\n        if (\n          operator === \"starts\" ||\n          operator === \"ends\" ||\n          operator === \"contains\"\n        ) {\n          onChangeValue(value, false);\n        }\n      },\n      [onChangeValue, operator],\n    );\n\n    const handleInputCommit = useCallback<\n      CommitHandler<HTMLInputElement, string | undefined>\n    >(\n      (evt, value = \"\") => {\n        console.log(`commit value ${value}`);\n        onChangeValue(value);\n      },\n      [onChangeValue],\n    );\n\n    const handleKeyDownFreeTextInput = useCallback<\n      KeyboardEventHandler<HTMLInputElement>\n    >(\n      (evt) => {\n        if (\n          (evt.key === \"Enter\" || evt.key === \"Tab\") &&\n          valueInputValue !== \"\"\n        ) {\n          evt.stopPropagation();\n          evt.preventDefault();\n          onChangeValue(valueInputValue);\n        } else {\n          inputPropsProp?.onKeyDown?.(evt);\n        }\n      },\n      [inputPropsProp, onChangeValue, valueInputValue],\n    );\n\n    const inputProps = useMemo(() => {\n      if (operator === \"starts\" || operator === \"ends\") {\n        return {\n          ...inputPropsProp,\n          onKeyDown: handleKeyDownFreeTextInput,\n        };\n      } else {\n        return inputPropsProp;\n      }\n    }, [inputPropsProp, handleKeyDownFreeTextInput, operator]);\n\n    const getValueInputField = useCallback(() => {\n      if (typeaheadValues === false) {\n        // No typeahead service available\n        return (\n          <ExpandoInput\n            inputProps={inputProps}\n            className={className}\n            data-field=\"value\"\n            value={valueInputValue}\n            ref={forwardedRef}\n            onChange={handleInputChange}\n            onCommit={handleInputCommit}\n          />\n        );\n      }\n      switch (operator) {\n        case \"in\":\n          return (\n            <ExpandoCombobox\n              inputProps={inputProps}\n              className={className}\n              data-field=\"value\"\n              onChange={handleInputChange}\n              onSelectionChange={handleMultiValueSelectionChange}\n              ref={forwardedRef}\n              multiselect\n              truncate\n              value={value}\n            >\n              {typeaheadValues\n                // .filter((typeaheadValue) =>\n                //   typeaheadValue\n                //     .toLowerCase()\n                //     .includes(value.trim().toLowerCase())\n                // )\n                .map((state) => (\n                  <Option value={state} key={state} />\n                ))}\n            </ExpandoCombobox>\n          );\n        case \"starts\": {\n          return (\n            <ExpandoCombobox\n              inputProps={inputProps}\n              className={className}\n              data-field=\"value\"\n              onChange={handleInputChange}\n              onSelectionChange={handleSingleValueSelectionChange}\n              ref={forwardedRef}\n              value={value}\n            >\n              {typeaheadValues.map((state) => (\n                <Option value={state} key={state} disabled />\n              ))}\n            </ExpandoCombobox>\n          );\n        }\n\n        case \"ends\":\n          return (\n            <ExpandoInput\n              inputProps={inputProps}\n              className={className}\n              data-field=\"value\"\n              value={valueInputValue}\n              ref={forwardedRef}\n              onChange={handleInputChange}\n            />\n          );\n\n        default: {\n          return typeaheadValues.length > 0 ? (\n            <ExpandoCombobox\n              inputProps={inputProps}\n              className={className}\n              data-field=\"value\"\n              title=\"value\"\n              onChange={handleInputChange}\n              onSelectionChange={handleSingleValueSelectionChange}\n              ref={forwardedRef}\n              value={value}\n            >\n              {typeaheadValues.map((state) => (\n                <Option value={state} key={state} />\n              ))}\n            </ExpandoCombobox>\n          ) : null;\n        }\n      }\n    }, [\n      typeaheadValues,\n      operator,\n      inputProps,\n      className,\n      valueInputValue,\n      forwardedRef,\n      handleInputChange,\n      handleInputCommit,\n      handleMultiValueSelectionChange,\n      value,\n      handleSingleValueSelectionChange,\n    ]);\n\n    return getValueInputField();\n  },\n);\n"],"names":["forwardRef","useTypeaheadSuggestions","useState","useCallback","value","useEffect","getVuuTable","useMemo","jsx","ExpandoInput","ExpandoCombobox","Option"],"mappings":"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"}

package/esm/filter-clause/FilterClause.css.js

@@ -1,4 +1,4 @@
-var filterClauseCss = ".vuuFilterClause {\n  --vuuExpandoInput-top: 0;\n  --content-height: calc(var(--salt-size-base) - var(--salt-spacing-150));\n  --vuuExpandoInput-height: var(--content-height);\n  --vuuExpandoCombobox-height: var(--content-height);\n  --saltButton-height: 16px;\n  --saltButton-width: 16px;\n  --salt-focused-outlineStyle: dotted;\n\n  align-items: center;\n  background: var(--salt-container-primary-background);\n  border-color: var(--vuu-color-gray-45);\n  border-radius: var(--saltButton-borderRadius);\n  border-width: 1px;\n  border-style: solid;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  min-width: calc(var(--salt-size-base) * 4);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n\n  .vuuFilterClauseField {\n    flex: 0 0 auto;\n  }\n  .vuuFilterClauseField:last-child {\n    flex: 1 0 auto;\n  }\n\n  .vuuExpandoCombobox {\n    flex-basis: auto;\n    flex-shrink: 0;\n    flex-grow: 0;\n  }\n\n  &:focus-within {\n    border-color: var(--vuu-color-purple-10);\n  }\n\n  .saltComboBox-focused {\n    outline: none;\n  }\n\n  .saltTokenizedInput {\n    height: 16px;\n    min-height: 16px;\n  }\n\n  .saltTokenizedInput .saltInputPill {\n    --pill-fontSize: 12px;\n    --saltButton-borderStyle: none;\n    --pill-background: none;\n    height: 16px;\n    margin: 0;\n  }\n\n  .saltTokenizedInput-pillGroup {\n    padding: 0;\n    height: 16px;\n  }\n\n  .saltDateInput {\n    width: auto;\n  }\n}\n\n.salt-density-high .vuuFilterClause {\n  padding: 4px 8px;\n  gap: 4px;\n  --salt-text-lineHeight: 12px;\n  --saltInputLegacy-fontSize: 12px;\n  --saltInputLegacy-minWidth: 12px;\n}\n\n.salt-density-high .vuuFilterClause .saltInput {\n  padding: 0;\n  min-height: 16px;\n  height: 16px;\n}\n\n.vuuFilterClauseOperator-hidden {\n  display: none;\n}\n\n.vuuFilterClause .saltInput-focused,\n.vuuFilterClause .saltTokenizedInput-focused {\n  outline: none;\n  color: var(--salt-content-primary-foreground);\n}\n\n.vuuFilterClause-DatePicker {\n  border: none;\n}\n";
+var filterClauseCss = ".vuuFilterClause {\n  --vuuExpandoInput-top: 0;\n  --content-height: calc(var(--salt-size-base) - var(--salt-spacing-150));\n  --vuuExpandoInput-height: var(--content-height);\n  --vuuExpandoCombobox-height: var(--content-height);\n  --saltButton-height: 16px;\n  --saltButton-width: 16px;\n  --salt-focused-outlineStyle: dotted;\n\n  align-items: center;\n  background: var(--salt-container-primary-background);\n  border-color: var(--vuu-color-gray-45);\n  border-radius: var(--saltButton-borderRadius);\n  border-width: 1px;\n  border-style: solid;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-50);\n  height: var(--salt-size-base);\n  min-width: calc(var(--salt-size-base) * 4);\n  padding: 0 var(--salt-spacing-100);\n  width: fit-content;\n\n  .vuuFilterClauseField {\n    flex: 0 0 auto;\n  }\n  .vuuFilterClauseField:last-child {\n    flex: 1 0 auto;\n  }\n\n  .vuuFilterClauseField.vuuExpandoInput {\n    align-items: flex-end;\n    display: inline-flex;\n  }\n\n  .vuuExpandoCombobox {\n    flex-basis: auto;\n    flex-shrink: 0;\n    flex-grow: 0;\n  }\n\n  &:focus-within {\n    border-color: var(--vuu-color-purple-10);\n  }\n\n  .saltComboBox-focused {\n    outline: none;\n  }\n\n  .saltTokenizedInput {\n    height: 16px;\n    min-height: 16px;\n  }\n\n  .saltTokenizedInput .saltInputPill {\n    --pill-fontSize: 12px;\n    --saltButton-borderStyle: none;\n    --pill-background: none;\n    height: 16px;\n    margin: 0;\n  }\n\n  .saltTokenizedInput-pillGroup {\n    padding: 0;\n    height: 16px;\n  }\n\n  .saltDateInput {\n    width: auto;\n  }\n}\n\n.salt-density-high .vuuFilterClause {\n  padding: 4px 8px;\n  gap: 4px;\n  --salt-text-lineHeight: 12px;\n  --saltInputLegacy-fontSize: 12px;\n  --saltInputLegacy-minWidth: 12px;\n}\n\n.salt-density-high .vuuFilterClause .saltInput {\n  padding: 0;\n  min-height: 16px;\n  height: 16px;\n}\n\n.vuuFilterClauseOperator-hidden {\n  display: none;\n}\n\n.vuuFilterClause .saltInput-focused,\n.vuuFilterClause .saltTokenizedInput-focused {\n  outline: none;\n  color: var(--salt-content-primary-foreground);\n}\n\n.vuuFilterClause-DatePicker {\n  border: none;\n}\n";
 
 export { filterClauseCss as default };
 //# sourceMappingURL=FilterClause.css.js.map

package/esm/filter-clause/useFilterClause.js

@@ -70,7 +70,6 @@ const useFilterClause = ({
     }
     filterClauseModel.column = selectedColumn;
     setTimeout(() => {
-      console.log(`focus next element`);
       focusNextElement();
     }, 100);
   };

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

@@ -1 +1 @@
-{"version":3,"file":"useFilterClause.js","sources":["../../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\";\nexport type FilterClauseEditorHookProps = Pick<\n  FilterClauseProps,\n  \"columnsByName\" | \"filterClauseModel\" | \"onCancel\" | \"onFocusSave\"\n>;\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}: 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\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      console.log(`focus next element`);\n      focusNextElement();\n    }, 100);\n  };\n\n  const onSelectOperator = useCallback(\n    (_, 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 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    if (!filterClauseModel.isValid) {\n      const inputRef =\n        filterClauseModel.column === undefined\n          ? columnRef\n          : filterClauseModel.op === undefined\n            ? operatorRef\n            : null;\n\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    operatorRef,\n    selectedColumn: columnsByName[filterClauseModel.column ?? \"\"],\n    valueRef: setValueRef,\n  };\n};\n"],"names":["filterClause"],"mappings":"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"}
+{"version":3,"file":"useFilterClause.js","sources":["../../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\";\nexport type FilterClauseEditorHookProps = Pick<\n  FilterClauseProps,\n  \"columnsByName\" | \"filterClauseModel\" | \"onCancel\" | \"onFocusSave\"\n>;\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}: 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\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    (_, 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 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    if (!filterClauseModel.isValid) {\n      const inputRef =\n        filterClauseModel.column === undefined\n          ? columnRef\n          : filterClauseModel.op === undefined\n            ? operatorRef\n            : null;\n\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    operatorRef,\n    selectedColumn: columnsByName[filterClauseModel.column ?? \"\"],\n    valueRef: setValueRef,\n  };\n};\n"],"names":["filterClause"],"mappings":";;;;AA8BO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AACF,CAAmC,KAAA;AACjC,EAAM,MAAA,CAAC,YAAc,EAAA,eAAe,CAAI,GAAA,QAAA;AAAA,IACtC,iBAAkB,CAAA,OAAA,GAAU,iBAAkB,CAAA,QAAA,KAAa,EAAC;AAAA,GAC9D,CAAA;AAEA,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAkB,iBAAA,CAAA,EAAA,CAAG,cAAgB,EAAA,CAACA,aAAiB,KAAA;AACrD,MAAA,eAAA,CAAgBA,aAAY,CAAA,CAAA;AAAA,KAC7B,CAAA,CAAA;AAAA,GACH,EAAG,CAAC,iBAAiB,CAAC,CAAA,CAAA;AAEtB,EAAM,MAAA,SAAA,GAAY,OAAuB,IAAI,CAAA,CAAA;AAC7C,EAAM,MAAA,WAAA,GAAc,OAAuB,IAAI,CAAA,CAAA;AAC/C,EAAM,MAAA,QAAA,GAAW,OAA8B,IAAI,CAAA,CAAA;AAEnD,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,EAAO,KAAA;AACN,MAAA,QAAA,CAAS,OAAU,GAAA,EAAA,CAAA;AACnB,MAAI,IAAA,CAAC,kBAAkB,OAAS,EAAA;AAC9B,QAAI,EAAA,EAAA,aAAA,CAAc,OAAO,CAAA,EAAG,KAAM,EAAA,CAAA;AAAA,OACpC;AAAA,KACF;AAAA,IACA,CAAC,kBAAkB,OAAO,CAAA;AAAA,GAC5B,CAAA;AAEA,EAAA,MAAM,wCAA2C,GAAA,WAAA;AAAA,IAC/C,CAAC,GAAuB,KAAA;AACtB,MAAA,MAAM,QAAQ,GAAI,CAAA,MAAA,CAAA;AAClB,MAAI,IAAA,KAAA,CAAM,UAAU,EAAI,EAAA;AACtB,QAAM,MAAA,KAAA,GAAQ,KAAM,CAAA,OAAA,CAAQ,cAAc,CAAA,CAAA;AAC1C,QAAQ,QAAA,KAAA,EAAO,SAAS,KAAO;AAAA,UAC7B,KAAK,UAAY,EAAA;AACf,YAAA,iBAAA,CAAkB,MAAS,GAAA,KAAA,CAAA,CAAA;AAC3B,YAAA,yBAAA,CAA0B,KAAK,CAAA,CAAA;AAC/B,YAAA,MAAA;AAAA,WACF;AAAA,UACA,KAAK,OAAS,EAAA;AACZ,YAAA,iBAAA,CAAkB,MAAM,KAAS,CAAA,CAAA,CAAA;AACjC,YAAA,yBAAA,CAA0B,KAAK,CAAA,CAAA;AAC/B,YAAA,MAAA;AAAA,WACF;AAAA,UACA,KAAK,QAAU,EAAA;AACb,YAAI,IAAA,gBAAA,CAAiB,KAAK,CAAG,EAAA;AAI3B,cAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,cAAA,QAAA,GAAW,mBAAmB,WAAW,CAAA,CAAA;AAAA,aAC3C;AAAA,WACF;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,mBAAmB,QAAQ,CAAA;AAAA,GAC9B,CAAA;AAEA,EAAM,MAAA,cAAA,GAAiB,CAAC,GAAA,EAAqB,cAA2B,KAAA;AACtE,IAAA,IAAI,cAAgB,EAAA;AAClB,MAAI,IAAA,GAAA,EAAK,SAAS,SAAW,EAAA;AAC3B,QAAM,MAAA,EAAE,KAAQ,GAAA,GAAA,CAAA;AAChB,QAAA,IAAI,QAAQ,KAAO,EAAA;AACjB,UAAI,IAAA,iBAAA,CAAkB,WAAW,cAAgB,EAAA;AAE/C,YAAA,OAAA;AAAA,WACK,MAAA;AAEL,YAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AAAA,WACrB;AAAA,SACF;AAAA,OACF;AAAA,KACF;AACA,IAAA,iBAAA,CAAkB,MAAS,GAAA,cAAA,CAAA;AAC3B,IAAA,UAAA,CAAW,MAAM;AACf,MAAiB,gBAAA,EAAA,CAAA;AAAA,OAChB,GAAG,CAAA,CAAA;AAAA,GACR,CAAA;AAEA,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,GAAG,UAA+B,KAAA;AACjC,MAAA,iBAAA,CAAkB,MAAM,UAAU,CAAA,CAAA;AAClC,MAAiB,gBAAA,EAAA,CAAA;AAAA,KACnB;AAAA,IACA,CAAC,iBAAiB,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,KAAO,EAAA,OAAA,KAAY,iBAAkB,CAAA,QAAA,CAAS,OAAO,OAAO,CAAA;AAAA,IAC7D,CAAC,iBAAiB,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,MAAM,mBAAsB,GAAA,WAAA;AAAA,IAC1B,MAAM,iBAAkB,CAAA,QAAA,CAAS,KAAS,CAAA,CAAA;AAAA,IAC1C,CAAC,iBAAiB,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,MAAM,8BAAiC,GAAA,WAAA;AAAA,IACrC,CAAC,GAAyC,KAAA;AACxC,MAAA,IAAI,CAAC,WAAa,EAAA,YAAY,EAAE,QAAS,CAAA,GAAA,CAAI,GAAG,CAAG,EAAA;AACjD,QAAA,8BAAA,CAA+B,GAAG,CAAA,CAAA;AAAA,OACpC,MAAA,IAAW,GAAI,CAAA,GAAA,KAAQ,WAAa,EAAA;AAClC,QAAA,wCAAA,CAAyC,GAAG,CAAA,CAAA;AAAA,OAC9C,MAAA,IAAW,GAAI,CAAA,GAAA,KAAQ,QAAU,EAAA;AAE/B,QAAA,IAAI,CAAC,iBAAA,CAAkB,GAAI,CAAA,MAAM,CAAG,EAAA;AAClC,UAAA,QAAA,GAAW,mBAAmB,QAAQ,CAAA,CAAA;AAAA,SACxC;AAAA,OACS,MAAA,IAAA,GAAA,CAAI,GAAQ,KAAA,KAAA,IAAS,IAAI,QAAU,EAAA;AAC5C,QAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,QAAA,6BAAA,CAA8B,IAAI,MAAqB,CAAA,CAAA;AAAA,OACzD,MAAA,IAAW,GAAI,CAAA,GAAA,KAAQ,KAAO,EAAA;AAE5B,QAAA,IAAI,kBAAkB,OAAS,EAAA;AAC7B,UAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AACnB,UAAA,GAAA,CAAI,eAAgB,EAAA,CAAA;AAEpB,UAAc,WAAA,IAAA,CAAA;AAAA,SAChB;AAAA,OACF;AAAA,KACF;AAAA,IACA;AAAA,MACE,iBAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,wCAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,UAAa,GAAA,OAAA;AAAA,IACjB,OAAO;AAAA,MACL,gBAAkB,EAAA,8BAAA;AAAA,MAClB,QAAU,EAAA,CAAA,CAAA;AAAA,KACZ,CAAA;AAAA,IACA,CAAC,8BAA8B,CAAA;AAAA,GACjC,CAAA;AAGA,EAAA,SAAA,CAAU,MAAM;AAGd,IAAI,IAAA,CAAC,kBAAkB,OAAS,EAAA;AAC9B,MAAM,MAAA,QAAA,GACJ,kBAAkB,MAAW,KAAA,KAAA,CAAA,GACzB,YACA,iBAAkB,CAAA,EAAA,KAAO,SACvB,WACA,GAAA,IAAA,CAAA;AAER,MAAA,qBAAA,CAAsB,MAAM;AAC1B,QAAA,QAAA,EAAU,OAAS,EAAA,aAAA,CAAc,OAAO,CAAA,EAAG,KAAM,EAAA,CAAA;AAAA,OAClD,CAAA,CAAA;AAAA,KACH;AAAA,GACF,EAAG,CAAC,iBAAiB,CAAC,CAAA,CAAA;AAEtB,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAe,EAAA,iBAAA;AAAA,IACf,eAAiB,EAAA,mBAAA;AAAA,IACjB,cAAA;AAAA,IACA,gBAAA;AAAA,IACA,WAAA;AAAA,IACA,cAAgB,EAAA,aAAA,CAAc,iBAAkB,CAAA,MAAA,IAAU,EAAE,CAAA;AAAA,IAC5D,QAAU,EAAA,WAAA;AAAA,GACZ,CAAA;AACF;;;;"}

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

@@ -22,7 +22,9 @@ const FilterClauseValueEditorText = forwardRef(
     const [valueInputValue, setValueInputValue] = useState(
       value?.toString() ?? ""
     );
-    const [typeaheadValues, setTypeaheadValues] = useState([]);
+    const [typeaheadValues, setTypeaheadValues] = useState(
+      []
+    );
     const getSuggestions = suggestionProvider();
     const handleSingleValueSelectionChange = useCallback(
       (_, [value2]) => onChangeValue(value2),
@@ -38,7 +40,9 @@ const FilterClauseValueEditorText = forwardRef(
         const vuuTable = getVuuTable(table);
         const params = valueInputValue && !isMultiValue ? [vuuTable, column.name, valueInputValue] : [vuuTable, column.name];
         getSuggestions(params).then((suggestions) => {
-          if (suggestions.length === 0 && valueInputValue) {
+          if (suggestions === false) {
+            setTypeaheadValues(false);
+          } else if (suggestions.length === 0 && valueInputValue) {
             setTypeaheadValues(NO_DATA_MATCH);
           } else {
             setTypeaheadValues(suggestions);
@@ -51,7 +55,6 @@ const FilterClauseValueEditorText = forwardRef(
     const handleInputChange = useCallback(
       (evt) => {
         const { value: value2 } = evt.target;
-        console.log(`handleInputChange "${value2}"`);
         setValueInputValue(value2);
         if (operator === "starts" || operator === "ends" || operator === "contains") {
           onChangeValue(value2, false);
@@ -59,13 +62,18 @@ const FilterClauseValueEditorText = forwardRef(
       },
       [onChangeValue, operator]
     );
+    const handleInputCommit = useCallback(
+      (evt, value2 = "") => {
+        console.log(`commit value ${value2}`);
+        onChangeValue(value2);
+      },
+      [onChangeValue]
+    );
     const handleKeyDownFreeTextInput = useCallback(
       (evt) => {
-        console.log(`handleKeyDownFreeTextInput ${valueInputValue}`);
         if ((evt.key === "Enter" || evt.key === "Tab") && valueInputValue !== "") {
           evt.stopPropagation();
           evt.preventDefault();
-          console.log(`call onInputComplete ${valueInputValue}`);
           onChangeValue(valueInputValue);
         } else {
           inputPropsProp?.onKeyDown?.(evt);
@@ -84,6 +92,20 @@ const FilterClauseValueEditorText = forwardRef(
       }
     }, [inputPropsProp, handleKeyDownFreeTextInput, operator]);
     const getValueInputField = useCallback(() => {
+      if (typeaheadValues === false) {
+        return /* @__PURE__ */ jsx(
+          ExpandoInput,
+          {
+            inputProps,
+            className,
+            "data-field": "value",
+            value: valueInputValue,
+            ref: forwardedRef,
+            onChange: handleInputChange,
+            onCommit: handleInputCommit
+          }
+        );
+      }
       switch (operator) {
         case "in":
           return /* @__PURE__ */ jsx(
@@ -146,15 +168,16 @@ const FilterClauseValueEditorText = forwardRef(
         }
       }
     }, [
-      inputProps,
+      typeaheadValues,
       operator,
+      inputProps,
       className,
-      typeaheadValues,
+      valueInputValue,
+      forwardedRef,
       handleInputChange,
+      handleInputCommit,
       handleMultiValueSelectionChange,
-      forwardedRef,
       value,
-      valueInputValue,
       handleSingleValueSelectionChange
     ]);
     return getValueInputField();

package/esm/filter-clause/value-editors/FilterClauseValueEditorText.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterClauseValueEditorText.js","sources":["../../../src/filter-clause/value-editors/FilterClauseValueEditorText.tsx"],"sourcesContent":["import { useTypeaheadSuggestions } from \"@vuu-ui/vuu-data-react\";\nimport type { SuggestionFetcher } from \"@vuu-ui/vuu-data-types\";\nimport type { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport { ExpandoInput, MultiSelectionHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport { getVuuTable } from \"@vuu-ui/vuu-utils\";\nimport { Option } from \"@salt-ds/core\";\nimport {\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEventHandler,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { ExpandoCombobox } from \"../ExpandoCombobox\";\nimport { FilterClauseValueEditor } from \"../filterClauseTypes\";\n\nexport interface FilterClauseTextValueEditorProps\n  extends FilterClauseValueEditor,\n    HTMLAttributes<HTMLDivElement> {\n  \"data-field\"?: string;\n  ref: RefObject<HTMLDivElement>;\n  operator: string;\n  suggestionProvider?: () => SuggestionFetcher;\n  value: string | string[];\n}\n\nconst NO_DATA_MATCH = [\"No matching data\"];\n\nexport const FilterClauseValueEditorText = forwardRef(\n  function FilterClauseTextValueEditor(\n    {\n      inputProps: inputPropsProp,\n      className,\n      column,\n      onChangeValue,\n      operator,\n      suggestionProvider = useTypeaheadSuggestions,\n      table,\n      value,\n    }: FilterClauseTextValueEditorProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n  ) {\n    const isMultiValue = operator === \"in\";\n\n    // If we have a multiselect text value which we are editing, this will render\n    // a comma delimited list of the selected values. That is not what we display\n    // by default when using a multiselect combo. Its not a huge problem - as soon\n    // as user focuses this component and we display dropdown, input text is cleared\n    // (so user can type to filter list) until dropdown closes again. <ight need to\n    // revisit.\n    const [valueInputValue, setValueInputValue] = useState(\n      value?.toString() ?? \"\",\n    );\n    const [typeaheadValues, setTypeaheadValues] = useState<string[]>([]);\n\n    const getSuggestions = suggestionProvider();\n\n    const handleSingleValueSelectionChange = useCallback(\n      (_, [value]: string[]) => onChangeValue(value),\n      [onChangeValue],\n    );\n\n    const handleMultiValueSelectionChange = useCallback<MultiSelectionHandler>(\n      // TODO when will this ever be final ?\n      (_, values) => onChangeValue(values, false),\n      [onChangeValue],\n    );\n\n    useEffect(() => {\n      if (table) {\n        const vuuTable = getVuuTable(table);\n        const params: TypeaheadParams =\n          valueInputValue && !isMultiValue\n            ? [vuuTable, column.name, valueInputValue]\n            : [vuuTable, column.name];\n        getSuggestions(params)\n          .then((suggestions) => {\n            if (suggestions.length === 0 && valueInputValue) {\n              setTypeaheadValues(NO_DATA_MATCH);\n            } else {\n              setTypeaheadValues(suggestions);\n            }\n          })\n          .catch((err) => {\n            console.error(\"Error getting suggestions\", err);\n          });\n      }\n    }, [table, column, valueInputValue, getSuggestions, isMultiValue]);\n\n    const handleInputChange = useCallback(\n      (evt: FormEvent<HTMLInputElement>) => {\n        const { value } = evt.target as HTMLInputElement;\n        console.log(`handleInputChange \"${value}\"`);\n        setValueInputValue(value);\n        // we want to set the filterclause status to valid, but not trigger focus chanmge\n        if (\n          operator === \"starts\" ||\n          operator === \"ends\" ||\n          operator === \"contains\"\n        ) {\n          onChangeValue(value, false);\n        }\n      },\n      [onChangeValue, operator],\n    );\n\n    const handleKeyDownFreeTextInput = useCallback<\n      KeyboardEventHandler<HTMLInputElement>\n    >(\n      (evt) => {\n        console.log(`handleKeyDownFreeTextInput ${valueInputValue}`);\n        if (\n          (evt.key === \"Enter\" || evt.key === \"Tab\") &&\n          valueInputValue !== \"\"\n        ) {\n          evt.stopPropagation();\n          evt.preventDefault();\n          console.log(`call onInputComplete ${valueInputValue}`);\n          onChangeValue(valueInputValue);\n        } else {\n          inputPropsProp?.onKeyDown?.(evt);\n        }\n      },\n      [inputPropsProp, onChangeValue, valueInputValue],\n    );\n\n    const inputProps = useMemo(() => {\n      if (operator === \"starts\" || operator === \"ends\") {\n        return {\n          ...inputPropsProp,\n          onKeyDown: handleKeyDownFreeTextInput,\n        };\n      } else {\n        return inputPropsProp;\n      }\n    }, [inputPropsProp, handleKeyDownFreeTextInput, operator]);\n\n    const getValueInputField = useCallback(() => {\n      switch (operator) {\n        case \"in\":\n          return (\n            <ExpandoCombobox\n              inputProps={inputProps}\n              className={className}\n              data-field=\"value\"\n              onChange={handleInputChange}\n              onSelectionChange={handleMultiValueSelectionChange}\n              ref={forwardedRef}\n              multiselect\n              truncate\n              value={value}\n            >\n              {typeaheadValues\n                // .filter((typeaheadValue) =>\n                //   typeaheadValue\n                //     .toLowerCase()\n                //     .includes(value.trim().toLowerCase())\n                // )\n                .map((state) => (\n                  <Option value={state} key={state} />\n                ))}\n            </ExpandoCombobox>\n          );\n        case \"starts\": {\n          return (\n            <ExpandoCombobox\n              inputProps={inputProps}\n              className={className}\n              data-field=\"value\"\n              onChange={handleInputChange}\n              onSelectionChange={handleSingleValueSelectionChange}\n              ref={forwardedRef}\n              value={value}\n            >\n              {typeaheadValues.map((state) => (\n                <Option value={state} key={state} disabled />\n              ))}\n            </ExpandoCombobox>\n          );\n        }\n\n        case \"ends\":\n          return (\n            <ExpandoInput\n              inputProps={inputProps}\n              className={className}\n              data-field=\"value\"\n              value={valueInputValue}\n              ref={forwardedRef}\n              onChange={handleInputChange}\n            />\n          );\n\n        default: {\n          return typeaheadValues.length > 0 ? (\n            <ExpandoCombobox\n              inputProps={inputProps}\n              className={className}\n              data-field=\"value\"\n              title=\"value\"\n              onChange={handleInputChange}\n              onSelectionChange={handleSingleValueSelectionChange}\n              ref={forwardedRef}\n              value={value}\n            >\n              {typeaheadValues.map((state) => (\n                <Option value={state} key={state} />\n              ))}\n            </ExpandoCombobox>\n          ) : null;\n        }\n      }\n    }, [\n      inputProps,\n      operator,\n      className,\n      typeaheadValues,\n      handleInputChange,\n      handleMultiValueSelectionChange,\n      forwardedRef,\n      value,\n      valueInputValue,\n      handleSingleValueSelectionChange,\n    ]);\n\n    return getValueInputField();\n  },\n);\n"],"names":["value"],"mappings":"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"}
+{"version":3,"file":"FilterClauseValueEditorText.js","sources":["../../../src/filter-clause/value-editors/FilterClauseValueEditorText.tsx"],"sourcesContent":["import { useTypeaheadSuggestions } from \"@vuu-ui/vuu-data-react\";\nimport type { SuggestionFetcher } from \"@vuu-ui/vuu-data-types\";\nimport type { TypeaheadParams } from \"@vuu-ui/vuu-protocol-types\";\nimport { ExpandoInput, MultiSelectionHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport { CommitHandler, getVuuTable } from \"@vuu-ui/vuu-utils\";\nimport { Option } from \"@salt-ds/core\";\nimport {\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEventHandler,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { ExpandoCombobox } from \"../ExpandoCombobox\";\nimport { FilterClauseValueEditor } from \"../filterClauseTypes\";\n\nexport interface FilterClauseTextValueEditorProps\n  extends FilterClauseValueEditor,\n    HTMLAttributes<HTMLDivElement> {\n  \"data-field\"?: string;\n  ref: RefObject<HTMLDivElement>;\n  operator: string;\n  suggestionProvider?: () => SuggestionFetcher;\n  value: string | string[];\n}\n\nconst NO_DATA_MATCH = [\"No matching data\"];\n\nexport const FilterClauseValueEditorText = forwardRef(\n  function FilterClauseTextValueEditor(\n    {\n      inputProps: inputPropsProp,\n      className,\n      column,\n      onChangeValue,\n      operator,\n      suggestionProvider = useTypeaheadSuggestions,\n      table,\n      value,\n    }: FilterClauseTextValueEditorProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n  ) {\n    const isMultiValue = operator === \"in\";\n\n    // If we have a multiselect text value which we are editing, this will render\n    // a comma delimited list of the selected values. That is not what we display\n    // by default when using a multiselect combo. Its not a huge problem - as soon\n    // as user focuses this component and we display dropdown, input text is cleared\n    // (so user can type to filter list) until dropdown closes again. <ight need to\n    // revisit.\n    const [valueInputValue, setValueInputValue] = useState(\n      value?.toString() ?? \"\",\n    );\n    const [typeaheadValues, setTypeaheadValues] = useState<string[] | false>(\n      [],\n    );\n\n    const getSuggestions = suggestionProvider();\n\n    const handleSingleValueSelectionChange = useCallback(\n      (_, [value]: string[]) => onChangeValue(value),\n      [onChangeValue],\n    );\n\n    const handleMultiValueSelectionChange = useCallback<MultiSelectionHandler>(\n      // TODO when will this ever be final ?\n      (_, values) => onChangeValue(values, false),\n      [onChangeValue],\n    );\n\n    useEffect(() => {\n      if (table) {\n        const vuuTable = getVuuTable(table);\n        const params: TypeaheadParams =\n          valueInputValue && !isMultiValue\n            ? [vuuTable, column.name, valueInputValue]\n            : [vuuTable, column.name];\n        getSuggestions(params)\n          .then((suggestions) => {\n            if (suggestions === false) {\n              setTypeaheadValues(false);\n            } else if (suggestions.length === 0 && valueInputValue) {\n              setTypeaheadValues(NO_DATA_MATCH);\n            } else {\n              setTypeaheadValues(suggestions);\n            }\n          })\n          .catch((err) => {\n            console.error(\"Error getting suggestions\", err);\n          });\n      }\n    }, [table, column, valueInputValue, getSuggestions, isMultiValue]);\n\n    const handleInputChange = useCallback(\n      (evt: FormEvent<HTMLInputElement>) => {\n        const { value } = evt.target as HTMLInputElement;\n        setValueInputValue(value);\n        // we want to set the filterclause status to valid, but not trigger focus change\n        if (\n          operator === \"starts\" ||\n          operator === \"ends\" ||\n          operator === \"contains\"\n        ) {\n          onChangeValue(value, false);\n        }\n      },\n      [onChangeValue, operator],\n    );\n\n    const handleInputCommit = useCallback<\n      CommitHandler<HTMLInputElement, string | undefined>\n    >(\n      (evt, value = \"\") => {\n        console.log(`commit value ${value}`);\n        onChangeValue(value);\n      },\n      [onChangeValue],\n    );\n\n    const handleKeyDownFreeTextInput = useCallback<\n      KeyboardEventHandler<HTMLInputElement>\n    >(\n      (evt) => {\n        if (\n          (evt.key === \"Enter\" || evt.key === \"Tab\") &&\n          valueInputValue !== \"\"\n        ) {\n          evt.stopPropagation();\n          evt.preventDefault();\n          onChangeValue(valueInputValue);\n        } else {\n          inputPropsProp?.onKeyDown?.(evt);\n        }\n      },\n      [inputPropsProp, onChangeValue, valueInputValue],\n    );\n\n    const inputProps = useMemo(() => {\n      if (operator === \"starts\" || operator === \"ends\") {\n        return {\n          ...inputPropsProp,\n          onKeyDown: handleKeyDownFreeTextInput,\n        };\n      } else {\n        return inputPropsProp;\n      }\n    }, [inputPropsProp, handleKeyDownFreeTextInput, operator]);\n\n    const getValueInputField = useCallback(() => {\n      if (typeaheadValues === false) {\n        // No typeahead service available\n        return (\n          <ExpandoInput\n            inputProps={inputProps}\n            className={className}\n            data-field=\"value\"\n            value={valueInputValue}\n            ref={forwardedRef}\n            onChange={handleInputChange}\n            onCommit={handleInputCommit}\n          />\n        );\n      }\n      switch (operator) {\n        case \"in\":\n          return (\n            <ExpandoCombobox\n              inputProps={inputProps}\n              className={className}\n              data-field=\"value\"\n              onChange={handleInputChange}\n              onSelectionChange={handleMultiValueSelectionChange}\n              ref={forwardedRef}\n              multiselect\n              truncate\n              value={value}\n            >\n              {typeaheadValues\n                // .filter((typeaheadValue) =>\n                //   typeaheadValue\n                //     .toLowerCase()\n                //     .includes(value.trim().toLowerCase())\n                // )\n                .map((state) => (\n                  <Option value={state} key={state} />\n                ))}\n            </ExpandoCombobox>\n          );\n        case \"starts\": {\n          return (\n            <ExpandoCombobox\n              inputProps={inputProps}\n              className={className}\n              data-field=\"value\"\n              onChange={handleInputChange}\n              onSelectionChange={handleSingleValueSelectionChange}\n              ref={forwardedRef}\n              value={value}\n            >\n              {typeaheadValues.map((state) => (\n                <Option value={state} key={state} disabled />\n              ))}\n            </ExpandoCombobox>\n          );\n        }\n\n        case \"ends\":\n          return (\n            <ExpandoInput\n              inputProps={inputProps}\n              className={className}\n              data-field=\"value\"\n              value={valueInputValue}\n              ref={forwardedRef}\n              onChange={handleInputChange}\n            />\n          );\n\n        default: {\n          return typeaheadValues.length > 0 ? (\n            <ExpandoCombobox\n              inputProps={inputProps}\n              className={className}\n              data-field=\"value\"\n              title=\"value\"\n              onChange={handleInputChange}\n              onSelectionChange={handleSingleValueSelectionChange}\n              ref={forwardedRef}\n              value={value}\n            >\n              {typeaheadValues.map((state) => (\n                <Option value={state} key={state} />\n              ))}\n            </ExpandoCombobox>\n          ) : null;\n        }\n      }\n    }, [\n      typeaheadValues,\n      operator,\n      inputProps,\n      className,\n      valueInputValue,\n      forwardedRef,\n      handleInputChange,\n      handleInputCommit,\n      handleMultiValueSelectionChange,\n      value,\n      handleSingleValueSelectionChange,\n    ]);\n\n    return getValueInputField();\n  },\n);\n"],"names":["value"],"mappings":"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"}

package/package.json

@@ -1,22 +1,22 @@
 {
-  "version": "0.8.94",
+  "version": "0.8.95",
   "author": "heswell",
   "license": "Apache-2.0",
   "type": "module",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.8.94",
-    "@vuu-ui/vuu-protocol-types": "0.8.94",
-    "@vuu-ui/vuu-table-types": "0.8.94",
-    "@vuu-ui/vuu-filter-types": "0.8.94",
+    "@vuu-ui/vuu-data-types": "0.8.95",
+    "@vuu-ui/vuu-protocol-types": "0.8.95",
+    "@vuu-ui/vuu-table-types": "0.8.95",
+    "@vuu-ui/vuu-filter-types": "0.8.95",
     "@types/uuid": "^9.0.2"
   },
   "dependencies": {
-    "@vuu-ui/vuu-data-react": "0.8.94",
-    "@vuu-ui/vuu-filter-parser": "0.8.94",
-    "@vuu-ui/vuu-popups": "0.8.94",
-    "@vuu-ui/vuu-ui-controls": "0.8.94",
-    "@vuu-ui/vuu-table": "0.8.94",
-    "@vuu-ui/vuu-utils": "0.8.94",
+    "@vuu-ui/vuu-data-react": "0.8.95",
+    "@vuu-ui/vuu-filter-parser": "0.8.95",
+    "@vuu-ui/vuu-popups": "0.8.95",
+    "@vuu-ui/vuu-ui-controls": "0.8.95",
+    "@vuu-ui/vuu-table": "0.8.95",
+    "@vuu-ui/vuu-utils": "0.8.95",
     "@salt-ds/core": "1.34.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",