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

package/esm/filter-clause/operator-picker/OperatorPicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OperatorPicker.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/operator-picker/OperatorPicker.tsx"],"sourcesContent":["import type { FilterClauseOp } from \"@vuu-ui/vuu-filter-types\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ComboBoxProps, Option, useForkRef } from \"@salt-ds/core\";\nimport { ForwardedRef, SyntheticEvent, forwardRef } from \"react\";\nimport { ExpandoCombobox } from \"../ExpandoCombobox\";\nimport { getOperators } from \"./operator-utils\";\nimport { useOperatorPicker } from \"./useOperatorPicker\";\n\nexport type OperatorPickerProps = Pick<\n  ComboBoxProps,\n  \"className\" | \"inputProps\" | \"value\"\n> & {\n  column: ColumnDescriptor;\n  onSelect: (evt: SyntheticEvent, operator: FilterClauseOp) => void;\n  dropdownOnAutofocus?: boolean;\n};\n\nexport const OperatorPicker = forwardRef(function OperatorPicker(\n  {\n    className,\n    column,\n    dropdownOnAutofocus = true,\n    inputProps,\n    onSelect,\n    value: valueProp,\n  }: OperatorPickerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const { ref, ...comboProps } = useOperatorPicker({\n    onSelect,\n    value: valueProp?.toString() ?? \"\",\n  });\n\n  return (\n    <ExpandoCombobox<FilterClauseOp>\n      {...comboProps}\n      className={className}\n      data-field=\"operator\"\n      dropdownOnAutofocus={dropdownOnAutofocus}\n      inputProps={inputProps}\n      ref={useForkRef(forwardedRef, ref)}\n      title=\"operator\"\n    >\n      {getOperators(column)\n        .filter((op) =>\n          op.toLowerCase().includes(comboProps.value.toLowerCase()),\n        )\n        .map((op) => (\n          <Option value={op} key={op} />\n        ))}\n    </ExpandoCombobox>\n  );\n});\n"],"names":["OperatorPicker"],"mappings":";;;;;;;AAiBa,MAAA,cAAA,GAAiB,UAAW,CAAA,SAASA,eAChD,CAAA;AAAA,EACE,SAAA;AAAA,EACA,MAAA;AAAA,EACA,mBAAsB,GAAA,IAAA;AAAA,EACtB,UAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAO,EAAA;AACT,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,EAAE,GAAA,EAAK,GAAG,UAAA,KAAe,iBAAkB,CAAA;AAAA,IAC/C,QAAA;AAAA,IACA,KAAA,EAAO,SAAW,EAAA,QAAA,EAAc,IAAA;AAAA,GACjC,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,SAAA;AAAA,MACA,YAAW,EAAA,UAAA;AAAA,MACX,mBAAA;AAAA,MACA,UAAA;AAAA,MACA,GAAA,EAAK,UAAW,CAAA,YAAA,EAAc,GAAG,CAAA;AAAA,MACjC,KAAM,EAAA,UAAA;AAAA,MAEL,QAAA,EAAA,YAAA,CAAa,MAAM,CACjB,CAAA,MAAA;AAAA,QAAO,CAAC,OACP,EAAG,CAAA,WAAA,GAAc,QAAS,CAAA,UAAA,CAAW,KAAM,CAAA,WAAA,EAAa;AAAA,OAC1D,CACC,IAAI,CAAC,EAAA,yBACH,MAAO,EAAA,EAAA,KAAA,EAAO,EAAS,EAAA,EAAA,EAAI,CAC7B;AAAA;AAAA,GACL;AAEJ,CAAC;;;;"}

package/esm/filter-clause/operator-picker/operator-utils.js

@@ -1,30 +0,0 @@
-import { isTextColumn, isNumericColumn, isTimestampColumn } from '@vuu-ui/vuu-utils';
-
-const textOperators = [
-  "=",
-  "in",
-  "!=",
-  "starts",
-  "ends",
-  "contains"
-];
-const numericOperators = [
-  "=",
-  "!=",
-  ">",
-  ">=",
-  "<",
-  "<="
-];
-const getOperators = (column) => {
-  if (isTextColumn(column)) {
-    return textOperators;
-  } else if (isNumericColumn(column) || isTimestampColumn(column)) {
-    return numericOperators;
-  } else {
-    throw Error("getOperators only supports text and numeric columns");
-  }
-};
-
-export { getOperators, numericOperators, textOperators };
-//# sourceMappingURL=operator-utils.js.map

package/esm/filter-clause/operator-picker/operator-utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"operator-utils.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/operator-picker/operator-utils.ts"],"sourcesContent":["import type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  isNumericColumn,\n  isTextColumn,\n  isTimestampColumn,\n} from \"@vuu-ui/vuu-utils\";\nimport type {\n  FilterClauseOp,\n  NumericFilterClauseOp,\n} from \"@vuu-ui/vuu-filter-types\";\n\nexport const textOperators: FilterClauseOp[] = [\n  \"=\",\n  \"in\",\n  \"!=\",\n  \"starts\",\n  \"ends\",\n  \"contains\",\n];\nexport const numericOperators: NumericFilterClauseOp[] = [\n  \"=\",\n  \"!=\",\n  \">\",\n  \">=\",\n  \"<\",\n  \"<=\",\n];\n\nexport const getOperators = (column: ColumnDescriptor): FilterClauseOp[] => {\n  if (isTextColumn(column)) {\n    return textOperators;\n  } else if (isNumericColumn(column) || isTimestampColumn(column)) {\n    return numericOperators;\n  } else {\n    throw Error(\"getOperators only supports text and numeric columns\");\n  }\n};\n"],"names":[],"mappings":";;AAWO,MAAM,aAAkC,GAAA;AAAA,EAC7C,GAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF;AACO,MAAM,gBAA4C,GAAA;AAAA,EACvD,GAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA;AACF;AAEa,MAAA,YAAA,GAAe,CAAC,MAA+C,KAAA;AAC1E,EAAI,IAAA,YAAA,CAAa,MAAM,CAAG,EAAA;AACxB,IAAO,OAAA,aAAA;AAAA,aACE,eAAgB,CAAA,MAAM,CAAK,IAAA,iBAAA,CAAkB,MAAM,CAAG,EAAA;AAC/D,IAAO,OAAA,gBAAA;AAAA,GACF,MAAA;AACL,IAAA,MAAM,MAAM,qDAAqD,CAAA;AAAA;AAErE;;;;"}

package/esm/filter-clause/operator-picker/useOperatorPicker.js

@@ -1,59 +0,0 @@
-import { useRef, useState, useCallback } from 'react';
-import { dispatchKeyboardEvent } from '@vuu-ui/vuu-utils';
-
-const useOperatorPicker = ({
-  onSelect,
-  value: valueProp
-}) => {
-  const ref = useRef(null);
-  const openRef = useRef(false);
-  const [value, setValue] = useState(valueProp);
-  const highlightFirstOption = useCallback(() => {
-    if (ref.current) {
-      const input = ref.current?.querySelector(
-        'input[role="combobox"]'
-      );
-      if (input) {
-        requestAnimationFrame(() => {
-          dispatchKeyboardEvent(input, "keydown", "ArrowDown");
-        });
-      }
-    }
-  }, []);
-  const handleChange = useCallback(
-    (event) => {
-      const value2 = event.target.value;
-      setValue(value2);
-      if (openRef.current && value2 === "") {
-        highlightFirstOption();
-      }
-    },
-    [highlightFirstOption]
-  );
-  const handleSelectionChange = useCallback(
-    (evt, [newSelected]) => {
-      onSelect?.(evt, newSelected);
-      setValue(newSelected ?? "");
-    },
-    [onSelect]
-  );
-  const handleOpenChange = useCallback(
-    (isOpen, reason) => {
-      openRef.current = isOpen;
-      if (isOpen && reason === "focus") {
-        highlightFirstOption();
-      }
-    },
-    [highlightFirstOption]
-  );
-  return {
-    onChange: handleChange,
-    onOpenChange: handleOpenChange,
-    onSelectionChange: handleSelectionChange,
-    ref,
-    value: value.toString().trim()
-  };
-};
-
-export { useOperatorPicker };
-//# sourceMappingURL=useOperatorPicker.js.map

package/esm/filter-clause/operator-picker/useOperatorPicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOperatorPicker.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/operator-picker/useOperatorPicker.ts"],"sourcesContent":["import {\n  ChangeEvent,\n  SyntheticEvent,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { dispatchKeyboardEvent } from \"@vuu-ui/vuu-utils\";\nimport { FilterClauseOp } from \"@vuu-ui/vuu-filter-types\";\n\nexport const useOperatorPicker = ({\n  onSelect,\n  value: valueProp,\n}: {\n  onSelect: (evt: SyntheticEvent, op: FilterClauseOp) => void;\n  value: string;\n}) => {\n  const ref = useRef<HTMLDivElement>(null);\n  const openRef = useRef(false);\n  const [value, setValue] = useState(valueProp);\n\n  const highlightFirstOption = useCallback(() => {\n    if (ref.current) {\n      const input = ref.current?.querySelector<HTMLInputElement>(\n        'input[role=\"combobox\"]',\n      );\n      if (input) {\n        requestAnimationFrame(() => {\n          dispatchKeyboardEvent(input, \"keydown\", \"ArrowDown\");\n        });\n      }\n    }\n  }, []);\n\n  const handleChange = useCallback(\n    (event: ChangeEvent<HTMLInputElement>) => {\n      const value = event.target.value;\n      setValue(value);\n      if (openRef.current && value === \"\") {\n        highlightFirstOption();\n      }\n    },\n    [highlightFirstOption],\n  );\n\n  const handleSelectionChange = useCallback(\n    (evt: SyntheticEvent, [newSelected]: FilterClauseOp[]) => {\n      onSelect?.(evt, newSelected);\n      setValue(newSelected ?? \"\");\n    },\n    [onSelect],\n  );\n\n  const handleOpenChange = useCallback(\n    (isOpen: boolean, reason?: \"manual\" | \"input\" | \"focus\") => {\n      openRef.current = isOpen;\n      if (isOpen && reason === \"focus\") {\n        highlightFirstOption();\n      }\n    },\n    [highlightFirstOption],\n  );\n\n  return {\n    onChange: handleChange,\n    onOpenChange: handleOpenChange,\n    onSelectionChange: handleSelectionChange,\n    ref,\n    value: value.toString().trim(),\n  };\n};\n"],"names":["value"],"mappings":";;;AAUO,MAAM,oBAAoB,CAAC;AAAA,EAChC,QAAA;AAAA,EACA,KAAO,EAAA;AACT,CAGM,KAAA;AACJ,EAAM,MAAA,GAAA,GAAM,OAAuB,IAAI,CAAA;AACvC,EAAM,MAAA,OAAA,GAAU,OAAO,KAAK,CAAA;AAC5B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,SAAS,CAAA;AAE5C,EAAM,MAAA,oBAAA,GAAuB,YAAY,MAAM;AAC7C,IAAA,IAAI,IAAI,OAAS,EAAA;AACf,MAAM,MAAA,KAAA,GAAQ,IAAI,OAAS,EAAA,aAAA;AAAA,QACzB;AAAA,OACF;AACA,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,qBAAA,CAAsB,MAAM;AAC1B,UAAsB,qBAAA,CAAA,KAAA,EAAO,WAAW,WAAW,CAAA;AAAA,SACpD,CAAA;AAAA;AACH;AACF,GACF,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,KAAyC,KAAA;AACxC,MAAMA,MAAAA,MAAAA,GAAQ,MAAM,MAAO,CAAA,KAAA;AAC3B,MAAA,QAAA,CAASA,MAAK,CAAA;AACd,MAAI,IAAA,OAAA,CAAQ,OAAWA,IAAAA,MAAAA,KAAU,EAAI,EAAA;AACnC,QAAqB,oBAAA,EAAA;AAAA;AACvB,KACF;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAC5B,CAAC,GAAA,EAAqB,CAAC,WAAW,CAAwB,KAAA;AACxD,MAAA,QAAA,GAAW,KAAK,WAAW,CAAA;AAC3B,MAAA,QAAA,CAAS,eAAe,EAAE,CAAA;AAAA,KAC5B;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,QAAiB,MAA0C,KAAA;AAC1D,MAAA,OAAA,CAAQ,OAAU,GAAA,MAAA;AAClB,MAAI,IAAA,MAAA,IAAU,WAAW,OAAS,EAAA;AAChC,QAAqB,oBAAA,EAAA;AAAA;AACvB,KACF;AAAA,IACA,CAAC,oBAAoB;AAAA,GACvB;AAEA,EAAO,OAAA;AAAA,IACL,QAAU,EAAA,YAAA;AAAA,IACV,YAAc,EAAA,gBAAA;AAAA,IACd,iBAAmB,EAAA,qBAAA;AAAA,IACnB,GAAA;AAAA,IACA,KAAO,EAAA,KAAA,CAAM,QAAS,EAAA,CAAE,IAAK;AAAA,GAC/B;AACF;;;;"}

package/esm/filter-clause/useFilterClause.js

@@ -1,170 +0,0 @@
-import { hasOpenOptionList } from '@vuu-ui/vuu-utils';
-import { useState, useMemo, useRef, useCallback, useEffect } from 'react';
-import { clauseIsNotFirst, focusNextFocusableElement, focusNextElement, navigateToNextItemIfAtBoundary, tabToPreviousFilterCombinator } from './filterClauseFocusManagement.js';
-
-const useFilterClause = ({
-  filterClauseModel,
-  onCancel,
-  columnsByName,
-  onFocusSave,
-  onOpenChange,
-  dropdownOnAutofocus = true
-}) => {
-  const [filterClause, setFilterClause] = useState(
-    filterClauseModel.isValid ? filterClauseModel.asFilter() : {}
-  );
-  useMemo(() => {
-    filterClauseModel.on("filterClause", (filterClause2) => {
-      setFilterClause(filterClause2);
-    });
-  }, [filterClauseModel]);
-  const columnRef = useRef(null);
-  const operatorRef = useRef(null);
-  const valueRef = useRef(null);
-  const filterTouched = useRef(false);
-  const setValueRef = useCallback(
-    (el) => {
-      valueRef.current = el;
-      if (!filterClauseModel.isValid) {
-        el?.querySelector("input")?.focus();
-      }
-    },
-    [filterClauseModel.isValid]
-  );
-  const removeAndNavigateToNextInputIfAtBoundary = 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;
-            focusNextFocusableElement("bwd");
-            break;
-          }
-          case "value": {
-            filterClauseModel.setOp(void 0);
-            focusNextFocusableElement("bwd");
-            break;
-          }
-          case "column": {
-            if (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(() => {
-        focusNextElement();
-      }, 100);
-    } else {
-      filterClauseModel.column = void 0;
-    }
-  };
-  const onSelectOperator = useCallback(
-    (_, selectedOp) => {
-      filterClauseModel.setOp(selectedOp);
-      if (selectedOp) {
-        focusNextElement();
-      }
-    },
-    [filterClauseModel]
-  );
-  const handleChangeValue = useCallback(
-    (value, isFinal) => filterClauseModel.setValue(value, isFinal),
-    [filterClauseModel]
-  );
-  const handleDeselectValue = useCallback(
-    () => filterClauseModel.setValue(void 0),
-    [filterClauseModel]
-  );
-  const handleKeyDownCaptureNavigation = useCallback(
-    (evt) => {
-      if (["ArrowLeft", "ArrowRight"].includes(evt.key)) {
-        navigateToNextItemIfAtBoundary(evt);
-      } else if (evt.key === "Backspace") {
-        removeAndNavigateToNextInputIfAtBoundary(evt);
-      } else if (evt.key === "Escape") {
-        if (!hasOpenOptionList(evt.target)) {
-          onCancel?.(filterClauseModel, "Escape");
-        }
-      } else if (evt.key === "Tab" && evt.shiftKey) {
-        evt.preventDefault();
-        tabToPreviousFilterCombinator(evt.target);
-      } else if (evt.key === "Tab") {
-        if (filterClauseModel.isValid) {
-          evt.preventDefault();
-          evt.stopPropagation();
-          onFocusSave?.();
-        }
-      }
-    },
-    [
-      filterClauseModel,
-      onCancel,
-      onFocusSave,
-      removeAndNavigateToNextInputIfAtBoundary
-    ]
-  );
-  const handleOpenChange = 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 = useMemo(
-    () => ({
-      onKeyDownCapture: handleKeyDownCaptureNavigation,
-      tabIndex: -1,
-      onFocus: () => filterTouched.current = true
-    }),
-    [handleKeyDownCaptureNavigation]
-  );
-  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
-  };
-};
-
-export { useFilterClause };
-//# sourceMappingURL=useFilterClause.js.map

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

@@ -1 +0,0 @@
-{"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":["filterClause"],"mappings":"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"}

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

@@ -1,91 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import cx from 'clsx';
-import { FilterClauseValueEditorNumber } from './FilterClauseValueEditorNumber.js';
-import { FilterClauseValueEditorText } from './FilterClauseValueEditorText.js';
-import { isDateTimeDataValue, isTimeDataValue } from '@vuu-ui/vuu-utils';
-import { forwardRef } from 'react';
-import { FilterClauseValueEditorDate } from './FilterClauseValueEditorDate.js';
-import { FilterClauseValueEditorTime } from './FilterClauseValueEditorTime.js';
-
-const classBase = "vuuFilterClause";
-const FilterClauseValueEditor = forwardRef(
-  function FilterClauseValueEditor2({
-    selectedColumn,
-    operator,
-    inputProps,
-    onChangeValue,
-    onDeselectValue,
-    onOpenChange,
-    table,
-    value,
-    dropdownOnAutofocus = true
-  }, forwardedRef) {
-    if (selectedColumn === void 0 || operator === void 0) {
-      return null;
-    }
-    if (isDateTimeDataValue(selectedColumn)) {
-      return /* @__PURE__ */ jsx(
-        FilterClauseValueEditorDate,
-        {
-          inputProps,
-          className: cx(`${classBase}Field`, `${classBase}Value`),
-          value,
-          operator,
-          onChangeValue
-        }
-      );
-    } else if (isTimeDataValue(selectedColumn)) {
-      return /* @__PURE__ */ jsx(
-        FilterClauseValueEditorTime,
-        {
-          inputProps,
-          className: cx(`${classBase}Field`, `${classBase}Value`),
-          value,
-          operator,
-          onChangeValue
-        }
-      );
-    }
-    switch (selectedColumn.serverDataType) {
-      case "string":
-      case "char":
-        return /* @__PURE__ */ jsx(
-          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__ */ jsx(
-          FilterClauseValueEditorNumber,
-          {
-            inputProps,
-            className: cx(`${classBase}Field`, `${classBase}Value`),
-            column: selectedColumn,
-            "data-field": "value",
-            onChangeValue,
-            operator,
-            ref: forwardedRef
-          }
-        );
-      default:
-        console.log("returning null");
-        return null;
-    }
-  }
-);
-
-export { FilterClauseValueEditor };
-//# sourceMappingURL=FilterClauseValueEditor.js.map

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

@@ -1 +0,0 @@
-{"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":["FilterClauseValueEditor"],"mappings":";;;;;;;;;AAeA,MAAM,SAAY,GAAA,iBAAA;AAiBX,MAAM,uBAA0B,GAAA,UAAA;AAAA,EACrC,SAASA,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,IAAA,mBAAA,CAAoB,cAAc,CAAG,EAAA;AACvC,MACE,uBAAA,GAAA;AAAA,QAAC,2BAAA;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,IAAW,eAAgB,CAAA,cAAc,CAAG,EAAA;AAC1C,MACE,uBAAA,GAAA;AAAA,QAAC,2BAAA;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,uBAAA,GAAA;AAAA,UAAC,2BAAA;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,uBAAA,GAAA;AAAA,UAAC,6BAAA;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/esm/filter-clause/value-editors/FilterClauseValueEditorDate.js

@@ -1,62 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useState, useCallback } from 'react';
-import { getLocalTimeZone } from '@internationalized/date';
-import { toCalendarDate } from '@vuu-ui/vuu-utils';
-import { VuuDatePicker } from '@vuu-ui/vuu-ui-controls';
-
-const FilterClauseValueEditorDate = (props) => {
-  const { inputProps, className, onChangeValue, operator, value } = props;
-  const toEpochMilliS = getEpochMillisConverter(operator);
-  const [date, setDate] = useState(
-    () => getInitialState(value)
-  );
-  const handleCommit = useCallback(
-    (e, selectedDateInputValue) => {
-      console.log("change date");
-      if (selectedDateInputValue) {
-        const dateValue = toCalendarDate(new Date(selectedDateInputValue));
-        setDate(dateValue);
-        if (selectedDateInputValue) {
-          onChangeValue(toEpochMilliS(dateValue));
-        }
-      }
-    },
-    [onChangeValue, toEpochMilliS]
-  );
-  const onBlur = useCallback(() => {
-    date && onChangeValue(toEpochMilliS(date));
-  }, [date, onChangeValue, toEpochMilliS]);
-  return /* @__PURE__ */ jsx(
-    VuuDatePicker,
-    {
-      "data-field": "value",
-      inputProps,
-      className,
-      onBlur,
-      onCommit: handleCommit,
-      selectedDate: date
-    }
-  );
-};
-function getInitialState(value) {
-  return value ? toCalendarDate(new Date(value)) : void 0;
-}
-const getEpochMillisConverter = (op) => (date, timezone = getLocalTimeZone()) => {
-  const d = date.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();
-  }
-};
-
-export { FilterClauseValueEditorDate };
-//# sourceMappingURL=FilterClauseValueEditorDate.js.map

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

@@ -1 +0,0 @@
-{"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":[],"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,GAAA,QAAA;AAAA,IAAgC,MACtD,gBAAgB,KAAK;AAAA,GACvB;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,GAAG,sBAA2B,KAAA;AAC7B,MAAA,OAAA,CAAQ,IAAI,aAAa,CAAA;AACzB,MAAA,IAAI,sBAAwB,EAAA;AAC1B,QAAA,MAAM,SAAY,GAAA,cAAA,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,GAAS,YAAY,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,uBAAA,GAAA;AAAA,IAAC,aAAA;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,QAAQ,cAAe,CAAA,IAAI,IAAK,CAAA,KAAK,CAAC,CAAI,GAAA,KAAA,CAAA;AACnD;AAEA,MAAM,0BACJ,CAAC,EAAA,KACD,CAAC,IAAiB,EAAA,QAAA,GAAmB,kBAA+B,KAAA;AAClE,EAAM,MAAA,CAAA,GAAI,IAAK,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/esm/filter-clause/value-editors/FilterClauseValueEditorNumber.js

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

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

@@ -1 +0,0 @@
-{"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":["value"],"mappings":";;;;;AAuBO,MAAM,6BAAgC,GAAA,UAAA;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,GAAA,QAAA;AAAA,MACxB,aAAc,CAAA,SAAS,CAAI,GAAA,SAAA,CAAU,UAAa,GAAA;AAAA,KACpD;AAMA,IAAM,MAAA,YAAA,GAAe,WAAY,CAAA,CAAC,GAAuC,KAAA;AACvE,MAAA,MAAM,EAAE,KAAA,EAAAA,MAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AAEtB,MAAM,MAAA,YAAA,GAAe,WAAWA,MAAK,CAAA;AACrC,MAAI,IAAA,aAAA,CAAc,YAAY,CAAG,EAAA;AAC/B,QAAA,OAAA,CAAQ,IAAI,WAAW,CAAA;AAAA;AAEzB,MAAA,QAAA,CAASA,MAAK,CAAA;AAAA,KAChB,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,MACpB,CAAC,GAAyC,KAAA;AACxC,QAAA,IAAI,GAAI,CAAA,GAAA,KAAQ,OAAW,IAAA,GAAA,CAAI,QAAQ,KAAO,EAAA;AAC5C,UAAA,MAAM,EAAE,KAAA,EAAAA,MAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,UAAM,MAAA,YAAA,GAAe,WAAWA,MAAK,CAAA;AACrC,UAAI,IAAA,aAAA,CAAc,YAAY,CAAG,EAAA;AAC/B,YAAA,aAAA,CAAc,YAAY,CAAA;AAAA;AAC5B;AACF,OACF;AAAA,MACA,CAAC,aAAa;AAAA,KAChB;AAEA,IACE,uBAAA,GAAA;AAAA,MAAC,YAAA;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;;;;"}