@vuu-ui/vuu-filters 3.5.0 → 3.5.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.0",
+  "version": "3.5.2",
   "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.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"
   },
   "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.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",
     "@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

@@ -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",
@@ -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: [
@@ -48,6 +49,7 @@ const ColumnFilter_ColumnFilter = /*#__PURE__*/ external_react_forwardRef(functi
                 TypeaheadProps,
                 commitWhenCleared: true,
                 dataDescriptor: controlDescriptor,
+                labels,
                 onCommit,
                 table,
                 values,

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,5 +1,5 @@
 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";
@@ -24,15 +24,17 @@ 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 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({
         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({
+    const { onlyAvailableValue, unavailableValues } = useToggleFilter({
         column,
         table,
         values
@@ -53,15 +55,23 @@ const ToggleFilter_ToggleFilter = /*#__PURE__*/ forwardRef(function({ className,
         children: [
             /*#__PURE__*/ jsx(ToggleButton, {
                 value: "all",
-                children: "ALL"
+                children: "All"
             }, "all"),
-            values.map((toggleValue)=>/*#__PURE__*/ jsx(ToggleButton, {
-                    className: clsx({
-                        [`${classBase}-onlyAvailableValue`]: onlyAvailableValue === toggleValue
-                    }),
-                    value: toggleValue,
-                    children: toggleValue
-                }, toggleValue))
+            values.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/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>>;

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;