@cube-dev/ui-kit 0.9.4 → 0.9.7

package/es/components/overlays/Dialog/DialogTrigger.js

@@ -0,0 +1,113 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useRef } from 'react';
+import { useOverlayTriggerState } from '@react-stately/overlays';
+import { PressResponder } from '@react-aria/interactions';
+import { useMediaQuery } from '@react-spectrum/utils';
+import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
+import { DialogContext } from './context';
+import { Modal, Popover, Tray } from '../Modal';
+function DialogTrigger(props) {
+    let { children, type = 'modal', mobileType = type === 'popover' ? 'modal' : type, hideArrow, targetRef, onDismiss, isDismissable = true, isKeyboardDismissDisabled, styles, mobileViewport = 700, ...positionProps } = props;
+    if (!Array.isArray(children) || children.length > 2) {
+        throw new Error('DialogTrigger must have exactly 2 children');
+    }
+    // if a function is passed as the second child, it won't appear in toArray
+    let [trigger, content] = children;
+    // On small devices, show a modal or tray instead of a popover.
+    let isMobile = useMediaQuery(`(max-width: ${mobileViewport}px)`);
+    if (isMobile) {
+        // handle cases where desktop popovers need a close button for the mobile modal view
+        if (type !== 'modal' && mobileType === 'modal') {
+            isDismissable = true;
+        }
+        type = mobileType;
+    }
+    let state = useOverlayTriggerState(props);
+    let wasOpen = useRef(false);
+    let isExiting = useRef(false);
+    let onExiting = () => (isExiting.current = true);
+    let onExited = () => (isExiting.current = false);
+    wasOpen.current = state.isOpen;
+    // eslint-disable-next-line arrow-body-style
+    useEffect(() => {
+        return () => {
+            if ((wasOpen.current || isExiting.current)
+                && type !== 'popover'
+                && type !== 'tray') {
+                console.warn('CubeUIKit: A DialogTrigger unmounted while open. This is likely due to being placed within a trigger that unmounts or inside a conditional. Consider using a DialogContainer instead.');
+            }
+        };
+    }, []);
+    function onClose(action) {
+        if (isDismissable) {
+            onDismiss && onDismiss(action);
+            state.close();
+        }
+    }
+    if (type === 'popover') {
+        return (_jsx(PopoverTrigger, { ...positionProps, state: state, targetRef: targetRef, trigger: trigger, content: content, onClose: onClose, isKeyboardDismissDisabled: isKeyboardDismissDisabled, hideArrow: hideArrow }, void 0));
+    }
+    let renderOverlay = () => {
+        switch (type) {
+            case 'panel':
+            case 'fullscreen':
+            case 'fullscreenTakeover':
+            case 'modal':
+                return (_jsx(Modal, { isOpen: state.isOpen, isDismissable: isDismissable, onClose: onClose, type: type, isKeyboardDismissDisabled: isKeyboardDismissDisabled, onExiting: onExiting, onExited: onExited, styles: styles, children: typeof content === 'function' ? content(state.close) : content }, void 0));
+            case 'tray':
+                return (_jsx(Tray, { isOpen: state.isOpen, onClose: onClose, isKeyboardDismissDisabled: isKeyboardDismissDisabled, styles: styles, children: typeof content === 'function' ? content(state.close) : content }, void 0));
+        }
+    };
+    return (_jsx(DialogTriggerBase, { type: type, state: state, onClose: onClose, isDismissable: isDismissable, trigger: trigger, overlay: renderOverlay() }, void 0));
+}
+/**
+ * DialogTrigger serves as a wrapper around a Dialog and its associated trigger, linking the Dialog's
+ * open state with the trigger's press state. Additionally, it allows you to customize the type and
+ * positioning of the Dialog.
+ */
+let _DialogTrigger = DialogTrigger;
+export { _DialogTrigger as DialogTrigger };
+function PopoverTrigger(allProps) {
+    let { state, targetRef, trigger, content, hideArrow, onClose, isKeyboardDismissDisabled, ...props } = allProps;
+    let triggerRef = useRef(null);
+    let overlayRef = useRef(null);
+    let { overlayProps: popoverProps, placement, arrowProps, } = useOverlayPosition({
+        targetRef: targetRef || triggerRef,
+        overlayRef: overlayRef,
+        placement: props.placement,
+        containerPadding: props.containerPadding,
+        offset: props.offset || 8,
+        crossOffset: props.crossOffset,
+        shouldFlip: props.shouldFlip,
+        isOpen: state.isOpen,
+    });
+    let { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, state, triggerRef);
+    let triggerPropsWithRef = {
+        ...triggerProps,
+        ref: targetRef ? undefined : triggerRef,
+    };
+    let overlay = (_jsx(Popover, { isOpen: state.isOpen, style: popoverProps.style, ref: overlayRef, onClose: onClose, placement: placement, arrowProps: arrowProps, isKeyboardDismissDisabled: isKeyboardDismissDisabled, hideArrow: hideArrow, children: typeof content === 'function' ? content(state.close) : content }, void 0));
+    return (_jsx(DialogTriggerBase, { type: "popover", state: state, triggerProps: triggerPropsWithRef, dialogProps: overlayProps, trigger: trigger, overlay: overlay }, void 0));
+}
+function DialogTriggerBase(props) {
+    let { type, state, onClose, isDismissable, dialogProps = {}, triggerProps = {}, overlay, trigger, } = props;
+    let context = {
+        type,
+        onClose,
+        isDismissable,
+        ...dialogProps,
+    };
+    return (_jsxs(Fragment, { children: [_jsx(PressResponder, { ...triggerProps, onPress: state.toggle, isPressed: state.isOpen
+                    && type !== 'modal'
+                    && type !== 'fullscreen'
+                    && type !== 'fullscreenTakeover', children: trigger }, void 0), _jsx(DialogContext.Provider, { value: context, children: overlay }, void 0)] }, void 0));
+}
+
+        

package/es/components/overlays/Dialog/context.js

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { createContext } from 'react';
+export const DialogContext = createContext({});
+
+        

package/es/components/overlays/Dialog/index.js

@@ -0,0 +1,13 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+export * from './DialogContainer';
+export * from './DialogForm';
+export * from './DialogTrigger';
+export * from './Dialog';
+
+        

package/es/components/overlays/Modal/Modal.js

@@ -0,0 +1,83 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDOMRef } from '@react-spectrum/utils';
+import { useViewportSize } from '@react-aria/utils';
+import { Overlay } from './Overlay';
+import { forwardRef } from 'react';
+import { Underlay } from './Underlay';
+import { useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';
+import { Base } from '../../Base';
+import { useContextStyles } from '../../../providers/StylesProvider';
+import { mergeProps } from '../../../utils/react';
+export const OVERLAY_WRAPPER_STYLES = {
+    position: 'fixed',
+    display: 'grid',
+    left: 0,
+    top: 0,
+    placeItems: {
+        '': 'center',
+        '[data-type="fullscreen"]': 'center',
+        '[data-type="fullscreenTakeover"] | [data-type="panel"]': 'stretch',
+    },
+    boxSizing: 'border-box',
+    width: '100vw',
+    height: '@cube-visual-viewport-height',
+    pointerEvents: 'none',
+    zIndex: 2,
+    transition: 'visibility 0ms linear .13s',
+};
+const MODAL_STYLES = {
+    display: 'grid',
+    zIndex: 2,
+    height: {
+        '': 'max (@cube-visual-viewport-height * .9)',
+        '[data-type="fullscreenTakeover"] | [data-type="panel"]': '@cube-visual-viewport-height @cube-visual-viewport-height',
+        '[data-type="fullscreen"]': '(@cube-visual-viewport-height * .9) (@cube-visual-viewport-height * .9)',
+        '[data-type="fullscreenTakeover"]': '@cube-visual-viewport-height @cube-visual-viewport-height',
+    },
+    width: {
+        width: '288px 90vw',
+    },
+    pointerEvents: 'none',
+    transition: 'opacity .25s linear, visibility 0ms linear, transform .25s ease-in-out',
+    transform: {
+        '': 'translate(0, 0) scale(1, 1)',
+        '[data-type="modal"] & !open': 'translate(0, -3x) scale(1, 1)',
+        '[data-type^="fullscreen"] & !open': 'translate(0, 0) scale(1.02, 1.02)',
+    },
+    opacity: {
+        '': 0,
+        open: 0.9999,
+    },
+};
+function Modal(props, ref) {
+    let { qa, children, onClose, type, styles, ...otherProps } = props;
+    let domRef = useDOMRef(ref);
+    let { overlayProps, underlayProps } = useOverlay(props, domRef);
+    return (_jsxs(Overlay, { ...otherProps, children: [type !== 'fullscreenTakeover' && _jsx(Underlay, { ...underlayProps }, void 0), _jsx(ModalWrapper, { qa: qa, onClose: onClose, type: type, ref: domRef, overlayProps: overlayProps, styles: styles, children: children }, void 0)] }, void 0));
+}
+let ModalWrapper = forwardRef(function ModalWrapper(props, ref) {
+    let { qa, children, isOpen, type, placement, styles, overlayProps, ...otherProps } = props;
+    styles = {
+        ...MODAL_STYLES,
+        ...useContextStyles('Modal', props),
+        ...styles,
+    };
+    usePreventScroll();
+    let { modalProps } = useModal();
+    let viewport = useViewportSize();
+    let style = {
+        '--cube-visual-viewport-height': viewport.height + 'px',
+    };
+    return (_jsx(Base, { qa: "ModalWrapper", mods: { open: isOpen }, "data-type": type, "data-placement": placement, styles: OVERLAY_WRAPPER_STYLES, style: style, children: _jsx(Base, { qa: qa || 'Modal', styles: styles, mods: { open: isOpen }, "data-type": type, "data-placement": placement, ...mergeProps(otherProps, overlayProps, modalProps), ref: ref, children: children }, void 0) }, void 0));
+});
+let _Modal = forwardRef(Modal);
+export { _Modal as Modal };
+
+        

package/es/components/overlays/Modal/OpenTransition.js

@@ -0,0 +1,19 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, cloneElement } from 'react';
+import Transition from 'react-transition-group/Transition';
+const OPEN_STATES = {
+    entering: false,
+    entered: true,
+};
+export function OpenTransition(props) {
+    return (_jsx(Transition, { timeout: { enter: 0, exit: 350 }, ...props, children: (state) => Children.map(props.children, (child) => child && cloneElement(child, { isOpen: !!OPEN_STATES[state] })) }, void 0));
+}
+
+        

package/es/components/overlays/Modal/Overlay.js

@@ -0,0 +1,37 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OpenTransition } from './OpenTransition';
+import { forwardRef, useCallback, useState } from 'react';
+import { Provider, useProviderProps } from '../../../provider';
+import { createPortal } from 'react-dom';
+function Overlay(props, ref) {
+    let { children, isOpen, container = null, onEnter, onEntering, onEntered, onExit, onExiting, onExited, } = props;
+    let [exited, setExited] = useState(!isOpen);
+    let { root } = useProviderProps({});
+    let handleEntered = useCallback(() => {
+        setExited(false);
+        onEntered === null || onEntered === void 0 ? void 0 : onEntered();
+    }, [onEntered]);
+    let handleExited = useCallback(() => {
+        setExited(true);
+        onExited === null || onExited === void 0 ? void 0 : onExited();
+    }, [onExited]);
+    // Don't un-render the overlay while it's transitioning out.
+    let mountOverlay = isOpen || !exited;
+    if (!mountOverlay) {
+        // Don't bother showing anything if we don't have to.
+        return null;
+    }
+    let contents = (_jsx(Provider, { ref: ref, children: _jsx(OpenTransition, { in: isOpen, appear: true, onExit: onExit, onExiting: onExiting, onExited: handleExited, onEnter: onEnter, onEntering: onEntering, onEntered: handleEntered, children: children }, void 0) }, void 0));
+    return createPortal(contents, container || root || document.body);
+}
+let _Overlay = forwardRef(Overlay);
+export { _Overlay as Overlay };
+
+        

package/es/components/overlays/Modal/Popover.js

@@ -0,0 +1,56 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { mergeProps } from '../../../utils/react';
+import { Overlay } from './Overlay';
+import { forwardRef } from 'react';
+import { useModal, useOverlay } from '@react-aria/overlays';
+import { Base } from '../../Base';
+import { useContextStyles } from '../../../providers/StylesProvider';
+const POPOVER_STYLES = {
+    pointerEvents: 'auto',
+    position: 'absolute',
+    transition: 'opacity .120s linear, visibility 0ms linear, transform .120s ease-in-out',
+    transform: {
+        '': 'scale(1, .9)',
+        open: 'scale(1, 1)',
+    },
+    opacity: {
+        '': 0,
+        open: '.9999',
+    },
+    transformOrigin: {
+        '': 'top center',
+        '[data-placement="top"]': 'bottom center',
+    },
+};
+function Popover(props, ref) {
+    let { qa, style, styles, children, placement, arrowProps, onClose, shouldCloseOnBlur, isKeyboardDismissDisabled, isNonModal, isDismissable = true, ...otherProps } = props;
+    return (_jsx(Overlay, { ...otherProps, children: _jsx(PopoverWrapper, { qa: qa, ref: ref, style: style, styles: styles, placement: placement, arrowProps: arrowProps, onClose: onClose, shouldCloseOnBlur: shouldCloseOnBlur, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isNonModal: isNonModal, isDismissable: isDismissable, children: children }, void 0) }, void 0));
+}
+const PopoverWrapper = forwardRef((props, ref) => {
+    let { qa, children, placement = 'bottom', arrowProps, isOpen, style, styles, shouldCloseOnBlur, isKeyboardDismissDisabled, isNonModal, isDismissable, ...otherProps } = props;
+    let { overlayProps } = useOverlay({ ...props, isDismissable: isDismissable && isOpen }, 
+    // @ts-ignore
+    ref);
+    let { modalProps } = useModal({
+        isDisabled: isNonModal,
+    });
+    styles = {
+        ...POPOVER_STYLES,
+        ...useContextStyles('Popover', props),
+        ...styles,
+    };
+    return (_jsx(Base, { qa: qa || 'Popover', ...mergeProps(otherProps, overlayProps, modalProps), styles: styles, ref: ref, mods: {
+            open: isOpen,
+        }, "data-placement": placement, role: "presentation", style: style, children: children }, void 0));
+});
+let _Popover = forwardRef(Popover);
+export { _Popover as Popover };
+
+        

package/es/components/overlays/Modal/Tray.js

@@ -0,0 +1,92 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDOMRef } from '@react-spectrum/utils';
+import { useViewportSize } from '@react-aria/utils';
+import { Overlay } from './Overlay';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { Underlay } from './Underlay';
+import { useModal, useOverlay, usePreventScroll } from '@react-aria/overlays';
+import { OVERLAY_WRAPPER_STYLES } from './Modal';
+import { Base } from '../../Base';
+import { useContextStyles } from '../../../providers/StylesProvider';
+import { mergeProps } from '../../../utils/react';
+const TRAY_STYLES = {
+    zIndex: 2,
+    height: 'max (@cube-visual-viewport-height * .9)',
+    width: '288px 90vw',
+    pointerEvents: 'auto',
+    transition: 'transform .25s ease-in-out, opacity .25s linear, visibility 0ms linear',
+    opacity: {
+        '': 0,
+        open: '.9999',
+    },
+};
+function Tray(props, ref) {
+    let { qa, children, onClose, isFixedHeight, isNonModal, styles, ...otherProps } = props;
+    let domRef = useDOMRef(ref);
+    let { overlayProps, underlayProps } = useOverlay({ ...props, isDismissable: true }, domRef);
+    return (_jsxs(Overlay, { ...otherProps, children: [_jsx(Underlay, { ...underlayProps }, void 0), _jsx(TrayWrapper, { qa: qa, onClose: onClose, ref: domRef, overlayProps: overlayProps, isFixedHeight: isFixedHeight, isNonModal: isNonModal, styles: styles, children: children }, void 0)] }, void 0));
+}
+let TrayWrapper = forwardRef(function (props, ref) {
+    let { qa, children, isOpen, styles, isFixedHeight, isNonModal, overlayProps, ...otherProps } = props;
+    usePreventScroll();
+    let { modalProps } = useModal({
+        isDisabled: isNonModal,
+    });
+    styles = {
+        ...TRAY_STYLES,
+        ...useContextStyles('Tray', props),
+        ...styles,
+    };
+    // We need to measure the window's height in JS rather than using percentages in CSS
+    // so that contents (e.g. menu) can inherit the max-height properly. Using percentages
+    // does not work properly because there is nothing to base the percentage on.
+    // We cannot use vh units because mobile browsers adjust the window height dynamically
+    // when the address bar/bottom toolbars show and hide on scroll and vh units are fixed.
+    // Also, the visual viewport is smaller than the layout viewport when the virtual keyboard
+    // is up, so use the VisualViewport API to ensure the tray is displayed above the keyboard.
+    let viewport = useViewportSize();
+    let [height, setHeight] = useState(viewport.height);
+    let timeoutRef = useRef();
+    useEffect(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        // When the height is decreasing, and the keyboard is visible
+        // (visual viewport smaller than layout viewport), delay setting
+        // the new max height until after the animation is complete
+        // so that there isn't an empty space under the tray briefly.
+        if (viewport.height < height && viewport.height < window.innerHeight) {
+            timeoutRef.current = setTimeout(() => {
+                setHeight(viewport.height);
+            }, 500);
+        }
+        else {
+            setHeight(viewport.height);
+        }
+    }, [height, viewport.height]);
+    let wrapperStyle = {
+        '--cube-visual-viewport-height': height + 'px',
+    };
+    let domProps = mergeProps(otherProps, overlayProps);
+    return (_jsx(Base, { qa: "TrayWrapper", mods: {
+            open: isOpen,
+        }, styles: {
+            ...OVERLAY_WRAPPER_STYLES,
+            placeContent: 'end center',
+            placeItems: 'end center',
+        }, style: wrapperStyle, children: _jsx(Base, { qa: qa || 'Tray', styles: styles, mods: {
+                open: isOpen,
+                'fixed-height': isFixedHeight,
+            }, ...domProps, ...modalProps, ref: ref, children: children }, void 0) }, void 0));
+});
+let _Tray = forwardRef(Tray);
+export { _Tray as Tray };
+
+        

package/es/components/overlays/Modal/Underlay.js

@@ -0,0 +1,48 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Base } from '../../Base';
+import { useContextStyles } from '../../../providers/StylesProvider';
+const UNDERLAY_STYLES = {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 1,
+    transitionDelay: '0ms',
+    // visibility: {
+    //   '': 'hidden',
+    //   open: 'visible',
+    // },
+    opacity: {
+        '': 0,
+        open: 0.9999,
+    },
+    pointerEvents: {
+        '': 'none',
+        open: 'auto',
+    },
+    fill: '#dark.30',
+    overflow: 'hidden',
+    transition: 'transform .25s ease-in-out, opacity .25s linear, visibility 0ms linear',
+};
+const Underlay = ({ isOpen, ...otherProps }, ref) => {
+    const styles = {
+        ...UNDERLAY_STYLES,
+        ...useContextStyles('Underlay'),
+    };
+    return (_jsx(Base, { ref: ref, "data-qa": "Underlay", styles: styles, mods: {
+            open: isOpen,
+        }, ...otherProps }, void 0));
+};
+let _Underlay = forwardRef(Underlay);
+export { _Underlay as Underlay };
+
+        

package/es/components/overlays/Modal/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+export { Tray } from './Tray';
+export { Modal } from './Modal';
+export { Overlay } from './Overlay';
+export { Underlay } from './Underlay';
+export { Popover } from './Popover';
+
+        

package/es/components/overlays/Notification/Notification.js

@@ -0,0 +1,37 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Action } from '../../actions/Action';
+import { Card } from '../../content/Card/Card';
+import { Block } from '../../Block';
+import { Flex } from '../../layout/Flex';
+import THEMES from '../../../data/themes';
+import { CheckOutlined, CloseOutlined, ExclamationOutlined, InfoOutlined, } from '@ant-design/icons';
+export function Notification(allProps) {
+    let { type, children, onClose, ...props } = allProps;
+    type = type || 'note';
+    let Icon;
+    switch (type) {
+        case 'success':
+            Icon = CheckOutlined;
+            break;
+        case 'danger':
+            Icon = ExclamationOutlined;
+            break;
+        default:
+            Icon = InfoOutlined;
+            break;
+    }
+    return (_jsxs(Card, { display: "grid", role: "region", color: "#dark", padding: ".5x", shadow: "0 5px 15px #dark.10", border: false, margin: "1x bottom", radius: "1.5r", styles: {
+            gridColumns: 'auto 1fr auto',
+            placeItems: 'center start',
+            gap: '2x',
+        }, ...props, children: [_jsx(Flex, { radius: "1r", width: "5x", height: "5x", placeContent: "center", placeItems: "center", fill: THEMES[type] ? THEMES[type].fill : '#clear', color: THEMES[type] ? THEMES[type].color : '#dark.75', children: _jsx(Icon, { style: { fontSize: 16 } }, void 0) }, void 0), _jsx(Block, { children: children }, void 0), _jsx(Action, { color: { '': '#dark.75', hovered: '#purple' }, width: "5x", height: "5x", onPress: onClose, label: "Close", children: _jsx(CloseOutlined, {}, void 0) }, void 0)] }, void 0));
+}
+
+        

package/es/components/overlays/OverlayWrapper.js

@@ -0,0 +1,31 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CSSTransition } from 'react-transition-group';
+import { useRef } from 'react';
+import { Portal } from '../portal';
+export function OverlayWrapper({ isOpen, placement, minOffset, minScale, children, container = null, }) {
+    const containerRef = useRef(container);
+    const options = {};
+    if (typeof minOffset === 'number') {
+        minOffset = `${minOffset}px`;
+    }
+    if (placement != null) {
+        options.placement = placement;
+    }
+    if (minScale != null) {
+        options.minScale = minScale;
+    }
+    if (minOffset != null) {
+        options.minOffset = minOffset;
+    }
+    const contents = (_jsx(CSSTransition, { in: isOpen, unmountOnExit: true, timeout: 180, classNames: "cube-overlay-transition", children: children }, void 0));
+    return _jsx(Portal, { root: containerRef, children: contents }, void 0);
+}
+
+        

package/es/components/overlays/Tooltip/Tooltip.js

@@ -0,0 +1,97 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
+import { mergeProps } from '../../../utils/react';
+import { createDOMRef } from '@react-spectrum/utils';
+import { TooltipContext } from './context';
+import { useTooltip } from '@react-aria/tooltip';
+import { Base } from '../../Base';
+import { extractStyles } from '../../../utils/styles';
+import { CONTAINER_STYLES } from '../../../styles/list';
+import { useContextStyles } from '../../../providers/StylesProvider';
+import { getOverlayTransitionCSS } from '../../../utils/transitions';
+const TOOLTIP_STYLES = {
+    display: 'block',
+    fill: '#dark.85',
+    color: '#white',
+    width: 'initial 36x max-content',
+    radius: true,
+    padding: '.75x 1x',
+    preset: 't3',
+    backdropFilter: 'blur(.5x)',
+    whiteSpace: 'pre-line',
+};
+const TIP_STYLES = {
+    position: 'absolute',
+    width: '1px',
+    height: '1px',
+    border: '.5x #clear',
+    borderTop: '.5x solid #dark.85',
+    borderBottom: '0',
+    top: {
+        '': 'initial',
+        '[data-placement="left"] | [data-placement="right"]': '50%',
+        '[data-placement="top"]': '100%',
+    },
+    left: {
+        '': 'initial',
+        '[data-placement="top"] | [data-placement="bottom"]': '50%',
+        '[data-placement="left"]': '100%',
+    },
+    right: {
+        '': 'initial',
+        '[data-placement="right"]': '100%',
+    },
+    bottom: {
+        '': 'initial',
+        '[data-placement="bottom"]': '100%',
+    },
+    transform: {
+        '': 'translate((-.375x - 1px), 0)',
+        '[data-placement="bottom"]': 'translate((-.375x - 1px), 0) rotate(180deg)',
+        '[data-placement="left"]': 'translate(-.375x, (-.375x - 1px)) rotate(270deg)',
+        '[data-placement="right"]': 'translate(.375x, (-.375x - 1px)) rotate(90deg)',
+    },
+};
+function Tooltip(props, ref) {
+    let { ref: overlayRef, arrowProps, state, overlayProps, minOffset, minScale, ...tooltipProviderProps } = useContext(TooltipContext);
+    let defaultRef = useRef(null);
+    overlayRef = overlayRef || defaultRef;
+    props = mergeProps(props, tooltipProviderProps);
+    let { placement = 'top', isOpen, tipStyles, showIcon, isMaterial, ...otherProps } = props;
+    const styles = extractStyles(otherProps, CONTAINER_STYLES, {
+        ...TOOLTIP_STYLES,
+        pointerEvents: isMaterial ? 'auto' : 'none',
+        ...useContextStyles('Tooltip', props),
+    });
+    tipStyles = {
+        ...TIP_STYLES,
+        ...useContextStyles('Tooltip_Tip'),
+        ...tipStyles,
+    };
+    let { tooltipProps } = useTooltip(props, state);
+    // Sync ref with overlayRef from context.
+    useImperativeHandle(ref, () => overlayRef ? createDOMRef(overlayRef) : null);
+    if (typeof minOffset === 'number') {
+        minOffset = `${minOffset}px`;
+    }
+    if (typeof minScale === 'number') {
+        minScale = String(minScale);
+    }
+    return (_jsxs(Base, { ...tooltipProps, ...overlayProps, css: getOverlayTransitionCSS({ placement, minOffset, minScale }), styles: styles, mods: {
+            open: isOpen,
+        }, "data-placement": placement, ref: overlayRef, children: [props.children, _jsx(Base, { "data-placement": placement, styles: tipStyles, ...arrowProps }, void 0)] }, void 0));
+}
+/**
+ * Display container for Tooltip content. Has a directional arrow dependent on its placement.
+ */
+let _Tooltip = forwardRef(Tooltip);
+export { _Tooltip as Tooltip };
+
+