@vuu-ui/vuu-filters 0.13.37 → 0.13.38

package/cjs/column-filter/ColumnFilter.js

@@ -14,6 +14,7 @@ const classBase = "vuuColumnFilter";
 const ColumnFilter = react.forwardRef(function ColumnFilter2({
   column,
   className,
+  onCommit: onCommitProp,
   operator = "=",
   showOperatorPicker = false,
   table,
@@ -30,26 +31,18 @@ const ColumnFilter = react.forwardRef(function ColumnFilter2({
   const {
     op,
     allowedOperators,
-    filterValue,
     inputProps,
     rangeInputProps,
     handleOperatorChange,
-    handleCommit,
-    handleRangeCommit
+    onCommit,
+    onCommitRange
   } = useColumnFilter.useColumnFilter({
+    onCommit: onCommitProp,
     operator,
     column,
     value,
     onColumnFilterChange
   });
-  react.useMemo(
-    () => useColumnFilter.assertValidOperator(allowedOperators, column, operator),
-    [column, operator, allowedOperators]
-  );
-  react.useMemo(
-    () => useColumnFilter.assertValidValue(column, op, filterValue),
-    [column, op, filterValue]
-  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     core.SegmentedButtonGroup,
     {
@@ -80,15 +73,18 @@ const ColumnFilter = react.forwardRef(function ColumnFilter2({
         ] }) : null,
         vuuDataReact.getDataItemEditControl({
           InputProps: { inputProps },
+          commitOnBlur: false,
+          commitWhenCleared: true,
           dataDescriptor: column,
-          onCommit: handleCommit,
+          onCommit,
           table
         }),
         op === "between" ? vuuDataReact.getDataItemEditControl({
           className: `${classBase}-rangeHigh`,
+          commitWhenCleared: true,
           InputProps: { inputProps: rangeInputProps },
           dataDescriptor: column,
-          onCommit: handleRangeCommit,
+          onCommit: onCommitRange,
           table
         }) : null
       ]

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\" | \"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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"}
+{"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 } from \"react\";\nimport { ColumnFilterHookProps, useColumnFilter } from \"./useColumnFilter\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nconst classBase = \"vuuColumnFilter\";\n\nexport interface ColumnFilterProps\n  extends SegmentedButtonGroupProps,\n    ColumnFilterHookProps {\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    onCommit: onCommitProp,\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    inputProps,\n    rangeInputProps,\n    handleOperatorChange,\n    onCommit,\n    onCommitRange,\n  } = useColumnFilter({\n    onCommit: onCommitProp,\n    operator,\n    column,\n    value,\n    onColumnFilterChange,\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        commitOnBlur: false,\n        commitWhenCleared: true,\n        dataDescriptor: column,\n        onCommit,\n        table,\n      })}\n      {op === \"between\"\n        ? getDataItemEditControl({\n            className: `${classBase}-rangeHigh`,\n            commitWhenCleared: true,\n            InputProps: { inputProps: rangeInputProps },\n            dataDescriptor: column,\n            onCommit: onCommitRange,\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","jsxs","SegmentedButtonGroup","Menu","jsx","MenuTrigger","Button","MenuPanel","MenuItem","getDataItemEditControl"],"mappings":";;;;;;;;;;;;AAmBA,MAAM,SAAY,GAAA,iBAAA;AAeL,MAAA,YAAA,GAAeA,gBAAW,CAAA,SAASC,aAC9C,CAAA;AAAA,EACE,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,QAAW,GAAA,GAAA;AAAA,EACX,kBAAqB,GAAA,KAAA;AAAA,EACrB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,oBAAA;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,UAAA;AAAA,IACA,eAAA;AAAA,IACA,oBAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,MACEC,+BAAgB,CAAA;AAAA,IAClB,QAAU,EAAA,YAAA;AAAA,IACV,QAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAAC,eAAA;AAAA,IAACC,yBAAA;AAAA,IAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAKP,EAAAA,WAAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,QACC,kBAAA,mBAAAM,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,YAAc,EAAA,KAAA;AAAA,UACd,iBAAmB,EAAA,IAAA;AAAA,UACnB,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAA;AAAA,UACA;AAAA,SACD,CAAA;AAAA,QACA,EAAA,KAAO,YACJA,mCAAuB,CAAA;AAAA,UACrB,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,UACvB,iBAAmB,EAAA,IAAA;AAAA,UACnB,UAAA,EAAY,EAAE,UAAA,EAAY,eAAgB,EAAA;AAAA,UAC1C,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAU,EAAA,aAAA;AAAA,UACV;AAAA,SACD,CACD,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}

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) && !(op === "between")) {
+  if (op !== "between" && !allowedOperators.includes(op)) {
     console.warn(
       `[useColumnFilter] '${op} not supported for column ${column.name}'`
     );
@@ -14,15 +14,11 @@ const assertValidOperator = (allowedOperators, column, op) => {
 const assertValidValue = ({ serverDataType: _ }, operator, value) => {
   if (value !== void 0) {
     if (operator === "between") {
-      if (!Array.isArray(value)) {
+      if (!Array.isArray(value) || value.length !== 2) {
         throw Error(
-          "[useColumnFilter] 'between operator requires array of two values'"
+          `[useColumnFilter] between operator requires array of two values, received ${value}`
         );
-      } else if (value.length !== 2) {
-        throw Error(
-          `[useColumnFilter] 'between operator requires two values, received ${value}'`
-        );
-      } else if (value[0] && value[1] && typeof value[0] !== typeof value[1]) {
+      } else if (value[0] !== void 0 && value[1] !== void 0 && 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]}`
         );
@@ -31,98 +27,74 @@ const assertValidValue = ({ serverDataType: _ }, operator, value) => {
   }
 };
 const useColumnFilter = ({
+  onCommit,
   operator = "=",
   value,
   column,
   onColumnFilterChange
 }) => {
-  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(() => {
-        onColumnFilterChange?.(value, column, op);
-      }, 100);
-    }
-  }, [value, column, op, onColumnFilterChange]);
+    assertValidOperator(allowedOperators, column, operator);
+    assertValidValue(column, op, value);
+  }, [allowedOperators, column, operator, op, value]);
   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.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"
-          );
-        }
+    (_e, newValue) => {
+      if (Array.isArray(value)) {
+        onCommit?.(column, op, [`${newValue}`, value[1]]);
       } else {
-        filterValue.current = newValue;
+        onCommit?.(column, op, `${newValue}`);
       }
-      onColumnFilterChange?.(filterValue.current, column, op);
     },
-    [op, column, onColumnFilterChange]
+    [value, onCommit, column, op]
   );
   const handleRangeCommit = react.useCallback(
-    (e, newValue) => {
-      if (Array.isArray(filterValue.current)) {
-        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"
-          );
-        }
-      } else {
-        filterValue.current = newValue;
-      }
-      onColumnFilterChange?.(filterValue.current, column, op);
+    (_e, newValue) => {
+      const [firstValue] = value;
+      onCommit?.(column, op, [firstValue, `${newValue}`]);
     },
-    [op, column, onColumnFilterChange]
+    [onCommit, column, op, value]
   );
   const handleInputChange = react.useCallback(
     (e) => {
-      if (Array.isArray(filterValue.current)) {
+      if (Array.isArray(value)) {
         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 : value[0],
+          editControl.className?.includes("rangeHigh") ? e.target.value : value[1]
         ];
-        filterValue.current = updated;
         onColumnFilterChange?.(updated, column, op);
       } else {
-        filterValue.current = e.target.value;
         onColumnFilterChange?.(e.target.value, column, op);
       }
     },
-    [op, column, onColumnFilterChange]
+    [value, onColumnFilterChange, column, op]
   );
   const inputProps = react.useMemo(
     () => ({
       onChange: handleInputChange,
-      value: Array.isArray(filterValue.current) ? filterValue.current[0] : filterValue.current
+      value: Array.isArray(value) ? value[0] : value
     }),
-    [handleInputChange]
+    [handleInputChange, value]
   );
   const rangeInputProps = react.useMemo(
-    () => ({
+    () => Array.isArray(value) ? {
       onChange: handleInputChange,
-      value: Array.isArray(filterValue.current) ? filterValue.current[1] : filterValue.current
-    }),
-    [handleInputChange]
+      value: value[1]
+    } : void 0,
+    [handleInputChange, value]
   );
   return {
     op,
     allowedOperators,
-    filterValue: filterValue.current,
     inputProps,
     rangeInputProps,
-    handleCommit,
-    handleRangeCommit,
+    onCommit: handleCommit,
+    onCommitRange: handleRangeCommit,
     handleOperatorChange
   };
 };

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 {\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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"}
+{"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 { ChangeEventHandler, useCallback, useMemo, useState } 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 (op !== \"between\" && !allowedOperators.includes(op)) {\n    console.warn(\n      `[useColumnFilter] '${op} not supported for column ${column.name}'`,\n    );\n  }\n};\n\nexport type ColumnFilterCommitHandler = (\n  column: ColumnDescriptor,\n  op: FilterClauseOp | \"between\",\n  value: ColumnFilterValue,\n) => void;\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) || value.length !== 2) {\n        throw Error(\n          `[useColumnFilter] between operator requires array of two values, received ${value}`,\n        );\n      } else if (\n        value[0] !== undefined &&\n        value[1] !== undefined &&\n        typeof value[0] !== typeof value[1]\n      ) {\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   * Called when user 'commits' filter value, either by pressing enter,\n   * tabbing away from control or making selection from list\n   */\n  onCommit: ColumnFilterCommitHandler;\n};\n\nexport const useColumnFilter = ({\n  onCommit,\n  operator = \"=\",\n  value,\n  column,\n  onColumnFilterChange,\n}: ColumnFilterHookProps) => {\n  const [op, setOp] = useState(operator);\n  const allowedOperators = useMemo(() => getOperators(column), [column]);\n\n  useMemo(() => {\n    assertValidOperator(allowedOperators, column, operator);\n    assertValidValue(column, op, value);\n  }, [allowedOperators, column, operator, op, value]);\n\n  const handleOperatorChange = useCallback((changedOp: ColumnFilterOp) => {\n    setOp(changedOp);\n  }, []);\n\n  const handleCommit = useCallback<CommitHandler<HTMLElement>>(\n    (_e, newValue) => {\n      if (Array.isArray(value)) {\n        onCommit?.(column, op, [`${newValue}`, value[1]]);\n      } else {\n        onCommit?.(column, op, `${newValue}`);\n      }\n    },\n    [value, onCommit, column, op],\n  );\n\n  const handleRangeCommit = useCallback<CommitHandler<HTMLElement>>(\n    (_e, newValue) => {\n      const [firstValue] = value as [string, string];\n      onCommit?.(column, op, [firstValue, `${newValue}`]);\n    },\n    [onCommit, column, op, value],\n  );\n\n  const handleInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      if (Array.isArray(value)) {\n        const editControl = queryClosest(e.target, \"[data-edit-control]\", true);\n        const updated: ColumnFilterValue = [\n          !editControl.className.includes(\"rangeHigh\")\n            ? e.target.value\n            : value[0],\n          editControl.className?.includes(\"rangeHigh\")\n            ? e.target.value\n            : value[1],\n        ];\n        onColumnFilterChange?.(updated, column, op);\n      } else {\n        onColumnFilterChange?.(e.target.value, column, op);\n      }\n    },\n    [value, onColumnFilterChange, column, op],\n  );\n\n  const inputProps = useMemo<VuuTypeaheadInputProps[\"inputProps\"]>(\n    () => ({\n      onChange: handleInputChange,\n      value: Array.isArray(value) ? value[0] : value,\n    }),\n    [handleInputChange, value],\n  );\n\n  const rangeInputProps = useMemo<VuuTypeaheadInputProps[\"inputProps\"]>(\n    () =>\n      Array.isArray(value)\n        ? {\n            onChange: handleInputChange,\n            value: value[1],\n          }\n        : undefined,\n    [handleInputChange, value],\n  );\n\n  return {\n    op,\n    allowedOperators,\n    inputProps,\n    rangeInputProps,\n    onCommit: handleCommit,\n    onCommitRange: handleRangeCommit,\n    handleOperatorChange,\n  };\n};\n"],"names":["useState","useMemo","getOperators","useCallback","queryClosest"],"mappings":"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"}

package/cjs/index.js

@@ -14,7 +14,6 @@ var filterUtils = require('./filter-utils.js');
 var FilterModel = require('./FilterModel.js');
 var InlineFilter = require('./inline-filter/InlineFilter.js');
 var QuickFilters = require('./quick-filters/QuickFilters.js');
-var BasicColumnFilter = require('./basic-column-filter/BasicColumnFilter.js');
 var SavedFilterPanel = require('./saved-filters/SavedFilterPanel.js');
 var FilterNamePrompt = require('./saved-filters/FilterNamePrompt.js');
 
@@ -56,7 +55,6 @@ exports.FilterClauseModel = FilterModel.FilterClauseModel;
 exports.FilterModel = FilterModel.FilterModel;
 exports.InlineFilter = InlineFilter.InlineFilter;
 exports.QuickFilters = QuickFilters.QuickFilters;
-exports.BasicColumnFilter = BasicColumnFilter.BasicColumnFilter;
 exports.SavedFilterPanel = SavedFilterPanel.SavedFilterPanel;
 exports.SaveFilterConfirmPrompt = FilterNamePrompt.FilterNamePrompt;
 //# sourceMappingURL=index.js.map

package/cjs/index.js.map

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

package/esm/column-filter/ColumnFilter.js

@@ -5,13 +5,14 @@ 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 { forwardRef, useMemo } from 'react';
-import { useColumnFilter, assertValidOperator, assertValidValue } from './useColumnFilter.js';
+import { forwardRef } from 'react';
+import { useColumnFilter } from './useColumnFilter.js';
 
 const classBase = "vuuColumnFilter";
 const ColumnFilter = forwardRef(function ColumnFilter2({
   column,
   className,
+  onCommit: onCommitProp,
   operator = "=",
   showOperatorPicker = false,
   table,
@@ -28,26 +29,18 @@ const ColumnFilter = forwardRef(function ColumnFilter2({
   const {
     op,
     allowedOperators,
-    filterValue,
     inputProps,
     rangeInputProps,
     handleOperatorChange,
-    handleCommit,
-    handleRangeCommit
+    onCommit,
+    onCommitRange
   } = useColumnFilter({
+    onCommit: onCommitProp,
     operator,
     column,
     value,
     onColumnFilterChange
   });
-  useMemo(
-    () => assertValidOperator(allowedOperators, column, operator),
-    [column, operator, allowedOperators]
-  );
-  useMemo(
-    () => assertValidValue(column, op, filterValue),
-    [column, op, filterValue]
-  );
   return /* @__PURE__ */ jsxs(
     SegmentedButtonGroup,
     {
@@ -78,15 +71,18 @@ const ColumnFilter = forwardRef(function ColumnFilter2({
         ] }) : null,
         getDataItemEditControl({
           InputProps: { inputProps },
+          commitOnBlur: false,
+          commitWhenCleared: true,
           dataDescriptor: column,
-          onCommit: handleCommit,
+          onCommit,
           table
         }),
         op === "between" ? getDataItemEditControl({
           className: `${classBase}-rangeHigh`,
+          commitWhenCleared: true,
           InputProps: { inputProps: rangeInputProps },
           dataDescriptor: column,
-          onCommit: handleRangeCommit,
+          onCommit: onCommitRange,
           table
         }) : null
       ]

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\" | \"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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"}
+{"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 } from \"react\";\nimport { ColumnFilterHookProps, useColumnFilter } from \"./useColumnFilter\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\n\nconst classBase = \"vuuColumnFilter\";\n\nexport interface ColumnFilterProps\n  extends SegmentedButtonGroupProps,\n    ColumnFilterHookProps {\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    onCommit: onCommitProp,\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    inputProps,\n    rangeInputProps,\n    handleOperatorChange,\n    onCommit,\n    onCommitRange,\n  } = useColumnFilter({\n    onCommit: onCommitProp,\n    operator,\n    column,\n    value,\n    onColumnFilterChange,\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        commitOnBlur: false,\n        commitWhenCleared: true,\n        dataDescriptor: column,\n        onCommit,\n        table,\n      })}\n      {op === \"between\"\n        ? getDataItemEditControl({\n            className: `${classBase}-rangeHigh`,\n            commitWhenCleared: true,\n            InputProps: { inputProps: rangeInputProps },\n            dataDescriptor: column,\n            onCommit: onCommitRange,\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":";;;;;;;;;;AAmBA,MAAM,SAAY,GAAA,iBAAA;AAeL,MAAA,YAAA,GAAe,UAAW,CAAA,SAASA,aAC9C,CAAA;AAAA,EACE,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,QAAW,GAAA,GAAA;AAAA,EACX,kBAAqB,GAAA,KAAA;AAAA,EACrB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,oBAAA;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,UAAA;AAAA,IACA,eAAA;AAAA,IACA,oBAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,MACE,eAAgB,CAAA;AAAA,IAClB,QAAU,EAAA,YAAA;AAAA,IACV,QAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,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,YAAc,EAAA,KAAA;AAAA,UACd,iBAAmB,EAAA,IAAA;AAAA,UACnB,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAA;AAAA,UACA;AAAA,SACD,CAAA;AAAA,QACA,EAAA,KAAO,YACJ,sBAAuB,CAAA;AAAA,UACrB,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,UACvB,iBAAmB,EAAA,IAAA;AAAA,UACnB,UAAA,EAAY,EAAE,UAAA,EAAY,eAAgB,EAAA;AAAA,UAC1C,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAU,EAAA,aAAA;AAAA,UACV;AAAA,SACD,CACD,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}

package/esm/column-filter/useColumnFilter.js

@@ -1,9 +1,9 @@
-import { useRef, useState, useMemo, useCallback } from 'react';
+import { 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) && !(op === "between")) {
+  if (op !== "between" && !allowedOperators.includes(op)) {
     console.warn(
       `[useColumnFilter] '${op} not supported for column ${column.name}'`
     );
@@ -12,15 +12,11 @@ const assertValidOperator = (allowedOperators, column, op) => {
 const assertValidValue = ({ serverDataType: _ }, operator, value) => {
   if (value !== void 0) {
     if (operator === "between") {
-      if (!Array.isArray(value)) {
+      if (!Array.isArray(value) || value.length !== 2) {
         throw Error(
-          "[useColumnFilter] 'between operator requires array of two values'"
+          `[useColumnFilter] between operator requires array of two values, received ${value}`
         );
-      } else if (value.length !== 2) {
-        throw Error(
-          `[useColumnFilter] 'between operator requires two values, received ${value}'`
-        );
-      } else if (value[0] && value[1] && typeof value[0] !== typeof value[1]) {
+      } else if (value[0] !== void 0 && value[1] !== void 0 && 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]}`
         );
@@ -29,98 +25,74 @@ const assertValidValue = ({ serverDataType: _ }, operator, value) => {
   }
 };
 const useColumnFilter = ({
+  onCommit,
   operator = "=",
   value,
   column,
   onColumnFilterChange
 }) => {
-  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(() => {
-        onColumnFilterChange?.(value, column, op);
-      }, 100);
-    }
-  }, [value, column, op, onColumnFilterChange]);
+    assertValidOperator(allowedOperators, column, operator);
+    assertValidValue(column, op, value);
+  }, [allowedOperators, column, operator, op, value]);
   const handleOperatorChange = useCallback((changedOp) => {
     setOp(changedOp);
   }, []);
   const handleCommit = useCallback(
-    (e, newValue) => {
-      console.log(`[useColumnFilter] handleCommit ${newValue}`);
-      if (Array.isArray(filterValue.current)) {
-        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"
-          );
-        }
+    (_e, newValue) => {
+      if (Array.isArray(value)) {
+        onCommit?.(column, op, [`${newValue}`, value[1]]);
       } else {
-        filterValue.current = newValue;
+        onCommit?.(column, op, `${newValue}`);
       }
-      onColumnFilterChange?.(filterValue.current, column, op);
     },
-    [op, column, onColumnFilterChange]
+    [value, onCommit, column, op]
   );
   const handleRangeCommit = useCallback(
-    (e, newValue) => {
-      if (Array.isArray(filterValue.current)) {
-        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"
-          );
-        }
-      } else {
-        filterValue.current = newValue;
-      }
-      onColumnFilterChange?.(filterValue.current, column, op);
+    (_e, newValue) => {
+      const [firstValue] = value;
+      onCommit?.(column, op, [firstValue, `${newValue}`]);
     },
-    [op, column, onColumnFilterChange]
+    [onCommit, column, op, value]
   );
   const handleInputChange = useCallback(
     (e) => {
-      if (Array.isArray(filterValue.current)) {
+      if (Array.isArray(value)) {
         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 : value[0],
+          editControl.className?.includes("rangeHigh") ? e.target.value : value[1]
         ];
-        filterValue.current = updated;
         onColumnFilterChange?.(updated, column, op);
       } else {
-        filterValue.current = e.target.value;
         onColumnFilterChange?.(e.target.value, column, op);
       }
     },
-    [op, column, onColumnFilterChange]
+    [value, onColumnFilterChange, column, op]
   );
   const inputProps = useMemo(
     () => ({
       onChange: handleInputChange,
-      value: Array.isArray(filterValue.current) ? filterValue.current[0] : filterValue.current
+      value: Array.isArray(value) ? value[0] : value
     }),
-    [handleInputChange]
+    [handleInputChange, value]
   );
   const rangeInputProps = useMemo(
-    () => ({
+    () => Array.isArray(value) ? {
       onChange: handleInputChange,
-      value: Array.isArray(filterValue.current) ? filterValue.current[1] : filterValue.current
-    }),
-    [handleInputChange]
+      value: value[1]
+    } : void 0,
+    [handleInputChange, value]
   );
   return {
     op,
     allowedOperators,
-    filterValue: filterValue.current,
     inputProps,
     rangeInputProps,
-    handleCommit,
-    handleRangeCommit,
+    onCommit: handleCommit,
+    onCommitRange: handleRangeCommit,
     handleOperatorChange
   };
 };

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 {\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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"}
+{"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 { ChangeEventHandler, useCallback, useMemo, useState } 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 (op !== \"between\" && !allowedOperators.includes(op)) {\n    console.warn(\n      `[useColumnFilter] '${op} not supported for column ${column.name}'`,\n    );\n  }\n};\n\nexport type ColumnFilterCommitHandler = (\n  column: ColumnDescriptor,\n  op: FilterClauseOp | \"between\",\n  value: ColumnFilterValue,\n) => void;\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) || value.length !== 2) {\n        throw Error(\n          `[useColumnFilter] between operator requires array of two values, received ${value}`,\n        );\n      } else if (\n        value[0] !== undefined &&\n        value[1] !== undefined &&\n        typeof value[0] !== typeof value[1]\n      ) {\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   * Called when user 'commits' filter value, either by pressing enter,\n   * tabbing away from control or making selection from list\n   */\n  onCommit: ColumnFilterCommitHandler;\n};\n\nexport const useColumnFilter = ({\n  onCommit,\n  operator = \"=\",\n  value,\n  column,\n  onColumnFilterChange,\n}: ColumnFilterHookProps) => {\n  const [op, setOp] = useState(operator);\n  const allowedOperators = useMemo(() => getOperators(column), [column]);\n\n  useMemo(() => {\n    assertValidOperator(allowedOperators, column, operator);\n    assertValidValue(column, op, value);\n  }, [allowedOperators, column, operator, op, value]);\n\n  const handleOperatorChange = useCallback((changedOp: ColumnFilterOp) => {\n    setOp(changedOp);\n  }, []);\n\n  const handleCommit = useCallback<CommitHandler<HTMLElement>>(\n    (_e, newValue) => {\n      if (Array.isArray(value)) {\n        onCommit?.(column, op, [`${newValue}`, value[1]]);\n      } else {\n        onCommit?.(column, op, `${newValue}`);\n      }\n    },\n    [value, onCommit, column, op],\n  );\n\n  const handleRangeCommit = useCallback<CommitHandler<HTMLElement>>(\n    (_e, newValue) => {\n      const [firstValue] = value as [string, string];\n      onCommit?.(column, op, [firstValue, `${newValue}`]);\n    },\n    [onCommit, column, op, value],\n  );\n\n  const handleInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      if (Array.isArray(value)) {\n        const editControl = queryClosest(e.target, \"[data-edit-control]\", true);\n        const updated: ColumnFilterValue = [\n          !editControl.className.includes(\"rangeHigh\")\n            ? e.target.value\n            : value[0],\n          editControl.className?.includes(\"rangeHigh\")\n            ? e.target.value\n            : value[1],\n        ];\n        onColumnFilterChange?.(updated, column, op);\n      } else {\n        onColumnFilterChange?.(e.target.value, column, op);\n      }\n    },\n    [value, onColumnFilterChange, column, op],\n  );\n\n  const inputProps = useMemo<VuuTypeaheadInputProps[\"inputProps\"]>(\n    () => ({\n      onChange: handleInputChange,\n      value: Array.isArray(value) ? value[0] : value,\n    }),\n    [handleInputChange, value],\n  );\n\n  const rangeInputProps = useMemo<VuuTypeaheadInputProps[\"inputProps\"]>(\n    () =>\n      Array.isArray(value)\n        ? {\n            onChange: handleInputChange,\n            value: value[1],\n          }\n        : undefined,\n    [handleInputChange, value],\n  );\n\n  return {\n    op,\n    allowedOperators,\n    inputProps,\n    rangeInputProps,\n    onCommit: handleCommit,\n    onCommitRange: handleRangeCommit,\n    handleOperatorChange,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/index.js

@@ -12,7 +12,6 @@ export { AND, ENDS_WITH, EQUALS, GREATER_THAN, IN, LESS_THAN, OR, STARTS_WITH, a
 export { FilterClauseModel, FilterModel } from './FilterModel.js';
 export { InlineFilter } from './inline-filter/InlineFilter.js';
 export { QuickFilters } from './quick-filters/QuickFilters.js';
-export { BasicColumnFilter } from './basic-column-filter/BasicColumnFilter.js';
 export { SavedFilterPanel } from './saved-filters/SavedFilterPanel.js';
 export { FilterNamePrompt as SaveFilterConfirmPrompt } from './saved-filters/FilterNamePrompt.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

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

package/package.json

@@ -1,21 +1,21 @@
 {
-  "version": "0.13.37",
+  "version": "0.13.38",
   "author": "heswell",
   "license": "Apache-2.0",
   "type": "module",
   "devDependencies": {
-    "@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"
+    "@vuu-ui/vuu-data-types": "0.13.38",
+    "@vuu-ui/vuu-protocol-types": "0.13.38",
+    "@vuu-ui/vuu-table-types": "0.13.38",
+    "@vuu-ui/vuu-filter-types": "0.13.38"
   },
   "dependencies": {
-    "@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",
+    "@vuu-ui/vuu-data-react": "0.13.38",
+    "@vuu-ui/vuu-filter-parser": "0.13.38",
+    "@vuu-ui/vuu-popups": "0.13.38",
+    "@vuu-ui/vuu-ui-controls": "0.13.38",
+    "@vuu-ui/vuu-table": "0.13.38",
+    "@vuu-ui/vuu-utils": "0.13.38",
     "@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" | "onColumnFilterChange"> {
+export interface ColumnFilterProps extends SegmentedButtonGroupProps, ColumnFilterHookProps {
     /**
      * Display operator picker.
      */

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

@@ -2,6 +2,7 @@ import { ColumnFilterChangeHandler, ColumnFilterOp, ColumnFilterValue, FilterCla
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { CommitHandler } from "@vuu-ui/vuu-utils";
 export declare const assertValidOperator: (allowedOperators: FilterClauseOp[], column: ColumnDescriptor, op: ColumnFilterOp) => void;
+export type ColumnFilterCommitHandler = (column: ColumnDescriptor, op: FilterClauseOp | "between", value: ColumnFilterValue) => void;
 export declare const assertValidValue: ({ serverDataType: _ }: ColumnDescriptor, operator: ColumnFilterOp, value?: ColumnFilterValue) => void;
 export type ColumnFilterHookProps = {
     column: ColumnDescriptor;
@@ -15,14 +16,18 @@ export type ColumnFilterHookProps = {
      * Filter change events.
      */
     onColumnFilterChange?: ColumnFilterChangeHandler;
+    /**
+     * Called when user 'commits' filter value, either by pressing enter,
+     * tabbing away from control or making selection from list
+     */
+    onCommit: ColumnFilterCommitHandler;
 };
-export declare const useColumnFilter: ({ operator, value, column, onColumnFilterChange, }: ColumnFilterHookProps) => {
+export declare const useColumnFilter: ({ onCommit, operator, value, column, onColumnFilterChange, }: ColumnFilterHookProps) => {
     op: "contains" | "starts" | "=" | "!=" | ">" | ">=" | "<=" | "<" | "ends" | "in" | "between";
     allowedOperators: FilterClauseOp[];
-    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>;
+    onCommit: CommitHandler<HTMLElement>;
+    onCommitRange: CommitHandler<HTMLElement>;
     handleOperatorChange: (changedOp: ColumnFilterOp) => void;
 };

package/types/index.d.ts

@@ -10,7 +10,6 @@ export * from "./filter-utils";
 export * from "./FilterModel";
 export * from "./inline-filter";
 export * from "./quick-filters";
-export { BasicColumnFilter, type BasicColumnFilterProps, } from "./basic-column-filter/BasicColumnFilter";
 export { SavedFilterPanel } from "./saved-filters/SavedFilterPanel";
 export type { FilterClickHandler, FilterDescriptor, } from "./saved-filters/useSavedFilterPanel";
 export { FilterNamePrompt as SaveFilterConfirmPrompt, type FilterNamePromptProps as SaveFilterConfirmPromptProps, } from "./saved-filters/FilterNamePrompt";

package/cjs/basic-column-filter/BasicColumnFilter.css.js

@@ -1,6 +0,0 @@
-'use strict';
-
-var basicColumnFilterCss = ".vuuBasicColumnFilter {\n  border: solid 1px var(--salt-editable-borderColor);\n  border-radius: 4px;\n  max-width: 210px;\n\n  .vuuBasicColumnFilter-edit-control {\n    display: flex;\n  }\n}\n";
-
-module.exports = basicColumnFilterCss;
-//# sourceMappingURL=BasicColumnFilter.css.js.map

package/cjs/basic-column-filter/BasicColumnFilter.css.js.map

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

package/cjs/basic-column-filter/BasicColumnFilter.js

@@ -1,61 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('@salt-ds/styles');
-var window = require('@salt-ds/window');
-var cx = require('clsx');
-var vuuDataReact = require('@vuu-ui/vuu-data-react');
-var react = require('react');
-var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
-var useBasicColumnFilter = require('./useBasicColumnFilter.js');
-var BasicColumnFilter$1 = require('./BasicColumnFilter.css.js');
-
-const classBase = "vuuBasicColumnFilter";
-const searchIcon = /* @__PURE__ */ jsxRuntime.jsx(vuuUiControls.Icon, { name: "search", size: 18 });
-const BasicColumnFilter = react.forwardRef(function BasicColumnFilter2({
-  column,
-  className,
-  table,
-  initialValue,
-  onApplyFilter,
-  withStartAdornment = true,
-  ...htmlAttributes
-}, forwardRef2) {
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "vuu-basic-column-filter",
-    css: BasicColumnFilter$1,
-    window: targetWindow
-  });
-  const { filterValue, onInputChange, onCommit } = useBasicColumnFilter.useBasicColumnFilter({
-    column,
-    initialValue,
-    onApplyFilter
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ...htmlAttributes,
-      className: cx(classBase, className),
-      ref: forwardRef2,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-edit-control`, children: [
-        withStartAdornment && searchIcon,
-        vuuDataReact.getDataItemEditControl({
-          InputProps: {
-            inputProps: {
-              placeholder: "Find",
-              value: filterValue,
-              onChange: onInputChange
-            }
-          },
-          dataDescriptor: column,
-          table,
-          onCommit
-        })
-      ] })
-    }
-  );
-});
-
-exports.BasicColumnFilter = BasicColumnFilter;
-//# sourceMappingURL=BasicColumnFilter.js.map

package/cjs/basic-column-filter/BasicColumnFilter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BasicColumnFilter.js","sources":["../../../../packages/vuu-filters/src/basic-column-filter/BasicColumnFilter.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { ForwardedRef, forwardRef, HTMLAttributes, ReactElement } from \"react\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useBasicColumnFilter } from \"./useBasicColumnFilter\";\n\nimport basicColumnFilterCss from \"./BasicColumnFilter.css\";\n\nexport type FilterValue = string | number;\n\nconst classBase = \"vuuBasicColumnFilter\";\nconst searchIcon = <Icon name=\"search\" size={18} />;\n\nexport interface BasicColumnFilterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<FilterBarProps, \"onApplyFilter\"> {\n  /**\n   * Column Attributes.\n   */\n  column: ColumnDescriptor;\n  /**\n   * VuuTable is required if typeahead support is expected.\n   */\n  table?: VuuTable;\n  /**\n   * Initial filter value.\n   */\n  initialValue?: FilterValue;\n  /**\n   *Show search icon as start adornment.\n   */\n  withStartAdornment?: boolean;\n}\n\nexport const BasicColumnFilter = forwardRef(function BasicColumnFilter(\n  {\n    column,\n    className,\n    table,\n    initialValue,\n    onApplyFilter,\n    withStartAdornment = true,\n    ...htmlAttributes\n  }: BasicColumnFilterProps,\n  forwardRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-basic-column-filter\",\n    css: basicColumnFilterCss,\n    window: targetWindow,\n  });\n\n  const { filterValue, onInputChange, onCommit } = useBasicColumnFilter({\n    column,\n    initialValue,\n    onApplyFilter,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      ref={forwardRef}\n    >\n      <div className={`${classBase}-edit-control`}>\n        {withStartAdornment && searchIcon}\n        {getDataItemEditControl({\n          InputProps: {\n            inputProps: {\n              placeholder: \"Find\",\n              value: filterValue,\n              onChange: onInputChange,\n            },\n          },\n          dataDescriptor: column,\n          table,\n          onCommit,\n        })}\n      </div>\n    </div>\n  );\n}) as (\n  props: BasicColumnFilterProps & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  },\n) => ReactElement<BasicColumnFilterProps>;\n"],"names":["jsx","Icon","forwardRef","BasicColumnFilter","useWindow","useComponentCssInjection","basicColumnFilterCss","useBasicColumnFilter","jsxs","getDataItemEditControl"],"mappings":";;;;;;;;;;;;AAeA,MAAM,SAAY,GAAA,sBAAA;AAClB,MAAM,6BAAcA,cAAA,CAAAC,kBAAA,EAAA,EAAK,IAAK,EAAA,QAAA,EAAS,MAAM,EAAI,EAAA,CAAA;AAuBpC,MAAA,iBAAA,GAAoBC,gBAAW,CAAA,SAASC,kBACnD,CAAA;AAAA,EACE,MAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,kBAAqB,GAAA,IAAA;AAAA,EACrB,GAAG;AACL,CAAA,EACAD,WACA,EAAA;AACA,EAAA,MAAM,eAAeE,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,WAAA,EAAa,aAAe,EAAA,QAAA,KAAaC,yCAAqB,CAAA;AAAA,IACpE,MAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAAP,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAKE,EAAAA,WAAAA;AAAA,MAEL,QAAC,kBAAAM,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CACzB,aAAA,CAAA,EAAA,QAAA,EAAA;AAAA,QAAsB,kBAAA,IAAA,UAAA;AAAA,QACtBC,mCAAuB,CAAA;AAAA,UACtB,UAAY,EAAA;AAAA,YACV,UAAY,EAAA;AAAA,cACV,WAAa,EAAA,MAAA;AAAA,cACb,KAAO,EAAA,WAAA;AAAA,cACP,QAAU,EAAA;AAAA;AACZ,WACF;AAAA,UACA,cAAgB,EAAA,MAAA;AAAA,UAChB,KAAA;AAAA,UACA;AAAA,SACD;AAAA,OACH,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/cjs/basic-column-filter/useBasicColumnFilter.js

@@ -1,45 +0,0 @@
-'use strict';
-
-var react = require('react');
-var vuuUtils = require('@vuu-ui/vuu-utils');
-
-const filterOp = "=";
-const asDataSourceFilter = (filter) => {
-  if (filter) {
-    return {
-      filter: vuuUtils.filterAsQuery(filter),
-      filterStruct: filter
-    };
-  } else {
-    return vuuUtils.NoFilter;
-  }
-};
-const useBasicColumnFilter = ({
-  initialValue,
-  column,
-  onApplyFilter
-}) => {
-  const [filterValue, setFilterValue] = react.useState(initialValue);
-  const handleInputChange = react.useCallback(
-    (e) => {
-      setFilterValue(e.target.value);
-    },
-    []
-  );
-  const handleCommit = react.useCallback(
-    (_, value) => {
-      const filter = { column: column.name, op: filterOp, value };
-      setFilterValue((value ?? "").toString());
-      onApplyFilter?.(asDataSourceFilter(filter));
-    },
-    [column, onApplyFilter]
-  );
-  return {
-    filterValue: filterValue ?? "",
-    onInputChange: handleInputChange,
-    onCommit: handleCommit
-  };
-};
-
-exports.useBasicColumnFilter = useBasicColumnFilter;
-//# sourceMappingURL=useBasicColumnFilter.js.map

package/cjs/basic-column-filter/useBasicColumnFilter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useBasicColumnFilter.js","sources":["../../../../packages/vuu-filters/src/basic-column-filter/useBasicColumnFilter.ts"],"sourcesContent":["import { ChangeEventHandler, useCallback, useState } from \"react\";\nimport { BasicColumnFilterProps } from \"./BasicColumnFilter\";\nimport { CommitHandler, filterAsQuery, NoFilter } from \"@vuu-ui/vuu-utils\";\nimport { Filter, SingleValueFilterClauseOp } from \"@vuu-ui/vuu-filter-types\";\nimport { DataSourceFilter } from \"@vuu-ui/vuu-data-types\";\n\nexport type FilterValue = string | number;\n\nexport type BasicColumnFilterHookProps = Pick<\n  BasicColumnFilterProps,\n  \"column\" | \"onApplyFilter\" | \"initialValue\"\n>;\n\nconst filterOp: SingleValueFilterClauseOp = \"=\";\n\nconst asDataSourceFilter = (filter: Filter): DataSourceFilter => {\n  if (filter) {\n    return {\n      filter: filterAsQuery(filter),\n      filterStruct: filter,\n    };\n  } else {\n    return NoFilter;\n  }\n};\n\nexport const useBasicColumnFilter = ({\n  initialValue,\n  column,\n  onApplyFilter,\n}: BasicColumnFilterHookProps) => {\n  const [filterValue, setFilterValue] = useState(initialValue);\n\n  const handleInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      setFilterValue(e.target.value);\n    },\n    [],\n  );\n\n  const handleCommit = useCallback<CommitHandler<HTMLElement>>(\n    (_, value) => {\n      const filter: Filter = { column: column.name, op: filterOp, value };\n      setFilterValue((value ?? \"\").toString());\n      onApplyFilter?.(asDataSourceFilter(filter));\n    },\n    [column, onApplyFilter],\n  );\n\n  return {\n    filterValue: filterValue ?? \"\",\n    onInputChange: handleInputChange,\n    onCommit: handleCommit,\n  };\n};\n"],"names":["filterAsQuery","NoFilter","useState","useCallback"],"mappings":";;;;;AAaA,MAAM,QAAsC,GAAA,GAAA;AAE5C,MAAM,kBAAA,GAAqB,CAAC,MAAqC,KAAA;AAC/D,EAAA,IAAI,MAAQ,EAAA;AACV,IAAO,OAAA;AAAA,MACL,MAAA,EAAQA,uBAAc,MAAM,CAAA;AAAA,MAC5B,YAAc,EAAA;AAAA,KAChB;AAAA,GACK,MAAA;AACL,IAAO,OAAAC,iBAAA;AAAA;AAEX,CAAA;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,YAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAkC,KAAA;AAChC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAIC,eAAS,YAAY,CAAA;AAE3D,EAAA,MAAM,iBAAoB,GAAAC,iBAAA;AAAA,IACxB,CAAC,CAAM,KAAA;AACL,MAAe,cAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,KAC/B;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,YAAe,GAAAA,iBAAA;AAAA,IACnB,CAAC,GAAG,KAAU,KAAA;AACZ,MAAA,MAAM,SAAiB,EAAE,MAAA,EAAQ,OAAO,IAAM,EAAA,EAAA,EAAI,UAAU,KAAM,EAAA;AAClE,MAAgB,cAAA,CAAA,CAAA,KAAA,IAAS,EAAI,EAAA,QAAA,EAAU,CAAA;AACvC,MAAgB,aAAA,GAAA,kBAAA,CAAmB,MAAM,CAAC,CAAA;AAAA,KAC5C;AAAA,IACA,CAAC,QAAQ,aAAa;AAAA,GACxB;AAEA,EAAO,OAAA;AAAA,IACL,aAAa,WAAe,IAAA,EAAA;AAAA,IAC5B,aAAe,EAAA,iBAAA;AAAA,IACf,QAAU,EAAA;AAAA,GACZ;AACF;;;;"}

package/esm/basic-column-filter/BasicColumnFilter.css.js

@@ -1,4 +0,0 @@
-var basicColumnFilterCss = ".vuuBasicColumnFilter {\n  border: solid 1px var(--salt-editable-borderColor);\n  border-radius: 4px;\n  max-width: 210px;\n\n  .vuuBasicColumnFilter-edit-control {\n    display: flex;\n  }\n}\n";
-
-export { basicColumnFilterCss as default };
-//# sourceMappingURL=BasicColumnFilter.css.js.map

package/esm/basic-column-filter/BasicColumnFilter.css.js.map

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

package/esm/basic-column-filter/BasicColumnFilter.js

@@ -1,59 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import cx from 'clsx';
-import { getDataItemEditControl } from '@vuu-ui/vuu-data-react';
-import { forwardRef } from 'react';
-import { Icon } from '@vuu-ui/vuu-ui-controls';
-import { useBasicColumnFilter } from './useBasicColumnFilter.js';
-import basicColumnFilterCss from './BasicColumnFilter.css.js';
-
-const classBase = "vuuBasicColumnFilter";
-const searchIcon = /* @__PURE__ */ jsx(Icon, { name: "search", size: 18 });
-const BasicColumnFilter = forwardRef(function BasicColumnFilter2({
-  column,
-  className,
-  table,
-  initialValue,
-  onApplyFilter,
-  withStartAdornment = true,
-  ...htmlAttributes
-}, forwardRef2) {
-  const targetWindow = useWindow();
-  useComponentCssInjection({
-    testId: "vuu-basic-column-filter",
-    css: basicColumnFilterCss,
-    window: targetWindow
-  });
-  const { filterValue, onInputChange, onCommit } = useBasicColumnFilter({
-    column,
-    initialValue,
-    onApplyFilter
-  });
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...htmlAttributes,
-      className: cx(classBase, className),
-      ref: forwardRef2,
-      children: /* @__PURE__ */ jsxs("div", { className: `${classBase}-edit-control`, children: [
-        withStartAdornment && searchIcon,
-        getDataItemEditControl({
-          InputProps: {
-            inputProps: {
-              placeholder: "Find",
-              value: filterValue,
-              onChange: onInputChange
-            }
-          },
-          dataDescriptor: column,
-          table,
-          onCommit
-        })
-      ] })
-    }
-  );
-});
-
-export { BasicColumnFilter };
-//# sourceMappingURL=BasicColumnFilter.js.map

package/esm/basic-column-filter/BasicColumnFilter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BasicColumnFilter.js","sources":["../../../../packages/vuu-filters/src/basic-column-filter/BasicColumnFilter.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { ForwardedRef, forwardRef, HTMLAttributes, ReactElement } from \"react\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useBasicColumnFilter } from \"./useBasicColumnFilter\";\n\nimport basicColumnFilterCss from \"./BasicColumnFilter.css\";\n\nexport type FilterValue = string | number;\n\nconst classBase = \"vuuBasicColumnFilter\";\nconst searchIcon = <Icon name=\"search\" size={18} />;\n\nexport interface BasicColumnFilterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<FilterBarProps, \"onApplyFilter\"> {\n  /**\n   * Column Attributes.\n   */\n  column: ColumnDescriptor;\n  /**\n   * VuuTable is required if typeahead support is expected.\n   */\n  table?: VuuTable;\n  /**\n   * Initial filter value.\n   */\n  initialValue?: FilterValue;\n  /**\n   *Show search icon as start adornment.\n   */\n  withStartAdornment?: boolean;\n}\n\nexport const BasicColumnFilter = forwardRef(function BasicColumnFilter(\n  {\n    column,\n    className,\n    table,\n    initialValue,\n    onApplyFilter,\n    withStartAdornment = true,\n    ...htmlAttributes\n  }: BasicColumnFilterProps,\n  forwardRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-basic-column-filter\",\n    css: basicColumnFilterCss,\n    window: targetWindow,\n  });\n\n  const { filterValue, onInputChange, onCommit } = useBasicColumnFilter({\n    column,\n    initialValue,\n    onApplyFilter,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      ref={forwardRef}\n    >\n      <div className={`${classBase}-edit-control`}>\n        {withStartAdornment && searchIcon}\n        {getDataItemEditControl({\n          InputProps: {\n            inputProps: {\n              placeholder: \"Find\",\n              value: filterValue,\n              onChange: onInputChange,\n            },\n          },\n          dataDescriptor: column,\n          table,\n          onCommit,\n        })}\n      </div>\n    </div>\n  );\n}) as (\n  props: BasicColumnFilterProps & {\n    ref?: ForwardedRef<HTMLDivElement>;\n  },\n) => ReactElement<BasicColumnFilterProps>;\n"],"names":["BasicColumnFilter","forwardRef"],"mappings":";;;;;;;;;;AAeA,MAAM,SAAY,GAAA,sBAAA;AAClB,MAAM,6BAAc,GAAA,CAAA,IAAA,EAAA,EAAK,IAAK,EAAA,QAAA,EAAS,MAAM,EAAI,EAAA,CAAA;AAuBpC,MAAA,iBAAA,GAAoB,UAAW,CAAA,SAASA,kBACnD,CAAA;AAAA,EACE,MAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,kBAAqB,GAAA,IAAA;AAAA,EACrB,GAAG;AACL,CAAA,EACAC,WACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAA,oBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,WAAA,EAAa,aAAe,EAAA,QAAA,KAAa,oBAAqB,CAAA;AAAA,IACpE,MAAA;AAAA,IACA,YAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAKA,EAAAA,WAAAA;AAAA,MAEL,QAAC,kBAAA,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,CAAA,EAAG,SAAS,CACzB,aAAA,CAAA,EAAA,QAAA,EAAA;AAAA,QAAsB,kBAAA,IAAA,UAAA;AAAA,QACtB,sBAAuB,CAAA;AAAA,UACtB,UAAY,EAAA;AAAA,YACV,UAAY,EAAA;AAAA,cACV,WAAa,EAAA,MAAA;AAAA,cACb,KAAO,EAAA,WAAA;AAAA,cACP,QAAU,EAAA;AAAA;AACZ,WACF;AAAA,UACA,cAAgB,EAAA,MAAA;AAAA,UAChB,KAAA;AAAA,UACA;AAAA,SACD;AAAA,OACH,EAAA;AAAA;AAAA,GACF;AAEJ,CAAC;;;;"}

package/esm/basic-column-filter/useBasicColumnFilter.js

@@ -1,43 +0,0 @@
-import { useState, useCallback } from 'react';
-import { filterAsQuery, NoFilter } from '@vuu-ui/vuu-utils';
-
-const filterOp = "=";
-const asDataSourceFilter = (filter) => {
-  if (filter) {
-    return {
-      filter: filterAsQuery(filter),
-      filterStruct: filter
-    };
-  } else {
-    return NoFilter;
-  }
-};
-const useBasicColumnFilter = ({
-  initialValue,
-  column,
-  onApplyFilter
-}) => {
-  const [filterValue, setFilterValue] = useState(initialValue);
-  const handleInputChange = useCallback(
-    (e) => {
-      setFilterValue(e.target.value);
-    },
-    []
-  );
-  const handleCommit = useCallback(
-    (_, value) => {
-      const filter = { column: column.name, op: filterOp, value };
-      setFilterValue((value ?? "").toString());
-      onApplyFilter?.(asDataSourceFilter(filter));
-    },
-    [column, onApplyFilter]
-  );
-  return {
-    filterValue: filterValue ?? "",
-    onInputChange: handleInputChange,
-    onCommit: handleCommit
-  };
-};
-
-export { useBasicColumnFilter };
-//# sourceMappingURL=useBasicColumnFilter.js.map

package/esm/basic-column-filter/useBasicColumnFilter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useBasicColumnFilter.js","sources":["../../../../packages/vuu-filters/src/basic-column-filter/useBasicColumnFilter.ts"],"sourcesContent":["import { ChangeEventHandler, useCallback, useState } from \"react\";\nimport { BasicColumnFilterProps } from \"./BasicColumnFilter\";\nimport { CommitHandler, filterAsQuery, NoFilter } from \"@vuu-ui/vuu-utils\";\nimport { Filter, SingleValueFilterClauseOp } from \"@vuu-ui/vuu-filter-types\";\nimport { DataSourceFilter } from \"@vuu-ui/vuu-data-types\";\n\nexport type FilterValue = string | number;\n\nexport type BasicColumnFilterHookProps = Pick<\n  BasicColumnFilterProps,\n  \"column\" | \"onApplyFilter\" | \"initialValue\"\n>;\n\nconst filterOp: SingleValueFilterClauseOp = \"=\";\n\nconst asDataSourceFilter = (filter: Filter): DataSourceFilter => {\n  if (filter) {\n    return {\n      filter: filterAsQuery(filter),\n      filterStruct: filter,\n    };\n  } else {\n    return NoFilter;\n  }\n};\n\nexport const useBasicColumnFilter = ({\n  initialValue,\n  column,\n  onApplyFilter,\n}: BasicColumnFilterHookProps) => {\n  const [filterValue, setFilterValue] = useState(initialValue);\n\n  const handleInputChange = useCallback<ChangeEventHandler<HTMLInputElement>>(\n    (e) => {\n      setFilterValue(e.target.value);\n    },\n    [],\n  );\n\n  const handleCommit = useCallback<CommitHandler<HTMLElement>>(\n    (_, value) => {\n      const filter: Filter = { column: column.name, op: filterOp, value };\n      setFilterValue((value ?? \"\").toString());\n      onApplyFilter?.(asDataSourceFilter(filter));\n    },\n    [column, onApplyFilter],\n  );\n\n  return {\n    filterValue: filterValue ?? \"\",\n    onInputChange: handleInputChange,\n    onCommit: handleCommit,\n  };\n};\n"],"names":[],"mappings":";;;AAaA,MAAM,QAAsC,GAAA,GAAA;AAE5C,MAAM,kBAAA,GAAqB,CAAC,MAAqC,KAAA;AAC/D,EAAA,IAAI,MAAQ,EAAA;AACV,IAAO,OAAA;AAAA,MACL,MAAA,EAAQ,cAAc,MAAM,CAAA;AAAA,MAC5B,YAAc,EAAA;AAAA,KAChB;AAAA,GACK,MAAA;AACL,IAAO,OAAA,QAAA;AAAA;AAEX,CAAA;AAEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,YAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAkC,KAAA;AAChC,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAAS,YAAY,CAAA;AAE3D,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,CAAM,KAAA;AACL,MAAe,cAAA,CAAA,CAAA,CAAE,OAAO,KAAK,CAAA;AAAA,KAC/B;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,GAAG,KAAU,KAAA;AACZ,MAAA,MAAM,SAAiB,EAAE,MAAA,EAAQ,OAAO,IAAM,EAAA,EAAA,EAAI,UAAU,KAAM,EAAA;AAClE,MAAgB,cAAA,CAAA,CAAA,KAAA,IAAS,EAAI,EAAA,QAAA,EAAU,CAAA;AACvC,MAAgB,aAAA,GAAA,kBAAA,CAAmB,MAAM,CAAC,CAAA;AAAA,KAC5C;AAAA,IACA,CAAC,QAAQ,aAAa;AAAA,GACxB;AAEA,EAAO,OAAA;AAAA,IACL,aAAa,WAAe,IAAA,EAAA;AAAA,IAC5B,aAAe,EAAA,iBAAA;AAAA,IACf,QAAU,EAAA;AAAA,GACZ;AACF;;;;"}

package/types/basic-column-filter/BasicColumnFilter.d.ts

@@ -1,26 +0,0 @@
-import { ForwardedRef, HTMLAttributes, ReactElement } from "react";
-import { VuuTable } from "@vuu-ui/vuu-protocol-types";
-import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
-import { FilterBarProps } from "../filter-bar";
-export type FilterValue = string | number;
-export interface BasicColumnFilterProps extends HTMLAttributes<HTMLDivElement>, Pick<FilterBarProps, "onApplyFilter"> {
-    /**
-     * Column Attributes.
-     */
-    column: ColumnDescriptor;
-    /**
-     * VuuTable is required if typeahead support is expected.
-     */
-    table?: VuuTable;
-    /**
-     * Initial filter value.
-     */
-    initialValue?: FilterValue;
-    /**
-     *Show search icon as start adornment.
-     */
-    withStartAdornment?: boolean;
-}
-export declare const BasicColumnFilter: (props: BasicColumnFilterProps & {
-    ref?: ForwardedRef<HTMLDivElement>;
-}) => ReactElement<BasicColumnFilterProps>;

package/types/basic-column-filter/useBasicColumnFilter.d.ts

@@ -1,10 +0,0 @@
-import { ChangeEventHandler } from "react";
-import { BasicColumnFilterProps } from "./BasicColumnFilter";
-import { CommitHandler } from "@vuu-ui/vuu-utils";
-export type FilterValue = string | number;
-export type BasicColumnFilterHookProps = Pick<BasicColumnFilterProps, "column" | "onApplyFilter" | "initialValue">;
-export declare const useBasicColumnFilter: ({ initialValue, column, onApplyFilter, }: BasicColumnFilterHookProps) => {
-    filterValue: string | number;
-    onInputChange: ChangeEventHandler<HTMLInputElement>;
-    onCommit: CommitHandler<HTMLElement>;
-};