@vuu-ui/vuu-filters 4.0.0-alpha.20 → 4.0.0-alpha.22

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-alpha.20",
+  "version": "4.0.0-alpha.22",
   "main": "./src/index.js",
   "author": "heswell",
   "license": "Apache-2.0",
@@ -10,23 +10,22 @@
     "type-defs": "node ../../scripts/build-type-defs.mjs"
   },
   "devDependencies": {
-    "@vuu-ui/vuu-data-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-table-types": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-filter-types": "4.0.0-alpha.20"
+    "@vuu-ui/vuu-data-types": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-protocol-types": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-table-types": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-filter-types": "4.0.0-alpha.22"
   },
   "dependencies": {
-    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-data-react": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-filter-parser": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-popups": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-table": "4.0.0-alpha.20",
-    "@vuu-ui/vuu-utils": "4.0.0-alpha.20",
-    "@salt-ds/core": "1.67.0",
-    "@salt-ds/lab": "1.0.0-alpha.99",
-    "@salt-ds/styles": "0.2.1",
-    "@salt-ds/window": "0.1.1"
+    "@vuu-ui/vuu-context-menu": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-data-react": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-filter-parser": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-popups": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-ui-controls": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-table": "4.0.0-alpha.22",
+    "@vuu-ui/vuu-utils": "4.0.0-alpha.22",
+    "@salt-ds/core": "1.72.0",
+    "@salt-ds/styles": "0.4.1",
+    "@salt-ds/window": "0.1.2"
   },
   "peerDependencies": {
     "@internationalized/date": "^3.0.0",

package/src/filter-clause/FilterClause.css.js

@@ -12,7 +12,7 @@ const css = `
   border-radius: var(--saltButton-borderRadius);
   align-items: center;
   gap: var(--salt-spacing-50);
-  height: calc(var(--salt-size-base) + var(--salt-size-spacing-100));
+  height: calc(var(--salt-size-base) + var(--salt-spacing-100));
   min-width: calc(var(--salt-size-base) * 4);
   padding: 0 var(--salt-spacing-100);
   border-style: solid;

package/src/tabbed-filter-container/TabbedFilterContainer.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Tab, TabList, TabPanel, TabTrigger, Tabs } from "@salt-ds/core";
+import { Tab, TabBar, TabList, TabPanel, TabTrigger, Tabs } from "@salt-ds/core";
 import clsx from "clsx";
 import { FilterPanel } from "../filter-panel/FilterPanel.js";
 import { SavedFilterPanel } from "../saved-filters/SavedFilterPanel.js";
@@ -10,22 +10,24 @@ const TabbedFilterContainer = ({ SavedFilterPanelProps, children, className, fil
         children: /*#__PURE__*/ jsxs(Tabs, {
             defaultValue: "ad-hoc-filter",
             children: [
-                /*#__PURE__*/ jsxs(TabList, {
-                    appearance: "transparent",
-                    children: [
-                        /*#__PURE__*/ jsx(Tab, {
-                            value: "ad-hoc-filter",
-                            children: /*#__PURE__*/ jsx(TabTrigger, {
-                                children: filterTabLabel
-                            })
-                        }, "ad-hoc-filter"),
-                        /*#__PURE__*/ jsx(Tab, {
-                            value: "saved-filters",
-                            children: /*#__PURE__*/ jsx(TabTrigger, {
-                                children: savedFilterLabel
-                            })
-                        }, "saved-filters")
-                    ]
+                /*#__PURE__*/ jsx(TabBar, {
+                    children: /*#__PURE__*/ jsxs(TabList, {
+                        appearance: "transparent",
+                        children: [
+                            /*#__PURE__*/ jsx(Tab, {
+                                value: "ad-hoc-filter",
+                                children: /*#__PURE__*/ jsx(TabTrigger, {
+                                    children: filterTabLabel
+                                })
+                            }, "ad-hoc-filter"),
+                            /*#__PURE__*/ jsx(Tab, {
+                                value: "saved-filters",
+                                children: /*#__PURE__*/ jsx(TabTrigger, {
+                                    children: savedFilterLabel
+                                })
+                            }, "saved-filters")
+                        ]
+                    })
                 }),
                 /*#__PURE__*/ jsx(TabPanel, {
                     value: "ad-hoc-filter",

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"
     ];
@@ -25,7 +28,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 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",
@@ -34,16 +37,23 @@ 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,
+        disableTypeahead,
         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 +67,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/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/custom-filters/CustomFilters.d.ts

@@ -4,4 +4,4 @@ import { type FilterBarProps } from "../filter-bar";
 export interface CustomFilterProps extends HTMLAttributes<HTMLDivElement>, Pick<FilterBarProps, "defaultFilterState" | "filterState" | "onApplyFilter" | "onClearFilter" | "onFilterDeleted" | "onFilterRenamed" | "onFilterStateChanged" | "vuuTable"> {
     columnDescriptors: readonly ColumnDescriptor[];
 }
-export declare const CustomFilters: ({ columnDescriptors, defaultFilterState, filterState, onApplyFilter, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, }: CustomFilterProps) => import("react").JSX.Element;
+export declare const CustomFilters: ({ columnDescriptors, defaultFilterState, filterState, onApplyFilter, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, }: CustomFilterProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-bar/FilterBar.d.ts

@@ -30,4 +30,4 @@ export interface FilterBarProps extends HTMLAttributes<HTMLDivElement> {
     vuuTable?: VuuTable;
     variant?: FilterBarVariant;
 }
-export declare const FilterBar: ({ QuickFilterProps, className: classNameProp, columnDescriptors, defaultFilterMode, defaultFilterState, filterMode: filterModeProp, filterState, onApplyFilter, onChangeFilterMode: onChangeFilterModeProp, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, variant, ...htmlAttributes }: FilterBarProps) => import("react").JSX.Element;
+export declare const FilterBar: ({ QuickFilterProps, className: classNameProp, columnDescriptors, defaultFilterMode, defaultFilterState, filterMode: filterModeProp, filterState, onApplyFilter, onChangeFilterMode: onChangeFilterModeProp, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, variant, ...htmlAttributes }: FilterBarProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-bar/FilterBarMenu.d.ts

@@ -1 +1 @@
-export declare const FilterBarMenu: () => import("react").JSX.Element;
+export declare const FilterBarMenu: () => import("react/jsx-runtime").JSX.Element;

package/types/filter-clause/FilterClause.d.ts

@@ -13,4 +13,4 @@ export interface FilterClauseProps extends Omit<HTMLAttributes<HTMLDivElement>,
     dropdownOnAutofocus?: boolean;
     vuuTable: VuuTable;
 }
-export declare const FilterClause: ({ className, columnsByName, onCancel, onDropdownOpen, onFocusSave, filterClauseModel, vuuTable, dropdownOnAutofocus, ...htmlAttributes }: FilterClauseProps) => import("react").JSX.Element;
+export declare const FilterClause: ({ className, columnsByName, onCancel, onDropdownOpen, onFocusSave, filterClauseModel, vuuTable, dropdownOnAutofocus, ...htmlAttributes }: FilterClauseProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-clause/value-editors/FilterClauseValueEditorDate.d.ts

@@ -16,5 +16,5 @@ interface FilterClauseValueEditorDateProps extends Pick<FilterClauseValueEditor,
  * created, the clause is applied to the whole day e.g. '=' selects all values
  * on that day, '>' selects all values after that day (see temporalFilterAsQuery).
  */
-export declare const FilterClauseValueEditorDate: ({ className, inputProps, onChangeValue, temporalInfo, value, }: FilterClauseValueEditorDateProps) => import("react").JSX.Element;
+export declare const FilterClauseValueEditorDate: ({ className, inputProps, onChangeValue, temporalInfo, value, }: FilterClauseValueEditorDateProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/types/filter-clause/value-editors/FilterClauseValueEditorTime.d.ts

@@ -16,5 +16,5 @@ interface FilterClauseValueEditorTimeProps extends Pick<FilterClauseValueEditor,
  * is created, the time is resolved against today's date (in the column time
  * zone), so a saved filter always applies to the current day.
  */
-export declare const FilterClauseValueEditorTime: ({ className, onChangeValue, temporalInfo, value, }: FilterClauseValueEditorTimeProps) => import("react").JSX.Element;
+export declare const FilterClauseValueEditorTime: ({ className, onChangeValue, temporalInfo, value, }: FilterClauseValueEditorTimeProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/types/filter-container/FilterContainer.d.ts

@@ -16,7 +16,7 @@ export interface FilterContainerColumnFilterProps extends Omit<ColumnFilterProps
      */
     pattern?: DateTimePattern;
 }
-export declare const FilterContainerColumnFilter: ({ column: columnProp, operator, pattern: patternProp, variant, ...props }: FilterContainerColumnFilterProps) => import("react").JSX.Element;
+export declare const FilterContainerColumnFilter: ({ column: columnProp, operator, pattern: patternProp, variant, ...props }: FilterContainerColumnFilterProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * FilterContainer is a generic UI container for a collection of Filter
  * controls. Each control manages a single filter clause and the Filter
@@ -27,4 +27,4 @@ export declare const FilterContainerColumnFilter: ({ column: columnProp, operato
  * the top-level filter.
  * See FilterPanel and InlineFilter for examples of FilterContainer usage.
  */
-export declare const FilterContainer: ({ children, className, filter, filterProviderKey, onFilterApplied, onFilterCleared, ...htmlAttributes }: FilterContainerProps) => import("react").JSX.Element;
+export declare const FilterContainer: ({ children, className, filter, filterProviderKey, onFilterApplied, onFilterCleared, ...htmlAttributes }: FilterContainerProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-editor/FilterClauseCombinator.d.ts

@@ -6,4 +6,4 @@ export interface FilterClauseCombinatorProps {
     onKeyDown: KeyboardEventHandler;
     operator: FilterCombinatorOp;
 }
-export declare const FilterClauseCombinator: ({ onChange, onKeyDown, operator, }: FilterClauseCombinatorProps) => import("react").JSX.Element;
+export declare const FilterClauseCombinator: ({ onChange, onKeyDown, operator, }: FilterClauseCombinatorProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-editor/FilterEditor.d.ts

@@ -11,4 +11,4 @@ export interface FilterEditorProps extends HTMLAttributes<HTMLDivElement> {
     onSave: FilterEditSaveHandler;
     vuuTable: VuuTable;
 }
-export declare const FilterEditor: ({ columnDescriptors, filter, onCancel, onSave, vuuTable, ...htmlAttributes }: FilterEditorProps) => import("react").JSX.Element;
+export declare const FilterEditor: ({ columnDescriptors, filter, onCancel, onSave, vuuTable, ...htmlAttributes }: FilterEditorProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-pill/FilterMenu.d.ts

@@ -21,4 +21,4 @@ export interface FilterMenuProps extends Pick<MenuProps, "getVirtualElement" | "
     permissions?: FilterPermissions;
 }
 export type FilterAction = "close" | "remove" | "edit" | "rename";
-export declare const FilterMenu: ({ filterId, getVirtualElement, onMenuAction, onOpenChange, open, permissions, }: FilterMenuProps) => import("react").JSX.Element;
+export declare const FilterMenu: ({ filterId, getVirtualElement, onMenuAction, onOpenChange, open, permissions, }: FilterMenuProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-pill/FilterPill.d.ts

@@ -13,4 +13,4 @@ export interface FilterPillProps extends SplitStateButtonProps, Pick<Partial<Edi
     onBeginEdit?: (filter: Filter) => void;
     onMenuAction?: MenuActionHandler;
 }
-export declare const FilterPill: ({ allowClose, allowDelete, allowEdit, allowRename, className: classNameProp, columnsByName, editable, editing, editLabelApiRef, filter, id: idProp, onBeginEdit, onExitEditMode, onMenuAction, ...htmlAttributes }: FilterPillProps) => import("react").JSX.Element;
+export declare const FilterPill: ({ allowClose, allowDelete, allowEdit, allowRename, className: classNameProp, columnsByName, editable, editing, editLabelApiRef, filter, id: idProp, onBeginEdit, onExitEditMode, onMenuAction, ...htmlAttributes }: FilterPillProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-pill/FilterPillNext.d.ts

@@ -12,4 +12,4 @@ export interface FilterPillNextProps extends FilterPillNextHookProps, Omit<HTMLA
     permissions?: FilterPermissions;
     showTooltip?: boolean;
 }
-export declare const FilterPillNext: ({ active, appearence, columns, className, defaultActive, filter, id, onClick, onMenuAction: onMenuActionProp, permissions, showTooltip, ...htmlAttributes }: FilterPillNextProps) => import("react").JSX.Element;
+export declare const FilterPillNext: ({ active, appearence, columns, className, defaultActive, filter, id, onClick, onMenuAction: onMenuActionProp, permissions, showTooltip, ...htmlAttributes }: FilterPillNextProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-pill-menu/FilterPillMenu.d.ts

@@ -14,4 +14,4 @@ export interface FilterPillMenuProps {
     onMenuAction: MenuActionHandler;
     onMenuClose?: () => void;
 }
-export declare const FilterPillMenu: ({ allowClose, allowDelete, allowEdit, allowRename, filter, location, onMenuAction, onMenuClose, }: FilterPillMenuProps) => import("react").JSX.Element;
+export declare const FilterPillMenu: ({ allowClose, allowDelete, allowEdit, allowRename, filter, location, onMenuAction, onMenuClose, }: FilterPillMenuProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-provider/FilterProvider.d.ts

@@ -25,4 +25,4 @@ export interface FilterProviderProps {
     savedFilters?: SavedFilterRecord;
     filterNameMaxLength?: number;
 }
-export declare const FilterProvider: ({ children, columnFilterPatterns, columnTypeFilterPatterns, onFiltersSaved, savedFilters: savedFiltersProp, filterNameMaxLength, }: FilterProviderProps) => import("react").JSX.Element;
+export declare const FilterProvider: ({ children, columnFilterPatterns, columnTypeFilterPatterns, onFiltersSaved, savedFilters: savedFiltersProp, filterNameMaxLength, }: FilterProviderProps) => import("react/jsx-runtime").JSX.Element;

package/types/filter-toggle-button/FilterToggleButton.d.ts

@@ -6,4 +6,4 @@ export interface FilterToggleButtonProps {
     filterProviderKey?: string;
     onToggle: () => void;
 }
-export declare const FilterToggleButton: ({ columns, filterProviderKey, onToggle, }: FilterToggleButtonProps) => import("react").JSX.Element;
+export declare const FilterToggleButton: ({ columns, filterProviderKey, onToggle, }: FilterToggleButtonProps) => import("react/jsx-runtime").JSX.Element;

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/inline-filter/InlineFilter.d.ts

@@ -9,4 +9,4 @@ export interface InlineFilterProps extends Partial<BaseRowProps>, Omit<HTMLAttri
     onFilterCleared?: () => void;
     table: TableSchemaTable;
 }
-export declare const InlineFilter: ({ ariaRole, onFilterApplied, onFilterCleared, table, ...htmlAttributes }: InlineFilterProps) => import("react").JSX.Element;
+export declare const InlineFilter: ({ ariaRole, onFilterApplied, onFilterCleared, table, ...htmlAttributes }: InlineFilterProps) => import("react/jsx-runtime").JSX.Element;

package/types/quick-filters/QuickFilters.d.ts

@@ -14,4 +14,4 @@ export interface QuickFilterProps extends HTMLAttributes<HTMLDivElement>, Pick<F
      */
     showFind?: boolean | string[];
 }
-export declare const QuickFilters: ({ allowAddColumn, allowFind, availableColumns, onApplyFilter, onClearFilter, onChangeQuickFilterColumns, quickFilterColumns, vuuTable, }: QuickFilterProps) => import("react").JSX.Element;
+export declare const QuickFilters: ({ allowAddColumn, allowFind, availableColumns, onApplyFilter, onClearFilter, onChangeQuickFilterColumns, quickFilterColumns, vuuTable, }: QuickFilterProps) => import("react/jsx-runtime").JSX.Element;

package/types/saved-filters/DeleteFilterPrompt.d.ts

@@ -6,4 +6,4 @@ export interface DeleteFilterPromptProps extends Pick<PromptProps, "onConfirm" |
     columns?: ColumnDescriptor[];
     filterDescriptor: FilterContainerFilterDescriptor;
 }
-export declare const DeleteFilterPrompt: ({ children, className, columns, filterDescriptor, onClose, onConfirm, open, ...htmlAttributes }: DeleteFilterPromptProps) => import("react").JSX.Element;
+export declare const DeleteFilterPrompt: ({ children, className, columns, filterDescriptor, onClose, onConfirm, open, ...htmlAttributes }: DeleteFilterPromptProps) => import("react/jsx-runtime").JSX.Element;

package/types/saved-filters/FilterNamePrompt.d.ts

@@ -3,4 +3,4 @@ import { HTMLAttributes } from "react";
 import { FilterNamePromptHookProps } from "./useFilterNamePrompt";
 export interface FilterNamePromptProps extends FilterNamePromptHookProps, Pick<PromptProps, "onClose" | "open" | "title">, Omit<HTMLAttributes<HTMLDivElement>, "title"> {
 }
-export declare const FilterNamePrompt: ({ className, filterName, onClose, onConfirm: onConfirmProp, open, title, filterNameMaxLength, ...htmlAttributes }: FilterNamePromptProps) => import("react").JSX.Element;
+export declare const FilterNamePrompt: ({ className, filterName, onClose, onConfirm: onConfirmProp, open, title, filterNameMaxLength, ...htmlAttributes }: FilterNamePromptProps) => import("react/jsx-runtime").JSX.Element;

package/types/saved-filters/SavedFilterPanel.d.ts

@@ -11,4 +11,4 @@ export interface SavedFilterPanelProps extends HTMLAttributes<HTMLDivElement>, P
     availableColumns?: ColumnDescriptor[];
     filterPillPermissions?: FilterPermissions;
 }
-export declare const SavedFilterPanel: ({ availableColumns, className, filterPillPermissions, filterProviderKey, ...htmlAttributes }: SavedFilterPanelProps) => import("react").JSX.Element;
+export declare const SavedFilterPanel: ({ availableColumns, className, filterPillPermissions, filterProviderKey, ...htmlAttributes }: SavedFilterPanelProps) => import("react/jsx-runtime").JSX.Element;

package/types/tabbed-filter-container/TabbedFilterContainer.d.ts

@@ -7,4 +7,4 @@ export interface TabbedFilterContainerProps extends HTMLAttributes<HTMLDivElemen
     filterTabLabel?: string;
     savedFilterLabel?: string;
 }
-export declare const TabbedFilterContainer: ({ SavedFilterPanelProps, children, className, filter, filterProviderKey, filterTabLabel, onFilterApplied, onFilterCleared, savedFilterLabel, ...htmlAttributes }: TabbedFilterContainerProps) => import("react").JSX.Element;
+export declare const TabbedFilterContainer: ({ SavedFilterPanelProps, children, className, filter, filterProviderKey, filterTabLabel, onFilterApplied, onFilterCleared, savedFilterLabel, ...htmlAttributes }: TabbedFilterContainerProps) => import("react/jsx-runtime").JSX.Element;

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
@@ -10,13 +12,24 @@ import { type ToggleFilterHookProps } from "./useToggleFilter";
  * 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 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

@@ -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;

package/types/src/FilterAggregator.d.ts

@@ -1,28 +0,0 @@
-import { ColumnFilterValue, ExtendedFilterOptions, FilterClauseOp, FilterContainerFilter } from "@vuu-ui/vuu-filter-types";
-import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
-/**
- * Manages a filter that can be updated one clause at a time.
- * Works with FilterContainer to aggregate multiple filter
- * clauses edited via individual controls. It is just a wrapper
- * around a Map, does not support switching filters - create a
- * new FilterAggregator for a new filter.
- *
- */
-export declare class FilterAggregator {
-    #private;
-    constructor(filter?: FilterContainerFilter);
-    add(column: ColumnDescriptor, value: ColumnFilterValue, op?: FilterClauseOp | "between" | "between-inclusive", extendedFilterOptions?: ExtendedFilterOptions): void;
-    has({ name }: ColumnDescriptor): boolean;
-    get({ name }: ColumnDescriptor): FilterContainerFilter | undefined;
-    clear(): void;
-    /**
-     * Remove filter for this column. Return false if no filter found, otw true
-     */
-    remove(column: ColumnDescriptor): boolean;
-    get isEmpty(): boolean;
-    /**
-     * Count of the number of columns for which filters are stored
-     */
-    get count(): number;
-    get filter(): FilterContainerFilter | undefined;
-}

package/types/src/FilterModel.d.ts

@@ -1,44 +0,0 @@
-import { Filter, FilterClause, FilterClauseOp, FilterCombinatorOp } from "@vuu-ui/vuu-filter-types";
-import { EventEmitter } from "@vuu-ui/vuu-utils";
-export type FilterStatusChangeHandler = (isValid: boolean) => void;
-export type FilterChangeHandler = (filter: Partial<Filter>, isValid: boolean) => void;
-export type FilterClauseChangeHandler = (filter: Partial<FilterClause>, isValid: boolean) => void;
-export type FilterClauseModelEvents = {
-    filterClause: FilterClauseChangeHandler;
-    isValid: FilterStatusChangeHandler;
-};
-export type FilterModelEvents = {
-    filter: FilterChangeHandler;
-    isValid: FilterStatusChangeHandler;
-};
-export declare class FilterClauseModel extends EventEmitter<FilterClauseModelEvents> {
-    #private;
-    constructor(filterClause: Partial<FilterClause>);
-    get isValid(): boolean;
-    private setIsValid;
-    get column(): undefined | string;
-    set column(column: undefined | string);
-    get op(): "in" | import("@vuu-ui/vuu-filter-types").SingleValueFilterClauseOp | undefined;
-    setOp(op: undefined | FilterClauseOp): void;
-    setValue(value: undefined | string | string[] | number | number[] | boolean | boolean[], isFinal?: boolean): void;
-    asFilter(throwIfInvalid?: boolean): FilterClause;
-    commit(): void;
-}
-export declare class FilterModel extends EventEmitter<FilterModelEvents> {
-    #private;
-    constructor(filter?: Filter);
-    get isValid(): boolean;
-    private setIsValid;
-    addNewFilterClause(operator?: FilterCombinatorOp): void;
-    addFilterClause(filterClause?: Partial<FilterClause>): void;
-    removeFilterClause(filterClause: FilterClauseModel): void;
-    checkValidStatus(): void;
-    onFilterClauseChange: FilterChangeHandler;
-    onFilterClauseStatusChange: (isValid: boolean) => void;
-    getFilterClause(index: number): FilterClauseModel;
-    get op(): FilterCombinatorOp | undefined;
-    setOp(op: FilterCombinatorOp): void;
-    get filterClauses(): FilterClauseModel[];
-    get isMultiClauseFilter(): boolean;
-    asFilter(throwIfInvalid?: boolean): Filter;
-}

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

@@ -1,6 +0,0 @@
-import { type SegmentedButtonGroupProps } from "@salt-ds/core";
-import { DataItemEditControlProps } from "@vuu-ui/vuu-data-react";
-import { ColumnFilterHookProps } from "./useColumnFilter";
-export interface ColumnFilterProps extends ColumnFilterHookProps, Omit<SegmentedButtonGroupProps, "defaultValue">, Pick<DataItemEditControlProps, "TypeaheadProps" | "table" | "values" | "variant"> {
-}
-export declare const ColumnFilter: import("react").ForwardRefExoticComponent<ColumnFilterProps & import("react").RefAttributes<HTMLDivElement>>;

package/types/src/column-filter/useColumnFilter.d.ts

@@ -1,43 +0,0 @@
-import { ColumnFilterChangeHandler, ColumnFilterCommitHandler, ColumnFilterOp, ColumnFilterValue, ExtendedFilterOptions } from "@vuu-ui/vuu-filter-types";
-import { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
-import { InputProps } from "@salt-ds/core";
-import { CommitHandler } from "@vuu-ui/vuu-utils";
-import { DataItemEditControlProps } from "@vuu-ui/vuu-data-react";
-export interface ColumnFilterHookProps extends Pick<DataItemEditControlProps, "InputProps"> {
-    column: ColumnDescriptor;
-    /**
-     * Filter defaultValue. Pair of values expected when operator is
-     * 'between'. If provided, component is uncontrolled
-     */
-    defaultValue?: ColumnFilterValue;
-    /**
-     * Provides for custom filters.
-     */
-    extendedFilterOptions?: ExtendedFilterOptions;
-    /**
-     * Filter change events.
-     */
-    onColumnFilterChange?: ColumnFilterChangeHandler;
-    /**
-     * Filter change events on second control in range filter
-     */
-    onColumnRangeFilterChange?: ColumnFilterChangeHandler;
-    /**
-     * Called when user 'commits' filter value, either by pressing enter,
-     * tabbing away from control or making selection from list
-     */
-    onCommit: ColumnFilterCommitHandler;
-    operator?: ColumnFilterOp;
-    /**
-     * Filter value. Pair of values expected when operator is
-     * 'between'. If provided, component is controlled.
-     */
-    value?: ColumnFilterValue;
-}
-export declare const useColumnFilter: ({ InputProps: InputPropsProp, column, defaultValue, extendedFilterOptions, onColumnFilterChange, onColumnRangeFilterChange, onCommit, operator, value: valueProp, }: ColumnFilterHookProps) => {
-    InputProps: InputProps;
-    InputPropsRange: InputProps;
-    isInvalid: boolean;
-    onCommit: CommitHandler<HTMLElement>;
-    onCommitRange: CommitHandler<HTMLElement>;
-};

package/types/src/column-filter/utils.d.ts

@@ -1,4 +0,0 @@
-import { Filter } from "@vuu-ui/vuu-filter-types";
-export declare const isStartsWithValue: (value: string) => boolean;
-export declare const getTypeaheadFilter: (column: string, filterValues: string[], isStartsWithFilter?: boolean) => Filter | undefined;
-export declare const getRangeFilter: (column: string, startValue?: number, endValue?: number) => Filter | undefined;

package/types/src/custom-filters/CustomFilters.d.ts

@@ -1,7 +0,0 @@
-import type { ColumnDescriptor } from "@vuu-ui/vuu-table-types";
-import { HTMLAttributes } from "react";
-import { type FilterBarProps } from "../filter-bar";
-export interface CustomFilterProps extends HTMLAttributes<HTMLDivElement>, Pick<FilterBarProps, "defaultFilterState" | "filterState" | "onApplyFilter" | "onClearFilter" | "onFilterDeleted" | "onFilterRenamed" | "onFilterStateChanged" | "vuuTable"> {
-    columnDescriptors: readonly ColumnDescriptor[];
-}
-export declare const CustomFilters: ({ columnDescriptors, defaultFilterState, filterState, onApplyFilter, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, vuuTable, }: CustomFilterProps) => import("react").JSX.Element;

package/types/src/custom-filters/filterBarFocusManagement.d.ts

@@ -1 +0,0 @@
-export declare const navigateToNextItem: (el: HTMLElement | EventTarget, direction?: "bwd" | "fwd") => void;

package/types/src/custom-filters/index.d.ts

@@ -1 +0,0 @@
-export * from "./CustomFilters";

package/types/src/custom-filters/useCustomFilters.d.ts

@@ -1,33 +0,0 @@
-import { ColumnDescriptorsByName, Filter } from "@vuu-ui/vuu-filter-types";
-import { PromptProps } from "@vuu-ui/vuu-ui-controls";
-import { KeyboardEventHandler, RefObject } from "react";
-import { FilterBarProps } from "../filter-bar";
-import { FilterEditCancelHandler, FilterEditSaveHandler } from "../filter-editor";
-import { FilterPillProps } from "../filter-pill";
-export type EditFilterState = "create" | "edit";
-export type FilterState = EditFilterState | "rename";
-export declare const isEditFilterState: (filterState?: string) => filterState is EditFilterState;
-type InteractedFilterState = {
-    filter?: Filter;
-    index: number;
-    state: FilterState;
-};
-export interface CustomFilterHookProps extends Pick<FilterBarProps, "columnDescriptors" | "defaultFilterState" | "filterState" | "onApplyFilter" | "onClearFilter" | "onFilterDeleted" | "onFilterRenamed" | "onFilterStateChanged"> {
-    containerRef: RefObject<HTMLDivElement | null>;
-}
-export declare const useCustomFilters: ({ columnDescriptors, containerRef, defaultFilterState, filterState, onApplyFilter, onClearFilter, onFilterDeleted, onFilterRenamed, onFilterStateChanged, }: CustomFilterHookProps) => {
-    FilterPillProps: Omit<FilterPillProps, "filter" | "selected">;
-    activeFilterIndex: number[];
-    addButtonProps: {
-        ref: RefObject<HTMLButtonElement | null>;
-        onClick: () => void;
-        onKeyDown: KeyboardEventHandler;
-    };
-    columnsByName: ColumnDescriptorsByName;
-    filters: Filter[];
-    interactedFilterState: InteractedFilterState | undefined;
-    onCancelEdit: FilterEditCancelHandler;
-    onSave: FilterEditSaveHandler;
-    promptProps: PromptProps | null;
-};
-export {};