@cube-dev/ui-kit 0.12.6 → 0.13.0

package/cjs/components/forms/Switch/Switch.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/forms/TextArea/TextArea.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/forms/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/forms/TextInput/TextInputBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -155,19 +155,19 @@ function TextInputBase(props, ref) {
     (0, react_1.useImperativeHandle)(ref, () => ({
         ...(0, utils_1.createFocusableRef)(domRef, inputRef),
         select() {
-            if (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) {
+            if (inputRef?.current) {
                 inputRef.current.select();
             }
         },
         getInputElement() {
-            return inputRef === null || inputRef === void 0 ? void 0 : inputRef.current;
+            return inputRef?.current;
         },
     }));
     let isInvalid = validationState === 'invalid';
     let validationIcon = isInvalid ? ((0, jsx_runtime_1.jsx)(icons_1.WarningOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--danger-color)' } }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, { "data-element": "ValidationIcon", style: { color: 'var(--success-color)' } }, void 0));
     let validation = (0, react_1.cloneElement)(validationIcon);
     // Fix safari bug: https://github.com/philipwalton/flexbugs/issues/270
-    if (!(inputProps === null || inputProps === void 0 ? void 0 : inputProps.placeholder)) {
+    if (!inputProps?.placeholder) {
         if (!inputProps) {
             inputProps = {};
         }

package/cjs/components/forms/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/layout/Flex.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/layout/Flow.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/layout/Grid.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/layout/Prefix.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -33,7 +33,7 @@ exports.Prefix = (0, react_1.forwardRef)(function Prefix(allProps, outerRef) {
     const styles = (0, tasty_1.extractStyles)(props, tasty_1.CONTAINER_STYLES);
     const ref = (0, react_2.useCombinedRefs)(outerRef);
     (0, react_2.useLayoutEffect)(() => {
-        if ((ref === null || ref === void 0 ? void 0 : ref.current) && onWidthChange) {
+        if (ref?.current && onWidthChange) {
             onWidthChange(ref.current.offsetWidth);
         }
     }, [children, ref, onWidthChange]);

package/cjs/components/layout/Space.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/layout/Suffix.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/navigation/LegacyTabs/LegacyTabs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/navigation/Link/Link.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/organisms/FileTabs/FileTabs.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/organisms/Modal/Modal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/organisms/StatsCard/StatsCard.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/other/Base64Upload/Base64Upload.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/other/CloudLogo/CloudLogo.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -32,7 +32,7 @@ const DEFAULT_CANCEL_PROPS = {
 function AlertDialog(props, ref) {
     const { onClose } = (0, context_1.useDialogContext)();
     const { danger, actions, title, styles, noActions, content, ...otherProps } = props;
-    let { confirm: confirmProps, secondary: secondaryProps, cancel: cancelProps, } = actions !== null && actions !== void 0 ? actions : {};
+    let { confirm: confirmProps, secondary: secondaryProps, cancel: cancelProps, } = actions ?? {};
     // the confirm button is present by default
     confirmProps =
         confirmProps !== false
@@ -48,13 +48,7 @@ function AlertDialog(props, ref) {
             ...(typeof cancelProps === 'object' ? cancelProps : null),
         }
         : undefined;
-    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ref: ref, role: "alertdialog", isDismissable: false, ...otherProps, children: [title ? ((0, jsx_runtime_1.jsx)(Header_1.Header, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { children: title }, void 0) }, void 0)) : null, content ? ((0, jsx_runtime_1.jsx)(Content_1.Content, { children: typeof content === 'string' ? ((0, jsx_runtime_1.jsx)(Paragraph_1.Paragraph, { children: content }, void 0)) : (content) }, void 0)) : null, !noActions ? ((0, jsx_runtime_1.jsx)(Footer_1.Footer, { children: (0, jsx_runtime_1.jsxs)(actions_1.ButtonGroup, { align: "end", children: [(0, jsx_runtime_1.jsx)(actions_1.Button, { autoFocus: true, theme: danger ? 'danger' : undefined, ...confirmProps, onPress: (e) => {
-                                var _a, _b;
-                                return (0, react_2.chain)((_b = (_a = confirmProps) === null || _a === void 0 ? void 0 : _a.onPress) === null || _b === void 0 ? void 0 : _b.call(_a, e), onClose === null || onClose === void 0 ? void 0 : onClose('confirm'));
-                            } }, void 0), secondaryProps && ((0, jsx_runtime_1.jsx)(actions_1.Button, { ...secondaryProps, onPress: (e) => { var _a; return (0, react_2.chain)((_a = secondaryProps === null || secondaryProps === void 0 ? void 0 : secondaryProps.onPress) === null || _a === void 0 ? void 0 : _a.call(secondaryProps, e), onClose === null || onClose === void 0 ? void 0 : onClose('secondary')); } }, void 0)), cancelProps && ((0, jsx_runtime_1.jsx)(actions_1.Button, { ...cancelProps, onPress: (e) => {
-                                var _a, _b;
-                                return (0, react_2.chain)((_b = (_a = cancelProps) === null || _a === void 0 ? void 0 : _a.onPress) === null || _b === void 0 ? void 0 : _b.call(_a, e), onClose === null || onClose === void 0 ? void 0 : onClose('cancel'));
-                            } }, void 0))] }, void 0) }, void 0)) : null] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ref: ref, role: "alertdialog", isDismissable: false, ...otherProps, children: [title ? ((0, jsx_runtime_1.jsx)(Header_1.Header, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { children: title }, void 0) }, void 0)) : null, content ? ((0, jsx_runtime_1.jsx)(Content_1.Content, { children: typeof content === 'string' ? ((0, jsx_runtime_1.jsx)(Paragraph_1.Paragraph, { children: content }, void 0)) : (content) }, void 0)) : null, !noActions ? ((0, jsx_runtime_1.jsx)(Footer_1.Footer, { children: (0, jsx_runtime_1.jsxs)(actions_1.ButtonGroup, { align: "end", children: [(0, jsx_runtime_1.jsx)(actions_1.Button, { autoFocus: true, theme: danger ? 'danger' : undefined, ...confirmProps, onPress: (e) => (0, react_2.chain)(confirmProps?.onPress?.(e), onClose?.('confirm')) }, void 0), secondaryProps && ((0, jsx_runtime_1.jsx)(actions_1.Button, { ...secondaryProps, onPress: (e) => (0, react_2.chain)(secondaryProps?.onPress?.(e), onClose?.('secondary')) }, void 0)), cancelProps && ((0, jsx_runtime_1.jsx)(actions_1.Button, { ...cancelProps, onPress: (e) => (0, react_2.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.

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -31,22 +31,21 @@ function AlertDialogApiProvider(props) {
                 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
+                params.cancelToken?.removeEventListener('abort', close);
+                setOpenedDialog((currentState) => 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);
+                setTimeout(() => setOpenedDialog((currentState) => currentState?.meta.id !== currentId ? currentState : null), 300);
             };
-            if (cancelToken === null || cancelToken === void 0 ? void 0 : cancelToken.aborted)
+            if (cancelToken?.aborted)
                 return new Promise(() => { });
-            cancelToken === null || cancelToken === void 0 ? void 0 : cancelToken.addEventListener('abort', close, { once: true });
+            cancelToken?.addEventListener('abort', close, { once: true });
             currentDialog.meta.promise = new Promise((resolve, reject) => {
                 currentDialog.meta.resolve = (status) => {
                     close();

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -36,7 +36,7 @@ function AlertDialogZone(props) {
             return {
                 ...action,
                 onPress: (e) => {
-                    onPress === null || onPress === void 0 ? void 0 : onPress(e);
+                    onPress?.(e);
                     resolve(status);
                 },
             };

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -27,17 +27,17 @@ function DialogForm(props) {
     [form] = (0, forms_1.useForm)(form);
     const { onClose } = (0, context_1.useDialogContext)();
     function onLocalDismiss() {
-        onClose === null || onClose === void 0 ? void 0 : onClose();
-        onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+        onClose?.();
+        onDismiss?.();
         if (!preserve) {
-            form === null || form === void 0 ? void 0 : form.resetFields();
+            form?.resetFields();
         }
     }
     return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { qa: `${qa || ''}Dialog`, size: size, closeIcon: closeIcon, ...dialogProps, 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, defaultValues: defaultValues, labelStyles: labelStyles, labelPosition: labelPosition, requiredMark: requiredMark, isRequired: isRequired, necessityIndicator: necessityIndicator, necessityLabel: necessityLabel, isReadOnly: isReadOnly, validationState: validationState, validateTrigger: validateTrigger, onSubmit: async (data) => {
-                        await (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(data));
-                        onClose === null || onClose === void 0 ? void 0 : onClose();
+                        await onSubmit?.(data);
+                        onClose?.();
                         if (!preserve) {
-                            form === null || form === void 0 ? void 0 : form.resetFields();
+                            form?.resetFields();
                         }
                     }, onSubmitFailed: onSubmitFailed, onValuesChange: onValuesChange, children: [typeof children === 'function' ? children(onLocalDismiss) : children, !noActions ? ((0, jsx_runtime_1.jsxs)(actions_2.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`, label: "Cancel", onPress: onLocalDismiss, ...(cancelProps || {}) }, void 0)] }, void 0)) : undefined] }, void 0) }, void 0)] }, void 0));
 }

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/Modal/Modal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -10,7 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Modal = exports.OVERLAY_WRAPPER_STYLES = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("@react-spectrum/utils");
-const utils_2 = require("@react-aria/utils");
 const react_1 = require("react");
 const overlays_1 = require("@react-aria/overlays");
 const tasty_1 = require("../../../tasty");
@@ -29,7 +28,7 @@ exports.OVERLAY_WRAPPER_STYLES = {
     },
     boxSizing: 'border-box',
     width: '100vw',
-    height: '@cube-visual-viewport-height',
+    height: '100dvh',
     pointerEvents: 'none',
     zIndex: 2,
     transition: 'visibility 0ms linear .13s',
@@ -43,10 +42,10 @@ const ModalElement = (0, tasty_1.tasty)({
         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',
+            '': 'max 90dvh',
+            '[data-type="fullscreenTakeover"] | [data-type="panel"]': '100dvh 100dvh',
+            '[data-type="fullscreen"]': '90dvh 90dvh',
+            '[data-type="fullscreenTakeover"]': '100dvh 100dvh',
         },
         width: {
             width: '288px 90vw',
@@ -74,11 +73,7 @@ let ModalWrapper = (0, react_1.forwardRef)(function ModalWrapper(props, ref) {
     let { qa, children, isOpen, type, placement, styles, overlayProps, ...otherProps } = props;
     (0, overlays_1.usePreventScroll)();
     let { modalProps } = (0, overlays_1.useModal)();
-    let viewport = (0, utils_2.useViewportSize)();
-    let style = {
-        '--cube-visual-viewport-height': viewport.height + 'px',
-    };
-    return ((0, jsx_runtime_1.jsx)(ModalWrapperElement, { mods: { open: isOpen }, "data-type": type, "data-placement": placement, style: style, children: (0, jsx_runtime_1.jsx)(ModalElement, { qa: qa || 'Modal', styles: styles, mods: { open: isOpen }, "data-type": type, "data-placement": placement, ...(0, react_2.mergeProps)(otherProps, overlayProps, modalProps), ref: ref, children: children }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(ModalWrapperElement, { mods: { open: isOpen }, "data-type": type, "data-placement": placement, children: (0, jsx_runtime_1.jsx)(ModalElement, { qa: qa || 'Modal', styles: styles, mods: { open: isOpen }, "data-type": type, "data-placement": placement, ...(0, react_2.mergeProps)(otherProps, overlayProps, modalProps), ref: ref, children: children }, void 0) }, void 0));
 });
 let _Modal = (0, react_1.forwardRef)(Modal);
 exports.Modal = _Modal;

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -19,11 +19,11 @@ function Overlay(props, ref) {
     let { root } = (0, provider_1.useProviderProps)({});
     let handleEntered = (0, react_1.useCallback)(() => {
         setExited(false);
-        onEntered === null || onEntered === void 0 ? void 0 : onEntered();
+        onEntered?.();
     }, [onEntered]);
     let handleExited = (0, react_1.useCallback)(() => {
         setExited(true);
-        onExited === null || onExited === void 0 ? void 0 : onExited();
+        onExited?.();
     }, [onExited]);
     // Don't un-render the overlay while it's transitioning out.
     let mountOverlay = isOpen || !exited;

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -10,7 +10,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tray = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const utils_1 = require("@react-spectrum/utils");
-const utils_2 = require("@react-aria/utils");
 const react_1 = require("react");
 const overlays_1 = require("@react-aria/overlays");
 const tasty_1 = require("../../../tasty");
@@ -29,7 +28,7 @@ const TrayWrapperElement = (0, tasty_1.tasty)({
 const TrayElement = (0, tasty_1.tasty)({
     styles: {
         zIndex: 2,
-        height: 'max (@cube-visual-viewport-height * .9)',
+        height: 'max 90dvh',
         width: '288px 90vw',
         pointerEvents: 'auto',
         transition: 'transform .25s ease-in-out, opacity .25s linear, visibility 0ms linear',
@@ -51,40 +50,10 @@ let TrayWrapper = (0, react_1.forwardRef)(function TrayWrapper(props, ref) {
     let { modalProps } = (0, overlays_1.useModal)({
         isDisabled: isNonModal,
     });
-    // 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 = (0, utils_2.useViewportSize)();
-    let [height, setHeight] = (0, react_1.useState)(viewport.height);
-    let timeoutRef = (0, react_1.useRef)();
-    (0, react_1.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 = (0, react_2.mergeProps)(otherProps, overlayProps);
     return ((0, jsx_runtime_1.jsx)(TrayWrapperElement, { mods: {
             open: isOpen,
-        }, style: wrapperStyle, children: (0, jsx_runtime_1.jsx)(TrayElement, { qa: qa || 'Tray', styles: styles, mods: {
+        }, children: (0, jsx_runtime_1.jsx)(TrayElement, { qa: qa || 'Tray', styles: styles, mods: {
                 open: isOpen,
                 'fixed-height': isFixedHeight,
             }, ...domProps, ...modalProps, ref: ref, children: children }, void 0) }, void 0));

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/NewNotifications/Bar/FloatingNotification.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.12.6
+ * @cube-dev/ui-kit v0.13.0
  * Released under the MIT license.
  */
 
@@ -15,8 +15,16 @@ const tasty_1 = require("../../../../tasty");
 const NotificationView_1 = require("../NotificationView");
 const hooks_1 = require("../hooks");
 const NotificationContainer = (0, tasty_1.tasty)({
-    styles: { boxShadow: '0 0.5x 2x #shadow', pointerEvents: 'auto' },
+    styles: {
+        overflow: 'hidden',
+        radius: '0.5x',
+        boxShadow: '0 0.5x 2x #shadow',
+        pointerEvents: 'auto',
+    },
 });
+/**
+ * @internal This component is unstable and must not be used outside of `NotificationsBar`.
+ */
 exports.FloatingNotification = (0, react_1.memo)(function FloatingNotification(props) {
     const { item, state, onRemoveNotification, id, isDisabledTimer, onDismissNotification, } = props;
     const { props: notificationProps, key } = item;