@vuu-ui/vuu-filters 3.5.1 → 3.5.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.1",
+  "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.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"
+    "@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.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",
+    "@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/column-filter/ColumnFilter.css.js

@@ -43,6 +43,10 @@ const css = `
   --saltButton-padding: var(--salt-spacing-200);
 }
 
+.vuuColumnFilter-toggle {
+  max-width: none;
+}
+
 .vuuColumnFilter-invalid {
   border-color: red;
 }

package/src/column-filter/ColumnFilter.js

@@ -39,7 +39,8 @@ const ColumnFilter_ColumnFilter = /*#__PURE__*/ external_react_forwardRef(functi
     return /*#__PURE__*/ jsxs(SegmentedButtonGroup, {
         ...buttonGroupProps,
         className: clsx(classBase, className, {
-            [`${classBase}-invalid`]: isInvalid
+            [`${classBase}-invalid`]: isInvalid,
+            [`${classBase}-toggle`]: "toggle" === variant
         }),
         ref: forwardRef,
         children: [

package/src/toggle-filter/ToggleFilter.css.js

@@ -3,6 +3,14 @@ const css = `
   & .vuuToggleFilter-onlyAvailableValue:not([aria-checked="true"], :hover) {
     background-color: var(--vuuToggleFilter-implicitActive-bg, var(--salt-actionable-bold-background));
   }
+
+  & .vuuToggleFilter-unavailableValue:not([aria-checked="true"]) {
+    background: var(--toggleButton-background);
+    border-color: var(--toggleButton-borderColor);
+    color: var(--toggleButton-text-color);
+    cursor: var(--vuuToggleFilter-unavailableValue-cursor, var(--salt-cursor-disabled));
+    opacity: var(--vuuToggleFilter-unavailableValue-opacity, .4);
+  }
 }
 
 

package/src/toggle-filter/ToggleFilter.js

@@ -1,12 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
+import { ToggleButton, ToggleButtonGroup, Tooltip } from "@salt-ds/core";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 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"
     ];
@@ -24,6 +27,7 @@ const getValues = (defaultValue, value)=>{
     ];
 };
 const classBase = "vuuToggleFilter";
+const NO_MATCHING_DATA = "No matching data";
 const ToggleFilter_ToggleFilter = /*#__PURE__*/ forwardRef(function({ className, column, defaultValue: defaultValueProp, labels, onCommit, table, value: valueProp, values, ...ToggleButtonGroupProps }, forwardedRef) {
     const targetWindow = useWindow();
     useComponentCssInjection({
@@ -33,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 onlyAvailableValue = useToggleFilter({
+    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,
@@ -54,15 +64,23 @@ const ToggleFilter_ToggleFilter = /*#__PURE__*/ forwardRef(function({ className,
         children: [
             /*#__PURE__*/ jsx(ToggleButton, {
                 value: "all",
-                children: "ALL"
+                children: "All"
             }, "all"),
-            values.map((toggleValue, i)=>/*#__PURE__*/ jsx(ToggleButton, {
-                    className: clsx({
-                        [`${classBase}-onlyAvailableValue`]: onlyAvailableValue === toggleValue
-                    }),
-                    value: toggleValue,
-                    children: labels?.[i] ?? toggleValue
-                }, toggleValue))
+            stringValues.map((toggleValue, i)=>{
+                const unavailable = unavailableValues.includes(toggleValue);
+                return /*#__PURE__*/ jsx(Tooltip, {
+                    content: NO_MATCHING_DATA,
+                    disabled: !unavailable,
+                    children: /*#__PURE__*/ jsx(ToggleButton, {
+                        className: clsx({
+                            [`${classBase}-onlyAvailableValue`]: onlyAvailableValue === toggleValue,
+                            [`${classBase}-unavailableValue`]: unavailable
+                        }),
+                        value: toggleValue,
+                        children: labels?.[i] ?? toggleValue
+                    })
+                }, toggleValue);
+            })
         ]
     });
 });

package/src/toggle-filter/useToggleFilter.js

@@ -1,57 +1,81 @@
-import { useSavedFilters } from "../filter-provider/FilterContext.js";
 import { useTypeaheadSuggestions } from "@vuu-ui/vuu-data-react";
-import { useCallback, useMemo, useRef, useState } from "react";
-import { filtersAreEqual, getVuuTable } from "@vuu-ui/vuu-utils";
+import { parseFilter } from "@vuu-ui/vuu-filter-parser";
+import { extractFilterForColumn, getVuuTable, useDataSource } from "@vuu-ui/vuu-utils";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 const assertValid = (values, actualValues)=>{
     if (actualValues.some((val)=>-1 === values.indexOf(val))) console.warn(`[useToggleFilter] ToggleFilter is configured with values which do not include all values from data source
             [${values.join()}]
             [${actualValues.join()}]`);
 };
-const typeaheadRefreshRequired = (f1, f2)=>{
-    if (null === f1 && null === f2) return false;
-    if (null === f1 || null === f2) return true;
-    if (filtersAreEqual(f1, f2)) return false;
-    return true;
+const hasFilterOnColumn = (filterSpec, column)=>{
+    if (void 0 === filterSpec || "" === filterSpec.filter) return false;
+    const filter = filterSpec.filterStruct ?? parseFilter(filterSpec.filter);
+    return void 0 !== extractFilterForColumn(filter, column);
 };
 const useToggleFilter = ({ column, table, values })=>{
-    const { currentFilter } = useSavedFilters();
-    const currentFilterRef = useRef(currentFilter.filter);
-    const [typeaheadValues, setTypeaheadValues] = useState([]);
+    const dataSource = useDataSource(false);
+    const [typeaheadValues, setTypeaheadValues] = useState(void 0);
     const getSuggestions = useTypeaheadSuggestions();
-    const refreshSuggestions = useCallback((table)=>{
-        const vuuTable = getVuuTable(table);
+    const requestIdRef = useRef(0);
+    const valuesRef = useRef(values);
+    valuesRef.current = values;
+    const valuesKey = values.join("\u0000");
+    const vuuTable = table ? getVuuTable(table) : void 0;
+    const tableModule = vuuTable?.module;
+    const tableName = vuuTable?.table;
+    const checkAvailability = useCallback(()=>{
+        if (void 0 === tableModule || void 0 === tableName || void 0 === dataSource) return;
+        if (hasFilterOnColumn(dataSource.filter, column)) return;
+        const requestId = ++requestIdRef.current;
         const params = [
-            vuuTable,
+            {
+                module: tableModule,
+                table: tableName
+            },
             column
         ];
         getSuggestions(params).then((suggestions)=>{
-            if (false === suggestions) setTypeaheadValues([]);
-            else {
-                assertValid(values, suggestions);
-                setTypeaheadValues(suggestions);
-            }
+            if (requestId !== requestIdRef.current || false === suggestions) return;
+            assertValid(valuesRef.current, suggestions);
+            setTypeaheadValues(suggestions);
         });
     }, [
         column,
+        dataSource,
         getSuggestions,
-        values
+        tableModule,
+        tableName
     ]);
-    useMemo(()=>{
-        if (table) refreshSuggestions(table);
+    useEffect(()=>{
+        checkAvailability();
     }, [
-        refreshSuggestions,
-        table
+        checkAvailability
     ]);
-    useMemo(()=>{
-        const { current: filter } = currentFilterRef;
-        if (table && typeaheadRefreshRequired(filter, currentFilter.filter)) refreshSuggestions(table);
-        currentFilterRef.current = currentFilter.filter;
+    useEffect(()=>{
+        if (dataSource) {
+            const handleConfigChange = (_config, _range, _confirmed, configChanges)=>{
+                if (configChanges?.filterChanged) checkAvailability();
+            };
+            dataSource.on("config", handleConfigChange);
+            return ()=>{
+                dataSource.removeListener("config", handleConfigChange);
+            };
+        }
     }, [
-        currentFilter.filter,
-        refreshSuggestions,
-        table
+        checkAvailability,
+        dataSource
+    ]);
+    return useMemo(()=>{
+        if (void 0 === typeaheadValues) return {
+            unavailableValues: []
+        };
+        return {
+            onlyAvailableValue: 1 === typeaheadValues.length ? typeaheadValues[0] : void 0,
+            unavailableValues: valuesRef.current.filter((value)=>!typeaheadValues.includes(value))
+        };
+    }, [
+        typeaheadValues,
+        valuesKey
     ]);
-    const [firstValue] = typeaheadValues;
-    return 1 === typeaheadValues.length ? firstValue : void 0;
 };
 export { useToggleFilter };

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

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

@@ -8,4 +8,22 @@ export interface ToggleFilterHookProps {
     table?: TableSchemaTable;
     values: string[];
 }
-export declare const useToggleFilter: ({ column, table, values, }: ToggleFilterHookProps) => string | undefined;
+export interface ToggleFilterHookResult {
+    /**
+     * If only one of the toggle values has matching data, that value.
+     */
+    onlyAvailableValue?: string;
+    /**
+     * Toggle values for which there is no matching data.
+     */
+    unavailableValues: string[];
+}
+/**
+ * Determines which toggle values have matching data, using typeahead
+ * against the DataSource. Typeahead respects the filter applied to the
+ * DataSource, so while a filter on this column is in effect, results
+ * would only reflect the filtered value. In that case no check is made
+ * and the result of the last check (if any) is retained. If there has
+ * been no check, all values are assumed to possibly have data.
+ */
+export declare const useToggleFilter: ({ column, table, values, }: ToggleFilterHookProps) => ToggleFilterHookResult;