@adaptabletools/adaptable 20.0.0-canary.8 → 20.0.0

package/src/components/Select/Select.js

@@ -1,6 +1,6 @@
 import { isSameDay } from 'date-fns';
 import * as React from 'react';
-import ReactSelect, { components } from 'react-select';
+import ReactSelect, { components, } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import { Icon } from '../icons';
 import { Box } from 'rebass';
@@ -27,9 +27,17 @@ const INFINITE_COLUMNS_WITH_CHECKBOX = {
         style: {
             lineHeight: '30px',
         },
+        resizable: false,
+        defaultSortable: false,
         renderSelectionCheckBox: ({ renderBag }) => {
             return (React.createElement(Box, { display: 'inline-block', style: checkboxStyle }, renderBag.selectionCheckBox));
         },
+        renderHeader: (headerParams) => {
+            return (React.createElement(React.Fragment, null,
+                headerParams.renderBag.selectionCheckBox,
+                headerParams.allRowsSelected ? '(Deselect All)' : '(Select All)'));
+        },
+        renderMenuIcon: false,
     },
 };
 const INFINITE_COLUMNS_WITH_RADIO = {
@@ -87,6 +95,7 @@ export const Select = function (props) {
     };
     const renderMultipleValues = props.renderMultipleValues;
     const isMulti = props.isMulti ?? Array.isArray(props.value);
+    const showHeaderSelectionCheckbox = isMulti && (props.showHeaderSelectionCheckbox ?? false);
     let selectedOption = null;
     if (isMulti) {
         selectedOption =
@@ -142,7 +151,7 @@ export const Select = function (props) {
             });
             const title = typeof customRenderValue === 'string' ? customRenderValue : '';
             children = customRenderValue ? (React.createElement(Box, { display: 'flex', flexDirection: 'row', flex: 1, flexWrap: 'nowrap', alignItems: 'center', overflow: 'hidden' },
-                React.createElement("span", { title: title, style: {
+                React.createElement("span", { title: title, "data-name": "multi-value-text", style: {
                         flex: '0 1 auto',
                         appearance: 'none',
                         border: 'none',
@@ -189,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
                     ? {
@@ -212,13 +237,77 @@ export const Select = function (props) {
                     }
                     : selectedRows[0];
             }, [selectedRows, isMulti]);
-            const onRowSelectionChange = React.useCallback(({ selectedRows }) => {
-                const selection = selectedRows.map((row) => {
-                    return { value: row };
-                });
+            const onRowSelectionChange = React.useCallback((selectionParams) => {
+                let selection = [];
+                const { selectedRows, defaultSelection, deselectedRows } = selectionParams;
+                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 {
+                    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;
@@ -236,12 +325,14 @@ 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
-                onRowSelectionChange: isLoading ? null : isMulti ? onRowSelectionChange : onSingleRowSelectionChange, rowSelection: rowSelection, filterFunction: filterFunction, isRowDisabled: isRowDisabled },
-                React.createElement(InfiniteTable, { header: 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 })));
+                data: filteredOptions, primaryKey: "value", selectionMode: isMulti ? 'multi-row' : 'single-row', 
+                // @ts-ignore
+                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]);
+    }, [isMulti, showHeaderSelectionCheckbox]);
     const DropdownIndicator = React.useMemo(() => {
         return (props) => {
             return (React.createElement(components.DropdownIndicator, { ...props },
@@ -257,11 +348,25 @@ export const Select = function (props) {
         focusedRef.current = false;
         props.onBlur?.();
     }, [props.onBlur]);
-    return (React.createElement(SelectComponent, { ref: ref, onInputChange: props.onInputChange, onFocus: onFocus, onBlur: onBlur, onMenuOpen: props.onMenuOpen, isLoading: props.isLoading, options: props.options, className: join(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', isSearchable: props.searchable, hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
+    const [inputValue, setInputValue] = React.useState('');
+    const onInputChange = React.useCallback((value, actionMeta) => {
+        if (isMulti && actionMeta.action === 'set-value') {
+            // when selecting an option, don't clear the input filter
+            return;
+        }
+        setInputValue(value);
+        props.onInputChange?.(value);
+    }, [props.onInputChange, isMulti]);
+    return (React.createElement(SelectComponent, { ref: ref, inputValue: inputValue, onInputChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onMenuOpen: props.onMenuOpen, isLoading: props.isLoading, options: props.options, className: join(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', isSearchable: props.searchable, hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
         // 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);
@@ -312,7 +417,7 @@ export const Select = function (props) {
                     zIndex: 999999,
                     boxShadow: 'var(--ab-cmp-select-menu__box-shadow)',
                     minWidth: `var(--ab-cmp-select-menu__min-width)`,
-                    '--ab-cmp-select-menu__min-height': `min(${(props.options || []).length * ROW_HEIGHT}px, 20rem)`,
+                    '--ab-cmp-select-menu__min-height': `min(${((props.options || []).length + (showHeaderSelectionCheckbox ? 1 : 0)) * ROW_HEIGHT}px, 20rem)`,
                     ...commonStyles(state),
                     ...props.menuStyle,
                 };

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: 1741620176158 || Date.now(),
-    VERSION: "20.0.0-canary.8" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1742808186097 || Date.now(),
+    VERSION: "20.0.0" || '--current-version--',
 };

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

@@ -1525,6 +1525,17 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt?: undefined;
         })[];
     };
+    BaseState: {
+        name: string;
+        kind: string;
+        desc: string;
+        props: {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt: boolean;
+        }[];
+    };
     BroadcastConfig: {
         name: string;
         kind: string;
@@ -1856,12 +1867,14 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
             isOpt?: undefined;
             defVal?: undefined;
+            ref?: undefined;
         } | {
             name: string;
             kind: string;
             desc: string;
             isOpt: boolean;
             defVal: string;
+            ref: string;
         })[];
     };
     ColumnFilterDef: {
@@ -2104,17 +2117,6 @@ export declare const ADAPTABLE_METAMODEL: {
             ref: string;
         })[];
     };
-    ConfigState: {
-        name: string;
-        kind: string;
-        desc: string;
-        props: {
-            name: string;
-            kind: string;
-            desc: string;
-            isOpt: boolean;
-        }[];
-    };
     ContainerOptions: {
         name: string;
         kind: string;
@@ -3204,16 +3206,6 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt: boolean;
         }[];
     };
-    ExternalReport: {
-        name: string;
-        kind: string;
-        desc: string;
-        props: {
-            name: string;
-            kind: string;
-            desc: string;
-        }[];
-    };
     FDC3ActionColumn: {
         name: string;
         kind: string;
@@ -3815,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;
@@ -4466,21 +4476,10 @@ export declare const ADAPTABLE_METAMODEL: {
             gridInfo?: undefined;
         })[];
     };
-    PreProcessExportContext: {
+    PredicatesOperator: {
         name: string;
         kind: string;
         desc: string;
-        props: ({
-            name: string;
-            kind: string;
-            desc: string;
-            ref?: undefined;
-        } | {
-            name: string;
-            kind: string;
-            desc: string;
-            ref: string;
-        })[];
     };
     PreprocessRowDataContext: {
         name: string;