@vuu-ui/vuu-filters 3.5.0 → 3.5.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.0",
+  "version": "3.5.1",
   "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.0",
-    "@vuu-ui/vuu-protocol-types": "3.5.0",
-    "@vuu-ui/vuu-table-types": "3.5.0",
-    "@vuu-ui/vuu-filter-types": "3.5.0"
+    "@vuu-ui/vuu-data-types": "3.5.1",
+    "@vuu-ui/vuu-protocol-types": "3.5.1",
+    "@vuu-ui/vuu-table-types": "3.5.1",
+    "@vuu-ui/vuu-filter-types": "3.5.1"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "3.5.0",
-    "@vuu-ui/vuu-data-react": "3.5.0",
-    "@vuu-ui/vuu-filter-parser": "3.5.0",
-    "@vuu-ui/vuu-popups": "3.5.0",
-    "@vuu-ui/vuu-ui-controls": "3.5.0",
-    "@vuu-ui/vuu-table": "3.5.0",
-    "@vuu-ui/vuu-utils": "3.5.0",
+    "@vuu-ui/vuu-context-menu": "3.5.1",
+    "@vuu-ui/vuu-data-react": "3.5.1",
+    "@vuu-ui/vuu-filter-parser": "3.5.1",
+    "@vuu-ui/vuu-popups": "3.5.1",
+    "@vuu-ui/vuu-ui-controls": "3.5.1",
+    "@vuu-ui/vuu-table": "3.5.1",
+    "@vuu-ui/vuu-utils": "3.5.1",
     "@salt-ds/core": "1.54.1",
     "@salt-ds/lab": "1.0.0-alpha.83",
     "@salt-ds/styles": "0.2.1",

package/src/column-filter/ColumnFilter.js

@@ -9,7 +9,7 @@ import { useWindow } from "@salt-ds/window";
 import ColumnFilter_0 from "./ColumnFilter.css";
 import { isBetweenOperator, withDateTimePattern } from "@vuu-ui/vuu-utils";
 const classBase = "vuuColumnFilter";
-const ColumnFilter_ColumnFilter = /*#__PURE__*/ external_react_forwardRef(function({ InputProps: InputPropsProp, TypeaheadProps, className, column, defaultValue, extendedFilterOptions, onColumnFilterChange, onColumnRangeFilterChange, onCommit: onCommitProp, operator = "=", pattern, table, value: valueProp, values, variant, ...buttonGroupProps }, forwardRef) {
+const ColumnFilter_ColumnFilter = /*#__PURE__*/ external_react_forwardRef(function({ InputProps: InputPropsProp, TypeaheadProps, className, column, defaultValue, extendedFilterOptions, labels, onColumnFilterChange, onColumnRangeFilterChange, onCommit: onCommitProp, operator = "=", pattern, table, value: valueProp, values, variant, ...buttonGroupProps }, forwardRef) {
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-filter-editor",
@@ -48,6 +48,7 @@ const ColumnFilter_ColumnFilter = /*#__PURE__*/ external_react_forwardRef(functi
                 TypeaheadProps,
                 commitWhenCleared: true,
                 dataDescriptor: controlDescriptor,
+                labels,
                 onCommit,
                 table,
                 values,

package/src/toggle-filter/ToggleFilter.js

@@ -24,13 +24,14 @@ const getValues = (defaultValue, value)=>{
     ];
 };
 const classBase = "vuuToggleFilter";
-const ToggleFilter_ToggleFilter = /*#__PURE__*/ forwardRef(function({ className, column, defaultValue: defaultValueProp, onCommit, table, value: valueProp, values, ...ToggleButtonGroupProps }, forwardedRef) {
+const ToggleFilter_ToggleFilter = /*#__PURE__*/ forwardRef(function({ className, column, defaultValue: defaultValueProp, labels, onCommit, table, value: valueProp, values, ...ToggleButtonGroupProps }, forwardedRef) {
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-toggle-filter",
         css: ToggleFilter_0,
         window: targetWindow
     });
+    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 onlyAvailableValue = useToggleFilter({
         column,
@@ -55,12 +56,12 @@ const ToggleFilter_ToggleFilter = /*#__PURE__*/ forwardRef(function({ className,
                 value: "all",
                 children: "ALL"
             }, "all"),
-            values.map((toggleValue)=>/*#__PURE__*/ jsx(ToggleButton, {
+            values.map((toggleValue, i)=>/*#__PURE__*/ jsx(ToggleButton, {
                     className: clsx({
                         [`${classBase}-onlyAvailableValue`]: onlyAvailableValue === toggleValue
                     }),
                     value: toggleValue,
-                    children: toggleValue
+                    children: labels?.[i] ?? toggleValue
                 }, toggleValue))
         ]
     });

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

@@ -2,7 +2,7 @@ import { type SegmentedButtonGroupProps } from "@salt-ds/core";
 import { DataItemEditControlProps } from "@vuu-ui/vuu-data-react";
 import { ColumnFilterHookProps } from "./useColumnFilter";
 import { type DateTimePattern } from "@vuu-ui/vuu-utils";
-export interface ColumnFilterProps extends ColumnFilterHookProps, Omit<SegmentedButtonGroupProps, "defaultValue">, Pick<DataItemEditControlProps, "TypeaheadProps" | "table" | "values" | "variant"> {
+export interface ColumnFilterProps extends ColumnFilterHookProps, Omit<SegmentedButtonGroupProps, "defaultValue">, Pick<DataItemEditControlProps, "TypeaheadProps" | "labels" | "table" | "values" | "variant"> {
     /**
      * Temporal columns only. The date/time pattern used by the filter control,
      * overriding any pattern configured on the column type. The pattern also

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

@@ -12,6 +12,11 @@ import { type ToggleFilterHookProps } from "./useToggleFilter";
  * behaving like a regular ToggleButtonGroup.
  */
 export interface ToggleFilterProps extends ToggleButtonGroupProps, ToggleFilterHookProps {
+    /**
+     * 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>;
 }
 export declare const ToggleFilter: import("react").ForwardRefExoticComponent<ToggleFilterProps & import("react").RefAttributes<HTMLDivElement>>;