@qoretechnologies/reqore 0.37.1 → 0.37.3

package/src/components/Tag/index.tsx

@@ -24,6 +24,7 @@ import { ActiveIconScale, InactiveIconScale } from '../../styles';
 import {
   IReqoreDisabled,
   IReqoreIntent,
+  IWithReqoreCustomTheme,
   IWithReqoreEffect,
   IWithReqoreFluid,
   IWithReqoreMinimal,
@@ -51,7 +52,8 @@ export interface IReqoreTagProps
     IReqoreDisabled,
     IWithReqoreMinimal,
     IWithReqoreFluid,
-    IWithReqoreEffect {
+    IWithReqoreEffect,
+    IWithReqoreCustomTheme {
   fixed?: boolean | 'key' | 'label';
   size?: TSizes;
   label?: string | number;
@@ -116,10 +118,10 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
     css`
       background-color: ${color || changeLightness(theme.main, 0.1)};
       color: ${minimal
-        ? getReadableColor(theme, undefined, undefined, true, theme.originalMain)
+        ? getReadableColor(theme, undefined, undefined, true)
         : color
         ? getReadableColorFrom(color)
-        : getReadableColor(theme, undefined, undefined)};
+        : getReadableColorFrom(changeLightness(theme.main, 0.1))};
 
       ${StyledTagKeyWrapper} {
         background-color: ${labelKey ? rgba('#000000', 0.2) : undefined};
@@ -251,6 +253,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       intent,
       color,
       minimal,
+      customTheme,
       wrap = false,
       width,
       leftIconColor,
@@ -263,7 +266,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
     ref
   ) => {
     const { targetRef } = useCombinedRefs(ref);
-    const theme: IReqoreTheme = useReqoreTheme();
+    const theme: IReqoreTheme = useReqoreTheme('main', customTheme);
     const [itemRef, setItemRef] = useState<HTMLDivElement>(undefined);
 
     useTooltip(itemRef, tooltip);
@@ -282,6 +285,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
     return (
       <StyledTag
         {...rest}
+        theme={theme}
         effect={{
           ...rest.effect,
           gradient: intent ? undefined : rest.effect?.gradient,
@@ -317,7 +321,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
               <ReqoreIcon
                 icon={icon}
                 size={size}
-                margin={label ? 'left' : 'both'}
+                margin={label || labelKey ? 'left' : 'both'}
                 color={leftIconColor || iconColor}
               />
             )}
@@ -364,7 +368,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
               <ReqoreIcon
                 icon={rightIcon}
                 size={size}
-                margin={label || icon ? 'right' : 'both'}
+                margin={label || (icon && !labelKey) ? 'right' : 'both'}
                 color={rightIconColor || iconColor}
               />
             )}

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,
   },
 };
 

package/src/stories/Tag/Tag.stories.tsx

@@ -87,6 +87,12 @@ const Template: StoryFn<IReqoreTagProps> = (args) => {
         label={2}
       />
       <ReqoreTag label='With Icon' icon='AlarmWarningLine' {...args} />
+      <ReqoreTag
+        {...args}
+        labelKey='Without label'
+        icon='AlarmWarningLine'
+        rightIcon='24HoursFill'
+      />
       <ReqoreTag
         label='With Icon Colors'
         icon='AlarmWarningLine'