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

package/src/components/OverlayTrigger/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getConstrainRect = exports.getConstrainElement = void 0;
+exports.ensurePortalElement = exports.getConstrainRect = exports.getConstrainElement = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
@@ -44,27 +44,29 @@ const ensurePortalElement = () => {
         return;
     }
     if (portalElement) {
-        return;
+        return portalElement;
     }
     portalElement = document.createElement('div');
     portalElement.style.position = 'absolute';
     portalElement.style.zIndex = OVERLAY_TRIGGER_Z_INDEX.toString();
     portalElement.style.top = '0px';
     portalElement.style.left = '0px';
+    portalElement.dataset.name = 'OverlayTriggerPortal';
     document.body.appendChild(portalElement);
+    return portalElement;
 };
+exports.ensurePortalElement = ensurePortalElement;
 const defaultProps = {
     showEvent: 'mouseenter',
     hideEvent: 'mouseleave',
     anchor: 'vertical',
     targetOffset: 10,
-    defaultZIndex: 1000000,
     opacityTransitionDuration: '250ms',
 };
 const OverlayTrigger = React.forwardRef((givenProps, ref) => {
     const props = { ...defaultProps, ...givenProps };
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    let { visible: _, showTriangle, showEvent, hideEvent, render, targetOffset, preventPortalEventPropagation = false, defaultZIndex, anchor, hideDelay = 0, opacityTransitionDuration, onVisibleChange, alignPosition = [
+    let { visible: _, showTriangle, showEvent, hideEvent, render, targetOffset, preventPortalEventPropagation = false, anchor, hideDelay = 0, opacityTransitionDuration, onVisibleChange, alignPosition = [
         // overlay - target
         ['TopLeft', 'BottomLeft'],
         ['TopRight', 'BottomRight'],
@@ -111,7 +113,7 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
         doSetVisible(true);
     }, 50), []);
     const prevVisible = (0, usePrevious_1.default)(visible, false);
-    ensurePortalElement();
+    (0, exports.ensurePortalElement)();
     const onShow = React.useCallback((event) => {
         const target = targetRef.current;
         if (event && preventPortalEventPropagation && !(0, contains_1.default)(target, event.target)) {

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

@@ -13,7 +13,7 @@ const react_1 = require("react");
 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 overlayBaseZIndex_1 = require("../overlayBaseZIndex");
+const OverlayTrigger_1 = require("../OverlayTrigger");
 const resizableDirections = {
     right: true,
     bottom: true,
@@ -162,7 +162,10 @@ 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,
@@ -489,7 +492,7 @@ 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: (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: props.menuPortalTarget === undefined ? document.body : null, isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {
+        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);
@@ -538,7 +541,9 @@ const Select = function (props) {
             menuPortal: (baseStyle) => {
                 return {
                     ...baseStyle,
-                    zIndex: overlayBaseZIndex_1.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',
                 };
             },
@@ -546,7 +551,9 @@ const Select = function (props) {
             menu: (baseStyle, state) => {
                 return {
                     ...baseStyle,
-                    zIndex: overlayBaseZIndex_1.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

@@ -4,6 +4,6 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
 const Tooltip = ({ label, children }) => {
-    return (React.createElement(OverlayTrigger_1.default, { defaultZIndex: 2000000, className: "ab-Tooltip", render: () => label }, children));
+    return (React.createElement(OverlayTrigger_1.default, { className: "ab-Tooltip", render: () => label }, children));
 };
 exports.default = Tooltip;

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