@vuu-ui/vuu-filters 0.13.33 → 0.13.35

package/cjs/column-filter/ColumnFilter.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var columnFilterCss = ".vuuColumnFilter {\n    border: solid 1px var(--salt-editable-borderColor);\n    border-radius: 6px;\n    max-width: 200px;\n\n\n    .vuuColumnFilter-rangeHigh {\n        position: relative;\n    }\n\n    .vuuColumnFilter-rangeHigh::before {\n        content: \"\";\n        width: 1px;\n        position: absolute;\n        background: var(--salt-separable-primary-borderColor);\n        /* Accomodate button border */\n        left: 0;\n        top: calc(-1 * var(--salt-spacing-100));\n        bottom: calc(-1 * var(--salt-spacing-100));\n    }\n\n}\n\n.vuuColumnFilter-trigger {\n    --saltButton-borderRadius: 4px 0px 0px 4px;\n    --saltButton-padding: var(--salt-spacing-200);\n}\n";
+var columnFilterCss = ".vuuColumnFilter {\n    border: solid 1px var(--salt-editable-borderColor);\n    max-width: 200px;\n    padding-left: 4px;\n    padding-right: 4px;\n    width: var(--vuuColumnFilter-width, fit-content);\n\n\n    .vuuColumnFilter-rangeHigh {\n        position: relative;\n    }\n\n    .vuuColumnFilter-rangeHigh::before {\n        content: \"\";\n        width: 1px;\n        position: absolute;\n        background: var(--salt-separable-primary-borderColor);\n        /* Accomodate button border */\n        left: calc(-1 * var(--salt-spacing-100));\n        top: -1px;\n        bottom: -1px;\n    }\n\n    .vuuTimePicker {\n        border-radius: 6px;\n    }\n\n    .vuuTimePicker + .vuuTimePicker {\n        margin-left: var(--salt-spacing-100);\n    }\n\n    .vuuTimeInput {\n        border: none;\n        outline: none;\n    }\n\n    .vuuTimeInput:focus-visible {\n        outline: none;\n    }\n\n}\n\n.vuuColumnFilter-trigger {\n    --saltButton-borderRadius: 4px 0px 0px 4px;\n    --saltButton-padding: var(--salt-spacing-200);\n}\n";
 
 module.exports = columnFilterCss;
 //# sourceMappingURL=ColumnFilter.css.js.map

package/cjs/column-filter/ColumnFilter.js

@@ -11,33 +11,51 @@ var react = require('react');
 var useColumnFilter = require('./useColumnFilter.js');
 
 const classBase = "vuuColumnFilter";
-const ColumnFilter = ({
+const ColumnFilter = react.forwardRef(function ColumnFilter2({
   column,
   className,
   operator = "=",
   showOperatorPicker = false,
   table,
   value,
+  onFilterChange,
   ...buttonGroupProps
-}) => {
+}, forwardRef2) {
   const targetWindow = window.useWindow();
   styles.useComponentCssInjection({
-    testId: "vuu-filter-bar",
+    testId: "vuu-column-filter",
     css: ColumnFilter$1,
     window: targetWindow
   });
+  const {
+    op,
+    allowedOperators,
+    filterValue,
+    inputProps,
+    rangeInputProps,
+    handleOperatorChange,
+    handleCommit,
+    handleRangeCommit
+  } = useColumnFilter.useColumnFilter({
+    operator,
+    column,
+    value,
+    onFilterChange
+  });
+  react.useMemo(
+    () => useColumnFilter.assertValidOperator(allowedOperators, column, operator),
+    [column, operator, allowedOperators]
+  );
   react.useMemo(
-    () => useColumnFilter.assertValidValue(column, operator, value),
-    [column, operator, value]
+    () => useColumnFilter.assertValidValue(column, op, filterValue),
+    [column, op, filterValue]
   );
-  const onCommit = react.useCallback((e, value2) => {
-    console.log(`onCommit ${value2}`);
-  }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.SegmentedButtonGroup,
     {
       ...buttonGroupProps,
       className: cx(classBase, className),
+      ref: forwardRef2,
       children: [
         showOperatorPicker ? /* @__PURE__ */ jsxRuntime.jsxs(core.Menu, { placement: "bottom-start", children: [
           /* @__PURE__ */ jsxRuntime.jsx(core.MenuTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -48,34 +66,35 @@ const ColumnFilter = ({
               className: `${classBase}-trigger`,
               "data-embedded": true,
               sentiment: "neutral",
-              children: operator
+              children: op
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(core.MenuPanel, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: "=" }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: "!=" }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: "starts" }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: "ends" }),
-            /* @__PURE__ */ jsxRuntime.jsx(core.MenuItem, { children: "contains" })
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsx(core.MenuPanel, { children: allowedOperators.map((allowedOp) => /* @__PURE__ */ jsxRuntime.jsx(
+            core.MenuItem,
+            {
+              onClick: () => handleOperatorChange(allowedOp),
+              children: allowedOp
+            },
+            `allowedOp`
+          )) })
         ] }) : null,
         vuuDataReact.getDataItemEditControl({
+          InputProps: { inputProps },
           dataDescriptor: column,
-          defaultValue: Array.isArray(value) ? value[0] : value,
-          onCommit,
+          onCommit: handleCommit,
           table
         }),
-        operator === "between" ? vuuDataReact.getDataItemEditControl({
+        op === "between" ? vuuDataReact.getDataItemEditControl({
           className: `${classBase}-rangeHigh`,
+          InputProps: { inputProps: rangeInputProps },
           dataDescriptor: column,
-          defaultValue: Array.isArray(value) ? value[1] : void 0,
-          onCommit,
+          onCommit: handleRangeCommit,
           table
         }) : null
       ]
     }
   );
-};
+});
 
 exports.ColumnFilter = ColumnFilter;
 //# sourceMappingURL=ColumnFilter.js.map

package/cjs/column-filter/ColumnFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/ColumnFilter.tsx"],"sourcesContent":["import {\n  Button,\n  Menu,\n  MenuItem,\n  MenuPanel,\n  MenuTrigger,\n  SegmentedButtonGroup,\n  SegmentedButtonGroupProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport columnFilterCss from \"./ColumnFilter.css\";\nimport { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { useCallback, useMemo } from \"react\";\nimport { CommitHandler } from \"@vuu-ui/vuu-utils\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  assertValidValue,\n  ColumnFilterHookProps,\n  FilterValue,\n} from \"./useColumnFilter\";\n\nconst classBase = \"vuuColumnFilter\";\n\nexport interface ColumnFilterProps\n  extends ColumnFilterHookProps,\n    SegmentedButtonGroupProps {\n  showOperatorPicker?: boolean;\n  /**\n   * VuuTable is required if typeahead support is expected.\n   */\n  table?: VuuTable;\n\n  /**\n   * Initial filter value. Pair of values expewcted when operator is\n   * 'between'\n   */\n  value?: FilterValue | [FilterValue, FilterValue];\n}\n\nexport const ColumnFilter = ({\n  column,\n  className,\n  operator = \"=\",\n  showOperatorPicker = false,\n  table,\n  value,\n  ...buttonGroupProps\n}: ColumnFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-bar\",\n    css: columnFilterCss,\n    window: targetWindow,\n  });\n\n  useMemo(\n    () => assertValidValue(column, operator, value),\n    [column, operator, value],\n  );\n\n  const onCommit = useCallback<CommitHandler<HTMLElement>>((e, value) => {\n    console.log(`onCommit ${value}`);\n  }, []);\n\n  return (\n    <SegmentedButtonGroup\n      {...buttonGroupProps}\n      className={cx(classBase, className)}\n    >\n      {showOperatorPicker ? (\n        <Menu placement=\"bottom-start\">\n          <MenuTrigger>\n            <Button\n              appearance=\"solid\"\n              aria-label=\"Open Menu\"\n              className={`${classBase}-trigger`}\n              data-embedded\n              sentiment=\"neutral\"\n            >\n              {operator}\n            </Button>\n          </MenuTrigger>\n          <MenuPanel>\n            <MenuItem>=</MenuItem>\n            <MenuItem>!=</MenuItem>\n            <MenuItem>starts</MenuItem>\n            <MenuItem>ends</MenuItem>\n            <MenuItem>contains</MenuItem>\n          </MenuPanel>\n        </Menu>\n      ) : null}\n      {getDataItemEditControl({\n        dataDescriptor: column,\n        defaultValue: Array.isArray(value)\n          ? (value[0] as string)\n          : (value as string),\n        onCommit,\n        table,\n      })}\n      {operator === \"between\"\n        ? getDataItemEditControl({\n            className: `${classBase}-rangeHigh`,\n            dataDescriptor: column,\n            defaultValue: Array.isArray(value)\n              ? (value[1] as string)\n              : undefined,\n            onCommit,\n            table,\n          })\n        : null}\n    </SegmentedButtonGroup>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","columnFilterCss","useMemo","assertValidValue","useCallback","value","jsxs","SegmentedButtonGroup","Menu","jsx","MenuTrigger","Button","MenuPanel","MenuItem","getDataItemEditControl"],"mappings":";;;;;;;;;;;;AAwBA,MAAM,SAAY,GAAA,iBAAA;AAkBX,MAAM,eAAe,CAAC;AAAA,EAC3B,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAW,GAAA,GAAA;AAAA,EACX,kBAAqB,GAAA,KAAA;AAAA,EACrB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAAC,aAAA;AAAA,IACE,MAAMC,gCAAA,CAAiB,MAAQ,EAAA,QAAA,EAAU,KAAK,CAAA;AAAA,IAC9C,CAAC,MAAQ,EAAA,QAAA,EAAU,KAAK;AAAA,GAC1B;AAEA,EAAA,MAAM,QAAW,GAAAC,iBAAA,CAAwC,CAAC,CAAA,EAAGC,MAAU,KAAA;AACrE,IAAQ,OAAA,CAAA,GAAA,CAAI,CAAYA,SAAAA,EAAAA,MAAK,CAAE,CAAA,CAAA;AAAA,GACjC,EAAG,EAAE,CAAA;AAEL,EACE,uBAAAC,eAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,QACC,kBAAA,mBAAAD,eAAA,CAACE,SAAK,EAAA,EAAA,SAAA,EAAU,cACd,EAAA,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAACC,gBACC,EAAA,EAAA,QAAA,kBAAAD,cAAA;AAAA,YAACE,WAAA;AAAA,YAAA;AAAA,cACC,UAAW,EAAA,OAAA;AAAA,cACX,YAAW,EAAA,WAAA;AAAA,cACX,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,eAAa,EAAA,IAAA;AAAA,cACb,SAAU,EAAA,SAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WAEL,EAAA,CAAA;AAAA,0CACCC,cACC,EAAA,EAAA,QAAA,EAAA;AAAA,4BAAAH,cAAA,CAACI,iBAAS,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,4BACXJ,cAAA,CAACI,iBAAS,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,4BACZJ,cAAA,CAACI,iBAAS,QAAM,EAAA,QAAA,EAAA,CAAA;AAAA,4BAChBJ,cAAA,CAACI,iBAAS,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,4BACdJ,cAAA,CAACI,iBAAS,QAAQ,EAAA,UAAA,EAAA;AAAA,WACpB,EAAA;AAAA,SAAA,EACF,CACE,GAAA,IAAA;AAAA,QACHC,mCAAuB,CAAA;AAAA,UACtB,cAAgB,EAAA,MAAA;AAAA,UAChB,cAAc,KAAM,CAAA,OAAA,CAAQ,KAAK,CAC5B,GAAA,KAAA,CAAM,CAAC,CACP,GAAA,KAAA;AAAA,UACL,QAAA;AAAA,UACA;AAAA,SACD,CAAA;AAAA,QACA,QAAA,KAAa,YACVA,mCAAuB,CAAA;AAAA,UACrB,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,UACvB,cAAgB,EAAA,MAAA;AAAA,UAChB,cAAc,KAAM,CAAA,OAAA,CAAQ,KAAK,CAC5B,GAAA,KAAA,CAAM,CAAC,CACR,GAAA,KAAA,CAAA;AAAA,UACJ,QAAA;AAAA,UACA;AAAA,SACD,CACD,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ;;;;"}
+{"version":3,"file":"ColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/ColumnFilter.tsx"],"sourcesContent":["import {\n  Button,\n  Menu,\n  MenuItem,\n  MenuPanel,\n  MenuTrigger,\n  SegmentedButtonGroup,\n  SegmentedButtonGroupProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport columnFilterCss from \"./ColumnFilter.css\";\nimport { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { ForwardedRef, forwardRef, ReactElement, useMemo } from \"react\";\nimport {\n  assertValidOperator,\n  assertValidValue,\n  ColumnFilterHookProps,\n  useColumnFilter,\n} from \"./useColumnFilter\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nconst classBase = \"vuuColumnFilter\";\n\nexport interface ColumnFilterProps\n  extends SegmentedButtonGroupProps,\n    Pick<\n      ColumnFilterHookProps,\n      \"column\" | \"operator\" | \"value\" | \"onFilterChange\"\n    > {\n  /**\n   * Display operator picker.\n   */\n  showOperatorPicker?: boolean;\n  /**\n   * VuuTable is required if typeahead support is expected.\n   */\n  table?: VuuTable;\n}\n\nexport const ColumnFilter = forwardRef(function ColumnFilter(\n  {\n    column,\n    className,\n    operator = \"=\",\n    showOperatorPicker = false,\n    table,\n    value,\n    onFilterChange,\n    ...buttonGroupProps\n  }: ColumnFilterProps,\n  forwardRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-filter\",\n    css: columnFilterCss,\n    window: targetWindow,\n  });\n\n  const {\n    op,\n    allowedOperators,\n    filterValue,\n    inputProps,\n    rangeInputProps,\n    handleOperatorChange,\n    handleCommit,\n    handleRangeCommit,\n  } = useColumnFilter({\n    operator,\n    column,\n    value,\n    onFilterChange,\n  });\n\n  useMemo(\n    () => assertValidOperator(allowedOperators, column, operator),\n    [column, operator, allowedOperators],\n  );\n\n  useMemo(\n    () => assertValidValue(column, op, filterValue),\n    [column, op, filterValue],\n  );\n\n  return (\n    <SegmentedButtonGroup\n      {...buttonGroupProps}\n      className={cx(classBase, className)}\n      ref={forwardRef}\n    >\n      {showOperatorPicker ? (\n        <Menu placement=\"bottom-start\">\n          <MenuTrigger>\n            <Button\n              appearance=\"solid\"\n              aria-label=\"Open Menu\"\n              className={`${classBase}-trigger`}\n              data-embedded\n              sentiment=\"neutral\"\n            >\n              {op}\n            </Button>\n          </MenuTrigger>\n          <MenuPanel>\n            {allowedOperators.map((allowedOp) => (\n              <MenuItem\n                key={`allowedOp`}\n                onClick={() => handleOperatorChange(allowedOp)}\n              >\n                {allowedOp}\n              </MenuItem>\n            ))}\n          </MenuPanel>\n        </Menu>\n      ) : null}\n      {getDataItemEditControl({\n        InputProps: { inputProps },\n        dataDescriptor: column,\n        onCommit: handleCommit,\n        table,\n      })}\n      {op === \"between\"\n        ? getDataItemEditControl({\n            className: `${classBase}-rangeHigh`,\n            InputProps: { inputProps: rangeInputProps },\n            dataDescriptor: column,\n            onCommit: handleRangeCommit,\n            table,\n          })\n        : null}\n    </SegmentedButtonGroup>\n  );\n}) as (\n  props: ColumnFilterProps & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  },\n) => ReactElement<ColumnFilterProps>;\n"],"names":["forwardRef","ColumnFilter","useWindow","useComponentCssInjection","columnFilterCss","useColumnFilter","useMemo","assertValidOperator","assertValidValue","jsxs","SegmentedButtonGroup","Menu","jsx","MenuTrigger","Button","MenuPanel","MenuItem","getDataItemEditControl"],"mappings":"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"}

package/cjs/column-filter/useColumnFilter.js

@@ -1,5 +1,16 @@
 'use strict';
 
+var react = require('react');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var operatorUtils = require('../filter-clause/operator-utils.js');
+
+const assertValidOperator = (allowedOperators, column, op) => {
+  if (!allowedOperators.find((filterClauseOp) => filterClauseOp === op)) {
+    console.warn(
+      `[useColumnFilter] '${op} not supported for column ${column.name}'`
+    );
+  }
+};
 const assertValidValue = ({ serverDataType: _ }, operator, value) => {
   if (value !== void 0) {
     if (operator === "between") {
@@ -9,9 +20,9 @@ const assertValidValue = ({ serverDataType: _ }, operator, value) => {
         );
       } else if (value.length !== 2) {
         throw Error(
-          `[useColumnFilter] 'between operator requires two values, received ${value.length}'`
+          `[useColumnFilter] 'between operator requires two values, received ${value}'`
         );
-      } else if (typeof value[0] !== typeof value[1]) {
+      } else if (value[0] && value[1] && typeof value[0] !== typeof value[1]) {
         throw Error(
           `[useColumnFilter] 'between operator values must be of same type, received ${typeof value[0]} and ${typeof value[1]}`
         );
@@ -19,6 +30,104 @@ const assertValidValue = ({ serverDataType: _ }, operator, value) => {
     }
   }
 };
+const useColumnFilter = ({
+  operator = "=",
+  value,
+  column,
+  onFilterChange
+}) => {
+  const getDefaultValue = (op2) => op2 === "between" ? ["", ""] : "";
+  const filterValue = react.useRef(value ?? getDefaultValue(operator));
+  const [op, setOp] = react.useState(operator);
+  const allowedOperators = react.useMemo(() => operatorUtils.getOperators(column), [column]);
+  react.useMemo(() => {
+    if (value && value !== filterValue.current) {
+      filterValue.current = value;
+      setTimeout(() => {
+        onFilterChange?.(value, column, op);
+      }, 100);
+    }
+  }, [value, column, op, onFilterChange]);
+  const handleOperatorChange = react.useCallback((changedOp) => {
+    setOp(changedOp);
+  }, []);
+  const handleCommit = react.useCallback(
+    (e, newValue) => {
+      console.log(`[useColumnFilter] handleCommit ${newValue}`);
+      if (Array.isArray(filterValue.current)) {
+        filterValue.current = [newValue, filterValue.current[1]];
+        if (filterValue.current && (filterValue.current[0] === void 0 || filterValue.current[1] === void 0)) {
+          console.info(
+            "Range start or end value missing - ignoring onFilterChange"
+          );
+        }
+      } else {
+        filterValue.current = newValue;
+      }
+      onFilterChange?.(filterValue.current, column, op);
+    },
+    [op, column, onFilterChange]
+  );
+  const handleRangeCommit = react.useCallback(
+    (e, newValue) => {
+      if (Array.isArray(filterValue.current)) {
+        filterValue.current = [filterValue.current[0], newValue];
+        if (filterValue.current && (filterValue.current[0] === void 0 || filterValue.current[1] === void 0)) {
+          console.info(
+            "Range start or end value missing - ignoring onFilterChange"
+          );
+        }
+      } else {
+        filterValue.current = newValue;
+      }
+      onFilterChange?.(filterValue.current, column, op);
+    },
+    [op, column, onFilterChange]
+  );
+  const handleInputChange = react.useCallback(
+    (e) => {
+      if (Array.isArray(filterValue.current)) {
+        const editControl = vuuUtils.queryClosest(e.target, "[data-edit-control]", true);
+        const updated = [
+          !editControl?.className?.includes("rangeHigh") ? e.target.value : filterValue.current[0],
+          editControl?.className?.includes("rangeHigh") ? e.target.value : filterValue.current[1]
+        ];
+        filterValue.current = updated;
+        onFilterChange?.(updated, column, op);
+      } else {
+        filterValue.current = e.target.value;
+        onFilterChange?.(e.target.value, column, op);
+      }
+    },
+    [op, column, onFilterChange]
+  );
+  const inputProps = react.useMemo(
+    () => ({
+      onChange: handleInputChange,
+      value: Array.isArray(filterValue.current) ? filterValue.current[0] : filterValue.current
+    }),
+    [handleInputChange]
+  );
+  const rangeInputProps = react.useMemo(
+    () => ({
+      onChange: handleInputChange,
+      value: Array.isArray(filterValue.current) ? filterValue.current[1] : filterValue.current
+    }),
+    [handleInputChange]
+  );
+  return {
+    op,
+    allowedOperators,
+    filterValue: filterValue.current,
+    inputProps,
+    rangeInputProps,
+    handleCommit,
+    handleRangeCommit,
+    handleOperatorChange
+  };
+};
 
+exports.assertValidOperator = assertValidOperator;
 exports.assertValidValue = assertValidValue;
+exports.useColumnFilter = useColumnFilter;
 //# sourceMappingURL=useColumnFilter.js.map

package/cjs/column-filter/useColumnFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"useColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/useColumnFilter.ts"],"sourcesContent":["import { FilterOp } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nexport type FilterValue = string | number | [string, string] | [number, number];\n\nexport const assertValidValue = (\n  { serverDataType: _ }: ColumnDescriptor,\n  operator: FilterOp | \"between\",\n  value?: FilterValue | FilterValue[],\n) => {\n  if (value !== undefined) {\n    if (operator === \"between\") {\n      if (!Array.isArray(value)) {\n        throw Error(\n          \"[useColumnFilter] 'between operator requires array of two values'\",\n        );\n      } else if (value.length !== 2) {\n        throw Error(\n          `[useColumnFilter] 'between operator requires two values, received ${value.length}'`,\n        );\n      } else if (typeof value[0] !== typeof value[1]) {\n        throw Error(\n          `[useColumnFilter] 'between operator values must be of same type, received ${typeof value[0]} and ${typeof value[1]}`,\n        );\n      }\n    }\n    // TODO validate value(s) against serverDataType\n  }\n};\n\nexport interface ColumnFilterHookProps {\n  column: ColumnDescriptor;\n  operator?: FilterOp | \"between\";\n}\n\n// export const useColumnFilter = ({\n//   column,\n//   operator = \"=\",\n// }: ColumnFilterHookProps) => {};\n"],"names":[],"mappings":";;AAKO,MAAM,mBAAmB,CAC9B,EAAE,gBAAgB,CAAE,EAAA,EACpB,UACA,KACG,KAAA;AACH,EAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,IAAA,IAAI,aAAa,SAAW,EAAA;AAC1B,MAAA,IAAI,CAAC,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACzB,QAAM,MAAA,KAAA;AAAA,UACJ;AAAA,SACF;AAAA,OACF,MAAA,IAAW,KAAM,CAAA,MAAA,KAAW,CAAG,EAAA;AAC7B,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,kEAAA,EAAqE,MAAM,MAAM,CAAA,CAAA;AAAA,SACnF;AAAA,OACF,MAAA,IAAW,OAAO,KAAM,CAAA,CAAC,MAAM,OAAO,KAAA,CAAM,CAAC,CAAG,EAAA;AAC9C,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,0EAAA,EAA6E,OAAO,KAAM,CAAA,CAAC,CAAC,CAAQ,KAAA,EAAA,OAAO,KAAM,CAAA,CAAC,CAAC,CAAA;AAAA,SACrH;AAAA;AACF;AACF;AAGJ;;;;"}
+{"version":3,"file":"useColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/useColumnFilter.ts"],"sourcesContent":["import { FilterClauseOp, FilterValue } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  ChangeEventHandler,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { CommitHandler, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { VuuTypeaheadInputProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { getOperators } from \"../filter-clause/operator-utils\";\n\nexport type Operator = FilterClauseOp | \"between\";\n\nexport const assertValidOperator = (\n  allowedOperators: FilterClauseOp[],\n  column: ColumnDescriptor,\n  op: Operator,\n) => {\n  if (!allowedOperators.find((filterClauseOp) => filterClauseOp === op)) {\n    console.warn(\n      `[useColumnFilter] '${op} not supported for column ${column.name}'`,\n    );\n  }\n};\n\nexport const assertValidValue = (\n  { serverDataType: _ }: ColumnDescriptor,\n  operator: Operator,\n  value?: FilterValue,\n) => {\n  if (value !== undefined) {\n    if (operator === \"between\") {\n      if (!Array.isArray(value)) {\n        throw Error(\n          \"[useColumnFilter] 'between operator requires array of two values'\",\n        );\n      } else if (value.length !== 2) {\n        throw Error(\n          `[useColumnFilter] 'between operator requires two values, received ${value}'`,\n        );\n      } else if (value[0] && value[1] && typeof value[0] !== typeof value[1]) {\n        throw Error(\n          `[useColumnFilter] 'between operator values must be of same type, received ${typeof value[0]} and ${typeof value[1]}`,\n        );\n      }\n    }\n    // TODO validate value(s) against serverDataType\n  }\n};\n\nexport type ColumnFilterHookProps = {\n  column: ColumnDescriptor;\n  operator?: Operator;\n  /**\n   * Filter value. Pair of values expected when operator is\n   * 'between'\n   */\n  value?: FilterValue;\n  /**\n   * Filter change events.\n   */\n  onFilterChange?: (\n    value: FilterValue,\n    column: ColumnDescriptor,\n    op: Operator,\n  ) => void;\n};\n\nexport const useColumnFilter = ({\n  operator = \"=\",\n  value,\n  column,\n  onFilterChange,\n}: ColumnFilterHookProps) => {\n  const getDefaultValue = (op: Operator) => (op === \"between\" ? [\"\", \"\"] : \"\");\n  const filterValue = useRef(value ?? getDefaultValue(operator));\n  const [op, setOp] = useState(operator);\n  const allowedOperators = useMemo(() => getOperators(column), [column]);\n\n  useMemo(() => {\n    if (value && value !== filterValue.current) {\n      filterValue.current = value;\n      setTimeout(() => {\n        onFilterChange?.(value, column, op);\n      }, 100);\n    }\n  }, [value, column, op, onFilterChange]);\n\n  const handleOperatorChange = useCallback((changedOp: Operator) => {\n    setOp(changedOp);\n  }, []);\n\n  const handleCommit = useCallback<CommitHandler<HTMLElement>>(\n    (e, newValue) => {\n      console.log(`[useColumnFilter] handleCommit ${newValue}`);\n      if (Array.isArray(filterValue.current)) {\n        filterValue.current = [newValue as FilterValue, filterValue.current[1]];\n        if (\n          filterValue.current &&\n          (filterValue.current[0] === undefined ||\n            filterValue.current[1] === undefined)\n        ) {\n          console.info(\n            \"Range start or end value missing - ignoring onFilterChange\",\n          );\n        }\n      } else {\n        filterValue.current = newValue as FilterValue;\n      }\n      onFilterChange?.(filterValue.current, column, op);\n    },\n    [op, column, onFilterChange],\n  );\n\n  const handleRangeCommit = useCallback<CommitHandler<HTMLElement>>(\n    (e, newValue) => {\n      if (Array.isArray(filterValue.current)) {\n        filterValue.current = [filterValue.current[0], newValue as FilterValue];\n        if (\n          filterValue.current &&\n          (filterValue.current[0] === undefined ||\n            filterValue.current[1] === undefined)\n        ) {\n          console.info(\n            \"Range start or end value missing - ignoring onFilterChange\",\n          );\n        }\n      } else {\n        filterValue.current = newValue as FilterValue;\n      }\n      onFilterChange?.(filterValue.current, column, op);\n    },\n    [op, column, onFilterChange],\n  );\n\n  const handleInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      if (Array.isArray(filterValue.current)) {\n        const editControl = queryClosest(e.target, \"[data-edit-control]\", true);\n        const updated: FilterValue = [\n          !editControl?.className?.includes(\"rangeHigh\")\n            ? e.target.value\n            : filterValue.current[0],\n          editControl?.className?.includes(\"rangeHigh\")\n            ? e.target.value\n            : filterValue.current[1],\n        ];\n        filterValue.current = updated;\n        onFilterChange?.(updated, column, op);\n      } else {\n        filterValue.current = e.target.value;\n        onFilterChange?.(e.target.value, column, op);\n      }\n    },\n    [op, column, onFilterChange],\n  );\n\n  const inputProps = useMemo<VuuTypeaheadInputProps[\"inputProps\"]>(\n    () => ({\n      onChange: handleInputChange,\n      value: Array.isArray(filterValue.current)\n        ? filterValue.current[0]\n        : filterValue.current,\n    }),\n    [handleInputChange],\n  );\n\n  const rangeInputProps = useMemo<VuuTypeaheadInputProps[\"inputProps\"]>(\n    () => ({\n      onChange: handleInputChange,\n      value: Array.isArray(filterValue.current)\n        ? filterValue.current[1]\n        : filterValue.current,\n    }),\n    [handleInputChange],\n  );\n\n  return {\n    op,\n    allowedOperators,\n    filterValue: filterValue.current,\n    inputProps,\n    rangeInputProps,\n    handleCommit,\n    handleRangeCommit,\n    handleOperatorChange,\n  };\n};\n"],"names":["op","useRef","useState","useMemo","getOperators","useCallback","queryClosest"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"FilterClauseValueEditorTime.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorTime.tsx"],"sourcesContent":["import { 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 { VuuTimePicker } from \"@vuu-ui/vuu-ui-controls\";\n\ninterface FilterClauseValueEditorTimeProps\n  extends Pick<FilterClauseValueEditor, \"onChangeValue\" | \"inputProps\"> {\n  className?: string;\n  value: number | undefined;\n  operator: NumericFilterClauseOp;\n}\n\nexport const FilterClauseValueEditorTime = (\n  props: FilterClauseValueEditorTimeProps,\n) => {\n  const { 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 time\");\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    <VuuTimePicker\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: FilterClauseValueEditorTimeProps[\"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","VuuTimePicker","date","getLocalTimeZone"],"mappings":";;;;;;;;AAca,MAAA,2BAAA,GAA8B,CACzC,KACG,KAAA;AACH,EAAA,MAAM,EAAE,SAAA,EAAW,aAAe,EAAA,QAAA,EAAU,OAAU,GAAA,KAAA;AACtD,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,MAEX,SAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAU,EAAA;AAAA;AAAA,GAEZ;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;;;;"}
+{"version":3,"file":"FilterClauseValueEditorTime.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorTime.tsx"],"sourcesContent":["import { 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 { VuuTimePicker } from \"@vuu-ui/vuu-ui-controls\";\n\ninterface FilterClauseValueEditorTimeProps\n  extends Pick<FilterClauseValueEditor, \"onChangeValue\" | \"inputProps\"> {\n  className?: string;\n  value: number | undefined;\n  operator: NumericFilterClauseOp;\n}\n\nexport const FilterClauseValueEditorTime = (\n  props: FilterClauseValueEditorTimeProps,\n) => {\n  const { 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<HTMLInputElement, string>>(\n    (e, selectedDateInputValue) => {\n      console.log(\"change time\");\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    <VuuTimePicker\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: FilterClauseValueEditorTimeProps[\"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","VuuTimePicker","date","getLocalTimeZone"],"mappings":";;;;;;;;AAca,MAAA,2BAAA,GAA8B,CACzC,KACG,KAAA;AACH,EAAA,MAAM,EAAE,SAAA,EAAW,aAAe,EAAA,QAAA,EAAU,OAAU,GAAA,KAAA;AACtD,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,MAEX,SAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAU,EAAA;AAAA;AAAA,GAEZ;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/esm/column-filter/ColumnFilter.css.js

@@ -1,4 +1,4 @@
-var columnFilterCss = ".vuuColumnFilter {\n    border: solid 1px var(--salt-editable-borderColor);\n    border-radius: 6px;\n    max-width: 200px;\n\n\n    .vuuColumnFilter-rangeHigh {\n        position: relative;\n    }\n\n    .vuuColumnFilter-rangeHigh::before {\n        content: \"\";\n        width: 1px;\n        position: absolute;\n        background: var(--salt-separable-primary-borderColor);\n        /* Accomodate button border */\n        left: 0;\n        top: calc(-1 * var(--salt-spacing-100));\n        bottom: calc(-1 * var(--salt-spacing-100));\n    }\n\n}\n\n.vuuColumnFilter-trigger {\n    --saltButton-borderRadius: 4px 0px 0px 4px;\n    --saltButton-padding: var(--salt-spacing-200);\n}\n";
+var columnFilterCss = ".vuuColumnFilter {\n    border: solid 1px var(--salt-editable-borderColor);\n    max-width: 200px;\n    padding-left: 4px;\n    padding-right: 4px;\n    width: var(--vuuColumnFilter-width, fit-content);\n\n\n    .vuuColumnFilter-rangeHigh {\n        position: relative;\n    }\n\n    .vuuColumnFilter-rangeHigh::before {\n        content: \"\";\n        width: 1px;\n        position: absolute;\n        background: var(--salt-separable-primary-borderColor);\n        /* Accomodate button border */\n        left: calc(-1 * var(--salt-spacing-100));\n        top: -1px;\n        bottom: -1px;\n    }\n\n    .vuuTimePicker {\n        border-radius: 6px;\n    }\n\n    .vuuTimePicker + .vuuTimePicker {\n        margin-left: var(--salt-spacing-100);\n    }\n\n    .vuuTimeInput {\n        border: none;\n        outline: none;\n    }\n\n    .vuuTimeInput:focus-visible {\n        outline: none;\n    }\n\n}\n\n.vuuColumnFilter-trigger {\n    --saltButton-borderRadius: 4px 0px 0px 4px;\n    --saltButton-padding: var(--salt-spacing-200);\n}\n";
 
 export { columnFilterCss as default };
 //# sourceMappingURL=ColumnFilter.css.js.map

package/esm/column-filter/ColumnFilter.js

@@ -5,37 +5,55 @@ import { useWindow } from '@salt-ds/window';
 import cx from 'clsx';
 import columnFilterCss from './ColumnFilter.css.js';
 import { getDataItemEditControl } from '@vuu-ui/vuu-data-react';
-import { useMemo, useCallback } from 'react';
-import { assertValidValue } from './useColumnFilter.js';
+import { forwardRef, useMemo } from 'react';
+import { useColumnFilter, assertValidOperator, assertValidValue } from './useColumnFilter.js';
 
 const classBase = "vuuColumnFilter";
-const ColumnFilter = ({
+const ColumnFilter = forwardRef(function ColumnFilter2({
   column,
   className,
   operator = "=",
   showOperatorPicker = false,
   table,
   value,
+  onFilterChange,
   ...buttonGroupProps
-}) => {
+}, forwardRef2) {
   const targetWindow = useWindow();
   useComponentCssInjection({
-    testId: "vuu-filter-bar",
+    testId: "vuu-column-filter",
     css: columnFilterCss,
     window: targetWindow
   });
+  const {
+    op,
+    allowedOperators,
+    filterValue,
+    inputProps,
+    rangeInputProps,
+    handleOperatorChange,
+    handleCommit,
+    handleRangeCommit
+  } = useColumnFilter({
+    operator,
+    column,
+    value,
+    onFilterChange
+  });
+  useMemo(
+    () => assertValidOperator(allowedOperators, column, operator),
+    [column, operator, allowedOperators]
+  );
   useMemo(
-    () => assertValidValue(column, operator, value),
-    [column, operator, value]
+    () => assertValidValue(column, op, filterValue),
+    [column, op, filterValue]
   );
-  const onCommit = useCallback((e, value2) => {
-    console.log(`onCommit ${value2}`);
-  }, []);
   return /* @__PURE__ */ jsxs(
     SegmentedButtonGroup,
     {
       ...buttonGroupProps,
       className: cx(classBase, className),
+      ref: forwardRef2,
       children: [
         showOperatorPicker ? /* @__PURE__ */ jsxs(Menu, { placement: "bottom-start", children: [
           /* @__PURE__ */ jsx(MenuTrigger, { children: /* @__PURE__ */ jsx(
@@ -46,34 +64,35 @@ const ColumnFilter = ({
               className: `${classBase}-trigger`,
               "data-embedded": true,
               sentiment: "neutral",
-              children: operator
+              children: op
             }
           ) }),
-          /* @__PURE__ */ jsxs(MenuPanel, { children: [
-            /* @__PURE__ */ jsx(MenuItem, { children: "=" }),
-            /* @__PURE__ */ jsx(MenuItem, { children: "!=" }),
-            /* @__PURE__ */ jsx(MenuItem, { children: "starts" }),
-            /* @__PURE__ */ jsx(MenuItem, { children: "ends" }),
-            /* @__PURE__ */ jsx(MenuItem, { children: "contains" })
-          ] })
+          /* @__PURE__ */ jsx(MenuPanel, { children: allowedOperators.map((allowedOp) => /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              onClick: () => handleOperatorChange(allowedOp),
+              children: allowedOp
+            },
+            `allowedOp`
+          )) })
         ] }) : null,
         getDataItemEditControl({
+          InputProps: { inputProps },
           dataDescriptor: column,
-          defaultValue: Array.isArray(value) ? value[0] : value,
-          onCommit,
+          onCommit: handleCommit,
           table
         }),
-        operator === "between" ? getDataItemEditControl({
+        op === "between" ? getDataItemEditControl({
           className: `${classBase}-rangeHigh`,
+          InputProps: { inputProps: rangeInputProps },
           dataDescriptor: column,
-          defaultValue: Array.isArray(value) ? value[1] : void 0,
-          onCommit,
+          onCommit: handleRangeCommit,
           table
         }) : null
       ]
     }
   );
-};
+});
 
 export { ColumnFilter };
 //# sourceMappingURL=ColumnFilter.js.map

package/esm/column-filter/ColumnFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/ColumnFilter.tsx"],"sourcesContent":["import {\n  Button,\n  Menu,\n  MenuItem,\n  MenuPanel,\n  MenuTrigger,\n  SegmentedButtonGroup,\n  SegmentedButtonGroupProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport columnFilterCss from \"./ColumnFilter.css\";\nimport { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { useCallback, useMemo } from \"react\";\nimport { CommitHandler } from \"@vuu-ui/vuu-utils\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  assertValidValue,\n  ColumnFilterHookProps,\n  FilterValue,\n} from \"./useColumnFilter\";\n\nconst classBase = \"vuuColumnFilter\";\n\nexport interface ColumnFilterProps\n  extends ColumnFilterHookProps,\n    SegmentedButtonGroupProps {\n  showOperatorPicker?: boolean;\n  /**\n   * VuuTable is required if typeahead support is expected.\n   */\n  table?: VuuTable;\n\n  /**\n   * Initial filter value. Pair of values expewcted when operator is\n   * 'between'\n   */\n  value?: FilterValue | [FilterValue, FilterValue];\n}\n\nexport const ColumnFilter = ({\n  column,\n  className,\n  operator = \"=\",\n  showOperatorPicker = false,\n  table,\n  value,\n  ...buttonGroupProps\n}: ColumnFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-bar\",\n    css: columnFilterCss,\n    window: targetWindow,\n  });\n\n  useMemo(\n    () => assertValidValue(column, operator, value),\n    [column, operator, value],\n  );\n\n  const onCommit = useCallback<CommitHandler<HTMLElement>>((e, value) => {\n    console.log(`onCommit ${value}`);\n  }, []);\n\n  return (\n    <SegmentedButtonGroup\n      {...buttonGroupProps}\n      className={cx(classBase, className)}\n    >\n      {showOperatorPicker ? (\n        <Menu placement=\"bottom-start\">\n          <MenuTrigger>\n            <Button\n              appearance=\"solid\"\n              aria-label=\"Open Menu\"\n              className={`${classBase}-trigger`}\n              data-embedded\n              sentiment=\"neutral\"\n            >\n              {operator}\n            </Button>\n          </MenuTrigger>\n          <MenuPanel>\n            <MenuItem>=</MenuItem>\n            <MenuItem>!=</MenuItem>\n            <MenuItem>starts</MenuItem>\n            <MenuItem>ends</MenuItem>\n            <MenuItem>contains</MenuItem>\n          </MenuPanel>\n        </Menu>\n      ) : null}\n      {getDataItemEditControl({\n        dataDescriptor: column,\n        defaultValue: Array.isArray(value)\n          ? (value[0] as string)\n          : (value as string),\n        onCommit,\n        table,\n      })}\n      {operator === \"between\"\n        ? getDataItemEditControl({\n            className: `${classBase}-rangeHigh`,\n            dataDescriptor: column,\n            defaultValue: Array.isArray(value)\n              ? (value[1] as string)\n              : undefined,\n            onCommit,\n            table,\n          })\n        : null}\n    </SegmentedButtonGroup>\n  );\n};\n"],"names":["value"],"mappings":";;;;;;;;;;AAwBA,MAAM,SAAY,GAAA,iBAAA;AAkBX,MAAM,eAAe,CAAC;AAAA,EAC3B,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAW,GAAA,GAAA;AAAA,EACX,kBAAqB,GAAA,KAAA;AAAA,EACrB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,OAAA;AAAA,IACE,MAAM,gBAAA,CAAiB,MAAQ,EAAA,QAAA,EAAU,KAAK,CAAA;AAAA,IAC9C,CAAC,MAAQ,EAAA,QAAA,EAAU,KAAK;AAAA,GAC1B;AAEA,EAAA,MAAM,QAAW,GAAA,WAAA,CAAwC,CAAC,CAAA,EAAGA,MAAU,KAAA;AACrE,IAAQ,OAAA,CAAA,GAAA,CAAI,CAAYA,SAAAA,EAAAA,MAAK,CAAE,CAAA,CAAA;AAAA,GACjC,EAAG,EAAE,CAAA;AAEL,EACE,uBAAA,IAAA;AAAA,IAAC,oBAAA;AAAA,IAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,QACC,kBAAA,mBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAU,cACd,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,WACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,UAAW,EAAA,OAAA;AAAA,cACX,YAAW,EAAA,WAAA;AAAA,cACX,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,eAAa,EAAA,IAAA;AAAA,cACb,SAAU,EAAA,SAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WAEL,EAAA,CAAA;AAAA,+BACC,SACC,EAAA,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAS,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,4BACX,GAAA,CAAC,YAAS,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,4BACZ,GAAA,CAAC,YAAS,QAAM,EAAA,QAAA,EAAA,CAAA;AAAA,4BAChB,GAAA,CAAC,YAAS,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,4BACd,GAAA,CAAC,YAAS,QAAQ,EAAA,UAAA,EAAA;AAAA,WACpB,EAAA;AAAA,SAAA,EACF,CACE,GAAA,IAAA;AAAA,QACH,sBAAuB,CAAA;AAAA,UACtB,cAAgB,EAAA,MAAA;AAAA,UAChB,cAAc,KAAM,CAAA,OAAA,CAAQ,KAAK,CAC5B,GAAA,KAAA,CAAM,CAAC,CACP,GAAA,KAAA;AAAA,UACL,QAAA;AAAA,UACA;AAAA,SACD,CAAA;AAAA,QACA,QAAA,KAAa,YACV,sBAAuB,CAAA;AAAA,UACrB,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,UACvB,cAAgB,EAAA,MAAA;AAAA,UAChB,cAAc,KAAM,CAAA,OAAA,CAAQ,KAAK,CAC5B,GAAA,KAAA,CAAM,CAAC,CACR,GAAA,KAAA,CAAA;AAAA,UACJ,QAAA;AAAA,UACA;AAAA,SACD,CACD,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ;;;;"}
+{"version":3,"file":"ColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/ColumnFilter.tsx"],"sourcesContent":["import {\n  Button,\n  Menu,\n  MenuItem,\n  MenuPanel,\n  MenuTrigger,\n  SegmentedButtonGroup,\n  SegmentedButtonGroupProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport columnFilterCss from \"./ColumnFilter.css\";\nimport { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { ForwardedRef, forwardRef, ReactElement, useMemo } from \"react\";\nimport {\n  assertValidOperator,\n  assertValidValue,\n  ColumnFilterHookProps,\n  useColumnFilter,\n} from \"./useColumnFilter\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nconst classBase = \"vuuColumnFilter\";\n\nexport interface ColumnFilterProps\n  extends SegmentedButtonGroupProps,\n    Pick<\n      ColumnFilterHookProps,\n      \"column\" | \"operator\" | \"value\" | \"onFilterChange\"\n    > {\n  /**\n   * Display operator picker.\n   */\n  showOperatorPicker?: boolean;\n  /**\n   * VuuTable is required if typeahead support is expected.\n   */\n  table?: VuuTable;\n}\n\nexport const ColumnFilter = forwardRef(function ColumnFilter(\n  {\n    column,\n    className,\n    operator = \"=\",\n    showOperatorPicker = false,\n    table,\n    value,\n    onFilterChange,\n    ...buttonGroupProps\n  }: ColumnFilterProps,\n  forwardRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-column-filter\",\n    css: columnFilterCss,\n    window: targetWindow,\n  });\n\n  const {\n    op,\n    allowedOperators,\n    filterValue,\n    inputProps,\n    rangeInputProps,\n    handleOperatorChange,\n    handleCommit,\n    handleRangeCommit,\n  } = useColumnFilter({\n    operator,\n    column,\n    value,\n    onFilterChange,\n  });\n\n  useMemo(\n    () => assertValidOperator(allowedOperators, column, operator),\n    [column, operator, allowedOperators],\n  );\n\n  useMemo(\n    () => assertValidValue(column, op, filterValue),\n    [column, op, filterValue],\n  );\n\n  return (\n    <SegmentedButtonGroup\n      {...buttonGroupProps}\n      className={cx(classBase, className)}\n      ref={forwardRef}\n    >\n      {showOperatorPicker ? (\n        <Menu placement=\"bottom-start\">\n          <MenuTrigger>\n            <Button\n              appearance=\"solid\"\n              aria-label=\"Open Menu\"\n              className={`${classBase}-trigger`}\n              data-embedded\n              sentiment=\"neutral\"\n            >\n              {op}\n            </Button>\n          </MenuTrigger>\n          <MenuPanel>\n            {allowedOperators.map((allowedOp) => (\n              <MenuItem\n                key={`allowedOp`}\n                onClick={() => handleOperatorChange(allowedOp)}\n              >\n                {allowedOp}\n              </MenuItem>\n            ))}\n          </MenuPanel>\n        </Menu>\n      ) : null}\n      {getDataItemEditControl({\n        InputProps: { inputProps },\n        dataDescriptor: column,\n        onCommit: handleCommit,\n        table,\n      })}\n      {op === \"between\"\n        ? getDataItemEditControl({\n            className: `${classBase}-rangeHigh`,\n            InputProps: { inputProps: rangeInputProps },\n            dataDescriptor: column,\n            onCommit: handleRangeCommit,\n            table,\n          })\n        : null}\n    </SegmentedButtonGroup>\n  );\n}) as (\n  props: ColumnFilterProps & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  },\n) => ReactElement<ColumnFilterProps>;\n"],"names":["ColumnFilter","forwardRef"],"mappings":";;;;;;;;;;AAwBA,MAAM,SAAY,GAAA,iBAAA;AAkBL,MAAA,YAAA,GAAe,UAAW,CAAA,SAASA,aAC9C,CAAA;AAAA,EACE,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAW,GAAA,GAAA;AAAA,EACX,kBAAqB,GAAA,KAAA;AAAA,EACrB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,GAAG;AACL,CAAA,EACAC,WACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA;AAAA,IACJ,EAAA;AAAA,IACA,gBAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,eAAA;AAAA,IACA,oBAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,MACE,eAAgB,CAAA;AAAA,IAClB,QAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAA,OAAA;AAAA,IACE,MAAM,mBAAA,CAAoB,gBAAkB,EAAA,MAAA,EAAQ,QAAQ,CAAA;AAAA,IAC5D,CAAC,MAAQ,EAAA,QAAA,EAAU,gBAAgB;AAAA,GACrC;AAEA,EAAA,OAAA;AAAA,IACE,MAAM,gBAAA,CAAiB,MAAQ,EAAA,EAAA,EAAI,WAAW,CAAA;AAAA,IAC9C,CAAC,MAAQ,EAAA,EAAA,EAAI,WAAW;AAAA,GAC1B;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,oBAAA;AAAA,IAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAKA,EAAAA,WAAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,QACC,kBAAA,mBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAU,cACd,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,WACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,UAAW,EAAA,OAAA;AAAA,cACX,YAAW,EAAA,WAAA;AAAA,cACX,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,eAAa,EAAA,IAAA;AAAA,cACb,SAAU,EAAA,SAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WAEL,EAAA,CAAA;AAAA,0BACC,GAAA,CAAA,SAAA,EAAA,EACE,QAAiB,EAAA,gBAAA,CAAA,GAAA,CAAI,CAAC,SACrB,qBAAA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cAEC,OAAA,EAAS,MAAM,oBAAA,CAAqB,SAAS,CAAA;AAAA,cAE5C,QAAA,EAAA;AAAA,aAAA;AAAA,YAHI,CAAA,SAAA;AAAA,WAKR,CACH,EAAA;AAAA,SAAA,EACF,CACE,GAAA,IAAA;AAAA,QACH,sBAAuB,CAAA;AAAA,UACtB,UAAA,EAAY,EAAE,UAAW,EAAA;AAAA,UACzB,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAU,EAAA,YAAA;AAAA,UACV;AAAA,SACD,CAAA;AAAA,QACA,EAAA,KAAO,YACJ,sBAAuB,CAAA;AAAA,UACrB,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,UACvB,UAAA,EAAY,EAAE,UAAA,EAAY,eAAgB,EAAA;AAAA,UAC1C,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAU,EAAA,iBAAA;AAAA,UACV;AAAA,SACD,CACD,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}

package/esm/column-filter/useColumnFilter.js

@@ -1,3 +1,14 @@
+import { useRef, useState, useMemo, useCallback } from 'react';
+import { queryClosest } from '@vuu-ui/vuu-utils';
+import { getOperators } from '../filter-clause/operator-utils.js';
+
+const assertValidOperator = (allowedOperators, column, op) => {
+  if (!allowedOperators.find((filterClauseOp) => filterClauseOp === op)) {
+    console.warn(
+      `[useColumnFilter] '${op} not supported for column ${column.name}'`
+    );
+  }
+};
 const assertValidValue = ({ serverDataType: _ }, operator, value) => {
   if (value !== void 0) {
     if (operator === "between") {
@@ -7,9 +18,9 @@ const assertValidValue = ({ serverDataType: _ }, operator, value) => {
         );
       } else if (value.length !== 2) {
         throw Error(
-          `[useColumnFilter] 'between operator requires two values, received ${value.length}'`
+          `[useColumnFilter] 'between operator requires two values, received ${value}'`
         );
-      } else if (typeof value[0] !== typeof value[1]) {
+      } else if (value[0] && value[1] && typeof value[0] !== typeof value[1]) {
         throw Error(
           `[useColumnFilter] 'between operator values must be of same type, received ${typeof value[0]} and ${typeof value[1]}`
         );
@@ -17,6 +28,102 @@ const assertValidValue = ({ serverDataType: _ }, operator, value) => {
     }
   }
 };
+const useColumnFilter = ({
+  operator = "=",
+  value,
+  column,
+  onFilterChange
+}) => {
+  const getDefaultValue = (op2) => op2 === "between" ? ["", ""] : "";
+  const filterValue = useRef(value ?? getDefaultValue(operator));
+  const [op, setOp] = useState(operator);
+  const allowedOperators = useMemo(() => getOperators(column), [column]);
+  useMemo(() => {
+    if (value && value !== filterValue.current) {
+      filterValue.current = value;
+      setTimeout(() => {
+        onFilterChange?.(value, column, op);
+      }, 100);
+    }
+  }, [value, column, op, onFilterChange]);
+  const handleOperatorChange = useCallback((changedOp) => {
+    setOp(changedOp);
+  }, []);
+  const handleCommit = useCallback(
+    (e, newValue) => {
+      console.log(`[useColumnFilter] handleCommit ${newValue}`);
+      if (Array.isArray(filterValue.current)) {
+        filterValue.current = [newValue, filterValue.current[1]];
+        if (filterValue.current && (filterValue.current[0] === void 0 || filterValue.current[1] === void 0)) {
+          console.info(
+            "Range start or end value missing - ignoring onFilterChange"
+          );
+        }
+      } else {
+        filterValue.current = newValue;
+      }
+      onFilterChange?.(filterValue.current, column, op);
+    },
+    [op, column, onFilterChange]
+  );
+  const handleRangeCommit = useCallback(
+    (e, newValue) => {
+      if (Array.isArray(filterValue.current)) {
+        filterValue.current = [filterValue.current[0], newValue];
+        if (filterValue.current && (filterValue.current[0] === void 0 || filterValue.current[1] === void 0)) {
+          console.info(
+            "Range start or end value missing - ignoring onFilterChange"
+          );
+        }
+      } else {
+        filterValue.current = newValue;
+      }
+      onFilterChange?.(filterValue.current, column, op);
+    },
+    [op, column, onFilterChange]
+  );
+  const handleInputChange = useCallback(
+    (e) => {
+      if (Array.isArray(filterValue.current)) {
+        const editControl = queryClosest(e.target, "[data-edit-control]", true);
+        const updated = [
+          !editControl?.className?.includes("rangeHigh") ? e.target.value : filterValue.current[0],
+          editControl?.className?.includes("rangeHigh") ? e.target.value : filterValue.current[1]
+        ];
+        filterValue.current = updated;
+        onFilterChange?.(updated, column, op);
+      } else {
+        filterValue.current = e.target.value;
+        onFilterChange?.(e.target.value, column, op);
+      }
+    },
+    [op, column, onFilterChange]
+  );
+  const inputProps = useMemo(
+    () => ({
+      onChange: handleInputChange,
+      value: Array.isArray(filterValue.current) ? filterValue.current[0] : filterValue.current
+    }),
+    [handleInputChange]
+  );
+  const rangeInputProps = useMemo(
+    () => ({
+      onChange: handleInputChange,
+      value: Array.isArray(filterValue.current) ? filterValue.current[1] : filterValue.current
+    }),
+    [handleInputChange]
+  );
+  return {
+    op,
+    allowedOperators,
+    filterValue: filterValue.current,
+    inputProps,
+    rangeInputProps,
+    handleCommit,
+    handleRangeCommit,
+    handleOperatorChange
+  };
+};
 
-export { assertValidValue };
+export { assertValidOperator, assertValidValue, useColumnFilter };
 //# sourceMappingURL=useColumnFilter.js.map

package/esm/column-filter/useColumnFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"useColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/useColumnFilter.ts"],"sourcesContent":["import { FilterOp } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nexport type FilterValue = string | number | [string, string] | [number, number];\n\nexport const assertValidValue = (\n  { serverDataType: _ }: ColumnDescriptor,\n  operator: FilterOp | \"between\",\n  value?: FilterValue | FilterValue[],\n) => {\n  if (value !== undefined) {\n    if (operator === \"between\") {\n      if (!Array.isArray(value)) {\n        throw Error(\n          \"[useColumnFilter] 'between operator requires array of two values'\",\n        );\n      } else if (value.length !== 2) {\n        throw Error(\n          `[useColumnFilter] 'between operator requires two values, received ${value.length}'`,\n        );\n      } else if (typeof value[0] !== typeof value[1]) {\n        throw Error(\n          `[useColumnFilter] 'between operator values must be of same type, received ${typeof value[0]} and ${typeof value[1]}`,\n        );\n      }\n    }\n    // TODO validate value(s) against serverDataType\n  }\n};\n\nexport interface ColumnFilterHookProps {\n  column: ColumnDescriptor;\n  operator?: FilterOp | \"between\";\n}\n\n// export const useColumnFilter = ({\n//   column,\n//   operator = \"=\",\n// }: ColumnFilterHookProps) => {};\n"],"names":[],"mappings":"AAKO,MAAM,mBAAmB,CAC9B,EAAE,gBAAgB,CAAE,EAAA,EACpB,UACA,KACG,KAAA;AACH,EAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,IAAA,IAAI,aAAa,SAAW,EAAA;AAC1B,MAAA,IAAI,CAAC,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACzB,QAAM,MAAA,KAAA;AAAA,UACJ;AAAA,SACF;AAAA,OACF,MAAA,IAAW,KAAM,CAAA,MAAA,KAAW,CAAG,EAAA;AAC7B,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,kEAAA,EAAqE,MAAM,MAAM,CAAA,CAAA;AAAA,SACnF;AAAA,OACF,MAAA,IAAW,OAAO,KAAM,CAAA,CAAC,MAAM,OAAO,KAAA,CAAM,CAAC,CAAG,EAAA;AAC9C,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,0EAAA,EAA6E,OAAO,KAAM,CAAA,CAAC,CAAC,CAAQ,KAAA,EAAA,OAAO,KAAM,CAAA,CAAC,CAAC,CAAA;AAAA,SACrH;AAAA;AACF;AACF;AAGJ;;;;"}
+{"version":3,"file":"useColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/useColumnFilter.ts"],"sourcesContent":["import { FilterClauseOp, FilterValue } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport {\n  ChangeEventHandler,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { CommitHandler, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { VuuTypeaheadInputProps } from \"@vuu-ui/vuu-ui-controls\";\nimport { getOperators } from \"../filter-clause/operator-utils\";\n\nexport type Operator = FilterClauseOp | \"between\";\n\nexport const assertValidOperator = (\n  allowedOperators: FilterClauseOp[],\n  column: ColumnDescriptor,\n  op: Operator,\n) => {\n  if (!allowedOperators.find((filterClauseOp) => filterClauseOp === op)) {\n    console.warn(\n      `[useColumnFilter] '${op} not supported for column ${column.name}'`,\n    );\n  }\n};\n\nexport const assertValidValue = (\n  { serverDataType: _ }: ColumnDescriptor,\n  operator: Operator,\n  value?: FilterValue,\n) => {\n  if (value !== undefined) {\n    if (operator === \"between\") {\n      if (!Array.isArray(value)) {\n        throw Error(\n          \"[useColumnFilter] 'between operator requires array of two values'\",\n        );\n      } else if (value.length !== 2) {\n        throw Error(\n          `[useColumnFilter] 'between operator requires two values, received ${value}'`,\n        );\n      } else if (value[0] && value[1] && typeof value[0] !== typeof value[1]) {\n        throw Error(\n          `[useColumnFilter] 'between operator values must be of same type, received ${typeof value[0]} and ${typeof value[1]}`,\n        );\n      }\n    }\n    // TODO validate value(s) against serverDataType\n  }\n};\n\nexport type ColumnFilterHookProps = {\n  column: ColumnDescriptor;\n  operator?: Operator;\n  /**\n   * Filter value. Pair of values expected when operator is\n   * 'between'\n   */\n  value?: FilterValue;\n  /**\n   * Filter change events.\n   */\n  onFilterChange?: (\n    value: FilterValue,\n    column: ColumnDescriptor,\n    op: Operator,\n  ) => void;\n};\n\nexport const useColumnFilter = ({\n  operator = \"=\",\n  value,\n  column,\n  onFilterChange,\n}: ColumnFilterHookProps) => {\n  const getDefaultValue = (op: Operator) => (op === \"between\" ? [\"\", \"\"] : \"\");\n  const filterValue = useRef(value ?? getDefaultValue(operator));\n  const [op, setOp] = useState(operator);\n  const allowedOperators = useMemo(() => getOperators(column), [column]);\n\n  useMemo(() => {\n    if (value && value !== filterValue.current) {\n      filterValue.current = value;\n      setTimeout(() => {\n        onFilterChange?.(value, column, op);\n      }, 100);\n    }\n  }, [value, column, op, onFilterChange]);\n\n  const handleOperatorChange = useCallback((changedOp: Operator) => {\n    setOp(changedOp);\n  }, []);\n\n  const handleCommit = useCallback<CommitHandler<HTMLElement>>(\n    (e, newValue) => {\n      console.log(`[useColumnFilter] handleCommit ${newValue}`);\n      if (Array.isArray(filterValue.current)) {\n        filterValue.current = [newValue as FilterValue, filterValue.current[1]];\n        if (\n          filterValue.current &&\n          (filterValue.current[0] === undefined ||\n            filterValue.current[1] === undefined)\n        ) {\n          console.info(\n            \"Range start or end value missing - ignoring onFilterChange\",\n          );\n        }\n      } else {\n        filterValue.current = newValue as FilterValue;\n      }\n      onFilterChange?.(filterValue.current, column, op);\n    },\n    [op, column, onFilterChange],\n  );\n\n  const handleRangeCommit = useCallback<CommitHandler<HTMLElement>>(\n    (e, newValue) => {\n      if (Array.isArray(filterValue.current)) {\n        filterValue.current = [filterValue.current[0], newValue as FilterValue];\n        if (\n          filterValue.current &&\n          (filterValue.current[0] === undefined ||\n            filterValue.current[1] === undefined)\n        ) {\n          console.info(\n            \"Range start or end value missing - ignoring onFilterChange\",\n          );\n        }\n      } else {\n        filterValue.current = newValue as FilterValue;\n      }\n      onFilterChange?.(filterValue.current, column, op);\n    },\n    [op, column, onFilterChange],\n  );\n\n  const handleInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      if (Array.isArray(filterValue.current)) {\n        const editControl = queryClosest(e.target, \"[data-edit-control]\", true);\n        const updated: FilterValue = [\n          !editControl?.className?.includes(\"rangeHigh\")\n            ? e.target.value\n            : filterValue.current[0],\n          editControl?.className?.includes(\"rangeHigh\")\n            ? e.target.value\n            : filterValue.current[1],\n        ];\n        filterValue.current = updated;\n        onFilterChange?.(updated, column, op);\n      } else {\n        filterValue.current = e.target.value;\n        onFilterChange?.(e.target.value, column, op);\n      }\n    },\n    [op, column, onFilterChange],\n  );\n\n  const inputProps = useMemo<VuuTypeaheadInputProps[\"inputProps\"]>(\n    () => ({\n      onChange: handleInputChange,\n      value: Array.isArray(filterValue.current)\n        ? filterValue.current[0]\n        : filterValue.current,\n    }),\n    [handleInputChange],\n  );\n\n  const rangeInputProps = useMemo<VuuTypeaheadInputProps[\"inputProps\"]>(\n    () => ({\n      onChange: handleInputChange,\n      value: Array.isArray(filterValue.current)\n        ? filterValue.current[1]\n        : filterValue.current,\n    }),\n    [handleInputChange],\n  );\n\n  return {\n    op,\n    allowedOperators,\n    filterValue: filterValue.current,\n    inputProps,\n    rangeInputProps,\n    handleCommit,\n    handleRangeCommit,\n    handleOperatorChange,\n  };\n};\n"],"names":["op"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"FilterClauseValueEditorTime.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorTime.tsx"],"sourcesContent":["import { 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 { VuuTimePicker } from \"@vuu-ui/vuu-ui-controls\";\n\ninterface FilterClauseValueEditorTimeProps\n  extends Pick<FilterClauseValueEditor, \"onChangeValue\" | \"inputProps\"> {\n  className?: string;\n  value: number | undefined;\n  operator: NumericFilterClauseOp;\n}\n\nexport const FilterClauseValueEditorTime = (\n  props: FilterClauseValueEditorTimeProps,\n) => {\n  const { 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 time\");\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    <VuuTimePicker\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: FilterClauseValueEditorTimeProps[\"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,SAAA,EAAW,aAAe,EAAA,QAAA,EAAU,OAAU,GAAA,KAAA;AACtD,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,MAEX,SAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAU,EAAA;AAAA;AAAA,GAEZ;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;;;;"}
+{"version":3,"file":"FilterClauseValueEditorTime.js","sources":["../../../../../packages/vuu-filters/src/filter-clause/value-editors/FilterClauseValueEditorTime.tsx"],"sourcesContent":["import { 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 { VuuTimePicker } from \"@vuu-ui/vuu-ui-controls\";\n\ninterface FilterClauseValueEditorTimeProps\n  extends Pick<FilterClauseValueEditor, \"onChangeValue\" | \"inputProps\"> {\n  className?: string;\n  value: number | undefined;\n  operator: NumericFilterClauseOp;\n}\n\nexport const FilterClauseValueEditorTime = (\n  props: FilterClauseValueEditorTimeProps,\n) => {\n  const { 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<HTMLInputElement, string>>(\n    (e, selectedDateInputValue) => {\n      console.log(\"change time\");\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    <VuuTimePicker\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: FilterClauseValueEditorTimeProps[\"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,SAAA,EAAW,aAAe,EAAA,QAAA,EAAU,OAAU,GAAA,KAAA;AACtD,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,MAEX,SAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAU,EAAA;AAAA;AAAA,GAEZ;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/package.json

@@ -1,21 +1,21 @@
 {
-  "version": "0.13.33",
+  "version": "0.13.35",
   "author": "heswell",
   "license": "Apache-2.0",
   "type": "module",
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "0.13.33",
-    "@vuu-ui/vuu-protocol-types": "0.13.33",
-    "@vuu-ui/vuu-table-types": "0.13.33",
-    "@vuu-ui/vuu-filter-types": "0.13.33"
+    "@vuu-ui/vuu-data-types": "0.13.35",
+    "@vuu-ui/vuu-protocol-types": "0.13.35",
+    "@vuu-ui/vuu-table-types": "0.13.35",
+    "@vuu-ui/vuu-filter-types": "0.13.35"
   },
   "dependencies": {
-    "@vuu-ui/vuu-data-react": "0.13.33",
-    "@vuu-ui/vuu-filter-parser": "0.13.33",
-    "@vuu-ui/vuu-popups": "0.13.33",
-    "@vuu-ui/vuu-ui-controls": "0.13.33",
-    "@vuu-ui/vuu-table": "0.13.33",
-    "@vuu-ui/vuu-utils": "0.13.33",
+    "@vuu-ui/vuu-data-react": "0.13.35",
+    "@vuu-ui/vuu-filter-parser": "0.13.35",
+    "@vuu-ui/vuu-popups": "0.13.35",
+    "@vuu-ui/vuu-ui-controls": "0.13.35",
+    "@vuu-ui/vuu-table": "0.13.35",
+    "@vuu-ui/vuu-utils": "0.13.35",
     "@salt-ds/core": "1.43.0",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1"

package/types/column-filter/ColumnFilter.d.ts

@@ -1,16 +1,17 @@
 import { SegmentedButtonGroupProps } from "@salt-ds/core";
+import { ForwardedRef, ReactElement } from "react";
+import { ColumnFilterHookProps } from "./useColumnFilter";
 import { VuuTable } from "@vuu-ui/vuu-protocol-types";
-import { ColumnFilterHookProps, FilterValue } from "./useColumnFilter";
-export interface ColumnFilterProps extends ColumnFilterHookProps, SegmentedButtonGroupProps {
+export interface ColumnFilterProps extends SegmentedButtonGroupProps, Pick<ColumnFilterHookProps, "column" | "operator" | "value" | "onFilterChange"> {
+    /**
+     * Display operator picker.
+     */
     showOperatorPicker?: boolean;
     /**
      * VuuTable is required if typeahead support is expected.
      */
     table?: VuuTable;
-    /**
-     * Initial filter value. Pair of values expewcted when operator is
-     * 'between'
-     */
-    value?: FilterValue | [FilterValue, FilterValue];
 }
-export declare const ColumnFilter: ({ column, className, operator, showOperatorPicker, table, value, ...buttonGroupProps }: ColumnFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ColumnFilter: (props: ColumnFilterProps & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => ReactElement<ColumnFilterProps>;

package/types/column-filter/useColumnFilter.d.ts

@@ -1,8 +1,29 @@
-import { FilterOp } from "@vuu-ui/vuu-filter-types";
+import { FilterClauseOp, FilterValue } from "@vuu-ui/vuu-filter-types";
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
-export type FilterValue = string | number | [string, string] | [number, number];
-export declare const assertValidValue: ({ serverDataType: _ }: ColumnDescriptor, operator: FilterOp | "between", value?: FilterValue | FilterValue[]) => void;
-export interface ColumnFilterHookProps {
+import { CommitHandler } from "@vuu-ui/vuu-utils";
+export type Operator = FilterClauseOp | "between";
+export declare const assertValidOperator: (allowedOperators: FilterClauseOp[], column: ColumnDescriptor, op: Operator) => void;
+export declare const assertValidValue: ({ serverDataType: _ }: ColumnDescriptor, operator: Operator, value?: FilterValue) => void;
+export type ColumnFilterHookProps = {
     column: ColumnDescriptor;
-    operator?: FilterOp | "between";
-}
+    operator?: Operator;
+    /**
+     * Filter value. Pair of values expected when operator is
+     * 'between'
+     */
+    value?: FilterValue;
+    /**
+     * Filter change events.
+     */
+    onFilterChange?: (value: FilterValue, column: ColumnDescriptor, op: Operator) => void;
+};
+export declare const useColumnFilter: ({ operator, value, column, onFilterChange, }: ColumnFilterHookProps) => {
+    op: "contains" | "starts" | "=" | "!=" | ">" | ">=" | "<=" | "<" | "ends" | "in" | "between";
+    allowedOperators: FilterClauseOp[];
+    filterValue: FilterValue;
+    inputProps: (Partial<import("react").InputHTMLAttributes<HTMLInputElement>> & import("@salt-ds/core").DataAttributes) | undefined;
+    rangeInputProps: (Partial<import("react").InputHTMLAttributes<HTMLInputElement>> & import("@salt-ds/core").DataAttributes) | undefined;
+    handleCommit: CommitHandler<HTMLElement>;
+    handleRangeCommit: CommitHandler<HTMLElement>;
+    handleOperatorChange: (changedOp: Operator) => void;
+};