@adaptabletools/adaptable 20.0.0-canary.22 → 20.0.0-canary.23

package/src/components/Select/Select.js

@@ -198,20 +198,36 @@ export const Select = function (props) {
             const { setValue, getValue, focusedOption, options, selectProps } = props;
             const { filterOption, inputValue, options: selectOptions, isLoading } = selectProps;
             const filterFunction = React.useCallback(({ data }) => filterOption({ data, label: `${data.label}`, value: data.value }, inputValue), [filterOption, inputValue]);
+            const hasFilter = inputValue !== '';
+            const filteredOptionsValues = new Set();
+            const filteredOptions = !hasFilter
+                ? options
+                : options.filter((data) => {
+                    const included = filterOption({ data, label: `${data.label}`, value: data.value }, inputValue);
+                    if (included) {
+                        filteredOptionsValues.add(data.value);
+                    }
+                    return included;
+                });
             const focusedOptionIndex = options
                 .filter((option) => filterFunction({ data: option }))
                 .indexOf(focusedOption);
+            const valueStr = getValue()
+                .map((option) => option.value)
+                .join(',');
             const selectedRows = useMemo(() => {
                 const selectedRows = [];
+                // we build the Infinite Table selection
                 getValue().forEach((option) => {
-                    selectedRows.push(option.value);
+                    // if there are no filters, include everything that is in the value
+                    // but if there is a filter (which will be smaller than the current value)
+                    // only include the current options that match the filter
+                    if (!hasFilter || filteredOptionsValues.has(option.value)) {
+                        selectedRows.push(option.value);
+                    }
                 });
                 return selectedRows;
-            }, [
-                getValue()
-                    .map((option) => option.value)
-                    .join(','),
-            ]);
+            }, [valueStr, inputValue, hasFilter]);
             const rowSelection = React.useMemo(() => {
                 return isMulti
                     ? {
@@ -224,24 +240,74 @@ export const Select = function (props) {
             const onRowSelectionChange = React.useCallback((selectionParams) => {
                 let selection = [];
                 const { selectedRows, defaultSelection, deselectedRows } = selectionParams;
-                if (defaultSelection === true && deselectedRows.length === 0) {
-                    // all selected
-                    selection = options.map((option) => {
-                        return { value: option.value };
-                    });
-                }
-                else if (defaultSelection === false && selectedRows.length === 0) {
-                    // none selected
-                    selection = [];
+                if (hasFilter) {
+                    if (defaultSelection === true && deselectedRows.length === 0) {
+                        // all selected
+                        const currentValue = getValue();
+                        const includedKeys = new Set();
+                        // add all the options that are in the current value
+                        selection = currentValue.map((option) => {
+                            includedKeys.add(option.value);
+                            return option;
+                        });
+                        // also add all the options that match the filter
+                        filteredOptions.forEach((option) => {
+                            // make sure you don't add the same option twice
+                            if (!includedKeys.has(option.value)) {
+                                selection.push({ value: option.value });
+                            }
+                        });
+                    }
+                    else if (defaultSelection === false && selectedRows.length === 0) {
+                        // we need to clear the selection
+                        // but we have a filter, so we need to clear only those options that are included in the filter
+                        // and leave the rest
+                        const currentValue = getValue();
+                        selection = currentValue.filter((row) => !filteredOptionsValues.has(row.value));
+                    }
+                    else {
+                        // some selected
+                        const currentValue = getValue();
+                        const includedKeys = new Set();
+                        // start with an empty selection
+                        selection = [];
+                        // add those in the value that are not in the filter
+                        selection = currentValue.filter((row) => {
+                            const res = !filteredOptionsValues.has(row.value);
+                            if (res) {
+                                includedKeys.add(row.value);
+                            }
+                            return res;
+                        });
+                        // and now also add those in the filter that are actually selected
+                        selectedRows.forEach((row) => {
+                            if (!includedKeys.has(row)) {
+                                selection.push({ value: row });
+                            }
+                        });
+                    }
                 }
                 else {
-                    selection = selectedRows.map((row) => {
-                        return { value: row };
-                    });
+                    if (defaultSelection === true && deselectedRows.length === 0) {
+                        // all selected
+                        selection = options.map((option) => {
+                            return { value: option.value };
+                        });
+                    }
+                    else if (defaultSelection === false && selectedRows.length === 0) {
+                        // none selected
+                        selection = [];
+                    }
+                    else {
+                        // some selected
+                        selection = selectedRows.map((row) => {
+                            return { value: row };
+                        });
+                    }
                 }
                 //@ts-ignore
                 setValue(selection, 'select-option');
-            }, [setValue]);
+            }, [setValue, filterOption, inputValue, hasFilter, filteredOptions, rowSelection, valueStr]);
             const onSingleRowSelectionChange = React.useCallback((value) => {
                 if (value == undefined && rowSelection != undefined) {
                     return;
@@ -259,9 +325,11 @@ export const Select = function (props) {
             }, []);
             return (React.createElement(DataSource, { 
                 // @ts-ignore
-                data: props.options, primaryKey: "value", selectionMode: isMulti ? 'multi-row' : 'single-row', 
+                // data={props.options}
+                // @ts-ignore
+                data: filteredOptions, primaryKey: "value", selectionMode: isMulti ? 'multi-row' : 'single-row', 
                 // @ts-ignore
-                onRowSelectionChange: isLoading ? null : isMulti ? onRowSelectionChange : onSingleRowSelectionChange, rowSelection: rowSelection, filterFunction: filterFunction, isRowDisabled: isRowDisabled },
+                onRowSelectionChange: isLoading ? null : isMulti ? onRowSelectionChange : onSingleRowSelectionChange, rowSelection: rowSelection, isRowDisabled: isRowDisabled },
                 React.createElement(InfiniteTable, { header: isMulti && showHeaderSelectionCheckbox ? true : false, rowClassName: rowClassName, showZebraRows: false, onCellClick: isLoading ? null : onCellClick, keyboardNavigation: isLoading ? false : 'row', activeRowIndex: focusedOptionIndex, keyboardSelection: true, rowHeight: ROW_HEIGHT, columns: isMulti ? INFINITE_COLUMNS_WITH_CHECKBOX : INFINITE_COLUMNS_WITH_RADIO, domProps: INFINITE_DOM_PROPS })));
         };
     }, [isMulti, showHeaderSelectionCheckbox]);
@@ -284,7 +352,12 @@ export const Select = function (props) {
         // This needed so the menu is not clipped by overflow: hidden
         menuPortalTarget: props.menuPortalTarget === undefined ? document.body : null, isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {
             if (isMulti) {
-                props.onChange(option.map((x) => x?.value));
+                const value = option.map((x) => x?.value);
+                props.onChange(value);
+                // ensure element keeps focus
+                requestAnimationFrame(() => {
+                    ref.current?.focus();
+                });
             }
             else {
                 props.onChange(option?.value);

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { ButtonProps } from 'rebass';
 import { ReactNode } from 'react';
-import { AccessLevel } from '../../PredefinedConfig/Common/Entitlement';
-import { AdaptableIcon } from '../../PredefinedConfig/Common/AdaptableIcon';
+import { AccessLevel } from '../../AdaptableState/Common/Entitlement';
+import { AdaptableIcon } from '../../AdaptableState/Common/AdaptableIcon';
 export declare const baseClassName = "ab-SimpleButton";
 export interface SimpleButtonProps extends Omit<ButtonProps, 'ref'> {
     tooltip?: string;

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CSSProperties } from 'react';
 import IconProps from './DefaultIcon';
-import { AdaptableCustomIcon, AdaptableSystemIcon, AdaptableSystemIconName } from '../../PredefinedConfig/Common/AdaptableIcon';
+import { AdaptableCustomIcon, AdaptableSystemIcon, AdaptableSystemIconName } from '../../AdaptableState/Common/AdaptableIcon';
 export declare const allIcons: Record<AdaptableSystemIconName, React.FunctionComponent<IconProps>>;
 type IconProps = {
     style?: React.CSSProperties;

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: 1742409282792 || Date.now(),
-    VERSION: "20.0.0-canary.22" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1742557782744 || Date.now(),
+    VERSION: "20.0.0-canary.23" || '--current-version--',
 };

package/src/metamodel/adaptable.metamodel.d.ts

@@ -3807,6 +3807,24 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt?: undefined;
         })[];
     };
+    InitialState: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: ({
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+            ref: string;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            ref: string;
+            isOpt?: undefined;
+        })[];
+    };
     InteropioPluginOptions: {
         name: string;
         kind: string;