@adaptabletools/adaptable 22.0.0-canary.5 → 22.0.0-canary.7

package/src/components/Select/Select.js

@@ -4,7 +4,7 @@ import ReactSelect, { components, } from 'react-select';
 import CreatableSelect from 'react-select/creatable';
 import { Icon } from '../icons';
 import { DataSource, InfiniteTable, } from '@infinite-table/infinite-react';
-import { useCallback, useMemo, useState } from 'react';
+import { useCallback, useId, useMemo, useState } from 'react';
 import { Resizable } from 're-resizable';
 import Tooltip from '../Tooltip';
 import { ensurePortalElement } from '../OverlayTrigger';
@@ -115,6 +115,7 @@ const doesOptionMatchValue = function (value) {
 };
 export const Select = function (props) {
     let maxLabelLength = 0;
+    const inputId = useId();
     const computedCSSVars = useAdaptableComputedCSSVars();
     const CSS_VARS_VALUES = {
         '--ab-cmp-select-menu__max-width': computedCSSVars['--ab-cmp-select-menu__max-width'] || '60vw',
@@ -126,14 +127,15 @@ export const Select = function (props) {
     // relevant for menulist search only
     const menulistInputRef = React.useRef(null);
     const [isSelectMenuOpen, setIsSelectMenuOpen] = useState(false);
-    const openSelectMenu = () => {
+    const propsOnMenuOpen = props.onMenuOpen;
+    const openSelectMenu = React.useCallback(() => {
         setIsSelectMenuOpen(true);
         // it's a react-select bug, onMenuOpen is not called with controlled menuIsOpen
-        props.onMenuOpen?.();
-    };
-    const closeSelectMenu = () => {
+        propsOnMenuOpen?.();
+    }, [propsOnMenuOpen]);
+    const closeSelectMenu = React.useCallback(() => {
         setIsSelectMenuOpen(false);
-    };
+    }, []);
     const ref = React.useRef(null);
     const valueToOptionMap = new Map((props.options || []).map((opt) => {
         let label = opt.label;
@@ -199,6 +201,18 @@ export const Select = function (props) {
     /**
      * If on each render a new reference is passed, the menu will not open using the keyboard.
      */
+    /**
+     * Use refs for isSelectMenuOpen, openSelectMenu, and closeSelectMenu so that
+     * SelectContainer is stable across re-renders. If SelectContainer gets a new
+     * reference when menu opens/closes, react-select recreates its internal
+     * component tree, the DummyInput is removed from DOM, and focus is lost.
+     */
+    const isSelectMenuOpenRef = React.useRef(isSelectMenuOpen);
+    isSelectMenuOpenRef.current = isSelectMenuOpen;
+    const openSelectMenuRef = React.useRef(openSelectMenu);
+    openSelectMenuRef.current = openSelectMenu;
+    const closeSelectMenuRef = React.useRef(closeSelectMenu);
+    closeSelectMenuRef.current = closeSelectMenu;
     const SelectContainer = React.useMemo(() => {
         return (selectContainerProps) => {
             return (React.createElement(components.SelectContainer, { ...selectContainerProps, innerProps: {
@@ -211,15 +225,50 @@ export const Select = function (props) {
                         if (!searchableInMenulist) {
                             return;
                         }
-                        if (!isSelectMenuOpen) {
-                            openSelectMenu();
+                        if (!isSelectMenuOpenRef.current) {
+                            openSelectMenuRef.current();
                             e.stopPropagation();
                             e.preventDefault();
                         }
                     },
+                    onKeyDownCapture: (e) => {
+                        if (!searchableInMenulist) {
+                            return;
+                        }
+                        if (isSelectMenuOpenRef.current) {
+                            if (e.key === 'Escape') {
+                                closeSelectMenuRef.current();
+                                e.stopPropagation();
+                                e.preventDefault();
+                                e.nativeEvent.stopImmediatePropagation();
+                                // we do this because the focus is lost when the menu is closed
+                                // and document.body is set as the active element
+                                requestAnimationFrame(() => {
+                                    document.getElementById(inputId)?.focus();
+                                    // we need to do it again
+                                    // also don't store a ref to the input element
+                                    // but query the DOM again
+                                    // as the old ref is no longer in the DOM
+                                    // because of a react-select bug I presume
+                                    requestAnimationFrame(() => {
+                                        document.getElementById(inputId)?.focus();
+                                    });
+                                });
+                            }
+                        }
+                        else {
+                            // open the menu
+                            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                                openSelectMenuRef.current();
+                                e.stopPropagation();
+                                e.preventDefault();
+                                e.nativeEvent.stopImmediatePropagation();
+                            }
+                        }
+                    },
                 } }));
         };
-    }, [isSelectMenuOpen]);
+    }, [searchableInMenulist]);
     const resizable = props.resizable ?? false;
     const ValueContainer = React.useMemo(() => {
         return (props) => {
@@ -521,11 +570,25 @@ export const Select = function (props) {
         setInputValue(value);
         props.onInputChange?.(value);
     }, [props.onInputChange, isMulti]);
-    const SingleValue = React.useCallback((singleValueProps) => {
-        return (React.createElement(components.SingleValue, { ...singleValueProps }, props.renderSingleValue
-            ? props.renderSingleValue(selectedOption)
-            : singleValueProps.children));
-    }, [selectedOption]);
+    /**
+     * Use refs for selectedOption and renderSingleValue so that the
+     * SingleValue component function is stable across re-renders.
+     * If SingleValue gets a new reference on each render, selectComponents changes,
+     * react-select recreates its internal component tree, the DummyInput is removed
+     * from DOM, and focus is lost (the keyboard stops working).
+     * See the comment above SelectContainer about this exact issue.
+     */
+    const selectedOptionRef = React.useRef(selectedOption);
+    selectedOptionRef.current = selectedOption;
+    const renderSingleValueRef = React.useRef(props.renderSingleValue);
+    renderSingleValueRef.current = props.renderSingleValue;
+    const SingleValue = React.useMemo(() => {
+        return (singleValueProps) => {
+            return (React.createElement(components.SingleValue, { ...singleValueProps }, renderSingleValueRef.current
+                ? renderSingleValueRef.current(selectedOptionRef.current)
+                : singleValueProps.children));
+        };
+    }, []);
     const selectComponents = useMemo(() => {
         return {
             SelectContainer,
@@ -546,7 +609,7 @@ export const Select = function (props) {
         MenuList,
     ]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(SelectComponent, { ref: ref, openMenuOnClick: searchableInMenulist ? false : undefined, openMenuOnFocus: searchableInMenulist ? false : undefined, menuIsOpen: searchableInMenulist ? isSelectMenuOpen : undefined, isSearchable: searchableInline, "aria-label": props['aria-label'], onKeyDown: props.onKeyDown, inputValue: inputValue, onInputChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onMenuOpen: props.onMenuOpen, isLoading: props.isLoading, options: props.options, className: clsx(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
+        React.createElement(SelectComponent, { ref: ref, openMenuOnClick: searchableInMenulist ? false : undefined, openMenuOnFocus: searchableInMenulist ? false : undefined, menuIsOpen: searchableInMenulist ? isSelectMenuOpen : undefined, isSearchable: searchableInline, "aria-label": props['aria-label'], onKeyDown: props.onKeyDown, inputValue: inputValue, inputId: inputId, onInputChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onMenuOpen: props.onMenuOpen, isLoading: props.isLoading, options: props.options, className: clsx(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
             // This needed so the menu is not clipped by overflow: hidden
             menuPortalTarget: ensurePortalElement(), isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {
                 if (isMulti) {

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: 1770330484844 || Date.now(),
-    VERSION: "22.0.0-canary.5" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1770740667502 || Date.now(),
+    VERSION: "22.0.0-canary.7" || '--current-version--',
 };

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

@@ -1094,6 +1094,11 @@ export declare const ADAPTABLE_METAMODEL: {
             defVal: string;
         })[];
     };
+    AdaptableTransientState: {
+        name: string;
+        kind: string;
+        desc: string;
+    };
     AdaptableVersion: {
         name: string;
         kind: string;
@@ -1290,6 +1295,12 @@ export declare const ADAPTABLE_METAMODEL: {
             desc: string;
             ref: string;
             isOpt?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt?: undefined;
+            ref?: undefined;
         })[];
     };
     AlertDefinitionPredicate: {
@@ -2157,20 +2168,12 @@ export declare const ADAPTABLE_METAMODEL: {
             name: string;
             kind: string;
             desc: string;
-            isOpt?: undefined;
-            ref?: undefined;
-        } | {
-            name: string;
-            kind: string;
-            desc: string;
-            isOpt: boolean;
             ref?: undefined;
         } | {
             name: string;
             kind: string;
             desc: string;
             ref: string;
-            isOpt?: undefined;
         })[];
     };
     CommandHandler: {
@@ -3669,6 +3672,13 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt: boolean;
             defVal: string;
             ref?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt?: undefined;
+            defVal?: undefined;
+            ref?: undefined;
         } | {
             name: string;
             kind: string;
@@ -3725,6 +3735,13 @@ export declare const ADAPTABLE_METAMODEL: {
             isOpt: boolean;
             ref: string;
             defVal?: undefined;
+        } | {
+            name: string;
+            kind: string;
+            desc: string;
+            isOpt?: undefined;
+            ref?: undefined;
+            defVal?: undefined;
         } | {
             name: string;
             kind: string;
@@ -4477,16 +4494,6 @@ export declare const ADAPTABLE_METAMODEL: {
         kind: string;
         desc: string;
     };
-    NamedObject: {
-        name: string;
-        kind: string;
-        desc: string;
-        props: {
-            name: string;
-            kind: string;
-            desc: string;
-        }[];
-    };
     NamedQuery: {
         name: string;
         kind: string;