@vuu-ui/vuu-filters 3.5.2 → 3.5.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.2",
+  "version": "3.5.3",
   "main": "./src/index.js",
   "author": "heswell",
   "license": "Apache-2.0",
@@ -10,19 +10,19 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "3.5.2",
-    "@vuu-ui/vuu-protocol-types": "3.5.2",
-    "@vuu-ui/vuu-table-types": "3.5.2",
-    "@vuu-ui/vuu-filter-types": "3.5.2"
+    "@vuu-ui/vuu-data-types": "3.5.3",
+    "@vuu-ui/vuu-protocol-types": "3.5.3",
+    "@vuu-ui/vuu-table-types": "3.5.3",
+    "@vuu-ui/vuu-filter-types": "3.5.3"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "3.5.2",
-    "@vuu-ui/vuu-data-react": "3.5.2",
-    "@vuu-ui/vuu-filter-parser": "3.5.2",
-    "@vuu-ui/vuu-popups": "3.5.2",
-    "@vuu-ui/vuu-ui-controls": "3.5.2",
-    "@vuu-ui/vuu-table": "3.5.2",
-    "@vuu-ui/vuu-utils": "3.5.2",
+    "@vuu-ui/vuu-context-menu": "3.5.3",
+    "@vuu-ui/vuu-data-react": "3.5.3",
+    "@vuu-ui/vuu-filter-parser": "3.5.3",
+    "@vuu-ui/vuu-popups": "3.5.3",
+    "@vuu-ui/vuu-ui-controls": "3.5.3",
+    "@vuu-ui/vuu-table": "3.5.3",
+    "@vuu-ui/vuu-utils": "3.5.3",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/lab": "1.0.0-alpha.83",
     "@salt-ds/styles": "0.2.1",

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/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/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 {};