@vuu-ui/vuu-filters 0.9.0 → 0.9.2

package/cjs/filter-bar/FilterBar.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var filterBarCss = ".vuuFilterBar {\n  --vuu-svg-grid: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6.00004H4.66667V3.33337H3.33333C2.6 3.33337 2 3.93337 2 4.66671V6.00004ZM2 9.33337H4.66667V6.66671H2V9.33337ZM5.33333 9.33337H8V6.66671H5.33333V9.33337ZM8.66667 9.33337H11.3333V6.66671H8.66667V9.33337ZM5.33333 6.00004H8V3.33337H5.33333V6.00004ZM8.66667 3.33337V6.00004H11.3333V3.33337H8.66667ZM12 9.33337H14.6667V6.66671H12V9.33337ZM3.33333 12.6667H4.66667V10H2V11.3334C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3334V10H12V12.6667ZM12 3.33337V6.00004H14.6667V4.66671C14.6667 3.93337 14.0667 3.33337 13.3333 3.33337H12Z\"/></svg>');\n  --vuu-svg-tune: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M3 18C3 18.55 3.45 19 4 19H9V17H4C3.45 17 3 17.45 3 18ZM3 6C3 6.55 3.45 7 4 7H13V5H4C3.45 5 3 5.45 3 6ZM13 20V19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H13V16C13 15.45 12.55 15 12 15C11.45 15 11 15.45 11 16V20C11 20.55 11.45 21 12 21C12.55 21 13 20.55 13 20ZM7 10V11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13H7V14C7 14.55 7.45 15 8 15C8.55 15 9 14.55 9 14V10C9 9.45 8.55 9 8 9C7.45 9 7 9.45 7 10ZM21 12C21 11.45 20.55 11 20 11H11V13H20C20.55 13 21 12.55 21 12ZM16 9C16.55 9 17 8.55 17 8V7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H17V4C17 3.45 16.55 3 16 3C15.45 3 15 3.45 15 4V8C15 8.55 15.45 9 16 9Z\" /></svg>');\n  --vuuOverflowContainer-minWidth: 0;\n  --filterbar-height: var(\n    --vuuFilterBar-height,\n    calc(var(--salt-size-base) + var(--salt-spacing-100))\n  );\n  --vuuFilterEditor-height: var(--filterbar-height);\n  --icon-container-height: auto;\n  --flexbar-gap: var(--salt-spacing-100);\n  --icon-marginTop: 0;\n\n  align-items: center;\n  background-color: var(--salt-container-secondary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--vuuFilterBar-borderStyle, none none solid none);\n  border-width: 1px;\n  display: inline-flex;\n  flex: var(--vuuFilterBar-flex);\n  flex-wrap: wrap;\n  gap: var(--flexbar-gap);\n  grid-template-columns: 70px 1fr 28px;\n  grid-auto-rows: 28px 0px;\n  height: calc(var(--salt-spacing-100) + var(--filterbar-height));\n  overflow: hidden;\n  padding: var(--salt-spacing-100) var(--salt-spacing-200);\n}\n\n.vuuFilterBar-quick-filter {\n  --icon-container-height: 100%;\n  --icon-marginTop: 20px;\n  --filterbar-height: var(\n    --vuuFilterBar-height,\n    calc(2 * var(--salt-size-base))\n  );\n  align-items: flex-end;\n  padding: var(--salt-spacing-100) var(--salt-spacing-200);\n}\n\n.vuuFilterBar:has(.vuuFilterEditor) {\n  grid-template-rows: 28px 28px;\n  height: calc(1px + var(--flexbar-gap) + (2 * var(--filterbar-height)));\n}\n\n.vuuFilterBar-iconContainer {\n  height: var(--icon-container-height);\n\n  .saltToggleButtonGroup {\n    margin-top: var(--icon-marginTop);\n    transition: margin-top 0.1s ease-in;\n  }\n}\n\n.vuuFilterbar-icon {\n  display: inline-block;\n  height: 16px;\n  width: 16px;\n}\n\n.vuuFilterBar [data-icon=\"grid\"] {\n  --vuu-icon-size: 16px;\n  --vuu-icon-svg: var(--vuu-svg-grid);\n}\n.vuuFilterBar [data-icon=\"tune\"] {\n  --vuu-icon-size: 16px;\n  --vuu-icon-svg: var(--vuu-svg-tune);\n}\n\n.vuuFilterBar [data-icon=\"plus\"] {\n  --vuu-icon-size: 16px;\n}\n\n.vuuFilterBar .vuuToolbar {\n  flex: 0 1 auto;\n}\n\n.vuuFilterBar-Editor {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--salt-spacing-100);\n}\n\n.vuuCustomFilters {\n  display: flex;\n  gap: var(--salt-spacing-100);\n}\n.vuuCustomFilters-filters {\n  display: flex;\n  gap: var(--salt-spacing-100);\n}\n";
+var filterBarCss = ".vuuFilterBar {\n  --vuu-svg-grid: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6.00004H4.66667V3.33337H3.33333C2.6 3.33337 2 3.93337 2 4.66671V6.00004ZM2 9.33337H4.66667V6.66671H2V9.33337ZM5.33333 9.33337H8V6.66671H5.33333V9.33337ZM8.66667 9.33337H11.3333V6.66671H8.66667V9.33337ZM5.33333 6.00004H8V3.33337H5.33333V6.00004ZM8.66667 3.33337V6.00004H11.3333V3.33337H8.66667ZM12 9.33337H14.6667V6.66671H12V9.33337ZM3.33333 12.6667H4.66667V10H2V11.3334C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3334V10H12V12.6667ZM12 3.33337V6.00004H14.6667V4.66671C14.6667 3.93337 14.0667 3.33337 13.3333 3.33337H12Z\"/></svg>');\n  --vuu-svg-tune: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M3 18C3 18.55 3.45 19 4 19H9V17H4C3.45 17 3 17.45 3 18ZM3 6C3 6.55 3.45 7 4 7H13V5H4C3.45 5 3 5.45 3 6ZM13 20V19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H13V16C13 15.45 12.55 15 12 15C11.45 15 11 15.45 11 16V20C11 20.55 11.45 21 12 21C12.55 21 13 20.55 13 20ZM7 10V11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13H7V14C7 14.55 7.45 15 8 15C8.55 15 9 14.55 9 14V10C9 9.45 8.55 9 8 9C7.45 9 7 9.45 7 10ZM21 12C21 11.45 20.55 11 20 11H11V13H20C20.55 13 21 12.55 21 12ZM16 9C16.55 9 17 8.55 17 8V7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H17V4C17 3.45 16.55 3 16 3C15.45 3 15 3.45 15 4V8C15 8.55 15.45 9 16 9Z\" /></svg>');\n  --vuuOverflowContainer-minWidth: 0;\n  --filterbar-height: var(\n    --vuuFilterBar-height,\n    calc(var(--salt-size-base) + var(--salt-spacing-100))\n  );\n  --vuuFilterEditor-height: var(--filterbar-height);\n  --icon-container-height: auto;\n  --flexbar-gap: var(--salt-spacing-100);\n  --icon-marginTop: 0;\n\n  align-items: center;\n  background-color: var(--salt-container-secondary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--vuuFilterBar-borderStyle, none none solid none);\n  border-width: 1px;\n  display: inline-flex;\n  flex: var(--vuuFilterBar-flex);\n  flex-wrap: wrap;\n  gap: var(--flexbar-gap);\n  grid-template-columns: 70px 1fr 28px;\n  grid-auto-rows: 28px 0px;\n  height: calc(var(--salt-spacing-100) + var(--filterbar-height));\n  overflow: hidden;\n  padding: var(--salt-spacing-100) var(--salt-spacing-200);\n}\n\n.vuuFilterBar-quick-filter-mode {\n  --icon-container-height: 100%;\n  --icon-marginTop: 20px;\n  --filterbar-height: var(\n    --vuuFilterBar-height,\n    calc(2 * var(--salt-size-base))\n  );\n  align-items: flex-end;\n  padding: var(--salt-spacing-100) var(--salt-spacing-200);\n}\n\n.vuuFilterBar:has(.vuuFilterEditor) {\n  grid-template-rows: 28px 28px;\n  height: calc(1px + var(--flexbar-gap) + (2 * var(--filterbar-height)));\n}\n\n.vuuFilterBar-iconContainer {\n  height: var(--icon-container-height);\n\n  .saltToggleButtonGroup {\n    margin-top: var(--icon-marginTop);\n    transition: margin-top 0.1s ease-in;\n  }\n}\n\n.vuuFilterbar-icon {\n  display: inline-block;\n  height: 16px;\n  width: 16px;\n}\n\n.vuuFilterBar [data-icon=\"grid\"] {\n  --vuu-icon-size: 16px;\n  --vuu-icon-svg: var(--vuu-svg-grid);\n}\n.vuuFilterBar [data-icon=\"tune\"] {\n  --vuu-icon-size: 16px;\n  --vuu-icon-svg: var(--vuu-svg-tune);\n}\n\n.vuuFilterBar [data-icon=\"plus\"] {\n  --vuu-icon-size: 16px;\n}\n\n.vuuFilterBar .vuuToolbar {\n  flex: 0 1 auto;\n}\n\n.vuuFilterBar-Editor {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--salt-spacing-100);\n}\n\n.vuuCustomFilters {\n  display: flex;\n  gap: var(--salt-spacing-100);\n}\n.vuuCustomFilters-filters {\n  display: flex;\n  gap: var(--salt-spacing-100);\n}\n";
 
 module.exports = filterBarCss;
 //# sourceMappingURL=FilterBar.css.js.map

package/cjs/filter-bar/FilterBar.js

@@ -28,7 +28,7 @@ const FilterBar = ({
   onFilterStateChanged,
   suggestionProvider,
   tableSchema,
-  variant = "custom-filters",
+  variant = "custom-filters-only",
   ...htmlAttributes
 }) => {
   const targetWindow = window.useWindow();
@@ -37,8 +37,8 @@ const FilterBar = ({
     css: FilterBar$1,
     window: targetWindow
   });
-  const allowCustomFilters = variant !== "quick-filters";
-  const allowQuickFilters = variant !== "custom-filters";
+  const allowCustomFilters = variant !== "quick-filters-only";
+  const allowQuickFilters = variant !== "custom-filters-only";
   const controlledFilterMode = !allowCustomFilters ? "quick-filter" : !allowQuickFilters ? "custom-filter" : filterModeProp;
   const { filterMode, onChangeFilterMode } = useFilterBar.useFilterBar({
     defaultFilterMode,
@@ -88,13 +88,9 @@ const FilterBar = ({
     "div",
     {
       ...htmlAttributes,
-      className: cx(
-        className,
-        `${classBase}-${variant}`,
-        `${classBase}-${filterMode}`
-      ),
+      className: cx(className, `${classBase}-${filterMode}-mode`),
       children: [
-        variant === "quick-filters" ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-iconContainer`, children: startAdornment }),
+        variant === "quick-filters-only" ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${classBase}-iconContainer`, children: startAdornment }),
         filterMode === "custom-filter" ? /* @__PURE__ */ jsxRuntime.jsx(
           CustomFilters.CustomFilters,
           {

package/cjs/filter-bar/FilterBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBar.js","sources":["../../src/filter-bar/FilterBar.tsx"],"sourcesContent":["import {\n  DataSourceFilter,\n  SuggestionProvider,\n  TableSchema,\n} from \"@vuu-ui/vuu-data-types\";\nimport { Filter, FilterState } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { CustomFilters } from \"../custom-filters\";\nimport { QuickFilterProps, QuickFilters } from \"../quick-filters\";\nimport { FilterMode, useFilterBar } from \"./useFilterBar\";\n\nimport filterBarCss from \"./FilterBar.css\";\n\nexport type FilterBarVariant =\n  | \"custom-filters\"\n  | \"quick-filters\"\n  | \"full-filters\";\n\nexport interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {\n  QuickFilterProps?: Pick<\n    QuickFilterProps,\n    \"quickFilterColumns\" | \"onChangeQuickFilterColumns\"\n  >;\n  /**\n   * This is used to apply tailored filters based on column types and other attributes.\n   * NOTE: Always make sure that these are passed with proper re-render optimization, otherwise,\n   *       might end up with infinite state updates.\n   */\n  columnDescriptors: ColumnDescriptor[];\n  defaultFilterMode?: FilterMode;\n  defaultFilterState?: FilterState;\n  filterMode?: FilterMode;\n  filterState?: FilterState;\n  onApplyFilter: (filter: DataSourceFilter) => void;\n  onChangeFilterMode?: (filterMode: FilterMode) => void;\n  onFilterDeleted?: (filter: Filter) => void;\n  onFilterRenamed?: (filter: Filter, name: string) => void;\n  onFilterStateChanged?: (state: FilterState) => void;\n  suggestionProvider?: SuggestionProvider;\n  /**\n   * TableSchema is used both to populate list of available columns and to\n   * provide table in call to Typeahead service\n   */\n  tableSchema?: TableSchema;\n  variant?: FilterBarVariant;\n}\n\nconst classBase = \"vuuFilterBar\";\n\nexport const FilterBar = ({\n  QuickFilterProps,\n  className: classNameProp,\n  columnDescriptors,\n  defaultFilterMode,\n  defaultFilterState,\n  filterMode: filterModeProp,\n  filterState,\n  onApplyFilter,\n  onChangeFilterMode: onChangeFilterModeProp,\n  onFilterDeleted,\n  onFilterRenamed,\n  onFilterStateChanged,\n  suggestionProvider,\n  tableSchema,\n  variant = \"custom-filters\",\n  ...htmlAttributes\n}: FilterBarProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-bar\",\n    css: filterBarCss,\n    window: targetWindow,\n  });\n\n  const allowCustomFilters = variant !== \"quick-filters\";\n  const allowQuickFilters = variant !== \"custom-filters\";\n\n  const controlledFilterMode: FilterMode | undefined = !allowCustomFilters\n    ? \"quick-filter\"\n    : !allowQuickFilters\n      ? \"custom-filter\"\n      : filterModeProp;\n\n  const { filterMode, onChangeFilterMode } = useFilterBar({\n    defaultFilterMode,\n    filterMode: controlledFilterMode,\n    onChangeFilterMode: onChangeFilterModeProp,\n  });\n\n  const className = cx(classBase, classNameProp);\n\n  const startAdornment = useMemo(() => {\n    if (!allowQuickFilters) {\n      return <Icon name=\"filter\" size={16} style={{ top: 4 }} />;\n    } else {\n      return (\n        <ToggleButtonGroup\n          data-variant=\"secondary\"\n          onChange={onChangeFilterMode}\n          value={filterMode}\n        >\n          <ToggleButton\n            className=\"vuuIconToggleButton\"\n            key=\"custom-filter\"\n            value=\"custom-filter\"\n            aria-label=\"Custom filters\"\n            tabIndex={-1}\n          >\n            <Icon name=\"grid\" size={16} />\n          </ToggleButton>\n          <ToggleButton\n            className=\"vuuIconToggleButton\"\n            key=\"quick-filter\"\n            value=\"quick-filter\"\n            aria-label=\"Quick filters\"\n            tabIndex={-1}\n          >\n            <Icon name=\"tune\" size={16} />\n          </ToggleButton>\n        </ToggleButtonGroup>\n      );\n    }\n  }, [allowQuickFilters, filterMode, onChangeFilterMode]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(\n        className,\n        `${classBase}-${variant}`,\n        `${classBase}-${filterMode}`,\n      )}\n    >\n      {variant === \"quick-filters\" ? null : (\n        <div className={`${classBase}-iconContainer`}>{startAdornment}</div>\n      )}\n      {filterMode === \"custom-filter\" ? (\n        <CustomFilters\n          columnDescriptors={columnDescriptors}\n          defaultFilterState={defaultFilterState}\n          filterState={filterState}\n          onApplyFilter={onApplyFilter}\n          onFilterDeleted={onFilterDeleted}\n          onFilterRenamed={onFilterRenamed}\n          onFilterStateChanged={onFilterStateChanged}\n          tableSchema={tableSchema}\n        />\n      ) : (\n        <QuickFilters\n          {...QuickFilterProps}\n          availableColumns={columnDescriptors}\n          onApplyFilter={onApplyFilter}\n          tableSchema={tableSchema}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["QuickFilterProps","useWindow","useComponentCssInjection","filterBarCss","useFilterBar","useMemo","jsx","Icon","jsxs","ToggleButtonGroup","ToggleButton","CustomFilters","QuickFilters"],"mappings":"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"}
+{"version":3,"file":"FilterBar.js","sources":["../../src/filter-bar/FilterBar.tsx"],"sourcesContent":["import {\n  DataSourceFilter,\n  SuggestionProvider,\n  TableSchema,\n} from \"@vuu-ui/vuu-data-types\";\nimport { Filter, FilterState } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { CustomFilters } from \"../custom-filters\";\nimport { QuickFilterProps, QuickFilters } from \"../quick-filters\";\nimport { FilterMode, useFilterBar } from \"./useFilterBar\";\n\nimport filterBarCss from \"./FilterBar.css\";\n\nexport type FilterBarVariant =\n  | \"custom-filters-only\"\n  | \"quick-filters-only\"\n  | \"full-filters\";\n\nexport interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {\n  QuickFilterProps?: Pick<\n    QuickFilterProps,\n    \"quickFilterColumns\" | \"onChangeQuickFilterColumns\"\n  >;\n  /**\n   * This is used to apply tailored filters based on column types and other attributes.\n   * NOTE: Always make sure that these are passed with proper re-render optimization, otherwise,\n   *       might end up with infinite state updates.\n   */\n  columnDescriptors: ColumnDescriptor[];\n  defaultFilterMode?: FilterMode;\n  defaultFilterState?: FilterState;\n  filterMode?: FilterMode;\n  filterState?: FilterState;\n  onApplyFilter: (filter: DataSourceFilter) => void;\n  onChangeFilterMode?: (filterMode: FilterMode) => void;\n  onFilterDeleted?: (filter: Filter) => void;\n  onFilterRenamed?: (filter: Filter, name: string) => void;\n  onFilterStateChanged?: (state: FilterState) => void;\n  suggestionProvider?: SuggestionProvider;\n  /**\n   * TableSchema is used both to populate list of available columns and to\n   * provide table in call to Typeahead service\n   */\n  tableSchema?: TableSchema;\n  variant?: FilterBarVariant;\n}\n\nconst classBase = \"vuuFilterBar\";\n\nexport const FilterBar = ({\n  QuickFilterProps,\n  className: classNameProp,\n  columnDescriptors,\n  defaultFilterMode,\n  defaultFilterState,\n  filterMode: filterModeProp,\n  filterState,\n  onApplyFilter,\n  onChangeFilterMode: onChangeFilterModeProp,\n  onFilterDeleted,\n  onFilterRenamed,\n  onFilterStateChanged,\n  suggestionProvider,\n  tableSchema,\n  variant = \"custom-filters-only\",\n  ...htmlAttributes\n}: FilterBarProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-bar\",\n    css: filterBarCss,\n    window: targetWindow,\n  });\n\n  const allowCustomFilters = variant !== \"quick-filters-only\";\n  const allowQuickFilters = variant !== \"custom-filters-only\";\n\n  const controlledFilterMode: FilterMode | undefined = !allowCustomFilters\n    ? \"quick-filter\"\n    : !allowQuickFilters\n      ? \"custom-filter\"\n      : filterModeProp;\n\n  const { filterMode, onChangeFilterMode } = useFilterBar({\n    defaultFilterMode,\n    filterMode: controlledFilterMode,\n    onChangeFilterMode: onChangeFilterModeProp,\n  });\n\n  const className = cx(classBase, classNameProp);\n\n  const startAdornment = useMemo(() => {\n    if (!allowQuickFilters) {\n      return <Icon name=\"filter\" size={16} style={{ top: 4 }} />;\n    } else {\n      return (\n        <ToggleButtonGroup\n          data-variant=\"secondary\"\n          onChange={onChangeFilterMode}\n          value={filterMode}\n        >\n          <ToggleButton\n            className=\"vuuIconToggleButton\"\n            key=\"custom-filter\"\n            value=\"custom-filter\"\n            aria-label=\"Custom filters\"\n            tabIndex={-1}\n          >\n            <Icon name=\"grid\" size={16} />\n          </ToggleButton>\n          <ToggleButton\n            className=\"vuuIconToggleButton\"\n            key=\"quick-filter\"\n            value=\"quick-filter\"\n            aria-label=\"Quick filters\"\n            tabIndex={-1}\n          >\n            <Icon name=\"tune\" size={16} />\n          </ToggleButton>\n        </ToggleButtonGroup>\n      );\n    }\n  }, [allowQuickFilters, filterMode, onChangeFilterMode]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(className, `${classBase}-${filterMode}-mode`)}\n    >\n      {variant === \"quick-filters-only\" ? null : (\n        <div className={`${classBase}-iconContainer`}>{startAdornment}</div>\n      )}\n      {filterMode === \"custom-filter\" ? (\n        <CustomFilters\n          columnDescriptors={columnDescriptors}\n          defaultFilterState={defaultFilterState}\n          filterState={filterState}\n          onApplyFilter={onApplyFilter}\n          onFilterDeleted={onFilterDeleted}\n          onFilterRenamed={onFilterRenamed}\n          onFilterStateChanged={onFilterStateChanged}\n          tableSchema={tableSchema}\n        />\n      ) : (\n        <QuickFilters\n          {...QuickFilterProps}\n          availableColumns={columnDescriptors}\n          onApplyFilter={onApplyFilter}\n          tableSchema={tableSchema}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["QuickFilterProps","useWindow","useComponentCssInjection","filterBarCss","useFilterBar","useMemo","jsx","Icon","jsxs","ToggleButtonGroup","ToggleButton","CustomFilters","QuickFilters"],"mappings":"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"}

package/cjs/inline-filter/InlineFilter.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var inlineFilteCss = ".vuuInlineFilter {\n  --filter-borderColor: var(--salt-separable-secondary-borderColor);\n  --filter-color: var(--salt-content-primary-foreground-disabled);\n  --filter-padding: 1px 1px 1px 0;\n  --filter-content-height: 22px;\n  height: var(--salt-size-base);\n\n  .vuuInlineFilter-filter:has(input:focus) {\n    --filter-borderColor: transparent;\n    --filter-content-height: 20px;\n\n    outline-width: 2px;\n    outline-offset: -2px;\n    outline-style: dotted;\n    outline-color: var(--salt-focused-outlineColor);\n\n    /* the padding ensures the outline is not clipped */\n    --filter-padding: 0 2px;\n    /* prevents shift when we apply the padding */\n    --saltInput-paddingLeft: 2px;\n\n    .saltInput-input {\n      outline: none;\n    }\n    .saltInput-focused {\n      border: none;\n      outline: none;\n    }\n\n    .saltComboBox-focused {\n      outline: none;\n    }\n  }\n\n  .vuuInlineFilter-filter:focus {\n    --filter-borderColor: transparent;\n    --filter-content-height: 20px;\n    /* the padding ensures the outline is not clipped */\n    --filter-padding: 0 2px;\n    /* prevents shift when we apply the padding */\n    --saltInput-paddingLeft: 2px;\n  }\n\n  .vuuInlineFilter-filter {\n    --saltInput-minHeight: var(--filter-content-height);\n    align-items: center;\n    display: inline-flex;\n    height: 100%;\n    padding: var(--filter-padding);\n\n    .vuuTypeaheadInput {\n      border-style: solid;\n      border-color: var(--filter-borderColor);\n      border-width: 1px;\n      border-radius: 0;\n    }\n\n    .vuuTypeaheadInput {\n      height: var(--filter-content-height);\n      input::placeholder {\n        color: var(--filter-color);\n      }\n    }\n\n    .saltInput-primary.vuuInput {\n      border-style: solid;\n      border-color: var(--filter-borderColor);\n      border-width: 1px;\n      border-radius: 0;\n      height: var(--filter-content-height);\n      min-height: var(--filter-content-height);\n      input::placeholder {\n        color: var(--filter-color);\n      }\n    }\n  }\n\n  .vuuInlineFilter-virtualColSpan {\n    display: inline-block;\n  }\n}\n\n.vuuInlineFilter:focus-within {\n  --filter-borderColor: var(--salt-separable-primary-borderColor);\n  --filter-color: var(--salt-content-primary-foreground);\n}\n";
+var inlineFilteCss = ".vuuInlineFilter {\n  --filter-borderColor: var(--salt-separable-secondary-borderColor);\n  --filter-color: var(--salt-content-primary-foreground-disabled);\n  --filter-padding: 1px 1px 1px 0;\n  --item-content-height: 22px;\n  height: var(--salt-size-base);\n\n  .vuuInlineFilterCell:has(input:focus) {\n    --filter-borderColor: transparent;\n    --item-content-height: 20px;\n\n    outline-width: 2px;\n    outline-offset: -2px;\n    outline-style: dotted;\n    outline-color: var(--salt-focused-outlineColor);\n\n    /* the padding ensures the outline is not clipped */\n    --filter-padding: 0 2px;\n    /* prevents shift when we apply the padding */\n    --saltInput-paddingLeft: 2px;\n\n    .saltInput-input {\n      outline: none;\n    }\n    .saltInput-focused {\n      border: none;\n      outline: none;\n    }\n\n    .saltComboBox-focused {\n      outline: none;\n    }\n  }\n\n  .vuuInlineFilterCell:focus {\n    --filter-borderColor: transparent;\n    --item-content-height: 20px;\n    /* the padding ensures the outline is not clipped */\n    --filter-padding: 0 2px;\n    /* prevents shift when we apply the padding */\n    --saltInput-paddingLeft: 2px;\n  }\n\n  .vuuInlineFilterCell {\n    --saltInput-minHeight: var(--item-content-height);\n    --saltPillInput-minHeight: var(--item-content-height);\n    align-items: center;\n    display: inline-flex;\n    height: 100%;\n    padding: var(--filter-padding);\n\n    .vuuTypeaheadInput {\n      border-style: solid;\n      border-color: var(--filter-borderColor);\n      border-width: 1px;\n      border-radius: 0;\n      height: var(--item-content-height);\n      input::placeholder {\n        color: var(--filter-color);\n      }\n    }\n\n\n    .saltInput-primary.vuuInput {\n      border-style: solid;\n      border-color: var(--filter-borderColor);\n      border-width: 1px;\n      border-radius: 0;\n      height: var(--item-content-height);\n      min-height: var(--item-content-height);\n      input::placeholder {\n        color: var(--filter-color);\n      }\n    }\n  }\n\n  .vuuInlineFilter-virtualColSpan {\n    display: inline-block;\n  }\n}\n\n.vuuInlineFilter:focus-within {\n  --filter-borderColor: var(--salt-separable-primary-borderColor);\n  --filter-color: var(--salt-content-primary-foreground);\n}\n";
 
 module.exports = inlineFilteCss;
 //# sourceMappingURL=InlineFilter.css.js.map

package/cjs/inline-filter/InlineFilter.js

@@ -3,12 +3,11 @@
 var jsxRuntime = require('react/jsx-runtime');
 var vuuDataReact = require('@vuu-ui/vuu-data-react');
 var vuuTable = require('@vuu-ui/vuu-table');
-var vuuUtils = require('@vuu-ui/vuu-utils');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
-var react = require('react');
 var cx = require('clsx');
 var InlineFilter$1 = require('./InlineFilter.css.js');
+var useInlineFilter = require('./useInlineFilter.js');
 
 const classBase = "vuuInlineFilter";
 const InputProps = {
@@ -32,44 +31,21 @@ const InlineFilter = ({
     css: InlineFilter$1,
     window: targetWindow
   });
-  const filterAggregator = react.useMemo(() => new vuuUtils.FilterAggregator(), []);
-  const { columns = [], virtualColSpan = 0 } = vuuTable.useHeaderProps();
-  const onCommit = react.useCallback(
-    (evt, value = "") => {
-      const fieldName = vuuUtils.getFieldName(evt.target);
-      const column = columns.find((c) => c.name === fieldName);
-      if (column) {
-        if (value === "") {
-          if (filterAggregator.removeFilter(column)) {
-            onChange(filterAggregator.filter);
-          }
-        } else {
-          filterAggregator.addFilter(column, value);
-          onChange(filterAggregator.filter);
-        }
-      }
-    },
-    [columns, filterAggregator, onChange]
-  );
-  const handleKeyDown = react.useCallback(
-    (evt) => {
-      if (evt.key === "Enter") {
-        const el = evt.target;
-        const inputElement = el.querySelector("input");
-        inputElement?.focus();
-      }
-    },
-    []
-  );
+  const { columns, onCommit, onKeyDown, virtualColSpan } = useInlineFilter.useInlineFilter({
+    onChange
+  });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlAttributes, className: classBase, role: ariaRole, children: [
     /* @__PURE__ */ jsxRuntime.jsx(vuuTable.VirtualColSpan, { width: virtualColSpan }),
     columns.map((column, i) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         "aria-colindex": i + 1,
-        className: cx(`${classBase}-filter`, "vuuTableCell"),
+        className: cx(`${classBase}Cell`, "vuuTableCell", {
+          "vuuTableCell-right": column.align === "right"
+        }),
         "data-field": column.name,
-        onKeyDown: handleKeyDown,
+        onKeyDown,
+        role: "cell",
         style: { width: column.width },
         children: vuuDataReact.getDataItemEditControl({
           InputProps,

package/cjs/inline-filter/InlineFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineFilter.js","sources":["../../src/inline-filter/InlineFilter.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { VirtualColSpan, useHeaderProps } from \"@vuu-ui/vuu-table\";\nimport {\n  CommitHandler,\n  FilterAggregator,\n  getFieldName,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  HTMLAttributes,\n  KeyboardEventHandler,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport cx from \"clsx\";\n\nimport inlineFilteCss from \"./InlineFilter.css\";\nimport { InputProps } from \"@salt-ds/core\";\nimport { TableSchemaTable } from \"@vuu-ui/vuu-data-types\";\nimport { VuuFilter } from \"@vuu-ui/vuu-protocol-types\";\nimport { BaseRowProps } from \"@vuu-ui/vuu-table-types\";\n\nconst classBase = \"vuuInlineFilter\";\n\nexport type FilterValueChangeHandler = (filter: VuuFilter) => void;\nexport interface InlineFilterProps\n  extends Partial<BaseRowProps>,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  onChange: FilterValueChangeHandler;\n  table: TableSchemaTable;\n}\n\nconst InputProps: Partial<InputProps> = {\n  inputProps: {\n    placeholder: \"Filter value\",\n  },\n  variant: \"primary\",\n};\n\nconst TypeaheadProps = {\n  highlightFirstSuggestion: false,\n};\n\nexport const InlineFilter = ({\n  ariaRole,\n  onChange,\n  table,\n  ...htmlAttributes\n}: InlineFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-inline-filter\",\n    css: inlineFilteCss,\n    window: targetWindow,\n  });\n\n  const filterAggregator = useMemo(() => new FilterAggregator(), []);\n  const { columns = [], virtualColSpan = 0 } = useHeaderProps();\n\n  const onCommit = useCallback<\n    CommitHandler<HTMLElement, string | number | undefined>\n  >(\n    (evt, value = \"\") => {\n      const fieldName = getFieldName(evt.target);\n      const column = columns.find((c) => c.name === fieldName);\n      if (column) {\n        if (value === \"\") {\n          if (filterAggregator.removeFilter(column)) {\n            onChange(filterAggregator.filter);\n          }\n        } else {\n          filterAggregator.addFilter(column, value);\n          onChange(filterAggregator.filter);\n        }\n      }\n    },\n    [columns, filterAggregator, onChange],\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n    (evt) => {\n      if (evt.key === \"Enter\") {\n        const el = evt.target as HTMLElement;\n        const inputElement = el.querySelector(\"input\");\n        inputElement?.focus();\n      }\n    },\n    [],\n  );\n\n  return (\n    <div {...htmlAttributes} className={classBase} role={ariaRole}>\n      <VirtualColSpan width={virtualColSpan} />\n      {columns.map((column, i) => (\n        <div\n          aria-colindex={i + 1}\n          className={cx(`${classBase}-filter`, \"vuuTableCell\")}\n          data-field={column.name}\n          onKeyDown={handleKeyDown}\n          key={column.name}\n          style={{ width: column.width }}\n        >\n          {getDataItemEditControl({\n            InputProps,\n            TypeaheadProps,\n            commitWhenCleared: true,\n            dataDescriptor: column,\n            onCommit,\n            table,\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","inlineFilteCss","useMemo","FilterAggregator","useHeaderProps","useCallback","getFieldName","jsx","VirtualColSpan","getDataItemEditControl"],"mappings":"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"}
+{"version":3,"file":"InlineFilter.js","sources":["../../src/inline-filter/InlineFilter.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { VirtualColSpan } from \"@vuu-ui/vuu-table\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\n\nimport inlineFilteCss from \"./InlineFilter.css\";\nimport { InputProps } from \"@salt-ds/core\";\nimport { TableSchemaTable } from \"@vuu-ui/vuu-data-types\";\nimport { VuuFilter } from \"@vuu-ui/vuu-protocol-types\";\nimport { BaseRowProps } from \"@vuu-ui/vuu-table-types\";\nimport { useInlineFilter } from \"./useInlineFilter\";\n\nconst classBase = \"vuuInlineFilter\";\n\nexport type FilterValueChangeHandler = (filter: VuuFilter) => void;\nexport interface InlineFilterProps\n  extends Partial<BaseRowProps>,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  onChange: FilterValueChangeHandler;\n  table: TableSchemaTable;\n}\n\nconst InputProps: Partial<InputProps> = {\n  inputProps: {\n    placeholder: \"Filter value\",\n  },\n  variant: \"primary\",\n};\n\nconst TypeaheadProps = {\n  highlightFirstSuggestion: false,\n};\n\nexport const InlineFilter = ({\n  ariaRole,\n  onChange,\n  table,\n  ...htmlAttributes\n}: InlineFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-inline-filter\",\n    css: inlineFilteCss,\n    window: targetWindow,\n  });\n\n  const { columns, onCommit, onKeyDown, virtualColSpan } = useInlineFilter({\n    onChange,\n  });\n\n  return (\n    <div {...htmlAttributes} className={classBase} role={ariaRole}>\n      <VirtualColSpan width={virtualColSpan} />\n      {columns.map((column, i) => (\n        <div\n          aria-colindex={i + 1}\n          className={cx(`${classBase}Cell`, \"vuuTableCell\", {\n            \"vuuTableCell-right\": column.align === \"right\",\n          })}\n          data-field={column.name}\n          onKeyDown={onKeyDown}\n          key={column.name}\n          role=\"cell\"\n          style={{ width: column.width }}\n        >\n          {getDataItemEditControl({\n            InputProps,\n            TypeaheadProps,\n            commitWhenCleared: true,\n            dataDescriptor: column,\n            onCommit,\n            table,\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","inlineFilteCss","useInlineFilter","jsx","VirtualColSpan","getDataItemEditControl"],"mappings":";;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAUlB,MAAM,UAAkC,GAAA;AAAA,EACtC,UAAY,EAAA;AAAA,IACV,WAAa,EAAA,cAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEA,MAAM,cAAiB,GAAA;AAAA,EACrB,wBAA0B,EAAA,KAAA;AAC5B,CAAA,CAAA;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,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,EAAE,OAAS,EAAA,QAAA,EAAU,SAAW,EAAA,cAAA,KAAmBC,+BAAgB,CAAA;AAAA,IACvE,QAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,uCACG,KAAK,EAAA,EAAA,GAAG,gBAAgB,SAAW,EAAA,SAAA,EAAW,MAAM,QACnD,EAAA,QAAA,EAAA;AAAA,oBAACC,cAAA,CAAAC,uBAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,IACtC,OAAQ,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,CACpB,qBAAAD,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,iBAAe,CAAI,GAAA,CAAA;AAAA,QACnB,SAAW,EAAA,EAAA,CAAG,CAAG,EAAA,SAAS,QAAQ,cAAgB,EAAA;AAAA,UAChD,oBAAA,EAAsB,OAAO,KAAU,KAAA,OAAA;AAAA,SACxC,CAAA;AAAA,QACD,cAAY,MAAO,CAAA,IAAA;AAAA,QACnB,SAAA;AAAA,QAEA,IAAK,EAAA,MAAA;AAAA,QACL,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,QAE5B,QAAuB,EAAAE,mCAAA,CAAA;AAAA,UACtB,UAAA;AAAA,UACA,cAAA;AAAA,UACA,iBAAmB,EAAA,IAAA;AAAA,UACnB,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAA;AAAA,UACA,KAAA;AAAA,SACD,CAAA;AAAA,OAAA;AAAA,MAXI,MAAO,CAAA,IAAA;AAAA,KAaf,CAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/cjs/inline-filter/useInlineFilter.js

@@ -0,0 +1,39 @@
+'use strict';
+
+var vuuTable = require('@vuu-ui/vuu-table');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+
+const useInlineFilter = ({
+  onChange
+}) => {
+  const filterAggregator = react.useMemo(() => new vuuUtils.FilterAggregator(), []);
+  const { columns = [], virtualColSpan = 0 } = vuuTable.useHeaderProps();
+  const handleCommit = react.useCallback(
+    (evt, value = "") => {
+      const fieldName = vuuUtils.getFieldName(evt.target);
+      const column = columns.find((c) => c.name === fieldName);
+      if (column) {
+        if (value === "") {
+          if (filterAggregator.removeFilter(column)) {
+            onChange(filterAggregator.filter);
+          }
+        } else {
+          filterAggregator.addFilter(column, value);
+          onChange(filterAggregator.filter);
+        }
+      }
+    },
+    [columns, filterAggregator, onChange]
+  );
+  const { onKeyDown } = vuuTable.useEditableCell();
+  return {
+    columns,
+    onCommit: handleCommit,
+    onKeyDown,
+    virtualColSpan
+  };
+};
+
+exports.useInlineFilter = useInlineFilter;
+//# sourceMappingURL=useInlineFilter.js.map

package/cjs/inline-filter/useInlineFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInlineFilter.js","sources":["../../src/inline-filter/useInlineFilter.ts"],"sourcesContent":["import { useEditableCell, useHeaderProps } from \"@vuu-ui/vuu-table\";\nimport {\n  CommitHandler,\n  FilterAggregator,\n  getFieldName,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo } from \"react\";\nimport { FilterValueChangeHandler } from \"./InlineFilter\";\n\nexport const useInlineFilter = ({\n  onChange,\n}: {\n  onChange: FilterValueChangeHandler;\n}) => {\n  const filterAggregator = useMemo(() => new FilterAggregator(), []);\n  const { columns = [], virtualColSpan = 0 } = useHeaderProps();\n\n  const handleCommit = useCallback<\n    CommitHandler<HTMLElement, string | number | undefined>\n  >(\n    (evt, value = \"\") => {\n      const fieldName = getFieldName(evt.target);\n      const column = columns.find((c) => c.name === fieldName);\n      if (column) {\n        if (value === \"\") {\n          if (filterAggregator.removeFilter(column)) {\n            onChange(filterAggregator.filter);\n          }\n        } else {\n          filterAggregator.addFilter(column, value);\n          onChange(filterAggregator.filter);\n        }\n      }\n    },\n    [columns, filterAggregator, onChange],\n  );\n\n  const { onKeyDown } = useEditableCell();\n\n  return {\n    columns,\n    onCommit: handleCommit,\n    onKeyDown,\n    virtualColSpan,\n  };\n};\n"],"names":["useMemo","FilterAggregator","useHeaderProps","useCallback","getFieldName","useEditableCell"],"mappings":";;;;;;AASO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AACF,CAEM,KAAA;AACJ,EAAA,MAAM,mBAAmBA,aAAQ,CAAA,MAAM,IAAIC,yBAAiB,EAAA,EAAG,EAAE,CAAA,CAAA;AACjE,EAAA,MAAM,EAAE,OAAU,GAAA,IAAI,cAAiB,GAAA,CAAA,KAAMC,uBAAe,EAAA,CAAA;AAE5D,EAAA,MAAM,YAAe,GAAAC,iBAAA;AAAA,IAGnB,CAAC,GAAK,EAAA,KAAA,GAAQ,EAAO,KAAA;AACnB,MAAM,MAAA,SAAA,GAAYC,qBAAa,CAAA,GAAA,CAAI,MAAM,CAAA,CAAA;AACzC,MAAA,MAAM,SAAS,OAAQ,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,SAAS,SAAS,CAAA,CAAA;AACvD,MAAA,IAAI,MAAQ,EAAA;AACV,QAAA,IAAI,UAAU,EAAI,EAAA;AAChB,UAAI,IAAA,gBAAA,CAAiB,YAAa,CAAA,MAAM,CAAG,EAAA;AACzC,YAAA,QAAA,CAAS,iBAAiB,MAAM,CAAA,CAAA;AAAA,WAClC;AAAA,SACK,MAAA;AACL,UAAiB,gBAAA,CAAA,SAAA,CAAU,QAAQ,KAAK,CAAA,CAAA;AACxC,UAAA,QAAA,CAAS,iBAAiB,MAAM,CAAA,CAAA;AAAA,SAClC;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,OAAS,EAAA,gBAAA,EAAkB,QAAQ,CAAA;AAAA,GACtC,CAAA;AAEA,EAAM,MAAA,EAAE,SAAU,EAAA,GAAIC,wBAAgB,EAAA,CAAA;AAEtC,EAAO,OAAA;AAAA,IACL,OAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,SAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/esm/filter-bar/FilterBar.css.js

@@ -1,4 +1,4 @@
-var filterBarCss = ".vuuFilterBar {\n  --vuu-svg-grid: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6.00004H4.66667V3.33337H3.33333C2.6 3.33337 2 3.93337 2 4.66671V6.00004ZM2 9.33337H4.66667V6.66671H2V9.33337ZM5.33333 9.33337H8V6.66671H5.33333V9.33337ZM8.66667 9.33337H11.3333V6.66671H8.66667V9.33337ZM5.33333 6.00004H8V3.33337H5.33333V6.00004ZM8.66667 3.33337V6.00004H11.3333V3.33337H8.66667ZM12 9.33337H14.6667V6.66671H12V9.33337ZM3.33333 12.6667H4.66667V10H2V11.3334C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3334V10H12V12.6667ZM12 3.33337V6.00004H14.6667V4.66671C14.6667 3.93337 14.0667 3.33337 13.3333 3.33337H12Z\"/></svg>');\n  --vuu-svg-tune: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M3 18C3 18.55 3.45 19 4 19H9V17H4C3.45 17 3 17.45 3 18ZM3 6C3 6.55 3.45 7 4 7H13V5H4C3.45 5 3 5.45 3 6ZM13 20V19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H13V16C13 15.45 12.55 15 12 15C11.45 15 11 15.45 11 16V20C11 20.55 11.45 21 12 21C12.55 21 13 20.55 13 20ZM7 10V11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13H7V14C7 14.55 7.45 15 8 15C8.55 15 9 14.55 9 14V10C9 9.45 8.55 9 8 9C7.45 9 7 9.45 7 10ZM21 12C21 11.45 20.55 11 20 11H11V13H20C20.55 13 21 12.55 21 12ZM16 9C16.55 9 17 8.55 17 8V7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H17V4C17 3.45 16.55 3 16 3C15.45 3 15 3.45 15 4V8C15 8.55 15.45 9 16 9Z\" /></svg>');\n  --vuuOverflowContainer-minWidth: 0;\n  --filterbar-height: var(\n    --vuuFilterBar-height,\n    calc(var(--salt-size-base) + var(--salt-spacing-100))\n  );\n  --vuuFilterEditor-height: var(--filterbar-height);\n  --icon-container-height: auto;\n  --flexbar-gap: var(--salt-spacing-100);\n  --icon-marginTop: 0;\n\n  align-items: center;\n  background-color: var(--salt-container-secondary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--vuuFilterBar-borderStyle, none none solid none);\n  border-width: 1px;\n  display: inline-flex;\n  flex: var(--vuuFilterBar-flex);\n  flex-wrap: wrap;\n  gap: var(--flexbar-gap);\n  grid-template-columns: 70px 1fr 28px;\n  grid-auto-rows: 28px 0px;\n  height: calc(var(--salt-spacing-100) + var(--filterbar-height));\n  overflow: hidden;\n  padding: var(--salt-spacing-100) var(--salt-spacing-200);\n}\n\n.vuuFilterBar-quick-filter {\n  --icon-container-height: 100%;\n  --icon-marginTop: 20px;\n  --filterbar-height: var(\n    --vuuFilterBar-height,\n    calc(2 * var(--salt-size-base))\n  );\n  align-items: flex-end;\n  padding: var(--salt-spacing-100) var(--salt-spacing-200);\n}\n\n.vuuFilterBar:has(.vuuFilterEditor) {\n  grid-template-rows: 28px 28px;\n  height: calc(1px + var(--flexbar-gap) + (2 * var(--filterbar-height)));\n}\n\n.vuuFilterBar-iconContainer {\n  height: var(--icon-container-height);\n\n  .saltToggleButtonGroup {\n    margin-top: var(--icon-marginTop);\n    transition: margin-top 0.1s ease-in;\n  }\n}\n\n.vuuFilterbar-icon {\n  display: inline-block;\n  height: 16px;\n  width: 16px;\n}\n\n.vuuFilterBar [data-icon=\"grid\"] {\n  --vuu-icon-size: 16px;\n  --vuu-icon-svg: var(--vuu-svg-grid);\n}\n.vuuFilterBar [data-icon=\"tune\"] {\n  --vuu-icon-size: 16px;\n  --vuu-icon-svg: var(--vuu-svg-tune);\n}\n\n.vuuFilterBar [data-icon=\"plus\"] {\n  --vuu-icon-size: 16px;\n}\n\n.vuuFilterBar .vuuToolbar {\n  flex: 0 1 auto;\n}\n\n.vuuFilterBar-Editor {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--salt-spacing-100);\n}\n\n.vuuCustomFilters {\n  display: flex;\n  gap: var(--salt-spacing-100);\n}\n.vuuCustomFilters-filters {\n  display: flex;\n  gap: var(--salt-spacing-100);\n}\n";
+var filterBarCss = ".vuuFilterBar {\n  --vuu-svg-grid: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\"><path d=\"M2 6.00004H4.66667V3.33337H3.33333C2.6 3.33337 2 3.93337 2 4.66671V6.00004ZM2 9.33337H4.66667V6.66671H2V9.33337ZM5.33333 9.33337H8V6.66671H5.33333V9.33337ZM8.66667 9.33337H11.3333V6.66671H8.66667V9.33337ZM5.33333 6.00004H8V3.33337H5.33333V6.00004ZM8.66667 3.33337V6.00004H11.3333V3.33337H8.66667ZM12 9.33337H14.6667V6.66671H12V9.33337ZM3.33333 12.6667H4.66667V10H2V11.3334C2 12.0667 2.6 12.6667 3.33333 12.6667ZM5.33333 12.6667H8V10H5.33333V12.6667ZM8.66667 12.6667H11.3333V10H8.66667V12.6667ZM12 12.6667H13.3333C14.0667 12.6667 14.6667 12.0667 14.6667 11.3334V10H12V12.6667ZM12 3.33337V6.00004H14.6667V4.66671C14.6667 3.93337 14.0667 3.33337 13.3333 3.33337H12Z\"/></svg>');\n  --vuu-svg-tune: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M3 18C3 18.55 3.45 19 4 19H9V17H4C3.45 17 3 17.45 3 18ZM3 6C3 6.55 3.45 7 4 7H13V5H4C3.45 5 3 5.45 3 6ZM13 20V19H20C20.55 19 21 18.55 21 18C21 17.45 20.55 17 20 17H13V16C13 15.45 12.55 15 12 15C11.45 15 11 15.45 11 16V20C11 20.55 11.45 21 12 21C12.55 21 13 20.55 13 20ZM7 10V11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13H7V14C7 14.55 7.45 15 8 15C8.55 15 9 14.55 9 14V10C9 9.45 8.55 9 8 9C7.45 9 7 9.45 7 10ZM21 12C21 11.45 20.55 11 20 11H11V13H20C20.55 13 21 12.55 21 12ZM16 9C16.55 9 17 8.55 17 8V7H20C20.55 7 21 6.55 21 6C21 5.45 20.55 5 20 5H17V4C17 3.45 16.55 3 16 3C15.45 3 15 3.45 15 4V8C15 8.55 15.45 9 16 9Z\" /></svg>');\n  --vuuOverflowContainer-minWidth: 0;\n  --filterbar-height: var(\n    --vuuFilterBar-height,\n    calc(var(--salt-size-base) + var(--salt-spacing-100))\n  );\n  --vuuFilterEditor-height: var(--filterbar-height);\n  --icon-container-height: auto;\n  --flexbar-gap: var(--salt-spacing-100);\n  --icon-marginTop: 0;\n\n  align-items: center;\n  background-color: var(--salt-container-secondary-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--vuuFilterBar-borderStyle, none none solid none);\n  border-width: 1px;\n  display: inline-flex;\n  flex: var(--vuuFilterBar-flex);\n  flex-wrap: wrap;\n  gap: var(--flexbar-gap);\n  grid-template-columns: 70px 1fr 28px;\n  grid-auto-rows: 28px 0px;\n  height: calc(var(--salt-spacing-100) + var(--filterbar-height));\n  overflow: hidden;\n  padding: var(--salt-spacing-100) var(--salt-spacing-200);\n}\n\n.vuuFilterBar-quick-filter-mode {\n  --icon-container-height: 100%;\n  --icon-marginTop: 20px;\n  --filterbar-height: var(\n    --vuuFilterBar-height,\n    calc(2 * var(--salt-size-base))\n  );\n  align-items: flex-end;\n  padding: var(--salt-spacing-100) var(--salt-spacing-200);\n}\n\n.vuuFilterBar:has(.vuuFilterEditor) {\n  grid-template-rows: 28px 28px;\n  height: calc(1px + var(--flexbar-gap) + (2 * var(--filterbar-height)));\n}\n\n.vuuFilterBar-iconContainer {\n  height: var(--icon-container-height);\n\n  .saltToggleButtonGroup {\n    margin-top: var(--icon-marginTop);\n    transition: margin-top 0.1s ease-in;\n  }\n}\n\n.vuuFilterbar-icon {\n  display: inline-block;\n  height: 16px;\n  width: 16px;\n}\n\n.vuuFilterBar [data-icon=\"grid\"] {\n  --vuu-icon-size: 16px;\n  --vuu-icon-svg: var(--vuu-svg-grid);\n}\n.vuuFilterBar [data-icon=\"tune\"] {\n  --vuu-icon-size: 16px;\n  --vuu-icon-svg: var(--vuu-svg-tune);\n}\n\n.vuuFilterBar [data-icon=\"plus\"] {\n  --vuu-icon-size: 16px;\n}\n\n.vuuFilterBar .vuuToolbar {\n  flex: 0 1 auto;\n}\n\n.vuuFilterBar-Editor {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--salt-spacing-100);\n}\n\n.vuuCustomFilters {\n  display: flex;\n  gap: var(--salt-spacing-100);\n}\n.vuuCustomFilters-filters {\n  display: flex;\n  gap: var(--salt-spacing-100);\n}\n";
 
 export { filterBarCss as default };
 //# sourceMappingURL=FilterBar.css.js.map

package/esm/filter-bar/FilterBar.js

@@ -26,7 +26,7 @@ const FilterBar = ({
   onFilterStateChanged,
   suggestionProvider,
   tableSchema,
-  variant = "custom-filters",
+  variant = "custom-filters-only",
   ...htmlAttributes
 }) => {
   const targetWindow = useWindow();
@@ -35,8 +35,8 @@ const FilterBar = ({
     css: filterBarCss,
     window: targetWindow
   });
-  const allowCustomFilters = variant !== "quick-filters";
-  const allowQuickFilters = variant !== "custom-filters";
+  const allowCustomFilters = variant !== "quick-filters-only";
+  const allowQuickFilters = variant !== "custom-filters-only";
   const controlledFilterMode = !allowCustomFilters ? "quick-filter" : !allowQuickFilters ? "custom-filter" : filterModeProp;
   const { filterMode, onChangeFilterMode } = useFilterBar({
     defaultFilterMode,
@@ -86,13 +86,9 @@ const FilterBar = ({
     "div",
     {
       ...htmlAttributes,
-      className: cx(
-        className,
-        `${classBase}-${variant}`,
-        `${classBase}-${filterMode}`
-      ),
+      className: cx(className, `${classBase}-${filterMode}-mode`),
       children: [
-        variant === "quick-filters" ? null : /* @__PURE__ */ jsx("div", { className: `${classBase}-iconContainer`, children: startAdornment }),
+        variant === "quick-filters-only" ? null : /* @__PURE__ */ jsx("div", { className: `${classBase}-iconContainer`, children: startAdornment }),
         filterMode === "custom-filter" ? /* @__PURE__ */ jsx(
           CustomFilters,
           {

package/esm/filter-bar/FilterBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBar.js","sources":["../../src/filter-bar/FilterBar.tsx"],"sourcesContent":["import {\n  DataSourceFilter,\n  SuggestionProvider,\n  TableSchema,\n} from \"@vuu-ui/vuu-data-types\";\nimport { Filter, FilterState } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { CustomFilters } from \"../custom-filters\";\nimport { QuickFilterProps, QuickFilters } from \"../quick-filters\";\nimport { FilterMode, useFilterBar } from \"./useFilterBar\";\n\nimport filterBarCss from \"./FilterBar.css\";\n\nexport type FilterBarVariant =\n  | \"custom-filters\"\n  | \"quick-filters\"\n  | \"full-filters\";\n\nexport interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {\n  QuickFilterProps?: Pick<\n    QuickFilterProps,\n    \"quickFilterColumns\" | \"onChangeQuickFilterColumns\"\n  >;\n  /**\n   * This is used to apply tailored filters based on column types and other attributes.\n   * NOTE: Always make sure that these are passed with proper re-render optimization, otherwise,\n   *       might end up with infinite state updates.\n   */\n  columnDescriptors: ColumnDescriptor[];\n  defaultFilterMode?: FilterMode;\n  defaultFilterState?: FilterState;\n  filterMode?: FilterMode;\n  filterState?: FilterState;\n  onApplyFilter: (filter: DataSourceFilter) => void;\n  onChangeFilterMode?: (filterMode: FilterMode) => void;\n  onFilterDeleted?: (filter: Filter) => void;\n  onFilterRenamed?: (filter: Filter, name: string) => void;\n  onFilterStateChanged?: (state: FilterState) => void;\n  suggestionProvider?: SuggestionProvider;\n  /**\n   * TableSchema is used both to populate list of available columns and to\n   * provide table in call to Typeahead service\n   */\n  tableSchema?: TableSchema;\n  variant?: FilterBarVariant;\n}\n\nconst classBase = \"vuuFilterBar\";\n\nexport const FilterBar = ({\n  QuickFilterProps,\n  className: classNameProp,\n  columnDescriptors,\n  defaultFilterMode,\n  defaultFilterState,\n  filterMode: filterModeProp,\n  filterState,\n  onApplyFilter,\n  onChangeFilterMode: onChangeFilterModeProp,\n  onFilterDeleted,\n  onFilterRenamed,\n  onFilterStateChanged,\n  suggestionProvider,\n  tableSchema,\n  variant = \"custom-filters\",\n  ...htmlAttributes\n}: FilterBarProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-bar\",\n    css: filterBarCss,\n    window: targetWindow,\n  });\n\n  const allowCustomFilters = variant !== \"quick-filters\";\n  const allowQuickFilters = variant !== \"custom-filters\";\n\n  const controlledFilterMode: FilterMode | undefined = !allowCustomFilters\n    ? \"quick-filter\"\n    : !allowQuickFilters\n      ? \"custom-filter\"\n      : filterModeProp;\n\n  const { filterMode, onChangeFilterMode } = useFilterBar({\n    defaultFilterMode,\n    filterMode: controlledFilterMode,\n    onChangeFilterMode: onChangeFilterModeProp,\n  });\n\n  const className = cx(classBase, classNameProp);\n\n  const startAdornment = useMemo(() => {\n    if (!allowQuickFilters) {\n      return <Icon name=\"filter\" size={16} style={{ top: 4 }} />;\n    } else {\n      return (\n        <ToggleButtonGroup\n          data-variant=\"secondary\"\n          onChange={onChangeFilterMode}\n          value={filterMode}\n        >\n          <ToggleButton\n            className=\"vuuIconToggleButton\"\n            key=\"custom-filter\"\n            value=\"custom-filter\"\n            aria-label=\"Custom filters\"\n            tabIndex={-1}\n          >\n            <Icon name=\"grid\" size={16} />\n          </ToggleButton>\n          <ToggleButton\n            className=\"vuuIconToggleButton\"\n            key=\"quick-filter\"\n            value=\"quick-filter\"\n            aria-label=\"Quick filters\"\n            tabIndex={-1}\n          >\n            <Icon name=\"tune\" size={16} />\n          </ToggleButton>\n        </ToggleButtonGroup>\n      );\n    }\n  }, [allowQuickFilters, filterMode, onChangeFilterMode]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(\n        className,\n        `${classBase}-${variant}`,\n        `${classBase}-${filterMode}`,\n      )}\n    >\n      {variant === \"quick-filters\" ? null : (\n        <div className={`${classBase}-iconContainer`}>{startAdornment}</div>\n      )}\n      {filterMode === \"custom-filter\" ? (\n        <CustomFilters\n          columnDescriptors={columnDescriptors}\n          defaultFilterState={defaultFilterState}\n          filterState={filterState}\n          onApplyFilter={onApplyFilter}\n          onFilterDeleted={onFilterDeleted}\n          onFilterRenamed={onFilterRenamed}\n          onFilterStateChanged={onFilterStateChanged}\n          tableSchema={tableSchema}\n        />\n      ) : (\n        <QuickFilters\n          {...QuickFilterProps}\n          availableColumns={columnDescriptors}\n          onApplyFilter={onApplyFilter}\n          tableSchema={tableSchema}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["QuickFilterProps"],"mappings":"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"}
+{"version":3,"file":"FilterBar.js","sources":["../../src/filter-bar/FilterBar.tsx"],"sourcesContent":["import {\n  DataSourceFilter,\n  SuggestionProvider,\n  TableSchema,\n} from \"@vuu-ui/vuu-data-types\";\nimport { Filter, FilterState } from \"@vuu-ui/vuu-filter-types\";\nimport { ColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { Icon } from \"@vuu-ui/vuu-ui-controls\";\nimport { ToggleButton, ToggleButtonGroup } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, useMemo } from \"react\";\nimport { CustomFilters } from \"../custom-filters\";\nimport { QuickFilterProps, QuickFilters } from \"../quick-filters\";\nimport { FilterMode, useFilterBar } from \"./useFilterBar\";\n\nimport filterBarCss from \"./FilterBar.css\";\n\nexport type FilterBarVariant =\n  | \"custom-filters-only\"\n  | \"quick-filters-only\"\n  | \"full-filters\";\n\nexport interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {\n  QuickFilterProps?: Pick<\n    QuickFilterProps,\n    \"quickFilterColumns\" | \"onChangeQuickFilterColumns\"\n  >;\n  /**\n   * This is used to apply tailored filters based on column types and other attributes.\n   * NOTE: Always make sure that these are passed with proper re-render optimization, otherwise,\n   *       might end up with infinite state updates.\n   */\n  columnDescriptors: ColumnDescriptor[];\n  defaultFilterMode?: FilterMode;\n  defaultFilterState?: FilterState;\n  filterMode?: FilterMode;\n  filterState?: FilterState;\n  onApplyFilter: (filter: DataSourceFilter) => void;\n  onChangeFilterMode?: (filterMode: FilterMode) => void;\n  onFilterDeleted?: (filter: Filter) => void;\n  onFilterRenamed?: (filter: Filter, name: string) => void;\n  onFilterStateChanged?: (state: FilterState) => void;\n  suggestionProvider?: SuggestionProvider;\n  /**\n   * TableSchema is used both to populate list of available columns and to\n   * provide table in call to Typeahead service\n   */\n  tableSchema?: TableSchema;\n  variant?: FilterBarVariant;\n}\n\nconst classBase = \"vuuFilterBar\";\n\nexport const FilterBar = ({\n  QuickFilterProps,\n  className: classNameProp,\n  columnDescriptors,\n  defaultFilterMode,\n  defaultFilterState,\n  filterMode: filterModeProp,\n  filterState,\n  onApplyFilter,\n  onChangeFilterMode: onChangeFilterModeProp,\n  onFilterDeleted,\n  onFilterRenamed,\n  onFilterStateChanged,\n  suggestionProvider,\n  tableSchema,\n  variant = \"custom-filters-only\",\n  ...htmlAttributes\n}: FilterBarProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-filter-bar\",\n    css: filterBarCss,\n    window: targetWindow,\n  });\n\n  const allowCustomFilters = variant !== \"quick-filters-only\";\n  const allowQuickFilters = variant !== \"custom-filters-only\";\n\n  const controlledFilterMode: FilterMode | undefined = !allowCustomFilters\n    ? \"quick-filter\"\n    : !allowQuickFilters\n      ? \"custom-filter\"\n      : filterModeProp;\n\n  const { filterMode, onChangeFilterMode } = useFilterBar({\n    defaultFilterMode,\n    filterMode: controlledFilterMode,\n    onChangeFilterMode: onChangeFilterModeProp,\n  });\n\n  const className = cx(classBase, classNameProp);\n\n  const startAdornment = useMemo(() => {\n    if (!allowQuickFilters) {\n      return <Icon name=\"filter\" size={16} style={{ top: 4 }} />;\n    } else {\n      return (\n        <ToggleButtonGroup\n          data-variant=\"secondary\"\n          onChange={onChangeFilterMode}\n          value={filterMode}\n        >\n          <ToggleButton\n            className=\"vuuIconToggleButton\"\n            key=\"custom-filter\"\n            value=\"custom-filter\"\n            aria-label=\"Custom filters\"\n            tabIndex={-1}\n          >\n            <Icon name=\"grid\" size={16} />\n          </ToggleButton>\n          <ToggleButton\n            className=\"vuuIconToggleButton\"\n            key=\"quick-filter\"\n            value=\"quick-filter\"\n            aria-label=\"Quick filters\"\n            tabIndex={-1}\n          >\n            <Icon name=\"tune\" size={16} />\n          </ToggleButton>\n        </ToggleButtonGroup>\n      );\n    }\n  }, [allowQuickFilters, filterMode, onChangeFilterMode]);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(className, `${classBase}-${filterMode}-mode`)}\n    >\n      {variant === \"quick-filters-only\" ? null : (\n        <div className={`${classBase}-iconContainer`}>{startAdornment}</div>\n      )}\n      {filterMode === \"custom-filter\" ? (\n        <CustomFilters\n          columnDescriptors={columnDescriptors}\n          defaultFilterState={defaultFilterState}\n          filterState={filterState}\n          onApplyFilter={onApplyFilter}\n          onFilterDeleted={onFilterDeleted}\n          onFilterRenamed={onFilterRenamed}\n          onFilterStateChanged={onFilterStateChanged}\n          tableSchema={tableSchema}\n        />\n      ) : (\n        <QuickFilters\n          {...QuickFilterProps}\n          availableColumns={columnDescriptors}\n          onApplyFilter={onApplyFilter}\n          tableSchema={tableSchema}\n        />\n      )}\n    </div>\n  );\n};\n"],"names":["QuickFilterProps"],"mappings":"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"}

package/esm/inline-filter/InlineFilter.css.js

@@ -1,4 +1,4 @@
-var inlineFilteCss = ".vuuInlineFilter {\n  --filter-borderColor: var(--salt-separable-secondary-borderColor);\n  --filter-color: var(--salt-content-primary-foreground-disabled);\n  --filter-padding: 1px 1px 1px 0;\n  --filter-content-height: 22px;\n  height: var(--salt-size-base);\n\n  .vuuInlineFilter-filter:has(input:focus) {\n    --filter-borderColor: transparent;\n    --filter-content-height: 20px;\n\n    outline-width: 2px;\n    outline-offset: -2px;\n    outline-style: dotted;\n    outline-color: var(--salt-focused-outlineColor);\n\n    /* the padding ensures the outline is not clipped */\n    --filter-padding: 0 2px;\n    /* prevents shift when we apply the padding */\n    --saltInput-paddingLeft: 2px;\n\n    .saltInput-input {\n      outline: none;\n    }\n    .saltInput-focused {\n      border: none;\n      outline: none;\n    }\n\n    .saltComboBox-focused {\n      outline: none;\n    }\n  }\n\n  .vuuInlineFilter-filter:focus {\n    --filter-borderColor: transparent;\n    --filter-content-height: 20px;\n    /* the padding ensures the outline is not clipped */\n    --filter-padding: 0 2px;\n    /* prevents shift when we apply the padding */\n    --saltInput-paddingLeft: 2px;\n  }\n\n  .vuuInlineFilter-filter {\n    --saltInput-minHeight: var(--filter-content-height);\n    align-items: center;\n    display: inline-flex;\n    height: 100%;\n    padding: var(--filter-padding);\n\n    .vuuTypeaheadInput {\n      border-style: solid;\n      border-color: var(--filter-borderColor);\n      border-width: 1px;\n      border-radius: 0;\n    }\n\n    .vuuTypeaheadInput {\n      height: var(--filter-content-height);\n      input::placeholder {\n        color: var(--filter-color);\n      }\n    }\n\n    .saltInput-primary.vuuInput {\n      border-style: solid;\n      border-color: var(--filter-borderColor);\n      border-width: 1px;\n      border-radius: 0;\n      height: var(--filter-content-height);\n      min-height: var(--filter-content-height);\n      input::placeholder {\n        color: var(--filter-color);\n      }\n    }\n  }\n\n  .vuuInlineFilter-virtualColSpan {\n    display: inline-block;\n  }\n}\n\n.vuuInlineFilter:focus-within {\n  --filter-borderColor: var(--salt-separable-primary-borderColor);\n  --filter-color: var(--salt-content-primary-foreground);\n}\n";
+var inlineFilteCss = ".vuuInlineFilter {\n  --filter-borderColor: var(--salt-separable-secondary-borderColor);\n  --filter-color: var(--salt-content-primary-foreground-disabled);\n  --filter-padding: 1px 1px 1px 0;\n  --item-content-height: 22px;\n  height: var(--salt-size-base);\n\n  .vuuInlineFilterCell:has(input:focus) {\n    --filter-borderColor: transparent;\n    --item-content-height: 20px;\n\n    outline-width: 2px;\n    outline-offset: -2px;\n    outline-style: dotted;\n    outline-color: var(--salt-focused-outlineColor);\n\n    /* the padding ensures the outline is not clipped */\n    --filter-padding: 0 2px;\n    /* prevents shift when we apply the padding */\n    --saltInput-paddingLeft: 2px;\n\n    .saltInput-input {\n      outline: none;\n    }\n    .saltInput-focused {\n      border: none;\n      outline: none;\n    }\n\n    .saltComboBox-focused {\n      outline: none;\n    }\n  }\n\n  .vuuInlineFilterCell:focus {\n    --filter-borderColor: transparent;\n    --item-content-height: 20px;\n    /* the padding ensures the outline is not clipped */\n    --filter-padding: 0 2px;\n    /* prevents shift when we apply the padding */\n    --saltInput-paddingLeft: 2px;\n  }\n\n  .vuuInlineFilterCell {\n    --saltInput-minHeight: var(--item-content-height);\n    --saltPillInput-minHeight: var(--item-content-height);\n    align-items: center;\n    display: inline-flex;\n    height: 100%;\n    padding: var(--filter-padding);\n\n    .vuuTypeaheadInput {\n      border-style: solid;\n      border-color: var(--filter-borderColor);\n      border-width: 1px;\n      border-radius: 0;\n      height: var(--item-content-height);\n      input::placeholder {\n        color: var(--filter-color);\n      }\n    }\n\n\n    .saltInput-primary.vuuInput {\n      border-style: solid;\n      border-color: var(--filter-borderColor);\n      border-width: 1px;\n      border-radius: 0;\n      height: var(--item-content-height);\n      min-height: var(--item-content-height);\n      input::placeholder {\n        color: var(--filter-color);\n      }\n    }\n  }\n\n  .vuuInlineFilter-virtualColSpan {\n    display: inline-block;\n  }\n}\n\n.vuuInlineFilter:focus-within {\n  --filter-borderColor: var(--salt-separable-primary-borderColor);\n  --filter-color: var(--salt-content-primary-foreground);\n}\n";
 
 export { inlineFilteCss as default };
 //# sourceMappingURL=InlineFilter.css.js.map

package/esm/inline-filter/InlineFilter.js

@@ -1,12 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { getDataItemEditControl } from '@vuu-ui/vuu-data-react';
-import { useHeaderProps, VirtualColSpan } from '@vuu-ui/vuu-table';
-import { FilterAggregator, getFieldName } from '@vuu-ui/vuu-utils';
+import { VirtualColSpan } from '@vuu-ui/vuu-table';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import { useMemo, useCallback } from 'react';
 import cx from 'clsx';
 import inlineFilteCss from './InlineFilter.css.js';
+import { useInlineFilter } from './useInlineFilter.js';
 
 const classBase = "vuuInlineFilter";
 const InputProps = {
@@ -30,44 +29,21 @@ const InlineFilter = ({
     css: inlineFilteCss,
     window: targetWindow
   });
-  const filterAggregator = useMemo(() => new FilterAggregator(), []);
-  const { columns = [], virtualColSpan = 0 } = useHeaderProps();
-  const onCommit = useCallback(
-    (evt, value = "") => {
-      const fieldName = getFieldName(evt.target);
-      const column = columns.find((c) => c.name === fieldName);
-      if (column) {
-        if (value === "") {
-          if (filterAggregator.removeFilter(column)) {
-            onChange(filterAggregator.filter);
-          }
-        } else {
-          filterAggregator.addFilter(column, value);
-          onChange(filterAggregator.filter);
-        }
-      }
-    },
-    [columns, filterAggregator, onChange]
-  );
-  const handleKeyDown = useCallback(
-    (evt) => {
-      if (evt.key === "Enter") {
-        const el = evt.target;
-        const inputElement = el.querySelector("input");
-        inputElement?.focus();
-      }
-    },
-    []
-  );
+  const { columns, onCommit, onKeyDown, virtualColSpan } = useInlineFilter({
+    onChange
+  });
   return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: classBase, role: ariaRole, children: [
     /* @__PURE__ */ jsx(VirtualColSpan, { width: virtualColSpan }),
     columns.map((column, i) => /* @__PURE__ */ jsx(
       "div",
       {
         "aria-colindex": i + 1,
-        className: cx(`${classBase}-filter`, "vuuTableCell"),
+        className: cx(`${classBase}Cell`, "vuuTableCell", {
+          "vuuTableCell-right": column.align === "right"
+        }),
         "data-field": column.name,
-        onKeyDown: handleKeyDown,
+        onKeyDown,
+        role: "cell",
         style: { width: column.width },
         children: getDataItemEditControl({
           InputProps,

package/esm/inline-filter/InlineFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"InlineFilter.js","sources":["../../src/inline-filter/InlineFilter.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { VirtualColSpan, useHeaderProps } from \"@vuu-ui/vuu-table\";\nimport {\n  CommitHandler,\n  FilterAggregator,\n  getFieldName,\n} from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  HTMLAttributes,\n  KeyboardEventHandler,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport cx from \"clsx\";\n\nimport inlineFilteCss from \"./InlineFilter.css\";\nimport { InputProps } from \"@salt-ds/core\";\nimport { TableSchemaTable } from \"@vuu-ui/vuu-data-types\";\nimport { VuuFilter } from \"@vuu-ui/vuu-protocol-types\";\nimport { BaseRowProps } from \"@vuu-ui/vuu-table-types\";\n\nconst classBase = \"vuuInlineFilter\";\n\nexport type FilterValueChangeHandler = (filter: VuuFilter) => void;\nexport interface InlineFilterProps\n  extends Partial<BaseRowProps>,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  onChange: FilterValueChangeHandler;\n  table: TableSchemaTable;\n}\n\nconst InputProps: Partial<InputProps> = {\n  inputProps: {\n    placeholder: \"Filter value\",\n  },\n  variant: \"primary\",\n};\n\nconst TypeaheadProps = {\n  highlightFirstSuggestion: false,\n};\n\nexport const InlineFilter = ({\n  ariaRole,\n  onChange,\n  table,\n  ...htmlAttributes\n}: InlineFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-inline-filter\",\n    css: inlineFilteCss,\n    window: targetWindow,\n  });\n\n  const filterAggregator = useMemo(() => new FilterAggregator(), []);\n  const { columns = [], virtualColSpan = 0 } = useHeaderProps();\n\n  const onCommit = useCallback<\n    CommitHandler<HTMLElement, string | number | undefined>\n  >(\n    (evt, value = \"\") => {\n      const fieldName = getFieldName(evt.target);\n      const column = columns.find((c) => c.name === fieldName);\n      if (column) {\n        if (value === \"\") {\n          if (filterAggregator.removeFilter(column)) {\n            onChange(filterAggregator.filter);\n          }\n        } else {\n          filterAggregator.addFilter(column, value);\n          onChange(filterAggregator.filter);\n        }\n      }\n    },\n    [columns, filterAggregator, onChange],\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLDivElement>>(\n    (evt) => {\n      if (evt.key === \"Enter\") {\n        const el = evt.target as HTMLElement;\n        const inputElement = el.querySelector(\"input\");\n        inputElement?.focus();\n      }\n    },\n    [],\n  );\n\n  return (\n    <div {...htmlAttributes} className={classBase} role={ariaRole}>\n      <VirtualColSpan width={virtualColSpan} />\n      {columns.map((column, i) => (\n        <div\n          aria-colindex={i + 1}\n          className={cx(`${classBase}-filter`, \"vuuTableCell\")}\n          data-field={column.name}\n          onKeyDown={handleKeyDown}\n          key={column.name}\n          style={{ width: column.width }}\n        >\n          {getDataItemEditControl({\n            InputProps,\n            TypeaheadProps,\n            commitWhenCleared: true,\n            dataDescriptor: column,\n            onCommit,\n            table,\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"InlineFilter.js","sources":["../../src/inline-filter/InlineFilter.tsx"],"sourcesContent":["import { getDataItemEditControl } from \"@vuu-ui/vuu-data-react\";\nimport { VirtualColSpan } from \"@vuu-ui/vuu-table\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\n\nimport inlineFilteCss from \"./InlineFilter.css\";\nimport { InputProps } from \"@salt-ds/core\";\nimport { TableSchemaTable } from \"@vuu-ui/vuu-data-types\";\nimport { VuuFilter } from \"@vuu-ui/vuu-protocol-types\";\nimport { BaseRowProps } from \"@vuu-ui/vuu-table-types\";\nimport { useInlineFilter } from \"./useInlineFilter\";\n\nconst classBase = \"vuuInlineFilter\";\n\nexport type FilterValueChangeHandler = (filter: VuuFilter) => void;\nexport interface InlineFilterProps\n  extends Partial<BaseRowProps>,\n    Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  onChange: FilterValueChangeHandler;\n  table: TableSchemaTable;\n}\n\nconst InputProps: Partial<InputProps> = {\n  inputProps: {\n    placeholder: \"Filter value\",\n  },\n  variant: \"primary\",\n};\n\nconst TypeaheadProps = {\n  highlightFirstSuggestion: false,\n};\n\nexport const InlineFilter = ({\n  ariaRole,\n  onChange,\n  table,\n  ...htmlAttributes\n}: InlineFilterProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-inline-filter\",\n    css: inlineFilteCss,\n    window: targetWindow,\n  });\n\n  const { columns, onCommit, onKeyDown, virtualColSpan } = useInlineFilter({\n    onChange,\n  });\n\n  return (\n    <div {...htmlAttributes} className={classBase} role={ariaRole}>\n      <VirtualColSpan width={virtualColSpan} />\n      {columns.map((column, i) => (\n        <div\n          aria-colindex={i + 1}\n          className={cx(`${classBase}Cell`, \"vuuTableCell\", {\n            \"vuuTableCell-right\": column.align === \"right\",\n          })}\n          data-field={column.name}\n          onKeyDown={onKeyDown}\n          key={column.name}\n          role=\"cell\"\n          style={{ width: column.width }}\n        >\n          {getDataItemEditControl({\n            InputProps,\n            TypeaheadProps,\n            commitWhenCleared: true,\n            dataDescriptor: column,\n            onCommit,\n            table,\n          })}\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAcA,MAAM,SAAY,GAAA,iBAAA,CAAA;AAUlB,MAAM,UAAkC,GAAA;AAAA,EACtC,UAAY,EAAA;AAAA,IACV,WAAa,EAAA,cAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA,SAAA;AACX,CAAA,CAAA;AAEA,MAAM,cAAiB,GAAA;AAAA,EACrB,wBAA0B,EAAA,KAAA;AAC5B,CAAA,CAAA;AAEO,MAAM,eAAe,CAAC;AAAA,EAC3B,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAyB,KAAA;AACvB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAA,cAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,OAAS,EAAA,QAAA,EAAU,SAAW,EAAA,cAAA,KAAmB,eAAgB,CAAA;AAAA,IACvE,QAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,4BACG,KAAK,EAAA,EAAA,GAAG,gBAAgB,SAAW,EAAA,SAAA,EAAW,MAAM,QACnD,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,cAAA,EAAA,EAAe,OAAO,cAAgB,EAAA,CAAA;AAAA,IACtC,OAAQ,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,CACpB,qBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,iBAAe,CAAI,GAAA,CAAA;AAAA,QACnB,SAAW,EAAA,EAAA,CAAG,CAAG,EAAA,SAAS,QAAQ,cAAgB,EAAA;AAAA,UAChD,oBAAA,EAAsB,OAAO,KAAU,KAAA,OAAA;AAAA,SACxC,CAAA;AAAA,QACD,cAAY,MAAO,CAAA,IAAA;AAAA,QACnB,SAAA;AAAA,QAEA,IAAK,EAAA,MAAA;AAAA,QACL,KAAO,EAAA,EAAE,KAAO,EAAA,MAAA,CAAO,KAAM,EAAA;AAAA,QAE5B,QAAuB,EAAA,sBAAA,CAAA;AAAA,UACtB,UAAA;AAAA,UACA,cAAA;AAAA,UACA,iBAAmB,EAAA,IAAA;AAAA,UACnB,cAAgB,EAAA,MAAA;AAAA,UAChB,QAAA;AAAA,UACA,KAAA;AAAA,SACD,CAAA;AAAA,OAAA;AAAA,MAXI,MAAO,CAAA,IAAA;AAAA,KAaf,CAAA;AAAA,GACH,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/esm/inline-filter/useInlineFilter.js

@@ -0,0 +1,37 @@
+import { useHeaderProps, useEditableCell } from '@vuu-ui/vuu-table';
+import { FilterAggregator, getFieldName } from '@vuu-ui/vuu-utils';
+import { useMemo, useCallback } from 'react';
+
+const useInlineFilter = ({
+  onChange
+}) => {
+  const filterAggregator = useMemo(() => new FilterAggregator(), []);
+  const { columns = [], virtualColSpan = 0 } = useHeaderProps();
+  const handleCommit = useCallback(
+    (evt, value = "") => {
+      const fieldName = getFieldName(evt.target);
+      const column = columns.find((c) => c.name === fieldName);
+      if (column) {
+        if (value === "") {
+          if (filterAggregator.removeFilter(column)) {
+            onChange(filterAggregator.filter);
+          }
+        } else {
+          filterAggregator.addFilter(column, value);
+          onChange(filterAggregator.filter);
+        }
+      }
+    },
+    [columns, filterAggregator, onChange]
+  );
+  const { onKeyDown } = useEditableCell();
+  return {
+    columns,
+    onCommit: handleCommit,
+    onKeyDown,
+    virtualColSpan
+  };
+};
+
+export { useInlineFilter };
+//# sourceMappingURL=useInlineFilter.js.map

package/esm/inline-filter/useInlineFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInlineFilter.js","sources":["../../src/inline-filter/useInlineFilter.ts"],"sourcesContent":["import { useEditableCell, useHeaderProps } from \"@vuu-ui/vuu-table\";\nimport {\n  CommitHandler,\n  FilterAggregator,\n  getFieldName,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo } from \"react\";\nimport { FilterValueChangeHandler } from \"./InlineFilter\";\n\nexport const useInlineFilter = ({\n  onChange,\n}: {\n  onChange: FilterValueChangeHandler;\n}) => {\n  const filterAggregator = useMemo(() => new FilterAggregator(), []);\n  const { columns = [], virtualColSpan = 0 } = useHeaderProps();\n\n  const handleCommit = useCallback<\n    CommitHandler<HTMLElement, string | number | undefined>\n  >(\n    (evt, value = \"\") => {\n      const fieldName = getFieldName(evt.target);\n      const column = columns.find((c) => c.name === fieldName);\n      if (column) {\n        if (value === \"\") {\n          if (filterAggregator.removeFilter(column)) {\n            onChange(filterAggregator.filter);\n          }\n        } else {\n          filterAggregator.addFilter(column, value);\n          onChange(filterAggregator.filter);\n        }\n      }\n    },\n    [columns, filterAggregator, onChange],\n  );\n\n  const { onKeyDown } = useEditableCell();\n\n  return {\n    columns,\n    onCommit: handleCommit,\n    onKeyDown,\n    virtualColSpan,\n  };\n};\n"],"names":[],"mappings":";;;;AASO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,QAAA;AACF,CAEM,KAAA;AACJ,EAAA,MAAM,mBAAmB,OAAQ,CAAA,MAAM,IAAI,gBAAiB,EAAA,EAAG,EAAE,CAAA,CAAA;AACjE,EAAA,MAAM,EAAE,OAAU,GAAA,IAAI,cAAiB,GAAA,CAAA,KAAM,cAAe,EAAA,CAAA;AAE5D,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IAGnB,CAAC,GAAK,EAAA,KAAA,GAAQ,EAAO,KAAA;AACnB,MAAM,MAAA,SAAA,GAAY,YAAa,CAAA,GAAA,CAAI,MAAM,CAAA,CAAA;AACzC,MAAA,MAAM,SAAS,OAAQ,CAAA,IAAA,CAAK,CAAC,CAAM,KAAA,CAAA,CAAE,SAAS,SAAS,CAAA,CAAA;AACvD,MAAA,IAAI,MAAQ,EAAA;AACV,QAAA,IAAI,UAAU,EAAI,EAAA;AAChB,UAAI,IAAA,gBAAA,CAAiB,YAAa,CAAA,MAAM,CAAG,EAAA;AACzC,YAAA,QAAA,CAAS,iBAAiB,MAAM,CAAA,CAAA;AAAA,WAClC;AAAA,SACK,MAAA;AACL,UAAiB,gBAAA,CAAA,SAAA,CAAU,QAAQ,KAAK,CAAA,CAAA;AACxC,UAAA,QAAA,CAAS,iBAAiB,MAAM,CAAA,CAAA;AAAA,SAClC;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,OAAS,EAAA,gBAAA,EAAkB,QAAQ,CAAA;AAAA,GACtC,CAAA;AAEA,EAAM,MAAA,EAAE,SAAU,EAAA,GAAI,eAAgB,EAAA,CAAA;AAEtC,EAAO,OAAA;AAAA,IACL,OAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,SAAA;AAAA,IACA,cAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/package.json

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

package/types/filter-bar/FilterBar.d.ts

@@ -4,7 +4,7 @@ import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
 import { HTMLAttributes } from "react";
 import { QuickFilterProps } from "../quick-filters";
 import { FilterMode } from "./useFilterBar";
-export type FilterBarVariant = "custom-filters" | "quick-filters" | "full-filters";
+export type FilterBarVariant = "custom-filters-only" | "quick-filters-only" | "full-filters";
 export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
     QuickFilterProps?: Pick<QuickFilterProps, "quickFilterColumns" | "onChangeQuickFilterColumns">;
     /**

package/types/inline-filter/useInlineFilter.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { CommitHandler } from "@vuu-ui/vuu-utils";
+import { FilterValueChangeHandler } from "./InlineFilter";
+export declare const useInlineFilter: ({ onChange, }: {
+    onChange: FilterValueChangeHandler;
+}) => {
+    columns: import("@vuu-ui/vuu-table-types").RuntimeColumnDescriptor[];
+    onCommit: CommitHandler<HTMLElement, string | number | undefined>;
+    onKeyDown: import("react").KeyboardEventHandler<HTMLDivElement>;
+    virtualColSpan: number;
+};