@adaptabletools/adaptable 23.0.17 → 23.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "23.0.17",
+  "version": "23.0.18",
   "description": "Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/components/Combobox/index.d.ts

@@ -25,7 +25,7 @@ export type MultiComboboxProps<T extends ComboboxItemType> = Omit<AdaptableCombo
     /**
      * Optional override for the Select All checkbox change handler.
      * When provided, replaces the default behaviour of selecting / deselecting
-     * every item.
+     * the currently filtered items via `onValueChange`.
      */
     onSelectAllCheckboxChange?: (checked: boolean) => void;
     renderInputValues?: (items: T[]) => React.ReactNode;

package/src/components/Combobox/index.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitive, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, RESIZABLE_VIRTUALIZED_LIST_CLASS, } from '../ui/combobox';
+import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxClear, ComboboxCollection, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxLabel, ComboboxList, ComboboxPrimitive, ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, useFilteredItems, RESIZABLE_VIRTUALIZED_LIST_CLASS, } from '../ui/combobox';
 import { cn } from '../../lib/utils';
 import { ChevronDownIcon, Loader2Icon, PlusIcon } from 'lucide-react';
 import { useMemo } from 'react';
@@ -9,6 +9,55 @@ import { getItemTextLabel, toStringValue, toStringValues, valueToItem, valueToIt
 import { VirtualizedList } from './VirtualizedList';
 import { CheckBox } from '../CheckBox';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+function getSelectAllCheckboxState(selectedItems, filteredItems) {
+    if (filteredItems.length === 0) {
+        return false;
+    }
+    if (selectedItems.length === 0) {
+        return false;
+    }
+    const selectedValues = new Set(selectedItems.map((item) => item.value));
+    let selectedVisibleCount = 0;
+    let unselectedVisibleCount = 0;
+    for (const item of filteredItems) {
+        if (selectedValues.has(item.value)) {
+            selectedVisibleCount += 1;
+        }
+        else {
+            unselectedVisibleCount += 1;
+        }
+        if (selectedVisibleCount > 0 && unselectedVisibleCount > 0) {
+            return null;
+        }
+    }
+    if (selectedVisibleCount === 0) {
+        return false;
+    }
+    return true;
+}
+function applySelectAllToSelection(options) {
+    const { checked, filteredItems, currentValues, itemByValue } = options;
+    const currentSet = new Set(currentValues);
+    if (!checked) {
+        for (const item of filteredItems) {
+            currentSet.delete(item.value);
+        }
+        const values = currentValues.filter((value) => currentSet.has(value));
+        return { values, items: valueToItems(values, itemByValue) ?? [] };
+    }
+    const visibleSelected = new Set();
+    for (const item of filteredItems) {
+        if (currentSet.has(item.value)) {
+            visibleSelected.add(item.value);
+        }
+    }
+    const hiddenValues = currentValues.filter((value) => !visibleSelected.has(value));
+    const hiddenItems = valueToItems(hiddenValues, itemByValue) ?? [];
+    return {
+        values: [...hiddenItems.map((item) => item.value), ...filteredItems.map((item) => item.value)],
+        items: [...hiddenItems, ...filteredItems],
+    };
+}
 const getContentStyle = ({ maxLabelLength }) => {
     const labelWidth = `${maxLabelLength + 6}ch`;
     return {
@@ -25,6 +74,7 @@ const getEmptyText = (props) => {
 const AdaptableComboboxList = (props) => {
     const virtualizerRef = React.useRef(null);
     const loadingClassName = props.isLoading ? 'twa:opacity-50' : undefined;
+    const filteredItems = useFilteredItems();
     const renderItem = (item) => {
         const isUncreatedCreatable = item.creatable && !item.created;
         const label = isUncreatedCreatable ? `Create "${item.label}"` : item.label;
@@ -42,16 +92,12 @@ const AdaptableComboboxList = (props) => {
     return (_jsxs(_Fragment, { children: [props.showSelectAllCheckbox && (_jsx(ComboboxValue, { children: (selectedItems) => {
                     const allChecked = props.selectAllCheckboxValue !== undefined
                         ? props.selectAllCheckboxValue
-                        : selectedItems.length === props.totalCount
-                            ? true
-                            : selectedItems.length >= 1
-                                ? null
-                                : false;
+                        : getSelectAllCheckboxState(selectedItems, filteredItems);
                     return (_jsx(CheckBox, { checked: allChecked, onChange: (checked) => {
-                            props.onCheckAllChange?.(checked);
+                            props.onCheckAllChange?.(checked, filteredItems);
                         }, onKeyDown: (e) => {
                             if (e.key === 'Enter') {
-                                props.onCheckAllChange?.(!allChecked);
+                                props.onCheckAllChange?.(allChecked !== true, filteredItems);
                             }
                         }, onMouseDown: (e) => {
                             e.preventDefault();
@@ -373,15 +419,20 @@ const MultiCombobox_SimpleSearchable = (props) => {
     const showClear = props.showClear ?? true;
     const isDisabled = props.disabled;
     const { allItems, itemByValue, maxLabelLength, inputValue, onInputValueChange, onValueChange, value, } = useGetAllItems(props);
-    const onCheckAllChange = props.onSelectAllCheckboxChange ??
-        ((checked) => {
-            if (checked) {
-                onValueChange?.(allItems.map((item) => item.value), allItems);
-            }
-            else {
-                onValueChange?.([], []);
-            }
-        });
+    const onCheckAllChange = props.onSelectAllCheckboxChange != null
+        ? (checked) => {
+            props.onSelectAllCheckboxChange(checked);
+        }
+        : (checked, filteredItems) => {
+            const currentValues = (value ?? []);
+            const next = applySelectAllToSelection({
+                checked,
+                filteredItems,
+                currentValues,
+                itemByValue,
+            });
+            onValueChange?.(next.values, next.items);
+        };
     const [menuOpen, setMenuOpen] = React.useState(false);
     const onOpenChange = (open) => {
         setMenuOpen(open);
@@ -401,7 +452,7 @@ const MultiCombobox_SimpleSearchable = (props) => {
                                                 : 'twa:flex-1' }), props.searchable === false && selectedItems.length > 0 ? (_jsx("div", { className: "twa:flex-1" })) : null, _jsx("div", { "data-slot": "input-group", role: "group", className: "twa:group/input-group twa:z-10", children: _jsxs(InputGroupAddon, { align: "inline-end", className: "twa:p-0 px twa:gap-0.5", children: [props.isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), props.showTrigger !== false ? (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, { className: "twa:min-h-auto!" }), "data-slot": "combobox-toggle", className: cn(`twa:data-pressed:bg-transparent`, shouldKeepTrigger
                                                             ? ''
                                                             : 'twa:group-has-data-[slot=combobox-clear]/input-group:hidden'), disabled: isDisabled })) : null, showClear && _jsx(ComboboxClear, { disabled: isDisabled })] }) })] })) : null] }));
-                    } }) }), _jsx(ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, children: _jsx(AdaptableComboboxList, { searchable: props.searchable, emptyText: emptyText, renderItemLabel: props.renderItemLabel, showSelectAllCheckbox: props.showSelectAllCheckbox, renderCheckboxIndicator: props.renderCheckboxIndicator ?? true, onCheckAllChange: onCheckAllChange, totalCount: allItems.length, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading }) })] }));
+                    } }) }), _jsx(ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, children: _jsx(AdaptableComboboxList, { searchable: props.searchable, emptyText: emptyText, renderItemLabel: props.renderItemLabel, showSelectAllCheckbox: props.showSelectAllCheckbox, selectAllCheckboxValue: props.selectAllCheckboxValue, renderCheckboxIndicator: props.renderCheckboxIndicator ?? true, onCheckAllChange: onCheckAllChange, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading }) })] }));
 };
 const MultiComboboxChips = (props) => {
     return (_jsx(_Fragment, { children: props.selectedItems.map((item) => (_jsx(ComboboxChip, { showRemove: props.showClear, onMouseDown: (e) => {
@@ -421,15 +472,20 @@ const MultiCombobox_MenuListSearchable = (props) => {
         contentElRef.current = el;
     }, []);
     const { allItems, itemByValue, maxLabelLength, inputValue, onInputValueChange, onValueChange, value, } = useGetAllItems(props);
-    const onCheckAllChange = props.onSelectAllCheckboxChange ??
-        ((checked) => {
-            if (checked) {
-                onValueChange?.(allItems.map((item) => item.value), allItems);
-            }
-            else {
-                onValueChange?.([], []);
-            }
-        });
+    const onCheckAllChange = props.onSelectAllCheckboxChange != null
+        ? (checked) => {
+            props.onSelectAllCheckboxChange(checked);
+        }
+        : (checked, filteredItems) => {
+            const currentValues = (value ?? []);
+            const next = applySelectAllToSelection({
+                checked,
+                filteredItems,
+                currentValues,
+                itemByValue,
+            });
+            onValueChange?.(next.values, next.items);
+        };
     const hasFocusRef = React.useRef(false);
     const containerElRef = React.useRef(null);
     const isInternalFocusTarget = (target) => {
@@ -488,7 +544,7 @@ const MultiCombobox_MenuListSearchable = (props) => {
     };
     return (_jsxs(AdaptableCombobox_Root, { ...props, value: value, multiple: true, allItems: allItems, itemByValue: itemByValue, inputValue: inputValue, onInputValueChange: onInputValueChange, onValueChange: onValueChange, onOpenChange: onOpenChange, children: [props.renderInput === false ? (_jsx(ComboboxTrigger, { nativeButton: false, render: renderChips, icon: props.showTrigger !== false ? undefined : null })) : (renderChips(undefined)), _jsxs(ComboboxContent, { anchor: anchor, style: getContentStyle({ maxLabelLength }), resizable: props.resizable, contentRef: contentRefCallback, children: [_jsx(ComboboxInput, { placeholder: 'Filter...', showClear: false, ref: searchInputRef, showTrigger: false, disabled: isDisabled, onFocus: handleFocus, onBlur: handleBlur, role: "searchbox", className: 'twa:min-h-input', children: typeof props.renderSearchInputTrailing === 'function'
                             ? props.renderSearchInputTrailing()
-                            : undefined }), _jsx(AdaptableComboboxList, { renderItemLabel: props.renderItemLabel, emptyText: emptyText, searchable: props.searchable, showSelectAllCheckbox: props.showSelectAllCheckbox, selectAllCheckboxValue: props.selectAllCheckboxValue, renderCheckboxIndicator: props.renderCheckboxIndicator ?? true, onCheckAllChange: onCheckAllChange, totalCount: allItems.length, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading })] })] }));
+                            : undefined }), _jsx(AdaptableComboboxList, { renderItemLabel: props.renderItemLabel, emptyText: emptyText, searchable: props.searchable, showSelectAllCheckbox: props.showSelectAllCheckbox, selectAllCheckboxValue: props.selectAllCheckboxValue, renderCheckboxIndicator: props.renderCheckboxIndicator ?? true, onCheckAllChange: onCheckAllChange, groups: props.groups, virtualized: !!props.virtualized, showItemTooltip: !!props.showItemTooltip, open: props.open, isLoading: props.isLoading })] })] }));
 };
 export const MultiCombobox = (props) => {
     const searchable = props.searchable === false ? false : props.searchable === 'menulist' ? 'menulist' : 'inline';

package/src/components/Tree/TreeDropdown/index.js

@@ -299,12 +299,27 @@ export function TreeDropdown(props) {
             }) }));
     }, [renderSelectedValues, selectedLeafPaths, chipLabelForPath, showRemoveChip, deselectLeafPath]);
     const allLeafPaths = useMemo(() => allNodes.filter((n) => !n.hasChildren).map((n) => n.path), [allNodes]);
+    const selectAllLeafPaths = useMemo(() => {
+        if (!searchQuery) {
+            return allLeafPaths;
+        }
+        const q = searchQuery.toLowerCase();
+        return allLeafPaths.filter((path) => {
+            for (let i = 1; i <= path.length; i++) {
+                const anc = nodeByKey.get(encodePath(path.slice(0, i)));
+                if (anc && anc.label && anc.label.toLowerCase().includes(q)) {
+                    return true;
+                }
+            }
+            return false;
+        });
+    }, [allLeafPaths, searchQuery, nodeByKey]);
     const selectAllChecked = useMemo(() => {
-        if (allLeafPaths.length === 0) {
+        if (selectAllLeafPaths.length === 0) {
             return false;
         }
         let selected = 0;
-        for (const p of allLeafPaths) {
+        for (const p of selectAllLeafPaths) {
             if (selectionState.isNodeSelected(p) === true) {
                 selected++;
             }
@@ -312,25 +327,32 @@ export function TreeDropdown(props) {
         if (selected === 0) {
             return false;
         }
-        if (selected === allLeafPaths.length) {
+        if (selected === selectAllLeafPaths.length) {
             return true;
         }
         return null;
-    }, [allLeafPaths, selectionState]);
+    }, [selectAllLeafPaths, selectionState]);
     const onSelectAllChange = useCallback((checked) => {
         const next = new TreeSelectionState(internalSelection, {
             treePaths,
             strictCheckPaths: false,
         });
-        if (checked) {
-            next.selectAll();
+        if (!searchQuery) {
+            if (checked) {
+                next.selectAll();
+            }
+            else {
+                next.deselectAll();
+            }
         }
         else {
-            next.deselectAll();
+            for (const path of selectAllLeafPaths) {
+                next.setNodeSelection(path, checked);
+            }
         }
         setInternalSelection(next.getState());
         onValueChangeFromProps?.(next.getSelectedLeafNodePaths());
-    }, [internalSelection, treePaths, onValueChangeFromProps]);
+    }, [internalSelection, treePaths, onValueChangeFromProps, searchQuery, selectAllLeafPaths]);
     const renderSearchInputTrailing = useCallback(() => {
         if (branchNodes.length === 0) {
             return null;

package/src/components/ui/combobox.d.ts

@@ -31,7 +31,7 @@ declare const ComboboxGroup: React.ForwardRefExoticComponent<Omit<import("@base-
 declare const ComboboxLabel: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteGroupLabelProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): React.JSX.Element;
 declare const ComboboxEmpty: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompleteEmptyProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const ComboboxSeparator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ComboboxSeparator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ComboboxChips: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ComboboxChip: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipProps & {
     showRemove?: boolean;

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1785768338368 || Date.now(),
-    VERSION: "23.0.17" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1785941951293 || Date.now(),
+    VERSION: "23.0.18" || '--current-version--',
 };