@cube-dev/ui-kit 0.46.0 → 0.46.2

package/es/components/layout/ResizablePanel.js

@@ -1,47 +1,52 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.46.0
+ * @cube-dev/ui-kit v0.46.2
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useContext, useEffect, useState, } from 'react';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
 import { useHover, useMove } from 'react-aria';
-import { useWarn } from '../../_internal/index';
 import { tasty } from '../../tasty/index';
 import { mergeProps, useCombinedRefs } from '../../utils/react/index';
-import { Panel, PanelContext } from './Panel';
+import { Panel } from './Panel';
 const HandlerElement = tasty({
+    qa: 'ResizeHandler',
     styles: {
         // The real size is slightly bigger than the visual one.
         width: {
-            '': 'auto',
+            '': 'initial',
             horizontal: '9px',
+            'disabled & horizontal': '1bw',
         },
         height: {
             '': '9px',
-            horizontal: 'auto',
+            horizontal: 'initial',
+            'disabled & !horizontal': '1bw',
         },
         top: {
-            '': 'initial',
-            horizontal: 0,
-            '[data-direction="top"]': -2,
+            '': 0,
+            '[data-direction="top"]': 'initial',
         },
         bottom: {
-            '': 'initial',
-            horizontal: 0,
-            '[data-direction="bottom"]': -2,
+            '': 0,
+            '[data-direction="bottom"]': 'initial',
         },
         right: {
             '': 0,
-            horizontal: 'initial',
-            '[data-direction="right"]': -2,
+            '[data-direction="right"]': 'initial',
         },
         left: {
             '': 0,
-            horizontal: 'initial',
-            '[data-direction="left"]': -2,
+            '[data-direction="left"]': 'initial',
+        },
+        // Transform requires a separate visual size property to respect size boundaries
+        transform: {
+            '[data-direction="top"]': 'translate(0, (@size-compensation - @visual-size))',
+            '[data-direction="right"]': 'translate((@visual-size - @size-compensation), 0)',
+            '[data-direction="bottom"]': 'translate(0, (@visual-size - @size-compensation))',
+            '[data-direction="left"]': 'translate((@size-compensation - @visual-size), 0)',
         },
         position: 'absolute',
         zIndex: 1,
@@ -56,19 +61,26 @@ const HandlerElement = tasty({
         padding: 0,
         boxSizing: 'border-box',
         transition: 'theme',
+        '--size-compensation': {
+            '': '7px',
+            disabled: '1bw',
+        },
         Track: {
             width: {
                 '': 'initial',
                 horizontal: '5px',
+                'disabled & horizontal': '1px',
             },
             height: {
                 '': '5px',
                 horizontal: 'initial',
+                'disabled & !horizontal': '1px',
             },
             position: 'absolute',
             inset: {
                 '': '2px 0',
                 horizontal: '0 2px',
+                disabled: '0 0',
             },
             fill: {
                 '': '#border-opaque',
@@ -77,6 +89,10 @@ const HandlerElement = tasty({
             transition: 'theme',
         },
         Drag: {
+            hide: {
+                '': false,
+                disabled: true,
+            },
             width: {
                 '': '3x',
                 horizontal: '3px',
@@ -126,19 +142,15 @@ const PanelElement = tasty(Panel, {
         },
         placeSelf: 'stretch',
         touchAction: 'none',
+        '--indent-compensation': {
+            '': '5px',
+            disabled: '1bw',
+        },
     },
 });
 function ResizablePanel(props, ref) {
-    const panelContext = useContext(PanelContext);
-    useWarn(panelContext.layout !== 'flex', {
-        once: true,
-        key: 'resizable panel layout requirement',
-        args: [
-            'ResizablePanel can only be used inside a flex layout. Use Panel with `isFlex` property to create one.',
-        ],
-    });
     const isControllable = typeof props.size === 'number';
-    const { isDisabled, direction = 'right', size: providedSize, onSizeChange, minSize = 200, maxSize = isControllable ? undefined : 400, } = props;
+    const { isDisabled, direction = 'right', size: providedSize, onSizeChange, minSize = 200, maxSize = isControllable ? undefined : 'min(50%, 400px)', } = props;
     const [isDragging, setIsDragging] = useState(false);
     const isHorizontal = direction === 'left' || direction === 'right';
     ref = useCombinedRefs(ref);
@@ -152,6 +164,19 @@ function ResizablePanel(props, ref) {
         return Math.max(size, 0);
     }
     let [size, setSize] = useState(providedSize != null ? clamp(providedSize) : 200);
+    let [visualSize, setVisualSize] = useState(null);
+    useEffect(() => {
+        if (ref.current) {
+            const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';
+            const containerSize = ref.current[offsetProp];
+            if (Math.abs(containerSize - size) < 1 && !isDisabled) {
+                setVisualSize(size);
+            }
+            else {
+                setVisualSize(containerSize);
+            }
+        }
+    }, [size, isDisabled]);
     let { moveProps } = useMove({
         onMoveStart(e) {
             if (isDisabled) {
@@ -159,8 +184,8 @@ function ResizablePanel(props, ref) {
             }
             setIsDragging(true);
             const offsetProp = isHorizontal ? 'offsetWidth' : 'offsetHeight';
-            if (ref.current && Math.abs(ref.current[offsetProp] - size) > 1) {
-                setSize(ref.current[offsetProp]);
+            if (ref.current && Math.abs(ref.current[offsetProp] - size) >= 1) {
+                setSize(Math.round(ref.current[offsetProp]));
             }
         },
         onMove(e) {
@@ -179,28 +204,38 @@ function ResizablePanel(props, ref) {
         },
         onMoveEnd(e) {
             setIsDragging(false);
+            setSize((size) => clamp(Math.round(size)));
         },
     });
     useEffect(() => {
-        onSizeChange?.(size);
+        if (providedSize == null || Math.abs(providedSize - size) > 0.5) {
+            onSizeChange?.(Math.round(size));
+        }
     }, [size]);
     useEffect(() => {
-        if (providedSize) {
-            setSize(providedSize);
+        if (providedSize && Math.abs(providedSize - size) > 0.5) {
+            setSize(clamp(providedSize));
         }
     }, [providedSize]);
-    return (_jsx(PanelElement, { ref: ref, "data-direction": direction, extra: _jsx(Handler, { isDisabled: isDisabled, direction: direction, ...moveProps, mods: {
-                drag: isDragging,
-                horizontal: isHorizontal,
-                disabled: isDisabled,
-            } }), ...mergeProps(props, {
+    const mods = useMemo(() => {
+        return {
+            drag: isDragging,
+            horizontal: isHorizontal,
+            disabled: isDisabled,
+        };
+    }, [isDragging, isHorizontal, isDisabled]);
+    return (_jsx(PanelElement, { ref: ref, "data-direction": direction, mods: mods, extra: _jsx(Handler, { isDisabled: isDisabled || visualSize == null, direction: direction, ...moveProps, mods: mods }), ...mergeProps(props, {
             style: {
+                // We set a current size further via width/min-width/max-width styles to respect size boundaries
                 '--size': `${size}px`,
+                // We use a separate visual size to paint the handler for smoother experience
+                '--visual-size': `${visualSize}px`,
                 '--min-size': typeof minSize === 'number' ? `${minSize}px` : minSize,
                 '--max-size': typeof maxSize === 'number' ? `${maxSize}px` : maxSize,
             },
             innerStyles: {
-                margin: `5px ${direction}`,
+                // The panel inner space compensation for the handler
+                margin: `@indent-compensation ${direction}`,
             },
         }) }));
 }

package/es/components/layout/Space.js

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

package/es/components/layout/Suffix.js

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

package/es/components/navigation/LegacyTabs/LegacyTabs.js

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

package/es/components/navigation/Link/Link.js

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

package/es/components/organisms/FileTabs/FileTabs.js

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

package/es/components/organisms/Modal/Modal.js

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

package/es/components/organisms/StatsCard/StatsCard.js

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

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

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

package/es/components/other/Calendar/Calendar.js

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

package/es/components/other/Calendar/CalendarCell.js

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

package/es/components/other/Calendar/CalendarGrid.js

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

package/es/components/other/Calendar/RangeCalendar.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/es/components/overlays/NewNotifications/Bar/NotificationsBar.js

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

package/es/components/overlays/NewNotifications/Bar/TransitionComponent.js

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

package/es/components/overlays/NewNotifications/Bar/index.js

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

package/es/components/overlays/NewNotifications/Dialog/NotificationsDialogTrigger.js

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

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

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

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

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

package/es/components/overlays/NewNotifications/NotificationView/NotificationAction.js

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

package/es/components/overlays/NewNotifications/NotificationView/NotificationCloseButton.js

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

package/es/components/overlays/NewNotifications/NotificationView/NotificationDescription.js

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

package/es/components/overlays/NewNotifications/NotificationView/NotificationFooter.js

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

package/es/components/overlays/NewNotifications/NotificationView/NotificationHeader.js

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