@cube-dev/ui-kit 0.62.0 → 0.62.2

package/es/components/pickers/Menu/Menu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.62.0
+ * @cube-dev/ui-kit v0.62.2
  * Released under the MIT license.
  */
 
@@ -13,19 +13,50 @@ import { useMenu } from 'react-aria';
 import { Item as BaseItem, Section as BaseSection, useTreeState, } from 'react-stately';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
+import { Divider as BaseDivider } from '../../content/Divider';
 import { useMenuContext } from './context';
 import { MenuItem } from './MenuItem';
 import { MenuSection } from './MenuSection';
-import { StyledMenu, StyledMenuHeader } from './styled';
+import { StyledDivider, StyledMenu, StyledMenuHeader } from './styled';
 function Menu(props, ref) {
     const { header, footer, itemStyles, sectionStyles, sectionHeadingStyles, selectionIcon, qa, ...rest } = props;
     const domRef = useDOMRef(ref);
     const contextProps = useMenuContext();
     const completeProps = mergeProps(contextProps, rest);
-    const state = useTreeState(completeProps);
-    const items = [...state.collection];
-    const hasSections = items.some((item) => item.type === 'section');
-    const { menuProps } = useMenu(completeProps, state, domRef);
+    // Check if children is a function (dynamic collection)
+    const isDynamicCollection = typeof completeProps.children === 'function';
+    // For dynamic collections, pass children directly to useTreeState
+    // For static collections, filter out Dividers and normalize keys
+    const treeProps = isDynamicCollection
+        ? completeProps
+        : (() => {
+            // Filter out Divider elements for collection creation.
+            const filteredChildren = React.Children.toArray(completeProps.children).filter((child) => !(React.isValidElement(child) &&
+                // @ts-ignore
+                child.type === BaseDivider));
+            // React may prefix keys with '.$' when accessing them via Children.toArray.
+            // Strip that prefix so selection/disabled logic receives the original keys.
+            const normalizedChildren = filteredChildren.map((child) => {
+                if (React.isValidElement(child) &&
+                    child.key &&
+                    typeof child.key === 'string') {
+                    const cleanKey = child.key.replace(/^\.\$/, '');
+                    // Only clone if the key actually changed to avoid unnecessary work.
+                    return cleanKey !== child.key
+                        ? React.cloneElement(child, { key: cleanKey })
+                        : child;
+                }
+                return child;
+            });
+            return {
+                ...completeProps,
+                children: normalizedChildren,
+            };
+        })();
+    const state = useTreeState(treeProps);
+    const collectionItems = [...state.collection];
+    const hasSections = collectionItems.some((item) => item.type === 'section');
+    const { menuProps } = useMenu(treeProps, state, domRef);
     const styles = extractStyles(completeProps, CONTAINER_STYLES);
     const defaultProps = {
         qa,
@@ -37,18 +68,53 @@ function Menu(props, ref) {
         },
     };
     useSyncRef(contextProps, domRef);
-    return (_jsxs(StyledMenu, { ...mergeProps(defaultProps, menuProps, filterBaseProps(completeProps)), ref: domRef, children: [header && _jsx(StyledMenuHeader, { children: header }), items.map((item) => {
-                if (item.type === 'section') {
-                    return (_jsx(MenuSection, { item: item, state: state, styles: sectionStyles, itemStyles: itemStyles, headingStyles: sectionHeadingStyles, selectionIcon: selectionIcon }, item.key));
-                }
-                let menuItem = (_jsx(MenuItem, { item: item, state: state, styles: itemStyles, selectionIcon: selectionIcon, onAction: item.onAction }, item.key));
-                if (item.props.wrapper) {
-                    menuItem = item.props.wrapper(menuItem);
+    return (_jsxs(StyledMenu, { ...mergeProps(defaultProps, menuProps, filterBaseProps(completeProps)), ref: domRef, children: [header && _jsx(StyledMenuHeader, { children: header }), (() => {
+                // For dynamic collections, just render items from the collection
+                if (isDynamicCollection) {
+                    return collectionItems.map((item) => {
+                        if (item.type === 'section') {
+                            return (_jsx(MenuSection, { item: item, state: state, styles: sectionStyles, itemStyles: itemStyles, headingStyles: sectionHeadingStyles, selectionIcon: selectionIcon }, item.key));
+                        }
+                        let menuItem = (_jsx(MenuItem, { item: item, state: state, styles: itemStyles, selectionIcon: selectionIcon, onAction: item.onAction }, item.key));
+                        if (item.props.wrapper) {
+                            menuItem = item.props.wrapper(menuItem);
+                        }
+                        return cloneElement(menuItem, {
+                            key: item.key,
+                        });
+                    });
                 }
-                return cloneElement(menuItem, {
-                    key: item.key,
+                // For static collections, render children in the same order as they were provided,
+                // but leverage react-stately collection for interactive Menu items and sections.
+                let itemIndex = 0;
+                const children = React.Children.toArray(completeProps.children);
+                return children.map((child, index) => {
+                    // Divider handling
+                    if (
+                    // Valid React element and its type equals to our Divider component
+                    React.isValidElement(child) &&
+                        // @ts-ignore – comparing component types is acceptable here
+                        child.type === BaseDivider) {
+                        return (_jsx(StyledDivider
+                        // "li" is required inside <ul> to be valid HTML.
+                        , { as: "li", role: "separator", "aria-orientation": "horizontal" }, `divider-${index}`));
+                    }
+                    // Handle items/sections coming from react-stately collection
+                    const item = collectionItems[itemIndex++];
+                    if (!item)
+                        return null;
+                    if (item.type === 'section') {
+                        return (_jsx(MenuSection, { item: item, state: state, styles: sectionStyles, itemStyles: itemStyles, headingStyles: sectionHeadingStyles, selectionIcon: selectionIcon }, item.key));
+                    }
+                    let menuItem = (_jsx(MenuItem, { item: item, state: state, styles: itemStyles, selectionIcon: selectionIcon, onAction: item.onAction }, item.key));
+                    if (item.props.wrapper) {
+                        menuItem = item.props.wrapper(menuItem);
+                    }
+                    return cloneElement(menuItem, {
+                        key: item.key,
+                    });
                 });
-            })] }));
+            })()] }));
 }
 // forwardRef doesn't support generic parameters, so cast the result to the correct type
 // https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
@@ -60,7 +126,7 @@ const Section = Object.assign(BaseSection, {
     displayName: 'Section',
 });
 const __Menu = Object.assign(_Menu, {
-    Item,
+    Item: Item,
     Section,
     displayName: 'Menu',
 });

package/es/components/pickers/Menu/MenuButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.62.0
+ * @cube-dev/ui-kit v0.62.2
  * Released under the MIT license.
  */
 
@@ -16,6 +16,7 @@ const StyledButton = tasty(Block, {
     styles: {
         ...DEFAULT_BUTTON_STYLES,
         ...DEFAULT_NEUTRAL_STYLES,
+        height: 'min 4x',
         border: {
             '': '#clear',
             pressed: '#clear',
@@ -66,6 +67,10 @@ const StyledButton = tasty(Block, {
                 disabled: '#dark-04',
             },
         },
+        Description: {
+            preset: 't4',
+            color: '#dark-03',
+        },
     },
 });
 const RadioIcon = tasty({
@@ -94,7 +99,7 @@ const getSelectionTypeIcon = (selectionIcon) => {
             return undefined;
     }
 };
-export function MenuButton({ children, icon, postfix, ...props }) {
+export function MenuButton({ children, icon, postfix, description, ...props }) {
     const { selectionIcon, isSelected, isSelectable, isDisabled, ...rest } = props;
     const checkIcon = isSelectable && isSelected
         ? getSelectionTypeIcon(selectionIcon)
@@ -106,7 +111,7 @@ export function MenuButton({ children, icon, postfix, ...props }) {
         selected: isSelected,
         disabled: isDisabled,
     };
-    return (_jsxs(StyledButton, { "data-size": "small", ...rest, mods: mods, children: [checkIcon ? _jsx("div", { "data-element": "ButtonIcon", children: checkIcon }) : null, icon ? _jsx("div", { "data-element": "ButtonIcon", children: icon }) : null, _jsxs(Space, { gap: "1x", placeContent: "space-between", overflow: "clip", width: "100%", children: [_jsx(Text, { ellipsis: true, color: "inherit", children: children }), postfix && getPostfix(postfix)] })] }));
+    return (_jsxs(StyledButton, { "data-size": "small", ...rest, mods: mods, children: [checkIcon ? _jsx("div", { "data-element": "ButtonIcon", children: checkIcon }) : null, icon ? _jsx("div", { "data-element": "ButtonIcon", children: icon }) : null, _jsxs(Space, { gap: "1x", placeContent: "space-between", overflow: "clip", width: "100%", children: [_jsxs(Space, { flow: "column", gap: "0", width: "100%", children: [_jsx(Text, { ellipsis: true, color: "inherit", children: children }), description ? (_jsx(Text, { nowrap: true, ellipsis: true, "data-element": "Description", preset: "t4", color: "#dark-03", children: description })) : null] }), postfix && getPostfix(postfix)] })] }));
 }
 
         

package/es/components/pickers/Menu/MenuItem.js

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

package/es/components/pickers/Menu/MenuSection.js

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

package/es/components/pickers/Menu/MenuTrigger.js

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

package/es/components/pickers/Menu/context.js

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

package/es/components/pickers/Menu/styled.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.62.0
+ * @cube-dev/ui-kit v0.62.2
  * Released under the MIT license.
  */
 
@@ -29,7 +29,7 @@ export const StyledMenu = tasty({
             section: '',
         },
         border: {
-            '': '#dark-05',
+            '': '#border',
             section: '',
         },
         radius: '(1cr + 1bw)',
@@ -45,9 +45,9 @@ export const StyledDivider = tasty({
     styles: {
         display: 'flex',
         flow: 'column',
-        margin: '0 -0.5x',
+        margin: '.5x',
         listStyle: 'none',
-        fill: '#dark.05',
+        fill: '#border',
         height: '1bw',
     },
 });

package/es/components/portal/Portal.js

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

package/es/components/portal/PortalProvider.js

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

package/es/components/portal/index.js

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

package/es/components/portal/storybook/templates/CustomRoot.js

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

package/es/components/portal/storybook/templates/PortalOrder.js

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

package/es/components/portal/storybook/templates/basic.js

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

package/es/components/portal/storybook/templates/index.js

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

package/es/components/portal/types.js

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

package/es/components/portal/usePortal.js

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

package/es/components/shared/InvalidIcon.js

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

package/es/components/shared/ValidIcon.js

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

package/es/components/status/LoadingAnimation/LoadingAnimation.js

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

package/es/components/status/LoadingAnimation/index.js

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

package/es/components/status/Spin/Cube.js

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

package/es/components/status/Spin/InternalSpinner.js

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

package/es/components/status/Spin/Spin.js

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

package/es/components/status/Spin/SpinsContainer.js

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

package/es/components/status/Spin/index.js

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

package/es/components/status/Spin/types.js

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

package/es/components/status/index.js

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

package/es/data/themes.js

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

package/es/icons/AiIcon.js

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

package/es/icons/AreaChartIcon.js

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

package/es/icons/BackwardIcon.js

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

package/es/icons/BarChartIcon.js

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

package/es/icons/BellFilledIcon.js

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

package/es/icons/BellIcon.js

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

package/es/icons/BooleanIcon.js

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

package/es/icons/CalendarEditIcon.js

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

package/es/icons/CalendarIcon.js

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

package/es/icons/CaretDownIcon.js

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

package/es/icons/CaretUpIcon.js

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

package/es/icons/CheckCircleFilledIcon.js

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

package/es/icons/CheckCircleIcon.js

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

package/es/icons/CheckIcon.js

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

package/es/icons/CircleFilledIcon.js

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

package/es/icons/ClearIcon.js

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

package/es/icons/CloseCircleFilledIcon.js

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

package/es/icons/CloseCircleIcon.js

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