@vuu-ui/vuu-filters 0.13.35 → 0.13.37

package/cjs/column-filter/ColumnFilter.js

@@ -18,7 +18,7 @@ const ColumnFilter = react.forwardRef(function ColumnFilter2({
   showOperatorPicker = false,
   table,
   value,
-  onFilterChange,
+  onColumnFilterChange,
   ...buttonGroupProps
 }, forwardRef2) {
   const targetWindow = window.useWindow();
@@ -40,7 +40,7 @@ const ColumnFilter = react.forwardRef(function ColumnFilter2({
     operator,
     column,
     value,
-    onFilterChange
+    onColumnFilterChange
   });
   react.useMemo(
     () => useColumnFilter.assertValidOperator(allowedOperators, column, operator),

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 { 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":";;;;;;;;;;;;AAwBA,MAAM,SAAY,GAAA,iBAAA;AAkBL,MAAA,YAAA,GAAeA,gBAAW,CAAA,SAASC,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,EACAD,WACA,EAAA;AACA,EAAA,MAAM,eAAeE,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;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,MACEC,+BAAgB,CAAA;AAAA,IAClB,QAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAAC,aAAA;AAAA,IACE,MAAMC,mCAAA,CAAoB,gBAAkB,EAAA,MAAA,EAAQ,QAAQ,CAAA;AAAA,IAC5D,CAAC,MAAQ,EAAA,QAAA,EAAU,gBAAgB;AAAA,GACrC;AAEA,EAAAD,aAAA;AAAA,IACE,MAAME,gCAAA,CAAiB,MAAQ,EAAA,EAAA,EAAI,WAAW,CAAA;AAAA,IAC9C,CAAC,MAAQ,EAAA,EAAA,EAAI,WAAW;AAAA,GAC1B;AAEA,EACE,uBAAAC,eAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAKV,EAAAA,WAAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,QACC,kBAAA,mBAAAS,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,0BACCF,cAAA,CAAAG,cAAA,EAAA,EACE,QAAiB,EAAA,gBAAA,CAAA,GAAA,CAAI,CAAC,SACrB,qBAAAH,cAAA;AAAA,YAACI,aAAA;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,QACHC,mCAAuB,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,YACJA,mCAAuB,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;;;;"}
+{"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\" | \"onColumnFilterChange\"\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    onColumnFilterChange,\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    onColumnFilterChange,\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

@@ -5,7 +5,7 @@ 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)) {
+  if (!allowedOperators.find((filterClauseOp) => filterClauseOp === op) && !(op === "between")) {
     console.warn(
       `[useColumnFilter] '${op} not supported for column ${column.name}'`
     );
@@ -34,7 +34,7 @@ const useColumnFilter = ({
   operator = "=",
   value,
   column,
-  onFilterChange
+  onColumnFilterChange
 }) => {
   const getDefaultValue = (op2) => op2 === "between" ? ["", ""] : "";
   const filterValue = react.useRef(value ?? getDefaultValue(operator));
@@ -44,10 +44,10 @@ const useColumnFilter = ({
     if (value && value !== filterValue.current) {
       filterValue.current = value;
       setTimeout(() => {
-        onFilterChange?.(value, column, op);
+        onColumnFilterChange?.(value, column, op);
       }, 100);
     }
-  }, [value, column, op, onFilterChange]);
+  }, [value, column, op, onColumnFilterChange]);
   const handleOperatorChange = react.useCallback((changedOp) => {
     setOp(changedOp);
   }, []);
@@ -55,7 +55,7 @@ const useColumnFilter = ({
     (e, newValue) => {
       console.log(`[useColumnFilter] handleCommit ${newValue}`);
       if (Array.isArray(filterValue.current)) {
-        filterValue.current = [newValue, filterValue.current[1]];
+        filterValue.current = [newValue.toString(), 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"
@@ -64,14 +64,14 @@ const useColumnFilter = ({
       } else {
         filterValue.current = newValue;
       }
-      onFilterChange?.(filterValue.current, column, op);
+      onColumnFilterChange?.(filterValue.current, column, op);
     },
-    [op, column, onFilterChange]
+    [op, column, onColumnFilterChange]
   );
   const handleRangeCommit = react.useCallback(
     (e, newValue) => {
       if (Array.isArray(filterValue.current)) {
-        filterValue.current = [filterValue.current[0], newValue];
+        filterValue.current = [filterValue.current[0], newValue.toString()];
         if (filterValue.current && (filterValue.current[0] === void 0 || filterValue.current[1] === void 0)) {
           console.info(
             "Range start or end value missing - ignoring onFilterChange"
@@ -80,26 +80,26 @@ const useColumnFilter = ({
       } else {
         filterValue.current = newValue;
       }
-      onFilterChange?.(filterValue.current, column, op);
+      onColumnFilterChange?.(filterValue.current, column, op);
     },
-    [op, column, onFilterChange]
+    [op, column, onColumnFilterChange]
   );
   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]
+          !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);
+        onColumnFilterChange?.(updated, column, op);
       } else {
         filterValue.current = e.target.value;
-        onFilterChange?.(e.target.value, column, op);
+        onColumnFilterChange?.(e.target.value, column, op);
       }
     },
-    [op, column, onFilterChange]
+    [op, column, onColumnFilterChange]
   );
   const inputProps = react.useMemo(
     () => ({

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 { 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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"}
+{"version":3,"file":"useColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/useColumnFilter.ts"],"sourcesContent":["import {\n  ColumnFilterChangeHandler,\n  ColumnFilterOp,\n  ColumnFilterValue,\n  FilterClauseOp,\n} 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 const assertValidOperator = (\n  allowedOperators: FilterClauseOp[],\n  column: ColumnDescriptor,\n  op: ColumnFilterOp,\n) => {\n  if (\n    !allowedOperators.find((filterClauseOp) => filterClauseOp === op) &&\n    !(op === \"between\")\n  ) {\n    console.warn(\n      `[useColumnFilter] '${op} not supported for column ${column.name}'`,\n    );\n  }\n};\n\nexport const assertValidValue = (\n  { serverDataType: _ }: ColumnDescriptor,\n  operator: ColumnFilterOp,\n  value?: ColumnFilterValue,\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?: ColumnFilterOp;\n  /**\n   * Filter value. Pair of values expected when operator is\n   * 'between'\n   */\n  value?: ColumnFilterValue;\n  /**\n   * Filter change events.\n   */\n  onColumnFilterChange?: ColumnFilterChangeHandler;\n};\n\nexport const useColumnFilter = ({\n  operator = \"=\",\n  value,\n  column,\n  onColumnFilterChange,\n}: ColumnFilterHookProps) => {\n  const getDefaultValue = (op: ColumnFilterOp): ColumnFilterValue =>\n    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        onColumnFilterChange?.(value, column, op);\n      }, 100);\n    }\n  }, [value, column, op, onColumnFilterChange]);\n\n  const handleOperatorChange = useCallback((changedOp: ColumnFilterOp) => {\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.toString(), 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 ColumnFilterValue;\n      }\n      onColumnFilterChange?.(filterValue.current, column, op);\n    },\n    [op, column, onColumnFilterChange],\n  );\n\n  const handleRangeCommit = useCallback<CommitHandler<HTMLElement>>(\n    (e, newValue) => {\n      if (Array.isArray(filterValue.current)) {\n        filterValue.current = [filterValue.current[0], newValue.toString()];\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 ColumnFilterValue;\n      }\n      onColumnFilterChange?.(filterValue.current, column, op);\n    },\n    [op, column, onColumnFilterChange],\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: ColumnFilterValue = [\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        onColumnFilterChange?.(updated, column, op);\n      } else {\n        filterValue.current = e.target.value;\n        onColumnFilterChange?.(e.target.value, column, op);\n      }\n    },\n    [op, column, onColumnFilterChange],\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/esm/column-filter/ColumnFilter.js

@@ -16,7 +16,7 @@ const ColumnFilter = forwardRef(function ColumnFilter2({
   showOperatorPicker = false,
   table,
   value,
-  onFilterChange,
+  onColumnFilterChange,
   ...buttonGroupProps
 }, forwardRef2) {
   const targetWindow = useWindow();
@@ -38,7 +38,7 @@ const ColumnFilter = forwardRef(function ColumnFilter2({
     operator,
     column,
     value,
-    onFilterChange
+    onColumnFilterChange
   });
   useMemo(
     () => assertValidOperator(allowedOperators, column, operator),

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 { 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":"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"}
+{"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\" | \"onColumnFilterChange\"\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    onColumnFilterChange,\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    onColumnFilterChange,\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":"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"}

package/esm/column-filter/useColumnFilter.js

@@ -3,7 +3,7 @@ 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)) {
+  if (!allowedOperators.find((filterClauseOp) => filterClauseOp === op) && !(op === "between")) {
     console.warn(
       `[useColumnFilter] '${op} not supported for column ${column.name}'`
     );
@@ -32,7 +32,7 @@ const useColumnFilter = ({
   operator = "=",
   value,
   column,
-  onFilterChange
+  onColumnFilterChange
 }) => {
   const getDefaultValue = (op2) => op2 === "between" ? ["", ""] : "";
   const filterValue = useRef(value ?? getDefaultValue(operator));
@@ -42,10 +42,10 @@ const useColumnFilter = ({
     if (value && value !== filterValue.current) {
       filterValue.current = value;
       setTimeout(() => {
-        onFilterChange?.(value, column, op);
+        onColumnFilterChange?.(value, column, op);
       }, 100);
     }
-  }, [value, column, op, onFilterChange]);
+  }, [value, column, op, onColumnFilterChange]);
   const handleOperatorChange = useCallback((changedOp) => {
     setOp(changedOp);
   }, []);
@@ -53,7 +53,7 @@ const useColumnFilter = ({
     (e, newValue) => {
       console.log(`[useColumnFilter] handleCommit ${newValue}`);
       if (Array.isArray(filterValue.current)) {
-        filterValue.current = [newValue, filterValue.current[1]];
+        filterValue.current = [newValue.toString(), 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"
@@ -62,14 +62,14 @@ const useColumnFilter = ({
       } else {
         filterValue.current = newValue;
       }
-      onFilterChange?.(filterValue.current, column, op);
+      onColumnFilterChange?.(filterValue.current, column, op);
     },
-    [op, column, onFilterChange]
+    [op, column, onColumnFilterChange]
   );
   const handleRangeCommit = useCallback(
     (e, newValue) => {
       if (Array.isArray(filterValue.current)) {
-        filterValue.current = [filterValue.current[0], newValue];
+        filterValue.current = [filterValue.current[0], newValue.toString()];
         if (filterValue.current && (filterValue.current[0] === void 0 || filterValue.current[1] === void 0)) {
           console.info(
             "Range start or end value missing - ignoring onFilterChange"
@@ -78,26 +78,26 @@ const useColumnFilter = ({
       } else {
         filterValue.current = newValue;
       }
-      onFilterChange?.(filterValue.current, column, op);
+      onColumnFilterChange?.(filterValue.current, column, op);
     },
-    [op, column, onFilterChange]
+    [op, column, onColumnFilterChange]
   );
   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]
+          !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);
+        onColumnFilterChange?.(updated, column, op);
       } else {
         filterValue.current = e.target.value;
-        onFilterChange?.(e.target.value, column, op);
+        onColumnFilterChange?.(e.target.value, column, op);
       }
     },
-    [op, column, onFilterChange]
+    [op, column, onColumnFilterChange]
   );
   const inputProps = useMemo(
     () => ({

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 { 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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"}
+{"version":3,"file":"useColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/useColumnFilter.ts"],"sourcesContent":["import {\n  ColumnFilterChangeHandler,\n  ColumnFilterOp,\n  ColumnFilterValue,\n  FilterClauseOp,\n} 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 const assertValidOperator = (\n  allowedOperators: FilterClauseOp[],\n  column: ColumnDescriptor,\n  op: ColumnFilterOp,\n) => {\n  if (\n    !allowedOperators.find((filterClauseOp) => filterClauseOp === op) &&\n    !(op === \"between\")\n  ) {\n    console.warn(\n      `[useColumnFilter] '${op} not supported for column ${column.name}'`,\n    );\n  }\n};\n\nexport const assertValidValue = (\n  { serverDataType: _ }: ColumnDescriptor,\n  operator: ColumnFilterOp,\n  value?: ColumnFilterValue,\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?: ColumnFilterOp;\n  /**\n   * Filter value. Pair of values expected when operator is\n   * 'between'\n   */\n  value?: ColumnFilterValue;\n  /**\n   * Filter change events.\n   */\n  onColumnFilterChange?: ColumnFilterChangeHandler;\n};\n\nexport const useColumnFilter = ({\n  operator = \"=\",\n  value,\n  column,\n  onColumnFilterChange,\n}: ColumnFilterHookProps) => {\n  const getDefaultValue = (op: ColumnFilterOp): ColumnFilterValue =>\n    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        onColumnFilterChange?.(value, column, op);\n      }, 100);\n    }\n  }, [value, column, op, onColumnFilterChange]);\n\n  const handleOperatorChange = useCallback((changedOp: ColumnFilterOp) => {\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.toString(), 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 ColumnFilterValue;\n      }\n      onColumnFilterChange?.(filterValue.current, column, op);\n    },\n    [op, column, onColumnFilterChange],\n  );\n\n  const handleRangeCommit = useCallback<CommitHandler<HTMLElement>>(\n    (e, newValue) => {\n      if (Array.isArray(filterValue.current)) {\n        filterValue.current = [filterValue.current[0], newValue.toString()];\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 ColumnFilterValue;\n      }\n      onColumnFilterChange?.(filterValue.current, column, op);\n    },\n    [op, column, onColumnFilterChange],\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: ColumnFilterValue = [\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        onColumnFilterChange?.(updated, column, op);\n      } else {\n        filterValue.current = e.target.value;\n        onColumnFilterChange?.(e.target.value, column, op);\n      }\n    },\n    [op, column, onColumnFilterChange],\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/package.json

@@ -1,21 +1,21 @@
 {
-  "version": "0.13.35",
+  "version": "0.13.37",
   "author": "heswell",
   "license": "Apache-2.0",
   "type": "module",
   "devDependencies": {
-    "@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"
+    "@vuu-ui/vuu-data-types": "0.13.37",
+    "@vuu-ui/vuu-protocol-types": "0.13.37",
+    "@vuu-ui/vuu-table-types": "0.13.37",
+    "@vuu-ui/vuu-filter-types": "0.13.37"
   },
   "dependencies": {
-    "@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",
+    "@vuu-ui/vuu-data-react": "0.13.37",
+    "@vuu-ui/vuu-filter-parser": "0.13.37",
+    "@vuu-ui/vuu-popups": "0.13.37",
+    "@vuu-ui/vuu-ui-controls": "0.13.37",
+    "@vuu-ui/vuu-table": "0.13.37",
+    "@vuu-ui/vuu-utils": "0.13.37",
     "@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

@@ -2,7 +2,7 @@ import { SegmentedButtonGroupProps } from "@salt-ds/core";
 import { ForwardedRef, ReactElement } from "react";
 import { ColumnFilterHookProps } from "./useColumnFilter";
 import { VuuTable } from "@vuu-ui/vuu-protocol-types";
-export interface ColumnFilterProps extends SegmentedButtonGroupProps, Pick<ColumnFilterHookProps, "column" | "operator" | "value" | "onFilterChange"> {
+export interface ColumnFilterProps extends SegmentedButtonGroupProps, Pick<ColumnFilterHookProps, "column" | "operator" | "value" | "onColumnFilterChange"> {
     /**
      * Display operator picker.
      */

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

@@ -1,29 +1,28 @@
-import { FilterClauseOp, FilterValue } from "@vuu-ui/vuu-filter-types";
+import { ColumnFilterChangeHandler, ColumnFilterOp, ColumnFilterValue, FilterClauseOp } from "@vuu-ui/vuu-filter-types";
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 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 declare const assertValidOperator: (allowedOperators: FilterClauseOp[], column: ColumnDescriptor, op: ColumnFilterOp) => void;
+export declare const assertValidValue: ({ serverDataType: _ }: ColumnDescriptor, operator: ColumnFilterOp, value?: ColumnFilterValue) => void;
 export type ColumnFilterHookProps = {
     column: ColumnDescriptor;
-    operator?: Operator;
+    operator?: ColumnFilterOp;
     /**
      * Filter value. Pair of values expected when operator is
      * 'between'
      */
-    value?: FilterValue;
+    value?: ColumnFilterValue;
     /**
      * Filter change events.
      */
-    onFilterChange?: (value: FilterValue, column: ColumnDescriptor, op: Operator) => void;
+    onColumnFilterChange?: ColumnFilterChangeHandler;
 };
-export declare const useColumnFilter: ({ operator, value, column, onFilterChange, }: ColumnFilterHookProps) => {
+export declare const useColumnFilter: ({ operator, value, column, onColumnFilterChange, }: ColumnFilterHookProps) => {
     op: "contains" | "starts" | "=" | "!=" | ">" | ">=" | "<=" | "<" | "ends" | "in" | "between";
     allowedOperators: FilterClauseOp[];
-    filterValue: FilterValue;
+    filterValue: ColumnFilterValue;
     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;
+    handleOperatorChange: (changedOp: ColumnFilterOp) => void;
 };