@cube-dev/ui-kit 0.46.0 → 0.46.2

package/cjs/components/form/wrapper.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/cjs/components/layout/Flex.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/cjs/components/layout/Flow.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/cjs/components/layout/Grid.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/cjs/components/layout/Panel.js

@@ -1,19 +1,16 @@
 /**
  * @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.
  */
 
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Panel = exports.PanelContext = void 0;
+exports.Panel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const tasty_1 = require("../../tasty");
-exports.PanelContext = (0, react_1.createContext)({
-    layout: 'grid',
-});
 const PanelElement = (0, tasty_1.tasty)({
     as: 'section',
     qa: 'Panel',
@@ -103,9 +100,7 @@ function Panel(props, ref) {
         flex: isFlex,
         ...mods,
     }), [isStretched, isCard, mods]);
-    return ((0, jsx_runtime_1.jsx)(exports.PanelContext.Provider, { value: {
-            layout: isFlex ? 'flex' : 'grid',
-        }, children: (0, jsx_runtime_1.jsxs)(PanelElement, { ref: ref, qa: qa, mods: appliedMods, styles: styles, style: style, ...otherProps, children: [(0, jsx_runtime_1.jsx)(PanelInnerElement, { mods: appliedMods, styles: innerStyles, children: children }), extra] }) }));
+    return ((0, jsx_runtime_1.jsxs)(PanelElement, { ref: ref, qa: qa, mods: appliedMods, styles: styles, style: style, ...otherProps, children: [(0, jsx_runtime_1.jsx)(PanelInnerElement, { mods: appliedMods, styles: innerStyles, children: children }), extra] }));
 }
 const _Panel = (0, react_1.forwardRef)(Panel);
 exports.Panel = _Panel;

package/cjs/components/layout/Prefix.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/cjs/components/layout/ResizablePanel.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.
  */
 
@@ -11,40 +11,45 @@ exports.ResizablePanel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
-const index_1 = require("../../_internal/index");
-const index_2 = require("../../tasty/index");
-const index_3 = require("../../utils/react/index");
+const index_1 = require("../../tasty/index");
+const index_2 = require("../../utils/react/index");
 const Panel_1 = require("./Panel");
-const HandlerElement = (0, index_2.tasty)({
+const HandlerElement = (0, index_1.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,
@@ -59,19 +64,26 @@ const HandlerElement = (0, index_2.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',
@@ -80,6 +92,10 @@ const HandlerElement = (0, index_2.tasty)({
             transition: 'theme',
         },
         Drag: {
+            hide: {
+                '': false,
+                disabled: true,
+            },
             width: {
                 '': '3x',
                 horizontal: '3px',
@@ -107,7 +123,7 @@ const Handler = (props) => {
     const { direction = 'right', isDisabled } = props;
     const { hoverProps, isHovered } = (0, react_aria_1.useHover)({});
     const isHorizontal = direction === 'left' || direction === 'right';
-    return ((0, jsx_runtime_1.jsxs)(HandlerElement, { ...(0, index_3.mergeProps)(hoverProps, {
+    return ((0, jsx_runtime_1.jsxs)(HandlerElement, { ...(0, index_2.mergeProps)(hoverProps, {
             mods: {
                 hovered: isHovered,
                 horizontal: isHorizontal,
@@ -116,7 +132,7 @@ const Handler = (props) => {
             'data-direction': direction,
         }, props), children: [(0, jsx_runtime_1.jsx)("div", { "data-element": "Track" }), (0, jsx_runtime_1.jsx)("div", { "data-element": "Drag" })] }));
 };
-const PanelElement = (0, index_2.tasty)(Panel_1.Panel, {
+const PanelElement = (0, index_1.tasty)(Panel_1.Panel, {
     styles: {
         flexGrow: 0,
         width: {
@@ -129,22 +145,18 @@ const PanelElement = (0, index_2.tasty)(Panel_1.Panel, {
         },
         placeSelf: 'stretch',
         touchAction: 'none',
+        '--indent-compensation': {
+            '': '5px',
+            disabled: '1bw',
+        },
     },
 });
 function ResizablePanel(props, ref) {
-    const panelContext = (0, react_1.useContext)(Panel_1.PanelContext);
-    (0, index_1.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] = (0, react_1.useState)(false);
     const isHorizontal = direction === 'left' || direction === 'right';
-    ref = (0, index_3.useCombinedRefs)(ref);
+    ref = (0, index_2.useCombinedRefs)(ref);
     function clamp(size) {
         if (typeof maxSize === 'number') {
             size = Math.min(maxSize, size);
@@ -155,6 +167,19 @@ function ResizablePanel(props, ref) {
         return Math.max(size, 0);
     }
     let [size, setSize] = (0, react_1.useState)(providedSize != null ? clamp(providedSize) : 200);
+    let [visualSize, setVisualSize] = (0, react_1.useState)(null);
+    (0, react_1.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 } = (0, react_aria_1.useMove)({
         onMoveStart(e) {
             if (isDisabled) {
@@ -162,8 +187,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) {
@@ -182,28 +207,38 @@ function ResizablePanel(props, ref) {
         },
         onMoveEnd(e) {
             setIsDragging(false);
+            setSize((size) => clamp(Math.round(size)));
         },
     });
     (0, react_1.useEffect)(() => {
-        onSizeChange?.(size);
+        if (providedSize == null || Math.abs(providedSize - size) > 0.5) {
+            onSizeChange?.(Math.round(size));
+        }
     }, [size]);
     (0, react_1.useEffect)(() => {
-        if (providedSize) {
-            setSize(providedSize);
+        if (providedSize && Math.abs(providedSize - size) > 0.5) {
+            setSize(clamp(providedSize));
         }
     }, [providedSize]);
-    return ((0, jsx_runtime_1.jsx)(PanelElement, { ref: ref, "data-direction": direction, extra: (0, jsx_runtime_1.jsx)(Handler, { isDisabled: isDisabled, direction: direction, ...moveProps, mods: {
-                drag: isDragging,
-                horizontal: isHorizontal,
-                disabled: isDisabled,
-            } }), ...(0, index_3.mergeProps)(props, {
+    const mods = (0, react_1.useMemo)(() => {
+        return {
+            drag: isDragging,
+            horizontal: isHorizontal,
+            disabled: isDisabled,
+        };
+    }, [isDragging, isHorizontal, isDisabled]);
+    return ((0, jsx_runtime_1.jsx)(PanelElement, { ref: ref, "data-direction": direction, mods: mods, extra: (0, jsx_runtime_1.jsx)(Handler, { isDisabled: isDisabled || visualSize == null, direction: direction, ...moveProps, mods: mods }), ...(0, index_2.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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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.
  */