@cube-dev/ui-kit 0.66.1 → 0.68.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @cube-dev/ui-kit
 
+## 0.68.0
+
+### Minor Changes
+
+- [#730](https://github.com/cube-js/cube-ui-kit/pull/730) [`5d627efa`](https://github.com/cube-js/cube-ui-kit/commit/5d627efafb1793f45ff8b8ba496b07e17227ac67) Thanks [@tenphi](https://github.com/tenphi)! - Add FilterPicker component for single and multiple picker experience with a filter.
+
+- [#730](https://github.com/cube-js/cube-ui-kit/pull/730) [`5d627efa`](https://github.com/cube-js/cube-ui-kit/commit/5d627efafb1793f45ff8b8ba496b07e17227ac67) Thanks [@tenphi](https://github.com/tenphi)! - Split ListBox into two components: simple ListBox and FilterListBox with search input.
+
+### Patch Changes
+
+- [#730](https://github.com/cube-js/cube-ui-kit/pull/730) [`5d627efa`](https://github.com/cube-js/cube-ui-kit/commit/5d627efafb1793f45ff8b8ba496b07e17227ac67) Thanks [@tenphi](https://github.com/tenphi)! - Improve the layout of Menu component.
+
+- [#727](https://github.com/cube-js/cube-ui-kit/pull/727) [`fa1397f2`](https://github.com/cube-js/cube-ui-kit/commit/fa1397f26e2f6ece95aec915f43e0815355d74f6) Thanks [@tenphi](https://github.com/tenphi)! - Add `fs` custom unit for stable fractions in grid layouts. `1sf` -> `minmax(0, 1fr)`.
+
+- [#730](https://github.com/cube-js/cube-ui-kit/pull/730) [`5d627efa`](https://github.com/cube-js/cube-ui-kit/commit/5d627efafb1793f45ff8b8ba496b07e17227ac67) Thanks [@tenphi](https://github.com/tenphi)! - `wrapWithField` no longer wrap the input component with a field if no label is provided and `forceField` prop is not set.
+
+- [#730](https://github.com/cube-js/cube-ui-kit/pull/730) [`5d627efa`](https://github.com/cube-js/cube-ui-kit/commit/5d627efafb1793f45ff8b8ba496b07e17227ac67) Thanks [@tenphi](https://github.com/tenphi)! - Add a new icon ChartKPI.
+
+- [#727](https://github.com/cube-js/cube-ui-kit/pull/727) [`fa1397f2`](https://github.com/cube-js/cube-ui-kit/commit/fa1397f26e2f6ece95aec915f43e0815355d74f6) Thanks [@tenphi](https://github.com/tenphi)! - Improved tasty documentation.
+
+## 0.67.0
+
+### Minor Changes
+
+- [#725](https://github.com/cube-js/cube-ui-kit/pull/725) [`4b789d2b`](https://github.com/cube-js/cube-ui-kit/commit/4b789d2bddc3bee1c91194c2d76b1c5946cc9cbc) Thanks [@tenphi](https://github.com/tenphi)! - Add useEventBus hook to emit global events and subscribe to them.
+
+- [#725](https://github.com/cube-js/cube-ui-kit/pull/725) [`4b789d2b`](https://github.com/cube-js/cube-ui-kit/commit/4b789d2bddc3bee1c91194c2d76b1c5946cc9cbc) Thanks [@tenphi](https://github.com/tenphi)! - Add useContextMenu hook to invoke a context menu in the exact place of the click.
+
+- [#725](https://github.com/cube-js/cube-ui-kit/pull/725) [`4b789d2b`](https://github.com/cube-js/cube-ui-kit/commit/4b789d2bddc3bee1c91194c2d76b1c5946cc9cbc) Thanks [@tenphi](https://github.com/tenphi)! - Add useAnchoredMenu hook to programmatically invoke a menu anchored to the specific element.
+
 ## 0.66.1
 
 ### Patch Changes

package/es/_internal/hooks/index.js

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

package/es/_internal/hooks/use-chained-callback.js

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

package/es/_internal/hooks/use-debounced-value.js

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

package/es/_internal/hooks/use-deprecation-warning.js

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

package/es/_internal/hooks/use-effect-once.js

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

package/es/_internal/hooks/use-event.js

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

package/es/_internal/hooks/use-is-first-render.js

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

package/es/_internal/hooks/use-sync-ref.js

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

package/es/_internal/hooks/use-timer/index.js

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

package/es/_internal/hooks/use-timer/timer.js

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

package/es/_internal/hooks/use-timer/use-timer.js

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

package/es/_internal/hooks/use-update-effect.js

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

package/es/_internal/hooks/use-warn.js

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

package/es/_internal/index.js

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

package/es/components/Block.js

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

package/es/components/GlobalStyles.js

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

package/es/components/GridProvider.js

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

package/es/components/HiddenInput.js

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

package/es/components/OpenTrasition.js

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

package/es/components/Root.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.66.1
+ * @cube-dev/ui-kit v0.68.0
  * Released under the MIT license.
  */
 
@@ -14,6 +14,7 @@ import { TrackingProvider } from '../providers/TrackingProvider';
 import { BASE_STYLES, BLOCK_STYLES, extractStyles, filterBaseProps, tasty, } from '../tasty';
 import { TOKENS } from '../tokens';
 import { useViewportSize } from '../utils/react';
+import { EventBusProvider } from '../utils/react/useEventBus';
 import { GlobalStyles } from './GlobalStyles';
 import { AlertDialogApiProvider } from './overlays/AlertDialog';
 import { NotificationsProvider } from './overlays/NewNotifications/NotificationsContext/NotificationsProvider';
@@ -83,7 +84,7 @@ export function Root(allProps) {
                             ? height + 'px'
                             : '100dvh',
                         ...style,
-                    }, children: [_jsx(GlobalStyles, { bodyStyles: bodyStyles, applyLegacyTokens: applyLegacyTokens, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont, fontDisplay: fontDisplay }), _jsx(ModalProvider, { children: _jsx(PortalProvider, { value: ref, children: _jsx(NotificationsProvider, { rootRef: ref, children: _jsx(AlertDialogApiProvider, { children: children }) }) }) })] }) }) }) }));
+                    }, children: [_jsx(GlobalStyles, { bodyStyles: bodyStyles, applyLegacyTokens: applyLegacyTokens, publicUrl: publicUrl, fonts: fonts, font: font, monospaceFont: monospaceFont, fontDisplay: fontDisplay }), _jsx(ModalProvider, { children: _jsx(PortalProvider, { value: ref, children: _jsx(EventBusProvider, { children: _jsx(NotificationsProvider, { rootRef: ref, children: _jsx(AlertDialogApiProvider, { children: children }) }) }) }) })] }) }) }) }));
 }
 
         

package/es/components/actions/Action/Action.js

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

package/es/components/actions/Button/Button.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.66.1
+ * @cube-dev/ui-kit v0.68.0
  * Released under the MIT license.
  */
 
@@ -37,20 +37,23 @@ export const DEFAULT_BUTTON_STYLES = {
     reset: 'button',
     outlineOffset: 1,
     padding: {
-        '': '0 (2x - 1bw)',
-        '[data-size="small"]': '0 (1x - 1bw)',
-        '[data-size="medium"]': '0 (1.5x - 1bw)',
-        '[data-size="large"]': '0 (2.25x - 1bw)',
+        '': '.5x (2x - 1bw)',
+        '[data-size="tiny"]': '.5x (1x - 1bw)',
+        '[data-size="small"]': '.5x (1x - 1bw)',
+        '[data-size="medium"]': '.5x (1.5x - 1bw)',
+        '[data-size="large"]': '.5x (2.25x - 1bw)',
         'single-icon-only | [data-type="link"]': 0,
     },
     width: {
         '': 'initial',
+        '[data-size="tiny"] & single-icon-only': '3.5x 3.5x',
         '[data-size="small"] & single-icon-only': '4x 4x',
         '[data-size="medium"] & single-icon-only': '5x 5x',
         '[data-size="large"] & single-icon-only': '6x 6x',
     },
     height: {
         '': 'initial',
+        '[data-size="tiny"]': '3.5x 3.5x',
         '[data-size="small"]': '4x 4x',
         '[data-size="medium"]': '5x 5x',
         '[data-size="large"]': '6x 6x',
@@ -112,13 +115,13 @@ export const DEFAULT_OUTLINE_STYLES = {
     fill: {
         '': '#dark.0',
         hovered: '#dark.03',
-        'pressed | selected': '#dark.06',
+        'pressed | (selected & !hovered)': '#dark.06',
         '[disabled] | disabled': '#dark.04',
     },
     color: {
         '': '#dark-02',
         hovered: '#dark-02',
-        'pressed | selected': '#dark',
+        'pressed | (selected & !hovered)': '#dark',
         '[disabled] | disabled': '#dark-04',
     },
 };
@@ -130,7 +133,7 @@ export const DEFAULT_NEUTRAL_STYLES = {
     fill: {
         '': '#dark.0',
         hovered: '#dark.03',
-        'pressed | selected': '#dark.06',
+        'pressed | (selected & !hovered)': '#dark.06',
     },
     color: {
         '': '#dark-02',
@@ -148,7 +151,7 @@ export const DEFAULT_CLEAR_STYLES = {
     fill: {
         '': '#purple.0',
         hovered: '#purple.16',
-        'pressed | selected': '#purple.10',
+        'pressed | (selected & !hovered)': '#purple.10',
     },
     color: {
         '': '#purple-text',
@@ -218,7 +221,7 @@ export const DANGER_OUTLINE_STYLES = {
     fill: {
         '': '#danger.0',
         hovered: '#danger.1',
-        'pressed | selected': '#danger.05',
+        'pressed | (selected & !hovered)': '#danger.05',
         '[disabled] | disabled': '#dark.04',
     },
     color: {
@@ -234,11 +237,11 @@ export const DANGER_NEUTRAL_STYLES = {
     fill: {
         '': '#dark.0',
         hovered: '#dark.04',
-        'pressed | selected': '#dark.05',
+        'pressed | (selected & !hovered)': '#dark.05',
     },
     color: {
         '': '#dark-02',
-        'pressed | selected': '#danger-text',
+        'pressed | (selected & !hovered)': '#danger-text',
         '[disabled] | disabled': '#dark-04',
     },
 };
@@ -251,7 +254,7 @@ export const DANGER_CLEAR_STYLES = {
     fill: {
         '': '#danger.0',
         hovered: '#danger.1',
-        'pressed | selected': '#danger.05',
+        'pressed | (selected & !hovered)': '#danger.05',
     },
     color: {
         '': '#danger-text',
@@ -321,7 +324,7 @@ export const SUCCESS_OUTLINE_STYLES = {
     fill: {
         '': '#success.0',
         hovered: '#success.1',
-        'pressed | selected': '#success.05',
+        'pressed | (selected & !hovered)': '#success.05',
         '[disabled] | disabled': '#dark.04',
     },
     color: {
@@ -337,11 +340,11 @@ export const SUCCESS_NEUTRAL_STYLES = {
     fill: {
         '': '#dark.0',
         hovered: '#dark.04',
-        'pressed | selected': '#dark.05',
+        'pressed | (selected & !hovered)': '#dark.05',
     },
     color: {
         '': '#dark-02',
-        'pressed | selected': '#success-text',
+        'pressed | (selected & !hovered)': '#success-text',
         '[disabled] | disabled': '#dark-04',
     },
 };
@@ -354,7 +357,7 @@ export const SUCCESS_CLEAR_STYLES = {
     fill: {
         '': '#success.0',
         hovered: '#success.1',
-        'pressed | selected': '#success.05',
+        'pressed | (selected & !hovered)': '#success.05',
     },
     color: {
         '': '#success-text',
@@ -422,7 +425,7 @@ export const SPECIAL_OUTLINE_STYLES = {
     fill: {
         '': '#white.0',
         hovered: '#white.18',
-        'pressed | selected': '#white.12',
+        'pressed | (selected & !hovered)': '#white.12',
         '[disabled] | disabled': '#white.12',
     },
     color: {
@@ -438,7 +441,7 @@ export const SPECIAL_NEUTRAL_STYLES = {
     fill: {
         '': '#white.0',
         hovered: '#white.12',
-        'pressed | selected': '#white.18',
+        'pressed | (selected & !hovered)': '#white.18',
     },
     color: {
         '': '#white',
@@ -525,13 +528,13 @@ export const Button = forwardRef(function Button(allProps, ref) {
         const specifiedLabel = label ?? props['aria-label'] ?? props['aria-labelledby'];
         if (icon) {
             if (!specifiedLabel) {
-                accessibilityWarning('If you provide `icon` property for a Button and do not provide any children then you should specify the `label` property to make sure the Button element stays accessible.');
+                accessibilityWarning('If you provide `icon` property for a Button and do not provide any children then you should specify the `aria-label` property to make sure the Button element stays accessible.');
                 label = 'Unnamed'; // fix to avoid warning in production
             }
         }
         else {
             if (!specifiedLabel) {
-                accessibilityWarning('If you provide no children for a Button then you should specify the `label` property to make sure the Button element stays accessible.');
+                accessibilityWarning('If you provide no children for a Button then you should specify the `aria-label` property to make sure the Button element stays accessible.');
                 label = 'Unnamed'; // fix to avoid warning in production
             }
         }

package/es/components/actions/Button/index.js

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

package/es/components/actions/ButtonGroup/ButtonGroup.js

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

package/es/components/actions/CommandMenu/CommandMenu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.66.1
+ * @cube-dev/ui-kit v0.68.0
  * Released under the MIT license.
  */
 
@@ -15,20 +15,18 @@ import { Item, Section, useTreeState } from 'react-stately';
 import { LoadingIcon } from '../../../icons';
 import { CONTAINER_STYLES, extractStyles, filterBaseProps, } from '../../../tasty';
 import { mergeProps } from '../../../utils/react';
-import { useDialogContext } from '../../overlays/Dialog/context';
 import { TooltipProvider } from '../../overlays/Tooltip/TooltipProvider';
 import { useMenuContext } from '../Menu';
 import { MenuItem } from '../Menu/MenuItem';
 import { MenuSection } from '../Menu/MenuSection';
 import { MenuTrigger } from '../Menu/MenuTrigger';
 import { StyledDivider, StyledFooter, StyledHeader, StyledMenu, } from '../Menu/styled';
-import { StyledCommandMenu, StyledEmptyState, StyledLoadingWrapper, StyledMenuWrapper, StyledSearchInput, } from './styled';
+import { StyledCommandMenu, StyledEmptyState, StyledLoadingWrapper, StyledSearchInput, } from './styled';
 function CommandMenuBase(props, ref) {
     const { searchPlaceholder = 'Search commands...', searchValue: controlledSearchValue, onSearchChange, filter: customFilter, emptyLabel = 'No commands found', searchInputStyles, headerStyles, footerStyles, isLoading = false, shouldFilter = true, autoFocus = true, size = 'small', qa, styles, selectedKeys, defaultSelectedKeys, onSelectionChange, header, footer, ...restMenuProps } = props;
     const domRef = useDOMRef(ref);
     const searchInputRef = useRef(null);
     const contextProps = useMenuContext();
-    const dialogContext = useDialogContext();
     // Convert string[] to Set<Key> for React Aria compatibility
     const ariaSelectedKeys = selectedKeys ? new Set(selectedKeys) : undefined;
     const ariaDefaultSelectedKeys = defaultSelectedKeys
@@ -306,26 +304,18 @@ function CommandMenuBase(props, ref) {
     // Sync refs
     useSyncRef(contextProps, menuRef);
     const mods = useMemo(() => {
-        // Determine mods based on dialog context and menu context
-        let popoverMod = completeProps.mods?.popover || dialogContext?.type === 'popover';
-        let trayMod = completeProps.mods?.tray || dialogContext?.type === 'tray';
-        let modalMod = dialogContext?.type === 'modal';
+        // Determine mods based on menu context
+        let popoverMod = completeProps.mods?.popover;
+        let trayMod = completeProps.mods?.tray;
         return {
             sections: viewHasSections,
             footer: !!footer,
             header: !!header,
             popover: popoverMod,
             tray: trayMod,
-            modal: modalMod,
         };
-    }, [
-        viewHasSections,
-        footer,
-        header,
-        completeProps.mods,
-        dialogContext?.type,
-    ]);
-    return (_jsxs(StyledCommandMenu, { ...filterBaseProps(props), ref: domRef, qa: qa || 'CommandMenu', "data-size": size, mods: mods, styles: mergeProps(extractedStyles, styles), children: [header && (_jsx(StyledHeader, { role: "presentation", styles: headerStyles, children: header })), _jsx(StyledSearchInput, { ref: searchInputRef, type: "search", placeholder: searchPlaceholder, value: searchValue, styles: searchInputStyles, "data-size": size, "aria-controls": `${qa || 'CommandMenu'}-menu`, role: "combobox", "aria-expanded": "true", "aria-haspopup": "listbox", "aria-activedescendant": focusedKey != null
+    }, [viewHasSections, footer, header, completeProps.mods]);
+    return (_jsxs(StyledCommandMenu, { ...filterBaseProps(props), ref: domRef, qa: qa || 'CommandMenu', "data-size": size, mods: mods, styles: mergeProps(extractedStyles, styles), children: [header && (_jsx(StyledHeader, { role: "presentation", "data-size": size, styles: { border: 'none', ...headerStyles }, children: header })), _jsx(StyledSearchInput, { ref: searchInputRef, type: "search", placeholder: searchPlaceholder, value: searchValue, styles: searchInputStyles, "data-size": size, "aria-controls": `${qa || 'CommandMenu'}-menu`, role: "combobox", "aria-expanded": "true", "aria-haspopup": "listbox", "aria-activedescendant": focusedKey != null
                     ? `${qa || 'CommandMenu'}-menu-option-${focusedKey}`
                     : undefined, onChange: (e) => handleSearchChange(e.target.value), onKeyDown: (e) => {
                     if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
@@ -442,12 +432,12 @@ function CommandMenuBase(props, ref) {
                             handleSearchChange('');
                         }
                     }
-                } }), isLoading && (_jsx(StyledLoadingWrapper, { children: _jsx(LoadingIcon, { role: "progressbar", "aria-label": "Loading commands", "aria-hidden": false }) })), !isLoading && !showEmptyState && (_jsx(StyledMenuWrapper, { children: _jsx(StyledMenu, { ...menuProps, ref: menuRef, id: `${qa || 'CommandMenu'}-menu`, "aria-label": "Command menu", qa: "Menu", "data-size": size, mods: mods, styles: {
-                        border: 'none',
-                        boxShadow: 'none',
-                        radius: 0,
-                        padding: '0.5x',
-                    }, children: renderedItems }) })), !isLoading && showEmptyState && (_jsx(StyledEmptyState, { children: emptyLabel })), footer && (_jsx(StyledFooter, { role: "presentation", styles: footerStyles, children: footer }))] }));
+                } }), isLoading && (_jsx(StyledLoadingWrapper, { children: _jsx(LoadingIcon, { role: "progressbar", "aria-label": "Loading commands", "aria-hidden": false }) })), !isLoading && !showEmptyState && (_jsx(StyledMenu, { ...menuProps, ref: menuRef, id: `${qa || 'CommandMenu'}-menu`, "aria-label": "Command menu", qa: "Menu", "data-size": size, mods: mods, styles: {
+                    border: 'none',
+                    boxShadow: 'none',
+                    radius: 0,
+                    padding: '0.5x',
+                }, children: renderedItems })), !isLoading && showEmptyState && (_jsx(StyledEmptyState, { children: emptyLabel })), footer && (_jsx(StyledFooter, { role: "presentation", "data-size": size, styles: footerStyles, children: footer }))] }));
 }
 // forwardRef doesn't support generic parameters, so cast the result to the correct type
 const _CommandMenu = React.forwardRef(CommandMenuBase);

package/es/components/actions/CommandMenu/index.js

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

package/es/components/actions/CommandMenu/styled.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.66.1
+ * @cube-dev/ui-kit v0.68.0
  * Released under the MIT license.
  */
 
@@ -28,7 +28,6 @@ export const StyledCommandMenu = tasty({
             'popover | tray': '0px 5px 15px #dark.05',
         },
         overflow: 'hidden',
-        width: '20x 50x',
         height: {
             '': 'initial',
             popover: 'initial max-content (50vh - 4x)',

package/es/components/actions/Menu/Menu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.66.1
+ * @cube-dev/ui-kit v0.68.0
  * Released under the MIT license.
  */
 
@@ -17,9 +17,9 @@ import { TooltipProvider, } from '../../overlays/Tooltip/TooltipProvider';
 import { useMenuContext } from './context';
 import { MenuItem } from './MenuItem';
 import { MenuSection } from './MenuSection';
-import { StyledDivider, StyledFooter, StyledHeader, StyledMenu, } from './styled';
+import { StyledDivider, StyledFooter, StyledHeader, StyledMenu, StyledMenuWrapper, } from './styled';
 function Menu(props, ref) {
-    const { header, footer, itemStyles, sectionStyles, sectionHeadingStyles, selectionIcon, size = 'small', qa, selectedKeys, defaultSelectedKeys, onSelectionChange, ...rest } = props;
+    const { header, footer, menuStyles, headerStyles, footerStyles, itemStyles, sectionStyles, sectionHeadingStyles, selectionIcon, size = 'small', qa, selectedKeys, defaultSelectedKeys, onSelectionChange, ...rest } = props;
     const domRef = useDOMRef(ref);
     const contextProps = useMenuContext();
     // Convert string[] to Set<Key> for React Aria compatibility
@@ -54,17 +54,18 @@ function Menu(props, ref) {
     const hasSections = collectionItems.some((item) => item.type === 'section');
     const { menuProps } = useMenu(completeProps, state, domRef);
     const styles = useMemo(() => extractStyles(completeProps, CONTAINER_STYLES), [completeProps]);
-    const defaultProps = {
-        qa,
-        styles,
-        'data-size': size,
-        mods: {
-            sections: hasSections,
+    const wrapperMods = useMemo(() => {
+        return {
+            popover: completeProps.mods?.popover,
             footer: !!footer,
             header: !!header,
-            popover: completeProps.mods?.popover,
-        },
-    };
+        };
+    }, [completeProps.mods?.popover, footer, header]);
+    const menuMods = useMemo(() => {
+        return {
+            sections: hasSections,
+        };
+    }, [hasSections]);
     // 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.
@@ -105,7 +106,11 @@ function Menu(props, ref) {
         selectionIcon,
         sectionHeadingStyles,
     ]);
-    return (_jsxs(StyledMenu, { ...mergeProps(defaultProps, menuProps, filterBaseProps(completeProps)), ref: domRef, role: menuProps.role ?? 'menu', children: [header && _jsx(StyledHeader, { role: "presentation", children: header }), renderedItems, footer && _jsx(StyledFooter, { role: "presentation", children: footer })] }));
+    return (_jsxs(StyledMenuWrapper, { qa: qa, styles: styles, mods: wrapperMods, ...filterBaseProps(completeProps), children: [header ? (_jsx(StyledHeader, { "data-size": size, styles: headerStyles, children: header })) : (_jsx("div", { role: "presentation" })), _jsx(StyledMenu, { ...mergeProps({
+                    styles: menuStyles,
+                    'data-size': size,
+                    mods: menuMods,
+                }, menuProps), ref: domRef, role: menuProps.role ?? 'menu', children: renderedItems }), footer ? (_jsx(StyledFooter, { "data-size": size, styles: footerStyles, children: footer })) : (_jsx("div", { role: "presentation" }))] }));
 }
 // 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

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

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.66.1
+ * @cube-dev/ui-kit v0.68.0
  * Released under the MIT license.
  */
 
@@ -20,6 +20,7 @@ import { StyledItem } from './styled';
 // Returns icon corresponding to selection type
 const getSelectionTypeIcon = (selectionIcon) => {
     switch (selectionIcon) {
+        case 'checkmark':
         case 'checkbox':
             return _jsx(CheckIcon, {});
         case 'radio':