@cube-dev/ui-kit 0.9.4 → 0.9.7

package/cjs/components/overlays/AlertDialog/AlertDialogApiProvider.js

@@ -0,0 +1,115 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAlertDialogAPI = exports.AlertDialogApiProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+const AlertDialogZone_1 = require("./AlertDialogZone");
+const DialogApiContext = (0, react_1.createContext)(null);
+/**
+ * @internal Do not use it in your code!
+ */
+function AlertDialogApiProvider(props) {
+    const [openedDialog, setOpenedDialog] = (0, react_1.useState)(null);
+    const id = (0, react_1.useRef)(0);
+    const api = (0, react_1.useMemo)(() => ({
+        open: (dialogProps, params = {}) => {
+            const { cancelToken } = params;
+            const currentId = ++id.current;
+            const currentDialog = {
+                props: dialogProps,
+                meta: { id: currentId, isClosed: false, isVisible: true },
+            };
+            const close = () => {
+                var _a;
+                if (currentDialog.meta.isClosed)
+                    return;
+                currentDialog.meta.isClosed = true;
+                (_a = params.cancelToken) === null || _a === void 0 ? void 0 : _a.removeEventListener('abort', close);
+                setOpenedDialog((currentState) => (currentState === null || currentState === void 0 ? void 0 : currentState.meta.id) !== currentId
+                    ? currentState
+                    : {
+                        props: currentState.props,
+                        meta: { ...currentState.meta, isVisible: false },
+                    });
+                setTimeout(() => setOpenedDialog((currentState) => (currentState === null || currentState === void 0 ? void 0 : currentState.meta.id) !== currentId ? currentState : null), 300);
+            };
+            if (cancelToken === null || cancelToken === void 0 ? void 0 : cancelToken.aborted)
+                return new Promise(() => { });
+            cancelToken === null || cancelToken === void 0 ? void 0 : cancelToken.addEventListener('abort', close, { once: true });
+            currentDialog.meta.promise = new Promise((resolve, reject) => {
+                currentDialog.meta.resolve = (status) => {
+                    close();
+                    resolve(status);
+                };
+                currentDialog.meta.reject = (reason) => {
+                    close();
+                    reject(reason);
+                };
+            });
+            setOpenedDialog((openedDialog) => {
+                // we already have opened dialog, so we reject opening another
+                if (openedDialog !== null) {
+                    currentDialog.meta.reject(new Error("Another dialog is already opened. It's a bad practice to open more than one <AlertDialog /> at the same time"));
+                    return openedDialog;
+                }
+                return currentDialog;
+            });
+            return currentDialog.meta.promise;
+        },
+    }), []);
+    return ((0, jsx_runtime_1.jsxs)(DialogApiContext.Provider, { value: api, children: [(0, jsx_runtime_1.jsx)(AlertDialogZone_1.AlertDialogZone, { openedDialog: openedDialog }, void 0), props.children] }, void 0));
+}
+exports.AlertDialogApiProvider = AlertDialogApiProvider;
+/**
+ * Hook gives the ability to open `<AlertDialog />` imperatively.
+ *
+ * ***Important*** it's commonly a bad practice when you open multiple dialogs in a row;
+ * that means this api will reject all dialogs when there is already open one
+ *
+ * @example Example with calling as a side effect
+ * const alertDialogAPI = useAlertDialogAPI();
+ *
+ * useEffect(() => {
+ *   const abortDialog = new AbortController();
+ *   const openedDialog = alertDialogAPI.open({
+ *     title: 'Are you sure?',
+ *     content: <Paragraph>Test content</Paragraph>
+ *   }, {
+ *      cancelToken: abortDialog.signal
+ *   });
+ *
+ *   openedDialog.then(() => console.log('closed'))
+ *
+ *   return () => {
+ *     abortDialog.abort();
+ *   }
+ * }, [])
+ *
+ * @example opening dialog on Button click.
+ * const alertDialogAPI = useAlertDialogAPI();
+ *
+ * const onPress = useCallback(() => {
+ *   alertDialogAPI.open({...})
+ * }, [])
+ *
+ * return <Button onPress={onPress}>New issue</Button>
+ */
+function useAlertDialogAPI() {
+    const api = (0, react_1.useContext)(DialogApiContext);
+    (0, tiny_invariant_1.default)(api !== null, "You can't use DialogApi outside of <Root /> component. Please, check if your component is descendant of <Root/> component");
+    return api;
+}
+exports.useAlertDialogAPI = useAlertDialogAPI;
+
+        

package/cjs/components/overlays/AlertDialog/AlertDialogZone.js

@@ -0,0 +1,58 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertDialogZone = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const portal_1 = require("../../portal");
+const Dialog_1 = require("../Dialog");
+const AlertDialog_1 = require("./AlertDialog");
+const PORTAL_KEY = 'AlertDialogZone';
+/**
+ * @internal Do not use it
+ */
+function AlertDialogZone(props) {
+    const { openedDialog } = props;
+    if (openedDialog === null)
+        return (0, jsx_runtime_1.jsx)(portal_1.Portal, {}, PORTAL_KEY);
+    const { type, isDismissable = true, actions, onDismiss, content, ...options } = openedDialog.props;
+    const { resolve, reject, isVisible, dialogType } = openedDialog.meta;
+    const _actions = (() => {
+        const mergeActionProps = (action, status) => {
+            if (typeof action === 'undefined') {
+                return undefined;
+            }
+            if (typeof action === 'boolean') {
+                return (action
+                    ? { onPress: () => resolve(status) }
+                    : false);
+            }
+            const onPress = action.onPress;
+            return {
+                ...action,
+                onPress: (e) => {
+                    onPress === null || onPress === void 0 ? void 0 : onPress(e);
+                    resolve(status);
+                },
+            };
+        };
+        if (typeof actions === 'undefined')
+            return {};
+        return {
+            confirm: mergeActionProps(actions.confirm, 'confirm'),
+            secondary: mergeActionProps(actions.secondary, 'secondary'),
+            cancel: mergeActionProps(actions.cancel, 'cancel'),
+        };
+    })();
+    return ((0, jsx_runtime_1.jsx)(portal_1.Portal, { children: (0, jsx_runtime_1.jsx)(Dialog_1.DialogContainer, { isOpen: isVisible, isDismissable: isDismissable, type: type, onDismiss: resolve, children: (0, jsx_runtime_1.jsx)(AlertDialog_1.AlertDialog, { noActions: dialogType === 'form', actions: _actions, isHidden: !isVisible, content: typeof content === 'function'
+                    ? content({ resolve, reject })
+                    : content, ...options }, void 0) }, void 0) }, PORTAL_KEY));
+}
+exports.AlertDialogZone = AlertDialogZone;
+
+        

package/cjs/components/overlays/AlertDialog/index.js

@@ -0,0 +1,24 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./AlertDialogApiProvider"), exports);
+__exportStar(require("./AlertDialogZone"), exports);
+__exportStar(require("./AlertDialog"), exports);
+
+        

package/cjs/components/overlays/AlertDialog/types.js

@@ -0,0 +1,11 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+
+        

package/cjs/components/overlays/Dialog/Dialog.js

@@ -0,0 +1,181 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dialog = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const actions_1 = require("../../actions");
+const utils_1 = require("@react-spectrum/utils");
+const context_1 = require("./context");
+const overlays_1 = require("@react-aria/overlays");
+const focus_1 = require("@react-aria/focus");
+const react_1 = require("react");
+const dialog_1 = require("@react-aria/dialog");
+const i18n_1 = require("@react-aria/i18n");
+const Base_1 = require("../../Base");
+const icons_1 = require("@ant-design/icons");
+const styles_1 = require("../../../utils/styles");
+const list_1 = require("../../../styles/list");
+const react_2 = require("../../../utils/react");
+const StylesProvider_1 = require("../../../providers/StylesProvider");
+const STYLES_LIST = [...list_1.BASE_STYLES, ...list_1.DIMENSION_STYLES, ...list_1.BLOCK_STYLES];
+const DEFAULT_STYLES = {
+    pointerEvents: 'auto',
+    position: 'relative',
+    display: 'flex',
+    placeItems: 'stretch',
+    placeContent: 'stretch',
+    width: {
+        '': '288px @dialog-size 90vw',
+        '[data-type="fullscreen"]': '90vw 90vw',
+        '[data-type="fullscreenTakeover"]': '100vw 100vw',
+        '[data-type="panel"]': '100vw 100vw',
+    },
+    height: {
+        '': 'max 90vh',
+        '[data-type="fullscreenTakeover"] | [data-type="panel"]': 'max 100vh',
+    },
+    gap: 0,
+    flow: 'column',
+    radius: {
+        '': '2r',
+        '[data-type="tray"]': '2r top',
+        '[data-type="fullscreenTakeover"] | [data-type="panel"]': '0r',
+    },
+    fill: '#white',
+    shadow: {
+        '': '0 20px 30px #shadow',
+        '[data-type="popover"]': '0px 4px 16px #shadow',
+    },
+    transform: {
+        '': false,
+        '[data-type="modal"]': 'translate(0, ((50vh - 50%) / -3))',
+    },
+    placeSelf: 'stretch',
+    '@dialog-heading-padding-v': {
+        '': '2x',
+        '[data-type="popover"]': '1x',
+    },
+    '@dialog-content-padding-v': {
+        '': '3x',
+        '[data-type="popover"]': '2x',
+    },
+    '@dialog-padding-h': {
+        '': '3x',
+        '[data-type="popover"]': '2x',
+    },
+    '@dialog-footer-v': {
+        '': '2x',
+        '[data-type="popover"]': '1x',
+    },
+    '@dialog-content-gap': '3x',
+};
+const CLOSE_BUTTON_STYLES = {
+    position: 'absolute',
+    top: '1x',
+    right: '1x',
+    width: '5x',
+    height: '5x',
+    display: 'flex',
+    placeContent: 'center',
+};
+const sizeMap = {
+    S: 'small',
+    M: 'medium',
+    L: 'large',
+};
+const sizePxMap = {
+    small: 360,
+    medium: 479,
+    large: 798,
+};
+const intlMessages = {
+    'en-US': {
+        dismiss: 'Dismiss',
+        alert: 'Alert',
+    },
+};
+function Dialog(props, ref) {
+    let { type = 'modal', ...contextProps } = (0, react_1.useContext)(context_1.DialogContext) || {};
+    let { qa, children, size = 'S', isDismissable = contextProps.isDismissable, onDismiss = contextProps.onClose, closeIcon, ...otherProps } = props;
+    size = sizeMap[size.toUpperCase()] || size;
+    const styles = {
+        ...DEFAULT_STYLES,
+        ...(0, StylesProvider_1.useContextStyles)('Dialog', props),
+        ...(0, styles_1.extractStyles)(otherProps, STYLES_LIST),
+        '@dialog-size': `${sizePxMap[size] || 288}px`,
+    };
+    let formatMessage = (0, i18n_1.useMessageFormatter)(intlMessages);
+    let domRef = (0, utils_1.useDOMRef)(ref);
+    let { dialogProps, titleProps } = (0, dialog_1.useDialog)((0, react_2.mergeProps)(contextProps, props), domRef);
+    // If rendered in a popover or tray there won't be a visible dismiss button,
+    // so we render a hidden one for screen readers.
+    let dismissButton;
+    if (type === 'popover' || type === 'tray') {
+        dismissButton = (0, jsx_runtime_1.jsx)(overlays_1.DismissButton, { onDismiss: onDismiss }, void 0);
+    }
+    // let hasHeader = useHasChild('[data-id="Header"]', domRef);
+    // let hasFooter = useHasChild('[data-id="Footer"]', domRef);
+    let slots = {
+        heading: {
+            level: 2,
+            preset: 'h4',
+            ...titleProps,
+        },
+        content: {
+            styles: {
+                flexGrow: 1,
+                padding: {
+                    '': '@dialog-content-padding-v @dialog-padding-h 0 @dialog-padding-h',
+                    ':last-child': '@dialog-content-padding-v @dialog-padding-h',
+                },
+                margin: {
+                    '': '@dialog-content-padding-v bottom',
+                    ':last-child': '0',
+                },
+                gap: '@dialog-content-gap',
+                height: {
+                    '': 'max (100% - (2 * @dialog-content-padding-v))',
+                    ':last-child': 'max (100% - @dialog-content-padding-v)',
+                },
+            },
+        },
+        header: {
+            styles: {
+                display: 'flex',
+                flow: 'row',
+                gap: '1x',
+                placeItems: 'baseline stretch',
+                placeContent: 'space-between',
+                padding: `@dialog-heading-padding-v ${isDismissable ? '(@dialog-padding-h + 4x)' : '@dialog-padding-h'} @dialog-heading-padding-v @dialog-padding-h`,
+                border: 'bottom',
+            },
+        },
+        footer: {
+            styles: {
+                display: 'flex',
+                gap: '1x',
+                flow: 'row',
+                placeItems: 'baseline stretch',
+                placeContent: 'space-between',
+                padding: '@dialog-content-padding-v @dialog-padding-h @dialog-footer-v @dialog-padding-h',
+            },
+        },
+    };
+    return ((0, jsx_runtime_1.jsx)(focus_1.FocusScope, { contain: true, restoreFocus: true, children: (0, jsx_runtime_1.jsxs)(Base_1.Base, { "data-id": "Dialog", "data-qa": qa || 'Dialog', styles: styles, as: "section", ...dialogProps, mods: {
+                dismissable: isDismissable,
+            }, "data-type": type, "data-size": size, ref: domRef, children: [dismissButton, (0, jsx_runtime_1.jsxs)(react_2.SlotProvider, { slots: slots, children: [isDismissable && ((0, jsx_runtime_1.jsx)(actions_1.Button, { qa: "ModalCloseButton", type: "neutral", styles: CLOSE_BUTTON_STYLES, icon: closeIcon || (0, jsx_runtime_1.jsx)(icons_1.CloseOutlined, {}, void 0), label: formatMessage('dismiss'), onPress: () => onDismiss && onDismiss() }, void 0)), children] }, void 0)] }, void 0) }, void 0));
+}
+/**
+ * Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface.
+ * Depending on the kind of Dialog, further interactions may be blocked until the Dialog is acknowledged.
+ */
+let _Dialog = (0, react_1.forwardRef)(Dialog);
+exports.Dialog = _Dialog;
+
+        

package/cjs/components/overlays/Dialog/DialogContainer.js

@@ -0,0 +1,42 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogContainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const context_1 = require("./context");
+const Modal_1 = require("../Modal/Modal");
+const react_1 = require("react");
+/**
+ * A DialogContainer accepts a single Dialog as a child, and manages to show and hide
+ * it in a modal.
+ * Useful in cases where there is no trigger element
+ * or when the trigger unmounts while the dialog is open.
+ */
+function DialogContainer(props) {
+    const { children, type = 'modal', onDismiss, isDismissable, isKeyboardDismissDisabled, isOpen, } = props;
+    const childArray = react_1.Children.toArray(children);
+    if (childArray.length > 1) {
+        throw new Error('Only a single child can be passed to DialogContainer.');
+    }
+    const lastChild = (0, react_1.useRef)();
+    const child = (0, react_1.isValidElement)(childArray[0]) ? childArray[0] : null;
+    if (child) {
+        lastChild.current = child;
+    }
+    const isActuallyOpened = typeof isOpen !== 'boolean' ? !!child : isOpen;
+    const context = {
+        type,
+        onClose: onDismiss,
+        isDismissable,
+    };
+    return ((0, jsx_runtime_1.jsx)(Modal_1.Modal, { isOpen: isActuallyOpened, onClose: isDismissable ? onDismiss : undefined, type: type, isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, children: (0, jsx_runtime_1.jsx)(context_1.DialogContext.Provider, { value: context, children: child }, void 0) }, void 0));
+}
+exports.DialogContainer = DialogContainer;
+
+        

package/cjs/components/overlays/Dialog/DialogForm.js

@@ -0,0 +1,56 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogForm = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const DialogContainer_1 = require("./DialogContainer");
+const Dialog_1 = require("./Dialog");
+const Title_1 = require("../../content/Title");
+const Form_1 = require("../../forms/Form/Form");
+const useForm_1 = require("../../forms/Form/useForm");
+const Content_1 = require("../../content/Content");
+const Submit_1 = require("../../actions/Button/Submit");
+const actions_1 = require("../../actions");
+const ButtonGroup_1 = require("../../actions/ButtonGroup/ButtonGroup");
+const Header_1 = require("../../content/Header");
+const DialogForm = (props, ref) => {
+    let { qa, name, form, defaultValues, onDismiss, onSubmit, onSubmitFailed, onValuesChange, labelStyles, labelPosition, requiredMark, isRequired, necessityIndicator, necessityLabel, isReadOnly, validationState, validateTrigger, children, danger, noActions, submitProps, cancelProps, preserve, title, size, closeIcon, } = props;
+    [form] = (0, useForm_1.useForm)(form);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        open() {
+            setOpen(true);
+        },
+        close() {
+            setOpen(false);
+        },
+    }));
+    function onLocalDismiss() {
+        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        form === null || form === void 0 ? void 0 : form.resetFields();
+        setOpen(false);
+    }
+    return ((0, jsx_runtime_1.jsx)(DialogContainer_1.DialogContainer, { onDismiss: onLocalDismiss, isDismissable: true, children: open && ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { qa: `${qa || ''}Dialog`, size: size, closeIcon: closeIcon, children: [(0, jsx_runtime_1.jsx)(Header_1.Header, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { children: title }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(Content_1.Content, { children: (0, jsx_runtime_1.jsxs)(Form_1.Form, { qa: qa || 'DialogForm', form: form, name: name, onSubmit: async (data) => {
+                            await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(data));
+                            setOpen(false);
+                            if (!preserve && form) {
+                                form.resetFields();
+                            }
+                        }, onSubmitFailed: onSubmitFailed, defaultValues: defaultValues, onValuesChange: onValuesChange, labelStyles: labelStyles, labelPosition: labelPosition, requiredMark: requiredMark, isRequired: isRequired, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isReadOnly: isReadOnly, validationState: validationState, validateTrigger: validateTrigger, children: [typeof children === 'function'
+                                ? children(onLocalDismiss)
+                                : children, !noActions ? ((0, jsx_runtime_1.jsxs)(ButtonGroup_1.ButtonGroup, { children: [(0, jsx_runtime_1.jsx)(Submit_1.Submit, { qa: `${qa || ''}SubmitButton`, theme: danger ? 'danger' : undefined, label: "Submit", ...(submitProps || {}) }, void 0), (0, jsx_runtime_1.jsx)(actions_1.Button, { qa: `${qa || ''}CancelButton`, onPress: onLocalDismiss, label: "Cancel", ...(cancelProps || {}) }, void 0)] }, void 0)) : undefined] }, void 0) }, void 0)] }, void 0)) }, void 0));
+};
+/**
+ * DialogForms are a specific type of Dialog. They contain forms to fill.
+ */
+let _DialogForm = (0, react_1.forwardRef)(DialogForm);
+exports.DialogForm = _DialogForm;
+
+        

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

@@ -0,0 +1,116 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogTrigger = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const overlays_1 = require("@react-stately/overlays");
+const interactions_1 = require("@react-aria/interactions");
+const utils_1 = require("@react-spectrum/utils");
+const overlays_2 = require("@react-aria/overlays");
+const context_1 = require("./context");
+const Modal_1 = require("../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 = (0, utils_1.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 = (0, overlays_1.useOverlayTriggerState)(props);
+    let wasOpen = (0, react_1.useRef)(false);
+    let isExiting = (0, react_1.useRef)(false);
+    let onExiting = () => (isExiting.current = true);
+    let onExited = () => (isExiting.current = false);
+    wasOpen.current = state.isOpen;
+    // eslint-disable-next-line arrow-body-style
+    (0, react_1.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 ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(Modal_1.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 ((0, jsx_runtime_1.jsx)(Modal_1.Tray, { isOpen: state.isOpen, onClose: onClose, isKeyboardDismissDisabled: isKeyboardDismissDisabled, styles: styles, children: typeof content === 'function' ? content(state.close) : content }, void 0));
+        }
+    };
+    return ((0, jsx_runtime_1.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;
+exports.DialogTrigger = _DialogTrigger;
+function PopoverTrigger(allProps) {
+    let { state, targetRef, trigger, content, hideArrow, onClose, isKeyboardDismissDisabled, ...props } = allProps;
+    let triggerRef = (0, react_1.useRef)(null);
+    let overlayRef = (0, react_1.useRef)(null);
+    let { overlayProps: popoverProps, placement, arrowProps, } = (0, overlays_2.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 } = (0, overlays_2.useOverlayTrigger)({ type: 'dialog' }, state, triggerRef);
+    let triggerPropsWithRef = {
+        ...triggerProps,
+        ref: targetRef ? undefined : triggerRef,
+    };
+    let overlay = ((0, jsx_runtime_1.jsx)(Modal_1.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 ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interactions_1.PressResponder, { ...triggerProps, onPress: state.toggle, isPressed: state.isOpen
+                    && type !== 'modal'
+                    && type !== 'fullscreen'
+                    && type !== 'fullscreenTakeover', children: trigger }, void 0), (0, jsx_runtime_1.jsx)(context_1.DialogContext.Provider, { value: context, children: overlay }, void 0)] }, void 0));
+}
+
+        

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

@@ -0,0 +1,14 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DialogContext = void 0;
+const react_1 = require("react");
+exports.DialogContext = (0, react_1.createContext)({});
+
+        

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

@@ -0,0 +1,25 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.7
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DialogContainer"), exports);
+__exportStar(require("./DialogForm"), exports);
+__exportStar(require("./DialogTrigger"), exports);
+__exportStar(require("./Dialog"), exports);
+
+