@vuu-ui/vuu-filters 4.0.0-alpha.20 → 4.0.0-alpha.21

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-alpha.20",
+  "version": "4.0.0-alpha.21",
   "main": "./src/index.js",
   "author": "heswell",
   "license": "Apache-2.0",
@@ -10,23 +10,22 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-table-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-filter-types": "4.0.0-alpha.20"
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-table-types": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-filter-types": "4.0.0-alpha.21"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-data-react": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-filter-parser": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-popups": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-table": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.20",
-    "@salt-ds/core": "1.67.0",
-    "@salt-ds/lab": "1.0.0-alpha.99",
-    "@salt-ds/styles": "0.2.1",
-    "@salt-ds/window": "0.1.1"
+    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-data-react": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-filter-parser": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-popups": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-table": "4.0.0-alpha.21",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.21",
+    "@salt-ds/core": "1.72.0",
+    "@salt-ds/styles": "0.4.1",
+    "@salt-ds/window": "0.1.2"
   },
   "peerDependencies": {
     "@internationalized/date": "^3.0.0",

package/src/filter-clause/FilterClause.css.js

@@ -12,7 +12,7 @@ const css = `
   border-radius: var(--saltButton-borderRadius);
   align-items: center;
   gap: var(--salt-spacing-50);
-  height: calc(var(--salt-size-base) + var(--salt-size-spacing-100));
+  height: calc(var(--salt-size-base) + var(--salt-spacing-100));
   min-width: calc(var(--salt-size-base) * 4);
   padding: 0 var(--salt-spacing-100);
   border-style: solid;

package/src/tabbed-filter-container/TabbedFilterContainer.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Tab, TabList, TabPanel, TabTrigger, Tabs } from "@salt-ds/core";
+import { Tab, TabBar, TabList, TabPanel, TabTrigger, Tabs } from "@salt-ds/core";
 import clsx from "clsx";
 import { FilterPanel } from "../filter-panel/FilterPanel.js";
 import { SavedFilterPanel } from "../saved-filters/SavedFilterPanel.js";
@@ -10,22 +10,24 @@ const TabbedFilterContainer = ({ SavedFilterPanelProps, children, className, fil
         children: /*#__PURE__*/ jsxs(Tabs, {
             defaultValue: "ad-hoc-filter",
             children: [
-                /*#__PURE__*/ jsxs(TabList, {
-                    appearance: "transparent",
-                    children: [
-                        /*#__PURE__*/ jsx(Tab, {
-                            value: "ad-hoc-filter",
-                            children: /*#__PURE__*/ jsx(TabTrigger, {
-                                children: filterTabLabel
-                            })
-                        }, "ad-hoc-filter"),
-                        /*#__PURE__*/ jsx(Tab, {
-                            value: "saved-filters",
-                            children: /*#__PURE__*/ jsx(TabTrigger, {
-                                children: savedFilterLabel
-                            })
-                        }, "saved-filters")
-                    ]
+                /*#__PURE__*/ jsx(TabBar, {
+                    children: /*#__PURE__*/ jsxs(TabList, {
+                        appearance: "transparent",
+                        children: [
+                            /*#__PURE__*/ jsx(Tab, {
+                                value: "ad-hoc-filter",
+                                children: /*#__PURE__*/ jsx(TabTrigger, {
+                                    children: filterTabLabel
+                                })
+                            }, "ad-hoc-filter"),
+                            /*#__PURE__*/ jsx(Tab, {
+                                value: "saved-filters",
+                                children: /*#__PURE__*/ jsx(TabTrigger, {
+                                    children: savedFilterLabel
+                                })
+                            }, "saved-filters")
+                        ]
+                    })
                 }),
                 /*#__PURE__*/ jsx(TabPanel, {
                     value: "ad-hoc-filter",

package/src/toggle-filter/ToggleFilter.js

@@ -6,7 +6,10 @@ import clsx from "clsx";
 import { forwardRef, useCallback } from "react";
 import { useToggleFilter } from "./useToggleFilter.js";
 import ToggleFilter_0 from "./ToggleFilter.css";
-const getValues = (defaultValue, value)=>{
+const toToggleButtonValue = (value)=>"boolean" == typeof value ? `${value}` : value;
+const getValues = (defaultValueProp, valueProp)=>{
+    const defaultValue = toToggleButtonValue(defaultValueProp);
+    const value = toToggleButtonValue(valueProp);
     if (void 0 === defaultValue && void 0 === value) return [
         "all"
     ];
@@ -34,16 +37,22 @@ const ToggleFilter_ToggleFilter = /*#__PURE__*/ forwardRef(function({ className,
     });
     if (void 0 !== labels && labels.length !== values.length) throw Error("[ToggleFilter] labels must have the same number of items as values");
     const [defaultValue, value] = getValues(defaultValueProp, valueProp);
+    const stringValues = values.map(String);
     const { onlyAvailableValue, unavailableValues } = useToggleFilter({
         column,
         table,
-        values
+        values: stringValues
     });
     const handleChange = useCallback((e)=>{
         const value = e.currentTarget.value;
-        "all" === value ? onCommit(e, "") : onCommit(e, value);
+        if ("all" === value) onCommit(e, "");
+        else {
+            const toggleValue = values.find((v)=>`${v}` === value);
+            onCommit(e, "boolean" == typeof toggleValue ? toggleValue : value);
+        }
     }, [
-        onCommit
+        onCommit,
+        values
     ]);
     return /*#__PURE__*/ jsxs(ToggleButtonGroup, {
         ...ToggleButtonGroupProps,
@@ -57,7 +66,7 @@ const ToggleFilter_ToggleFilter = /*#__PURE__*/ forwardRef(function({ className,
                 value: "all",
                 children: "All"
             }, "all"),
-            values.map((toggleValue, i)=>{
+            stringValues.map((toggleValue, i)=>{
                 const unavailable = unavailableValues.includes(toggleValue);
                 return /*#__PURE__*/ jsx(Tooltip, {
                     content: NO_MATCHING_DATA,

package/types/custom-filters/CustomFilters.d.ts

@@ -4,4 +4,4 @@ import { type FilterBarProps } from "../filter-bar";
 export interface CustomFilterProps extends HTMLAttributes<HTMLDivElement>, Pick<FilterBarProps, "defaultFilterState" | "filterState" | "onApplyFilter" | "onClearFilter" | "onFilterDeleted" | "onFilterRenamed" | "onFilterStateChanged" | "vuuTable"> {
     columnDescriptors: readonly ColumnDescriptor[];
 }
-export declare const CustomFilters: ({ columnDescriptors, defaultFilterState, filterState, onApplyFilter, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, }: CustomFilterProps) => import("react").JSX.Element;
+export declare const CustomFilters: ({ columnDescriptors, defaultFilterState, filterState, onApplyFilter, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, }: CustomFilterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -30,4 +30,4 @@ export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
     vuuTable?: VuuTable;
     variant?: FilterBarVariant;
 }
-export declare const FilterBar: ({ QuickFilterProps, className: classNameProp, columnDescriptors, defaultFilterMode, defaultFilterState, filterMode: filterModeProp, filterState, onApplyFilter, onChangeFilterMode: onChangeFilterModeProp, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, variant, ...htmlAttributes }: FilterBarProps) => import("react").JSX.Element;
+export declare const FilterBar: ({ QuickFilterProps, className: classNameProp, columnDescriptors, defaultFilterMode, defaultFilterState, filterMode: filterModeProp, filterState, onApplyFilter, onChangeFilterMode: onChangeFilterModeProp, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, variant, ...htmlAttributes }: FilterBarProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +1 @@
-export declare const FilterBarMenu: () => import("react").JSX.Element;
+export declare const FilterBarMenu: () => import("react/jsx-runtime").JSX.Element;

package/types/filter-clause/FilterClause.d.ts

@@ -13,4 +13,4 @@ export interface FilterClauseProps extends Omit<HTMLAttributes<HTMLDivElement>,
     dropdownOnAutofocus?: boolean;
     vuuTable: VuuTable;
 }
-export declare const FilterClause: ({ className, columnsByName, onCancel, onDropdownOpen, onFocusSave, filterClauseModel, vuuTable, dropdownOnAutofocus, ...htmlAttributes }: FilterClauseProps) => import("react").JSX.Element;
+export declare const FilterClause: ({ className, columnsByName, onCancel, onDropdownOpen, onFocusSave, filterClauseModel, vuuTable, dropdownOnAutofocus, ...htmlAttributes }: FilterClauseProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-clause/value-editors/FilterClauseValueEditorDate.d.ts

@@ -16,5 +16,5 @@ interface FilterClauseValueEditorDateProps extends Pick<FilterClauseValueEditor,
  * created, the clause is applied to the whole day e.g. '=' selects all values
  * on that day, '>' selects all values after that day (see temporalFilterAsQuery).
  */
-export declare const FilterClauseValueEditorDate: ({ className, inputProps, onChangeValue, temporalInfo, value, }: FilterClauseValueEditorDateProps) => import("react").JSX.Element;
+export declare const FilterClauseValueEditorDate: ({ className, inputProps, onChangeValue, temporalInfo, value, }: FilterClauseValueEditorDateProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/types/filter-clause/value-editors/FilterClauseValueEditorTime.d.ts

@@ -16,5 +16,5 @@ interface FilterClauseValueEditorTimeProps extends Pick<FilterClauseValueEditor,
  * is created, the time is resolved against today's date (in the column time
  * zone), so a saved filter always applies to the current day.
  */
-export declare const FilterClauseValueEditorTime: ({ className, onChangeValue, temporalInfo, value, }: FilterClauseValueEditorTimeProps) => import("react").JSX.Element;
+export declare const FilterClauseValueEditorTime: ({ className, onChangeValue, temporalInfo, value, }: FilterClauseValueEditorTimeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/types/filter-container/FilterContainer.d.ts

@@ -16,7 +16,7 @@ export interface FilterContainerColumnFilterProps extends Omit<ColumnFilterProps
      */
     pattern?: DateTimePattern;
 }
-export declare const FilterContainerColumnFilter: ({ column: columnProp, operator, pattern: patternProp, variant, ...props }: FilterContainerColumnFilterProps) => import("react").JSX.Element;
+export declare const FilterContainerColumnFilter: ({ column: columnProp, operator, pattern: patternProp, variant, ...props }: FilterContainerColumnFilterProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * FilterContainer is a generic UI container for a collection of Filter
  * controls. Each control manages a single filter clause and the Filter
@@ -27,4 +27,4 @@ export declare const FilterContainerColumnFilter: ({ column: columnProp, operato
  * the top-level filter.
  * See FilterPanel and InlineFilter for examples of FilterContainer usage.
  */
-export declare const FilterContainer: ({ children, className, filter, filterProviderKey, onFilterApplied, onFilterCleared, ...htmlAttributes }: FilterContainerProps) => import("react").JSX.Element;
+export declare const FilterContainer: ({ children, className, filter, filterProviderKey, onFilterApplied, onFilterCleared, ...htmlAttributes }: FilterContainerProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-editor/FilterClauseCombinator.d.ts

@@ -6,4 +6,4 @@ export interface FilterClauseCombinatorProps {
     onKeyDown: KeyboardEventHandler;
     operator: FilterCombinatorOp;
 }
-export declare const FilterClauseCombinator: ({ onChange, onKeyDown, operator, }: FilterClauseCombinatorProps) => import("react").JSX.Element;
+export declare const FilterClauseCombinator: ({ onChange, onKeyDown, operator, }: FilterClauseCombinatorProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-editor/FilterEditor.d.ts

@@ -11,4 +11,4 @@ export interface FilterEditorProps extends HTMLAttributes<HTMLDivElement> {
     onSave: FilterEditSaveHandler;
     vuuTable: VuuTable;
 }
-export declare const FilterEditor: ({ columnDescriptors, filter, onCancel, onSave, vuuTable, ...htmlAttributes }: FilterEditorProps) => import("react").JSX.Element;
+export declare const FilterEditor: ({ columnDescriptors, filter, onCancel, onSave, vuuTable, ...htmlAttributes }: FilterEditorProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-pill/FilterMenu.d.ts

@@ -21,4 +21,4 @@ export interface FilterMenuProps extends Pick<MenuProps, "getVirtualElement" | "
     permissions?: FilterPermissions;
 }
 export type FilterAction = "close" | "remove" | "edit" | "rename";
-export declare const FilterMenu: ({ filterId, getVirtualElement, onMenuAction, onOpenChange, open, permissions, }: FilterMenuProps) => import("react").JSX.Element;
+export declare const FilterMenu: ({ filterId, getVirtualElement, onMenuAction, onOpenChange, open, permissions, }: FilterMenuProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-pill/FilterPill.d.ts

@@ -13,4 +13,4 @@ export interface FilterPillProps extends SplitStateButtonProps, Pick<Partial<Edi
     onBeginEdit?: (filter: Filter) => void;
     onMenuAction?: MenuActionHandler;
 }
-export declare const FilterPill: ({ allowClose, allowDelete, allowEdit, allowRename, className: classNameProp, columnsByName, editable, editing, editLabelApiRef, filter, id: idProp, onBeginEdit, onExitEditMode, onMenuAction, ...htmlAttributes }: FilterPillProps) => import("react").JSX.Element;
+export declare const FilterPill: ({ allowClose, allowDelete, allowEdit, allowRename, className: classNameProp, columnsByName, editable, editing, editLabelApiRef, filter, id: idProp, onBeginEdit, onExitEditMode, onMenuAction, ...htmlAttributes }: FilterPillProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-pill/FilterPillNext.d.ts

@@ -12,4 +12,4 @@ export interface FilterPillNextProps extends FilterPillNextHookProps, Omit<HTMLA
     permissions?: FilterPermissions;
     showTooltip?: boolean;
 }
-export declare const FilterPillNext: ({ active, appearence, columns, className, defaultActive, filter, id, onClick, onMenuAction: onMenuActionProp, permissions, showTooltip, ...htmlAttributes }: FilterPillNextProps) => import("react").JSX.Element;
+export declare const FilterPillNext: ({ active, appearence, columns, className, defaultActive, filter, id, onClick, onMenuAction: onMenuActionProp, permissions, showTooltip, ...htmlAttributes }: FilterPillNextProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-pill-menu/FilterPillMenu.d.ts

@@ -14,4 +14,4 @@ export interface FilterPillMenuProps {
     onMenuAction: MenuActionHandler;
     onMenuClose?: () => void;
 }
-export declare const FilterPillMenu: ({ allowClose, allowDelete, allowEdit, allowRename, filter, location, onMenuAction, onMenuClose, }: FilterPillMenuProps) => import("react").JSX.Element;
+export declare const FilterPillMenu: ({ allowClose, allowDelete, allowEdit, allowRename, filter, location, onMenuAction, onMenuClose, }: FilterPillMenuProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -25,4 +25,4 @@ export interface FilterProviderProps {
     savedFilters?: SavedFilterRecord;
     filterNameMaxLength?: number;
 }
-export declare const FilterProvider: ({ children, columnFilterPatterns, columnTypeFilterPatterns, onFiltersSaved, savedFilters: savedFiltersProp, filterNameMaxLength, }: FilterProviderProps) => import("react").JSX.Element;
+export declare const FilterProvider: ({ children, columnFilterPatterns, columnTypeFilterPatterns, onFiltersSaved, savedFilters: savedFiltersProp, filterNameMaxLength, }: FilterProviderProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-toggle-button/FilterToggleButton.d.ts

@@ -6,4 +6,4 @@ export interface FilterToggleButtonProps {
     filterProviderKey?: string;
     onToggle: () => void;
 }
-export declare const FilterToggleButton: ({ columns, filterProviderKey, onToggle, }: FilterToggleButtonProps) => import("react").JSX.Element;
+export declare const FilterToggleButton: ({ columns, filterProviderKey, onToggle, }: FilterToggleButtonProps) => import("react/jsx-runtime").JSX.Element;

package/types/index.d.ts

@@ -21,4 +21,4 @@ export { FilterNamePrompt as SaveFilterConfirmPrompt, type FilterNamePromptProps
 export { SavedFilterPanel, type SavedFilterPanelProps, } from "./saved-filters/SavedFilterPanel";
 export type { FilterClickHandler } from "./saved-filters/useSavedFilterPanel";
 export { TabbedFilterContainer, type TabbedFilterContainerProps, } from "./tabbed-filter-container/TabbedFilterContainer";
-export { ToggleFilter, type ToggleFilterProps, } from "./toggle-filter/ToggleFilter";
+export { ToggleFilter, type ToggleFilterProps, type ToggleFilterValue, } from "./toggle-filter/ToggleFilter";

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

@@ -9,4 +9,4 @@ export interface InlineFilterProps extends Partial<BaseRowProps>, Omit<HTMLAttri
     onFilterCleared?: () => void;
     table: TableSchemaTable;
 }
-export declare const InlineFilter: ({ ariaRole, onFilterApplied, onFilterCleared, table, ...htmlAttributes }: InlineFilterProps) => import("react").JSX.Element;
+export declare const InlineFilter: ({ ariaRole, onFilterApplied, onFilterCleared, table, ...htmlAttributes }: InlineFilterProps) => import("react/jsx-runtime").JSX.Element;

package/types/quick-filters/QuickFilters.d.ts

@@ -14,4 +14,4 @@ export interface QuickFilterProps extends HTMLAttributes<HTMLDivElement>, Pick<F
      */
     showFind?: boolean | string[];
 }
-export declare const QuickFilters: ({ allowAddColumn, allowFind, availableColumns, onApplyFilter, onClearFilter, onChangeQuickFilterColumns, quickFilterColumns, vuuTable, }: QuickFilterProps) => import("react").JSX.Element;
+export declare const QuickFilters: ({ allowAddColumn, allowFind, availableColumns, onApplyFilter, onClearFilter, onChangeQuickFilterColumns, quickFilterColumns, vuuTable, }: QuickFilterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -6,4 +6,4 @@ export interface DeleteFilterPromptProps extends Pick<PromptProps, "onConfirm" |
     columns?: ColumnDescriptor[];
     filterDescriptor: FilterContainerFilterDescriptor;
 }
-export declare const DeleteFilterPrompt: ({ children, className, columns, filterDescriptor, onClose, onConfirm, open, ...htmlAttributes }: DeleteFilterPromptProps) => import("react").JSX.Element;
+export declare const DeleteFilterPrompt: ({ children, className, columns, filterDescriptor, onClose, onConfirm, open, ...htmlAttributes }: DeleteFilterPromptProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,4 +3,4 @@ import { HTMLAttributes } from "react";
 import { FilterNamePromptHookProps } from "./useFilterNamePrompt";
 export interface FilterNamePromptProps extends FilterNamePromptHookProps, Pick<PromptProps, "onClose" | "open" | "title">, Omit<HTMLAttributes<HTMLDivElement>, "title"> {
 }
-export declare const FilterNamePrompt: ({ className, filterName, onClose, onConfirm: onConfirmProp, open, title, filterNameMaxLength, ...htmlAttributes }: FilterNamePromptProps) => import("react").JSX.Element;
+export declare const FilterNamePrompt: ({ className, filterName, onClose, onConfirm: onConfirmProp, open, title, filterNameMaxLength, ...htmlAttributes }: FilterNamePromptProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -11,4 +11,4 @@ export interface SavedFilterPanelProps extends HTMLAttributes<HTMLDivElement>, P
     availableColumns?: ColumnDescriptor[];
     filterPillPermissions?: FilterPermissions;
 }
-export declare const SavedFilterPanel: ({ availableColumns, className, filterPillPermissions, filterProviderKey, ...htmlAttributes }: SavedFilterPanelProps) => import("react").JSX.Element;
+export declare const SavedFilterPanel: ({ availableColumns, className, filterPillPermissions, filterProviderKey, ...htmlAttributes }: SavedFilterPanelProps) => import("react/jsx-runtime").JSX.Element;

package/types/tabbed-filter-container/TabbedFilterContainer.d.ts

@@ -7,4 +7,4 @@ export interface TabbedFilterContainerProps extends HTMLAttributes<HTMLDivElemen
     filterTabLabel?: string;
     savedFilterLabel?: string;
 }
-export declare const TabbedFilterContainer: ({ SavedFilterPanelProps, children, className, filter, filterProviderKey, filterTabLabel, onFilterApplied, onFilterCleared, savedFilterLabel, ...htmlAttributes }: TabbedFilterContainerProps) => import("react").JSX.Element;
+export declare const TabbedFilterContainer: ({ SavedFilterPanelProps, children, className, filter, filterProviderKey, filterTabLabel, onFilterApplied, onFilterCleared, savedFilterLabel, ...htmlAttributes }: TabbedFilterContainerProps) => import("react/jsx-runtime").JSX.Element;

package/types/toggle-filter/ToggleFilter.d.ts

@@ -1,6 +1,8 @@
 import { ToggleButtonGroupProps } from "@salt-ds/core";
 import { CommitHandler } from "@vuu-ui/vuu-utils";
 import { type ToggleFilterHookProps } from "./useToggleFilter";
+export type ToggleFilterValue = string | number | boolean;
+type Value = ToggleButtonGroupProps["value"];
 /**
  * ToggleFilter is designed to work with a FilterProvider and
  * DataSourceProvider. With a DataSourceProvider, values will
@@ -11,12 +13,20 @@ import { type ToggleFilterHookProps } from "./useToggleFilter";
  * With neither of these Providers available, the ToggleFilter is
  * behaving like a regular ToggleButtonGroup.
  */
-export interface ToggleFilterProps extends ToggleButtonGroupProps, ToggleFilterHookProps {
+export interface ToggleFilterProps extends Omit<ToggleButtonGroupProps, "defaultValue" | "value">, Omit<ToggleFilterHookProps, "values"> {
+    defaultValue?: ToggleFilterValue | Value;
     /**
      * Optional labels for the toggle buttons. If provided, must contain
      * the same number of items as values. Defaults to values.
      */
     labels?: string[];
     onCommit: CommitHandler<HTMLElement>;
+    value?: ToggleFilterValue | Value;
+    /**
+     * Values for the toggle buttons. Boolean values are converted to
+     * strings internally, the original value is passed to onCommit.
+     */
+    values: ToggleFilterValue[];
 }
 export declare const ToggleFilter: import("react").ForwardRefExoticComponent<ToggleFilterProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};