@vuu-ui/vuu-filters 4.0.0-beta.2 → 4.0.0-beta.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.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": "4.0.0-beta.2",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-beta.2",
-    "@vuu-ui/vuu-table-types": "4.0.0-beta.2",
-    "@vuu-ui/vuu-filter-types": "4.0.0-beta.2"
+    "@vuu-ui/vuu-data-types": "4.0.0-beta.3",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-beta.3",
+    "@vuu-ui/vuu-table-types": "4.0.0-beta.3",
+    "@vuu-ui/vuu-filter-types": "4.0.0-beta.3"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "4.0.0-beta.2",
-    "@vuu-ui/vuu-data-react": "4.0.0-beta.2",
-    "@vuu-ui/vuu-filter-parser": "4.0.0-beta.2",
-    "@vuu-ui/vuu-popups": "4.0.0-beta.2",
-    "@vuu-ui/vuu-ui-controls": "4.0.0-beta.2",
-    "@vuu-ui/vuu-table": "4.0.0-beta.2",
-    "@vuu-ui/vuu-utils": "4.0.0-beta.2",
+    "@vuu-ui/vuu-context-menu": "4.0.0-beta.3",
+    "@vuu-ui/vuu-data-react": "4.0.0-beta.3",
+    "@vuu-ui/vuu-filter-parser": "4.0.0-beta.3",
+    "@vuu-ui/vuu-popups": "4.0.0-beta.3",
+    "@vuu-ui/vuu-ui-controls": "4.0.0-beta.3",
+    "@vuu-ui/vuu-table": "4.0.0-beta.3",
+    "@vuu-ui/vuu-utils": "4.0.0-beta.3",
     "@salt-ds/core": "1.72.0",
     "@salt-ds/styles": "0.4.1",
     "@salt-ds/window": "0.1.2"

package/src/toggle-filter/ToggleFilter.js

@@ -28,7 +28,7 @@ const getValues = (defaultValueProp, valueProp)=>{
 };
 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 ToggleFilter_ToggleFilter = /*#__PURE__*/ forwardRef(function({ className, column, defaultValue: defaultValueProp, disableTypeahead, labels, onCommit, table, value: valueProp, values, ...ToggleButtonGroupProps }, forwardedRef) {
     const targetWindow = useWindow();
     useComponentCssInjection({
         testId: "vuu-toggle-filter",
@@ -40,6 +40,7 @@ const ToggleFilter_ToggleFilter = /*#__PURE__*/ forwardRef(function({ className,
     const stringValues = values.map(String);
     const { onlyAvailableValue, unavailableValues } = useToggleFilter({
         column,
+        disableTypeahead,
         table,
         values: stringValues
     });

package/src/toggle-filter/useToggleFilter.js

@@ -12,7 +12,11 @@ const hasFilterOnColumn = (filterSpec, column)=>{
     const filter = filterSpec.filterStruct ?? parseFilter(filterSpec.filter);
     return void 0 !== extractFilterForColumn(filter, column);
 };
-const useToggleFilter = ({ column, table, values })=>{
+const isNonStringColumn = (dataSource, column)=>{
+    const serverDataType = dataSource?.tableSchema?.columns.find((col)=>col.name === column)?.serverDataType;
+    return void 0 !== serverDataType && "string" !== serverDataType;
+};
+const useToggleFilter = ({ column, disableTypeahead = false, table, values })=>{
     const dataSource = useDataSource(false);
     const [typeaheadValues, setTypeaheadValues] = useState(void 0);
     const getSuggestions = useTypeaheadSuggestions();
@@ -24,7 +28,7 @@ const useToggleFilter = ({ column, table, values })=>{
     const tableModule = vuuTable?.module;
     const tableName = vuuTable?.table;
     const checkAvailability = useCallback(()=>{
-        if (void 0 === tableModule || void 0 === tableName || void 0 === dataSource) return;
+        if (disableTypeahead || void 0 === tableModule || void 0 === tableName || void 0 === dataSource || isNonStringColumn(dataSource, column)) return;
         if (hasFilterOnColumn(dataSource.filter, column)) return;
         const requestId = ++requestIdRef.current;
         const params = [
@@ -42,6 +46,7 @@ const useToggleFilter = ({ column, table, values })=>{
     }, [
         column,
         dataSource,
+        disableTypeahead,
         getSuggestions,
         tableModule,
         tableName
@@ -65,6 +70,14 @@ const useToggleFilter = ({ column, table, values })=>{
         checkAvailability,
         dataSource
     ]);
+    useEffect(()=>{
+        if (disableTypeahead) {
+            requestIdRef.current += 1;
+            setTypeaheadValues(void 0);
+        }
+    }, [
+        disableTypeahead
+    ]);
     return useMemo(()=>{
         if (void 0 === typeaheadValues) return {
             unavailableValues: []

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

@@ -12,6 +12,9 @@ type Value = ToggleButtonGroupProps["value"];
  * values from dataSource.
  * With neither of these Providers available, the ToggleFilter is
  * behaving like a regular ToggleButtonGroup.
+ * Validation of values uses the typeahead service, which only supports
+ * string columns. It can be disabled with disableTypeahead and is always
+ * disabled for a non-string (e.g. boolean or numeric) column.
  */
 export interface ToggleFilterProps extends Omit<ToggleButtonGroupProps, "defaultValue" | "value">, Omit<ToggleFilterHookProps, "values"> {
     defaultValue?: ToggleFilterValue | Value;

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

@@ -1,6 +1,14 @@
 import type { TableSchemaTable } from "@vuu-ui/vuu-data-types";
 export interface ToggleFilterHookProps {
     column: string;
+    /**
+     * Typeahead is used to determine which toggle values have matching
+     * data. Set disableTypeahead to opt out of this check, all values
+     * will then be treated as available. Typeahead only supports string
+     * lookups, so it is always disabled if the serverDataType of column
+     * (from the DataSource tableSchema) is anything other than string.
+     */
+    disableTypeahead?: boolean;
     /**
      * table must be provided to enable validation
      * of values using server data.
@@ -26,4 +34,4 @@ export interface ToggleFilterHookResult {
  * 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;
+export declare const useToggleFilter: ({ column, disableTypeahead, table, values, }: ToggleFilterHookProps) => ToggleFilterHookResult;