@adaptabletools/adaptable-cjs 21.0.1 → 21.0.3

package/src/components/Select/Select.js

@@ -14,6 +14,7 @@ const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const re_resizable_1 = require("re-resizable");
 const Tooltip_1 = tslib_1.__importDefault(require("../Tooltip"));
 const OverlayTrigger_1 = require("../OverlayTrigger");
+const CSSNumericVariableWatch_1 = require("./CSSNumericVariableWatch");
 const resizableDirections = {
     right: true,
     bottom: true,
@@ -28,8 +29,8 @@ const checkboxStyle = {
 };
 const INFINITE_DOM_PROPS = {
     style: {
-        height: '100%',
-        minHeight: `var(--ab-cmp-select-menu__min-height, 25rem)`,
+        // height: '100%',
+        flex: 1,
         // maxHeight: '50vh',
         width: '100%',
     },
@@ -105,6 +106,16 @@ const doesOptionMatchValue = function (value) {
 };
 const Select = function (props) {
     let maxLabelLength = 0;
+    const cssVarsValuesRef = React.useRef({
+        '--ab-cmp-select-menu__max-width': 0,
+        '--ab-cmp-select-menu__min-width': 0,
+        '--ab-cmp-select-menu__max-height': 0,
+    });
+    const CSS_VARS_VALUES = {
+        '--ab-cmp-select-menu__max-width': cssVarsValuesRef.current['--ab-cmp-select-menu__max-width'] || '60vw',
+        '--ab-cmp-select-menu__min-width': cssVarsValuesRef.current['--ab-cmp-select-menu__min-width'] || 150,
+        '--ab-cmp-select-menu__max-height': cssVarsValuesRef.current['--ab-cmp-select-menu__max-height'] || '60vh',
+    };
     const searchableInMenulist = props.searchable === 'menulist';
     const searchableInline = props.searchable === 'inline';
     // relevant for menulist search only
@@ -257,6 +268,7 @@ const Select = function (props) {
                 React.createElement(react_select_1.components.Menu, { ...menuProps, innerProps: {
                         // @ts-ignore
                         'data-name': 'menu-container',
+                        'data-resizable': resizable,
                         ...menuProps.innerProps,
                         onBlur: (e) => {
                             if (!searchableInMenulist) {
@@ -272,11 +284,14 @@ const Select = function (props) {
                                 return;
                             }
                             setTimeout(() => {
-                                // wee need to wait for the single value selectio to complete before closing
+                                // wee need to wait for the single value selection to complete before closing
                                 closeSelectMenu();
                             }, 100);
                         },
-                        onMouseDownCapture: (event) => {
+                        onMouseDown: (event) => {
+                            if (!props.isMulti) {
+                                menuProps.innerProps?.onMouseDown?.(event);
+                            }
                             if (!searchableInMenulist) {
                                 return;
                             }
@@ -285,9 +300,17 @@ const Select = function (props) {
                                 event.stopPropagation();
                             }
                         },
-                    } }, resizable ? (React.createElement(re_resizable_1.Resizable, { enable: resizableDirections, minWidth: '100%', maxHeight: '60vh', maxWidth: '60vw', defaultSize: sizeRef.current, onResizeStop: onResizeStop }, theChildren)) : (theChildren))));
+                    } }, resizable ? (React.createElement(re_resizable_1.Resizable, { className: "ab-Select-MenuContainer-Resizable", enable: resizableDirections, 
+                    // ideally we wouldn't need those to be computed values
+                    // and instead pass the CSS var name, like `var(--ab-cmp-select-menu__min-width)`
+                    // to the Resizable component, but it won't respect them
+                    // so we needed to read the CSS variables from the DOM, using CSSNumericVariableWatch
+                    // and then pass the actual values to Resizable
+                    minWidth: CSS_VARS_VALUES['--ab-cmp-select-menu__min-width'], maxHeight: CSS_VARS_VALUES['--ab-cmp-select-menu__max-height'], maxWidth: CSS_VARS_VALUES['--ab-cmp-select-menu__max-width'], defaultSize: sizeRef.current, onResizeStop: onResizeStop, onResizeStart: (e) => {
+                        e.preventDefault();
+                    } }, theChildren)) : (theChildren))));
         };
-    }, [resizable]);
+    }, [resizable, JSON.stringify(CSS_VARS_VALUES)]);
     const SelectComponent = props.isCreatable ? creatable_1.default : react_select_1.default;
     const ClearIndicator = React.useMemo(() => {
         return (clearIndicatorProps) => {
@@ -320,8 +343,11 @@ const Select = function (props) {
             const focusedOptionIndex = options
                 .filter((option) => filterFunction({ data: option }))
                 .indexOf(focusedOption);
-            const valueStr = getValue()
-                .map((option) => option.value)
+            const valueStrKey = getValue()
+                // if we simply map, then if we have [] or [''], they will map to the same value
+                // but we need it to be different
+                // so we can trigger a change when the value changes
+                .map((option, index) => `${index}-${option.value}`)
                 .join(',');
             const selectedRows = (0, react_1.useMemo)(() => {
                 const selectedRows = [];
@@ -335,7 +361,7 @@ const Select = function (props) {
                     }
                 });
                 return selectedRows;
-            }, [valueStr, inputValue, hasFilter]);
+            }, [valueStrKey, inputValue, hasFilter]);
             const rowSelection = React.useMemo(() => {
                 return isMulti
                     ? {
@@ -415,7 +441,7 @@ const Select = function (props) {
                 }
                 //@ts-ignore
                 setValue(selection, 'select-option');
-            }, [setValue, filterOption, inputValue, hasFilter, filteredOptions, rowSelection, valueStr]);
+            }, [setValue, filterOption, inputValue, hasFilter, filteredOptions, rowSelection, valueStrKey]);
             const onSingleRowSelectionChange = React.useCallback((value) => {
                 if (value == undefined && rowSelection != undefined) {
                     return;
@@ -442,7 +468,7 @@ const Select = function (props) {
                 data: filteredOptions, primaryKey: "value", selectionMode: isMulti ? 'multi-row' : 'single-row', 
                 // @ts-ignore
                 onRowSelectionChange: isLoading ? null : isMulti ? onRowSelectionChange : onSingleRowSelectionChange, rowSelection: rowSelection, isRowDisabled: isRowDisabled },
-                searchableInMenulist && (React.createElement(rebass_1.Flex, { p: 1 },
+                searchableInMenulist && (React.createElement(rebass_1.Flex, { p: 1, className: "ab-Select-MenulistSearchContainer" },
                     React.createElement("input", { ref: menulistInputRef, "data-name": "menulist-search-input", style: {
                             width: '100%',
                         }, className: 'ab-Select-MenulistSearch ab-Input ab-Input--type-text', autoCorrect: "off", autoComplete: "off", spellCheck: "false", type: "text", value: inputValue, onChange: (e) => {
@@ -490,166 +516,175 @@ const Select = function (props) {
         setInputValue(value);
         props.onInputChange?.(value);
     }, [props.onInputChange, isMulti]);
-    return (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: (0, join_1.default)(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: (0, OverlayTrigger_1.ensurePortalElement)(), isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {
-            if (isMulti) {
-                const value = option.map((x) => x?.value);
-                props.onChange(value);
-            }
-            else {
-                props.onChange(option?.value);
-            }
-            if (searchableInMenulist) {
-                // ensure element keeps focus
-                requestAnimationFrame(() => {
-                    menulistInputRef.current?.focus();
-                });
-            }
-        }, placeholder: props.placeholder, createOptionPosition: 'first', 
-        // formatCreateLabel={(inputValue) => inputValue} // can we make this auto??
-        // we use this:  https://react-select.com/creatable
-        components: {
-            SelectContainer,
-            ValueContainer,
-            Menu: MenuComponent,
-            SingleValue: React.useCallback((singleValueProps) => {
-                return (React.createElement(react_select_1.components.SingleValue, { ...singleValueProps }, props.renderSingleValue
-                    ? props.renderSingleValue(selectedOption)
-                    : singleValueProps.children));
-            }, [selectedOption]),
-            ClearIndicator,
-            DropdownIndicator,
-            MenuList,
-        }, 
-        /**
-         * Using styles is the preferred way to style react-select.
-         * https://react-select.com/styles#the-styles-prop
-         */
-        styles: {
-            // Typescript issue with csstype@3.1.3
-            // https://github.com/JedWatson/react-select/issues/5825#issuecomment-1850472549
-            // Remove
-            container: (baseStyle) => {
-                return {
-                    ...baseStyle,
-                    ...props.style,
-                    ...props.styles?.container,
-                };
-            },
-            // @ts-ignorets-ignore when fixed
-            menuPortal: (baseStyle) => {
-                return {
-                    ...baseStyle,
-                    // needed to avoid tooltips from being displayed under this menu
-                    // as otherwise react-select uses zIndex 1
-                    zIndex: 'auto',
-                    textAlign: 'left',
-                };
-            },
-            // @ts-ignore
-            menu: (baseStyle, state) => {
-                return {
-                    ...baseStyle,
-                    // needed to avoid tooltips from being displayed under this menu
-                    // as otherwise react-select uses zIndex 1
-                    zIndex: 'auto',
-                    boxShadow: 'var(--ab-cmp-select-menu__box-shadow)',
-                    minWidth: `var(--ab-cmp-select-menu__min-width)`,
-                    width: resizable ? '100%' : `${Math.max(maxLabelLength, 10)}ch`,
-                    '--ab-cmp-select-menu__min-height': `min(${(props.options || []).length + (showHeaderSelectionCheckbox ? 1 : 0)} * var(--ab-grid-row-height), 20rem)`,
-                    maxHeight: 'var(--ab-cmp-select-menu__max-height)',
-                    maxWidth: 'var(--ab-cmp-select-menu__max-width)',
-                    ...commonStyles(state),
-                    ...props.menuStyle,
-                };
-            },
-            // @ts-ignore
-            option: (baseStyle, state) => {
-                const style = {
-                    ...baseStyle,
-                    ...commonStyles(state),
-                    '&:active': {
-                        background: 'var(--ab-cmp-select-option-active__background)',
-                    },
-                };
-                if (state.isSelected) {
-                    style.background = 'var(--ab-cmp-select-option-active__background)';
-                    style.color = 'var(--ab-cmp-select-option-active__color)';
+    return (React.createElement(React.Fragment, null,
+        React.createElement(CSSNumericVariableWatch_1.CSSNumericVariableWatch, { varName: "--ab-cmp-select-menu__max-width", onChange: (value) => {
+                cssVarsValuesRef.current['--ab-cmp-select-menu__max-width'] = value;
+            } }),
+        React.createElement(CSSNumericVariableWatch_1.CSSNumericVariableWatch, { varName: "--ab-cmp-select-menu__min-width", onChange: (value) => {
+                cssVarsValuesRef.current['--ab-cmp-select-menu__min-width'] = value;
+            } }),
+        React.createElement(CSSNumericVariableWatch_1.CSSNumericVariableWatch, { varName: "--ab-cmp-select-menu__max-height", onChange: (value) => {
+                cssVarsValuesRef.current['--ab-cmp-select-menu__max-height'] = value;
+            } }),
+        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: (0, join_1.default)(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: (0, OverlayTrigger_1.ensurePortalElement)(), isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {
+                if (isMulti) {
+                    const value = option.map((x) => x?.value);
+                    props.onChange(value);
                 }
-                if (state.isFocused) {
-                    style.background = 'var(--ab-cmp-select-option-focused__background)';
+                else {
+                    props.onChange(option?.value);
                 }
-                return style;
-            },
-            // @ts-ignore
-            input: (baseStyle, state) => {
-                return {
-                    ...baseStyle,
-                    padding: props.size === 'small' ? 0 : baseStyle.padding,
-                    color: 'var(--ab-cmp-select__color)',
-                };
-            },
-            valueContainer: (baseStyle) => {
-                return {
-                    ...baseStyle,
-                    padding: props.size === 'small' ? `0 var(--ab-space-1)` : baseStyle.padding,
-                    ...props.styles?.valueContainer,
-                };
-            },
-            // @ts-ignore
-            singleValue: (baseStyle, state) => {
-                return {
-                    ...baseStyle,
-                    ...commonStyles(state),
-                };
-            },
-            // @ts-ignore
-            control: (baseStyle, state) => {
-                return {
-                    ...baseStyle,
-                    ...commonStyles(state), // height: 30,
-                    minHeight: props.size === 'small' ? 0 : '100%',
-                    boxShadow: state.isFocused ? 'var(--ab-cmp-select-focused__box-shadow)' : 'none',
-                    outline: state.isFocused ? 'var(--ab-cmp-select-focused__outline)' : 'none',
-                    border: 'var(--ab-cmp-select__border)',
-                    borderRadius: 'var(--ab-cmp-select__border-radius)',
-                    '&:hover': {
+                if (searchableInMenulist) {
+                    // ensure element keeps focus
+                    requestAnimationFrame(() => {
+                        menulistInputRef.current?.focus();
+                    });
+                }
+            }, placeholder: props.placeholder, createOptionPosition: 'first', 
+            // formatCreateLabel={(inputValue) => inputValue} // can we make this auto??
+            // we use this:  https://react-select.com/creatable
+            components: {
+                SelectContainer,
+                ValueContainer,
+                Menu: MenuComponent,
+                SingleValue: React.useCallback((singleValueProps) => {
+                    return (React.createElement(react_select_1.components.SingleValue, { ...singleValueProps }, props.renderSingleValue
+                        ? props.renderSingleValue(selectedOption)
+                        : singleValueProps.children));
+                }, [selectedOption]),
+                ClearIndicator,
+                DropdownIndicator,
+                MenuList,
+            }, 
+            /**
+             * Using styles is the preferred way to style react-select.
+             * https://react-select.com/styles#the-styles-prop
+             */
+            styles: {
+                // Typescript issue with csstype@3.1.3
+                // https://github.com/JedWatson/react-select/issues/5825#issuecomment-1850472549
+                // Remove
+                container: (baseStyle) => {
+                    return {
+                        ...baseStyle,
+                        ...props.style,
+                        ...props.styles?.container,
+                    };
+                },
+                // @ts-ignorets-ignore when fixed
+                menuPortal: (baseStyle) => {
+                    return {
+                        ...baseStyle,
+                        // needed to avoid tooltips from being displayed under this menu
+                        // as otherwise react-select uses zIndex 1
+                        zIndex: 'auto',
+                        textAlign: 'left',
+                    };
+                },
+                // @ts-ignore
+                menu: (baseStyle, state) => {
+                    return {
+                        ...baseStyle,
+                        // needed to avoid tooltips from being displayed under this menu
+                        // as otherwise react-select uses zIndex 1
+                        zIndex: 'auto',
+                        width: resizable ? '100%' : `${Math.max(maxLabelLength, 10)}ch`,
+                        '--ab-cmp-select-menu__min-height': `min(${(props.options || []).length + (showHeaderSelectionCheckbox ? 1 : 0)} * var(--ab-grid-row-height) + ${searchableInMenulist ? 40 : 0}px, ${searchableInMenulist ? 22 : 20}rem)`,
+                        maxHeight: 'var(--ab-cmp-select-menu__max-height)',
+                        minWidth: 'var(--ab-cmp-select-menu__min-width)',
+                        maxWidth: 'var(--ab-cmp-select-menu__max-width)',
+                        ...commonStyles(state),
+                        ...props.menuStyle,
+                    };
+                },
+                // @ts-ignore
+                option: (baseStyle, state) => {
+                    const style = {
+                        ...baseStyle,
+                        ...commonStyles(state),
+                        '&:active': {
+                            background: 'var(--ab-cmp-select-option-active__background)',
+                        },
+                    };
+                    if (state.isSelected) {
+                        style.background = 'var(--ab-cmp-select-option-active__background)';
+                        style.color = 'var(--ab-cmp-select-option-active__color)';
+                    }
+                    if (state.isFocused) {
+                        style.background = 'var(--ab-cmp-select-option-focused__background)';
+                    }
+                    return style;
+                },
+                // @ts-ignore
+                input: (baseStyle, state) => {
+                    return {
+                        ...baseStyle,
+                        padding: props.size === 'small' ? 0 : baseStyle.padding,
+                        color: 'var(--ab-cmp-select__color)',
+                    };
+                },
+                valueContainer: (baseStyle) => {
+                    return {
+                        ...baseStyle,
+                        padding: props.size === 'small' ? `0 var(--ab-space-1)` : baseStyle.padding,
+                        ...props.styles?.valueContainer,
+                    };
+                },
+                // @ts-ignore
+                singleValue: (baseStyle, state) => {
+                    return {
+                        ...baseStyle,
+                        ...commonStyles(state),
+                    };
+                },
+                // @ts-ignore
+                control: (baseStyle, state) => {
+                    return {
+                        ...baseStyle,
+                        ...commonStyles(state), // height: 30,
+                        minHeight: props.size === 'small' ? 0 : '100%',
+                        boxShadow: state.isFocused ? 'var(--ab-cmp-select-focused__box-shadow)' : 'none',
+                        outline: state.isFocused ? 'var(--ab-cmp-select-focused__outline)' : 'none',
                         border: 'var(--ab-cmp-select__border)',
-                    },
-                    ...props.styles?.control,
-                };
-            },
-            // @ts-ignore
-            dropdownIndicator: (baseStyle) => {
-                return {
-                    ...baseStyle,
-                    padding: 0,
-                    ...props.styles?.dropdownIndicator,
-                };
-            },
-            // @ts-ignore
-            clearIndicator: (baseStyle) => {
-                return {
-                    ...baseStyle,
-                    padding: '2px 3px',
-                };
-            },
-            multiValue: (baseStyle) => {
-                return {
-                    ...baseStyle,
-                    color: 'var(--ab-cmp-select__color)',
-                    background: 'var(--ab-cmp-select-multi-value__background)',
-                    border: 'var(--ab-cmp-select__border)',
-                };
-            },
-            multiValueLabel: (baseStyle) => {
-                return {
-                    ...baseStyle,
-                    ...fontCommonStyles,
-                    color: 'var(--ab-cmp-select__color)',
-                };
-            },
-        } }));
+                        borderRadius: 'var(--ab-cmp-select__border-radius)',
+                        '&:hover': {
+                            border: 'var(--ab-cmp-select__border)',
+                        },
+                        ...props.styles?.control,
+                    };
+                },
+                // @ts-ignore
+                dropdownIndicator: (baseStyle) => {
+                    return {
+                        ...baseStyle,
+                        padding: 0,
+                        ...props.styles?.dropdownIndicator,
+                    };
+                },
+                // @ts-ignore
+                clearIndicator: (baseStyle) => {
+                    return {
+                        ...baseStyle,
+                        padding: '2px 3px',
+                    };
+                },
+                multiValue: (baseStyle) => {
+                    return {
+                        ...baseStyle,
+                        color: 'var(--ab-cmp-select__color)',
+                        background: 'var(--ab-cmp-select-multi-value__background)',
+                        border: 'var(--ab-cmp-select__border)',
+                    };
+                },
+                multiValueLabel: (baseStyle) => {
+                    return {
+                        ...baseStyle,
+                        ...fontCommonStyles,
+                        color: 'var(--ab-cmp-select__color)',
+                    };
+                },
+            } })));
 };
 exports.Select = Select;

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.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: 1758028392936 || Date.now(),
-    VERSION: "21.0.1" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1758882713103 || Date.now(),
+    VERSION: "21.0.3" || '--current-version--',
 };