@vuu-ui/vuu-filters 2.1.19-beta.2 → 2.1.19-beta.3

package/cjs/filter-clause/useFilterClause.js

@@ -0,0 +1,172 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+var filterClauseFocusManagement = require('./filterClauseFocusManagement.js');
+
+const useFilterClause = ({
+  filterClauseModel,
+  onCancel,
+  columnsByName,
+  onFocusSave,
+  onOpenChange,
+  dropdownOnAutofocus = true
+}) => {
+  const [filterClause, setFilterClause] = react.useState(
+    filterClauseModel.isValid ? filterClauseModel.asFilter() : {}
+  );
+  react.useMemo(() => {
+    filterClauseModel.on("filterClause", (filterClause2) => {
+      setFilterClause(filterClause2);
+    });
+  }, [filterClauseModel]);
+  const columnRef = react.useRef(null);
+  const operatorRef = react.useRef(null);
+  const valueRef = react.useRef(null);
+  const filterTouched = react.useRef(false);
+  const setValueRef = react.useCallback(
+    (el) => {
+      valueRef.current = el;
+      if (!filterClauseModel.isValid) {
+        el?.querySelector("input")?.focus();
+      }
+    },
+    [filterClauseModel.isValid]
+  );
+  const removeAndNavigateToNextInputIfAtBoundary = react.useCallback(
+    (evt) => {
+      const input = evt.target;
+      if (input.value === "") {
+        const field = input.closest("[data-field]");
+        switch (field?.dataset?.field) {
+          case "operator": {
+            filterClauseModel.column = void 0;
+            filterClauseFocusManagement.focusNextFocusableElement("bwd");
+            break;
+          }
+          case "value": {
+            filterClauseModel.setOp(void 0);
+            filterClauseFocusManagement.focusNextFocusableElement("bwd");
+            break;
+          }
+          case "column": {
+            if (filterClauseFocusManagement.clauseIsNotFirst(input)) {
+              evt.preventDefault();
+              onCancel?.(filterClauseModel, "Backspace");
+            }
+          }
+        }
+      }
+    },
+    [filterClauseModel, onCancel]
+  );
+  const onSelectColumn = (evt, selectedColumn) => {
+    if (selectedColumn) {
+      if (evt?.type === "keydown") {
+        const { key } = evt;
+        if (key === "Tab") {
+          if (filterClauseModel.column === selectedColumn) {
+            return;
+          } else {
+            evt.preventDefault();
+          }
+        }
+      }
+      filterClauseModel.column = selectedColumn;
+      setTimeout(() => {
+        filterClauseFocusManagement.focusNextElement();
+      }, 100);
+    } else {
+      filterClauseModel.column = void 0;
+    }
+  };
+  const onSelectOperator = react.useCallback(
+    (_, selectedOp) => {
+      filterClauseModel.setOp(selectedOp);
+      if (selectedOp) {
+        filterClauseFocusManagement.focusNextElement();
+      }
+    },
+    [filterClauseModel]
+  );
+  const handleChangeValue = react.useCallback(
+    (value, isFinal) => filterClauseModel.setValue(value, isFinal),
+    [filterClauseModel]
+  );
+  const handleDeselectValue = react.useCallback(
+    () => filterClauseModel.setValue(void 0),
+    [filterClauseModel]
+  );
+  const handleKeyDownCaptureNavigation = react.useCallback(
+    (evt) => {
+      if (["ArrowLeft", "ArrowRight"].includes(evt.key)) {
+        filterClauseFocusManagement.navigateToNextItemIfAtBoundary(evt);
+      } else if (evt.key === "Backspace") {
+        removeAndNavigateToNextInputIfAtBoundary(evt);
+      } else if (evt.key === "Escape") {
+        if (!vuuUtils.hasOpenOptionList(evt.target)) {
+          onCancel?.(filterClauseModel, "Escape");
+        }
+      } else if (evt.key === "Tab" && evt.shiftKey) {
+        evt.preventDefault();
+        filterClauseFocusManagement.tabToPreviousFilterCombinator(evt.target);
+      } else if (evt.key === "Tab") {
+        if (filterClauseModel.isValid) {
+          evt.preventDefault();
+          evt.stopPropagation();
+          onFocusSave?.();
+        }
+      }
+    },
+    [
+      filterClauseModel,
+      onCancel,
+      onFocusSave,
+      removeAndNavigateToNextInputIfAtBoundary
+    ]
+  );
+  const handleOpenChange = react.useCallback(
+    (open, closeReason) => {
+      const isMultiSelect = filterClauseModel.op === "in";
+      const filterHasNoValue = !filterClauseModel.isValid && filterClauseModel.op !== void 0 && filterClauseModel.column !== void 0;
+      if (!open && isMultiSelect && (filterClauseModel.isValid || filterHasNoValue)) {
+        filterClauseModel.commit();
+      }
+      onOpenChange?.(open, closeReason);
+    },
+    [filterClauseModel, onOpenChange]
+  );
+  const inputProps = react.useMemo(
+    () => ({
+      onKeyDownCapture: handleKeyDownCaptureNavigation,
+      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) {
+      requestAnimationFrame(() => {
+        inputRef.current?.querySelector("input")?.focus();
+      });
+    }
+  }, [filterClauseModel]);
+  return {
+    inputProps,
+    columnRef,
+    filterClause,
+    onChangeValue: handleChangeValue,
+    onDeselectValue: handleDeselectValue,
+    onSelectColumn,
+    onSelectOperator,
+    onOpenChange: handleOpenChange,
+    operatorRef,
+    selectedColumn: columnsByName[filterClauseModel.column ?? ""],
+    valueRef: setValueRef,
+    showDropdownOnAutoFocus: dropdownOnAutofocus || filterTouched.current
+  };
+};
+
+exports.useFilterClause = useFilterClause;
+//# sourceMappingURL=useFilterClause.js.map

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

@@ -0,0 +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\";\n\nexport type FilterClauseEditorHookProps = Pick<\n  FilterClauseProps,\n  \"columnsByName\" | \"filterClauseModel\" | \"onCancel\" | \"onFocusSave\"\n> & {\n  onOpenChange?: (open: boolean, reason?: \"focus\" | \"input\" | \"manual\") => void;\n  dropdownOnAutofocus?: boolean;\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  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      filterClauseModel.column = selectedColumn;\n\n      setTimeout(() => {\n        focusNextElement();\n      }, 100);\n    } else {\n      filterClauseModel.column = undefined;\n    }\n  };\n\n  const onSelectOperator = useCallback(\n    (_: SyntheticEvent, selectedOp: FilterClauseOp) => {\n      filterClauseModel.setOp(selectedOp);\n      if (selectedOp) {\n        focusNextElement();\n      }\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(\n    (open: boolean, closeReason?: \"focus\" | \"input\" | \"manual\") => {\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

@@ -0,0 +1,93 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('clsx');
+var FilterClauseValueEditorNumber = require('./FilterClauseValueEditorNumber.js');
+var FilterClauseValueEditorText = require('./FilterClauseValueEditorText.js');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+var FilterClauseValueEditorDate = require('./FilterClauseValueEditorDate.js');
+var FilterClauseValueEditorTime = require('./FilterClauseValueEditorTime.js');
+
+const classBase = "vuuFilterClause";
+const FilterClauseValueEditor = react.forwardRef(
+  function FilterClauseValueEditor2({
+    selectedColumn,
+    operator,
+    inputProps,
+    onChangeValue,
+    onDeselectValue,
+    onOpenChange,
+    table,
+    value,
+    dropdownOnAutofocus = true
+  }, forwardedRef) {
+    if (selectedColumn === void 0 || operator === void 0) {
+      return null;
+    }
+    if (vuuUtils.isDateTimeDataValue(selectedColumn)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        FilterClauseValueEditorDate.FilterClauseValueEditorDate,
+        {
+          inputProps,
+          className: cx(`${classBase}Field`, `${classBase}Value`),
+          value,
+          operator,
+          onChangeValue
+        }
+      );
+    } else if (vuuUtils.isTimeDataValue(selectedColumn)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        FilterClauseValueEditorTime.FilterClauseValueEditorTime,
+        {
+          inputProps,
+          className: cx(`${classBase}Field`, `${classBase}Value`),
+          value,
+          operator,
+          onChangeValue
+        }
+      );
+    }
+    switch (selectedColumn.serverDataType) {
+      case "string":
+      case "char":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          FilterClauseValueEditorText.FilterClauseValueEditorText,
+          {
+            inputProps,
+            className: cx(`${classBase}Field`, `${classBase}Value`),
+            column: selectedColumn,
+            dropdownOnAutofocus,
+            onDeselect: onDeselectValue,
+            onChangeValue,
+            onOpenChange,
+            operator,
+            ref: forwardedRef,
+            table,
+            value: value === void 0 ? "" : Array.isArray(value) ? value.map((val) => val.toString()) : value.toString()
+          }
+        );
+      case "int":
+      case "long":
+      case "double":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          FilterClauseValueEditorNumber.FilterClauseValueEditorNumber,
+          {
+            inputProps,
+            className: cx(`${classBase}Field`, `${classBase}Value`),
+            column: selectedColumn,
+            "data-field": "value",
+            onChangeValue,
+            operator,
+            ref: forwardedRef
+          }
+        );
+      default:
+        console.log("returning null");
+        return null;
+    }
+  }
+);
+
+exports.FilterClauseValueEditor = FilterClauseValueEditor;
+//# sourceMappingURL=FilterClauseValueEditor.js.map

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

@@ -0,0 +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  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            dropdownOnAutofocus={dropdownOnAutofocus}\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;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,mBAAA;AAAA,YACA,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;;;;"}

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

@@ -0,0 +1,64 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var date = require('@internationalized/date');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+
+const FilterClauseValueEditorDate = (props) => {
+  const { inputProps, className, onChangeValue, operator, value } = props;
+  const toEpochMilliS = getEpochMillisConverter(operator);
+  const [date, setDate] = react.useState(
+    () => getInitialState(value)
+  );
+  const handleCommit = react.useCallback(
+    (e, selectedDateInputValue) => {
+      console.log("change date");
+      if (selectedDateInputValue) {
+        const dateValue = vuuUtils.toCalendarDate(new Date(selectedDateInputValue));
+        setDate(dateValue);
+        if (selectedDateInputValue) {
+          onChangeValue(toEpochMilliS(dateValue));
+        }
+      }
+    },
+    [onChangeValue, toEpochMilliS]
+  );
+  const onBlur = react.useCallback(() => {
+    date && onChangeValue(toEpochMilliS(date));
+  }, [date, onChangeValue, toEpochMilliS]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vuuUiControls.VuuDatePicker,
+    {
+      "data-field": "value",
+      inputProps,
+      className,
+      onBlur,
+      onCommit: handleCommit,
+      selectedDate: date
+    }
+  );
+};
+function getInitialState(value) {
+  return value ? vuuUtils.toCalendarDate(new Date(value)) : void 0;
+}
+const getEpochMillisConverter = (op) => (date$1, timezone = date.getLocalTimeZone()) => {
+  const d = date$1.toDate(timezone);
+  switch (op) {
+    case ">":
+    case "<=":
+      d.setHours(23, 59, 59, 999);
+      return d.getTime();
+    case ">=":
+    case "<":
+    case "=":
+    // converted to "< `start of next day` and >= `start of this day`" when query is created
+    case "!=":
+      d.setHours(0, 0, 0, 0);
+      return d.getTime();
+  }
+};
+
+exports.FilterClauseValueEditorDate = FilterClauseValueEditorDate;
+//# sourceMappingURL=FilterClauseValueEditorDate.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterClauseValueEditorDate.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorDate.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport { getLocalTimeZone, DateValue } from \"@internationalized/date\";\nimport { CommitHandler, toCalendarDate } from \"@vuu-ui/vuu-utils\";\nimport { NumericFilterClauseOp } from \"@vuu-ui/vuu-filter-types\";\nimport { FilterClauseValueEditor } from \"../filterClauseTypes\";\nimport { VuuDatePicker } from \"@vuu-ui/vuu-ui-controls\";\n\ninterface FilterClauseValueEditorDateProps\n  extends Pick<FilterClauseValueEditor, \"onChangeValue\" | \"inputProps\"> {\n  className?: string;\n  value: number | undefined;\n  operator: NumericFilterClauseOp;\n}\n\nexport const FilterClauseValueEditorDate = (\n  props: FilterClauseValueEditorDateProps,\n) => {\n  const { inputProps, className, onChangeValue, operator, value } = props;\n  const toEpochMilliS = getEpochMillisConverter(operator);\n\n  const [date, setDate] = useState<DateValue | undefined>(() =>\n    getInitialState(value),\n  );\n\n  const handleCommit = useCallback<CommitHandler<HTMLElement, number>>(\n    (e, selectedDateInputValue) => {\n      console.log(\"change date\");\n      if (selectedDateInputValue) {\n        const dateValue = toCalendarDate(new Date(selectedDateInputValue));\n        setDate(dateValue);\n        if (selectedDateInputValue /* && source === \"calendar\"*/) {\n          onChangeValue(toEpochMilliS(dateValue));\n        }\n      }\n    },\n    [onChangeValue, toEpochMilliS],\n  );\n\n  const onBlur = useCallback(() => {\n    date && onChangeValue(toEpochMilliS(date));\n  }, [date, onChangeValue, toEpochMilliS]);\n\n  return (\n    <VuuDatePicker\n      data-field=\"value\"\n      inputProps={inputProps}\n      className={className}\n      onBlur={onBlur}\n      onCommit={handleCommit}\n      selectedDate={date}\n    />\n  );\n};\n\nfunction getInitialState(value: FilterClauseValueEditorDateProps[\"value\"]) {\n  return value ? toCalendarDate(new Date(value)) : undefined;\n}\n\nconst getEpochMillisConverter =\n  (op: NumericFilterClauseOp) =>\n  (date: DateValue, timezone: string = getLocalTimeZone()): number => {\n    const d = date.toDate(timezone);\n    switch (op) {\n      case \">\":\n      case \"<=\":\n        d.setHours(23, 59, 59, 999);\n        return d.getTime();\n      case \">=\":\n      case \"<\":\n      case \"=\": // converted to \"< `start of next day` and >= `start of this day`\" when query is created\n      case \"!=\": // converted to \">= `start of next day` or < `start of this day`\" when query is created\n        d.setHours(0, 0, 0, 0);\n        return d.getTime();\n    }\n  };\n"],"names":["useState","useCallback","toCalendarDate","jsx","VuuDatePicker","date","getLocalTimeZone"],"mappings":";;;;;;;;AAca,MAAA,2BAAA,GAA8B,CACzC,KACG,KAAA;AACH,EAAA,MAAM,EAAE,UAAY,EAAA,SAAA,EAAW,aAAe,EAAA,QAAA,EAAU,OAAU,GAAA,KAAA;AAClE,EAAM,MAAA,aAAA,GAAgB,wBAAwB,QAAQ,CAAA;AAEtD,EAAM,MAAA,CAAC,IAAM,EAAA,OAAO,CAAI,GAAAA,cAAA;AAAA,IAAgC,MACtD,gBAAgB,KAAK;AAAA,GACvB;AAEA,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IACnB,CAAC,GAAG,sBAA2B,KAAA;AAC7B,MAAA,OAAA,CAAQ,IAAI,aAAa,CAAA;AACzB,MAAA,IAAI,sBAAwB,EAAA;AAC1B,QAAA,MAAM,SAAY,GAAAC,uBAAA,CAAe,IAAI,IAAA,CAAK,sBAAsB,CAAC,CAAA;AACjE,QAAA,OAAA,CAAQ,SAAS,CAAA;AACjB,QAAA,IAAI,sBAAsD,EAAA;AACxD,UAAc,aAAA,CAAA,aAAA,CAAc,SAAS,CAAC,CAAA;AAAA;AACxC;AACF,KACF;AAAA,IACA,CAAC,eAAe,aAAa;AAAA,GAC/B;AAEA,EAAM,MAAA,MAAA,GAASD,kBAAY,MAAM;AAC/B,IAAQ,IAAA,IAAA,aAAA,CAAc,aAAc,CAAA,IAAI,CAAC,CAAA;AAAA,GACxC,EAAA,CAAC,IAAM,EAAA,aAAA,EAAe,aAAa,CAAC,CAAA;AAEvC,EACE,uBAAAE,cAAA;AAAA,IAACC,2BAAA;AAAA,IAAA;AAAA,MACC,YAAW,EAAA,OAAA;AAAA,MACX,UAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAU,EAAA,YAAA;AAAA,MACV,YAAc,EAAA;AAAA;AAAA,GAChB;AAEJ;AAEA,SAAS,gBAAgB,KAAkD,EAAA;AACzE,EAAA,OAAO,QAAQF,uBAAe,CAAA,IAAI,IAAK,CAAA,KAAK,CAAC,CAAI,GAAA,KAAA,CAAA;AACnD;AAEA,MAAM,0BACJ,CAAC,EAAA,KACD,CAACG,MAAiB,EAAA,QAAA,GAAmBC,uBAA+B,KAAA;AAClE,EAAM,MAAA,CAAA,GAAID,MAAK,CAAA,MAAA,CAAO,QAAQ,CAAA;AAC9B,EAAA,QAAQ,EAAI;AAAA,IACV,KAAK,GAAA;AAAA,IACL,KAAK,IAAA;AACH,MAAA,CAAA,CAAE,QAAS,CAAA,EAAA,EAAI,EAAI,EAAA,EAAA,EAAI,GAAG,CAAA;AAC1B,MAAA,OAAO,EAAE,OAAQ,EAAA;AAAA,IACnB,KAAK,IAAA;AAAA,IACL,KAAK,GAAA;AAAA,IACL,KAAK,GAAA;AAAA;AAAA,IACL,KAAK,IAAA;AACH,MAAA,CAAA,CAAE,QAAS,CAAA,CAAA,EAAG,CAAG,EAAA,CAAA,EAAG,CAAC,CAAA;AACrB,MAAA,OAAO,EAAE,OAAQ,EAAA;AAAA;AAEvB,CAAA;;;;"}

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

@@ -0,0 +1,55 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+const FilterClauseValueEditorNumber = react.forwardRef(
+  function FilterClauseNumericValueEditor({
+    inputProps,
+    className,
+    "data-field": dataField,
+    onChangeValue,
+    value: valueProp
+  }, forwardedRef) {
+    const [value, setValue] = react.useState(
+      vuuUtils.isValidNumber(valueProp) ? valueProp.toString() : ""
+    );
+    const handleChange = react.useCallback((evt) => {
+      const { value: value2 } = evt.target;
+      const numericValue = parseFloat(value2);
+      if (vuuUtils.isValidNumber(numericValue)) {
+        console.log("its valid");
+      }
+      setValue(value2);
+    }, []);
+    const handleKeyDown = react.useCallback(
+      (evt) => {
+        if (evt.key === "Enter" || evt.key === "Tab") {
+          const { value: value2 } = evt.target;
+          const numericValue = parseFloat(value2);
+          if (vuuUtils.isValidNumber(numericValue)) {
+            onChangeValue(numericValue);
+          }
+        }
+      },
+      [onChangeValue]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      vuuUiControls.ExpandoInput,
+      {
+        inputProps,
+        className,
+        "data-field": dataField,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        ref: forwardedRef,
+        value
+      }
+    );
+  }
+);
+
+exports.FilterClauseValueEditorNumber = FilterClauseValueEditorNumber;
+//# sourceMappingURL=FilterClauseValueEditorNumber.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterClauseValueEditorNumber.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorNumber.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  forwardRef,\n  ForwardedRef,\n  HTMLAttributes,\n  RefObject,\n  useState,\n  useCallback,\n  KeyboardEvent,\n} from \"react\";\nimport { ExpandoInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport { FilterClauseValueEditor } from \"../filterClauseTypes\";\n\nexport interface FilterClauseNumericValueEditorProps\n  extends FilterClauseValueEditor,\n    HTMLAttributes<HTMLDivElement> {\n  \"data-field\"?: string;\n  operatorInputRef?: RefObject<HTMLInputElement>;\n  operator: string;\n  value?: number;\n}\n\nexport const FilterClauseValueEditorNumber = forwardRef(\n  function FilterClauseNumericValueEditor(\n    {\n      inputProps,\n      className,\n      \"data-field\": dataField,\n      onChangeValue,\n      value: valueProp,\n    }: FilterClauseNumericValueEditorProps,\n    forwardedRef: ForwardedRef<HTMLDivElement>,\n  ) {\n    const [value, setValue] = useState<string>(\n      isValidNumber(valueProp) ? valueProp.toString() : \"\",\n    );\n\n    // useEffect(() => {\n    //   setValueInputValue(\"\");\n    // }, [column]);\n\n    const handleChange = useCallback((evt: ChangeEvent<HTMLInputElement>) => {\n      const { value } = evt.target as HTMLInputElement;\n\n      const numericValue = parseFloat(value);\n      if (isValidNumber(numericValue)) {\n        console.log(\"its valid\");\n      }\n      setValue(value);\n    }, []);\n\n    const handleKeyDown = useCallback(\n      (evt: KeyboardEvent<HTMLInputElement>) => {\n        if (evt.key === \"Enter\" || evt.key === \"Tab\") {\n          const { value } = evt.target as HTMLInputElement;\n          const numericValue = parseFloat(value);\n          if (isValidNumber(numericValue)) {\n            onChangeValue(numericValue);\n          }\n        }\n      },\n      [onChangeValue],\n    );\n\n    return (\n      <ExpandoInput\n        inputProps={inputProps}\n        className={className}\n        data-field={dataField}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        ref={forwardedRef}\n        value={value}\n      />\n    );\n  },\n);\n"],"names":["forwardRef","useState","isValidNumber","useCallback","value","jsx","ExpandoInput"],"mappings":";;;;;;;AAuBO,MAAM,6BAAgC,GAAAA,gBAAA;AAAA,EAC3C,SAAS,8BACP,CAAA;AAAA,IACE,UAAA;AAAA,IACA,SAAA;AAAA,IACA,YAAc,EAAA,SAAA;AAAA,IACd,aAAA;AAAA,IACA,KAAO,EAAA;AAAA,KAET,YACA,EAAA;AACA,IAAM,MAAA,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAAC,cAAA;AAAA,MACxBC,sBAAc,CAAA,SAAS,CAAI,GAAA,SAAA,CAAU,UAAa,GAAA;AAAA,KACpD;AAMA,IAAM,MAAA,YAAA,GAAeC,iBAAY,CAAA,CAAC,GAAuC,KAAA;AACvE,MAAA,MAAM,EAAE,KAAA,EAAAC,MAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AAEtB,MAAM,MAAA,YAAA,GAAe,WAAWA,MAAK,CAAA;AACrC,MAAI,IAAAF,sBAAA,CAAc,YAAY,CAAG,EAAA;AAC/B,QAAA,OAAA,CAAQ,IAAI,WAAW,CAAA;AAAA;AAEzB,MAAA,QAAA,CAASE,MAAK,CAAA;AAAA,KAChB,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,aAAgB,GAAAD,iBAAA;AAAA,MACpB,CAAC,GAAyC,KAAA;AACxC,QAAA,IAAI,GAAI,CAAA,GAAA,KAAQ,OAAW,IAAA,GAAA,CAAI,QAAQ,KAAO,EAAA;AAC5C,UAAA,MAAM,EAAE,KAAA,EAAAC,MAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,UAAM,MAAA,YAAA,GAAe,WAAWA,MAAK,CAAA;AACrC,UAAI,IAAAF,sBAAA,CAAc,YAAY,CAAG,EAAA;AAC/B,YAAA,aAAA,CAAc,YAAY,CAAA;AAAA;AAC5B;AACF,OACF;AAAA,MACA,CAAC,aAAa;AAAA,KAChB;AAEA,IACE,uBAAAG,cAAA;AAAA,MAACC,0BAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,SAAA;AAAA,QACA,YAAY,EAAA,SAAA;AAAA,QACZ,QAAU,EAAA,YAAA;AAAA,QACV,SAAW,EAAA,aAAA;AAAA,QACX,GAAK,EAAA,YAAA;AAAA,QACL;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}

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

@@ -0,0 +1,222 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuDataReact = require('@vuu-ui/vuu-data-react');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var core = require('@salt-ds/core');
+var react = require('react');
+var ExpandoCombobox = require('../ExpandoCombobox.js');
+
+const FilterClauseValueEditorText = react.forwardRef(
+  function FilterClauseTextValueEditor({
+    inputProps: inputPropsProp,
+    className,
+    column,
+    onChangeValue,
+    onOpenChange,
+    operator,
+    table,
+    value,
+    dropdownOnAutofocus = true
+  }, forwardedRef) {
+    const isMultiValue = operator === "in";
+    const expandoRef = react.useRef(null);
+    const combinedRef = core.useForkRef(forwardedRef, expandoRef);
+    const [valueInputValue, setValueInputValue] = react.useState(
+      value?.toString() ?? ""
+    );
+    const [typeaheadValues, setTypeaheadValues] = react.useState(
+      []
+    );
+    const getSuggestions = vuuDataReact.useTypeaheadSuggestions();
+    const handleSingleValueSelectionChange = react.useCallback(
+      (_, [value2]) => onChangeValue(value2),
+      [onChangeValue]
+    );
+    const handleMultiValueSelectionChange = react.useCallback(
+      // TODO when will this ever be final ?
+      (_, values) => onChangeValue(values, false),
+      [onChangeValue]
+    );
+    const highlightFirstOption = react.useCallback(() => {
+      if (expandoRef.current) {
+        const input = expandoRef.current?.querySelector(
+          'input[role="combobox"]'
+        );
+        if (input) {
+          requestAnimationFrame(() => {
+            vuuUtils.dispatchKeyboardEvent(input, "keydown", "ArrowDown");
+          });
+        }
+      }
+    }, []);
+    const handleOpenChange = react.useCallback(
+      (open, reason) => {
+        if (open && reason === "focus" && expandoRef.current) {
+          highlightFirstOption();
+        }
+      },
+      [highlightFirstOption]
+    );
+    react.useEffect(() => {
+      if (table) {
+        const vuuTable = vuuUtils.getVuuTable(table);
+        const params = valueInputValue && !isMultiValue ? [vuuTable, column.name, valueInputValue] : [vuuTable, column.name];
+        getSuggestions(params).then((suggestions) => {
+          if (suggestions === false) {
+            setTypeaheadValues(false);
+          } else if (suggestions.length === 0 && valueInputValue) {
+            setTypeaheadValues(vuuUtils.NO_DATA_MATCH);
+          } else {
+            setTypeaheadValues(suggestions);
+          }
+        }).catch((err) => {
+          console.error("Error getting suggestions", err);
+        });
+      }
+    }, [table, column, valueInputValue, getSuggestions, isMultiValue]);
+    const handleInputChange = react.useCallback(
+      (evt) => {
+        const { value: value2 } = evt.target;
+        setValueInputValue(value2);
+        if (operator === "starts" || operator === "ends" || operator === "contains") {
+          onChangeValue(value2, false);
+        }
+      },
+      [onChangeValue, operator]
+    );
+    const handleInputCommit = react.useCallback(
+      (_, value2 = "") => {
+        if (typeof value2 === "string") {
+          onChangeValue(value2);
+        }
+      },
+      [onChangeValue]
+    );
+    const handleKeyDownFreeTextInput = react.useCallback(
+      (evt) => {
+        if ((evt.key === "Enter" || evt.key === "Tab") && valueInputValue !== "") {
+          evt.stopPropagation();
+          evt.preventDefault();
+          onChangeValue(valueInputValue);
+        } else {
+          inputPropsProp?.onKeyDown?.(evt);
+        }
+      },
+      [inputPropsProp, onChangeValue, valueInputValue]
+    );
+    const inputProps = react.useMemo(() => {
+      if (operator === "starts" || operator === "ends") {
+        return {
+          ...inputPropsProp,
+          onKeyDown: handleKeyDownFreeTextInput
+        };
+      } else {
+        return inputPropsProp;
+      }
+    }, [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(
+            ExpandoCombobox.ExpandoCombobox,
+            {
+              inputProps,
+              className,
+              "data-field": "value",
+              onChange: handleInputChange,
+              onOpenChange,
+              onSelectionChange: handleMultiValueSelectionChange,
+              ref: forwardedRef,
+              multiselect: true,
+              truncate: true,
+              value,
+              dropdownOnAutofocus,
+              children: typeaheadValues.map((state) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: state }, state))
+            }
+          );
+        case "starts": {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            ExpandoCombobox.ExpandoCombobox,
+            {
+              inputProps,
+              className,
+              "data-field": "value",
+              dropdownOnAutofocus,
+              onChange: handleInputChange,
+              onSelectionChange: handleSingleValueSelectionChange,
+              ref: forwardedRef,
+              value,
+              children: typeaheadValues.map((state) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: state, disabled: true }, state))
+            }
+          );
+        }
+        case "ends":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            vuuUiControls.ExpandoInput,
+            {
+              inputProps,
+              className,
+              "data-field": "value",
+              value: valueInputValue,
+              ref: forwardedRef,
+              onChange: handleInputChange
+            }
+          );
+        default: {
+          return typeaheadValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            ExpandoCombobox.ExpandoCombobox,
+            {
+              className,
+              "data-field": "value",
+              dropdownOnAutofocus,
+              inputProps,
+              onChange: handleInputChange,
+              onOpenChange: handleOpenChange,
+              onSelectionChange: handleSingleValueSelectionChange,
+              ref: combinedRef,
+              title: "value",
+              value,
+              children: typeaheadValues.map((state) => /* @__PURE__ */ jsxRuntime.jsx(core.Option, { value: state }, state))
+            }
+          ) : null;
+        }
+      }
+    }, [
+      typeaheadValues,
+      operator,
+      inputProps,
+      className,
+      valueInputValue,
+      forwardedRef,
+      handleInputChange,
+      handleInputCommit,
+      onOpenChange,
+      handleMultiValueSelectionChange,
+      value,
+      dropdownOnAutofocus,
+      handleSingleValueSelectionChange,
+      handleOpenChange,
+      combinedRef
+    ]);
+    return getValueInputField();
+  }
+);
+
+exports.FilterClauseValueEditorText = FilterClauseValueEditorText;
+//# sourceMappingURL=FilterClauseValueEditorText.js.map