@qoretechnologies/reqore 0.37.1 → 0.37.2

package/src/components/Tabs/item.tsx

@@ -2,7 +2,7 @@ import { omit } from 'lodash';
 import { forwardRef, memo } from 'react';
 import styled, { css } from 'styled-components';
 import { IReqoreTabsListItem } from '.';
-import { TABS_PADDING_TO_PX, TSizes } from '../../constants/sizes';
+import { TSizes } from '../../constants/sizes';
 import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
@@ -29,7 +29,7 @@ export interface IReqoreTabListItemStyle extends IReqoreTabListItemProps {
 }
 
 export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
-  ${({ disabled, vertical, size, fill, padded }: IReqoreTabListItemStyle) => {
+  ${({ disabled, vertical, fill, padded }: IReqoreTabListItemStyle) => {
     return css`
       display: flex;
       flex-shrink: 0;
@@ -37,9 +37,6 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
       position: relative;
       align-items: center;
       width: ${vertical ? `100%` : undefined};
-      padding: ${`${TABS_PADDING_TO_PX[size!]}px`};
-      padding-bottom: ${!vertical && 0};
-      padding-right: ${vertical && 0};
 
       ${vertical
         ? css`

package/src/components/Tabs/list.tsx

@@ -1,13 +1,13 @@
-import { isArray } from 'lodash';
+import { isArray, isObject } from 'lodash';
 import React from 'react';
 import { useMeasure } from 'react-use';
 import styled, { css } from 'styled-components';
 import { IReqoreTabsListItem, IReqoreTabsProps } from '.';
 import { ReqorePopover } from '../..';
 import {
+  GAP_FROM_SIZE,
   ICON_FROM_SIZE,
   PADDING_FROM_SIZE,
-  TABS_PADDING_TO_PX,
   TEXT_FROM_SIZE,
   TSizes,
 } from '../../constants/sizes';
@@ -18,12 +18,14 @@ import {
   getColorFromMaybeString,
   getNthGradientColor,
 } from '../../helpers/colors';
-import { calculateStringSizeInPixels } from '../../helpers/utils';
+import { calculateStringSizeInPixels, getOneLessSize } from '../../helpers/utils';
 import { useReqoreTheme } from '../../hooks/useTheme';
+import { IReqoreButtonProps } from '../Button';
 import { TReqoreHexColor } from '../Effect';
 import ReqoreMenu from '../Menu';
 import ReqoreMenuItem, { IReqoreMenuItemProps } from '../Menu/item';
 import { StyledPopover } from '../Popover';
+import { IReqoreTagProps } from '../Tag';
 import ReqoreTabsListItem, { IReqoreTabListItemProps, StyledTabListItem } from './item';
 
 export interface IReqoreTabsListProps
@@ -39,20 +41,30 @@ export interface IReqoreTabsListStyle extends Omit<IReqoreTabsListProps, 'tabs'>
 }
 
 export const StyledReqoreTabsList = styled.div<IReqoreTabsListStyle>`
-  ${({ fill, vertical, currentTabColor, width }) => css`
+  ${({ fill, vertical, size, padded, flat, currentTabColor, width }) => css`
     height: ${vertical ? '100%' : undefined};
     width: ${vertical ? width || '200px' : '100%'};
     flex-flow: ${vertical ? 'column' : 'row'};
     display: flex;
     align-items: center;
+
+    gap: ${GAP_FROM_SIZE[size]}px;
+
+    ${padded &&
+    css`
+      padding: 0 ${PADDING_FROM_SIZE[size]}px;
+    `}
+
+    ${!flat &&
+    css`
     border-${vertical ? 'right' : 'bottom'}: 1px solid ${changeLightness(currentTabColor, 0.175)};
+    `}
 
-    ${
-      fill &&
-      css`
-        justify-content: space-around;
-      `
-    }
+
+    ${fill &&
+    css`
+      justify-content: space-around;
+    `}
 
     ${StyledPopover} {
       > ${StyledTabListItem} {
@@ -73,8 +85,27 @@ const getMoreLabel = (items: IReqoreTabsListItem[], activeTab?: string | number)
   return 'More';
 };
 
-const getLabel = (
-  item: IReqoreTabsListItem | IReqoreTabsListItem[],
+const getBadgeLength = (badge: IReqoreButtonProps['badge'], tabsSize: TSizes = 'normal') => {
+  if (!badge) {
+    return 0;
+  }
+
+  if (isArray(badge)) {
+    return badge.reduce((len, b) => len + getBadgeLength(b), 0);
+  }
+
+  if (isObject(badge)) {
+    return getLabelLength(badge, undefined, getOneLessSize(tabsSize)) + PADDING_FROM_SIZE[tabsSize];
+  }
+
+  return (
+    calculateStringSizeInPixels(badge.toString(), TEXT_FROM_SIZE[getOneLessSize(tabsSize)]) +
+    PADDING_FROM_SIZE[tabsSize]
+  );
+};
+
+const getLabelLength = (
+  item: IReqoreTabsListItem | IReqoreTabsListItem[] | IReqoreTagProps,
   activeTab?: string | number,
   tabsSize: TSizes = 'normal'
 ) => {
@@ -82,11 +113,29 @@ const getLabel = (
     return 0;
   }
 
-  const label: string = isArray(item) ? getMoreLabel(item, activeTab) : item.label;
-  const icon: number = isArray(item) || item.icon ? ICON_FROM_SIZE[tabsSize] : 0;
-  const closeIconSize = isArray(item) || !item.onCloseClick ? 0 : ICON_FROM_SIZE[tabsSize] * 2;
+  const label: string | number = isArray(item) ? getMoreLabel(item, activeTab) : item.label;
+  const icon: number =
+    isArray(item) || item.icon ? ICON_FROM_SIZE[tabsSize] + PADDING_FROM_SIZE[tabsSize] : 0;
+  const rightIcon = (item as IReqoreTagProps).rightIcon
+    ? ICON_FROM_SIZE[tabsSize] + PADDING_FROM_SIZE[tabsSize]
+    : 0;
+  const closeIconSize =
+    isArray(item) ||
+    !(item as IReqoreTabsListItem).onCloseClick ||
+    !(item as IReqoreTagProps).onRemoveClick
+      ? 0
+      : ICON_FROM_SIZE[tabsSize] * 2;
+  const badgeLength = isArray(item)
+    ? 0
+    : getBadgeLength((item as IReqoreTabsListItem).badge, tabsSize);
 
-  return calculateStringSizeInPixels(label, TEXT_FROM_SIZE[tabsSize]) + icon + closeIconSize;
+  return (
+    calculateStringSizeInPixels(label?.toString(), TEXT_FROM_SIZE[tabsSize]) +
+    icon +
+    closeIconSize +
+    badgeLength +
+    rightIcon
+  );
 };
 
 /**
@@ -105,15 +154,15 @@ export const getTabsLength = (
 ): number =>
   items.reduce((len, item) => {
     if (type === 'height') {
-      const rows = getLabel(item, activeTab, tabsSize) / 4 || 1;
+      const rows = getLabelLength(item, activeTab, tabsSize) / 4 || 1;
 
       return len + rows * 15 + 10;
     }
 
     const labelLength: number =
-      PADDING_FROM_SIZE[tabsSize] * 3 +
-      TABS_PADDING_TO_PX[tabsSize] * 2 +
-      getLabel(item, activeTab, tabsSize);
+      PADDING_FROM_SIZE[tabsSize] * 2 +
+      GAP_FROM_SIZE[tabsSize] * 2 +
+      getLabelLength(item, activeTab, tabsSize);
 
     return len + labelLength;
   }, 0);
@@ -264,7 +313,7 @@ const ReqoreTabsList = ({
                           } as IReqoreMenuItemProps)}
                           tooltip={tooltip}
                           {...rest}
-                          key={index + label}
+                          key={index + label?.toString()}
                         >
                           {label}
                         </ReqoreMenuItem>

package/src/components/Tree/index.tsx

@@ -2,6 +2,7 @@ import { cloneDeep, size as lodashSize } from 'lodash';
 import { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { ReqoreMessage, ReqorePanel, useReqoreProperty } from '../..';
+import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { getTypeFromValue } from '../../helpers/utils';
 import { IWithReqoreSize } from '../../types/global';
@@ -28,12 +29,21 @@ export interface IReqoreTreeProps extends IReqorePanelProps, IWithReqoreSize {
 export interface ITreeStyle {
   interactive?: boolean;
   theme: IReqoreTheme;
+  level?: number;
+  size?: TSizes;
 }
 
 export const StyledTreeLabel = styled(ReqoreMessage)`
   flex-shrink: 1;
 `;
 
+export const StyledTreeWrapper = styled.div<ITreeStyle>`
+  display: flex;
+  flex-flow: column;
+  gap: ${({ size }) => GAP_FROM_SIZE[size]}px;
+  margin-left: ${({ level, size }) => (level ? level * GAP_FROM_SIZE[size] : 0)}px;
+`;
+
 export const ReqoreTree = ({
   data,
   size = 'normal',
@@ -98,7 +108,7 @@ export const ReqoreTree = ({
       }
 
       return (
-        <div key={index} style={{ margin: level === 1 ? '15px 0' : `15px` }}>
+        <StyledTreeWrapper key={index} size={zoomToSize[zoom]} level={level}>
           {isObject ? (
             <ReqoreControlGroup size={zoomToSize[zoom]}>
               <ReqoreButton
@@ -113,7 +123,7 @@ export const ReqoreTree = ({
               {_showTypes ? <ReqoreTag label={dataType} className='reqore-tree-type' /> : null}
             </ReqoreControlGroup>
           ) : (
-            <ReqoreControlGroup size={zoomToSize[zoom]}>
+            <ReqoreControlGroup size={zoomToSize[zoom]} verticalAlign='flex-start'>
               <ReqoreTag
                 label={displayKey}
                 actions={
@@ -148,7 +158,7 @@ export const ReqoreTree = ({
           {isExpandable && isObject
             ? renderTree(data[key], stateKey, level + 1, [...path, key])
             : null}
-        </div>
+        </StyledTreeWrapper>
       );
     });
   };
@@ -226,6 +236,11 @@ export const ReqoreTree = ({
         flat
         transparent
         size={size}
+        contentStyle={{
+          display: 'flex',
+          flexFlow: 'column',
+          gap: `${GAP_FROM_SIZE[size]}px`,
+        }}
         {...rest}
         actions={actions}
       >

package/src/containers/UIProvider.tsx

@@ -42,19 +42,20 @@ const GlobalStyle = createGlobalStyle`
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: 999998;
+    z-index: 8998;
     cursor: pointer;
     background-color: ${({ theme }) => rgba(getMainBackgroundColor(theme), 0.3)};
     backdrop-filter: blur(3px);
   }
 
   .reqore-blur-z-index {
-    z-index: 999999;
+    z-index: 8999;
   }
 `;
 
 const StyledPortal = styled.div`
   z-index: 9999;
+  position: relative;
 
   * {
     box-sizing: border-box;

package/src/helpers/utils.ts

@@ -86,7 +86,7 @@ export const calculateStringSizeInPixels = (value: string = '', fontSize: number
   /* It's calculating the width of a string in pixels. */
   return (
     Array.from(value).reduce((acc, cur) => acc + (widths[cur.charCodeAt(0)] ?? avg), 0) *
-    (fontSize * 1.15)
+    (fontSize * 1.35)
   );
 };
 

package/src/index.tsx

@@ -10,6 +10,7 @@ export { ReqoreCommentFeed } from './components/CommentFeed';
 export { default as ReqoreContent } from './components/Content';
 export { default as ReqoreControlGroup } from './components/ControlGroup';
 export { ReqoreDrawer } from './components/Drawer';
+export { ReqoreBackdrop } from './components/Drawer/backdrop';
 export { default as ReqoreDropdown } from './components/Dropdown';
 export { ReqoreDropdownDivider, ReqoreDropdownItem } from './components/Dropdown/item';
 export { ReqoreEffect, ReqoreTextEffect } from './components/Effect';

package/src/stories/Modal/Manager.stories.tsx

@@ -117,7 +117,7 @@ export const FromCustomElement: Story = {
         <ReqoreBackdrop />
         <div
           className='custom-modal reqore-modal'
-          style={{ position: 'absolute', left: '50%', top: '50%' }}
+          style={{ position: 'fixed', left: '50%', top: '50%' }}
         >
           This is a custom modal
         </div>

package/src/stories/Tabs/Tabs.stories.tsx

@@ -264,11 +264,11 @@ export const NotFlat: Story = {
   },
 };
 
-export const NoTabsPadding: Story = {
+export const WithPadding: Story = {
   render: Template,
 
   args: {
-    padded: false,
+    padded: true,
   },
 };