@adaptabletools/adaptable 21.0.0-canary.6 → 21.0.0-canary.8

package/src/components/Select/Select.d.ts

@@ -48,7 +48,6 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     'aria-label'?: string;
     size?: 'small' | 'normal';
     isCreatable?: boolean;
-    menuPortalTarget?: HTMLElement;
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
 };
 export declare const Select: <SelectValue extends unknown, IsMulti extends boolean = false>(props: SelectProps<SelectValue, IsMulti>) => React.JSX.Element;

package/src/components/Select/Select.js

@@ -9,7 +9,7 @@ import { useCallback, useMemo, useState } from 'react';
 import join from '../utils/join';
 import { Resizable } from 're-resizable';
 import Tooltip from '../Tooltip';
-import { OVERLAY_BASE_Z_INDEX } from '../overlayBaseZIndex';
+import { ensurePortalElement } from '../OverlayTrigger';
 const resizableDirections = {
     right: true,
     bottom: true,
@@ -158,7 +158,10 @@ export const Select = function (props) {
     }
     else {
         selectedOption = findOptionByValue(props.value);
-        if (!selectedOption && props.value !== undefined && props.value !== null) {
+        if (!selectedOption &&
+            props.value !== undefined &&
+            props.value !== null &&
+            props.value !== '') {
             selectedOption = {
                 value: props.value,
                 label: props.value,
@@ -485,7 +488,7 @@ export const Select = function (props) {
     }, [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: join(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: props.menuPortalTarget === undefined ? document.body : null, isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {
+        menuPortalTarget: ensurePortalElement(), isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {
             if (isMulti) {
                 const value = option.map((x) => x?.value);
                 props.onChange(value);
@@ -534,7 +537,9 @@ export const Select = function (props) {
             menuPortal: (baseStyle) => {
                 return {
                     ...baseStyle,
-                    zIndex: OVERLAY_BASE_Z_INDEX,
+                    // needed to avoid tooltips from being displayed under this menu
+                    // as otherwise react-select uses zIndex 1
+                    zIndex: 'auto',
                     textAlign: 'left',
                 };
             },
@@ -542,7 +547,9 @@ export const Select = function (props) {
             menu: (baseStyle, state) => {
                 return {
                     ...baseStyle,
-                    zIndex: OVERLAY_BASE_Z_INDEX,
+                    // 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`,

package/src/components/Tooltip/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import OverlayTrigger from '../OverlayTrigger';
 const Tooltip = ({ label, children }) => {
-    return (React.createElement(OverlayTrigger, { defaultZIndex: 2000000, className: "ab-Tooltip", render: () => label }, children));
+    return (React.createElement(OverlayTrigger, { className: "ab-Tooltip", render: () => label }, children));
 };
 export default Tooltip;

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: 1757310399525 || Date.now(),
-    VERSION: "21.0.0-canary.6" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1757350937288 || Date.now(),
+    VERSION: "21.0.0-canary.8" || '--current-version--',
 };