fix(Menu): fix unresponsive item on tap to click

.changeset/eighty-wolves-chew.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Fix unresponsive Menu Item on tap to click.

.changeset/hot-terms-tap.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Change MenuItem API to support isDisabled and onAction props.

src/components/pickers/Menu/Menu.stories.tsx

@@ -5,7 +5,6 @@ import {
   BookOutlined,
   CheckCircleFilled,
 } from '@ant-design/icons';
-import { action } from '@storybook/addon-actions';
 import { expect } from '@storybook/test';
 import { userEvent, waitFor, within } from '@storybook/test';
 
@@ -39,32 +38,24 @@ export default {
 const MenuTemplate = (props) => {
   return (
     <Menu id="menu" {...props} width="340px">
-      <Menu.Item key="1" onPress={action('Item 1')}>
-        Item 1
-      </Menu.Item>
-      <Menu.Item key="2" onPress={action('Item 2')}>
-        Item 2
-      </Menu.Item>
-      <Menu.Item key="3" onPress={action('Item 3')}>
-        Item 3
-      </Menu.Item>
-      <Menu.Item key="4" onPress={action('Item 4')}>
-        Item 4
-      </Menu.Item>
+      <Menu.Item key="1">Item 1</Menu.Item>
+      <Menu.Item key="2">Item 2</Menu.Item>
+      <Menu.Item key="3">Item 3</Menu.Item>
+      <Menu.Item key="4">Item 4</Menu.Item>
     </Menu>
   );
 };
 
 export const Default = ({ ...props }) => {
   const menu = (
     <Menu id="menu" {...props} width="220px">
-      <Menu.Item key="red" postfix="Ctr+C" onPress={action('Ctr+C')}>
+      <Menu.Item key="red" postfix="Ctr+C">
         Copy
       </Menu.Item>
-      <Menu.Item key="orange" postfix="Ctr+V" onPress={action('Ctr+C')}>
+      <Menu.Item key="orange" postfix="Ctr+V">
         Paste
       </Menu.Item>
-      <Menu.Item key="yellow" postfix="Ctr+X" onPress={action('Ctr+C')}>
+      <Menu.Item key="yellow" postfix="Ctr+X">
         Cut
       </Menu.Item>
     </Menu>
@@ -109,13 +100,13 @@ export const InsideModal = () => {
               width="220px"
               selectionMode="multiple"
             >
-              <Menu.Item key="red" postfix="Ctr+C" onPress={action('Ctr+C')}>
+              <Menu.Item key="red" postfix="Ctr+C">
                 Copy
               </Menu.Item>
-              <Menu.Item key="orange" postfix="Ctr+V" onPress={action('Ctr+C')}>
+              <Menu.Item key="orange" postfix="Ctr+V">
                 Paste
               </Menu.Item>
-              <Menu.Item key="yellow" postfix="Ctr+X" onPress={action('Ctr+C')}>
+              <Menu.Item key="yellow" postfix="Ctr+X">
                 Cut
               </Menu.Item>
             </Menu>

src/components/pickers/Menu/Menu.tsx

@@ -94,7 +94,6 @@ function Menu<T extends object>(
               itemStyles={itemStyles}
               headingStyles={sectionHeadingStyles}
               selectionIcon={selectionIcon}
-              onAction={completeProps.onAction}
             />
           );
         }
@@ -106,7 +105,7 @@ function Menu<T extends object>(
             state={state}
             styles={itemStyles}
             selectionIcon={selectionIcon}
-            onAction={completeProps.onAction}
+            onAction={item.onAction}
           />
         );
 

src/components/pickers/Menu/MenuButton.tsx

@@ -1,13 +1,15 @@
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
-import { Button, CubeButtonProps } from '../../actions';
+import { DEFAULT_BUTTON_STYLES } from '../../actions/index';
+import { Block, CubeBlockProps } from '../../Block';
 import { Text } from '../../content/Text';
 import { tasty } from '../../../tasty';
 import { Space } from '../../layout/Space';
 import { CheckIcon } from '../../../icons';
 
-const StyledButton = tasty(Button, {
+const StyledButton = tasty(Block, {
   styles: {
+    ...DEFAULT_BUTTON_STYLES,
     border: {
       '': '#clear',
       pressed: '#clear',
@@ -43,6 +45,17 @@ const StyledButton = tasty(Button, {
     display: 'flex',
     flow: 'row',
     justifyContent: 'start',
+    gap: '.75x',
+
+    ButtonIcon: {
+      display: 'grid',
+      fontSize: '@icon-size',
+      width: '@icon-size',
+      height: '@icon-size',
+      placeSelf: 'center',
+      placeItems: 'center',
+    },
+
     Postfix: {
       color: {
         '': '#dark-03',
@@ -86,9 +99,10 @@ export type MenuButtonProps = {
   postfix: ReactNode;
   selectionIcon?: MenuSelectionType;
   isSelectable?: boolean;
-  // eslint-disable-next-line react/boolean-prop-naming
-  disabled?: boolean;
-} & CubeButtonProps;
+  isSelected?: boolean;
+  icon?: ReactElement;
+  onAction?: () => void;
+} & CubeBlockProps;
 
 const getSelectionTypeIcon = (selectionIcon?: MenuSelectionType) => {
   switch (selectionIcon) {
@@ -107,7 +121,7 @@ export function MenuButton({
   postfix,
   ...props
 }: MenuButtonProps) {
-  const { selectionIcon, isSelected, isSelectable } = props;
+  const { selectionIcon, isSelected, isSelectable, isDisabled } = props;
   const checkIcon =
     isSelectable && isSelected
       ? getSelectionTypeIcon(selectionIcon)
@@ -117,18 +131,14 @@ export function MenuButton({
     selectionIcon: !!selectionIcon,
     selectable: isSelectable,
     selected: isSelected,
+    disabled: isDisabled,
   };
 
   return (
-    <StyledButton
-      type="neutral"
-      size="small"
-      {...props}
-      icon={checkIcon}
-      mods={mods}
-    >
-      {icon && <Text color="inherit">{icon}</Text>}
-      <Space gap="1x" placeContent="space-between" overflow="auto" width="100%">
+    <StyledButton {...props} mods={mods}>
+      {checkIcon ? <div data-element="ButtonIcon">{checkIcon}</div> : null}
+      {icon ? <div data-element="ButtonIcon">{icon}</div> : null}
+      <Space gap="1x" placeContent="space-between" overflow="clip" width="100%">
         <Text ellipsis color="inherit">
           {children}
         </Text>

src/components/pickers/Menu/MenuSection.tsx

@@ -16,7 +16,7 @@ export interface CubeMenuSectionProps<T> extends MenuItemProps<T> {
 
 /** @private */
 export function MenuSection<T>(props: CubeMenuSectionProps<T>) {
-  const { item, state, styles, itemStyles, headingStyles, onAction } = props;
+  const { item, state, styles, itemStyles, headingStyles } = props;
   const heading = item.rendered;
   const { itemProps, headingProps, groupProps } = useMenuSection({
     heading,
@@ -39,7 +39,7 @@ export function MenuSection<T>(props: CubeMenuSectionProps<T>) {
                 item={node}
                 styles={itemStyles}
                 state={state}
-                onAction={onAction}
+                onAction={(node as unknown as MenuItemProps<T>).onAction}
               />
             );