@vuu-ui/vuu-filters 0.0.26

package/cjs/filter-clause/useFilterClause.js

@@ -0,0 +1,142 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+var filterClauseFocusManagement = require('./filterClauseFocusManagement.js');
+
+const useFilterClause = ({
+  filterClauseModel,
+  onCancel,
+  columnsByName
+}) => {
+  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 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 handleColumnSelect = react.useCallback(
+    (evt, column) => {
+      if (evt?.type === "keydown") {
+        const { key } = evt;
+        if (key === "Tab") {
+          if (filterClauseModel.column === column.name) {
+            return;
+          } else {
+            evt.preventDefault();
+          }
+        }
+      }
+      filterClauseModel.column = column?.name ?? void 0;
+      setTimeout(() => {
+        filterClauseFocusManagement.focusNextElement();
+      }, 100);
+    },
+    [filterClauseModel]
+  );
+  const handleOperatorSelect = react.useCallback(
+    (_, selected) => {
+      const op = selected;
+      if (op === void 0 || vuuUtils.isValidFilterClauseOp(op)) {
+        filterClauseModel.setOp(op);
+        filterClauseFocusManagement.focusNextElement();
+      } else {
+        throw Error(
+          `FilterClauseEditor, invalid value ${op} for filter clause`
+        );
+      }
+    },
+    [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") {
+        onCancel?.(filterClauseModel, "Escape");
+      } else if (evt.key === "Tab" && evt.shiftKey) {
+        evt.preventDefault();
+        filterClauseFocusManagement.tabToPreviousFilterCombinator(evt.target);
+      }
+    },
+    [filterClauseModel, onCancel, removeAndNavigateToNextInputIfAtBoundary]
+  );
+  const handleFocus = react.useCallback((evt) => {
+    if (filterClauseFocusManagement.elementIsFilterClause(evt.target)) {
+      filterClauseFocusManagement.focusField(evt.target);
+    }
+  }, []);
+  const InputProps = react.useMemo(
+    () => ({
+      inputProps: {
+        onKeyDownCapture: handleKeyDownCaptureNavigation,
+        tabIndex: -1
+      }
+    }),
+    [handleKeyDownCaptureNavigation]
+  );
+  react.useEffect(() => {
+    if (filterClauseModel.column === void 0) {
+      requestAnimationFrame(() => {
+        const columnInput = columnRef?.current?.querySelector("input");
+        columnInput?.focus();
+      });
+    }
+  }, [filterClauseModel]);
+  return {
+    InputProps,
+    columnRef,
+    filterClause,
+    onChangeValue: handleChangeValue,
+    onDeselectValue: handleDeselectValue,
+    onColumnSelect: handleColumnSelect,
+    onFocus: handleFocus,
+    onOperatorSelect: handleOperatorSelect,
+    operatorRef,
+    selectedColumn: columnsByName[filterClause.column ?? ""]
+  };
+};
+
+exports.useFilterClause = useFilterClause;
+//# sourceMappingURL=useFilterClause.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useFilterClause.js","sources":["../../src/filter-clause/useFilterClause.ts"],"sourcesContent":["import { FilterClause } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { isValidFilterClauseOp } from \"@vuu-ui/vuu-utils\";\nimport { SingleSelectionHandler } from \"@vuu-ui/vuu-ui-controls\";\nimport {\n  FocusEventHandler,\n  KeyboardEvent,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  clauseIsNotFirst,\n  focusNextElement,\n  focusNextFocusableElement,\n  elementIsFilterClause,\n  navigateToNextItemIfAtBoundary,\n  focusField,\n  tabToPreviousFilterCombinator,\n} from \"./filterClauseFocusManagement\";\nimport { FilterClauseProps } from \"./FilterClause\";\nexport type FilterClauseEditorHookProps = Pick<\n  FilterClauseProps,\n  \"columnsByName\" | \"filterClauseModel\" | \"onCancel\"\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}: 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\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 handleColumnSelect = useCallback<\n    SingleSelectionHandler<ColumnDescriptor>\n  >(\n    (evt, column) => {\n      if (evt?.type === \"keydown\") {\n        const { key } = evt as KeyboardEvent;\n        if (key === \"Tab\") {\n          if (filterClauseModel.column === column.name) {\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 = column?.name ?? undefined;\n      setTimeout(() => {\n        focusNextElement();\n      }, 100);\n    },\n    [filterClauseModel]\n  );\n\n  const handleOperatorSelect = useCallback<SingleSelectionHandler>(\n    (_, selected) => {\n      const op = selected;\n      if (op === undefined || isValidFilterClauseOp(op)) {\n        filterClauseModel.setOp(op);\n        focusNextElement();\n      } else {\n        throw Error(\n          `FilterClauseEditor, invalid value ${op} for filter clause`\n        );\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        onCancel?.(filterClauseModel, \"Escape\");\n      } else if (evt.key === \"Tab\" && evt.shiftKey) {\n        evt.preventDefault();\n        tabToPreviousFilterCombinator(evt.target as HTMLElement);\n      }\n    },\n    [filterClauseModel, onCancel, removeAndNavigateToNextInputIfAtBoundary]\n  );\n\n  const handleFocus = useCallback<FocusEventHandler>((evt) => {\n    if (elementIsFilterClause(evt.target)) {\n      focusField(evt.target);\n    }\n  }, []);\n\n  const InputProps = useMemo(\n    () => ({\n      inputProps: {\n        onKeyDownCapture: handleKeyDownCaptureNavigation,\n        tabIndex: -1,\n      },\n    }),\n    [handleKeyDownCaptureNavigation]\n  );\n\n  // Do we need this or can we leave it to the filterEditor\n  useEffect(() => {\n    if (filterClauseModel.column === undefined) {\n      requestAnimationFrame(() => {\n        const columnInput = columnRef?.current?.querySelector(\"input\");\n        columnInput?.focus();\n      });\n    }\n  }, [filterClauseModel]);\n\n  return {\n    InputProps,\n    columnRef,\n    filterClause,\n    onChangeValue: handleChangeValue,\n    onDeselectValue: handleDeselectValue,\n    onColumnSelect: handleColumnSelect,\n    onFocus: handleFocus,\n    onOperatorSelect: handleOperatorSelect,\n    operatorRef,\n    selectedColumn: columnsByName[filterClause.column ?? \"\"],\n  };\n};\n"],"names":["useState","useMemo","filterClause","useRef","useCallback","focusNextFocusableElement","clauseIsNotFirst","focusNextElement","isValidFilterClauseOp","navigateToNextItemIfAtBoundary","tabToPreviousFilterCombinator","elementIsFilterClause","focusField","useEffect"],"mappings":"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"}

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

@@ -0,0 +1,77 @@
+'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 FilterClauseValueEditorDate = require('./FilterClauseValueEditorDate.js');
+
+const classBase = "vuuFilterClause";
+const FilterClauseValueEditor = ({
+  selectedColumn,
+  operator,
+  InputProps,
+  onChangeValue,
+  onDeselectValue,
+  suggestionProvider,
+  table,
+  value
+}) => {
+  if (selectedColumn === void 0 || operator === void 0) {
+    return null;
+  }
+  if (vuuUtils.isDateTimeColumn(selectedColumn)) {
+    console.log(`return DateInput`);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FilterClauseValueEditorDate.FilterClauseValueEditorDate,
+      {
+        InputProps,
+        className: cx(`${classBase}Field`, `${classBase}Value`),
+        "data-field": "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,
+          "data-field": "value",
+          onDeselect: onDeselectValue,
+          onChangeValue,
+          operator,
+          suggestionProvider,
+          table,
+          value
+        }
+      );
+    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
+        }
+      );
+    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":["../../../src/filter-clause/value-editors/FilterClauseValueEditor.tsx"],"sourcesContent":["import { TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport cx from \"clsx\";\nimport { FilterClauseValueEditorNumber } from \"./FilterClauseValueEditorNumber\";\nimport { FilterClauseValueEditorText } from \"./FilterClauseValueEditorText\";\nimport { useFilterClause } from \"../useFilterClause\";\n\nimport {\n  NumericFilterClauseOp,\n  SingleValueFilterClauseOp,\n} from \"@vuu-ui/vuu-filter-types\";\nimport { isDateTimeColumn } from \"@vuu-ui/vuu-utils\";\nimport { FilterClauseValueEditorDate } from \"./FilterClauseValueEditorDate\";\nimport { FilterClauseProps } from \"../FilterClause\";\n\nconst classBase = \"vuuFilterClause\";\n\ntype FilterClauseValueEditorProps = Pick<\n  ReturnType<typeof useFilterClause>,\n  \"selectedColumn\" | \"InputProps\" | \"onChangeValue\" | \"onDeselectValue\"\n> &\n  Pick<FilterClauseProps, \"suggestionProvider\"> & {\n    table?: TableSchema[\"table\"];\n  } & {\n    operator?: SingleValueFilterClauseOp | \"in\";\n    value?: string | string[] | number | number[] | boolean | boolean[];\n  };\n\nexport const FilterClauseValueEditor: React.FC<\n  FilterClauseValueEditorProps\n> = ({\n  selectedColumn,\n  operator,\n\n  InputProps,\n  onChangeValue,\n  onDeselectValue,\n  suggestionProvider,\n  table,\n  value,\n}) => {\n  if (selectedColumn === undefined || operator === undefined) {\n    return null;\n  }\n\n  if (isDateTimeColumn(selectedColumn)) {\n    console.log(`return DateInput`);\n    return (\n      <FilterClauseValueEditorDate\n        InputProps={InputProps}\n        className={cx(`${classBase}Field`, `${classBase}Value`)}\n        data-field=\"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          data-field=\"value\"\n          onDeselect={onDeselectValue}\n          onChangeValue={onChangeValue}\n          operator={operator}\n          suggestionProvider={suggestionProvider}\n          table={table}\n          value={value as string | string[]}\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        />\n      );\n    default:\n      console.log(\"returning null\");\n      return null;\n  }\n};\n"],"names":["isDateTimeColumn","jsx","FilterClauseValueEditorDate","FilterClauseValueEditorText","FilterClauseValueEditorNumber"],"mappings":";;;;;;;;;AAcA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAaX,MAAM,0BAET,CAAC;AAAA,EACH,cAAA;AAAA,EACA,QAAA;AAAA,EAEA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,eAAA;AAAA,EACA,kBAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AACF,CAAM,KAAA;AACJ,EAAI,IAAA,cAAA,KAAmB,KAAa,CAAA,IAAA,QAAA,KAAa,KAAW,CAAA,EAAA;AAC1D,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAI,IAAAA,yBAAA,CAAiB,cAAc,CAAG,EAAA;AACpC,IAAA,OAAA,CAAQ,IAAI,CAAkB,gBAAA,CAAA,CAAA,CAAA;AAC9B,IACE,uBAAAC,cAAA;AAAA,MAACC,uDAAA;AAAA,MAAA;AAAA,QACC,UAAA;AAAA,QACA,WAAW,EAAG,CAAA,CAAA,EAAG,SAAS,CAAS,KAAA,CAAA,EAAA,CAAA,EAAG,SAAS,CAAO,KAAA,CAAA,CAAA;AAAA,QACtD,YAAW,EAAA,OAAA;AAAA,QACX,KAAA;AAAA,QACA,QAAA;AAAA,QACA,aAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AAEA,EAAA,QAAQ,eAAe,cAAgB;AAAA,IACrC,KAAK,QAAA,CAAA;AAAA,IACL,KAAK,MAAA;AACH,MACE,uBAAAD,cAAA;AAAA,QAACE,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,MAAQ,EAAA,cAAA;AAAA,UACR,YAAW,EAAA,OAAA;AAAA,UACX,UAAY,EAAA,eAAA;AAAA,UACZ,aAAA;AAAA,UACA,QAAA;AAAA,UACA,kBAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,IAEJ,KAAK,KAAA,CAAA;AAAA,IACL,KAAK,MAAA,CAAA;AAAA,IACL,KAAK,QAAA;AACH,MACE,uBAAAF,cAAA;AAAA,QAACG,2DAAA;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,MAAQ,EAAA,cAAA;AAAA,UACR,YAAW,EAAA,OAAA;AAAA,UACX,aAAA;AAAA,UACA,QAAA;AAAA,SAAA;AAAA,OACF,CAAA;AAAA,IAEJ;AACE,MAAA,OAAA,CAAQ,IAAI,gBAAgB,CAAA,CAAA;AAC5B,MAAO,OAAA,IAAA,CAAA;AAAA,GACX;AACF;;;;"}

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

@@ -0,0 +1,75 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var cx = require('clsx');
+var date = require('@internationalized/date');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+
+const FilterClauseValueEditorDate = (props) => {
+  const { InputProps, className, onChangeValue, operator, value } = props;
+  const toEpochMilliS = getEpochMillisConverter(operator);
+  const [date, setDate] = react.useState(
+    () => getInitialState(value)
+  );
+  const onSelectedDateChange = react.useCallback(
+    (d, source) => {
+      setDate(d);
+      if (d && source === "calendar") {
+        onChangeValue(toEpochMilliS(d));
+      }
+    },
+    [onChangeValue, toEpochMilliS]
+  );
+  const onBlur = react.useCallback(() => {
+    date && onChangeValue(toEpochMilliS(date));
+  }, [date, onChangeValue, toEpochMilliS]);
+  const handleKeyDown = react.useCallback(
+    (evt) => {
+      if (evt.key === "Enter") {
+        if (date) {
+          const popup = vuuUtils.queryClosest(evt.target, ".vuuDatePopup");
+          if (popup === null) {
+            onChangeValue(toEpochMilliS(date));
+          }
+        }
+      } else if (evt.key === "Tab") {
+        console.log("better handle tab");
+      }
+    },
+    [date, onChangeValue, toEpochMilliS]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    vuuUiControls.DateInput,
+    {
+      inputProps: InputProps?.inputProps,
+      className: cx("vuuFilterClause-DatePicker", className),
+      selectedDate: date,
+      onBlur,
+      onChange: onSelectedDateChange,
+      onKeyDown: handleKeyDown
+    }
+  );
+};
+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 "=":
+    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":["../../../src/filter-clause/value-editors/FilterClauseValueEditorDate.tsx"],"sourcesContent":["import React, { KeyboardEventHandler, useCallback, useState } from \"react\";\nimport cx from \"clsx\";\nimport { getLocalTimeZone, DateValue } from \"@internationalized/date\";\nimport { DateInput, DateInputProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { queryClosest, toCalendarDate } from \"@vuu-ui/vuu-utils\";\nimport { NumericFilterClauseOp } from \"@vuu-ui/vuu-filter-types\";\nimport { FilterClauseValueEditor } from \"../filterClauseTypes\";\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 onSelectedDateChange = useCallback<DateInputProps[\"onChange\"]>(\n    (d: DateValue | undefined, source) => {\n      setDate(d);\n      if (d && source === \"calendar\") {\n        onChangeValue(toEpochMilliS(d));\n      }\n    },\n    [onChangeValue, toEpochMilliS]\n  );\n\n  const onBlur = useCallback(() => {\n    date && onChangeValue(toEpochMilliS(date));\n  }, [date, onChangeValue, toEpochMilliS]);\n\n  const handleKeyDown = useCallback<KeyboardEventHandler>(\n    (evt) => {\n      if (evt.key === \"Enter\") {\n        if (date) {\n          const popup = queryClosest(evt.target, \".vuuDatePopup\");\n          if (popup === null) {\n            onChangeValue(toEpochMilliS(date));\n          }\n        }\n      } else if (evt.key === \"Tab\") {\n        console.log(\"better handle tab\");\n      }\n    },\n    [date, onChangeValue, toEpochMilliS]\n  );\n\n  return (\n    <DateInput\n      inputProps={InputProps?.inputProps}\n      className={cx(\"vuuFilterClause-DatePicker\", className)}\n      selectedDate={date}\n      onBlur={onBlur}\n      onChange={onSelectedDateChange}\n      onKeyDown={handleKeyDown}\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","queryClosest","jsx","DateInput","toCalendarDate","date","getLocalTimeZone"],"mappings":"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"}

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":["../../../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  ref: RefObject<HTMLDivElement>;\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}\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":";;;;;;;AAwBO,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,SAAA;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,EAAA;AAAA,KACpD,CAAA;AAMA,IAAM,MAAA,YAAA,GAAeC,iBAAY,CAAA,CAAC,GAAuC,KAAA;AACvE,MAAA,MAAM,EAAE,KAAA,EAAAC,MAAM,EAAA,GAAI,GAAI,CAAA,MAAA,CAAA;AAEtB,MAAM,MAAA,YAAA,GAAe,WAAWA,MAAK,CAAA,CAAA;AACrC,MAAI,IAAAF,sBAAA,CAAc,YAAY,CAAG,EAAA;AAC/B,QAAA,OAAA,CAAQ,IAAI,WAAW,CAAA,CAAA;AAAA,OACzB;AACA,MAAA,QAAA,CAASE,MAAK,CAAA,CAAA;AAAA,KAChB,EAAG,EAAE,CAAA,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,CAAA;AACtB,UAAM,MAAA,YAAA,GAAe,WAAWA,MAAK,CAAA,CAAA;AACrC,UAAI,IAAAF,sBAAA,CAAc,YAAY,CAAG,EAAA;AAC/B,YAAA,aAAA,CAAc,YAAY,CAAA,CAAA;AAAA,WAC5B;AAAA,SACF;AAAA,OACF;AAAA,MACA,CAAC,aAAa,CAAA;AAAA,KAChB,CAAA;AAEA,IACE,uBAAAG,cAAA;AAAA,MAACC,0BAAA;AAAA,MAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA;AAAA,QACA,YAAY,EAAA,SAAA;AAAA,QACZ,QAAU,EAAA,YAAA;AAAA,QACV,SAAW,EAAA,aAAA;AAAA,QACX,GAAK,EAAA,YAAA;AAAA,QACL,KAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -0,0 +1,193 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var vuuDataReact = require('@vuu-ui/vuu-data-react');
+var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
+var ExpandoCombobox = require('../ExpandoCombobox.js');
+
+const selectionKeys = ["Enter", " "];
+const getVuuTable = (schemaTable) => {
+  if (schemaTable.session) {
+    const { module, session } = schemaTable;
+    return { module, table: session };
+  } else {
+    return schemaTable;
+  }
+};
+const NO_DATA_MATCH = ["No matching data"];
+const FilterClauseValueEditorText = react.forwardRef(
+  function FilterClauseTextValueEditor({
+    InputProps: InputPropsProp = {},
+    className,
+    column,
+    "data-field": dataField,
+    onDeselect,
+    onChangeValue,
+    operator,
+    suggestionProvider = vuuDataReact.useTypeaheadSuggestions,
+    table,
+    value
+  }, forwardedRef) {
+    const isMultiValue = operator === "in";
+    const [valueInputValue, setValueInputValue] = react.useState(
+      value?.toString() ?? ""
+    );
+    const [typeaheadValues, setTypeaheadValues] = react.useState([]);
+    const getSuggestions = suggestionProvider();
+    const handleSingleValueSelectionChange = react.useCallback(
+      (_, value2) => onChangeValue(value2),
+      [onChangeValue]
+    );
+    const handleMultiValueSelectionChange = react.useCallback(
+      (_, values) => onChangeValue(values),
+      [onChangeValue]
+    );
+    react.useEffect(() => {
+      if (table) {
+        const vuuTable = getVuuTable(table);
+        const params = valueInputValue && !isMultiValue ? [vuuTable, column.name, valueInputValue] : [vuuTable, column.name];
+        getSuggestions(params).then((suggestions) => {
+          if (suggestions.length === 0 && valueInputValue) {
+            setTypeaheadValues(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;
+        console.log(`handleInputChange "${value2}"`);
+        setValueInputValue(value2);
+        if (operator === "starts" || operator === "ends" || operator === "contains") {
+          onChangeValue(value2, false);
+        }
+      },
+      [onChangeValue, operator]
+    );
+    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?.inputProps?.onKeyDown?.(evt);
+        }
+      },
+      [InputPropsProp, onChangeValue, valueInputValue]
+    );
+    const InputProps = react.useMemo(() => {
+      if (operator === "starts" || operator === "ends") {
+        const { inputProps, ...restInputProps } = InputPropsProp;
+        return {
+          ...restInputProps,
+          inputProps: {
+            ...inputProps,
+            onKeyDown: handleKeyDownFreeTextInput
+          }
+        };
+      } else {
+        return InputPropsProp;
+      }
+    }, [InputPropsProp, handleKeyDownFreeTextInput, operator]);
+    const getValueInputField = react.useCallback(() => {
+      switch (operator) {
+        case "in":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            ExpandoCombobox.ExpandoCombobox,
+            {
+              InputProps,
+              className,
+              "data-field": dataField,
+              initialHighlightedIndex: 0,
+              source: typeaheadValues,
+              onInputChange: handleInputChange,
+              onSelectionChange: handleMultiValueSelectionChange,
+              ref: forwardedRef,
+              selectionStrategy: "multiple",
+              selectionKeys,
+              value
+            }
+          );
+        case "starts": {
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            ExpandoCombobox.ExpandoCombobox,
+            {
+              InputProps,
+              ListProps: {
+                className: "vuuIllustrationsOnly",
+                disabled: true
+              },
+              allowEnterCommitsText: true,
+              allowFreeText: true,
+              className,
+              "data-field": dataField,
+              initialHighlightedIndex: 0,
+              disableFilter: typeaheadValues === NO_DATA_MATCH && valueInputValue?.length > 0,
+              source: typeaheadValues,
+              onInputChange: handleInputChange,
+              onSelectionChange: handleSingleValueSelectionChange,
+              ref: forwardedRef,
+              value
+            }
+          );
+        }
+        case "ends":
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            vuuUiControls.ExpandoInput,
+            {
+              ...InputProps,
+              className,
+              "data-field": dataField,
+              value: valueInputValue,
+              ref: forwardedRef,
+              onChange: handleInputChange
+            }
+          );
+        default:
+          return typeaheadValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+            ExpandoCombobox.ExpandoCombobox,
+            {
+              InputProps,
+              allowBackspaceClearsSelection: true,
+              allowFreeText: true,
+              className,
+              "data-field": dataField,
+              initialHighlightedIndex: 0,
+              source: typeaheadValues,
+              title: "value",
+              onInputChange: handleInputChange,
+              onDeselect,
+              onSelectionChange: handleSingleValueSelectionChange,
+              ref: forwardedRef,
+              value
+            }
+          ) : null;
+      }
+    }, [
+      InputProps,
+      operator,
+      className,
+      dataField,
+      typeaheadValues,
+      handleInputChange,
+      handleMultiValueSelectionChange,
+      forwardedRef,
+      value,
+      valueInputValue,
+      onDeselect,
+      handleSingleValueSelectionChange
+    ]);
+    return getValueInputField();
+  }
+);
+
+exports.FilterClauseValueEditorText = FilterClauseValueEditorText;
+//# sourceMappingURL=FilterClauseValueEditorText.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterClauseValueEditorText.js","sources":["../../../src/filter-clause/value-editors/FilterClauseValueEditorText.tsx"],"sourcesContent":["import {\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEventHandler,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from \"react\";\nimport { TypeaheadParams, VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { useTypeaheadSuggestions } from \"@vuu-ui/vuu-data-react\";\nimport {\n  ExpandoInput,\n  MultiSelectionHandler,\n  SingleSelectionHandler,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport { ExpandoCombobox } from \"../ExpandoCombobox\";\nimport { FilterClauseValueEditor } from \"../filterClauseTypes\";\nimport { SuggestionFetcher, TableSchemaTable } from \"@vuu-ui/vuu-data-types\";\n\nconst selectionKeys = [\"Enter\", \" \"];\n\nconst getVuuTable = (schemaTable: TableSchemaTable): VuuTable => {\n  if (schemaTable.session) {\n    const { module, session } = schemaTable;\n    return { module, table: session };\n  } else {\n    return schemaTable;\n  }\n};\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      \"data-field\": dataField,\n      onDeselect,\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 =\n      useCallback<SingleSelectionHandler>(\n        (_, value) => onChangeValue(value),\n        [onChangeValue]\n      );\n\n    const handleMultiValueSelectionChange = useCallback<MultiSelectionHandler>(\n      (_, values) => onChangeValue(values),\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?.inputProps?.onKeyDown?.(evt);\n        }\n      },\n      [InputPropsProp, onChangeValue, valueInputValue]\n    );\n\n    const InputProps = useMemo(() => {\n      if (operator === \"starts\" || operator === \"ends\") {\n        const { inputProps, ...restInputProps } = InputPropsProp;\n        return {\n          ...restInputProps,\n          inputProps: {\n            ...inputProps,\n            onKeyDown: handleKeyDownFreeTextInput,\n          },\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={dataField}\n              initialHighlightedIndex={0}\n              source={typeaheadValues}\n              onInputChange={handleInputChange}\n              onSelectionChange={handleMultiValueSelectionChange}\n              ref={forwardedRef}\n              selectionStrategy=\"multiple\"\n              selectionKeys={selectionKeys}\n              value={value}\n            />\n          );\n        case \"starts\": {\n          return (\n            <ExpandoCombobox<string>\n              InputProps={InputProps}\n              ListProps={{\n                className: \"vuuIllustrationsOnly\",\n                disabled: true,\n              }}\n              allowEnterCommitsText\n              allowFreeText\n              className={className}\n              data-field={dataField}\n              initialHighlightedIndex={0}\n              disableFilter={\n                typeaheadValues === NO_DATA_MATCH && valueInputValue?.length > 0\n              }\n              source={typeaheadValues}\n              onInputChange={handleInputChange}\n              onSelectionChange={handleSingleValueSelectionChange}\n              ref={forwardedRef}\n              value={value}\n            />\n          );\n        }\n\n        case \"ends\":\n          return (\n            <ExpandoInput\n              {...InputProps}\n              className={className}\n              data-field={dataField}\n              value={valueInputValue}\n              ref={forwardedRef}\n              onChange={handleInputChange}\n            />\n          );\n\n        default:\n          //TODO get a ref to input and listen to changes - connect these to typeahead\n          return typeaheadValues.length > 0 ? (\n            <ExpandoCombobox<string>\n              InputProps={InputProps}\n              allowBackspaceClearsSelection\n              allowFreeText\n              className={className}\n              data-field={dataField}\n              initialHighlightedIndex={0}\n              source={typeaheadValues}\n              title=\"value\"\n              onInputChange={handleInputChange}\n              onDeselect={onDeselect}\n              onSelectionChange={handleSingleValueSelectionChange}\n              ref={forwardedRef}\n              value={value}\n            />\n          ) : null;\n      }\n    }, [\n      InputProps,\n      operator,\n      className,\n      dataField,\n      typeaheadValues,\n      handleInputChange,\n      handleMultiValueSelectionChange,\n      forwardedRef,\n      value,\n      valueInputValue,\n      onDeselect,\n      handleSingleValueSelectionChange,\n    ]);\n\n    return getValueInputField();\n  }\n);\n"],"names":["forwardRef","useTypeaheadSuggestions","useState","useCallback","value","useEffect","useMemo","jsx","ExpandoCombobox","ExpandoInput"],"mappings":"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"}

package/cjs/filter-editor/FilterClauseCombinator.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var filterClauseCombinatorCss = ".vuuFilterClauseCombinator {\n    --saltButton-height: calc(var(--salt-spacing-400));\n    font-size: 9px;\n    padding: 0 4px;\n}\n.vuuFilterClauseCombinator:focus {\n    background-color: var(--vuu-color-gray-50);\n    color: white;\n}";
+
+module.exports = filterClauseCombinatorCss;
+//# sourceMappingURL=FilterClauseCombinator.css.js.map

package/cjs/filter-editor/FilterClauseCombinator.css.js.map

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