@vuu-ui/vuu-filters 0.8.69 → 0.8.71

package/cjs/quick-filters/QuickFilters.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var quickFiltersCss = ".vuuQuickFilters {\n    --saltFormField-width: 150px;\n    --saltInput-background: transparent;\n    --saltInput-height: 18px;\n    --saltInput-minHeight: 18px;\n    border: solid 1px var(--salt-editable-borderColor);\n    border-radius: 2px;\n    display: flex;\n    height: 43px;\n    width: fit-content;\n\n    .saltFormField {\n        padding: 2px var(--salt-spacing-200);\n    }\n\n    .saltFormField:not(:last-child) {\n        border-right: solid 1px var(--salt-editable-borderColor);\n    }\n\n\n}";
+var quickFiltersCss = ".vuuQuickFilters {\n  --saltFormField-width: 150px;\n  --saltInput-background: transparent;\n  --saltInput-height: 18px;\n  --saltInput-minHeight: 18px;\n\n  display: flex;\n  gap: var(--salt-spacing-100);\n  align-items: end;\n  width: fit-content;\n\n  .vuuQuickFilters-filter-container {\n    background-color: var(--salt-container-primary-background);\n    border: solid 1px var(--salt-editable-borderColor);\n    border-radius: 2px;\n    display: flex;\n    height: 43px;\n  }\n\n  .saltFormField {\n    padding: 2px var(--salt-spacing-200);\n  }\n\n  .saltFormField:not(:last-child) {\n    border-right: solid 1px var(--salt-editable-borderColor);\n  }\n\n  .vuuTypeaheadInput {\n    .saltPillInput-endAdornmentContainer {\n      .saltButton {\n        border-style: none;\n      }\n    }\n  }\n}\n";
 
 module.exports = quickFiltersCss;
 //# sourceMappingURL=QuickFilters.css.js.map

package/cjs/quick-filters/QuickFilters.js

@@ -40,33 +40,37 @@ const QuickFilters = ({
     ({ name }) => quickFilters?.includes(name)
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classBase, ref: rootRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": "find", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Find" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        vuuUiControls.VuuInput,
-        {
-          inputProps: {
-            onChange
-          },
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${classBase}-filter-container`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-embedded": true, "data-field": "find", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: "Find" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          vuuUiControls.VuuInput,
+          {
+            inputProps: {
+              onChange
+            },
+            onCommit,
+            startAdornment: searchIcon,
+            variant: "secondary"
+          }
+        )
+      ] }),
+      filterColumns?.map((column) => /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": column.name, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: column.label ?? column.name }),
+        vuuDataReact.getDataItemEditControl({
+          column,
           onCommit,
-          startAdornment: searchIcon,
-          variant: "secondary"
-        }
-      )
+          suggestionProvider,
+          table: tableSchema?.table
+        })
+      ] }, column.label ?? column.name))
     ] }),
-    filterColumns?.map((column) => /* @__PURE__ */ jsxRuntime.jsxs(core.FormField, { "data-field": column.name, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldLabel, { children: column.label ?? column.name }),
-      vuuDataReact.getDataItemEditControl({
-        column,
-        onCommit,
-        suggestionProvider,
-        table: tableSchema?.table
-      })
-    ] }, column.label ?? column.name)),
     /* @__PURE__ */ jsxRuntime.jsx(
       vuuUiControls.ColumnPicker,
       {
         columns: availableColumnNames,
+        icon: "more-horiz",
+        iconSize: 16,
         onSelectionChange: onColumnsSelectionChange,
         selected: quickFilters
       }

package/cjs/quick-filters/QuickFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickFilters.js","sources":["../../src/quick-filters/QuickFilters.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnPicker, Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { HTMLAttributes } from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useQuickFilters } from \"./useQuickFilters\";\n\nimport quickFiltersCss from \"./QuickFilters.css\";\n\nconst classBase = \"vuuQuickFilters\";\n\nexport interface QuickFilterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<\n      FilterBarProps,\n      \"onApplyFilter\" | \"suggestionProvider\" | \"tableSchema\"\n    > {\n  availableColumns: ColumnDescriptor[];\n  quickFilterColumns?: string[];\n}\n\nexport const QuickFilters = ({\n  availableColumns,\n  onApplyFilter,\n  quickFilterColumns,\n  suggestionProvider,\n  tableSchema,\n}: QuickFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-quick-filters\",\n    css: quickFiltersCss,\n    window: targetWindow,\n  });\n\n  const searchIcon = <Icon name=\"search\" size={18} />;\n\n  const {\n    availableColumnNames,\n    onChange,\n    onColumnsSelectionChange,\n    onCommit,\n    rootRef,\n    quickFilters,\n  } = useQuickFilters({\n    availableColumns,\n    onApplyFilter,\n    quickFilterColumns,\n  });\n\n  const filterColumns = availableColumns.filter(({ name }) =>\n    quickFilters?.includes(name)\n  );\n\n  return (\n    <div className={classBase} ref={rootRef}>\n      <FormField data-field=\"find\">\n        <FormFieldLabel>Find</FormFieldLabel>\n        <VuuInput\n          inputProps={{\n            onChange,\n          }}\n          onCommit={onCommit}\n          startAdornment={searchIcon}\n          variant=\"secondary\"\n        />\n      </FormField>\n      {filterColumns?.map((column) => (\n        <FormField key={column.label ?? column.name} data-field={column.name}>\n          <FormFieldLabel>{column.label ?? column.name}</FormFieldLabel>\n          {getDataItemEditControl({\n            column,\n            onCommit,\n            suggestionProvider,\n            table: tableSchema?.table,\n          })}\n        </FormField>\n      ))}\n      <ColumnPicker\n        columns={availableColumnNames}\n        onSelectionChange={onColumnsSelectionChange}\n        selected={quickFilters}\n      />\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","quickFiltersCss","jsx","Icon","useQuickFilters","jsxs","FormField","FormFieldLabel","VuuInput","getDataItemEditControl","ColumnPicker"],"mappings":";;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAYX,MAAM,eAAe,CAAC;AAAA,EAC3B,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AACF,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,6BAAcC,cAAA,CAAAC,kBAAA,EAAA,EAAK,IAAK,EAAA,QAAA,EAAS,MAAM,EAAI,EAAA,CAAA,CAAA;AAEjD,EAAM,MAAA;AAAA,IACJ,oBAAA;AAAA,IACA,QAAA;AAAA,IACA,wBAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,MACEC,+BAAgB,CAAA;AAAA,IAClB,gBAAA;AAAA,IACA,aAAA;AAAA,IACA,kBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,gBAAgB,gBAAiB,CAAA,MAAA;AAAA,IAAO,CAAC,EAAE,IAAA,EAC/C,KAAA,YAAA,EAAc,SAAS,IAAI,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,KAAK,OAC9B,EAAA,QAAA,EAAA;AAAA,oBAACA,eAAA,CAAAC,cAAA,EAAA,EAAU,cAAW,MACpB,EAAA,QAAA,EAAA;AAAA,sBAAAJ,cAAA,CAACK,uBAAe,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,sBACpBL,cAAA;AAAA,QAACM,sBAAA;AAAA,QAAA;AAAA,UACC,UAAY,EAAA;AAAA,YACV,QAAA;AAAA,WACF;AAAA,UACA,QAAA;AAAA,UACA,cAAgB,EAAA,UAAA;AAAA,UAChB,OAAQ,EAAA,WAAA;AAAA,SAAA;AAAA,OACV;AAAA,KACF,EAAA,CAAA;AAAA,IACC,aAAA,EAAe,IAAI,CAAC,MAAA,qCAClBF,cAA4C,EAAA,EAAA,YAAA,EAAY,OAAO,IAC9D,EAAA,QAAA,EAAA;AAAA,sBAAAJ,cAAA,CAACK,mBAAgB,EAAA,EAAA,QAAA,EAAA,MAAA,CAAO,KAAS,IAAA,MAAA,CAAO,IAAK,EAAA,CAAA;AAAA,MAC5CE,mCAAuB,CAAA;AAAA,QACtB,MAAA;AAAA,QACA,QAAA;AAAA,QACA,kBAAA;AAAA,QACA,OAAO,WAAa,EAAA,KAAA;AAAA,OACrB,CAAA;AAAA,KAAA,EAAA,EAPa,MAAO,CAAA,KAAA,IAAS,MAAO,CAAA,IAQvC,CACD,CAAA;AAAA,oBACDP,cAAA;AAAA,MAACQ,0BAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,oBAAA;AAAA,QACT,iBAAmB,EAAA,wBAAA;AAAA,QACnB,QAAU,EAAA,YAAA;AAAA,OAAA;AAAA,KACZ;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"QuickFilters.js","sources":["../../src/quick-filters/QuickFilters.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnPicker, Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { HTMLAttributes } from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useQuickFilters } from \"./useQuickFilters\";\n\nimport quickFiltersCss from \"./QuickFilters.css\";\n\nconst classBase = \"vuuQuickFilters\";\n\nexport interface QuickFilterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<\n      FilterBarProps,\n      \"onApplyFilter\" | \"suggestionProvider\" | \"tableSchema\"\n    > {\n  availableColumns: ColumnDescriptor[];\n  quickFilterColumns?: string[];\n}\n\nexport const QuickFilters = ({\n  availableColumns,\n  onApplyFilter,\n  quickFilterColumns,\n  suggestionProvider,\n  tableSchema,\n}: QuickFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-quick-filters\",\n    css: quickFiltersCss,\n    window: targetWindow,\n  });\n\n  const searchIcon = <Icon name=\"search\" size={18} />;\n\n  const {\n    availableColumnNames,\n    onChange,\n    onColumnsSelectionChange,\n    onCommit,\n    rootRef,\n    quickFilters,\n  } = useQuickFilters({\n    availableColumns,\n    onApplyFilter,\n    quickFilterColumns,\n  });\n\n  const filterColumns = availableColumns.filter(({ name }) =>\n    quickFilters?.includes(name)\n  );\n\n  return (\n    <div className={classBase} ref={rootRef}>\n      <div className={`${classBase}-filter-container`}>\n        <FormField data-embedded data-field=\"find\">\n          <FormFieldLabel>Find</FormFieldLabel>\n          <VuuInput\n            inputProps={{\n              onChange,\n            }}\n            onCommit={onCommit}\n            startAdornment={searchIcon}\n            variant=\"secondary\"\n          />\n        </FormField>\n        {filterColumns?.map((column) => (\n          <FormField key={column.label ?? column.name} data-field={column.name}>\n            <FormFieldLabel>{column.label ?? column.name}</FormFieldLabel>\n            {getDataItemEditControl({\n              column,\n              onCommit,\n              suggestionProvider,\n              table: tableSchema?.table,\n            })}\n          </FormField>\n        ))}\n      </div>\n      <ColumnPicker\n        columns={availableColumnNames}\n        icon=\"more-horiz\"\n        iconSize={16}\n        onSelectionChange={onColumnsSelectionChange}\n        selected={quickFilters}\n      />\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","quickFiltersCss","jsx","Icon","useQuickFilters","jsxs","FormField","FormFieldLabel","VuuInput","getDataItemEditControl","ColumnPicker"],"mappings":";;;;;;;;;;;AAYA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAYX,MAAM,eAAe,CAAC;AAAA,EAC3B,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AACF,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAeA,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,6BAAcC,cAAA,CAAAC,kBAAA,EAAA,EAAK,IAAK,EAAA,QAAA,EAAS,MAAM,EAAI,EAAA,CAAA,CAAA;AAEjD,EAAM,MAAA;AAAA,IACJ,oBAAA;AAAA,IACA,QAAA;AAAA,IACA,wBAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,MACEC,+BAAgB,CAAA;AAAA,IAClB,gBAAA;AAAA,IACA,aAAA;AAAA,IACA,kBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,gBAAgB,gBAAiB,CAAA,MAAA;AAAA,IAAO,CAAC,EAAE,IAAA,EAC/C,KAAA,YAAA,EAAc,SAAS,IAAI,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,KAAK,OAC9B,EAAA,QAAA,EAAA;AAAA,oBAAAA,eAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,iBAAA,CAAA,EAAA,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAACC,cAAU,EAAA,EAAA,eAAA,EAAa,IAAC,EAAA,YAAA,EAAW,MAClC,EAAA,QAAA,EAAA;AAAA,wBAAAJ,cAAA,CAACK,uBAAe,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,wBACpBL,cAAA;AAAA,UAACM,sBAAA;AAAA,UAAA;AAAA,YACC,UAAY,EAAA;AAAA,cACV,QAAA;AAAA,aACF;AAAA,YACA,QAAA;AAAA,YACA,cAAgB,EAAA,UAAA;AAAA,YAChB,OAAQ,EAAA,WAAA;AAAA,WAAA;AAAA,SACV;AAAA,OACF,EAAA,CAAA;AAAA,MACC,aAAA,EAAe,IAAI,CAAC,MAAA,qCAClBF,cAA4C,EAAA,EAAA,YAAA,EAAY,OAAO,IAC9D,EAAA,QAAA,EAAA;AAAA,wBAAAJ,cAAA,CAACK,mBAAgB,EAAA,EAAA,QAAA,EAAA,MAAA,CAAO,KAAS,IAAA,MAAA,CAAO,IAAK,EAAA,CAAA;AAAA,QAC5CE,mCAAuB,CAAA;AAAA,UACtB,MAAA;AAAA,UACA,QAAA;AAAA,UACA,kBAAA;AAAA,UACA,OAAO,WAAa,EAAA,KAAA;AAAA,SACrB,CAAA;AAAA,OAAA,EAAA,EAPa,MAAO,CAAA,KAAA,IAAS,MAAO,CAAA,IAQvC,CACD,CAAA;AAAA,KACH,EAAA,CAAA;AAAA,oBACAP,cAAA;AAAA,MAACQ,0BAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,oBAAA;AAAA,QACT,IAAK,EAAA,YAAA;AAAA,QACL,QAAU,EAAA,EAAA;AAAA,QACV,iBAAmB,EAAA,wBAAA;AAAA,QACnB,QAAU,EAAA,YAAA;AAAA,OAAA;AAAA,KACZ;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/quick-filters/QuickFilters.css.js

@@ -1,4 +1,4 @@
-var quickFiltersCss = ".vuuQuickFilters {\n    --saltFormField-width: 150px;\n    --saltInput-background: transparent;\n    --saltInput-height: 18px;\n    --saltInput-minHeight: 18px;\n    border: solid 1px var(--salt-editable-borderColor);\n    border-radius: 2px;\n    display: flex;\n    height: 43px;\n    width: fit-content;\n\n    .saltFormField {\n        padding: 2px var(--salt-spacing-200);\n    }\n\n    .saltFormField:not(:last-child) {\n        border-right: solid 1px var(--salt-editable-borderColor);\n    }\n\n\n}";
+var quickFiltersCss = ".vuuQuickFilters {\n  --saltFormField-width: 150px;\n  --saltInput-background: transparent;\n  --saltInput-height: 18px;\n  --saltInput-minHeight: 18px;\n\n  display: flex;\n  gap: var(--salt-spacing-100);\n  align-items: end;\n  width: fit-content;\n\n  .vuuQuickFilters-filter-container {\n    background-color: var(--salt-container-primary-background);\n    border: solid 1px var(--salt-editable-borderColor);\n    border-radius: 2px;\n    display: flex;\n    height: 43px;\n  }\n\n  .saltFormField {\n    padding: 2px var(--salt-spacing-200);\n  }\n\n  .saltFormField:not(:last-child) {\n    border-right: solid 1px var(--salt-editable-borderColor);\n  }\n\n  .vuuTypeaheadInput {\n    .saltPillInput-endAdornmentContainer {\n      .saltButton {\n        border-style: none;\n      }\n    }\n  }\n}\n";
 
 export { quickFiltersCss as default };
 //# sourceMappingURL=QuickFilters.css.js.map

package/esm/quick-filters/QuickFilters.js

@@ -38,33 +38,37 @@ const QuickFilters = ({
     ({ name }) => quickFilters?.includes(name)
   );
   return /* @__PURE__ */ jsxs("div", { className: classBase, ref: rootRef, children: [
-    /* @__PURE__ */ jsxs(FormField, { "data-field": "find", children: [
-      /* @__PURE__ */ jsx(FormFieldLabel, { children: "Find" }),
-      /* @__PURE__ */ jsx(
-        VuuInput,
-        {
-          inputProps: {
-            onChange
-          },
+    /* @__PURE__ */ jsxs("div", { className: `${classBase}-filter-container`, children: [
+      /* @__PURE__ */ jsxs(FormField, { "data-embedded": true, "data-field": "find", children: [
+        /* @__PURE__ */ jsx(FormFieldLabel, { children: "Find" }),
+        /* @__PURE__ */ jsx(
+          VuuInput,
+          {
+            inputProps: {
+              onChange
+            },
+            onCommit,
+            startAdornment: searchIcon,
+            variant: "secondary"
+          }
+        )
+      ] }),
+      filterColumns?.map((column) => /* @__PURE__ */ jsxs(FormField, { "data-field": column.name, children: [
+        /* @__PURE__ */ jsx(FormFieldLabel, { children: column.label ?? column.name }),
+        getDataItemEditControl({
+          column,
           onCommit,
-          startAdornment: searchIcon,
-          variant: "secondary"
-        }
-      )
+          suggestionProvider,
+          table: tableSchema?.table
+        })
+      ] }, column.label ?? column.name))
     ] }),
-    filterColumns?.map((column) => /* @__PURE__ */ jsxs(FormField, { "data-field": column.name, children: [
-      /* @__PURE__ */ jsx(FormFieldLabel, { children: column.label ?? column.name }),
-      getDataItemEditControl({
-        column,
-        onCommit,
-        suggestionProvider,
-        table: tableSchema?.table
-      })
-    ] }, column.label ?? column.name)),
     /* @__PURE__ */ jsx(
       ColumnPicker,
       {
         columns: availableColumnNames,
+        icon: "more-horiz",
+        iconSize: 16,
         onSelectionChange: onColumnsSelectionChange,
         selected: quickFilters
       }

package/esm/quick-filters/QuickFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"QuickFilters.js","sources":["../../src/quick-filters/QuickFilters.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnPicker, Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { HTMLAttributes } from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useQuickFilters } from \"./useQuickFilters\";\n\nimport quickFiltersCss from \"./QuickFilters.css\";\n\nconst classBase = \"vuuQuickFilters\";\n\nexport interface QuickFilterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<\n      FilterBarProps,\n      \"onApplyFilter\" | \"suggestionProvider\" | \"tableSchema\"\n    > {\n  availableColumns: ColumnDescriptor[];\n  quickFilterColumns?: string[];\n}\n\nexport const QuickFilters = ({\n  availableColumns,\n  onApplyFilter,\n  quickFilterColumns,\n  suggestionProvider,\n  tableSchema,\n}: QuickFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-quick-filters\",\n    css: quickFiltersCss,\n    window: targetWindow,\n  });\n\n  const searchIcon = <Icon name=\"search\" size={18} />;\n\n  const {\n    availableColumnNames,\n    onChange,\n    onColumnsSelectionChange,\n    onCommit,\n    rootRef,\n    quickFilters,\n  } = useQuickFilters({\n    availableColumns,\n    onApplyFilter,\n    quickFilterColumns,\n  });\n\n  const filterColumns = availableColumns.filter(({ name }) =>\n    quickFilters?.includes(name)\n  );\n\n  return (\n    <div className={classBase} ref={rootRef}>\n      <FormField data-field=\"find\">\n        <FormFieldLabel>Find</FormFieldLabel>\n        <VuuInput\n          inputProps={{\n            onChange,\n          }}\n          onCommit={onCommit}\n          startAdornment={searchIcon}\n          variant=\"secondary\"\n        />\n      </FormField>\n      {filterColumns?.map((column) => (\n        <FormField key={column.label ?? column.name} data-field={column.name}>\n          <FormFieldLabel>{column.label ?? column.name}</FormFieldLabel>\n          {getDataItemEditControl({\n            column,\n            onCommit,\n            suggestionProvider,\n            table: tableSchema?.table,\n          })}\n        </FormField>\n      ))}\n      <ColumnPicker\n        columns={availableColumnNames}\n        onSelectionChange={onColumnsSelectionChange}\n        selected={quickFilters}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAYA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAYX,MAAM,eAAe,CAAC;AAAA,EAC3B,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AACF,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,6BAAc,GAAA,CAAA,IAAA,EAAA,EAAK,IAAK,EAAA,QAAA,EAAS,MAAM,EAAI,EAAA,CAAA,CAAA;AAEjD,EAAM,MAAA;AAAA,IACJ,oBAAA;AAAA,IACA,QAAA;AAAA,IACA,wBAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,MACE,eAAgB,CAAA;AAAA,IAClB,gBAAA;AAAA,IACA,aAAA;AAAA,IACA,kBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,gBAAgB,gBAAiB,CAAA,MAAA;AAAA,IAAO,CAAC,EAAE,IAAA,EAC/C,KAAA,YAAA,EAAc,SAAS,IAAI,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,KAAK,OAC9B,EAAA,QAAA,EAAA;AAAA,oBAAC,IAAA,CAAA,SAAA,EAAA,EAAU,cAAW,MACpB,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,kBAAe,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,sBACpB,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACC,UAAY,EAAA;AAAA,YACV,QAAA;AAAA,WACF;AAAA,UACA,QAAA;AAAA,UACA,cAAgB,EAAA,UAAA;AAAA,UAChB,OAAQ,EAAA,WAAA;AAAA,SAAA;AAAA,OACV;AAAA,KACF,EAAA,CAAA;AAAA,IACC,aAAA,EAAe,IAAI,CAAC,MAAA,0BAClB,SAA4C,EAAA,EAAA,YAAA,EAAY,OAAO,IAC9D,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,cAAgB,EAAA,EAAA,QAAA,EAAA,MAAA,CAAO,KAAS,IAAA,MAAA,CAAO,IAAK,EAAA,CAAA;AAAA,MAC5C,sBAAuB,CAAA;AAAA,QACtB,MAAA;AAAA,QACA,QAAA;AAAA,QACA,kBAAA;AAAA,QACA,OAAO,WAAa,EAAA,KAAA;AAAA,OACrB,CAAA;AAAA,KAAA,EAAA,EAPa,MAAO,CAAA,KAAA,IAAS,MAAO,CAAA,IAQvC,CACD,CAAA;AAAA,oBACD,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,oBAAA;AAAA,QACT,iBAAmB,EAAA,wBAAA;AAAA,QACnB,QAAU,EAAA,YAAA;AAAA,OAAA;AAAA,KACZ;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"QuickFilters.js","sources":["../../src/quick-filters/QuickFilters.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport type { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { ColumnPicker, Icon, VuuInput } from \"@vuu-ui/vuu-ui-controls\";\nimport { FormField, FormFieldLabel } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { HTMLAttributes } from \"react\";\nimport { FilterBarProps } from \"../filter-bar\";\nimport { useQuickFilters } from \"./useQuickFilters\";\n\nimport quickFiltersCss from \"./QuickFilters.css\";\n\nconst classBase = \"vuuQuickFilters\";\n\nexport interface QuickFilterProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Pick<\n      FilterBarProps,\n      \"onApplyFilter\" | \"suggestionProvider\" | \"tableSchema\"\n    > {\n  availableColumns: ColumnDescriptor[];\n  quickFilterColumns?: string[];\n}\n\nexport const QuickFilters = ({\n  availableColumns,\n  onApplyFilter,\n  quickFilterColumns,\n  suggestionProvider,\n  tableSchema,\n}: QuickFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-quick-filters\",\n    css: quickFiltersCss,\n    window: targetWindow,\n  });\n\n  const searchIcon = <Icon name=\"search\" size={18} />;\n\n  const {\n    availableColumnNames,\n    onChange,\n    onColumnsSelectionChange,\n    onCommit,\n    rootRef,\n    quickFilters,\n  } = useQuickFilters({\n    availableColumns,\n    onApplyFilter,\n    quickFilterColumns,\n  });\n\n  const filterColumns = availableColumns.filter(({ name }) =>\n    quickFilters?.includes(name)\n  );\n\n  return (\n    <div className={classBase} ref={rootRef}>\n      <div className={`${classBase}-filter-container`}>\n        <FormField data-embedded data-field=\"find\">\n          <FormFieldLabel>Find</FormFieldLabel>\n          <VuuInput\n            inputProps={{\n              onChange,\n            }}\n            onCommit={onCommit}\n            startAdornment={searchIcon}\n            variant=\"secondary\"\n          />\n        </FormField>\n        {filterColumns?.map((column) => (\n          <FormField key={column.label ?? column.name} data-field={column.name}>\n            <FormFieldLabel>{column.label ?? column.name}</FormFieldLabel>\n            {getDataItemEditControl({\n              column,\n              onCommit,\n              suggestionProvider,\n              table: tableSchema?.table,\n            })}\n          </FormField>\n        ))}\n      </div>\n      <ColumnPicker\n        columns={availableColumnNames}\n        icon=\"more-horiz\"\n        iconSize={16}\n        onSelectionChange={onColumnsSelectionChange}\n        selected={quickFilters}\n      />\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAYA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAYX,MAAM,eAAe,CAAC;AAAA,EAC3B,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AACF,CAAwB,KAAA;AACtB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,eAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,6BAAc,GAAA,CAAA,IAAA,EAAA,EAAK,IAAK,EAAA,QAAA,EAAS,MAAM,EAAI,EAAA,CAAA,CAAA;AAEjD,EAAM,MAAA;AAAA,IACJ,oBAAA;AAAA,IACA,QAAA;AAAA,IACA,wBAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,MACE,eAAgB,CAAA;AAAA,IAClB,gBAAA;AAAA,IACA,aAAA;AAAA,IACA,kBAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,gBAAgB,gBAAiB,CAAA,MAAA;AAAA,IAAO,CAAC,EAAE,IAAA,EAC/C,KAAA,YAAA,EAAc,SAAS,IAAI,CAAA;AAAA,GAC7B,CAAA;AAEA,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,KAAK,OAC9B,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,CAAG,EAAA,SAAS,CAC1B,iBAAA,CAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,SAAU,EAAA,EAAA,eAAA,EAAa,IAAC,EAAA,YAAA,EAAW,MAClC,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,kBAAe,QAAI,EAAA,MAAA,EAAA,CAAA;AAAA,wBACpB,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,UAAY,EAAA;AAAA,cACV,QAAA;AAAA,aACF;AAAA,YACA,QAAA;AAAA,YACA,cAAgB,EAAA,UAAA;AAAA,YAChB,OAAQ,EAAA,WAAA;AAAA,WAAA;AAAA,SACV;AAAA,OACF,EAAA,CAAA;AAAA,MACC,aAAA,EAAe,IAAI,CAAC,MAAA,0BAClB,SAA4C,EAAA,EAAA,YAAA,EAAY,OAAO,IAC9D,EAAA,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,cAAgB,EAAA,EAAA,QAAA,EAAA,MAAA,CAAO,KAAS,IAAA,MAAA,CAAO,IAAK,EAAA,CAAA;AAAA,QAC5C,sBAAuB,CAAA;AAAA,UACtB,MAAA;AAAA,UACA,QAAA;AAAA,UACA,kBAAA;AAAA,UACA,OAAO,WAAa,EAAA,KAAA;AAAA,SACrB,CAAA;AAAA,OAAA,EAAA,EAPa,MAAO,CAAA,KAAA,IAAS,MAAO,CAAA,IAQvC,CACD,CAAA;AAAA,KACH,EAAA,CAAA;AAAA,oBACA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,oBAAA;AAAA,QACT,IAAK,EAAA,YAAA;AAAA,QACL,QAAU,EAAA,EAAA;AAAA,QACV,iBAAmB,EAAA,wBAAA;AAAA,QACnB,QAAU,EAAA,YAAA;AAAA,OAAA;AAAA,KACZ;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/package.json

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