@vuu-ui/vuu-filters 0.13.40 → 0.13.41

package/cjs/column-filter/ColumnFilter.js

@@ -14,6 +14,7 @@ const classBase = "vuuColumnFilter";
 const ColumnFilter = react.forwardRef(function ColumnFilter2({
   column,
   className,
+  minCharacterCountToTriggerSuggestions,
   onCommit: onCommitProp,
   operator = "=",
   showOperatorPicker = false,
@@ -75,6 +76,9 @@ const ColumnFilter = react.forwardRef(function ColumnFilter2({
         ] }) : null,
         vuuDataReact.getDataItemEditControl({
           InputProps: { inputProps },
+          TypeaheadProps: {
+            minCharacterCountToTriggerSuggestions
+          },
           commitOnBlur: false,
           commitWhenCleared: true,
           dataDescriptor: column,

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 } 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    onColumnRangeFilterChange,\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    onColumnRangeFilterChange,\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,yBAAA;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,oBAAA;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;;;;"}
+{"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\";\nimport { VuuTypeaheadInputHookProps } from \"@vuu-ui/vuu-ui-controls/src/vuu-typeahead-input/useVuuTypeaheadInput\";\n\nconst classBase = \"vuuColumnFilter\";\n\nexport interface ColumnFilterProps\n  extends SegmentedButtonGroupProps,\n    Pick<VuuTypeaheadInputHookProps, \"minCharacterCountToTriggerSuggestions\">,\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    minCharacterCountToTriggerSuggestions,\n    onCommit: onCommitProp,\n    operator = \"=\",\n    showOperatorPicker = false,\n    table,\n    value,\n    onColumnFilterChange,\n    onColumnRangeFilterChange,\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    onColumnRangeFilterChange,\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        TypeaheadProps: {\n          minCharacterCountToTriggerSuggestions,\n        },\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":";;;;;;;;;;;;AAoBA,MAAM,SAAY,GAAA,iBAAA;AAgBL,MAAA,YAAA,GAAeA,gBAAW,CAAA,SAASC,aAC9C,CAAA;AAAA,EACE,MAAA;AAAA,EACA,SAAA;AAAA,EACA,qCAAA;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,yBAAA;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,oBAAA;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,cAAgB,EAAA;AAAA,YACd;AAAA,WACF;AAAA,UACA,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.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 { ChangeEventHandler, useCallback, useMemo, useState } from \"react\";\nimport { CommitHandler } 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   * Filter change events on second control in range filter\n   */\n  onColumnRangeFilterChange?: 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  onColumnRangeFilterChange,\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      onColumnFilterChange?.(e.target.value, column, op);\n    },\n    [onColumnFilterChange, column, op],\n  );\n\n  const handleRangeInputChange = useCallback<\n    ChangeEventHandler<HTMLInputElement>\n  >(\n    (e) => {\n      onColumnRangeFilterChange?.(e.target.value, column, op);\n    },\n    [onColumnRangeFilterChange, 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: handleRangeInputChange,\n            value: value[1],\n          }\n        : undefined,\n    [handleRangeInputChange, 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"],"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 } 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   * Filter change events on second control in range filter\n   */\n  onColumnRangeFilterChange?: 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  onColumnRangeFilterChange,\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      onColumnFilterChange?.(e.target.value, column, op);\n    },\n    [onColumnFilterChange, column, op],\n  );\n\n  const handleRangeInputChange = useCallback<\n    ChangeEventHandler<HTMLInputElement>\n  >(\n    (e) => {\n      onColumnRangeFilterChange?.(e.target.value, column, op);\n    },\n    [onColumnRangeFilterChange, 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: handleRangeInputChange,\n            value: value[1],\n          }\n        : undefined,\n    [handleRangeInputChange, 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"],"mappings":"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"}

package/cjs/filter-provider/FilterProvider.js

@@ -4,13 +4,18 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var FilterNamePrompt = require('../saved-filters/FilterNamePrompt.js');
 var DeleteFilterPrompt = require('../saved-filters/DeleteFilterPrompt.js');
+var filterDescriptorUtils = require('./filter-descriptor-utils.js');
 
+const UNSAVED_FILTER = "unsaved-filter";
 const FilterContext = react.createContext({
   activeFilter: void 0,
   savedFilters: [],
   onApplyFilter: () => console.warn(
     "[FilterContext] onApplyFilter, no FilterProvider has been configured"
   ),
+  deleteFilter: () => console.warn(
+    "[FilterContext] deleteFilter, no FilterProvider has been configured"
+  ),
   saveFilter: () => console.warn(
     "[FilterContext] saveFilter, no FilterProvider has been configured"
   ),
@@ -28,19 +33,6 @@ const FilterProvider = ({
   const handleApplyFilter = react.useCallback(() => {
     console.log("filter changed");
   }, []);
-  const findFilter = react.useCallback(
-    (filterId) => {
-      const filter = filterDescriptors.find(({ id }) => id === filterId);
-      if (filter) {
-        return filter;
-      } else {
-        throw Error(
-          `[FilterProvider] findFilter, filter not found ${filterId}`
-        );
-      }
-    },
-    [filterDescriptors]
-  );
   const deleteFilter = react.useCallback(
     (filterId) => {
       setFilterDescriptors((filterDescriptors2) => {
@@ -53,22 +45,14 @@ const FilterProvider = ({
     },
     [onFiltersSaved]
   );
-  const renameFilter = react.useCallback(
-    (filterId, filterName) => {
+  const applyNewName = react.useCallback(
+    (filterId, name) => {
       setFilterDescriptors((currentFilterDescriptors) => {
-        const newFilterDescriptors = currentFilterDescriptors.map((f) => {
-          if (f.id === filterId) {
-            return {
-              ...f,
-              filter: {
-                ...f.filter,
-                name: filterName
-              }
-            };
-          } else {
-            return f;
-          }
-        });
+        const newFilterDescriptors = filterDescriptorUtils.renameFilter(
+          currentFilterDescriptors,
+          filterId,
+          name
+        );
         onFiltersSaved?.(newFilterDescriptors);
         return newFilterDescriptors;
       });
@@ -88,14 +72,14 @@ const FilterProvider = ({
             onConfirm: (name) => {
               setDialog(null);
               if (originalFilterName !== name) {
-                renameFilter(id, name);
+                applyNewName(id, name);
               }
             }
           }
         )
       );
     },
-    [renameFilter]
+    [applyNewName]
   );
   const promptForConfirmationOfDelete = react.useCallback(
     (filterDescriptor) => {
@@ -117,22 +101,26 @@ const FilterProvider = ({
   );
   const handleFilterMenuAction = react.useCallback(
     (filterId, actionType) => {
-      const targetFilter = findFilter(filterId);
+      const targetFilter = filterDescriptorUtils.findFilter(filterDescriptors, filterId);
       switch (actionType) {
         case "close":
-          console.log(`clode filter ${filterId}`);
+          console.log(`close filter ${filterId}`);
           break;
         case "edit":
           console.log(`edit filter ${filterId}`);
           break;
         case "remove":
-          promptForConfirmationOfDelete(targetFilter);
+          if (filterId === UNSAVED_FILTER) {
+            console.log("remove unsaved filter");
+          } else {
+            promptForConfirmationOfDelete(targetFilter);
+          }
           break;
         case "rename":
           return PromptForFilterName(targetFilter);
       }
     },
-    [findFilter, promptForConfirmationOfDelete, PromptForFilterName]
+    [filterDescriptors, promptForConfirmationOfDelete, PromptForFilterName]
   );
   const handleSaveFilter = react.useCallback(
     (filterDescriptor) => {
@@ -146,30 +134,21 @@ const FilterProvider = ({
     },
     [onFiltersSaved]
   );
-  const setActiveFilter = react.useCallback(
-    (filterId) => {
-      setFilterDescriptors((currentFilterDescriptors) => {
-        const targetFilter = filterId ? findFilter(filterId) : void 0;
-        const newFilterDescriptors = currentFilterDescriptors.map((f) => {
-          if (f.id === filterId) {
-            return {
-              ...f,
-              active: !f.active
-            };
-          } else if (!targetFilter?.active && f.active) {
-            return {
-              ...f,
-              active: false
-            };
-          } else {
-            return f;
-          }
-        });
-        return newFilterDescriptors;
-      });
-    },
-    [findFilter]
-  );
+  const setActiveFilter = react.useCallback((filter) => {
+    if (typeof filter === "string") {
+      setFilterDescriptors(
+        (currentFilterDescriptors) => filterDescriptorUtils.activateFilter(currentFilterDescriptors, filter)
+      );
+    } else if (filter) {
+      setFilterDescriptors(
+        (currentFilterDescriptors) => filterDescriptorUtils.insertOrReplaceFilter(currentFilterDescriptors, {
+          active: true,
+          filter,
+          id: UNSAVED_FILTER
+        })
+      );
+    }
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     FilterContext.Provider,
     {
@@ -177,6 +156,7 @@ const FilterProvider = ({
         activeFilter: filterDescriptors.find((f) => f.active),
         onApplyFilter: handleApplyFilter,
         onFilterMenuAction: handleFilterMenuAction,
+        deleteFilter,
         saveFilter: handleSaveFilter,
         savedFilters: filterDescriptors,
         setActiveFilter

package/cjs/filter-provider/FilterProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterProvider.js","sources":["../../../../packages/vuu-filters/src/filter-provider/FilterProvider.tsx"],"sourcesContent":["import { FilterChangeHandler } from \"@vuu-ui/vuu-filter-types\";\nimport {\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\nimport { FilterMenuActionHandler } from \"../filter-pill/FilterMenu\";\nimport { FilterDescriptor } from \"../saved-filters/useSavedFilterPanel\";\nimport { FilterNamePrompt } from \"../saved-filters/FilterNamePrompt\";\nimport { DeleteFilterPrompt } from \"../saved-filters/DeleteFilterPrompt\";\n\nexport interface FilterContextProps {\n  activeFilter: FilterDescriptor | undefined;\n  saveFilter: (filter: FilterDescriptor) => void;\n  savedFilters?: FilterDescriptor[];\n  onApplyFilter: FilterChangeHandler;\n  onFilterMenuAction?: FilterMenuActionHandler;\n  setActiveFilter: (filterId?: string) => void;\n}\n\nexport const FilterContext = createContext<FilterContextProps>({\n  activeFilter: undefined,\n  savedFilters: [],\n  onApplyFilter: () =>\n    console.warn(\n      \"[FilterContext] onApplyFilter, no FilterProvider has been configured\",\n    ),\n  saveFilter: () =>\n    console.warn(\n      \"[FilterContext] saveFilter, no FilterProvider has been configured\",\n    ),\n  setActiveFilter: () =>\n    console.warn(\n      \"[FilterContext] setActiveFilter, no FilterProvider has been configured\",\n    ),\n});\n\nexport const FilterProvider = ({\n  children,\n  onFiltersSaved,\n  savedFilters = [],\n}: Partial<Pick<FilterContextProps, \"activeFilter\" | \"savedFilters\">> & {\n  children: ReactNode;\n  onFiltersSaved?: (filterDescriptors: FilterDescriptor[]) => void;\n}) => {\n  const [filterDescriptors, setFilterDescriptors] = useState(savedFilters);\n  const [dialog, setDialog] = useState<ReactElement | null>(null);\n\n  const handleApplyFilter = useCallback<FilterChangeHandler>(() => {\n    console.log(\"filter changed\");\n  }, []);\n\n  const findFilter = useCallback(\n    (filterId: string) => {\n      const filter = filterDescriptors.find(({ id }) => id === filterId);\n      if (filter) {\n        return filter;\n      } else {\n        throw Error(\n          `[FilterProvider] findFilter, filter not found ${filterId}`,\n        );\n      }\n    },\n    [filterDescriptors],\n  );\n\n  const deleteFilter = useCallback(\n    (filterId: string) => {\n      setFilterDescriptors((filterDescriptors) => {\n        const newFilterDescriptors = filterDescriptors.filter(\n          ({ id }) => id !== filterId,\n        );\n        onFiltersSaved?.(newFilterDescriptors);\n        return newFilterDescriptors;\n      });\n    },\n    [onFiltersSaved],\n  );\n\n  const renameFilter = useCallback(\n    (filterId: string, filterName: string) => {\n      setFilterDescriptors((currentFilterDescriptors) => {\n        const newFilterDescriptors =\n          currentFilterDescriptors.map<FilterDescriptor>((f) => {\n            if (f.id === filterId) {\n              return {\n                ...f,\n                filter: {\n                  ...f.filter,\n                  name: filterName,\n                },\n              };\n            } else {\n              return f;\n            }\n          });\n        onFiltersSaved?.(newFilterDescriptors);\n        return newFilterDescriptors;\n      });\n    },\n    [onFiltersSaved],\n  );\n\n  const PromptForFilterName = useCallback(\n    ({ filter, id }: FilterDescriptor) => {\n      const originalFilterName = filter.name ?? \"\";\n      setDialog(\n        <FilterNamePrompt\n          filterName={filter.name}\n          title=\"Rename filter\"\n          onClose={() => setDialog(null)}\n          onConfirm={(name) => {\n            setDialog(null);\n            if (originalFilterName !== name) {\n              renameFilter(id, name);\n            }\n          }}\n        />,\n      );\n    },\n    [renameFilter],\n  );\n\n  const promptForConfirmationOfDelete = useCallback(\n    (filterDescriptor: FilterDescriptor) => {\n      setDialog(\n        <DeleteFilterPrompt\n          filterDescriptor={filterDescriptor}\n          onConfirm={() => {\n            setDialog(null);\n            deleteFilter(filterDescriptor.id);\n          }}\n          onClose={() => setDialog(null)}\n        />,\n      );\n    },\n    [deleteFilter],\n  );\n\n  const handleFilterMenuAction = useCallback<FilterMenuActionHandler>(\n    (filterId, actionType) => {\n      const targetFilter = findFilter(filterId);\n      switch (actionType) {\n        case \"close\":\n          console.log(`clode filter ${filterId}`);\n          break;\n        case \"edit\":\n          console.log(`edit filter ${filterId}`);\n          break;\n        case \"remove\":\n          promptForConfirmationOfDelete(targetFilter);\n          break;\n        case \"rename\":\n          return PromptForFilterName(targetFilter);\n      }\n    },\n    [findFilter, promptForConfirmationOfDelete, PromptForFilterName],\n  );\n\n  const handleSaveFilter = useCallback(\n    (filterDescriptor: FilterDescriptor) => {\n      setFilterDescriptors((filterDescriptors) => {\n        const newFilterDescriptors = filterDescriptor.active\n          ? filterDescriptors\n              .map((filterDescriptor) =>\n                filterDescriptor.active\n                  ? { ...filterDescriptor, active: false }\n                  : filterDescriptor,\n              )\n              .concat(filterDescriptor)\n          : filterDescriptors.concat(filterDescriptor);\n        onFiltersSaved?.(newFilterDescriptors);\n        return newFilterDescriptors;\n      });\n    },\n    [onFiltersSaved],\n  );\n\n  const setActiveFilter = useCallback(\n    (filterId?: string) => {\n      setFilterDescriptors((currentFilterDescriptors) => {\n        const targetFilter = filterId ? findFilter(filterId) : undefined;\n        const newFilterDescriptors =\n          currentFilterDescriptors.map<FilterDescriptor>((f) => {\n            if (f.id === filterId) {\n              return {\n                ...f,\n                active: !f.active,\n              };\n            } else if (!targetFilter?.active && f.active) {\n              return {\n                ...f,\n                active: false,\n              };\n            } else {\n              return f;\n            }\n          });\n        return newFilterDescriptors;\n      });\n    },\n    [findFilter],\n  );\n\n  return (\n    <FilterContext.Provider\n      value={{\n        activeFilter: filterDescriptors.find((f) => f.active),\n        onApplyFilter: handleApplyFilter,\n        onFilterMenuAction: handleFilterMenuAction,\n        saveFilter: handleSaveFilter,\n        savedFilters: filterDescriptors,\n        setActiveFilter,\n      }}\n    >\n      {children}\n      {dialog}\n    </FilterContext.Provider>\n  );\n};\n\nexport function useActiveFilter() {\n  const { activeFilter, onApplyFilter } = useContext(FilterContext);\n  return { activeFilter, onApplyFilter };\n}\n\nexport function useSavedFilters() {\n  const {\n    activeFilter,\n    onApplyFilter,\n    onFilterMenuAction,\n    savedFilters,\n    saveFilter,\n    setActiveFilter,\n  } = useContext(FilterContext);\n  return {\n    activeFilter,\n    onApplyFilter,\n    onFilterMenuAction,\n    savedFilters,\n    saveFilter,\n    setActiveFilter,\n  };\n}\n"],"names":["createContext","useState","useCallback","filterDescriptors","jsx","FilterNamePrompt","DeleteFilterPrompt","filterDescriptor","jsxs","useContext"],"mappings":"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"}
+{"version":3,"file":"FilterProvider.js","sources":["../../../../packages/vuu-filters/src/filter-provider/FilterProvider.tsx"],"sourcesContent":["import { Filter, FilterChangeHandler } from \"@vuu-ui/vuu-filter-types\";\nimport {\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\nimport { FilterMenuActionHandler } from \"../filter-pill/FilterMenu\";\nimport { FilterDescriptor } from \"../saved-filters/useSavedFilterPanel\";\nimport { FilterNamePrompt } from \"../saved-filters/FilterNamePrompt\";\nimport { DeleteFilterPrompt } from \"../saved-filters/DeleteFilterPrompt\";\nimport {\n  activateFilter,\n  findFilter,\n  insertOrReplaceFilter,\n  renameFilter,\n} from \"./filter-descriptor-utils\";\n\nconst UNSAVED_FILTER = \"unsaved-filter\";\n\nexport interface FilterContextProps {\n  activeFilter: FilterDescriptor | undefined;\n  deleteFilter: (filterId: string) => void;\n  saveFilter: (filter: FilterDescriptor) => void;\n  savedFilters?: FilterDescriptor[];\n  // TODO do we need this ?\n  onApplyFilter: FilterChangeHandler;\n  onFilterMenuAction?: FilterMenuActionHandler;\n  setActiveFilter: (filterId?: string) => void;\n}\n\nexport const FilterContext = createContext<FilterContextProps>({\n  activeFilter: undefined,\n  savedFilters: [],\n  onApplyFilter: () =>\n    console.warn(\n      \"[FilterContext] onApplyFilter, no FilterProvider has been configured\",\n    ),\n  deleteFilter: () =>\n    console.warn(\n      \"[FilterContext] deleteFilter, no FilterProvider has been configured\",\n    ),\n\n  saveFilter: () =>\n    console.warn(\n      \"[FilterContext] saveFilter, no FilterProvider has been configured\",\n    ),\n  setActiveFilter: () =>\n    console.warn(\n      \"[FilterContext] setActiveFilter, no FilterProvider has been configured\",\n    ),\n});\n\nexport const FilterProvider = ({\n  children,\n  onFiltersSaved,\n  savedFilters = [],\n}: Partial<Pick<FilterContextProps, \"activeFilter\" | \"savedFilters\">> & {\n  children: ReactNode;\n  onFiltersSaved?: (filterDescriptors: FilterDescriptor[]) => void;\n}) => {\n  const [filterDescriptors, setFilterDescriptors] = useState(savedFilters);\n  const [dialog, setDialog] = useState<ReactElement | null>(null);\n\n  const handleApplyFilter = useCallback<FilterChangeHandler>(() => {\n    console.log(\"filter changed\");\n  }, []);\n\n  const deleteFilter = useCallback(\n    (filterId: string) => {\n      setFilterDescriptors((filterDescriptors) => {\n        const newFilterDescriptors = filterDescriptors.filter(\n          ({ id }) => id !== filterId,\n        );\n        onFiltersSaved?.(newFilterDescriptors);\n        return newFilterDescriptors;\n      });\n    },\n    [onFiltersSaved],\n  );\n\n  const applyNewName = useCallback(\n    (filterId: string, name: string) => {\n      setFilterDescriptors((currentFilterDescriptors) => {\n        const newFilterDescriptors = renameFilter(\n          currentFilterDescriptors,\n          filterId,\n          name,\n        );\n        onFiltersSaved?.(newFilterDescriptors);\n        return newFilterDescriptors;\n      });\n    },\n    [onFiltersSaved],\n  );\n\n  const PromptForFilterName = useCallback(\n    ({ filter, id }: FilterDescriptor) => {\n      const originalFilterName = filter.name ?? \"\";\n      setDialog(\n        <FilterNamePrompt\n          filterName={filter.name}\n          title=\"Rename filter\"\n          onClose={() => setDialog(null)}\n          onConfirm={(name) => {\n            setDialog(null);\n            if (originalFilterName !== name) {\n              applyNewName(id, name);\n            }\n          }}\n        />,\n      );\n    },\n    [applyNewName],\n  );\n\n  const promptForConfirmationOfDelete = useCallback(\n    (filterDescriptor: FilterDescriptor) => {\n      setDialog(\n        <DeleteFilterPrompt\n          filterDescriptor={filterDescriptor}\n          onConfirm={() => {\n            setDialog(null);\n            deleteFilter(filterDescriptor.id);\n          }}\n          onClose={() => setDialog(null)}\n        />,\n      );\n    },\n    [deleteFilter],\n  );\n\n  const handleFilterMenuAction = useCallback<FilterMenuActionHandler>(\n    (filterId, actionType) => {\n      const targetFilter = findFilter(filterDescriptors, filterId);\n      switch (actionType) {\n        case \"close\":\n          console.log(`close filter ${filterId}`);\n          break;\n        case \"edit\":\n          console.log(`edit filter ${filterId}`);\n          break;\n        case \"remove\":\n          if (filterId === UNSAVED_FILTER) {\n            console.log(\"remove unsaved filter\");\n          } else {\n            promptForConfirmationOfDelete(targetFilter);\n          }\n          break;\n        case \"rename\":\n          return PromptForFilterName(targetFilter);\n      }\n    },\n    [filterDescriptors, promptForConfirmationOfDelete, PromptForFilterName],\n  );\n\n  const handleSaveFilter = useCallback(\n    (filterDescriptor: FilterDescriptor) => {\n      setFilterDescriptors((filterDescriptors) => {\n        const newFilterDescriptors = filterDescriptor.active\n          ? filterDescriptors\n              .map((filterDescriptor) =>\n                filterDescriptor.active\n                  ? { ...filterDescriptor, active: false }\n                  : filterDescriptor,\n              )\n              .concat(filterDescriptor)\n          : filterDescriptors.concat(filterDescriptor);\n        onFiltersSaved?.(newFilterDescriptors);\n        return newFilterDescriptors;\n      });\n    },\n    [onFiltersSaved],\n  );\n\n  /**\n   * Allows switching between saved filtere. ALternatively, an anonymous\n   * filter can be assigned. This is to allow for a dynamically created\n   * filter to be active.\n   */\n  const setActiveFilter = useCallback((filter?: string | Filter) => {\n    if (typeof filter === \"string\") {\n      setFilterDescriptors((currentFilterDescriptors) =>\n        activateFilter(currentFilterDescriptors, filter),\n      );\n    } else if (filter) {\n      setFilterDescriptors((currentFilterDescriptors) =>\n        insertOrReplaceFilter(currentFilterDescriptors, {\n          active: true,\n          filter,\n          id: UNSAVED_FILTER,\n        }),\n      );\n    }\n  }, []);\n\n  return (\n    <FilterContext.Provider\n      value={{\n        activeFilter: filterDescriptors.find((f) => f.active),\n        onApplyFilter: handleApplyFilter,\n        onFilterMenuAction: handleFilterMenuAction,\n        deleteFilter,\n        saveFilter: handleSaveFilter,\n        savedFilters: filterDescriptors,\n        setActiveFilter,\n      }}\n    >\n      {children}\n      {dialog}\n    </FilterContext.Provider>\n  );\n};\n\nexport function useActiveFilter() {\n  const { activeFilter, onApplyFilter } = useContext(FilterContext);\n  return { activeFilter, onApplyFilter };\n}\n\nexport function useSavedFilters() {\n  const {\n    activeFilter,\n    onApplyFilter,\n    onFilterMenuAction,\n    savedFilters,\n    saveFilter,\n    setActiveFilter,\n  } = useContext(FilterContext);\n  return {\n    activeFilter,\n    onApplyFilter,\n    onFilterMenuAction,\n    savedFilters,\n    saveFilter,\n    setActiveFilter,\n  };\n}\n"],"names":["createContext","useState","useCallback","filterDescriptors","renameFilter","jsx","FilterNamePrompt","DeleteFilterPrompt","findFilter","filterDescriptor","activateFilter","insertOrReplaceFilter","jsxs","useContext"],"mappings":"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"}

package/cjs/filter-provider/filter-descriptor-utils.js

@@ -0,0 +1,64 @@
+'use strict';
+
+function findFilter(filterDescriptors, filterId, throwIfNotFound = true) {
+  const filter = filterDescriptors.find(({ id }) => id === filterId);
+  if (filter) {
+    return filter;
+  } else if (throwIfNotFound) {
+    throw Error(`[FilterProvider] findFilter, filter not found ${filterId}`);
+  }
+}
+const deactivateFilter = (filterDescriptors) => activateFilter(filterDescriptors, void 0);
+const activateFilter = (filterDescriptors, activeFilterId) => filterDescriptors.map((f) => {
+  if (f.id === activeFilterId) {
+    return {
+      ...f,
+      active: !f.active
+    };
+  } else if (f.active) {
+    return {
+      ...f,
+      active: false
+    };
+  } else {
+    return f;
+  }
+});
+const insertOrReplaceFilter = (filterDescriptors, filterDescriptor) => {
+  if (!filterDescriptors.some(({ id }) => id === filterDescriptor.id)) {
+    return deactivateFilter(filterDescriptors).concat(filterDescriptor);
+  } else {
+    return filterDescriptors.map((f) => {
+      if (f.id === filterDescriptor.id) {
+        return filterDescriptor;
+      } else if (f.active) {
+        return {
+          ...f,
+          active: false
+        };
+      } else {
+        return f;
+      }
+    });
+  }
+};
+const renameFilter = (filterDescriptors, filterId, name) => filterDescriptors.map((f) => {
+  if (f.id === filterId) {
+    return {
+      ...f,
+      filter: {
+        ...f.filter,
+        name
+      }
+    };
+  } else {
+    return f;
+  }
+});
+
+exports.activateFilter = activateFilter;
+exports.deactivateFilter = deactivateFilter;
+exports.findFilter = findFilter;
+exports.insertOrReplaceFilter = insertOrReplaceFilter;
+exports.renameFilter = renameFilter;
+//# sourceMappingURL=filter-descriptor-utils.js.map

package/cjs/filter-provider/filter-descriptor-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-descriptor-utils.js","sources":["../../../../packages/vuu-filters/src/filter-provider/filter-descriptor-utils.ts"],"sourcesContent":["import { FilterDescriptor } from \"../saved-filters/useSavedFilterPanel\";\n\nexport function findFilter(\n  filterDescriptors: FilterDescriptor[],\n  filterId: string,\n  throwIfNotFound?: true,\n): FilterDescriptor;\nexport function findFilter(\n  filterDescriptors: FilterDescriptor[],\n  filterId: string,\n  throwIfNotFound: false,\n): FilterDescriptor | undefined;\nexport function findFilter(\n  filterDescriptors: FilterDescriptor[],\n  filterId: string,\n  throwIfNotFound = true,\n) {\n  const filter = filterDescriptors.find(({ id }) => id === filterId);\n  if (filter) {\n    return filter;\n  } else if (throwIfNotFound) {\n    throw Error(`[FilterProvider] findFilter, filter not found ${filterId}`);\n  }\n}\n\nexport const deactivateFilter = (filterDescriptors: FilterDescriptor[]) =>\n  activateFilter(filterDescriptors, undefined);\n\nexport const activateFilter = (\n  filterDescriptors: FilterDescriptor[],\n  activeFilterId?: string,\n) =>\n  filterDescriptors.map<FilterDescriptor>((f) => {\n    if (f.id === activeFilterId) {\n      return {\n        ...f,\n        active: !f.active,\n      };\n    } else if (f.active) {\n      return {\n        ...f,\n        active: false,\n      };\n    } else {\n      return f;\n    }\n  });\n\nexport const insertOrReplaceFilter = (\n  filterDescriptors: FilterDescriptor[],\n  filterDescriptor: FilterDescriptor,\n) => {\n  if (!filterDescriptors.some(({ id }) => id === filterDescriptor.id)) {\n    return deactivateFilter(filterDescriptors).concat(filterDescriptor);\n  } else {\n    return filterDescriptors.map<FilterDescriptor>((f) => {\n      if (f.id === filterDescriptor.id) {\n        return filterDescriptor;\n      } else if (f.active) {\n        return {\n          ...f,\n          active: false,\n        };\n      } else {\n        return f;\n      }\n    });\n  }\n};\n\nexport const renameFilter = (\n  filterDescriptors: FilterDescriptor[],\n  filterId: string,\n  name: string,\n) =>\n  filterDescriptors.map<FilterDescriptor>((f) => {\n    if (f.id === filterId) {\n      return {\n        ...f,\n        filter: {\n          ...f.filter,\n          name,\n        },\n      };\n    } else {\n      return f;\n    }\n  });\n"],"names":[],"mappings":";;AAYO,SAAS,UACd,CAAA,iBAAA,EACA,QACA,EAAA,eAAA,GAAkB,IAClB,EAAA;AACA,EAAM,MAAA,MAAA,GAAS,kBAAkB,IAAK,CAAA,CAAC,EAAE,EAAG,EAAA,KAAM,OAAO,QAAQ,CAAA;AACjE,EAAA,IAAI,MAAQ,EAAA;AACV,IAAO,OAAA,MAAA;AAAA,aACE,eAAiB,EAAA;AAC1B,IAAM,MAAA,KAAA,CAAM,CAAiD,8CAAA,EAAA,QAAQ,CAAE,CAAA,CAAA;AAAA;AAE3E;AAEO,MAAM,gBAAmB,GAAA,CAAC,iBAC/B,KAAA,cAAA,CAAe,mBAAmB,KAAS,CAAA;AAEtC,MAAM,iBAAiB,CAC5B,iBAAA,EACA,mBAEA,iBAAkB,CAAA,GAAA,CAAsB,CAAC,CAAM,KAAA;AAC7C,EAAI,IAAA,CAAA,CAAE,OAAO,cAAgB,EAAA;AAC3B,IAAO,OAAA;AAAA,MACL,GAAG,CAAA;AAAA,MACH,MAAA,EAAQ,CAAC,CAAE,CAAA;AAAA,KACb;AAAA,GACF,MAAA,IAAW,EAAE,MAAQ,EAAA;AACnB,IAAO,OAAA;AAAA,MACL,GAAG,CAAA;AAAA,MACH,MAAQ,EAAA;AAAA,KACV;AAAA,GACK,MAAA;AACL,IAAO,OAAA,CAAA;AAAA;AAEX,CAAC;AAEU,MAAA,qBAAA,GAAwB,CACnC,iBAAA,EACA,gBACG,KAAA;AACH,EAAI,IAAA,CAAC,iBAAkB,CAAA,IAAA,CAAK,CAAC,EAAE,IAAS,KAAA,EAAA,KAAO,gBAAiB,CAAA,EAAE,CAAG,EAAA;AACnE,IAAA,OAAO,gBAAiB,CAAA,iBAAiB,CAAE,CAAA,MAAA,CAAO,gBAAgB,CAAA;AAAA,GAC7D,MAAA;AACL,IAAO,OAAA,iBAAA,CAAkB,GAAsB,CAAA,CAAC,CAAM,KAAA;AACpD,MAAI,IAAA,CAAA,CAAE,EAAO,KAAA,gBAAA,CAAiB,EAAI,EAAA;AAChC,QAAO,OAAA,gBAAA;AAAA,OACT,MAAA,IAAW,EAAE,MAAQ,EAAA;AACnB,QAAO,OAAA;AAAA,UACL,GAAG,CAAA;AAAA,UACH,MAAQ,EAAA;AAAA,SACV;AAAA,OACK,MAAA;AACL,QAAO,OAAA,CAAA;AAAA;AACT,KACD,CAAA;AAAA;AAEL;AAEa,MAAA,YAAA,GAAe,CAC1B,iBACA,EAAA,QAAA,EACA,SAEA,iBAAkB,CAAA,GAAA,CAAsB,CAAC,CAAM,KAAA;AAC7C,EAAI,IAAA,CAAA,CAAE,OAAO,QAAU,EAAA;AACrB,IAAO,OAAA;AAAA,MACL,GAAG,CAAA;AAAA,MACH,MAAQ,EAAA;AAAA,QACN,GAAG,CAAE,CAAA,MAAA;AAAA,QACL;AAAA;AACF,KACF;AAAA,GACK,MAAA;AACL,IAAO,OAAA,CAAA;AAAA;AAEX,CAAC;;;;;;;;"}

package/esm/column-filter/ColumnFilter.js

@@ -12,6 +12,7 @@ const classBase = "vuuColumnFilter";
 const ColumnFilter = forwardRef(function ColumnFilter2({
   column,
   className,
+  minCharacterCountToTriggerSuggestions,
   onCommit: onCommitProp,
   operator = "=",
   showOperatorPicker = false,
@@ -73,6 +74,9 @@ const ColumnFilter = forwardRef(function ColumnFilter2({
         ] }) : null,
         getDataItemEditControl({
           InputProps: { inputProps },
+          TypeaheadProps: {
+            minCharacterCountToTriggerSuggestions
+          },
           commitOnBlur: false,
           commitWhenCleared: true,
           dataDescriptor: column,

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 } 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    onColumnRangeFilterChange,\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    onColumnRangeFilterChange,\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,yBAAA;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,oBAAA;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;;;;"}
+{"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\";\nimport { VuuTypeaheadInputHookProps } from \"@vuu-ui/vuu-ui-controls/src/vuu-typeahead-input/useVuuTypeaheadInput\";\n\nconst classBase = \"vuuColumnFilter\";\n\nexport interface ColumnFilterProps\n  extends SegmentedButtonGroupProps,\n    Pick<VuuTypeaheadInputHookProps, \"minCharacterCountToTriggerSuggestions\">,\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    minCharacterCountToTriggerSuggestions,\n    onCommit: onCommitProp,\n    operator = \"=\",\n    showOperatorPicker = false,\n    table,\n    value,\n    onColumnFilterChange,\n    onColumnRangeFilterChange,\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    onColumnRangeFilterChange,\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        TypeaheadProps: {\n          minCharacterCountToTriggerSuggestions,\n        },\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":";;;;;;;;;;AAoBA,MAAM,SAAY,GAAA,iBAAA;AAgBL,MAAA,YAAA,GAAe,UAAW,CAAA,SAASA,aAC9C,CAAA;AAAA,EACE,MAAA;AAAA,EACA,SAAA;AAAA,EACA,qCAAA;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,yBAAA;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,oBAAA;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,cAAgB,EAAA;AAAA,YACd;AAAA,WACF;AAAA,UACA,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.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 { ChangeEventHandler, useCallback, useMemo, useState } from \"react\";\nimport { CommitHandler } 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   * Filter change events on second control in range filter\n   */\n  onColumnRangeFilterChange?: 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  onColumnRangeFilterChange,\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      onColumnFilterChange?.(e.target.value, column, op);\n    },\n    [onColumnFilterChange, column, op],\n  );\n\n  const handleRangeInputChange = useCallback<\n    ChangeEventHandler<HTMLInputElement>\n  >(\n    (e) => {\n      onColumnRangeFilterChange?.(e.target.value, column, op);\n    },\n    [onColumnRangeFilterChange, 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: handleRangeInputChange,\n            value: value[1],\n          }\n        : undefined,\n    [handleRangeInputChange, 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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"}
+{"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 } 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   * Filter change events on second control in range filter\n   */\n  onColumnRangeFilterChange?: 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  onColumnRangeFilterChange,\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      onColumnFilterChange?.(e.target.value, column, op);\n    },\n    [onColumnFilterChange, column, op],\n  );\n\n  const handleRangeInputChange = useCallback<\n    ChangeEventHandler<HTMLInputElement>\n  >(\n    (e) => {\n      onColumnRangeFilterChange?.(e.target.value, column, op);\n    },\n    [onColumnRangeFilterChange, 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: handleRangeInputChange,\n            value: value[1],\n          }\n        : undefined,\n    [handleRangeInputChange, 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/filter-provider/FilterProvider.js

@@ -2,13 +2,18 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { createContext, useState, useCallback, useContext } from 'react';
 import { FilterNamePrompt } from '../saved-filters/FilterNamePrompt.js';
 import { DeleteFilterPrompt } from '../saved-filters/DeleteFilterPrompt.js';
+import { renameFilter, findFilter, activateFilter, insertOrReplaceFilter } from './filter-descriptor-utils.js';
 
+const UNSAVED_FILTER = "unsaved-filter";
 const FilterContext = createContext({
   activeFilter: void 0,
   savedFilters: [],
   onApplyFilter: () => console.warn(
     "[FilterContext] onApplyFilter, no FilterProvider has been configured"
   ),
+  deleteFilter: () => console.warn(
+    "[FilterContext] deleteFilter, no FilterProvider has been configured"
+  ),
   saveFilter: () => console.warn(
     "[FilterContext] saveFilter, no FilterProvider has been configured"
   ),
@@ -26,19 +31,6 @@ const FilterProvider = ({
   const handleApplyFilter = useCallback(() => {
     console.log("filter changed");
   }, []);
-  const findFilter = useCallback(
-    (filterId) => {
-      const filter = filterDescriptors.find(({ id }) => id === filterId);
-      if (filter) {
-        return filter;
-      } else {
-        throw Error(
-          `[FilterProvider] findFilter, filter not found ${filterId}`
-        );
-      }
-    },
-    [filterDescriptors]
-  );
   const deleteFilter = useCallback(
     (filterId) => {
       setFilterDescriptors((filterDescriptors2) => {
@@ -51,22 +43,14 @@ const FilterProvider = ({
     },
     [onFiltersSaved]
   );
-  const renameFilter = useCallback(
-    (filterId, filterName) => {
+  const applyNewName = useCallback(
+    (filterId, name) => {
       setFilterDescriptors((currentFilterDescriptors) => {
-        const newFilterDescriptors = currentFilterDescriptors.map((f) => {
-          if (f.id === filterId) {
-            return {
-              ...f,
-              filter: {
-                ...f.filter,
-                name: filterName
-              }
-            };
-          } else {
-            return f;
-          }
-        });
+        const newFilterDescriptors = renameFilter(
+          currentFilterDescriptors,
+          filterId,
+          name
+        );
         onFiltersSaved?.(newFilterDescriptors);
         return newFilterDescriptors;
       });
@@ -86,14 +70,14 @@ const FilterProvider = ({
             onConfirm: (name) => {
               setDialog(null);
               if (originalFilterName !== name) {
-                renameFilter(id, name);
+                applyNewName(id, name);
               }
             }
           }
         )
       );
     },
-    [renameFilter]
+    [applyNewName]
   );
   const promptForConfirmationOfDelete = useCallback(
     (filterDescriptor) => {
@@ -115,22 +99,26 @@ const FilterProvider = ({
   );
   const handleFilterMenuAction = useCallback(
     (filterId, actionType) => {
-      const targetFilter = findFilter(filterId);
+      const targetFilter = findFilter(filterDescriptors, filterId);
       switch (actionType) {
         case "close":
-          console.log(`clode filter ${filterId}`);
+          console.log(`close filter ${filterId}`);
           break;
         case "edit":
           console.log(`edit filter ${filterId}`);
           break;
         case "remove":
-          promptForConfirmationOfDelete(targetFilter);
+          if (filterId === UNSAVED_FILTER) {
+            console.log("remove unsaved filter");
+          } else {
+            promptForConfirmationOfDelete(targetFilter);
+          }
           break;
         case "rename":
           return PromptForFilterName(targetFilter);
       }
     },
-    [findFilter, promptForConfirmationOfDelete, PromptForFilterName]
+    [filterDescriptors, promptForConfirmationOfDelete, PromptForFilterName]
   );
   const handleSaveFilter = useCallback(
     (filterDescriptor) => {
@@ -144,30 +132,21 @@ const FilterProvider = ({
     },
     [onFiltersSaved]
   );
-  const setActiveFilter = useCallback(
-    (filterId) => {
-      setFilterDescriptors((currentFilterDescriptors) => {
-        const targetFilter = filterId ? findFilter(filterId) : void 0;
-        const newFilterDescriptors = currentFilterDescriptors.map((f) => {
-          if (f.id === filterId) {
-            return {
-              ...f,
-              active: !f.active
-            };
-          } else if (!targetFilter?.active && f.active) {
-            return {
-              ...f,
-              active: false
-            };
-          } else {
-            return f;
-          }
-        });
-        return newFilterDescriptors;
-      });
-    },
-    [findFilter]
-  );
+  const setActiveFilter = useCallback((filter) => {
+    if (typeof filter === "string") {
+      setFilterDescriptors(
+        (currentFilterDescriptors) => activateFilter(currentFilterDescriptors, filter)
+      );
+    } else if (filter) {
+      setFilterDescriptors(
+        (currentFilterDescriptors) => insertOrReplaceFilter(currentFilterDescriptors, {
+          active: true,
+          filter,
+          id: UNSAVED_FILTER
+        })
+      );
+    }
+  }, []);
   return /* @__PURE__ */ jsxs(
     FilterContext.Provider,
     {
@@ -175,6 +154,7 @@ const FilterProvider = ({
         activeFilter: filterDescriptors.find((f) => f.active),
         onApplyFilter: handleApplyFilter,
         onFilterMenuAction: handleFilterMenuAction,
+        deleteFilter,
         saveFilter: handleSaveFilter,
         savedFilters: filterDescriptors,
         setActiveFilter

package/esm/filter-provider/FilterProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterProvider.js","sources":["../../../../packages/vuu-filters/src/filter-provider/FilterProvider.tsx"],"sourcesContent":["import { FilterChangeHandler } from \"@vuu-ui/vuu-filter-types\";\nimport {\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\nimport { FilterMenuActionHandler } from \"../filter-pill/FilterMenu\";\nimport { FilterDescriptor } from \"../saved-filters/useSavedFilterPanel\";\nimport { FilterNamePrompt } from \"../saved-filters/FilterNamePrompt\";\nimport { DeleteFilterPrompt } from \"../saved-filters/DeleteFilterPrompt\";\n\nexport interface FilterContextProps {\n  activeFilter: FilterDescriptor | undefined;\n  saveFilter: (filter: FilterDescriptor) => void;\n  savedFilters?: FilterDescriptor[];\n  onApplyFilter: FilterChangeHandler;\n  onFilterMenuAction?: FilterMenuActionHandler;\n  setActiveFilter: (filterId?: string) => void;\n}\n\nexport const FilterContext = createContext<FilterContextProps>({\n  activeFilter: undefined,\n  savedFilters: [],\n  onApplyFilter: () =>\n    console.warn(\n      \"[FilterContext] onApplyFilter, no FilterProvider has been configured\",\n    ),\n  saveFilter: () =>\n    console.warn(\n      \"[FilterContext] saveFilter, no FilterProvider has been configured\",\n    ),\n  setActiveFilter: () =>\n    console.warn(\n      \"[FilterContext] setActiveFilter, no FilterProvider has been configured\",\n    ),\n});\n\nexport const FilterProvider = ({\n  children,\n  onFiltersSaved,\n  savedFilters = [],\n}: Partial<Pick<FilterContextProps, \"activeFilter\" | \"savedFilters\">> & {\n  children: ReactNode;\n  onFiltersSaved?: (filterDescriptors: FilterDescriptor[]) => void;\n}) => {\n  const [filterDescriptors, setFilterDescriptors] = useState(savedFilters);\n  const [dialog, setDialog] = useState<ReactElement | null>(null);\n\n  const handleApplyFilter = useCallback<FilterChangeHandler>(() => {\n    console.log(\"filter changed\");\n  }, []);\n\n  const findFilter = useCallback(\n    (filterId: string) => {\n      const filter = filterDescriptors.find(({ id }) => id === filterId);\n      if (filter) {\n        return filter;\n      } else {\n        throw Error(\n          `[FilterProvider] findFilter, filter not found ${filterId}`,\n        );\n      }\n    },\n    [filterDescriptors],\n  );\n\n  const deleteFilter = useCallback(\n    (filterId: string) => {\n      setFilterDescriptors((filterDescriptors) => {\n        const newFilterDescriptors = filterDescriptors.filter(\n          ({ id }) => id !== filterId,\n        );\n        onFiltersSaved?.(newFilterDescriptors);\n        return newFilterDescriptors;\n      });\n    },\n    [onFiltersSaved],\n  );\n\n  const renameFilter = useCallback(\n    (filterId: string, filterName: string) => {\n      setFilterDescriptors((currentFilterDescriptors) => {\n        const newFilterDescriptors =\n          currentFilterDescriptors.map<FilterDescriptor>((f) => {\n            if (f.id === filterId) {\n              return {\n                ...f,\n                filter: {\n                  ...f.filter,\n                  name: filterName,\n                },\n              };\n            } else {\n              return f;\n            }\n          });\n        onFiltersSaved?.(newFilterDescriptors);\n        return newFilterDescriptors;\n      });\n    },\n    [onFiltersSaved],\n  );\n\n  const PromptForFilterName = useCallback(\n    ({ filter, id }: FilterDescriptor) => {\n      const originalFilterName = filter.name ?? \"\";\n      setDialog(\n        <FilterNamePrompt\n          filterName={filter.name}\n          title=\"Rename filter\"\n          onClose={() => setDialog(null)}\n          onConfirm={(name) => {\n            setDialog(null);\n            if (originalFilterName !== name) {\n              renameFilter(id, name);\n            }\n          }}\n        />,\n      );\n    },\n    [renameFilter],\n  );\n\n  const promptForConfirmationOfDelete = useCallback(\n    (filterDescriptor: FilterDescriptor) => {\n      setDialog(\n        <DeleteFilterPrompt\n          filterDescriptor={filterDescriptor}\n          onConfirm={() => {\n            setDialog(null);\n            deleteFilter(filterDescriptor.id);\n          }}\n          onClose={() => setDialog(null)}\n        />,\n      );\n    },\n    [deleteFilter],\n  );\n\n  const handleFilterMenuAction = useCallback<FilterMenuActionHandler>(\n    (filterId, actionType) => {\n      const targetFilter = findFilter(filterId);\n      switch (actionType) {\n        case \"close\":\n          console.log(`clode filter ${filterId}`);\n          break;\n        case \"edit\":\n          console.log(`edit filter ${filterId}`);\n          break;\n        case \"remove\":\n          promptForConfirmationOfDelete(targetFilter);\n          break;\n        case \"rename\":\n          return PromptForFilterName(targetFilter);\n      }\n    },\n    [findFilter, promptForConfirmationOfDelete, PromptForFilterName],\n  );\n\n  const handleSaveFilter = useCallback(\n    (filterDescriptor: FilterDescriptor) => {\n      setFilterDescriptors((filterDescriptors) => {\n        const newFilterDescriptors = filterDescriptor.active\n          ? filterDescriptors\n              .map((filterDescriptor) =>\n                filterDescriptor.active\n                  ? { ...filterDescriptor, active: false }\n                  : filterDescriptor,\n              )\n              .concat(filterDescriptor)\n          : filterDescriptors.concat(filterDescriptor);\n        onFiltersSaved?.(newFilterDescriptors);\n        return newFilterDescriptors;\n      });\n    },\n    [onFiltersSaved],\n  );\n\n  const setActiveFilter = useCallback(\n    (filterId?: string) => {\n      setFilterDescriptors((currentFilterDescriptors) => {\n        const targetFilter = filterId ? findFilter(filterId) : undefined;\n        const newFilterDescriptors =\n          currentFilterDescriptors.map<FilterDescriptor>((f) => {\n            if (f.id === filterId) {\n              return {\n                ...f,\n                active: !f.active,\n              };\n            } else if (!targetFilter?.active && f.active) {\n              return {\n                ...f,\n                active: false,\n              };\n            } else {\n              return f;\n            }\n          });\n        return newFilterDescriptors;\n      });\n    },\n    [findFilter],\n  );\n\n  return (\n    <FilterContext.Provider\n      value={{\n        activeFilter: filterDescriptors.find((f) => f.active),\n        onApplyFilter: handleApplyFilter,\n        onFilterMenuAction: handleFilterMenuAction,\n        saveFilter: handleSaveFilter,\n        savedFilters: filterDescriptors,\n        setActiveFilter,\n      }}\n    >\n      {children}\n      {dialog}\n    </FilterContext.Provider>\n  );\n};\n\nexport function useActiveFilter() {\n  const { activeFilter, onApplyFilter } = useContext(FilterContext);\n  return { activeFilter, onApplyFilter };\n}\n\nexport function useSavedFilters() {\n  const {\n    activeFilter,\n    onApplyFilter,\n    onFilterMenuAction,\n    savedFilters,\n    saveFilter,\n    setActiveFilter,\n  } = useContext(FilterContext);\n  return {\n    activeFilter,\n    onApplyFilter,\n    onFilterMenuAction,\n    savedFilters,\n    saveFilter,\n    setActiveFilter,\n  };\n}\n"],"names":["filterDescriptors","filterDescriptor"],"mappings":"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"}
+{"version":3,"file":"FilterProvider.js","sources":["../../../../packages/vuu-filters/src/filter-provider/FilterProvider.tsx"],"sourcesContent":["import { Filter, FilterChangeHandler } from \"@vuu-ui/vuu-filter-types\";\nimport {\n  createContext,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useContext,\n  useState,\n} from \"react\";\nimport { FilterMenuActionHandler } from \"../filter-pill/FilterMenu\";\nimport { FilterDescriptor } from \"../saved-filters/useSavedFilterPanel\";\nimport { FilterNamePrompt } from \"../saved-filters/FilterNamePrompt\";\nimport { DeleteFilterPrompt } from \"../saved-filters/DeleteFilterPrompt\";\nimport {\n  activateFilter,\n  findFilter,\n  insertOrReplaceFilter,\n  renameFilter,\n} from \"./filter-descriptor-utils\";\n\nconst UNSAVED_FILTER = \"unsaved-filter\";\n\nexport interface FilterContextProps {\n  activeFilter: FilterDescriptor | undefined;\n  deleteFilter: (filterId: string) => void;\n  saveFilter: (filter: FilterDescriptor) => void;\n  savedFilters?: FilterDescriptor[];\n  // TODO do we need this ?\n  onApplyFilter: FilterChangeHandler;\n  onFilterMenuAction?: FilterMenuActionHandler;\n  setActiveFilter: (filterId?: string) => void;\n}\n\nexport const FilterContext = createContext<FilterContextProps>({\n  activeFilter: undefined,\n  savedFilters: [],\n  onApplyFilter: () =>\n    console.warn(\n      \"[FilterContext] onApplyFilter, no FilterProvider has been configured\",\n    ),\n  deleteFilter: () =>\n    console.warn(\n      \"[FilterContext] deleteFilter, no FilterProvider has been configured\",\n    ),\n\n  saveFilter: () =>\n    console.warn(\n      \"[FilterContext] saveFilter, no FilterProvider has been configured\",\n    ),\n  setActiveFilter: () =>\n    console.warn(\n      \"[FilterContext] setActiveFilter, no FilterProvider has been configured\",\n    ),\n});\n\nexport const FilterProvider = ({\n  children,\n  onFiltersSaved,\n  savedFilters = [],\n}: Partial<Pick<FilterContextProps, \"activeFilter\" | \"savedFilters\">> & {\n  children: ReactNode;\n  onFiltersSaved?: (filterDescriptors: FilterDescriptor[]) => void;\n}) => {\n  const [filterDescriptors, setFilterDescriptors] = useState(savedFilters);\n  const [dialog, setDialog] = useState<ReactElement | null>(null);\n\n  const handleApplyFilter = useCallback<FilterChangeHandler>(() => {\n    console.log(\"filter changed\");\n  }, []);\n\n  const deleteFilter = useCallback(\n    (filterId: string) => {\n      setFilterDescriptors((filterDescriptors) => {\n        const newFilterDescriptors = filterDescriptors.filter(\n          ({ id }) => id !== filterId,\n        );\n        onFiltersSaved?.(newFilterDescriptors);\n        return newFilterDescriptors;\n      });\n    },\n    [onFiltersSaved],\n  );\n\n  const applyNewName = useCallback(\n    (filterId: string, name: string) => {\n      setFilterDescriptors((currentFilterDescriptors) => {\n        const newFilterDescriptors = renameFilter(\n          currentFilterDescriptors,\n          filterId,\n          name,\n        );\n        onFiltersSaved?.(newFilterDescriptors);\n        return newFilterDescriptors;\n      });\n    },\n    [onFiltersSaved],\n  );\n\n  const PromptForFilterName = useCallback(\n    ({ filter, id }: FilterDescriptor) => {\n      const originalFilterName = filter.name ?? \"\";\n      setDialog(\n        <FilterNamePrompt\n          filterName={filter.name}\n          title=\"Rename filter\"\n          onClose={() => setDialog(null)}\n          onConfirm={(name) => {\n            setDialog(null);\n            if (originalFilterName !== name) {\n              applyNewName(id, name);\n            }\n          }}\n        />,\n      );\n    },\n    [applyNewName],\n  );\n\n  const promptForConfirmationOfDelete = useCallback(\n    (filterDescriptor: FilterDescriptor) => {\n      setDialog(\n        <DeleteFilterPrompt\n          filterDescriptor={filterDescriptor}\n          onConfirm={() => {\n            setDialog(null);\n            deleteFilter(filterDescriptor.id);\n          }}\n          onClose={() => setDialog(null)}\n        />,\n      );\n    },\n    [deleteFilter],\n  );\n\n  const handleFilterMenuAction = useCallback<FilterMenuActionHandler>(\n    (filterId, actionType) => {\n      const targetFilter = findFilter(filterDescriptors, filterId);\n      switch (actionType) {\n        case \"close\":\n          console.log(`close filter ${filterId}`);\n          break;\n        case \"edit\":\n          console.log(`edit filter ${filterId}`);\n          break;\n        case \"remove\":\n          if (filterId === UNSAVED_FILTER) {\n            console.log(\"remove unsaved filter\");\n          } else {\n            promptForConfirmationOfDelete(targetFilter);\n          }\n          break;\n        case \"rename\":\n          return PromptForFilterName(targetFilter);\n      }\n    },\n    [filterDescriptors, promptForConfirmationOfDelete, PromptForFilterName],\n  );\n\n  const handleSaveFilter = useCallback(\n    (filterDescriptor: FilterDescriptor) => {\n      setFilterDescriptors((filterDescriptors) => {\n        const newFilterDescriptors = filterDescriptor.active\n          ? filterDescriptors\n              .map((filterDescriptor) =>\n                filterDescriptor.active\n                  ? { ...filterDescriptor, active: false }\n                  : filterDescriptor,\n              )\n              .concat(filterDescriptor)\n          : filterDescriptors.concat(filterDescriptor);\n        onFiltersSaved?.(newFilterDescriptors);\n        return newFilterDescriptors;\n      });\n    },\n    [onFiltersSaved],\n  );\n\n  /**\n   * Allows switching between saved filtere. ALternatively, an anonymous\n   * filter can be assigned. This is to allow for a dynamically created\n   * filter to be active.\n   */\n  const setActiveFilter = useCallback((filter?: string | Filter) => {\n    if (typeof filter === \"string\") {\n      setFilterDescriptors((currentFilterDescriptors) =>\n        activateFilter(currentFilterDescriptors, filter),\n      );\n    } else if (filter) {\n      setFilterDescriptors((currentFilterDescriptors) =>\n        insertOrReplaceFilter(currentFilterDescriptors, {\n          active: true,\n          filter,\n          id: UNSAVED_FILTER,\n        }),\n      );\n    }\n  }, []);\n\n  return (\n    <FilterContext.Provider\n      value={{\n        activeFilter: filterDescriptors.find((f) => f.active),\n        onApplyFilter: handleApplyFilter,\n        onFilterMenuAction: handleFilterMenuAction,\n        deleteFilter,\n        saveFilter: handleSaveFilter,\n        savedFilters: filterDescriptors,\n        setActiveFilter,\n      }}\n    >\n      {children}\n      {dialog}\n    </FilterContext.Provider>\n  );\n};\n\nexport function useActiveFilter() {\n  const { activeFilter, onApplyFilter } = useContext(FilterContext);\n  return { activeFilter, onApplyFilter };\n}\n\nexport function useSavedFilters() {\n  const {\n    activeFilter,\n    onApplyFilter,\n    onFilterMenuAction,\n    savedFilters,\n    saveFilter,\n    setActiveFilter,\n  } = useContext(FilterContext);\n  return {\n    activeFilter,\n    onApplyFilter,\n    onFilterMenuAction,\n    savedFilters,\n    saveFilter,\n    setActiveFilter,\n  };\n}\n"],"names":["filterDescriptors","filterDescriptor"],"mappings":"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"}

package/esm/filter-provider/filter-descriptor-utils.js

@@ -0,0 +1,58 @@
+function findFilter(filterDescriptors, filterId, throwIfNotFound = true) {
+  const filter = filterDescriptors.find(({ id }) => id === filterId);
+  if (filter) {
+    return filter;
+  } else if (throwIfNotFound) {
+    throw Error(`[FilterProvider] findFilter, filter not found ${filterId}`);
+  }
+}
+const deactivateFilter = (filterDescriptors) => activateFilter(filterDescriptors, void 0);
+const activateFilter = (filterDescriptors, activeFilterId) => filterDescriptors.map((f) => {
+  if (f.id === activeFilterId) {
+    return {
+      ...f,
+      active: !f.active
+    };
+  } else if (f.active) {
+    return {
+      ...f,
+      active: false
+    };
+  } else {
+    return f;
+  }
+});
+const insertOrReplaceFilter = (filterDescriptors, filterDescriptor) => {
+  if (!filterDescriptors.some(({ id }) => id === filterDescriptor.id)) {
+    return deactivateFilter(filterDescriptors).concat(filterDescriptor);
+  } else {
+    return filterDescriptors.map((f) => {
+      if (f.id === filterDescriptor.id) {
+        return filterDescriptor;
+      } else if (f.active) {
+        return {
+          ...f,
+          active: false
+        };
+      } else {
+        return f;
+      }
+    });
+  }
+};
+const renameFilter = (filterDescriptors, filterId, name) => filterDescriptors.map((f) => {
+  if (f.id === filterId) {
+    return {
+      ...f,
+      filter: {
+        ...f.filter,
+        name
+      }
+    };
+  } else {
+    return f;
+  }
+});
+
+export { activateFilter, deactivateFilter, findFilter, insertOrReplaceFilter, renameFilter };
+//# sourceMappingURL=filter-descriptor-utils.js.map

package/esm/filter-provider/filter-descriptor-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-descriptor-utils.js","sources":["../../../../packages/vuu-filters/src/filter-provider/filter-descriptor-utils.ts"],"sourcesContent":["import { FilterDescriptor } from \"../saved-filters/useSavedFilterPanel\";\n\nexport function findFilter(\n  filterDescriptors: FilterDescriptor[],\n  filterId: string,\n  throwIfNotFound?: true,\n): FilterDescriptor;\nexport function findFilter(\n  filterDescriptors: FilterDescriptor[],\n  filterId: string,\n  throwIfNotFound: false,\n): FilterDescriptor | undefined;\nexport function findFilter(\n  filterDescriptors: FilterDescriptor[],\n  filterId: string,\n  throwIfNotFound = true,\n) {\n  const filter = filterDescriptors.find(({ id }) => id === filterId);\n  if (filter) {\n    return filter;\n  } else if (throwIfNotFound) {\n    throw Error(`[FilterProvider] findFilter, filter not found ${filterId}`);\n  }\n}\n\nexport const deactivateFilter = (filterDescriptors: FilterDescriptor[]) =>\n  activateFilter(filterDescriptors, undefined);\n\nexport const activateFilter = (\n  filterDescriptors: FilterDescriptor[],\n  activeFilterId?: string,\n) =>\n  filterDescriptors.map<FilterDescriptor>((f) => {\n    if (f.id === activeFilterId) {\n      return {\n        ...f,\n        active: !f.active,\n      };\n    } else if (f.active) {\n      return {\n        ...f,\n        active: false,\n      };\n    } else {\n      return f;\n    }\n  });\n\nexport const insertOrReplaceFilter = (\n  filterDescriptors: FilterDescriptor[],\n  filterDescriptor: FilterDescriptor,\n) => {\n  if (!filterDescriptors.some(({ id }) => id === filterDescriptor.id)) {\n    return deactivateFilter(filterDescriptors).concat(filterDescriptor);\n  } else {\n    return filterDescriptors.map<FilterDescriptor>((f) => {\n      if (f.id === filterDescriptor.id) {\n        return filterDescriptor;\n      } else if (f.active) {\n        return {\n          ...f,\n          active: false,\n        };\n      } else {\n        return f;\n      }\n    });\n  }\n};\n\nexport const renameFilter = (\n  filterDescriptors: FilterDescriptor[],\n  filterId: string,\n  name: string,\n) =>\n  filterDescriptors.map<FilterDescriptor>((f) => {\n    if (f.id === filterId) {\n      return {\n        ...f,\n        filter: {\n          ...f.filter,\n          name,\n        },\n      };\n    } else {\n      return f;\n    }\n  });\n"],"names":[],"mappings":"AAYO,SAAS,UACd,CAAA,iBAAA,EACA,QACA,EAAA,eAAA,GAAkB,IAClB,EAAA;AACA,EAAM,MAAA,MAAA,GAAS,kBAAkB,IAAK,CAAA,CAAC,EAAE,EAAG,EAAA,KAAM,OAAO,QAAQ,CAAA;AACjE,EAAA,IAAI,MAAQ,EAAA;AACV,IAAO,OAAA,MAAA;AAAA,aACE,eAAiB,EAAA;AAC1B,IAAM,MAAA,KAAA,CAAM,CAAiD,8CAAA,EAAA,QAAQ,CAAE,CAAA,CAAA;AAAA;AAE3E;AAEO,MAAM,gBAAmB,GAAA,CAAC,iBAC/B,KAAA,cAAA,CAAe,mBAAmB,KAAS,CAAA;AAEtC,MAAM,iBAAiB,CAC5B,iBAAA,EACA,mBAEA,iBAAkB,CAAA,GAAA,CAAsB,CAAC,CAAM,KAAA;AAC7C,EAAI,IAAA,CAAA,CAAE,OAAO,cAAgB,EAAA;AAC3B,IAAO,OAAA;AAAA,MACL,GAAG,CAAA;AAAA,MACH,MAAA,EAAQ,CAAC,CAAE,CAAA;AAAA,KACb;AAAA,GACF,MAAA,IAAW,EAAE,MAAQ,EAAA;AACnB,IAAO,OAAA;AAAA,MACL,GAAG,CAAA;AAAA,MACH,MAAQ,EAAA;AAAA,KACV;AAAA,GACK,MAAA;AACL,IAAO,OAAA,CAAA;AAAA;AAEX,CAAC;AAEU,MAAA,qBAAA,GAAwB,CACnC,iBAAA,EACA,gBACG,KAAA;AACH,EAAI,IAAA,CAAC,iBAAkB,CAAA,IAAA,CAAK,CAAC,EAAE,IAAS,KAAA,EAAA,KAAO,gBAAiB,CAAA,EAAE,CAAG,EAAA;AACnE,IAAA,OAAO,gBAAiB,CAAA,iBAAiB,CAAE,CAAA,MAAA,CAAO,gBAAgB,CAAA;AAAA,GAC7D,MAAA;AACL,IAAO,OAAA,iBAAA,CAAkB,GAAsB,CAAA,CAAC,CAAM,KAAA;AACpD,MAAI,IAAA,CAAA,CAAE,EAAO,KAAA,gBAAA,CAAiB,EAAI,EAAA;AAChC,QAAO,OAAA,gBAAA;AAAA,OACT,MAAA,IAAW,EAAE,MAAQ,EAAA;AACnB,QAAO,OAAA;AAAA,UACL,GAAG,CAAA;AAAA,UACH,MAAQ,EAAA;AAAA,SACV;AAAA,OACK,MAAA;AACL,QAAO,OAAA,CAAA;AAAA;AACT,KACD,CAAA;AAAA;AAEL;AAEa,MAAA,YAAA,GAAe,CAC1B,iBACA,EAAA,QAAA,EACA,SAEA,iBAAkB,CAAA,GAAA,CAAsB,CAAC,CAAM,KAAA;AAC7C,EAAI,IAAA,CAAA,CAAE,OAAO,QAAU,EAAA;AACrB,IAAO,OAAA;AAAA,MACL,GAAG,CAAA;AAAA,MACH,MAAQ,EAAA;AAAA,QACN,GAAG,CAAE,CAAA,MAAA;AAAA,QACL;AAAA;AACF,KACF;AAAA,GACK,MAAA;AACL,IAAO,OAAA,CAAA;AAAA;AAEX,CAAC;;;;"}

package/package.json

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

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

@@ -2,7 +2,8 @@ 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, ColumnFilterHookProps {
+import { VuuTypeaheadInputHookProps } from "@vuu-ui/vuu-ui-controls/src/vuu-typeahead-input/useVuuTypeaheadInput";
+export interface ColumnFilterProps extends SegmentedButtonGroupProps, Pick<VuuTypeaheadInputHookProps, "minCharacterCountToTriggerSuggestions">, ColumnFilterHookProps {
     /**
      * Display operator picker.
      */

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

@@ -11,7 +11,7 @@ export type ColumnFilterHookProps = {
      * Filter value. Pair of values expected when operator is
      * 'between'
      */
-    value?: ColumnFilterValue;
+    value: ColumnFilterValue;
     /**
      * Filter change events.
      */

package/types/filter-provider/FilterProvider.d.ts

@@ -4,6 +4,7 @@ import { FilterMenuActionHandler } from "../filter-pill/FilterMenu";
 import { FilterDescriptor } from "../saved-filters/useSavedFilterPanel";
 export interface FilterContextProps {
     activeFilter: FilterDescriptor | undefined;
+    deleteFilter: (filterId: string) => void;
     saveFilter: (filter: FilterDescriptor) => void;
     savedFilters?: FilterDescriptor[];
     onApplyFilter: FilterChangeHandler;

package/types/filter-provider/filter-descriptor-utils.d.ts

@@ -0,0 +1,7 @@
+import { FilterDescriptor } from "../saved-filters/useSavedFilterPanel";
+export declare function findFilter(filterDescriptors: FilterDescriptor[], filterId: string, throwIfNotFound?: true): FilterDescriptor;
+export declare function findFilter(filterDescriptors: FilterDescriptor[], filterId: string, throwIfNotFound: false): FilterDescriptor | undefined;
+export declare const deactivateFilter: (filterDescriptors: FilterDescriptor[]) => FilterDescriptor[];
+export declare const activateFilter: (filterDescriptors: FilterDescriptor[], activeFilterId?: string) => FilterDescriptor[];
+export declare const insertOrReplaceFilter: (filterDescriptors: FilterDescriptor[], filterDescriptor: FilterDescriptor) => FilterDescriptor[];
+export declare const renameFilter: (filterDescriptors: FilterDescriptor[], filterId: string, name: string) => FilterDescriptor[];