@cube-dev/ui-kit 0.64.0 → 0.65.0

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

@@ -1,14 +1,14 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.65.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSyncRef } from '@react-aria/utils';
 import { useDOMRef } from '@react-spectrum/utils';
-import React, { cloneElement } from 'react';
+import React, { useMemo } from 'react';
 import { useMenu } from 'react-aria';
 import { Item as BaseItem, Section as BaseSection, useTreeState, } from 'react-stately';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../../tasty';
@@ -28,7 +28,7 @@ function Menu(props, ref) {
     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 styles = useMemo(() => extractStyles(completeProps, CONTAINER_STYLES), [completeProps]);
     const defaultProps = {
         qa,
         styles,
@@ -38,29 +38,40 @@ function Menu(props, ref) {
             header: !!header,
         },
     };
+    // Sync the ref stored in the context object with the DOM ref returned by useDOMRef.
+    // The helper from @react-aria/utils expects the context object as the first argument
+    // to keep it up-to-date, and a ref object as the second.
     useSyncRef(contextProps, domRef);
-    return (_jsxs(StyledMenu, { ...mergeProps(defaultProps, menuProps, filterBaseProps(completeProps)), ref: domRef, children: [header && _jsx(StyledHeader, { children: header }), (() => {
+    return (_jsxs(StyledMenu, { ...mergeProps(defaultProps, menuProps, filterBaseProps(completeProps)), ref: domRef, children: [header && _jsx(StyledHeader, { role: "presentation", children: header }), (() => {
                 // Build the list of menu elements, automatically inserting dividers between sections.
-                const renderedItems = [];
-                let isFirstSection = true;
-                collectionItems.forEach((item) => {
-                    if (item.type === 'section') {
-                        // Insert a visual separator before every section except the first one.
-                        if (!isFirstSection) {
-                            renderedItems.push(_jsx(StyledDivider, { as: "li", role: "separator", "aria-orientation": "horizontal" }, `divider-${String(item.key)}`));
+                const renderedItems = useMemo(() => {
+                    const items = [];
+                    let isFirstSection = true;
+                    collectionItems.forEach((item) => {
+                        if (item.type === 'section') {
+                            if (!isFirstSection) {
+                                items.push(_jsx(StyledDivider, { as: "li", role: "separator", "aria-orientation": "horizontal" }, `divider-${String(item.key)}`));
+                            }
+                            items.push(_jsx(MenuSection, { item: item, state: state, styles: sectionStyles, itemStyles: itemStyles, headingStyles: sectionHeadingStyles, selectionIcon: selectionIcon }, item.key));
+                            isFirstSection = false;
+                            return;
                         }
-                        renderedItems.push(_jsx(MenuSection, { item: item, state: state, styles: sectionStyles, itemStyles: itemStyles, headingStyles: sectionHeadingStyles, selectionIcon: selectionIcon }, item.key));
-                        isFirstSection = false;
-                        return;
-                    }
-                    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);
-                    }
-                    renderedItems.push(cloneElement(menuItem, {
-                        key: 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);
+                        }
+                        // Ensure every child has a stable key, even if the wrapper component didn't set one.
+                        items.push(React.cloneElement(menuItem, { key: item.key }));
+                    });
+                    return items;
+                }, [
+                    collectionItems,
+                    state,
+                    sectionStyles,
+                    itemStyles,
+                    selectionIcon,
+                    sectionHeadingStyles,
+                ]);
                 return renderedItems;
             })()] }));
 }

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

@@ -1,14 +1,15 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.65.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconPointFilled } from '@tabler/icons-react';
 import { CheckIcon } from '../../../icons';
 import { tasty } from '../../../tasty';
-import { DEFAULT_BUTTON_STYLES, DEFAULT_NEUTRAL_STYLES, } from '../../actions/index';
+import { DEFAULT_BUTTON_STYLES, DEFAULT_NEUTRAL_STYLES } from '../../actions';
 import { Block } from '../../Block';
 import { Text } from '../../content/Text';
 import { Space } from '../../layout/Space';
@@ -17,21 +18,18 @@ const StyledButton = tasty(Block, {
         ...DEFAULT_BUTTON_STYLES,
         ...DEFAULT_NEUTRAL_STYLES,
         height: 'min 4x',
-        border: {
-            '': '#clear',
-            pressed: '#clear',
-            focused: '#purple-text',
-        },
+        border: '#clear',
         fill: {
             '': '#clear',
-            hovered: '#dark.03',
-            'pressed | selected': '#dark.06',
-            disabled: '#dark.04',
+            focused: '#dark.03',
+            selected: '#dark.06',
+            'selected & focused': '#dark.09',
+            pressed: '#dark.06',
+            disabled: '#clear',
         },
         color: {
             '': '#dark-02',
-            hovered: '#dark-02',
-            pressed: '#dark',
+            'selected | pressed': '#dark',
             disabled: '#dark-04',
         },
         cursor: {
@@ -40,18 +38,14 @@ const StyledButton = tasty(Block, {
         },
         shadow: '#clear',
         padding: {
-            '': '0 (1.5x - 1px)',
-            'selectable & !selected': '0 (1.5x - 1px) 0 (1.5x - 1px)',
-            'selectionIcon & selectable & !selected': '0 (1.5x - 1px) 0 (1.5x - 1px + 22px)',
+            '': '0 (1x - 1bw)',
+            'selectionIcon & selectable & !selected': '0 (1x - 1bw) 0 (1x - 1bw + 3x)',
         },
         display: 'flex',
         flow: 'row',
         justifyContent: 'start',
         gap: '.75x',
-        outline: {
-            '': '#purple-03.0',
-            'focused & focus-visible': '#purple-03',
-        },
+        outline: false,
         ButtonIcon: {
             display: 'grid',
             fontSize: '@icon-size',
@@ -73,28 +67,13 @@ const StyledButton = tasty(Block, {
         },
     },
 });
-const RadioIcon = tasty({
-    styles: {
-        display: 'flex',
-        width: '1.875x',
-        placeContent: 'center',
-        '&::before': {
-            display: 'block',
-            content: '""',
-            width: '1x',
-            height: '1x',
-            radius: 'round',
-            fill: '#current',
-        },
-    },
-});
 const getPostfix = (postfix) => typeof postfix === 'string' ? (_jsx(Text, { nowrap: true, color: "inherit", "data-element": "Postfix", children: postfix })) : (postfix);
 const getSelectionTypeIcon = (selectionIcon) => {
     switch (selectionIcon) {
         case 'checkbox':
             return _jsx(CheckIcon, {});
         case 'radio':
-            return _jsx(RadioIcon, {});
+            return _jsx(IconPointFilled, {});
         default:
             return undefined;
     }

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

@@ -1,14 +1,16 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.65.0
  * Released under the MIT license.
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useRef } from 'react';
-import { FocusRing, useFocusVisible, useHover, useMenuItem } from 'react-aria';
+import { FocusRing, useMenuItem } from 'react-aria';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { ClearSlots, mergeProps, SlotProvider } from '../../../utils/react';
+import { HotKeys } from '../../content/HotKeys';
 import { useMenuContext } from './context';
 import { MenuButton } from './MenuButton';
 import { StyledItem } from './styled';
@@ -17,12 +19,12 @@ export function MenuItem(props) {
     const { item, state, styles, selectionIcon, isVirtualized, onAction } = props;
     const { onClose, closeOnSelect } = useMenuContext();
     const { rendered, key, props: itemProps } = item;
+    // Extract optional keyboard shortcut from item props so it is not passed down to DOM elements.
+    // `hotkeys` is our custom prop for specifying keyboard shortcuts, similar to `postfix` or `icon`.
+    const { hotkeys, ...cleanItemProps } = (itemProps || {});
     const isSelectable = state.selectionManager.selectionMode !== 'none';
     const isDisabledKey = state.disabledKeys.has(key);
     const ref = useRef(null);
-    const { hoverProps, isHovered } = useHover({ isDisabled: isDisabledKey });
-    // Determine if focus should be shown (keyboard modality only)
-    const { isFocusVisible } = useFocusVisible({});
     const { menuItemProps, labelProps, descriptionProps, keyboardShortcutProps, isFocused, isSelected, isPressed, isDisabled, } = useMenuItem({
         isSelected: state.selectionManager.isSelected(key),
         isDisabled: isDisabledKey,
@@ -33,24 +35,49 @@ export function MenuItem(props) {
         isVirtualized,
         onAction,
     }, state, ref);
-    // Show focused state only when focus is keyboard-visible
-    const isKeyboardFocused = isFocused && isFocusVisible;
     const buttonProps = {
-        qa: itemProps.qa ? itemProps.qa : `MenuButton-${key}`,
+        qa: cleanItemProps.qa
+            ? cleanItemProps.qa
+            : `MenuButton-${key}`,
         mods: {
-            ...itemProps.mods,
-            hovered: isHovered,
-            focused: isKeyboardFocused,
+            ...cleanItemProps.mods,
+            focused: isFocused,
             pressed: isPressed,
         },
     };
-    const contents = (_jsx(MenuButton, { ...mergeProps(itemProps, buttonProps), styles: styles, selectionIcon: selectionIcon, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }));
-    return (_jsx(FocusRing, { children: _jsx(StyledItem, { ...mergeProps(menuItemProps, hoverProps), ref: ref, "data-qa": itemProps.qa ? `MenuItem-${itemProps.qa}` : `MenuItem-${key}`, mods: {
+    // Build extra props for MenuButton: automatically add postfix HotKeys component when shortcut provided
+    const extraButtonProps = {};
+    if (hotkeys && !cleanItemProps.postfix) {
+        extraButtonProps.postfix = _jsx(HotKeys, { keys: hotkeys });
+    }
+    const contents = (_jsx(MenuButton, { ...mergeProps(cleanItemProps, buttonProps, extraButtonProps), styles: styles, selectionIcon: selectionIcon, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }));
+    // Register global hotkey if provided
+    useHotkeys(typeof hotkeys === 'string' ? hotkeys.toLowerCase() : '', () => {
+        if (!hotkeys)
+            return;
+        if (isDisabledKey || isDisabled) {
+            return;
+        }
+        // Simulate a click on the menu item so all existing handlers run
+        if (ref.current) {
+            ref.current.click();
+        }
+    }, {
+        // Ensure the hotkey is active even when the element is not focused
+        enableOnContentEditable: true,
+        enabled: !!hotkeys,
+        preventDefault: true,
+    }, [hotkeys, isDisabledKey, isDisabled]);
+    return (_jsx(FocusRing, { children: _jsx(StyledItem, { ...mergeProps(menuItemProps, {
+                'aria-disabled': isDisabled || undefined,
+            }), ref: ref, qa: cleanItemProps.qa
+                ? `MenuItem-${cleanItemProps.qa}`
+                : `MenuItem-${key}`, mods: {
                 disabled: isDisabled,
                 selected: isSelected,
                 selectable: isSelectable,
-                hovered: isHovered,
-                focused: isKeyboardFocused,
+                focused: isFocused,
+                pressed: isPressed,
             }, children: _jsx(ClearSlots, { children: _jsx(SlotProvider, { slots: {
                         text: { className: 'itemLabel', ...labelProps },
                         end: { className: 'end', ...descriptionProps },

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * Released under the MIT license.
  */
 
@@ -58,7 +58,7 @@ export const StyledHeader = tasty(Space, {
     styles: {
         color: '#dark-02',
         preset: 't2m',
-        padding: '0.75x 2x',
+        padding: '0.75x 1.5x',
         margin: '-0.5x -0.5x (0.5x - 1bw) -0.5x',
         border: '#dark-05 bottom',
         placeContent: 'space-between',

package/es/components/portal/Portal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * Released under the MIT license.
  */
 

package/es/icons/AdjustmentsHorizontalIcon.js

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

package/es/icons/AdjustmentsIcon.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * 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.64.0
+ * @cube-dev/ui-kit v0.65.0
  * Released under the MIT license.
  */