@qoretechnologies/reqore 0.39.0 → 0.40.1

package/dist/index.js

@@ -11,8 +11,8 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
     o[k2] = m[k];
 }));
 exports.__esModule = true;
-exports.ReqoreHorizontalSpacer = exports.ReqoreSidebar = exports.ReqoreRadioGroup = exports.ReqorePopover = exports.ReqoreParagraph = exports.ReqoreP = exports.ReqorePanel = exports.ReqorePagination = exports.ReqoreNotification = exports.ReqoreNotificationsWrapper = exports.ReqoreNavbarItem = exports.ReqoreNavbarGroup = exports.ReqoreNavbarDivider = exports.ReqoreHeader = exports.ReqoreFooter = exports.ReqoreMultiSelect = exports.ReqoreModal = exports.ReqoreMessage = exports.ReqoreMenuItem = exports.ReqoreMenuDivider = exports.ReqoreMenu = exports.ReqoreLayoutContent = exports.ReqoreKeyValueTable = exports.ReqoreInput = exports.ReqoreIcon = exports.ReqoreHeading = exports.ReqoreH6 = exports.ReqoreH5 = exports.ReqoreH4 = exports.ReqoreH3 = exports.ReqoreH2 = exports.ReqoreH1 = exports.ReqoreTextEffect = exports.ReqoreEffect = exports.ReqoreDropdownItem = exports.ReqoreDropdownDivider = exports.ReqoreDropdown = exports.ReqoreBackdrop = exports.ReqoreDrawer = exports.ReqoreControlGroup = exports.ReqoreContent = exports.ReqoreCommentFeed = exports.ReqoreComment = exports.ReqoreColumn = exports.ReqoreColumns = exports.ReqoreCollection = exports.ReqoreCheckbox = exports.ReqoreButton = exports.ReqoreBreadcrumbsItem = exports.ReqoreBreadcrumbs = void 0;
-exports.useReqoreTheme = exports.useReqoreProperty = exports.useReqore = exports.useReqorePaging = exports.useLatestZIndex = exports.ReqoreThemeContext = exports.ReqoreContext = exports.ReqoreUIProvider = exports.ReqoreNotifications = exports.ReqorePaginationContainer = exports.ReqoreIntents = exports.ReqoreSizes = exports.ReqoreColors = exports.ReqoreTree = exports.ReqoreTimeAgo = exports.ReqoreTextarea = exports.ReqoreTagGroup = exports.ReqoreTag = exports.ReqoreTabsList = exports.ReqoreTabsListItem = exports.ReqoreTabsContent = exports.ReqoreTabs = exports.ReqoreTableValue = exports.ReqoreTableRow = exports.ReqoreTableHeaderCell = exports.ReqoreTableBodyCell = exports.ReqoreTable = exports.ReqoreSpinner = exports.ReqoreVerticalSpacer = exports.ReqoreSpacer = void 0;
+exports.ReqoreHorizontalSpacer = exports.ReqoreRadioGroup = exports.ReqorePopover = exports.ReqoreParagraph = exports.ReqoreP = exports.ReqorePanel = exports.ReqorePagination = exports.ReqoreNotification = exports.ReqoreNotificationsWrapper = exports.ReqoreNavbarItem = exports.ReqoreNavbarGroup = exports.ReqoreNavbarDivider = exports.ReqoreHeader = exports.ReqoreFooter = exports.ReqoreMultiSelect = exports.ReqoreModal = exports.ReqoreMessage = exports.ReqoreMenuSection = exports.ReqoreMenuItem = exports.ReqoreMenuDivider = exports.ReqoreMenu = exports.ReqoreLayoutContent = exports.ReqoreKeyValueTable = exports.ReqoreInput = exports.ReqoreIcon = exports.ReqoreHeading = exports.ReqoreH6 = exports.ReqoreH5 = exports.ReqoreH4 = exports.ReqoreH3 = exports.ReqoreH2 = exports.ReqoreH1 = exports.ReqoreTextEffect = exports.ReqoreEffect = exports.ReqoreDropdownItem = exports.ReqoreDropdownDivider = exports.ReqoreDropdown = exports.ReqoreBackdrop = exports.ReqoreDrawer = exports.ReqoreControlGroup = exports.ReqoreContent = exports.ReqoreCommentFeed = exports.ReqoreComment = exports.ReqoreColumn = exports.ReqoreColumns = exports.ReqoreCollection = exports.ReqoreCheckbox = exports.ReqoreButton = exports.ReqoreBreadcrumbsItem = exports.ReqoreBreadcrumbs = void 0;
+exports.useReqoreTheme = exports.useReqoreProperty = exports.useReqore = exports.useReqorePaging = exports.useLatestZIndex = exports.useCloneThroughFragments = exports.ReqoreThemeContext = exports.ReqoreContext = exports.ReqoreUIProvider = exports.ReqoreNotifications = exports.ReqorePaginationContainer = exports.ReqoreIntents = exports.ReqoreSizes = exports.ReqoreColors = exports.ReqoreTree = exports.ReqoreTimeAgo = exports.ReqoreTextarea = exports.ReqoreTagGroup = exports.ReqoreTag = exports.ReqoreTabsList = exports.ReqoreTabsListItem = exports.ReqoreTabsContent = exports.ReqoreTabs = exports.ReqoreTableValue = exports.ReqoreTableRow = exports.ReqoreTableHeaderCell = exports.ReqoreTableBodyCell = exports.ReqoreTable = exports.ReqoreSpinner = exports.ReqoreVerticalSpacer = exports.ReqoreSpacer = void 0;
 var Breadcrumbs_1 = require("./components/Breadcrumbs");
 __createBinding(exports, Breadcrumbs_1, "default", "ReqoreBreadcrumbs");
 var item_1 = require("./components/Breadcrumbs/item");
@@ -69,6 +69,8 @@ var divider_1 = require("./components/Menu/divider");
 __createBinding(exports, divider_1, "default", "ReqoreMenuDivider");
 var item_3 = require("./components/Menu/item");
 __createBinding(exports, item_3, "default", "ReqoreMenuItem");
+var section_1 = require("./components/Menu/section");
+__createBinding(exports, section_1, "ReqoreMenuSection");
 var Message_1 = require("./components/Message");
 __createBinding(exports, Message_1, "default", "ReqoreMessage");
 var Modal_1 = require("./components/Modal");
@@ -99,8 +101,6 @@ var Popover_1 = require("./components/Popover");
 __createBinding(exports, Popover_1, "default", "ReqorePopover");
 var RadioGroup_1 = require("./components/RadioGroup");
 __createBinding(exports, RadioGroup_1, "default", "ReqoreRadioGroup");
-var Sidebar_1 = require("./components/Sidebar");
-__createBinding(exports, Sidebar_1, "default", "ReqoreSidebar");
 var Spacer_1 = require("./components/Spacer");
 __createBinding(exports, Spacer_1, "ReqoreHorizontalSpacer");
 __createBinding(exports, Spacer_1, "ReqoreSpacer");
@@ -151,6 +151,8 @@ var ReqoreContext_1 = require("./context/ReqoreContext");
 __createBinding(exports, ReqoreContext_1, "default", "ReqoreContext");
 var ThemeContext_1 = require("./context/ThemeContext");
 __createBinding(exports, ThemeContext_1, "default", "ReqoreThemeContext");
+var useCloneThroughFragments_1 = require("./hooks/useCloneThroughFragments");
+__createBinding(exports, useCloneThroughFragments_1, "useCloneThroughFragments");
 var useLatestZIndex_1 = require("./hooks/useLatestZIndex");
 __createBinding(exports, useLatestZIndex_1, "default", "useLatestZIndex");
 var usePaging_1 = require("./hooks/usePaging");

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,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,gDAAgE;AAAvD,gEAAwB;AACjC,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.39.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,
@@ -17,16 +18,14 @@ import { StyledEffect } from '../Effect';
 import { StyledHeader } from '../Header';
 import { StyledParagraph } from '../Paragraph';
 
-export interface IReqoreControlGroupProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    IWithReqoreFlat,
+export interface IReqoreControlGroupComponentProps
+  extends IWithReqoreFlat,
     IWithReqoreSize,
     IWithReqoreMinimal,
     IReqoreIntent,
     IWithReqoreFluid,
     IWithReqoreCustomTheme {
   stack?: boolean;
-  children: any;
   fixed?: boolean;
   rounded?: boolean;
   responsive?: boolean;
@@ -54,6 +53,12 @@ export interface IReqoreControlGroupProps
   fill?: boolean;
 }
 
+export interface IReqoreControlGroupProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    IReqoreControlGroupComponentProps {
+  children: any;
+}
+
 export interface IReqoreControlGroupStyle extends IReqoreControlGroupProps {
   theme: IReqoreTheme;
 }
@@ -352,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,
@@ -436,7 +416,6 @@ const ReqoreControlGroup = memo(
         isLastGroup,
         isFirstGroup,
         realChildCount,
-        index,
         fluid,
         flat,
         minimal,
@@ -518,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

@@ -0,0 +1,81 @@
+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';
+
+export interface IReqoreMenuSectionProps extends IReqoreComponent, IReqoreButtonProps {
+  children: any;
+  collapsible?: boolean;
+  isCollapsed?: boolean;
+  onCollapseChange?: (collapsed: boolean) => void;
+  activeIntent?: TReqoreIntent;
+}
+
+export const ReqoreMenuSection = ({
+  children,
+  _insidePopover,
+  _popoverId,
+  customTheme,
+  wrap,
+  flat,
+  minimal,
+  collapsible = true,
+  isCollapsed,
+  activeIntent,
+  onCollapseChange,
+  ...rest
+}: IReqoreMenuSectionProps) => {
+  const [_isCollapsed, setIsCollapsed] = useState(isCollapsed);
+
+  useEffect(() => {
+    setIsCollapsed(isCollapsed);
+  }, [isCollapsed]);
+
+  const handleCollapseChange = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      if (collapsible) {
+        setIsCollapsed(!_isCollapsed);
+        onCollapseChange?.(!_isCollapsed);
+      }
+
+      rest.onClick?.(event);
+    },
+    [_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
+        wrap={wrap}
+        flat={flat}
+        minimal={minimal}
+        active={collapsible && !_isCollapsed}
+        {...rest}
+        className={`${rest.className || ''} reqore-menu-section-toggle`}
+        intent={collapsible && !_isCollapsed ? activeIntent : rest.intent}
+        fluid
+        onClick={handleCollapseChange}
+        rightIcon={rest.rightIcon || (collapsible ? 'ArrowRightSLine' : 'ArrowDownSLine')}
+        rightIconProps={{
+          rotation: collapsible && !_isCollapsed ? 90 : 0,
+        }}
+      />
+      {!_isCollapsed || !collapsible ? (
+        <ReqoreControlGroup vertical fluid style={{ paddingLeft: '10px' }}>
+          {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

@@ -30,6 +30,7 @@ export { default as ReqoreLayoutContent } from './components/Layout/content';
 export { default as ReqoreMenu } from './components/Menu';
 export { default as ReqoreMenuDivider } from './components/Menu/divider';
 export { default as ReqoreMenuItem } from './components/Menu/item';
+export { ReqoreMenuSection } from './components/Menu/section';
 export { default as ReqoreMessage } from './components/Message';
 export { ReqoreModal } from './components/Modal';
 export { ReqoreMultiSelect } from './components/MultiSelect';
@@ -44,7 +45,6 @@ export { ReqorePanel } from './components/Panel';
 export { ReqoreP, ReqoreP as ReqoreParagraph } from './components/Paragraph';
 export { default as ReqorePopover } from './components/Popover';
 export { default as ReqoreRadioGroup } from './components/RadioGroup';
-export { default as ReqoreSidebar } from './components/Sidebar';
 export { ReqoreHorizontalSpacer, ReqoreSpacer, ReqoreVerticalSpacer } from './components/Spacer';
 export { ReqoreSpinner } from './components/Spinner';
 export { default as ReqoreTable } from './components/Table';
@@ -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/mock/menu.ts

@@ -1,59 +1,57 @@
-import { IQorusSidebarItems } from "../components/Sidebar";
-
-export const qorusSidebarItems: IQorusSidebarItems = {
+export const qorusSidebarItems = {
   Menu: {
-    title: "Menu",
+    title: 'Menu',
     items: [
       {
-        name: "Menu item 1",
-        as: "a",
+        name: 'Menu item 1',
+        as: 'a',
         props: {
-          href: "/item-1",
+          href: '/item-1',
         },
-        icon: "Home3Line",
-        id: "menu-item-1",
+        icon: 'Home3Line',
+        id: 'menu-item-1',
       },
       {
-        name: "Menu item 2",
-        as: "a",
+        name: 'Menu item 2',
+        as: 'a',
         props: {
-          href: "/item-2",
+          href: '/item-2',
         },
-        icon: "Settings4Fill",
-        id: "menu-item-2",
+        icon: 'Settings4Fill',
+        id: 'menu-item-2',
       },
       {
-        name: "Menu item 3",
-        icon: "File3Line",
-        id: "menu-item-3",
-        activePaths: ["/item-3"],
+        name: 'Menu item 3',
+        icon: 'File3Line',
+        id: 'menu-item-3',
+        activePaths: ['/item-3'],
         submenu: [
           {
-            name: "Submenu item 1",
-            as: "a",
+            name: 'Submenu item 1',
+            as: 'a',
             props: {
-              href: "/item-3/item-1",
+              href: '/item-3/item-1',
             },
-            icon: "NodeTree",
-            id: "submenu-item-1",
+            icon: 'NodeTree',
+            id: 'submenu-item-1',
           },
           {
-            name: "Submenu item 2",
-            as: "a",
+            name: 'Submenu item 2',
+            as: 'a',
             props: {
-              href: "/item-3/item-2",
+              href: '/item-3/item-2',
             },
-            icon: "Chat3Fill",
-            id: "submenu-item-2",
+            icon: 'Chat3Fill',
+            id: 'submenu-item-2',
           },
           {
-            name: "Super really long Submenu item 3",
-            as: "a",
+            name: 'Super really long Submenu item 3',
+            as: 'a',
             props: {
-              href: "/item-3/item-3",
+              href: '/item-3/item-3',
             },
-            icon: "DatabaseFill",
-            id: "submenu-item-3",
+            icon: 'DatabaseFill',
+            id: 'submenu-item-3',
           },
         ],
       },
@@ -62,33 +60,33 @@ export const qorusSidebarItems: IQorusSidebarItems = {
   Menu2: {
     items: [
       {
-        name: "Super Long Really Another item 1",
-        as: "a",
+        name: 'Super Long Really Another item 1',
+        as: 'a',
         props: {
-          href: "/another-item-1",
+          href: '/another-item-1',
         },
-        icon: "Home6Line",
-        id: "another-item-1",
+        icon: 'Home6Line',
+        id: 'another-item-1',
       },
       {
-        name: "Another item 2",
-        as: "a",
+        name: 'Another item 2',
+        as: 'a',
         props: {
-          href: "/another-item-2",
+          href: '/another-item-2',
         },
-        icon: "TableFill",
-        id: "another-item-2",
+        icon: 'TableFill',
+        id: 'another-item-2',
       },
       {
-        name: "Another item 3",
-        as: "a",
+        name: 'Another item 3',
+        as: 'a',
         props: {
           onClick: () => {
-            alert("Click");
+            alert('Click');
           },
         },
-        icon: "BellLine",
-        id: "another-item-3",
+        icon: 'BellLine',
+        id: 'another-item-3',
       },
     ],
   },