@qoretechnologies/reqore 0.40.0 → 0.40.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/dist/components/Button/index.d.ts +1 -0
  2. package/dist/components/Button/index.d.ts.map +1 -1
  3. package/dist/components/Button/index.js +6 -6
  4. package/dist/components/Button/index.js.map +1 -1
  5. package/dist/components/ControlGroup/index.d.ts.map +1 -1
  6. package/dist/components/ControlGroup/index.js +13 -33
  7. package/dist/components/ControlGroup/index.js.map +1 -1
  8. package/dist/components/Menu/index.d.ts +2 -0
  9. package/dist/components/Menu/index.d.ts.map +1 -1
  10. package/dist/components/Menu/index.js +19 -18
  11. package/dist/components/Menu/index.js.map +1 -1
  12. package/dist/components/Menu/section.d.ts.map +1 -1
  13. package/dist/components/Menu/section.js +14 -37
  14. package/dist/components/Menu/section.js.map +1 -1
  15. package/dist/hooks/useCloneThroughFragments.d.ts +5 -0
  16. package/dist/hooks/useCloneThroughFragments.d.ts.map +1 -0
  17. package/dist/hooks/useCloneThroughFragments.js +53 -0
  18. package/dist/hooks/useCloneThroughFragments.js.map +1 -0
  19. package/dist/index.d.ts +1 -0
  20. package/dist/index.d.ts.map +1 -1
  21. package/dist/index.js +3 -1
  22. package/dist/index.js.map +1 -1
  23. package/package.json +1 -1
  24. package/src/components/Button/index.tsx +18 -4
  25. package/src/components/ControlGroup/index.tsx +51 -76
  26. package/src/components/Menu/index.tsx +19 -23
  27. package/src/components/Menu/section.tsx +11 -12
  28. package/src/hooks/useCloneThroughFragments.ts +39 -0
  29. package/src/index.tsx +1 -0
  30. package/src/stories/Button/Button.stories.tsx +22 -0
  31. package/src/stories/Menu/Menu.stories.tsx +33 -13
  32. package/tests.json +1 -1
package/dist/index.d.ts CHANGED
@@ -61,6 +61,7 @@ export { default as ReqoreNotifications } from './containers/ReqoreProvider';
61
61
  export { default as ReqoreUIProvider } from './containers/UIProvider';
62
62
  export { default as ReqoreContext } from './context/ReqoreContext';
63
63
  export { default as ReqoreThemeContext } from './context/ThemeContext';
64
+ export { useCloneThroughFragments } from './hooks/useCloneThroughFragments';
64
65
  export { default as useLatestZIndex } from './hooks/useLatestZIndex';
65
66
  export { useReqorePaging } from './hooks/usePaging';
66
67
  export { useReqore } from './hooks/useReqore';
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
package/dist/index.js CHANGED
@@ -12,7 +12,7 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
12
12
  }));
13
13
  exports.__esModule = true;
14
14
  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;
15
- 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;
15
+ 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;
16
16
  var Breadcrumbs_1 = require("./components/Breadcrumbs");
17
17
  __createBinding(exports, Breadcrumbs_1, "default", "ReqoreBreadcrumbs");
18
18
  var item_1 = require("./components/Breadcrumbs/item");
@@ -151,6 +151,8 @@ var ReqoreContext_1 = require("./context/ReqoreContext");
151
151
  __createBinding(exports, ReqoreContext_1, "default", "ReqoreContext");
152
152
  var ThemeContext_1 = require("./context/ThemeContext");
153
153
  __createBinding(exports, ThemeContext_1, "default", "ReqoreThemeContext");
154
+ var useCloneThroughFragments_1 = require("./hooks/useCloneThroughFragments");
155
+ __createBinding(exports, useCloneThroughFragments_1, "useCloneThroughFragments");
154
156
  var useLatestZIndex_1 = require("./hooks/useLatestZIndex");
155
157
  __createBinding(exports, useLatestZIndex_1, "default", "useLatestZIndex");
156
158
  var usePaging_1 = require("./hooks/usePaging");
package/dist/index.js.map CHANGED
@@ -1 +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"}
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,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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qoretechnologies/reqore",
3
- "version": "0.40.0",
3
+ "version": "0.40.2",
4
4
  "description": "ReQore is a highly theme-able and modular UI library for React",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
package/src/components/Button/index.tsx CHANGED
@@ -64,7 +64,10 @@ export interface IReqoreButtonProps
64
64
  fixed?: boolean;
65
65
  active?: boolean;
66
66
  flat?: boolean;
67
+
67
68
  compact?: boolean;
69
+ verticalPadding?: TSizes;
70
+
68
71
  rightIcon?: IReqoreIconName;
69
72
  customTheme?: IReqoreCustomTheme;
70
73
  wrap?: boolean;
@@ -122,17 +125,21 @@ export const StyledButton = styled(StyledEffect)<IReqoreButtonStyle>`
122
125
  vertical-align: middle;
123
126
  border: ${({ theme, color, flat }) =>
124
127
  !flat ? `1px solid ${changeLightness(getButtonMainColor(theme, color), 0.2)}` : 0};
125
- padding: 0
126
- ${({ size, compact }) => (compact ? PADDING_FROM_SIZE[size] / 2 : PADDING_FROM_SIZE[size])}px;
128
+ padding: ${({ size, compact, verticalPadding }) =>
129
+ `${verticalPadding ? PADDING_FROM_SIZE[verticalPadding] : 0}px ${
130
+ compact ? PADDING_FROM_SIZE[size] / 2 : PADDING_FROM_SIZE[size]
131
+ }px`};
127
132
  font-size: ${({ size }) => CONTROL_TEXT_FROM_SIZE[size]}px;
128
133
 
129
134
  min-height: ${({ size }) => SIZE_TO_PX[size]}px;
130
135
  min-width: ${({ size }) => SIZE_TO_PX[size]}px;
131
136
  max-width: ${({ maxWidth, fluid, fixed }) => maxWidth || (fluid && !fixed ? '100%' : undefined)};
137
+
132
138
  ${({ wrap, description }) =>
133
139
  !wrap && !description
134
140
  ? css`
135
- max-height: ${({ size }) => SIZE_TO_PX[size]}px;
141
+ max-height: ${({ size, verticalPadding }) =>
142
+ SIZE_TO_PX[size] + (verticalPadding ? PADDING_FROM_SIZE[verticalPadding] * 2 : 0)}px;
136
143
  `
137
144
  : null}
138
145
 
@@ -475,7 +482,14 @@ const ReqoreButton = memo(
475
482
  </StyledAnimatedTextWrapper>
476
483
  )}
477
484
  {(badge || badge === 0) && !wrap ? (
478
- <ButtonBadge content={badge} size={size} theme={theme} compact={compact} />
485
+ <ButtonBadge
486
+ content={badge}
487
+ size={size}
488
+ theme={theme}
489
+ compact={compact}
490
+ wrapGroup={false}
491
+ wrap={false}
492
+ />
479
493
  ) : null}
480
494
  {!hasRightIcon ? (
481
495
  _children ? (
package/src/components/ControlGroup/index.tsx CHANGED
@@ -5,6 +5,7 @@ import styled, { css } from 'styled-components';
5
5
  import { ReqoreButton, ReqoreDrawer } from '../..';
6
6
  import { GAP_FROM_SIZE, RADIUS_FROM_SIZE, TSizes } from '../../constants/sizes';
7
7
  import { IReqoreTheme } from '../../constants/theme';
8
+ import { useCloneThroughFragments } from '../../hooks/useCloneThroughFragments';
8
9
  import {
9
10
  IReqoreIntent,
10
11
  IWithReqoreCustomTheme,
@@ -356,81 +357,56 @@ const ReqoreControlGroup = memo(
356
357
  return undefined;
357
358
  };
358
359
 
359
- let index = 0;
360
-
361
- const cloneThroughFragments = useCallback(
362
- (children: React.ReactNode): React.ReactNode => {
363
- return React.Children.map(children, (child, _index) => {
364
- if (child && React.isValidElement(child)) {
365
- if (child.type === React.Fragment) {
366
- return cloneThroughFragments(child.props.children);
367
- }
368
-
369
- let newProps = {
370
- ...child.props,
371
- key: child.props.reactKey || _index,
372
- minimal:
373
- child.props?.minimal || child.props?.minimal === false
374
- ? child.props.minimal
375
- : minimal,
376
- size: child.props?.size || size,
377
- flat: child.props?.flat || child.props?.flat === false ? child.props.flat : flat,
378
- fluid: child.props?.fluid || child.props?.fluid === false ? child.props.fluid : fluid,
379
- fixed: child.props?.fixed || child.props?.fixed === false ? child.props.fixed : fixed,
380
- fill: child.props?.fill || child.props?.fill === false ? child.props.fill : fill,
381
- stack:
382
- child.props?.stack || child.props?.stack === false ? child.props.stack : isStack,
383
- intent: child.props?.intent || intent,
384
- customTheme: child.props?.customTheme || customTheme,
385
- };
386
-
387
- if (isStack) {
388
- newProps = {
389
- ...newProps,
390
- style: {
391
- borderTopLeftRadius: getBorderTopLeftRadius(index, child.props?.rounded),
392
- borderBottomLeftRadius: getBorderBottomLeftRadius(index, child.props?.rounded),
393
- borderTopRightRadius: getBorderTopRightRadius(index, child.props?.rounded),
394
- borderBottomRightRadius: getBorderBottomRightRadius(index, child.props?.rounded),
395
- ...(child.props?.style || {}),
396
- },
397
- isChild: true,
398
- rounded:
399
- isMasterGroupRounded === false
400
- ? false
401
- : child.props?.rounded || child.props?.rounded === false
402
- ? child.props.rounded
403
- : !isStack,
404
- isMasterGroupRounded: isChild ? isMasterGroupRounded : rounded,
405
- isInsideStackGroup: isStack,
406
- isInsideVerticalGroup: isVertical,
407
- isFirst: isChild ? getIsFirst(index) : undefined,
408
- isLast: isChild ? getIsLast(index) : undefined,
409
- isLastInFirstGroup: getIsLastInFirstGroup(index),
410
- isLastInLastGroup: getIsLastInLastGroup(index),
411
- isFirstInLastGroup: getIsFirstInLastGroup(index),
412
- childrenCount: realChildCount,
413
- childId: index + 1,
414
-
415
- isFirstGroup: isChild ? isFirstGroup : index === 0,
416
- isLastGroup: isChild ? isLastGroup : index === realChildCount - 1,
417
- };
418
- }
419
-
420
- /*
421
- * Because of the way React.Children.map works, we have to
422
- * manually decrement the index for every child that is `null`
423
- * because react maps through null children and returns them in `Count`
424
- * We filter these children out in the `realChildCount` variable,
425
- * but the index is still incremented
426
- * */
427
- index = index + 1;
428
-
429
- return React.cloneElement(child, newProps);
430
- }
360
+ const { clone } = useCloneThroughFragments(
361
+ (props, _index, index) => {
362
+ let newProps: any = {
363
+ ...props,
364
+ key: props.reactKey || _index,
365
+ minimal: props?.minimal || props?.minimal === false ? props.minimal : minimal,
366
+ size: props?.size || size,
367
+ flat: props?.flat || props?.flat === false ? props.flat : flat,
368
+ fluid: props?.fluid || props?.fluid === false ? props.fluid : fluid,
369
+ fixed: props?.fixed || props?.fixed === false ? props.fixed : fixed,
370
+ fill: props?.fill || props?.fill === false ? props.fill : fill,
371
+ stack: props?.stack || props?.stack === false ? props.stack : isStack,
372
+ intent: props?.intent || intent,
373
+ customTheme: props?.customTheme || customTheme,
374
+ };
375
+
376
+ if (isStack) {
377
+ newProps = {
378
+ ...newProps,
379
+ style: {
380
+ borderTopLeftRadius: getBorderTopLeftRadius(index, props?.rounded),
381
+ borderBottomLeftRadius: getBorderBottomLeftRadius(index, props?.rounded),
382
+ borderTopRightRadius: getBorderTopRightRadius(index, props?.rounded),
383
+ borderBottomRightRadius: getBorderBottomRightRadius(index, props?.rounded),
384
+ ...(props?.style || {}),
385
+ },
386
+ isChild: true,
387
+ rounded:
388
+ isMasterGroupRounded === false
389
+ ? false
390
+ : props?.rounded || props?.rounded === false
391
+ ? props.rounded
392
+ : !isStack,
393
+ isMasterGroupRounded: isChild ? isMasterGroupRounded : rounded,
394
+ isInsideStackGroup: isStack,
395
+ isInsideVerticalGroup: isVertical,
396
+ isFirst: isChild ? getIsFirst(index) : undefined,
397
+ isLast: isChild ? getIsLast(index) : undefined,
398
+ isLastInFirstGroup: getIsLastInFirstGroup(index),
399
+ isLastInLastGroup: getIsLastInLastGroup(index),
400
+ isFirstInLastGroup: getIsFirstInLastGroup(index),
401
+ childrenCount: realChildCount,
402
+ childId: index + 1,
403
+
404
+ isFirstGroup: isChild ? isFirstGroup : index === 0,
405
+ isLastGroup: isChild ? isLastGroup : index === realChildCount - 1,
406
+ };
407
+ }
431
408
 
432
- return child;
433
- });
409
+ return newProps;
434
410
  },
435
411
  [
436
412
  children,
@@ -440,7 +416,6 @@ const ReqoreControlGroup = memo(
440
416
  isLastGroup,
441
417
  isFirstGroup,
442
418
  realChildCount,
443
- index,
444
419
  fluid,
445
420
  flat,
446
421
  minimal,
@@ -522,7 +497,7 @@ const ReqoreControlGroup = memo(
522
497
  horizontalAlign={horizontalAlign}
523
498
  className={`${className || ''} reqore-control-group`}
524
499
  >
525
- {cloneThroughFragments(_children)}
500
+ {clone(_children)}
526
501
  </StyledReqoreControlGroup>
527
502
  </>
528
503
  );
package/src/components/Menu/index.tsx CHANGED
@@ -3,9 +3,11 @@ import styled, { css } from 'styled-components';
3
3
  import { RADIUS_FROM_SIZE } from '../../constants/sizes';
4
4
  import { IReqoreCustomTheme, IReqoreTheme, TReqoreIntent } from '../../constants/theme';
5
5
  import ReqoreThemeProvider from '../../containers/ThemeProvider';
6
- import { changeDarkness, changeLightness, getMainBackgroundColor } from '../../helpers/colors';
6
+ import { changeDarkness, getMainBackgroundColor } from '../../helpers/colors';
7
+ import { useCloneThroughFragments } from '../../hooks/useCloneThroughFragments';
7
8
  import { useReqoreTheme } from '../../hooks/useTheme';
8
9
  import { IReqoreComponent, IWithReqoreMinimal, IWithReqoreTransparent } from '../../types/global';
10
+ import ReqoreControlGroup, { IReqoreControlGroupProps } from '../ControlGroup';
9
11
 
10
12
  export interface IReqoreMenuProps
11
13
  extends IReqoreComponent,
@@ -22,6 +24,7 @@ export interface IReqoreMenuProps
22
24
  flat?: boolean;
23
25
  rounded?: boolean;
24
26
  padded?: boolean;
27
+ itemGap?: IReqoreControlGroupProps['gapSize'];
25
28
  }
26
29
 
27
30
  export interface IReqoreMenuStyle extends IReqoreMenuProps {
@@ -40,19 +43,12 @@ const StyledReqoreMenu = styled.div<IReqoreMenuStyle>`
40
43
  transparent ? 'transparent' : changeDarkness(getMainBackgroundColor(theme), 0.03)};
41
44
  border-radius: ${({ rounded }) => (rounded ? `${RADIUS_FROM_SIZE['normal']}px` : `0`)};
42
45
 
43
- ${({ theme, position }) =>
46
+ ${({ theme, position, padded }) =>
44
47
  position &&
45
48
  css`
46
- border-${position === 'left' ? 'right' : 'left'}: 1px solid ${changeLightness(
47
- theme.main,
48
- 0.05
49
- )};
50
- padding-${position === 'left' ? 'right' : 'left'}: 10px;
49
+ border-${position === 'left' ? 'right' : 'left'}: 1px solid ${changeDarkness(theme.main, 0.04)};
50
+ padding-${position === 'left' ? 'right' : 'left'}: ${padded ? '10px' : undefined};
51
51
  `}
52
-
53
- > *:not(:last-child) {
54
- margin-bottom: 5px;
55
- }
56
52
  `;
57
53
 
58
54
  const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
@@ -67,11 +63,20 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
67
63
  wrapText,
68
64
  flat = true,
69
65
  minimal,
66
+ itemGap,
70
67
  ...rest
71
68
  }: IReqoreMenuProps,
72
69
  ref
73
70
  ) => {
74
71
  const theme = useReqoreTheme('main', customTheme, intent);
72
+ const { clone } = useCloneThroughFragments((props) => ({
73
+ _insidePopover: props?._insidePopover ?? _insidePopover,
74
+ _popoverId: props?._popoverId ?? _popoverId,
75
+ customTheme: props?.customTheme || theme,
76
+ wrap: 'wrap' in (props || {}) ? props.wrap : wrapText,
77
+ flat: 'flat' in (props || {}) ? props.flat : flat,
78
+ minimal: 'minimal' in (props || {}) ? props.minimal : minimal,
79
+ }));
75
80
 
76
81
  return (
77
82
  <ReqoreThemeProvider theme={theme}>
@@ -82,18 +87,9 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
82
87
  theme={theme}
83
88
  className={`${rest.className || ''} reqore-menu`}
84
89
  >
85
- {React.Children.map(children, (child) => {
86
- return child
87
- ? React.cloneElement(child, {
88
- _insidePopover: child.props?._insidePopover ?? _insidePopover,
89
- _popoverId: child.props?._popoverId ?? _popoverId,
90
- customTheme: child.props?.customTheme || theme,
91
- wrap: 'wrap' in (child.props || {}) ? child.props.wrap : wrapText,
92
- flat: 'flat' in (child.props || {}) ? child.props.flat : flat,
93
- minimal: 'minimal' in (child.props || {}) ? child.props.minimal : minimal,
94
- })
95
- : null;
96
- })}
90
+ <ReqoreControlGroup vertical gapSize={itemGap} fluid>
91
+ {clone(children)}
92
+ </ReqoreControlGroup>
97
93
  </StyledReqoreMenu>
98
94
  </ReqoreThemeProvider>
99
95
  );
package/src/components/Menu/section.tsx CHANGED
@@ -1,5 +1,6 @@
1
1
  import React, { useCallback, useEffect, useState } from 'react';
2
2
  import { TReqoreIntent } from '../../constants/theme';
3
+ import { useCloneThroughFragments } from '../../hooks/useCloneThroughFragments';
3
4
  import { IReqoreComponent } from '../../types/global';
4
5
  import ReqoreButton, { IReqoreButtonProps } from '../Button';
5
6
  import ReqoreControlGroup from '../ControlGroup';
@@ -44,6 +45,15 @@ export const ReqoreMenuSection = ({
44
45
  [_isCollapsed, onCollapseChange, collapsible, rest.onClick]
45
46
  );
46
47
 
48
+ const { clone } = useCloneThroughFragments((props) => ({
49
+ _insidePopover: props?._insidePopover ?? _insidePopover,
50
+ _popoverId: props?._popoverId ?? _popoverId,
51
+ customTheme: props?.customTheme || customTheme,
52
+ wrap: 'wrap' in (props || {}) ? props.wrap : wrap,
53
+ flat: 'flat' in (props || {}) ? props.flat : flat,
54
+ minimal: 'minimal' in (props || {}) ? props.minimal : minimal,
55
+ }));
56
+
47
57
  return (
48
58
  <ReqoreControlGroup vertical fluid className='reqore-menu-section'>
49
59
  <ReqoreButton
@@ -63,18 +73,7 @@ export const ReqoreMenuSection = ({
63
73
  />
64
74
  {!_isCollapsed || !collapsible ? (
65
75
  <ReqoreControlGroup vertical fluid style={{ paddingLeft: '10px' }}>
66
- {React.Children.map(children, (child) => {
67
- return child
68
- ? React.cloneElement(child, {
69
- _insidePopover: child.props?._insidePopover ?? _insidePopover,
70
- _popoverId: child.props?._popoverId ?? _popoverId,
71
- customTheme: child.props?.customTheme || customTheme,
72
- wrap: 'wrap' in (child.props || {}) ? child.props.wrap : wrap,
73
- flat: 'flat' in (child.props || {}) ? child.props.flat : flat,
74
- minimal: 'minimal' in (child.props || {}) ? child.props.minimal : minimal,
75
- })
76
- : null;
77
- })}
76
+ {clone(children)}
78
77
  </ReqoreControlGroup>
79
78
  ) : null}
80
79
  </ReqoreControlGroup>
package/src/hooks/useCloneThroughFragments.ts ADDED
@@ -0,0 +1,39 @@
1
+ import React, { useCallback } from 'react';
2
+
3
+ export const useCloneThroughFragments = (
4
+ propsMapper: (
5
+ props: Record<string | number, any>,
6
+ reactIndex: number,
7
+ realIndex: number
8
+ ) => Record<string | number, any>,
9
+ deps?: any[]
10
+ ) => {
11
+ let realIndex = 0;
12
+
13
+ const clone = useCallback((children: React.ReactNode): React.ReactNode => {
14
+ return React.Children.map(children, (child, reactIndex) => {
15
+ if (child && React.isValidElement(child)) {
16
+ if (child.type === React.Fragment) {
17
+ return clone(child.props.children);
18
+ }
19
+
20
+ const props = propsMapper(child.props, reactIndex, realIndex);
21
+
22
+ /*
23
+ * Because of the way React.Children.map works, we have to
24
+ * manually decrement the index for every child that is `null`
25
+ * because react maps through null children and returns them in `Count`
26
+ * We filter these children out in the `realChildCount` variable,
27
+ * but the index is still incremented
28
+ * */
29
+ realIndex = realIndex + 1;
30
+
31
+ return React.cloneElement(child, props);
32
+ }
33
+
34
+ return child;
35
+ });
36
+ }, deps);
37
+
38
+ return { clone };
39
+ };
package/src/index.tsx CHANGED
@@ -69,6 +69,7 @@ export { default as ReqoreNotifications } from './containers/ReqoreProvider';
69
69
  export { default as ReqoreUIProvider } from './containers/UIProvider';
70
70
  export { default as ReqoreContext } from './context/ReqoreContext';
71
71
  export { default as ReqoreThemeContext } from './context/ThemeContext';
72
+ export { useCloneThroughFragments } from './hooks/useCloneThroughFragments';
72
73
  export { default as useLatestZIndex } from './hooks/useLatestZIndex';
73
74
  export { useReqorePaging } from './hooks/usePaging';
74
75
  export { useReqore } from './hooks/useReqore';
package/src/stories/Button/Button.stories.tsx CHANGED
@@ -88,6 +88,28 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
88
88
  Disabled not flat
89
89
  </ReqoreButton>
90
90
  </ReqoreControlGroup>
91
+ <ReqoreControlGroup fluid wrap>
92
+ <ReqoreButton {...buttonProps} verticalPadding='tiny'>
93
+ Vertical padding tiny
94
+ </ReqoreButton>
95
+ <ReqoreButton {...buttonProps} verticalPadding='small'>
96
+ Vertical padding small
97
+ </ReqoreButton>
98
+ <ReqoreButton {...buttonProps} verticalPadding='normal'>
99
+ Vertical padding normal
100
+ </ReqoreButton>
101
+ <ReqoreButton {...buttonProps} verticalPadding='big'>
102
+ Vertical padding big
103
+ </ReqoreButton>
104
+ <ReqoreButton
105
+ {...buttonProps}
106
+ verticalPadding='huge'
107
+ badge={10}
108
+ description='This is a description'
109
+ >
110
+ Vertical padding huge
111
+ </ReqoreButton>
112
+ </ReqoreControlGroup>
91
113
  <ReqoreControlGroup fluid wrap>
92
114
  <ReqoreButton {...buttonProps} fluid>
93
115
  Fluid button
package/src/stories/Menu/Menu.stories.tsx CHANGED
@@ -137,8 +137,8 @@ const Template: StoryFn<IReqoreMenuProps> = (args) => {
137
137
  <ReqoreMenuItem icon='Save3Fill' intent='success' selected>
138
138
  Selected success
139
139
  </ReqoreMenuItem>
140
- <ReqoreMenuItem icon='Save3Fill' badge={10}>
141
- Save
140
+ <ReqoreMenuItem icon='Save3Fill' badge={[10, 20]}>
141
+ Save this item
142
142
  </ReqoreMenuItem>
143
143
  <ReqoreMenuDivider label='BIG Divider' size='huge' />
144
144
  <ReqoreMenuItem
@@ -154,17 +154,19 @@ const Template: StoryFn<IReqoreMenuProps> = (args) => {
154
154
  Delete
155
155
  </ReqoreMenuItem>
156
156
 
157
- <ReqoreMenuItem
158
- icon='BluetoothConnectLine'
159
- rightIcon='EditLine'
160
- onRightIconClick={() => alert('Icon clicked')}
161
- description='Button with right icon and description'
162
- customTheme={{
163
- main: 'info:darken:1:0.3',
164
- }}
165
- >
166
- Some button
167
- </ReqoreMenuItem>
157
+ <>
158
+ <ReqoreMenuItem
159
+ icon='BluetoothConnectLine'
160
+ rightIcon='EditLine'
161
+ onRightIconClick={() => alert('Icon clicked')}
162
+ description='Button with right icon and description'
163
+ customTheme={{
164
+ main: 'info:darken:1:0.3',
165
+ }}
166
+ >
167
+ Some button
168
+ </ReqoreMenuItem>
169
+ </>
168
170
 
169
171
  <ReqoreMenuItem icon='Lock2Fill' description='I also have a description'>
170
172
  This is a really long item that should wrap
@@ -296,6 +298,24 @@ export const Transparent: Story = {
296
298
  },
297
299
  };
298
300
 
301
+ export const Positioned: Story = {
302
+ render: Template,
303
+
304
+ args: {
305
+ position: 'left',
306
+ padded: false,
307
+ rounded: false,
308
+ },
309
+ };
310
+
311
+ export const BigGapSize: Story = {
312
+ render: Template,
313
+
314
+ args: {
315
+ itemGap: 'big',
316
+ },
317
+ };
318
+
299
319
  export const SubmenuCanBeToggled: Story = {
300
320
  render: (args) => <MenuWithSubmenus {...args} />,
301
321
  play: async ({ canvasElement, ...rest }) => {