@adaptabletools/adaptable 13.1.1-canary.0 → 13.1.1

package/src/components/OverlayTrigger/index.js

@@ -1,16 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getConstrainRect = void 0;
+exports.getConstrainRect = exports.getConstrainElement = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
 const batchUpdate_1 = tslib_1.__importDefault(require("../utils/batchUpdate"));
-const getAvailableSizeInfo_1 = tslib_1.__importDefault(require("../utils/getAvailableSizeInfo"));
-const react_dom_1 = require("react-dom");
 const selectParent_1 = tslib_1.__importDefault(require("../utils/selectParent"));
 const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
 const Overlay_1 = tslib_1.__importDefault(require("./Overlay"));
-const getOverlayStyle_1 = tslib_1.__importDefault(require("./getOverlayStyle"));
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const usePrevious_1 = tslib_1.__importDefault(require("../utils/usePrevious"));
 const utils_1 = require("./utils");
@@ -18,7 +15,9 @@ const LoggingHelper_1 = require("../../Utilities/Helpers/LoggingHelper");
 const useAgGridClassName_1 = tslib_1.__importDefault(require("./useAgGridClassName"));
 const contains_1 = tslib_1.__importDefault(require("../utils/contains"));
 const UIHelper_1 = require("../../View/UIHelper");
-const getConstrainRect = (target, constrainTo) => {
+const InfiniteTable_1 = require("../InfiniteTable");
+const AdaptableContext_1 = require("../../View/AdaptableContext");
+const getConstrainElement = (target, constrainTo) => {
     let el = null;
     if (typeof constrainTo === 'string') {
         el = (0, selectParent_1.default)(constrainTo, target);
@@ -26,6 +25,11 @@ const getConstrainRect = (target, constrainTo) => {
     if (typeof constrainTo === 'function') {
         el = constrainTo(target);
     }
+    return el;
+};
+exports.getConstrainElement = getConstrainElement;
+const getConstrainRect = (target, constrainTo) => {
+    let el = (0, exports.getConstrainElement)(target, constrainTo);
     if (el && el.tagName) {
         return (0, utils_1.getRect)(el);
     }
@@ -41,10 +45,25 @@ const ensurePortalElement = () => {
         return;
     }
     portalElement = document.createElement('div');
+    portalElement.style.position = 'absolute';
+    portalElement.style.zIndex = '999999';
+    portalElement.style.top = '0px';
+    portalElement.style.left = '0px';
     document.body.appendChild(portalElement);
 };
 const OverlayTrigger = React.forwardRef((props, ref) => {
-    let { visible: _, showTriangle, showEvent, hideEvent, render, targetOffset, preventPortalEventPropagation = false, defaultZIndex, anchor, hideDelay = 0, opacityTransitionDuration, onVisibleChange, alignHorizontal, constrainTo, target: targetProp } = props, domProps = tslib_1.__rest(props, ["visible", "showTriangle", "showEvent", "hideEvent", "render", "targetOffset", "preventPortalEventPropagation", "defaultZIndex", "anchor", "hideDelay", "opacityTransitionDuration", "onVisibleChange", "alignHorizontal", "constrainTo", "target"]);
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    let { visible: _, showTriangle, showEvent, hideEvent, render, targetOffset, preventPortalEventPropagation = false, defaultZIndex, anchor, hideDelay = 0, opacityTransitionDuration, onVisibleChange, alignPosition = [
+        // overlay - target
+        ['TopLeft', 'BottomLeft'],
+        ['TopRight', 'BottomRight'],
+        ['TopRight', 'BottomCenter'],
+        ['TopRight', 'BottomLeft'],
+        ['TopRight', 'BottomLeft'],
+    ], constrainTo, target: targetProp } = props, domProps = tslib_1.__rest(props, ["visible", "showTriangle", "showEvent", "hideEvent", "render", "targetOffset", "preventPortalEventPropagation", "defaultZIndex", "anchor", "hideDelay", "opacityTransitionDuration", "onVisibleChange", "alignPosition", "constrainTo", "target"]);
+    const { showOverlay, clearAll: clearAllOverlays, hideOverlay, portal, } = (0, InfiniteTable_1.useOverlay)({
+        portalContainer: portalElement,
+    });
     const domRef = (0, react_1.useRef)(null);
     const targetRef = (0, react_1.useRef)(null);
     const overlayRef = (0, react_1.useRef)(null);
@@ -64,8 +83,6 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
         }
         doSetVisible(true);
     }, []);
-    const [targetRect, setTargetRect] = (0, react_1.useState)(null);
-    const [sizeInfo, setSizeInfo] = (0, react_1.useState)(null);
     const prevVisible = (0, usePrevious_1.default)(visible, false);
     ensurePortalElement();
     const onShow = React.useCallback((event) => {
@@ -78,14 +95,6 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
         }
         (0, batchUpdate_1.default)(() => {
             setVisible(true);
-            const target = targetRef.current;
-            const targetRect = target.getBoundingClientRect();
-            const sizeInfo = (0, getAvailableSizeInfo_1.default)({
-                targetRect,
-                constrainRect: (0, exports.getConstrainRect)(target, constrainTo),
-            });
-            setTargetRect(targetRect);
-            setSizeInfo(sizeInfo);
         }).commit();
     }, [constrainTo, preventPortalEventPropagation]);
     const onHide = React.useCallback((_event) => {
@@ -105,6 +114,7 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
             }
         }
     }, [ref]);
+    const previousVisible = (0, usePrevious_1.default)(visible, visible);
     (0, react_1.useEffect)(() => {
         let target = domRef.current.previousSibling;
         if (targetProp) {
@@ -133,41 +143,52 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
             }
         };
     }, [props.visible, showEvent, hideEvent, onShow, onHide]);
-    let overlay;
+    React.useEffect(() => {
+        var _a, _b;
+        const target = targetRef.current;
+        if (!target) {
+            return;
+        }
+        if ((prevVisible && !visible) || visible) {
+            const overlayContent = (React.createElement(Overlay_1.default, Object.assign({}, domProps, { ref: (node) => {
+                    if (overlayRef.current && overlayRef.current != node) {
+                        overlayRef.current.removeEventListener(showEvent, onShow);
+                        overlayRef.current.removeEventListener(hideEvent, onHide);
+                    }
+                    overlayRef.current = node;
+                    if (node) {
+                        node.addEventListener(showEvent, onShow);
+                        node.addEventListener(hideEvent, onHide);
+                    }
+                }, className: (0, join_1.default)('ab-Overlay', showTriangle ? 'ab-Overlay--show-triangle' : '', agGridClassName, domProps.className), style: { transition: `opacity ${opacityTransitionDuration}` }, visible: visible, onTransitionEnd: () => {
+                    if (!visible) {
+                        clearAllOverlays();
+                        hideOverlay('overlay-trigger');
+                    }
+                } }), props.render()));
+            let preparedConstrinTo;
+            if (constrainTo) {
+                preparedConstrinTo = (0, exports.getConstrainElement)(targetRef.current, constrainTo);
+            }
+            else {
+                preparedConstrinTo = adaptable === null || adaptable === void 0 ? void 0 : adaptable.getAgGridContainerElement();
+            }
+            // show only if visible or if it was visible and now it is invisible
+            const showOverlayOptions = {
+                id: 'overlay-trigger',
+                alignPosition,
+                constrainTo: (_b = (_a = preparedConstrinTo === null || preparedConstrinTo === void 0 ? void 0 : preparedConstrinTo.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(preparedConstrinTo)) !== null && _b !== void 0 ? _b : true,
+                alignTo: target.getBoundingClientRect(),
+            };
+            showOverlay(() => overlayContent, showOverlayOptions);
+        }
+        else {
+            clearAllOverlays();
+        }
+    }, [visible, props.render]);
     const agGridClassName = (0, useAgGridClassName_1.default)([visible]);
-    if (targetRect) {
-        const overlayTarget = targetRef.current;
-        alignHorizontal =
-            alignHorizontal ||
-                getComputedStyle(overlayTarget)
-                    .getPropertyValue('--ab-overlay-horizontal-align')
-                    .trim();
-        let overlayStyle = (0, getOverlayStyle_1.default)({
-            constrainRect: (0, exports.getConstrainRect)(overlayTarget, constrainTo),
-            targetRect,
-            targetOffset,
-            anchor,
-            alignHorizontal,
-        });
-        overlayStyle.transition = `opacity ${opacityTransitionDuration}`;
-        overlayStyle.overflow = `visible`;
-        overlayStyle.zIndex = defaultZIndex;
-        overlayStyle = Object.assign(Object.assign({}, overlayStyle), props.style);
-        const position = anchor === 'vertical' ? sizeInfo.verticalPosition : sizeInfo.horizontalPosition;
-        overlay = (0, react_dom_1.createPortal)(React.createElement(Overlay_1.default, Object.assign({}, domProps, { ref: (node) => {
-                if (overlayRef.current && overlayRef.current != node) {
-                    overlayRef.current.removeEventListener(showEvent, onShow);
-                    overlayRef.current.removeEventListener(hideEvent, onHide);
-                }
-                overlayRef.current = node;
-                if (node) {
-                    node.addEventListener(showEvent, onShow);
-                    node.addEventListener(hideEvent, onHide);
-                }
-            }, className: (0, join_1.default)('ab-Overlay', `ab-Overlay--position-${position}`, showTriangle ? 'ab-Overlay--show-triangle' : '', agGridClassName, domProps.className), visible: visible, style: overlayStyle, anchor: anchor, position: position, getConstrainRect: () => (0, exports.getConstrainRect)(targetRef.current) }), props.render()), portalElement);
-    }
     return (React.createElement(React.Fragment, null,
-        props.children,
+        React.Children.only(props.children),
         React.createElement("div", { "data-name": "OverlayTrigger", "data-visible": visible, ref: domRef, style: {
                 visibility: 'hidden',
                 flex: 'none',
@@ -176,7 +197,7 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
                 pointerEvents: 'none',
                 display: 'inline-flex',
             } }),
-        overlay));
+        portal));
 });
 OverlayTrigger.defaultProps = {
     showEvent: 'mouseenter',

package/src/components/SimpleButton/index.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { ButtonProps } from 'rebass';
 import { ReactNode } from 'react';
 import { AccessLevel } from '../../PredefinedConfig/Common/Entitlement';
-import { OverlayProps } from '../OverlayTrigger/Overlay';
 import { AdaptableIcon } from '../../PredefinedConfig/Common/AdaptableIcon';
 export declare const baseClassName = "ab-SimpleButton";
 export interface SimpleButtonProps extends Omit<ButtonProps, 'ref'> {
@@ -14,7 +13,6 @@ export interface SimpleButtonProps extends Omit<ButtonProps, 'ref'> {
     iconPosition?: 'start' | 'end';
     disabled?: boolean;
     accessLevel?: AccessLevel;
-    tooltipAnchor?: OverlayProps['anchor'];
 }
 declare const SimpleButton: React.ForwardRefExoticComponent<SimpleButtonProps & {
     children?: React.ReactNode;

package/src/components/SimpleButton/index.js

@@ -12,7 +12,7 @@ const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
 exports.baseClassName = 'ab-SimpleButton';
 const SimpleButton = React.forwardRef((props, theRef) => {
     var _a, _b;
-    let { children, disabled, variant = 'outlined', tone = 'neutral', iconPosition = 'start', iconSize, className, icon, tooltip, tooltipAnchor, accessLevel: accessLevel, type } = props, buttonProps = tslib_1.__rest(props, ["children", "disabled", "variant", "tone", "iconPosition", "iconSize", "className", "icon", "tooltip", "tooltipAnchor", "accessLevel", "type"]);
+    let { children, disabled, variant = 'outlined', tone = 'neutral', iconPosition = 'start', iconSize, className, icon, tooltip, accessLevel: accessLevel, type } = props, buttonProps = tslib_1.__rest(props, ["children", "disabled", "variant", "tone", "iconPosition", "iconSize", "className", "icon", "tooltip", "accessLevel", "type"]);
     let adaptableInternalIcon;
     if ((0, AdaptableIconComponent_1.isAdaptableInternalIcon)(icon)) {
         adaptableInternalIcon = icon;
@@ -77,7 +77,7 @@ const SimpleButton = React.forwardRef((props, theRef) => {
         ? (_b = (_a = theme_1.default[buttonProps.fontWeight]) !== null && _a !== void 0 ? _a : buttonProps.fontWeight) !== null && _b !== void 0 ? _b : 'normal'
         : 'normal';
     const btn = (React.createElement(rebass_1.Button, Object.assign({}, buttonProps, { disabled: disabled, className: (0, join_1.default)(className, exports.baseClassName, disabled ? `${exports.baseClassName}--disabled` : '', fontWeight ? `${exports.baseClassName}--font-weight=${fontWeight}` : '', `${exports.baseClassName}--variant-${variant}`, `${exports.baseClassName}--tone-${tone}`), ref: theRef }), children));
-    return tooltip ? (React.createElement(Tooltip_1.default, { anchor: tooltipAnchor, label: tooltip }, btn)) : (btn);
+    return tooltip ? React.createElement(Tooltip_1.default, { label: tooltip }, btn) : btn;
 });
 SimpleButton.defaultProps = {
     px: null,

package/src/components/Tooltip/index.d.ts

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { OverlayProps } from '../OverlayTrigger/Overlay';
-declare const Tooltip: ({ label, children, anchor, }: {
+declare const Tooltip: ({ label, children }: {
     label?: React.ReactNode;
     children: React.ReactNode;
-    anchor?: OverlayProps['anchor'];
 }) => JSX.Element;
 export default Tooltip;

package/src/components/Tooltip/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
-const Tooltip = ({ label, children, anchor, }) => {
-    return (React.createElement(OverlayTrigger_1.default, { anchor: anchor, defaultZIndex: 2000000, className: "ab-Tooltip", render: () => label }, children));
+const Tooltip = ({ label, children }) => {
+    return (React.createElement(OverlayTrigger_1.default, { defaultZIndex: 2000000, className: "ab-Tooltip", render: () => label }, children));
 };
 exports.default = Tooltip;

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

@@ -111,6 +111,13 @@ export declare const ADAPTABLE_METAMODEL: {
         name: string;
         kind: string;
         description: string;
+        properties: {
+            name: string;
+            kind: string;
+            description: string;
+            uiLabel: string;
+            reference: string;
+        }[];
     };
     ActionRowButtonType: {
         name: string;