@cube-dev/ui-kit 0.8.5 → 0.9.0

package/dist/es/components/other/Base64Upload/Base64Upload.js

@@ -0,0 +1,104 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { Button } from '../../actions/Button/Button';
+import { Block } from '../../Block';
+import { Text } from '../../content/Text';
+import styled from 'styled-components';
+import { extractStyles } from '../../../utils/styles';
+import { POSITION_STYLES } from '../../../styles/list';
+import { filterBaseProps } from '../../../utils/filterBaseProps';
+const DEFAULT_STYLES = {
+    display: 'inline-flex',
+    padding: '.75x 1x',
+    gap: '1x',
+    flow: 'row',
+    placeItems: 'center',
+    fill: '#white',
+    border: true,
+    fontWeight: 400,
+};
+export const Base64Upload = styled(forwardRef((allProps, ref) => {
+    const { onInput, ...props } = allProps;
+    const styles = extractStyles(props, POSITION_STYLES, DEFAULT_STYLES);
+    const [file, setFile] = useState();
+    const [error, setError] = useState('');
+    function onInputFile(e) {
+        if (!e.target)
+            return;
+        const localFile = e.target.files[0];
+        const reader = new FileReader();
+        setError('');
+        if (!localFile)
+            return;
+        if (!localFile.name.endsWith('.json')) {
+            setError('Incorrect format. JSON file is required');
+            return;
+        }
+        reader.onload = function () {
+            /**
+             * @type {string}
+             */
+            const text = String(reader.result);
+            let base64text;
+            try {
+                JSON.parse(text);
+                base64text = btoa(text);
+            }
+            catch (e) {
+                setError('Invalid JSON file');
+                console.error(e);
+                return;
+            }
+            onInput
+                && onInput({
+                    encoded: base64text,
+                    raw: JSON.parse(text),
+                });
+            setFile(localFile.name);
+        };
+        try {
+            reader.readAsText(localFile);
+        }
+        catch (e) {
+            setError('Invalid file');
+        }
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs(Button, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref, children: [_jsx(Block, { radius: "round", fill: "#purple.10", color: "#dark-02", padding: ".5x 1x", children: "Choose file" }, void 0), _jsx(Block, { color: "#dark-04", children: file || 'No file selected' }, void 0), _jsx("input", { type: "file", name: "base64", onInput: onInputFile, accept: ".json" }, void 0)] }, void 0), error && _jsx(Text.Danger, { color: "danger", children: error }, void 0)] }, void 0));
+})) `
+  appearance: none;
+  cursor: pointer;
+  outline: none;
+
+  & input {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0;
+    cursor: pointer;
+    width: 100%;
+    height: 100%;
+  }
+
+  && {
+    border: var(--border-width) solid rgba(var(--dark-02-color-rgb), 0.1);
+  }
+
+  &&:not([data-is-hovered]) {
+    background: rgba(var(--purple-color), 0);
+  }
+
+  &&[data-is-hovered] {
+    background: rgba(var(--purple-color), 0.1);
+  }
+`;
+
+        

package/dist/es/components/other/CloudLogo/CloudLogo.js

@@ -0,0 +1,37 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import styled from 'styled-components';
+import { useButton } from '@react-aria/button';
+import { useFocusableRef } from '@react-spectrum/utils';
+import { cubeToAriaButtonProps } from '../../../utils/react/mapProps';
+const Button = styled.button((props) => {
+    return `
+    appearance: none;
+    padding: 0;
+    margin: 0;
+    font-size: inherit;
+    line-height: inherit;
+    width: 159px;
+    height: 26px;
+    border: none;
+    background: none;
+    cursor: ${props.isLink ? 'pointer' : 'default'};
+    outline: none;
+  `;
+});
+function CloudLogo(props, ref) {
+    let domRef = useFocusableRef(ref);
+    let { buttonProps } = useButton(cubeToAriaButtonProps(props), domRef);
+    return (_jsx(Button, { "data-qa": "HeaderCubeCloudLogo", ...buttonProps, isLink: !!props.onPress, ref: domRef, label: "Logo", children: _jsxs("svg", { width: "159", height: "26", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M22.533 6.535L11.27 0v4.522l11.264 6.507V6.535z", fill: "#FF6492" }, void 0), _jsx("path", { d: "M22.533 11.029L19.154 13l-7.887-4.567-4.507 2.6-3.38-1.827 7.889-4.684 11.264 6.507z", fill: "#141446" }, void 0), _jsx("path", { d: "M6.76 11.033L3.38 9.206V13l3.38-1.967z", fill: "#A14474" }, void 0), _jsx("path", { d: "M0 19.465L11.267 13l11.266 6.465L11.267 26 0 19.465z", fill: "#141446" }, void 0), _jsx("path", { d: "M22.533 14.978L11.267 8.362V13l11.266 6.465v-4.487z", fill: "#FF6492" }, void 0), _jsx("path", { d: "M3.38 13V9.205l7.889-4.683V0L0 6.535v12.93L11.267 13V8.362L3.38 13z", fill: "#7A77FF" }, void 0), _jsx("path", { d: "M36.594 21.099c2.446 0 4.36-1.21 5.503-3.067l-1.967-1.534c-.878 1.21-1.967 1.991-3.509 1.991-2.392 0-4.093-1.856-4.093-4.305 0-2.394 1.7-4.278 4.093-4.278 1.568 0 2.658.807 3.509 2.018l1.967-1.56c-1.117-1.857-3.03-3.067-5.503-3.067-3.854 0-6.91 3.013-6.91 6.887 0 3.902 3.056 6.915 6.91 6.915zM50.224 21.099c3.19 0 5.662-2.26 5.662-5.838V7.593h-2.791v7.883c0 1.856-1.276 3.013-2.871 3.013-1.648 0-2.95-1.157-2.95-3.013V7.593h-2.765v7.668c0 3.578 2.472 5.838 5.715 5.838zM66.42 7.297c-1.807 0-3.376.7-4.36 1.91V.624h-2.79v20.18h2.605v-1.83c.983 1.345 2.658 2.125 4.572 2.125 3.694 0 6.38-2.96 6.38-6.888S70.14 7.297 66.42 7.297zm-.452 11.22c-1.94 0-3.934-1.292-3.934-4.306 0-2.986 1.967-4.332 3.934-4.332 2.233 0 3.987 1.75 3.987 4.305 0 2.556-1.727 4.332-3.987 4.332zM87.469 13.35c0-3.47-2.552-6.053-6.034-6.053-3.801 0-6.752 3.04-6.752 6.914 0 3.902 2.977 6.888 7.018 6.888 2.073 0 3.827-.807 5.21-2.125l-1.33-1.938c-1.09.969-2.286 1.56-3.8 1.56-2.234 0-3.882-1.29-4.254-3.47h9.729c.08-.35.213-1.05.213-1.776zm-6.14-3.659c1.78 0 3.296 1.157 3.349 3.229H77.58c.425-1.964 1.913-3.229 3.747-3.229zM101.014 21.099c2.445 0 4.359-1.21 5.502-3.067l-1.967-1.534c-.877 1.21-1.967 1.991-3.508 1.991-2.393 0-4.094-1.856-4.094-4.305 0-2.394 1.701-4.278 4.094-4.278 1.568 0 2.658.807 3.508 2.018l1.967-1.56c-1.116-1.857-3.03-3.067-5.502-3.067-3.854 0-6.911 3.013-6.911 6.887 0 3.902 3.057 6.915 6.911 6.915zM109.062 20.803h2.791V.624h-2.791v20.18zM121.417 21.099c3.881 0 6.938-3.067 6.938-6.915 0-3.847-3.057-6.887-6.938-6.887-3.854 0-6.884 3.013-6.884 6.887 0 3.848 3.03 6.915 6.884 6.915zm0-2.61c-2.312 0-4.04-1.83-4.04-4.278 0-2.475 1.728-4.332 4.067-4.332 2.286 0 4.04 1.857 4.04 4.332 0 2.422-1.754 4.278-4.067 4.278zM136.605 21.099c3.19 0 5.662-2.26 5.662-5.838V7.593h-2.791v7.883c0 1.856-1.276 3.013-2.871 3.013-1.648 0-2.95-1.157-2.95-3.013V7.593h-2.765v7.668c0 3.578 2.472 5.838 5.715 5.838zM155.566.624v8.583c-.984-1.21-2.552-1.91-4.36-1.91-3.694 0-6.379 2.986-6.379 6.914 0 3.928 2.658 6.888 6.379 6.888 1.941 0 3.615-.807 4.572-2.18v1.884h2.605V.624h-2.817zm-3.881 17.892c-2.286 0-4.014-1.776-4.014-4.332s1.754-4.305 4.014-4.305c1.94 0 3.934 1.346 3.934 4.332 0 3.014-1.994 4.305-3.934 4.305z", fill: "#141446" }, void 0)] }, void 0) }, void 0));
+}
+const _CloudLogo = forwardRef(CloudLogo);
+export { _CloudLogo as CloudLogo };
+
+        

package/dist/es/components/overlays/AlertDialog/AlertDialog.js

@@ -0,0 +1,56 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { chain } from '@react-aria/utils';
+import { Button } from '../../actions/Button/Button';
+import { Content } from '../../content/Content';
+import { Dialog } from '../Dialog/Dialog';
+import { DialogContext } from '../Dialog/context';
+import { Title } from '../../content/Title';
+import { forwardRef, useContext } from 'react';
+import { ButtonGroup } from '../../actions/ButtonGroup/ButtonGroup';
+import { Header } from '../../content/Header';
+import { Footer } from '../../content/Footer';
+const DEFAULT_CONFIRM_PROPS = {
+    label: 'Ok',
+    type: 'primary',
+};
+const DEFAULT_CANCEL_PROPS = {
+    label: 'Cancel',
+};
+/**
+ * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
+ */
+function AlertDialog(props, ref) {
+    const { onClose = () => { } } = useContext(DialogContext) ?? {};
+    const { danger, actions, title, styles, noActions, content, ...otherProps } = props;
+    let { confirm: confirmProps, secondary: secondaryProps, cancel: cancelProps, } = actions ?? {};
+    // the confirm button is present by default
+    confirmProps =
+        confirmProps !== false
+            ? {
+                ...DEFAULT_CONFIRM_PROPS,
+                ...(typeof confirmProps === 'object' ? confirmProps : null),
+            }
+            : undefined;
+    // the cancel button is hidden by default
+    cancelProps = cancelProps
+        ? {
+            ...DEFAULT_CANCEL_PROPS,
+            ...(typeof cancelProps === 'object' ? cancelProps : null),
+        }
+        : undefined;
+    return (_jsxs(Dialog, { role: "alertdialog", ref: ref, isDismissable: false, ...otherProps, children: [title ? (_jsx(Header, { children: _jsx(Title, { children: title }, void 0) }, void 0)) : null, _jsx(Content, { children: content }, void 0), !noActions ? (_jsx(Footer, { children: _jsxs(ButtonGroup, { align: "end", children: [_jsx(Button, { theme: danger ? 'danger' : undefined, autoFocus: true, ...confirmProps, onPress: (e) => chain(confirmProps?.onPress?.(e), onClose('confirm')) }, void 0), secondaryProps && (_jsx(Button, { ...secondaryProps, onPress: (e) => chain(secondaryProps?.onPress?.(e), onClose('secondary')) }, void 0)), cancelProps && (_jsx(Button, { ...cancelProps, onPress: (e) => chain(cancelProps?.onPress?.(e), onClose('cancel')) }, void 0))] }, void 0) }, void 0)) : null] }, void 0));
+}
+/**
+ * AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
+ */
+const _AlertDialog = forwardRef(AlertDialog);
+export { _AlertDialog as AlertDialog };
+
+        

package/dist/es/components/overlays/AlertDialog/AlertDialogApiProvider.js

@@ -0,0 +1,106 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, createContext, useMemo, useRef, useState } from 'react';
+import invariant from 'tiny-invariant';
+import { AlertDialogZone } from './AlertDialogZone';
+const DialogApiContext = createContext(null);
+/**
+ * @internal Do not use it in your code!
+ */
+export function AlertDialogApiProvider(props) {
+    const [openedDialog, setOpenedDialog] = useState(null);
+    const id = useRef(0);
+    const api = useMemo(() => ({
+        open: (dialogProps, params = {}) => {
+            const { cancelToken } = params;
+            const currentId = ++id.current;
+            const currentDialog = {
+                props: dialogProps,
+                meta: { id: currentId, isClosed: false, isVisible: true },
+            };
+            const close = () => {
+                if (currentDialog.meta.isClosed)
+                    return;
+                currentDialog.meta.isClosed = true;
+                params.cancelToken?.removeEventListener('abort', close);
+                setOpenedDialog((currentState) => currentState?.meta.id !== currentId
+                    ? currentState
+                    : {
+                        props: currentState.props,
+                        meta: { ...currentState.meta, isVisible: false },
+                    });
+                setTimeout(() => setOpenedDialog((currentState) => currentState?.meta.id !== currentId ? currentState : null), 300);
+            };
+            if (cancelToken?.aborted)
+                return new Promise(() => { });
+            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 (_jsxs(DialogApiContext.Provider, { value: api, children: [_jsx(AlertDialogZone, { openedDialog: openedDialog }, void 0), props.children] }, void 0));
+}
+/**
+ * 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>
+ */
+export function useAlertDialogAPI() {
+    const api = useContext(DialogApiContext);
+    invariant(api !== null, "You can't use DialogApi outside of <Root /> component. Please, check if your component is descendant of <Root/> component");
+    return api;
+}
+
+        

package/dist/es/components/overlays/AlertDialog/AlertDialogZone.js

@@ -0,0 +1,54 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Portal } from '../../portal';
+import { DialogContainer } from '../Dialog';
+import { AlertDialog } from './AlertDialog';
+const PORTAL_KEY = 'AlertDialogZone';
+/**
+ * @internal Do not use it
+ */
+export function AlertDialogZone(props) {
+    const { openedDialog } = props;
+    if (openedDialog === null)
+        return _jsx(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?.(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 (_jsx(Portal, { children: _jsx(DialogContainer, { isOpen: isVisible, isDismissable: isDismissable, type: type, onDismiss: resolve, children: _jsx(AlertDialog, { noActions: dialogType === 'form', actions: _actions, isHidden: !isVisible, content: typeof content === 'function'
+                    ? content({ resolve, reject })
+                    : content, ...options }, void 0) }, void 0) }, PORTAL_KEY));
+}
+
+        

package/dist/es/components/overlays/AlertDialog/index.js

@@ -0,0 +1,12 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+export * from './AlertDialogApiProvider';
+export * from './AlertDialogZone';
+export * from './AlertDialog';
+
+        

package/dist/es/components/overlays/AlertDialog/types.js

@@ -0,0 +1,10 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+export {};
+
+        

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

@@ -0,0 +1,178 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../actions/Button/Button';
+import { useDOMRef } from '@react-spectrum/utils';
+import { DialogContext } from './context';
+import { DismissButton } from '@react-aria/overlays';
+import { FocusScope } from '@react-aria/focus';
+import { forwardRef, useContext } from 'react';
+import { useDialog } from '@react-aria/dialog';
+import { useMessageFormatter } from '@react-aria/i18n';
+import { Base } from '../../Base';
+import { CloseOutlined } from '@ant-design/icons';
+import { extractStyles } from '../../../utils/styles';
+import { BASE_STYLES, BLOCK_STYLES, DIMENSION_STYLES, } from '../../../styles/list';
+import { mergeProps, SlotProvider } from '../../../utils/react';
+import { useContextStyles } from '../../../providers/StylesProvider';
+const STYLES_LIST = [...BASE_STYLES, ...DIMENSION_STYLES, ...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 } = useContext(DialogContext) || {};
+    let { qa, children, size = 'S', isDismissable = contextProps.isDismissable, onDismiss = contextProps.onClose, closeIcon, ...otherProps } = props;
+    size = sizeMap[size.toUpperCase()] || size;
+    const styles = {
+        ...DEFAULT_STYLES,
+        ...useContextStyles('Dialog', props),
+        ...extractStyles(otherProps, STYLES_LIST),
+        '@dialog-size': `${sizePxMap[size] || 288}px`,
+    };
+    let formatMessage = useMessageFormatter(intlMessages);
+    let domRef = useDOMRef(ref);
+    let { dialogProps, titleProps } = useDialog(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 = _jsx(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 (_jsx(FocusScope, { contain: true, restoreFocus: true, children: _jsxs(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, _jsxs(SlotProvider, { slots: slots, children: [isDismissable && (_jsx(Button, { qa: "ModalCloseButton", type: "neutral", styles: CLOSE_BUTTON_STYLES, icon: closeIcon || _jsx(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 = forwardRef(Dialog);
+export { _Dialog as Dialog };
+
+        

package/dist/es/components/overlays/Dialog/DialogContainer.js

@@ -0,0 +1,38 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DialogContext } from './context';
+import { Modal } from '../Modal/Modal';
+import { Children, useRef, isValidElement, } from '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.
+ */
+export function DialogContainer(props) {
+    const { children, type = 'modal', onDismiss, isDismissable, isKeyboardDismissDisabled, isOpen, } = props;
+    const childArray = Children.toArray(children);
+    if (childArray.length > 1) {
+        throw new Error('Only a single child can be passed to DialogContainer.');
+    }
+    const lastChild = useRef();
+    const child = 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 (_jsx(Modal, { isOpen: isActuallyOpened, onClose: isDismissable ? onDismiss : undefined, type: type, isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, children: _jsx(DialogContext.Provider, { value: context, children: child }, void 0) }, void 0));
+}
+
+        

package/dist/es/components/overlays/Dialog/DialogForm.js

@@ -0,0 +1,53 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, forwardRef, useImperativeHandle } from 'react';
+import { DialogContainer } from './DialogContainer';
+import { Dialog } from './Dialog';
+import { Title } from '../../content/Title';
+import { Form } from '../../forms/Form/Form';
+import { useForm } from '../../forms/Form/useForm';
+import { Content } from '../../content/Content';
+import { Submit } from '../../actions/Button/Submit';
+import { Button } from '../../actions/Button/Button';
+import { ButtonGroup } from '../../actions/ButtonGroup/ButtonGroup';
+import { Header } from '../../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] = useForm(form);
+    const [open, setOpen] = useState(false);
+    useImperativeHandle(ref, () => ({
+        open() {
+            setOpen(true);
+        },
+        close() {
+            setOpen(false);
+        },
+    }));
+    function onLocalDismiss() {
+        onDismiss?.();
+        form?.resetFields();
+        setOpen(false);
+    }
+    return (_jsx(DialogContainer, { onDismiss: onLocalDismiss, isDismissable: true, children: open && (_jsxs(Dialog, { qa: `${qa || ''}Dialog`, size: size, closeIcon: closeIcon, children: [_jsx(Header, { children: _jsx(Title, { children: title }, void 0) }, void 0), _jsx(Content, { children: _jsxs(Form, { qa: qa || 'DialogForm', form: form, name: name, onSubmit: async (data) => {
+                            await 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 ? (_jsxs(ButtonGroup, { children: [_jsx(Submit, { qa: `${qa || ''}SubmitButton`, theme: danger ? 'danger' : undefined, label: "Submit", ...(submitProps || {}) }, void 0), _jsx(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 = forwardRef(DialogForm);
+export { _DialogForm as DialogForm };
+
+