@qoretechnologies/reqore 0.40.0 → 0.40.1

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,wDAAwE;AAA/D,wEAA4B;AACrC,sDAAiF;AAAxE,qEAAgC;AACzC,8CAA8D;AAArD,8DAAuB;AAChC,kDAAkE;AAAzD,kEAAyB;AAClC,sDAA2D;AAAlD,2DAAgB;AACzB,gDAAqD;AAA5C,qDAAa;AACtB,sDAA2D;AAAlD,mDAAY;AACrB,gDAAqD;AAA5C,qDAAa;AACtB,wDAA6D;AAApD,6DAAiB;AAC1B,gDAAgE;AAAvD,gEAAwB;AACjC,0DAA0E;AAAjE,0EAA6B;AACtC,8CAAmD;AAA1C,mDAAY;AACrB,yDAA8D;AAArD,uDAAc;AACvB,kDAAkE;AAAzD,kEAAyB;AAClC,mDAAuF;AAA9E,0DAAqB;AAAE,uDAAkB;AAClD,8CAAqE;AAA5D,mDAAY;AAAE,uDAAgB;AACvC,8CAQ6B;AAP3B,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,oDAAa;AAEf,0CAA0D;AAAjD,0DAAqB;AAC9B,4CAA4D;AAAnD,4DAAsB;AAC/B,4DAAiE;AAAxD,iEAAmB;AAC5B,uDAA6E;AAApE,sEAA8B;AACvC,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAmE;AAA1D,8DAAyB;AAClC,qDAA8D;AAArD,yDAAiB;AAC1B,gDAAgE;AAAvD,gEAAwB;AACjC,4CAAiD;AAAxC,iDAAW;AACpB,wDAA6D;AAApD,6DAAiB;AAC1B,8CAAiE;AAAxD,mDAAY;AAAE,mDAAY;AACnC,uDAA6E;AAApE,sEAA8B;AACvC,mDAAyE;AAAhE,kEAA4B;AACrC,iDAAuE;AAA9D,gEAA2B;AACpC,4DAAmF;AAA1E,mFAAqC;AAC9C,wEAAwF;AAA/E,0EAA6B;AACtC,8CAAuD;AAA9C,uDAAgB;AACzB,4CAAiD;AAAxC,iDAAW;AACpB,oDAA6E;AAApE,iDAAO;AAAE,oEAA0B;AAC5C,gDAAgE;AAAvD,gEAAwB;AACjC,sDAAsE;AAA7D,sEAA2B;AACpC,8CAAiG;AAAxF,6DAAsB;AAAE,mDAAY;AAAE,2DAAoB;AACnE,gDAAqD;AAA5C,qDAAa;AACtB,4CAA4D;AAAnD,4DAAsB;AAC/B,gDAA8D;AAArD,wDAAmB;AAC5B,4DAAsE;AAA7D,gEAAqB;AAC9B,8CAAmE;AAA1D,6DAAyB;AAClC,kDAA4D;AAAnD,sDAAgB;AACzB,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAuE;AAA9D,kEAA6B;AACtC,+CAAmE;AAA1D,8DAAyB;AAClC,wCAAwD;AAA/C,wDAAoB;AAC7B,gDAAmE;AAA1D,+DAAyB;AAClC,kDAAkE;AAAzD,kEAAyB;AAClC,gDAAgE;AAAvD,gEAAwB;AACjC,0CAA+C;AAAtC,+CAAU;AACnB,6CAA4D;AAAnD,6DAAsB;AAC/B,2CAAgD;AAAvC,iDAAW;AACpB,2CAAkD;AAAzC,mDAAa;AACtB,8CAAgE;AAAvD,gEAAyB;AAClC,8DAA6E;AAApE,6EAA8B;AACvC,sDAAsE;AAA7D,sEAA2B;AACpC,yDAAmE;AAA1D,sEAAwB;AACjC,uDAAuE;AAA9D,0EAA6B;AACtC,2DAAqE;AAA5D,0EAA0B;AACnC,+CAAoD;AAA3C,yDAAe;AACxB,+CAA8C;AAArC,mDAAS;AAClB,6DAA6D;AAApD,kEAAiB;AAC1B,6CAAkD;AAAzC,uDAAc"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,wDAAwE;AAA/D,wEAA4B;AACrC,sDAAiF;AAAxE,qEAAgC;AACzC,8CAA8D;AAArD,8DAAuB;AAChC,kDAAkE;AAAzD,kEAAyB;AAClC,sDAA2D;AAAlD,2DAAgB;AACzB,gDAAqD;AAA5C,qDAAa;AACtB,sDAA2D;AAAlD,mDAAY;AACrB,gDAAqD;AAA5C,qDAAa;AACtB,wDAA6D;AAApD,6DAAiB;AAC1B,gDAAgE;AAAvD,gEAAwB;AACjC,0DAA0E;AAAjE,0EAA6B;AACtC,8CAAmD;AAA1C,mDAAY;AACrB,yDAA8D;AAArD,uDAAc;AACvB,kDAAkE;AAAzD,kEAAyB;AAClC,mDAAuF;AAA9E,0DAAqB;AAAE,uDAAkB;AAClD,8CAAqE;AAA5D,mDAAY;AAAE,uDAAgB;AACvC,8CAQ6B;AAP3B,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,+CAAQ;AACR,oDAAa;AAEf,0CAA0D;AAAjD,0DAAqB;AAC9B,4CAA4D;AAAnD,4DAAsB;AAC/B,4DAAiE;AAAxD,iEAAmB;AAC5B,uDAA6E;AAApE,sEAA8B;AACvC,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAmE;AAA1D,8DAAyB;AAClC,qDAA8D;AAArD,yDAAiB;AAC1B,gDAAgE;AAAvD,gEAAwB;AACjC,4CAAiD;AAAxC,iDAAW;AACpB,wDAA6D;AAApD,6DAAiB;AAC1B,8CAAiE;AAAxD,mDAAY;AAAE,mDAAY;AACnC,uDAA6E;AAApE,sEAA8B;AACvC,mDAAyE;AAAhE,kEAA4B;AACrC,iDAAuE;AAA9D,gEAA2B;AACpC,4DAAmF;AAA1E,mFAAqC;AAC9C,wEAAwF;AAA/E,0EAA6B;AACtC,8CAAuD;AAA9C,uDAAgB;AACzB,4CAAiD;AAAxC,iDAAW;AACpB,oDAA6E;AAApE,iDAAO;AAAE,oEAA0B;AAC5C,gDAAgE;AAAvD,gEAAwB;AACjC,sDAAsE;AAA7D,sEAA2B;AACpC,8CAAiG;AAAxF,6DAAsB;AAAE,mDAAY;AAAE,2DAAoB;AACnE,gDAAqD;AAA5C,qDAAa;AACtB,4CAA4D;AAAnD,4DAAsB;AAC/B,gDAA8D;AAArD,wDAAmB;AAC5B,4DAAsE;AAA7D,gEAAqB;AAC9B,8CAAmE;AAA1D,6DAAyB;AAClC,kDAA4D;AAAnD,sDAAgB;AACzB,0CAA0D;AAAjD,0DAAqB;AAC9B,qDAAyE;AAAhE,oEAA4B;AACrC,+CAAuE;AAA9D,kEAA6B;AACtC,+CAAmE;AAA1D,8DAAyB;AAClC,wCAAwD;AAA/C,wDAAoB;AAC7B,gDAAmE;AAA1D,+DAAyB;AAClC,kDAAkE;AAAzD,kEAAyB;AAClC,gDAAgE;AAAvD,gEAAwB;AACjC,0CAA+C;AAAtC,+CAAU;AACnB,6CAA4D;AAAnD,6DAAsB;AAC/B,2CAAgD;AAAvC,iDAAW;AACpB,2CAAkD;AAAzC,mDAAa;AACtB,8CAAgE;AAAvD,gEAAyB;AAClC,8DAA6E;AAApE,6EAA8B;AACvC,sDAAsE;AAA7D,sEAA2B;AACpC,yDAAmE;AAA1D,sEAAwB;AACjC,uDAAuE;AAA9D,0EAA6B;AACtC,6EAA4E;AAAnE,iFAAwB;AACjC,2DAAqE;AAA5D,0EAA0B;AACnC,+CAAoD;AAA3C,yDAAe;AACxB,+CAA8C;AAArC,mDAAS;AAClB,6DAA6D;AAApD,kEAAiB;AAC1B,6CAAkD;AAAzC,uDAAc"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.40.0",
+  "version": "0.40.1",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/Button/index.tsx

@@ -475,7 +475,14 @@ const ReqoreButton = memo(
               </StyledAnimatedTextWrapper>
             )}
             {(badge || badge === 0) && !wrap ? (
-              <ButtonBadge content={badge} size={size} theme={theme} compact={compact} />
+              <ButtonBadge
+                content={badge}
+                size={size}
+                theme={theme}
+                compact={compact}
+                wrapGroup={false}
+                wrap={false}
+              />
             ) : null}
             {!hasRightIcon ? (
               _children ? (

package/src/components/ControlGroup/index.tsx

@@ -5,6 +5,7 @@ import styled, { css } from 'styled-components';
 import { ReqoreButton, ReqoreDrawer } from '../..';
 import { GAP_FROM_SIZE, RADIUS_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
+import { useCloneThroughFragments } from '../../hooks/useCloneThroughFragments';
 import {
   IReqoreIntent,
   IWithReqoreCustomTheme,
@@ -356,81 +357,56 @@ const ReqoreControlGroup = memo(
       return undefined;
     };
 
-    let index = 0;
-
-    const cloneThroughFragments = useCallback(
-      (children: React.ReactNode): React.ReactNode => {
-        return React.Children.map(children, (child, _index) => {
-          if (child && React.isValidElement(child)) {
-            if (child.type === React.Fragment) {
-              return cloneThroughFragments(child.props.children);
-            }
-
-            let newProps = {
-              ...child.props,
-              key: child.props.reactKey || _index,
-              minimal:
-                child.props?.minimal || child.props?.minimal === false
-                  ? child.props.minimal
-                  : minimal,
-              size: child.props?.size || size,
-              flat: child.props?.flat || child.props?.flat === false ? child.props.flat : flat,
-              fluid: child.props?.fluid || child.props?.fluid === false ? child.props.fluid : fluid,
-              fixed: child.props?.fixed || child.props?.fixed === false ? child.props.fixed : fixed,
-              fill: child.props?.fill || child.props?.fill === false ? child.props.fill : fill,
-              stack:
-                child.props?.stack || child.props?.stack === false ? child.props.stack : isStack,
-              intent: child.props?.intent || intent,
-              customTheme: child.props?.customTheme || customTheme,
-            };
-
-            if (isStack) {
-              newProps = {
-                ...newProps,
-                style: {
-                  borderTopLeftRadius: getBorderTopLeftRadius(index, child.props?.rounded),
-                  borderBottomLeftRadius: getBorderBottomLeftRadius(index, child.props?.rounded),
-                  borderTopRightRadius: getBorderTopRightRadius(index, child.props?.rounded),
-                  borderBottomRightRadius: getBorderBottomRightRadius(index, child.props?.rounded),
-                  ...(child.props?.style || {}),
-                },
-                isChild: true,
-                rounded:
-                  isMasterGroupRounded === false
-                    ? false
-                    : child.props?.rounded || child.props?.rounded === false
-                    ? child.props.rounded
-                    : !isStack,
-                isMasterGroupRounded: isChild ? isMasterGroupRounded : rounded,
-                isInsideStackGroup: isStack,
-                isInsideVerticalGroup: isVertical,
-                isFirst: isChild ? getIsFirst(index) : undefined,
-                isLast: isChild ? getIsLast(index) : undefined,
-                isLastInFirstGroup: getIsLastInFirstGroup(index),
-                isLastInLastGroup: getIsLastInLastGroup(index),
-                isFirstInLastGroup: getIsFirstInLastGroup(index),
-                childrenCount: realChildCount,
-                childId: index + 1,
-
-                isFirstGroup: isChild ? isFirstGroup : index === 0,
-                isLastGroup: isChild ? isLastGroup : index === realChildCount - 1,
-              };
-            }
-
-            /*
-             * Because of the way React.Children.map works, we have to
-             * manually decrement the index for every child that is `null`
-             * because react maps through null children and returns them in `Count`
-             * We filter these children out in the `realChildCount` variable,
-             * but the index is still incremented
-             * */
-            index = index + 1;
-
-            return React.cloneElement(child, newProps);
-          }
+    const { clone } = useCloneThroughFragments(
+      (props, _index, index) => {
+        let newProps: any = {
+          ...props,
+          key: props.reactKey || _index,
+          minimal: props?.minimal || props?.minimal === false ? props.minimal : minimal,
+          size: props?.size || size,
+          flat: props?.flat || props?.flat === false ? props.flat : flat,
+          fluid: props?.fluid || props?.fluid === false ? props.fluid : fluid,
+          fixed: props?.fixed || props?.fixed === false ? props.fixed : fixed,
+          fill: props?.fill || props?.fill === false ? props.fill : fill,
+          stack: props?.stack || props?.stack === false ? props.stack : isStack,
+          intent: props?.intent || intent,
+          customTheme: props?.customTheme || customTheme,
+        };
+
+        if (isStack) {
+          newProps = {
+            ...newProps,
+            style: {
+              borderTopLeftRadius: getBorderTopLeftRadius(index, props?.rounded),
+              borderBottomLeftRadius: getBorderBottomLeftRadius(index, props?.rounded),
+              borderTopRightRadius: getBorderTopRightRadius(index, props?.rounded),
+              borderBottomRightRadius: getBorderBottomRightRadius(index, props?.rounded),
+              ...(props?.style || {}),
+            },
+            isChild: true,
+            rounded:
+              isMasterGroupRounded === false
+                ? false
+                : props?.rounded || props?.rounded === false
+                ? props.rounded
+                : !isStack,
+            isMasterGroupRounded: isChild ? isMasterGroupRounded : rounded,
+            isInsideStackGroup: isStack,
+            isInsideVerticalGroup: isVertical,
+            isFirst: isChild ? getIsFirst(index) : undefined,
+            isLast: isChild ? getIsLast(index) : undefined,
+            isLastInFirstGroup: getIsLastInFirstGroup(index),
+            isLastInLastGroup: getIsLastInLastGroup(index),
+            isFirstInLastGroup: getIsFirstInLastGroup(index),
+            childrenCount: realChildCount,
+            childId: index + 1,
+
+            isFirstGroup: isChild ? isFirstGroup : index === 0,
+            isLastGroup: isChild ? isLastGroup : index === realChildCount - 1,
+          };
+        }
 
-          return child;
-        });
+        return newProps;
       },
       [
         children,
@@ -440,7 +416,6 @@ const ReqoreControlGroup = memo(
         isLastGroup,
         isFirstGroup,
         realChildCount,
-        index,
         fluid,
         flat,
         minimal,
@@ -522,7 +497,7 @@ const ReqoreControlGroup = memo(
           horizontalAlign={horizontalAlign}
           className={`${className || ''} reqore-control-group`}
         >
-          {cloneThroughFragments(_children)}
+          {clone(_children)}
         </StyledReqoreControlGroup>
       </>
     );

package/src/components/Menu/index.tsx

@@ -4,8 +4,10 @@ import { RADIUS_FROM_SIZE } from '../../constants/sizes';
 import { IReqoreCustomTheme, IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { changeDarkness, changeLightness, getMainBackgroundColor } from '../../helpers/colors';
+import { useCloneThroughFragments } from '../../hooks/useCloneThroughFragments';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { IReqoreComponent, IWithReqoreMinimal, IWithReqoreTransparent } from '../../types/global';
+import ReqoreControlGroup, { IReqoreControlGroupProps } from '../ControlGroup';
 
 export interface IReqoreMenuProps
   extends IReqoreComponent,
@@ -22,6 +24,7 @@ export interface IReqoreMenuProps
   flat?: boolean;
   rounded?: boolean;
   padded?: boolean;
+  itemGap?: IReqoreControlGroupProps['gapSize'];
 }
 
 export interface IReqoreMenuStyle extends IReqoreMenuProps {
@@ -49,10 +52,6 @@ const StyledReqoreMenu = styled.div<IReqoreMenuStyle>`
     )};
     padding-${position === 'left' ? 'right' : 'left'}: 10px;
   `}
-
-  > *:not(:last-child) {
-    margin-bottom: 5px;
-  }
 `;
 
 const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
@@ -67,11 +66,20 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
       wrapText,
       flat = true,
       minimal,
+      itemGap,
       ...rest
     }: IReqoreMenuProps,
     ref
   ) => {
     const theme = useReqoreTheme('main', customTheme, intent);
+    const { clone } = useCloneThroughFragments((props) => ({
+      _insidePopover: props?._insidePopover ?? _insidePopover,
+      _popoverId: props?._popoverId ?? _popoverId,
+      customTheme: props?.customTheme || theme,
+      wrap: 'wrap' in (props || {}) ? props.wrap : wrapText,
+      flat: 'flat' in (props || {}) ? props.flat : flat,
+      minimal: 'minimal' in (props || {}) ? props.minimal : minimal,
+    }));
 
     return (
       <ReqoreThemeProvider theme={theme}>
@@ -82,18 +90,9 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
           theme={theme}
           className={`${rest.className || ''} reqore-menu`}
         >
-          {React.Children.map(children, (child) => {
-            return child
-              ? React.cloneElement(child, {
-                  _insidePopover: child.props?._insidePopover ?? _insidePopover,
-                  _popoverId: child.props?._popoverId ?? _popoverId,
-                  customTheme: child.props?.customTheme || theme,
-                  wrap: 'wrap' in (child.props || {}) ? child.props.wrap : wrapText,
-                  flat: 'flat' in (child.props || {}) ? child.props.flat : flat,
-                  minimal: 'minimal' in (child.props || {}) ? child.props.minimal : minimal,
-                })
-              : null;
-          })}
+          <ReqoreControlGroup vertical gapSize={itemGap} fluid>
+            {clone(children)}
+          </ReqoreControlGroup>
         </StyledReqoreMenu>
       </ReqoreThemeProvider>
     );

package/src/components/Menu/section.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { TReqoreIntent } from '../../constants/theme';
+import { useCloneThroughFragments } from '../../hooks/useCloneThroughFragments';
 import { IReqoreComponent } from '../../types/global';
 import ReqoreButton, { IReqoreButtonProps } from '../Button';
 import ReqoreControlGroup from '../ControlGroup';
@@ -44,6 +45,15 @@ export const ReqoreMenuSection = ({
     [_isCollapsed, onCollapseChange, collapsible, rest.onClick]
   );
 
+  const { clone } = useCloneThroughFragments((props) => ({
+    _insidePopover: props?._insidePopover ?? _insidePopover,
+    _popoverId: props?._popoverId ?? _popoverId,
+    customTheme: props?.customTheme || customTheme,
+    wrap: 'wrap' in (props || {}) ? props.wrap : wrap,
+    flat: 'flat' in (props || {}) ? props.flat : flat,
+    minimal: 'minimal' in (props || {}) ? props.minimal : minimal,
+  }));
+
   return (
     <ReqoreControlGroup vertical fluid className='reqore-menu-section'>
       <ReqoreButton
@@ -63,18 +73,7 @@ export const ReqoreMenuSection = ({
       />
       {!_isCollapsed || !collapsible ? (
         <ReqoreControlGroup vertical fluid style={{ paddingLeft: '10px' }}>
-          {React.Children.map(children, (child) => {
-            return child
-              ? React.cloneElement(child, {
-                  _insidePopover: child.props?._insidePopover ?? _insidePopover,
-                  _popoverId: child.props?._popoverId ?? _popoverId,
-                  customTheme: child.props?.customTheme || customTheme,
-                  wrap: 'wrap' in (child.props || {}) ? child.props.wrap : wrap,
-                  flat: 'flat' in (child.props || {}) ? child.props.flat : flat,
-                  minimal: 'minimal' in (child.props || {}) ? child.props.minimal : minimal,
-                })
-              : null;
-          })}
+          {clone(children)}
         </ReqoreControlGroup>
       ) : null}
     </ReqoreControlGroup>

package/src/hooks/useCloneThroughFragments.ts

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+
+export const useCloneThroughFragments = (
+  propsMapper: (
+    props: Record<string | number, any>,
+    reactIndex: number,
+    realIndex: number
+  ) => Record<string | number, any>,
+  deps?: any[]
+) => {
+  let realIndex = 0;
+
+  const clone = useCallback((children: React.ReactNode): React.ReactNode => {
+    return React.Children.map(children, (child, reactIndex) => {
+      if (child && React.isValidElement(child)) {
+        if (child.type === React.Fragment) {
+          return clone(child.props.children);
+        }
+
+        const props = propsMapper(child.props, reactIndex, realIndex);
+
+        /*
+         * Because of the way React.Children.map works, we have to
+         * manually decrement the index for every child that is `null`
+         * because react maps through null children and returns them in `Count`
+         * We filter these children out in the `realChildCount` variable,
+         * but the index is still incremented
+         * */
+        realIndex = realIndex + 1;
+
+        return React.cloneElement(child, props);
+      }
+
+      return child;
+    });
+  }, deps);
+
+  return { clone };
+};

package/src/index.tsx

@@ -69,6 +69,7 @@ export { default as ReqoreNotifications } from './containers/ReqoreProvider';
 export { default as ReqoreUIProvider } from './containers/UIProvider';
 export { default as ReqoreContext } from './context/ReqoreContext';
 export { default as ReqoreThemeContext } from './context/ThemeContext';
+export { useCloneThroughFragments } from './hooks/useCloneThroughFragments';
 export { default as useLatestZIndex } from './hooks/useLatestZIndex';
 export { useReqorePaging } from './hooks/usePaging';
 export { useReqore } from './hooks/useReqore';

package/src/stories/Menu/Menu.stories.tsx

@@ -137,8 +137,8 @@ const Template: StoryFn<IReqoreMenuProps> = (args) => {
         <ReqoreMenuItem icon='Save3Fill' intent='success' selected>
           Selected success
         </ReqoreMenuItem>
-        <ReqoreMenuItem icon='Save3Fill' badge={10}>
-          Save
+        <ReqoreMenuItem icon='Save3Fill' badge={[10, 20]}>
+          Save this item
         </ReqoreMenuItem>
         <ReqoreMenuDivider label='BIG Divider' size='huge' />
         <ReqoreMenuItem
@@ -154,17 +154,19 @@ const Template: StoryFn<IReqoreMenuProps> = (args) => {
           Delete
         </ReqoreMenuItem>
 
-        <ReqoreMenuItem
-          icon='BluetoothConnectLine'
-          rightIcon='EditLine'
-          onRightIconClick={() => alert('Icon clicked')}
-          description='Button with right icon and description'
-          customTheme={{
-            main: 'info:darken:1:0.3',
-          }}
-        >
-          Some button
-        </ReqoreMenuItem>
+        <>
+          <ReqoreMenuItem
+            icon='BluetoothConnectLine'
+            rightIcon='EditLine'
+            onRightIconClick={() => alert('Icon clicked')}
+            description='Button with right icon and description'
+            customTheme={{
+              main: 'info:darken:1:0.3',
+            }}
+          >
+            Some button
+          </ReqoreMenuItem>
+        </>
 
         <ReqoreMenuItem icon='Lock2Fill' description='I also have a description'>
           This is a really long item that should wrap
@@ -296,6 +298,14 @@ export const Transparent: Story = {
   },
 };
 
+export const BigGapSize: Story = {
+  render: Template,
+
+  args: {
+    itemGap: 'big',
+  },
+};
+
 export const SubmenuCanBeToggled: Story = {
   render: (args) => <MenuWithSubmenus {...args} />,
   play: async ({ canvasElement, ...rest }) => {