@vuu-ui/vuu-filters 0.13.28 → 0.13.30

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

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

package/cjs/column-filter/ColumnFilter.js

@@ -61,11 +61,14 @@ const ColumnFilter = ({
         ] }) : null,
         vuuDataReact.getDataItemEditControl({
           dataDescriptor: column,
+          defaultValue: Array.isArray(value) ? value[0] : value,
           onCommit,
           table
         }),
         operator === "between" ? vuuDataReact.getDataItemEditControl({
+          className: `${classBase}-rangeHigh`,
           dataDescriptor: column,
+          defaultValue: Array.isArray(value) ? value[1] : void 0,
           onCommit,
           table
         }) : null

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"useColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/useColumnFilter.ts"],"sourcesContent":["import { FilterOp } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nexport type FilterValue = string | number;\n\nexport const assertValidValue = (\n  { serverDataType: _ }: ColumnDescriptor,\n  operator: FilterOp | \"between\",\n  value?: FilterValue | FilterValue[],\n) => {\n  if (value !== undefined) {\n    if (operator === \"between\") {\n      if (!Array.isArray(value)) {\n        throw Error(\n          \"[useColumnFilter] 'between operator requires array of two values'\",\n        );\n      } else if (value.length !== 2) {\n        throw Error(\n          `[useColumnFilter] 'between operator requires two values, received ${value.length}'`,\n        );\n      } else if (typeof value[0] !== typeof value[1]) {\n        throw Error(\n          `[useColumnFilter] 'between operator values must be of same type, received ${typeof value[0]} and ${typeof value[1]}`,\n        );\n      }\n    }\n    // TODO validate value(s) against serverDataType\n  }\n};\n\nexport interface ColumnFilterHookProps {\n  column: ColumnDescriptor;\n  operator?: FilterOp | \"between\";\n}\n\n// export const useColumnFilter = ({\n//   column,\n//   operator = \"=\",\n// }: ColumnFilterHookProps) => {};\n"],"names":[],"mappings":";;AAKO,MAAM,mBAAmB,CAC9B,EAAE,gBAAgB,CAAE,EAAA,EACpB,UACA,KACG,KAAA;AACH,EAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,IAAA,IAAI,aAAa,SAAW,EAAA;AAC1B,MAAA,IAAI,CAAC,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACzB,QAAM,MAAA,KAAA;AAAA,UACJ;AAAA,SACF;AAAA,OACF,MAAA,IAAW,KAAM,CAAA,MAAA,KAAW,CAAG,EAAA;AAC7B,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,kEAAA,EAAqE,MAAM,MAAM,CAAA,CAAA;AAAA,SACnF;AAAA,OACF,MAAA,IAAW,OAAO,KAAM,CAAA,CAAC,MAAM,OAAO,KAAA,CAAM,CAAC,CAAG,EAAA;AAC9C,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,0EAAA,EAA6E,OAAO,KAAM,CAAA,CAAC,CAAC,CAAQ,KAAA,EAAA,OAAO,KAAM,CAAA,CAAC,CAAC,CAAA;AAAA,SACrH;AAAA;AACF;AACF;AAGJ;;;;"}
+{"version":3,"file":"useColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/useColumnFilter.ts"],"sourcesContent":["import { FilterOp } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nexport type FilterValue = string | number | [string, string] | [number, number];\n\nexport const assertValidValue = (\n  { serverDataType: _ }: ColumnDescriptor,\n  operator: FilterOp | \"between\",\n  value?: FilterValue | FilterValue[],\n) => {\n  if (value !== undefined) {\n    if (operator === \"between\") {\n      if (!Array.isArray(value)) {\n        throw Error(\n          \"[useColumnFilter] 'between operator requires array of two values'\",\n        );\n      } else if (value.length !== 2) {\n        throw Error(\n          `[useColumnFilter] 'between operator requires two values, received ${value.length}'`,\n        );\n      } else if (typeof value[0] !== typeof value[1]) {\n        throw Error(\n          `[useColumnFilter] 'between operator values must be of same type, received ${typeof value[0]} and ${typeof value[1]}`,\n        );\n      }\n    }\n    // TODO validate value(s) against serverDataType\n  }\n};\n\nexport interface ColumnFilterHookProps {\n  column: ColumnDescriptor;\n  operator?: FilterOp | \"between\";\n}\n\n// export const useColumnFilter = ({\n//   column,\n//   operator = \"=\",\n// }: ColumnFilterHookProps) => {};\n"],"names":[],"mappings":";;AAKO,MAAM,mBAAmB,CAC9B,EAAE,gBAAgB,CAAE,EAAA,EACpB,UACA,KACG,KAAA;AACH,EAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,IAAA,IAAI,aAAa,SAAW,EAAA;AAC1B,MAAA,IAAI,CAAC,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACzB,QAAM,MAAA,KAAA;AAAA,UACJ;AAAA,SACF;AAAA,OACF,MAAA,IAAW,KAAM,CAAA,MAAA,KAAW,CAAG,EAAA;AAC7B,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,kEAAA,EAAqE,MAAM,MAAM,CAAA,CAAA;AAAA,SACnF;AAAA,OACF,MAAA,IAAW,OAAO,KAAM,CAAA,CAAC,MAAM,OAAO,KAAA,CAAM,CAAC,CAAG,EAAA;AAC9C,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,0EAAA,EAA6E,OAAO,KAAM,CAAA,CAAC,CAAC,CAAQ,KAAA,EAAA,OAAO,KAAM,CAAA,CAAC,CAAC,CAAA;AAAA,SACrH;AAAA;AACF;AACF;AAGJ;;;;"}

package/cjs/saved-filters/SavedFilterPanel.js

@@ -10,13 +10,14 @@ var useSavedFilterPanel = require('./useSavedFilterPanel.js');
 var SavedFilterPanel$1 = require('./SavedFilterPanel.css.js');
 
 const classBase = "vuuSavedFilterPanel";
-const filterPillPermissions = {
+const defaultFilterPillPermissions = {
   allowEdit: true,
   allowRename: true,
   allowRemove: true
 };
 const SavedFilterPanel = ({
   className,
+  filterPillPermissions = defaultFilterPillPermissions,
   ...htmlAttributes
 }) => {
   const targetWindow = window.useWindow();
@@ -25,6 +26,15 @@ const SavedFilterPanel = ({
     css: SavedFilterPanel$1,
     window: targetWindow
   });
+  const permissions = react.useMemo(() => {
+    const {
+      allowClose = defaultFilterPillPermissions.allowClose,
+      allowEdit = defaultFilterPillPermissions.allowEdit,
+      allowRemove = defaultFilterPillPermissions.allowRename,
+      allowRename = defaultFilterPillPermissions.allowRename
+    } = filterPillPermissions;
+    return { allowClose, allowEdit, allowRemove, allowRename };
+  }, [filterPillPermissions]);
   const { onClickFilter, onFilterMenuAction, savedFilters } = useSavedFilterPanel.useSavedFilterPanel();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -38,7 +48,7 @@ const SavedFilterPanel = ({
           key: i,
           onClick: onClickFilter,
           onMenuAction: onFilterMenuAction,
-          permissions: filterPillPermissions
+          permissions
         }
       )) })
     }

package/cjs/saved-filters/SavedFilterPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SavedFilterPanel.js","sources":["../../../../packages/vuu-filters/src/saved-filters/SavedFilterPanel.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { FilterPillNext } from \"../filter-pill/FilterPillNext\";\nimport { useSavedFilterPanel } from \"./useSavedFilterPanel\";\n\nimport savedFilterPanelCss from \"./SavedFilterPanel.css\";\nimport { FilterPermissions } from \"../filter-pill/FilterMenu\";\n\nconst classBase = \"vuuSavedFilterPanel\";\n\nconst filterPillPermissions: FilterPermissions = {\n  allowEdit: true,\n  allowRename: true,\n  allowRemove: true,\n};\n\nexport const SavedFilterPanel = ({\n  className,\n  ...htmlAttributes\n}: HTMLAttributes<HTMLDivElement>) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-saved-filter-panel\",\n    css: savedFilterPanelCss,\n    window: targetWindow,\n  });\n\n  const { onClickFilter, onFilterMenuAction, savedFilters } =\n    useSavedFilterPanel();\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, \"vuuScrollable\", className)}\n    >\n      <div className={`${classBase}-filterPill-container`}>\n        {savedFilters.map((filterDescriptor, i) => (\n          <FilterPillNext\n            {...filterDescriptor}\n            key={i}\n            onClick={onClickFilter}\n            onMenuAction={onFilterMenuAction}\n            permissions={filterPillPermissions}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","savedFilterPanelCss","useSavedFilterPanel","jsx","createElement","FilterPillNext"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,qBAAA;AAElB,MAAM,qBAA2C,GAAA;AAAA,EAC/C,SAAW,EAAA,IAAA;AAAA,EACX,WAAa,EAAA,IAAA;AAAA,EACb,WAAa,EAAA;AACf,CAAA;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,SAAA;AAAA,EACA,GAAG;AACL,CAAsC,KAAA;AACpC,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,aAAA,EAAe,kBAAoB,EAAA,YAAA,KACzCC,uCAAoB,EAAA;AAEtB,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,eAAA,EAAiB,SAAS,CAAA;AAAA,MAEnD,QAAA,kBAAAA,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,yBACzB,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,gBAAA,EAAkB,CACnC,qBAAAC,mBAAA;AAAA,QAACC,6BAAA;AAAA,QAAA;AAAA,UACE,GAAG,gBAAA;AAAA,UACJ,GAAK,EAAA,CAAA;AAAA,UACL,OAAS,EAAA,aAAA;AAAA,UACT,YAAc,EAAA,kBAAA;AAAA,UACd,WAAa,EAAA;AAAA;AAAA,OAEhB,CACH,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"SavedFilterPanel.js","sources":["../../../../packages/vuu-filters/src/saved-filters/SavedFilterPanel.tsx"],"sourcesContent":["import { HTMLAttributes, useMemo } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { FilterPillNext } from \"../filter-pill/FilterPillNext\";\nimport { useSavedFilterPanel } from \"./useSavedFilterPanel\";\n\nimport savedFilterPanelCss from \"./SavedFilterPanel.css\";\nimport { FilterPermissions } from \"../filter-pill/FilterMenu\";\n\nconst classBase = \"vuuSavedFilterPanel\";\n\nconst defaultFilterPillPermissions: FilterPermissions = {\n  allowEdit: true,\n  allowRename: true,\n  allowRemove: true,\n};\n\nexport const SavedFilterPanel = ({\n  className,\n  filterPillPermissions = defaultFilterPillPermissions,\n  ...htmlAttributes\n}: HTMLAttributes<HTMLDivElement> & {\n  filterPillPermissions?: FilterPermissions;\n}) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-saved-filter-panel\",\n    css: savedFilterPanelCss,\n    window: targetWindow,\n  });\n\n  const permissions = useMemo<FilterPermissions>(() => {\n    const {\n      allowClose = defaultFilterPillPermissions.allowClose,\n      allowEdit = defaultFilterPillPermissions.allowEdit,\n      allowRemove = defaultFilterPillPermissions.allowRename,\n      allowRename = defaultFilterPillPermissions.allowRename,\n    } = filterPillPermissions;\n    return { allowClose, allowEdit, allowRemove, allowRename };\n  }, [filterPillPermissions]);\n\n  const { onClickFilter, onFilterMenuAction, savedFilters } =\n    useSavedFilterPanel();\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, \"vuuScrollable\", className)}\n    >\n      <div className={`${classBase}-filterPill-container`}>\n        {savedFilters.map((filterDescriptor, i) => (\n          <FilterPillNext\n            {...filterDescriptor}\n            key={i}\n            onClick={onClickFilter}\n            onMenuAction={onFilterMenuAction}\n            permissions={permissions}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","savedFilterPanelCss","useMemo","useSavedFilterPanel","jsx","createElement","FilterPillNext"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,qBAAA;AAElB,MAAM,4BAAkD,GAAA;AAAA,EACtD,SAAW,EAAA,IAAA;AAAA,EACX,WAAa,EAAA,IAAA;AAAA,EACb,WAAa,EAAA;AACf,CAAA;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,SAAA;AAAA,EACA,qBAAwB,GAAA,4BAAA;AAAA,EACxB,GAAG;AACL,CAEM,KAAA;AACJ,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,WAAA,GAAcC,cAA2B,MAAM;AACnD,IAAM,MAAA;AAAA,MACJ,aAAa,4BAA6B,CAAA,UAAA;AAAA,MAC1C,YAAY,4BAA6B,CAAA,SAAA;AAAA,MACzC,cAAc,4BAA6B,CAAA,WAAA;AAAA,MAC3C,cAAc,4BAA6B,CAAA;AAAA,KACzC,GAAA,qBAAA;AACJ,IAAA,OAAO,EAAE,UAAA,EAAY,SAAW,EAAA,WAAA,EAAa,WAAY,EAAA;AAAA,GAC3D,EAAG,CAAC,qBAAqB,CAAC,CAAA;AAE1B,EAAA,MAAM,EAAE,aAAA,EAAe,kBAAoB,EAAA,YAAA,KACzCC,uCAAoB,EAAA;AAEtB,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,eAAA,EAAiB,SAAS,CAAA;AAAA,MAEnD,QAAA,kBAAAA,cAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,yBACzB,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,gBAAA,EAAkB,CACnC,qBAAAC,mBAAA;AAAA,QAACC,6BAAA;AAAA,QAAA;AAAA,UACE,GAAG,gBAAA;AAAA,UACJ,GAAK,EAAA,CAAA;AAAA,UACL,OAAS,EAAA,aAAA;AAAA,UACT,YAAc,EAAA,kBAAA;AAAA,UACd;AAAA;AAAA,OAEH,CACH,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

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

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

package/esm/column-filter/ColumnFilter.js

@@ -59,11 +59,14 @@ const ColumnFilter = ({
         ] }) : null,
         getDataItemEditControl({
           dataDescriptor: column,
+          defaultValue: Array.isArray(value) ? value[0] : value,
           onCommit,
           table
         }),
         operator === "between" ? getDataItemEditControl({
+          className: `${classBase}-rangeHigh`,
           dataDescriptor: column,
+          defaultValue: Array.isArray(value) ? value[1] : void 0,
           onCommit,
           table
         }) : null

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

@@ -1 +1 @@
-{"version":3,"file":"ColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/ColumnFilter.tsx"],"sourcesContent":["import {\n  Button,\n  Menu,\n  MenuItem,\n  MenuPanel,\n  MenuTrigger,\n  SegmentedButtonGroup,\n  SegmentedButtonGroupProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport columnFilterCss from \"./ColumnFilter.css\";\nimport { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { useCallback, useMemo } from \"react\";\nimport { CommitHandler } from \"@vuu-ui/vuu-utils\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  assertValidValue,\n  ColumnFilterHookProps,\n  FilterValue,\n} from \"./useColumnFilter\";\n\nconst classBase = \"vuuColumnFilter\";\n\nexport interface ColumnFilterProps\n  extends ColumnFilterHookProps,\n    SegmentedButtonGroupProps {\n  showOperatorPicker?: boolean;\n  /**\n   * VuuTable is required if typeahead support is expected.\n   */\n  table?: VuuTable;\n\n  /**\n   * Initial filter value. Pair of values expewcted when operator is\n   * 'between'\n   */\n  value?: FilterValue | [FilterValue, FilterValue];\n}\n\nexport const ColumnFilter = ({\n  column,\n  className,\n  operator = \"=\",\n  showOperatorPicker = false,\n  table,\n  value,\n  ...buttonGroupProps\n}: ColumnFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-bar\",\n    css: columnFilterCss,\n    window: targetWindow,\n  });\n\n  useMemo(\n    () => assertValidValue(column, operator, value),\n    [column, operator, value],\n  );\n\n  const onCommit = useCallback<CommitHandler<HTMLElement>>((e, value) => {\n    console.log(`onCommit ${value}`);\n  }, []);\n\n  return (\n    <SegmentedButtonGroup\n      {...buttonGroupProps}\n      className={cx(classBase, className)}\n    >\n      {showOperatorPicker ? (\n        <Menu placement=\"bottom-start\">\n          <MenuTrigger>\n            <Button\n              appearance=\"solid\"\n              aria-label=\"Open Menu\"\n              className={`${classBase}-trigger`}\n              data-embedded\n              sentiment=\"neutral\"\n            >\n              {operator}\n            </Button>\n          </MenuTrigger>\n          <MenuPanel>\n            <MenuItem>=</MenuItem>\n            <MenuItem>!=</MenuItem>\n            <MenuItem>starts</MenuItem>\n            <MenuItem>ends</MenuItem>\n            <MenuItem>contains</MenuItem>\n          </MenuPanel>\n        </Menu>\n      ) : null}\n      {getDataItemEditControl({\n        dataDescriptor: column,\n        onCommit,\n        table,\n      })}\n      {operator === \"between\"\n        ? getDataItemEditControl({\n            dataDescriptor: column,\n            onCommit,\n            table,\n          })\n        : null}\n    </SegmentedButtonGroup>\n  );\n};\n"],"names":["value"],"mappings":";;;;;;;;;;AAwBA,MAAM,SAAY,GAAA,iBAAA;AAkBX,MAAM,eAAe,CAAC;AAAA,EAC3B,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAW,GAAA,GAAA;AAAA,EACX,kBAAqB,GAAA,KAAA;AAAA,EACrB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,OAAA;AAAA,IACE,MAAM,gBAAA,CAAiB,MAAQ,EAAA,QAAA,EAAU,KAAK,CAAA;AAAA,IAC9C,CAAC,MAAQ,EAAA,QAAA,EAAU,KAAK;AAAA,GAC1B;AAEA,EAAA,MAAM,QAAW,GAAA,WAAA,CAAwC,CAAC,CAAA,EAAGA,MAAU,KAAA;AACrE,IAAQ,OAAA,CAAA,GAAA,CAAI,CAAYA,SAAAA,EAAAA,MAAK,CAAE,CAAA,CAAA;AAAA,GACjC,EAAG,EAAE,CAAA;AAEL,EACE,uBAAA,IAAA;AAAA,IAAC,oBAAA;AAAA,IAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,QACC,kBAAA,mBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAU,cACd,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,WACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,UAAW,EAAA,OAAA;AAAA,cACX,YAAW,EAAA,WAAA;AAAA,cACX,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,eAAa,EAAA,IAAA;AAAA,cACb,SAAU,EAAA,SAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WAEL,EAAA,CAAA;AAAA,+BACC,SACC,EAAA,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAS,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,4BACX,GAAA,CAAC,YAAS,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,4BACZ,GAAA,CAAC,YAAS,QAAM,EAAA,QAAA,EAAA,CAAA;AAAA,4BAChB,GAAA,CAAC,YAAS,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,4BACd,GAAA,CAAC,YAAS,QAAQ,EAAA,UAAA,EAAA;AAAA,WACpB,EAAA;AAAA,SAAA,EACF,CACE,GAAA,IAAA;AAAA,QACH,sBAAuB,CAAA;AAAA,UACtB,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAA;AAAA,UACA;AAAA,SACD,CAAA;AAAA,QACA,QAAA,KAAa,YACV,sBAAuB,CAAA;AAAA,UACrB,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAA;AAAA,UACA;AAAA,SACD,CACD,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ;;;;"}
+{"version":3,"file":"ColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/ColumnFilter.tsx"],"sourcesContent":["import {\n  Button,\n  Menu,\n  MenuItem,\n  MenuPanel,\n  MenuTrigger,\n  SegmentedButtonGroup,\n  SegmentedButtonGroupProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\n\nimport columnFilterCss from \"./ColumnFilter.css\";\nimport { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { useCallback, useMemo } from \"react\";\nimport { CommitHandler } from \"@vuu-ui/vuu-utils\";\nimport { VuuTable } from \"@vuu-ui/vuu-protocol-types\";\nimport {\n  assertValidValue,\n  ColumnFilterHookProps,\n  FilterValue,\n} from \"./useColumnFilter\";\n\nconst classBase = \"vuuColumnFilter\";\n\nexport interface ColumnFilterProps\n  extends ColumnFilterHookProps,\n    SegmentedButtonGroupProps {\n  showOperatorPicker?: boolean;\n  /**\n   * VuuTable is required if typeahead support is expected.\n   */\n  table?: VuuTable;\n\n  /**\n   * Initial filter value. Pair of values expewcted when operator is\n   * 'between'\n   */\n  value?: FilterValue | [FilterValue, FilterValue];\n}\n\nexport const ColumnFilter = ({\n  column,\n  className,\n  operator = \"=\",\n  showOperatorPicker = false,\n  table,\n  value,\n  ...buttonGroupProps\n}: ColumnFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-bar\",\n    css: columnFilterCss,\n    window: targetWindow,\n  });\n\n  useMemo(\n    () => assertValidValue(column, operator, value),\n    [column, operator, value],\n  );\n\n  const onCommit = useCallback<CommitHandler<HTMLElement>>((e, value) => {\n    console.log(`onCommit ${value}`);\n  }, []);\n\n  return (\n    <SegmentedButtonGroup\n      {...buttonGroupProps}\n      className={cx(classBase, className)}\n    >\n      {showOperatorPicker ? (\n        <Menu placement=\"bottom-start\">\n          <MenuTrigger>\n            <Button\n              appearance=\"solid\"\n              aria-label=\"Open Menu\"\n              className={`${classBase}-trigger`}\n              data-embedded\n              sentiment=\"neutral\"\n            >\n              {operator}\n            </Button>\n          </MenuTrigger>\n          <MenuPanel>\n            <MenuItem>=</MenuItem>\n            <MenuItem>!=</MenuItem>\n            <MenuItem>starts</MenuItem>\n            <MenuItem>ends</MenuItem>\n            <MenuItem>contains</MenuItem>\n          </MenuPanel>\n        </Menu>\n      ) : null}\n      {getDataItemEditControl({\n        dataDescriptor: column,\n        defaultValue: Array.isArray(value)\n          ? (value[0] as string)\n          : (value as string),\n        onCommit,\n        table,\n      })}\n      {operator === \"between\"\n        ? getDataItemEditControl({\n            className: `${classBase}-rangeHigh`,\n            dataDescriptor: column,\n            defaultValue: Array.isArray(value)\n              ? (value[1] as string)\n              : undefined,\n            onCommit,\n            table,\n          })\n        : null}\n    </SegmentedButtonGroup>\n  );\n};\n"],"names":["value"],"mappings":";;;;;;;;;;AAwBA,MAAM,SAAY,GAAA,iBAAA;AAkBX,MAAM,eAAe,CAAC;AAAA,EAC3B,MAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAW,GAAA,GAAA;AAAA,EACX,kBAAqB,GAAA,KAAA;AAAA,EACrB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,OAAA;AAAA,IACE,MAAM,gBAAA,CAAiB,MAAQ,EAAA,QAAA,EAAU,KAAK,CAAA;AAAA,IAC9C,CAAC,MAAQ,EAAA,QAAA,EAAU,KAAK;AAAA,GAC1B;AAEA,EAAA,MAAM,QAAW,GAAA,WAAA,CAAwC,CAAC,CAAA,EAAGA,MAAU,KAAA;AACrE,IAAQ,OAAA,CAAA,GAAA,CAAI,CAAYA,SAAAA,EAAAA,MAAK,CAAE,CAAA,CAAA;AAAA,GACjC,EAAG,EAAE,CAAA;AAEL,EACE,uBAAA,IAAA;AAAA,IAAC,oBAAA;AAAA,IAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAEjC,QAAA,EAAA;AAAA,QACC,kBAAA,mBAAA,IAAA,CAAC,IAAK,EAAA,EAAA,SAAA,EAAU,cACd,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,WACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,UAAW,EAAA,OAAA;AAAA,cACX,YAAW,EAAA,WAAA;AAAA,cACX,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,eAAa,EAAA,IAAA;AAAA,cACb,SAAU,EAAA,SAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WAEL,EAAA,CAAA;AAAA,+BACC,SACC,EAAA,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,YAAS,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,4BACX,GAAA,CAAC,YAAS,QAAE,EAAA,IAAA,EAAA,CAAA;AAAA,4BACZ,GAAA,CAAC,YAAS,QAAM,EAAA,QAAA,EAAA,CAAA;AAAA,4BAChB,GAAA,CAAC,YAAS,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,4BACd,GAAA,CAAC,YAAS,QAAQ,EAAA,UAAA,EAAA;AAAA,WACpB,EAAA;AAAA,SAAA,EACF,CACE,GAAA,IAAA;AAAA,QACH,sBAAuB,CAAA;AAAA,UACtB,cAAgB,EAAA,MAAA;AAAA,UAChB,cAAc,KAAM,CAAA,OAAA,CAAQ,KAAK,CAC5B,GAAA,KAAA,CAAM,CAAC,CACP,GAAA,KAAA;AAAA,UACL,QAAA;AAAA,UACA;AAAA,SACD,CAAA;AAAA,QACA,QAAA,KAAa,YACV,sBAAuB,CAAA;AAAA,UACrB,SAAA,EAAW,GAAG,SAAS,CAAA,UAAA,CAAA;AAAA,UACvB,cAAgB,EAAA,MAAA;AAAA,UAChB,cAAc,KAAM,CAAA,OAAA,CAAQ,KAAK,CAC5B,GAAA,KAAA,CAAM,CAAC,CACR,GAAA,KAAA,CAAA;AAAA,UACJ,QAAA;AAAA,UACA;AAAA,SACD,CACD,GAAA;AAAA;AAAA;AAAA,GACN;AAEJ;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/useColumnFilter.ts"],"sourcesContent":["import { FilterOp } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nexport type FilterValue = string | number;\n\nexport const assertValidValue = (\n  { serverDataType: _ }: ColumnDescriptor,\n  operator: FilterOp | \"between\",\n  value?: FilterValue | FilterValue[],\n) => {\n  if (value !== undefined) {\n    if (operator === \"between\") {\n      if (!Array.isArray(value)) {\n        throw Error(\n          \"[useColumnFilter] 'between operator requires array of two values'\",\n        );\n      } else if (value.length !== 2) {\n        throw Error(\n          `[useColumnFilter] 'between operator requires two values, received ${value.length}'`,\n        );\n      } else if (typeof value[0] !== typeof value[1]) {\n        throw Error(\n          `[useColumnFilter] 'between operator values must be of same type, received ${typeof value[0]} and ${typeof value[1]}`,\n        );\n      }\n    }\n    // TODO validate value(s) against serverDataType\n  }\n};\n\nexport interface ColumnFilterHookProps {\n  column: ColumnDescriptor;\n  operator?: FilterOp | \"between\";\n}\n\n// export const useColumnFilter = ({\n//   column,\n//   operator = \"=\",\n// }: ColumnFilterHookProps) => {};\n"],"names":[],"mappings":"AAKO,MAAM,mBAAmB,CAC9B,EAAE,gBAAgB,CAAE,EAAA,EACpB,UACA,KACG,KAAA;AACH,EAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,IAAA,IAAI,aAAa,SAAW,EAAA;AAC1B,MAAA,IAAI,CAAC,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACzB,QAAM,MAAA,KAAA;AAAA,UACJ;AAAA,SACF;AAAA,OACF,MAAA,IAAW,KAAM,CAAA,MAAA,KAAW,CAAG,EAAA;AAC7B,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,kEAAA,EAAqE,MAAM,MAAM,CAAA,CAAA;AAAA,SACnF;AAAA,OACF,MAAA,IAAW,OAAO,KAAM,CAAA,CAAC,MAAM,OAAO,KAAA,CAAM,CAAC,CAAG,EAAA;AAC9C,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,0EAAA,EAA6E,OAAO,KAAM,CAAA,CAAC,CAAC,CAAQ,KAAA,EAAA,OAAO,KAAM,CAAA,CAAC,CAAC,CAAA;AAAA,SACrH;AAAA;AACF;AACF;AAGJ;;;;"}
+{"version":3,"file":"useColumnFilter.js","sources":["../../../../packages/vuu-filters/src/column-filter/useColumnFilter.ts"],"sourcesContent":["import { FilterOp } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\n\nexport type FilterValue = string | number | [string, string] | [number, number];\n\nexport const assertValidValue = (\n  { serverDataType: _ }: ColumnDescriptor,\n  operator: FilterOp | \"between\",\n  value?: FilterValue | FilterValue[],\n) => {\n  if (value !== undefined) {\n    if (operator === \"between\") {\n      if (!Array.isArray(value)) {\n        throw Error(\n          \"[useColumnFilter] 'between operator requires array of two values'\",\n        );\n      } else if (value.length !== 2) {\n        throw Error(\n          `[useColumnFilter] 'between operator requires two values, received ${value.length}'`,\n        );\n      } else if (typeof value[0] !== typeof value[1]) {\n        throw Error(\n          `[useColumnFilter] 'between operator values must be of same type, received ${typeof value[0]} and ${typeof value[1]}`,\n        );\n      }\n    }\n    // TODO validate value(s) against serverDataType\n  }\n};\n\nexport interface ColumnFilterHookProps {\n  column: ColumnDescriptor;\n  operator?: FilterOp | \"between\";\n}\n\n// export const useColumnFilter = ({\n//   column,\n//   operator = \"=\",\n// }: ColumnFilterHookProps) => {};\n"],"names":[],"mappings":"AAKO,MAAM,mBAAmB,CAC9B,EAAE,gBAAgB,CAAE,EAAA,EACpB,UACA,KACG,KAAA;AACH,EAAA,IAAI,UAAU,KAAW,CAAA,EAAA;AACvB,IAAA,IAAI,aAAa,SAAW,EAAA;AAC1B,MAAA,IAAI,CAAC,KAAA,CAAM,OAAQ,CAAA,KAAK,CAAG,EAAA;AACzB,QAAM,MAAA,KAAA;AAAA,UACJ;AAAA,SACF;AAAA,OACF,MAAA,IAAW,KAAM,CAAA,MAAA,KAAW,CAAG,EAAA;AAC7B,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,kEAAA,EAAqE,MAAM,MAAM,CAAA,CAAA;AAAA,SACnF;AAAA,OACF,MAAA,IAAW,OAAO,KAAM,CAAA,CAAC,MAAM,OAAO,KAAA,CAAM,CAAC,CAAG,EAAA;AAC9C,QAAM,MAAA,KAAA;AAAA,UACJ,CAAA,0EAAA,EAA6E,OAAO,KAAM,CAAA,CAAC,CAAC,CAAQ,KAAA,EAAA,OAAO,KAAM,CAAA,CAAC,CAAC,CAAA;AAAA,SACrH;AAAA;AACF;AACF;AAGJ;;;;"}

package/esm/saved-filters/SavedFilterPanel.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { createElement } from 'react';
+import { useMemo, createElement } from 'react';
 import cx from 'clsx';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
@@ -8,13 +8,14 @@ import { useSavedFilterPanel } from './useSavedFilterPanel.js';
 import savedFilterPanelCss from './SavedFilterPanel.css.js';
 
 const classBase = "vuuSavedFilterPanel";
-const filterPillPermissions = {
+const defaultFilterPillPermissions = {
   allowEdit: true,
   allowRename: true,
   allowRemove: true
 };
 const SavedFilterPanel = ({
   className,
+  filterPillPermissions = defaultFilterPillPermissions,
   ...htmlAttributes
 }) => {
   const targetWindow = useWindow();
@@ -23,6 +24,15 @@ const SavedFilterPanel = ({
     css: savedFilterPanelCss,
     window: targetWindow
   });
+  const permissions = useMemo(() => {
+    const {
+      allowClose = defaultFilterPillPermissions.allowClose,
+      allowEdit = defaultFilterPillPermissions.allowEdit,
+      allowRemove = defaultFilterPillPermissions.allowRename,
+      allowRename = defaultFilterPillPermissions.allowRename
+    } = filterPillPermissions;
+    return { allowClose, allowEdit, allowRemove, allowRename };
+  }, [filterPillPermissions]);
   const { onClickFilter, onFilterMenuAction, savedFilters } = useSavedFilterPanel();
   return /* @__PURE__ */ jsx(
     "div",
@@ -36,7 +46,7 @@ const SavedFilterPanel = ({
           key: i,
           onClick: onClickFilter,
           onMenuAction: onFilterMenuAction,
-          permissions: filterPillPermissions
+          permissions
         }
       )) })
     }

package/esm/saved-filters/SavedFilterPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"SavedFilterPanel.js","sources":["../../../../packages/vuu-filters/src/saved-filters/SavedFilterPanel.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { FilterPillNext } from \"../filter-pill/FilterPillNext\";\nimport { useSavedFilterPanel } from \"./useSavedFilterPanel\";\n\nimport savedFilterPanelCss from \"./SavedFilterPanel.css\";\nimport { FilterPermissions } from \"../filter-pill/FilterMenu\";\n\nconst classBase = \"vuuSavedFilterPanel\";\n\nconst filterPillPermissions: FilterPermissions = {\n  allowEdit: true,\n  allowRename: true,\n  allowRemove: true,\n};\n\nexport const SavedFilterPanel = ({\n  className,\n  ...htmlAttributes\n}: HTMLAttributes<HTMLDivElement>) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-saved-filter-panel\",\n    css: savedFilterPanelCss,\n    window: targetWindow,\n  });\n\n  const { onClickFilter, onFilterMenuAction, savedFilters } =\n    useSavedFilterPanel();\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, \"vuuScrollable\", className)}\n    >\n      <div className={`${classBase}-filterPill-container`}>\n        {savedFilters.map((filterDescriptor, i) => (\n          <FilterPillNext\n            {...filterDescriptor}\n            key={i}\n            onClick={onClickFilter}\n            onMenuAction={onFilterMenuAction}\n            permissions={filterPillPermissions}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,qBAAA;AAElB,MAAM,qBAA2C,GAAA;AAAA,EAC/C,SAAW,EAAA,IAAA;AAAA,EACX,WAAa,EAAA,IAAA;AAAA,EACb,WAAa,EAAA;AACf,CAAA;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,SAAA;AAAA,EACA,GAAG;AACL,CAAsC,KAAA;AACpC,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,aAAA,EAAe,kBAAoB,EAAA,YAAA,KACzC,mBAAoB,EAAA;AAEtB,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,eAAA,EAAiB,SAAS,CAAA;AAAA,MAEnD,QAAA,kBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,yBACzB,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,gBAAA,EAAkB,CACnC,qBAAA,aAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACE,GAAG,gBAAA;AAAA,UACJ,GAAK,EAAA,CAAA;AAAA,UACL,OAAS,EAAA,aAAA;AAAA,UACT,YAAc,EAAA,kBAAA;AAAA,UACd,WAAa,EAAA;AAAA;AAAA,OAEhB,CACH,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"SavedFilterPanel.js","sources":["../../../../packages/vuu-filters/src/saved-filters/SavedFilterPanel.tsx"],"sourcesContent":["import { HTMLAttributes, useMemo } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { FilterPillNext } from \"../filter-pill/FilterPillNext\";\nimport { useSavedFilterPanel } from \"./useSavedFilterPanel\";\n\nimport savedFilterPanelCss from \"./SavedFilterPanel.css\";\nimport { FilterPermissions } from \"../filter-pill/FilterMenu\";\n\nconst classBase = \"vuuSavedFilterPanel\";\n\nconst defaultFilterPillPermissions: FilterPermissions = {\n  allowEdit: true,\n  allowRename: true,\n  allowRemove: true,\n};\n\nexport const SavedFilterPanel = ({\n  className,\n  filterPillPermissions = defaultFilterPillPermissions,\n  ...htmlAttributes\n}: HTMLAttributes<HTMLDivElement> & {\n  filterPillPermissions?: FilterPermissions;\n}) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-saved-filter-panel\",\n    css: savedFilterPanelCss,\n    window: targetWindow,\n  });\n\n  const permissions = useMemo<FilterPermissions>(() => {\n    const {\n      allowClose = defaultFilterPillPermissions.allowClose,\n      allowEdit = defaultFilterPillPermissions.allowEdit,\n      allowRemove = defaultFilterPillPermissions.allowRename,\n      allowRename = defaultFilterPillPermissions.allowRename,\n    } = filterPillPermissions;\n    return { allowClose, allowEdit, allowRemove, allowRename };\n  }, [filterPillPermissions]);\n\n  const { onClickFilter, onFilterMenuAction, savedFilters } =\n    useSavedFilterPanel();\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, \"vuuScrollable\", className)}\n    >\n      <div className={`${classBase}-filterPill-container`}>\n        {savedFilters.map((filterDescriptor, i) => (\n          <FilterPillNext\n            {...filterDescriptor}\n            key={i}\n            onClick={onClickFilter}\n            onMenuAction={onFilterMenuAction}\n            permissions={permissions}\n          />\n        ))}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAUA,MAAM,SAAY,GAAA,qBAAA;AAElB,MAAM,4BAAkD,GAAA;AAAA,EACtD,SAAW,EAAA,IAAA;AAAA,EACX,WAAa,EAAA,IAAA;AAAA,EACb,WAAa,EAAA;AACf,CAAA;AAEO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,SAAA;AAAA,EACA,qBAAwB,GAAA,4BAAA;AAAA,EACxB,GAAG;AACL,CAEM,KAAA;AACJ,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,WAAA,GAAc,QAA2B,MAAM;AACnD,IAAM,MAAA;AAAA,MACJ,aAAa,4BAA6B,CAAA,UAAA;AAAA,MAC1C,YAAY,4BAA6B,CAAA,SAAA;AAAA,MACzC,cAAc,4BAA6B,CAAA,WAAA;AAAA,MAC3C,cAAc,4BAA6B,CAAA;AAAA,KACzC,GAAA,qBAAA;AACJ,IAAA,OAAO,EAAE,UAAA,EAAY,SAAW,EAAA,WAAA,EAAa,WAAY,EAAA;AAAA,GAC3D,EAAG,CAAC,qBAAqB,CAAC,CAAA;AAE1B,EAAA,MAAM,EAAE,aAAA,EAAe,kBAAoB,EAAA,YAAA,KACzC,mBAAoB,EAAA;AAEtB,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,eAAA,EAAiB,SAAS,CAAA;AAAA,MAEnD,QAAA,kBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,yBACzB,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,gBAAA,EAAkB,CACnC,qBAAA,aAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACE,GAAG,gBAAA;AAAA,UACJ,GAAK,EAAA,CAAA;AAAA,UACL,OAAS,EAAA,aAAA;AAAA,UACT,YAAc,EAAA,kBAAA;AAAA,UACd;AAAA;AAAA,OAEH,CACH,EAAA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/package.json

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

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

@@ -1,6 +1,6 @@
 import { FilterOp } from "@vuu-ui/vuu-filter-types";
 import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
-export type FilterValue = string | number;
+export type FilterValue = string | number | [string, string] | [number, number];
 export declare const assertValidValue: ({ serverDataType: _ }: ColumnDescriptor, operator: FilterOp | "between", value?: FilterValue | FilterValue[]) => void;
 export interface ColumnFilterHookProps {
     column: ColumnDescriptor;

package/types/index.d.ts

@@ -4,6 +4,7 @@ export * from "./filter-clause";
 export * from "./filter-editor";
 export * from "./filter-pill";
 export { FilterPillNext, type FilterPillNextProps, } from "./filter-pill/FilterPillNext";
+export { type FilterPermissions } from "./filter-pill/FilterMenu";
 export { FilterProvider, useActiveFilter, useSavedFilters, } from "./filter-provider/FilterProvider";
 export * from "./filter-utils";
 export * from "./FilterModel";

package/types/saved-filters/SavedFilterPanel.d.ts

@@ -1,2 +1,5 @@
 import { HTMLAttributes } from "react";
-export declare const SavedFilterPanel: ({ className, ...htmlAttributes }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+import { FilterPermissions } from "../filter-pill/FilterMenu";
+export declare const SavedFilterPanel: ({ className, filterPillPermissions, ...htmlAttributes }: HTMLAttributes<HTMLDivElement> & {
+    filterPillPermissions?: FilterPermissions;
+}) => import("react/jsx-runtime").JSX.Element;