@qoretechnologies/reqore 0.27.6 → 0.28.1

package/src/components/Tabs/list.tsx

@@ -4,7 +4,13 @@ import { useMeasure } from 'react-use';
 import styled, { css } from 'styled-components';
 import { IReqoreTabsListItem, IReqoreTabsProps } from '.';
 import { ReqorePopover } from '../..';
-import { TABS_SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import {
+  ICON_FROM_SIZE,
+  PADDING_FROM_SIZE,
+  TABS_PADDING_TO_PX,
+  TEXT_FROM_SIZE,
+  TSizes,
+} from '../../constants/sizes';
 import { IReqoreBreadcrumbsTheme, IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { changeLightness } from '../../helpers/colors';
@@ -28,13 +34,13 @@ export interface IReqoreTabsListStyle extends Omit<IReqoreTabsListProps, 'tabs'>
 }
 
 export const StyledReqoreTabsList = styled.div<IReqoreTabsListStyle>`
-  ${({ theme, fill, vertical, size, width }) => css`
-    height: ${vertical ? '100%' : `${TABS_SIZE_TO_PX[size]}px`};
+  ${({ fill, vertical, currentTabColor, width }) => css`
+    height: ${vertical ? '100%' : undefined};
     width: ${vertical ? width || '200px' : '100%'};
     flex-flow: ${vertical ? 'column' : 'row'};
     display: flex;
     align-items: center;
-    border-${vertical ? 'right' : 'bottom'}: 1px solid ${changeLightness(theme.main, 0.05)};
+    border-${vertical ? 'right' : 'bottom'}: 1px solid ${changeLightness(currentTabColor, 0.175)};
 
     ${
       fill &&
@@ -72,12 +78,20 @@ const getLabel = (
   }
 
   const label: string = isArray(item) ? getMoreLabel(item, activeTab) : item.label;
-  const icon: number = isArray(item) || item.icon ? TEXT_FROM_SIZE[tabsSize] : 0;
-  const closeIconSize = isArray(item) || !item.onCloseClick ? 0 : 30;
+  const icon: number = isArray(item) || item.icon ? ICON_FROM_SIZE[tabsSize] : 0;
+  const closeIconSize = isArray(item) || !item.onCloseClick ? 0 : ICON_FROM_SIZE[tabsSize] * 2;
 
   return calculateStringSizeInPixels(label, TEXT_FROM_SIZE[tabsSize]) + icon + closeIconSize;
 };
 
+/**
+ * This function returns the total width or height of the tabs.
+ * @param items the items that will be rendered in the tabs
+ * @param type the type of calculation, either width or height
+ * @param activeTab the currently active tab
+ * @param tabsSize the size of the tabs
+ * @returns the total width or height of the tabs
+ */
 export const getTabsLength = (
   items: (IReqoreTabsListItem | IReqoreTabsListItem[])[],
   type: 'width' | 'height' = 'width',
@@ -91,7 +105,12 @@ export const getTabsLength = (
       return len + rows * 15 + 10;
     }
 
-    return len + 36 + getLabel(item, activeTab, tabsSize);
+    const labelLength: number =
+      PADDING_FROM_SIZE[tabsSize] * 3 +
+      TABS_PADDING_TO_PX[tabsSize] * 2 +
+      getLabel(item, activeTab, tabsSize);
+
+    return len + labelLength;
   }, 0);
 
 const getTransformedItems = (
@@ -142,6 +161,11 @@ const ReqoreTabsList = ({
 }: IReqoreTabsListProps) => {
   const [ref, { width, height }] = useMeasure();
   const theme = useReqoreTheme('main', customTheme, intent);
+  const activeTabData = tabs.find((tab) => tab.id === activeTab);
+  const currentTabColor =
+    activeTabIntent || activeTabData?.intent
+      ? theme.intents[activeTabIntent || activeTabData.intent]
+      : activeTabData?.customTheme?.main || theme.main;
 
   const transformedItems = vertical
     ? tabs
@@ -164,6 +188,7 @@ const ReqoreTabsList = ({
         ref={ref}
         flat={flat}
         theme={theme}
+        currentTabColor={currentTabColor}
       >
         {transformedItems.map((item: IReqoreTabsListItem | IReqoreTabsListItem[], index: number) =>
           isArray(item) ? (
@@ -178,7 +203,11 @@ const ReqoreTabsList = ({
                     label: getMoreLabel(item, activeTab),
                     active: !!isTabHidden(item, activeTab),
                     activeIntent: activeTabIntent,
-                    customTheme: theme,
+                    customTheme: !!isTabHidden(item, activeTab)
+                      ? {
+                          main: currentTabColor,
+                        }
+                      : theme,
                     vertical,
                     flat,
                     size,
@@ -203,6 +232,7 @@ const ReqoreTabsList = ({
                         intent,
                         activeIntent,
                         closeIcon,
+                        ...rest
                       }) => (
                         <ReqoreMenuItem
                           {...({
@@ -212,11 +242,12 @@ const ReqoreTabsList = ({
                             intent: activeTab === id ? activeIntent || intent : intent,
                             disabled,
                             rightIcon: onCloseClick ? closeIcon || 'CloseLine' : undefined,
-                            onRightIconClick: onCloseClick
-                              ? () => {
-                                  onCloseClick(id);
-                                }
-                              : undefined,
+                            onRightIconClick:
+                              onCloseClick && !disabled
+                                ? () => {
+                                    onCloseClick(id);
+                                  }
+                                : undefined,
                             selected: activeTab === id,
                             onClick: (_id, event: React.MouseEvent<any>) => {
                               if (!disabled) {
@@ -229,6 +260,7 @@ const ReqoreTabsList = ({
                             },
                           } as IReqoreMenuItemProps)}
                           tooltip={tooltip}
+                          {...rest}
                           key={index + label}
                         >
                           {label}
@@ -242,13 +274,13 @@ const ReqoreTabsList = ({
           ) : (
             <React.Fragment key={index}>
               <ReqoreTabsListItem
-                {...item}
+                customTheme={theme}
                 fill={fill}
                 size={size}
                 flat={flat}
                 activeIntent={activeTabIntent}
-                customTheme={theme}
                 wrapTabNames={wrapTabNames}
+                {...item}
                 key={index}
                 vertical={vertical}
                 active={activeTab === item.id}

package/src/components/Tag/group.tsx

@@ -7,21 +7,38 @@ export interface IReqoreTagGroup extends React.HTMLAttributes<HTMLDivElement> {
   children: any;
   size?: TSizes;
   columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
+  hasBottomMargin?: boolean;
 }
 
 const StyledTagGroup = styled.div`
+  flex-shrink: 0;
+
   ${StyledTag} {
-    margin-right: 5px;
-    margin-bottom: 5px;
+    &:not(:last-child) {
+      margin-right: 5px;
+    }
+
+    margin-bottom: ${({ hasBottomMargin }) => (hasBottomMargin ? '5px' : '0px')};
   }
 `;
 
-const ReqoreTagGroup = ({ children, size, className, columns, ...rest }: IReqoreTagGroup) => (
-  <StyledTagGroup {...rest} className={`${className || ''} reqore-tag-group`}>
+const ReqoreTagGroup = ({
+  children,
+  size,
+  className,
+  columns,
+  hasBottomMargin = true,
+  ...rest
+}: IReqoreTagGroup) => (
+  <StyledTagGroup
+    {...rest}
+    hasBottomMargin={hasBottomMargin}
+    className={`${className || ''} reqore-tag-group`}
+  >
     {React.Children.map(children, (child) =>
       child
         ? React.cloneElement(child, {
-            size,
+            size: child.props?.size || size,
             width: columns ? `calc(${100 / columns}% - 5px)` : child.props.width,
           })
         : null

package/src/components/Tag/index.tsx

@@ -20,6 +20,7 @@ import {
   IReqoreDisabled,
   IReqoreIntent,
   IWithReqoreEffect,
+  IWithReqoreMinimal,
   IWithReqoreTooltip,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
@@ -35,7 +36,8 @@ export interface IReqoreTagProps
   extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,
     IWithReqoreTooltip,
     IReqoreDisabled,
-    IWithReqoreEffect {
+    IWithReqoreEffect,
+    IWithReqoreMinimal {
   size?: TSizes;
   label?: string | number;
   labelKey?: string | number;
@@ -48,6 +50,7 @@ export interface IReqoreTagProps
   width?: string;
   badge?: boolean;
   intent?: TReqoreIntent;
+  wrap?: boolean;
 }
 
 export interface IReqoreTagStyle extends IReqoreTagProps {
@@ -60,39 +63,55 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   display: inline-flex;
   justify-content: center;
   flex-shrink: 0;
-  align-items: center;
+  align-items: stretch;
   font-family: system-ui;
   font-weight: 600;
   overflow: hidden;
   vertical-align: middle;
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
-  height: ${({ size, badge }) => (badge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
+
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
   border-radius: ${({ badge, size }) => (badge ? 18 : RADIUS_FROM_SIZE[size])}px;
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
 
-  ${({ theme, color, labelKey }) =>
+  ${({ wrap, hasWidth }) =>
+    wrap || hasWidth
+      ? css`
+          min-height: ${({ size, badge }) => (badge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
+        `
+      : css`
+          height: ${({ size, badge }) => (badge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
+        `}
+
+  ${({ theme, color, labelKey, minimal }: IReqoreTagStyle) =>
     css`
       background-color: ${color || changeLightness(theme.main, 0.1)};
-      color: ${color ? getReadableColorFrom(color) : getReadableColor(theme, undefined, undefined)};
+      color: ${minimal
+        ? getReadableColor(theme, undefined, undefined, true, theme.originalMain)
+        : color
+        ? getReadableColorFrom(color)
+        : getReadableColor(theme, undefined, undefined)};
 
-      ${StyledTagContentWrapper} {
+      ${StyledTagKeyWrapper} {
         background-color: ${labelKey ? rgba('#000000', 0.2) : undefined};
       }
     `}
 
-  ${({ theme, color, interactive }) =>
-    interactive &&
-    css`
-      cursor: pointer;
-      &:hover {
-        background-color: ${changeLightness(color || theme.main, color ? 0.05 : 0.15)};
-        color: ${color
-          ? getReadableColorFrom(color)
-          : getReadableColor(theme, undefined, undefined)};
-      }
-    `}
+  ${({ theme, color, interactive, minimal, effect }) =>
+    interactive && !effect?.gradient
+      ? css`
+          cursor: pointer;
+          &:hover {
+            background-color: ${changeLightness(color || theme.main, color ? 0.05 : 0.15)};
+            color: ${minimal
+              ? getReadableColor(theme, undefined, undefined, false, theme.originalMain)
+              : color
+              ? getReadableColorFrom(color)
+              : getReadableColor(theme, undefined, undefined)};
+          }
+        `
+      : undefined}
 
 
   ${({ disabled }) =>
@@ -106,34 +125,58 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
 
 const StyledTagRightIcon = styled(ReqoreIcon)``;
 
-const StyledTagContentWrapper = styled.div<{ size: TSizes }>`
+const StyledTagKeyWrapper = styled.span<{ size: TSizes }>`
   display: flex;
   align-items: center;
   justify-content: center;
+  flex: ${({ hasKey }) => (hasKey ? 1 : undefined)};
   flex-shrink: 0;
+  min-height: 100%;
+`;
+
+const StyledTagContentWrapper = styled.span<{ size: TSizes }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
   flex: 1;
-  overflow: hidden;
-  height: 100%;
+  flex-shrink: 0;
+  min-height: 100%;
 `;
 
 const StyledTagContent = styled.span<{ size: TSizes }>`
-  padding: 0 ${({ size }) => PADDING_FROM_SIZE[size]}px;
-  height: 100%;
+  padding: 4px ${({ size }) => PADDING_FROM_SIZE[size]}px;
+  min-height: 100%;
   display: flex;
   align-items: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  flex: 1;
+
+  ${({ wrap, hasWidth }) =>
+    !wrap && !hasWidth
+      ? css`
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        `
+      : css`
+          word-break: break-word;
+        `}
 `;
 
 const StyledTagContentKey = styled(StyledTagContent)`
   font-weight: 800;
+  flex: 1;
+
+  ${({ wrap, hasWidth }) =>
+    !wrap && !hasWidth
+      ? undefined
+      : css`
+          word-break: break-word;
+        `}
 `;
 
-const StyledButtonWrapper = styled.div<IReqoreTagStyle>`
+const StyledButtonWrapper = styled.span<IReqoreTagStyle>`
   flex-shrink: 0;
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
-  height: ${({ size }) => SIZE_TO_PX[size]}px;
   width: ${({ size }) => SIZE_TO_PX[size]}px;
   display: flex;
   justify-content: center;
@@ -172,6 +215,9 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       badge,
       intent,
       color,
+      minimal,
+      wrap = false,
+      width,
       ...rest
     }: IReqoreTagProps,
     ref
@@ -182,40 +228,69 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
     useTooltip(targetRef.current, tooltip);
 
     // If color or intent was specified, set the color
-    const customColor = intent ? theme.intents[intent] : color;
+    let customColor = intent ? theme.intents[intent] : color;
+    customColor = minimal ? `${customColor || '#000000'}40` : customColor;
 
     return (
       <StyledTag
         {...rest}
+        effect={{
+          ...rest.effect,
+          interactive: !!onClick && !rest.disabled,
+        }}
+        width={width}
         labelKey={labelKey}
         color={customColor}
         className={`${className || ''} reqore-tag`}
         size={size}
         ref={targetRef}
         badge={badge}
+        minimal={minimal}
         removable={!!onRemoveClick}
         interactive={!!onClick && !rest.disabled}
+        wrap={wrap}
+        hasWidth={!!width}
       >
         {icon || labelKey ? (
-          <StyledTagContentWrapper size={size} className='reqore-tag-content' onClick={onClick}>
-            {icon && (
-              <ReqoreIcon
-                icon={icon}
-                size={`${TEXT_FROM_SIZE[size]}px`}
-                margin={label ? 'left' : 'both'}
+          <StyledTagKeyWrapper
+            size={size}
+            className='reqore-tag-key-content'
+            onClick={onClick}
+            wrap={wrap}
+            hasWidth={!!width}
+            hasKey={!!labelKey}
+          >
+            {icon && <ReqoreIcon icon={icon} size={size} margin={label ? 'left' : 'both'} />}
+            {labelKey && (
+              <StyledTagContentKey wrap={wrap} hasWidth={!!width} size={size}>
+                {labelKey}
+              </StyledTagContentKey>
+            )}
+          </StyledTagKeyWrapper>
+        ) : null}
+        {label || label === 0 || rightIcon ? (
+          <StyledTagContentWrapper
+            size={size}
+            className='reqore-tag-content'
+            onClick={onClick}
+            wrap={wrap}
+            hasWidth={!!width}
+            hasKey={!!labelKey}
+          >
+            {label || label === 0 ? (
+              <StyledTagContent size={size} onClick={onClick} wrap={wrap} hasWidth={!!width}>
+                {label}
+              </StyledTagContent>
+            ) : null}
+            {rightIcon && (
+              <StyledTagRightIcon
+                icon={rightIcon}
+                size={size}
+                margin={label || icon ? 'right' : 'both'}
               />
             )}
-            {labelKey && <StyledTagContentKey size={size}>{labelKey}</StyledTagContentKey>}
           </StyledTagContentWrapper>
         ) : null}
-        {label && <StyledTagContent size={size}>{label}</StyledTagContent>}
-        {rightIcon && (
-          <StyledTagRightIcon
-            icon={rightIcon}
-            size={`${TEXT_FROM_SIZE[size]}px`}
-            margin={label || icon ? 'right' : 'both'}
-          />
-        )}
         {_size(actions)
           ? actions.map((action) => (
               <>
@@ -234,7 +309,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                     : {})}
                   noWrapper
                 >
-                  <ReqoreIcon icon={action.icon} size={`${TEXT_FROM_SIZE[size]}px`} />
+                  <ReqoreIcon icon={action.icon} size={size} />
                 </ReqorePopover>
               </>
             ))
@@ -251,7 +326,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             noWrapper
             content='Remove'
           >
-            <ReqoreIcon icon='CloseLine' size={`${TEXT_FROM_SIZE[size]}px`} />
+            <ReqoreIcon icon='CloseLine' size={size} />
           </ReqorePopover>
         ) : null}
       </StyledTag>

package/src/constants/sizes.ts

@@ -1,6 +1,8 @@
 export type TSizes = 'tiny' | 'small' | 'normal' | 'big' | 'huge';
 export type TWeights = 'soft' | 'normal' | 'heavy';
 
+export const SIZES = ['tiny', 'small', 'normal', 'big', 'huge'] as const;
+
 export const SIZE_TO_NUMBER = {
   tiny: 1,
   small: 2,
@@ -17,6 +19,14 @@ export const NUMBER_TO_SIZE = {
   5: 'huge',
 };
 
+export const HEADER_SIZE_TO_NUMBER = {
+  tiny: 5,
+  small: 4,
+  normal: 3,
+  big: 2,
+  huge: 1,
+};
+
 export const SIZE_TO_PX = {
   tiny: 10,
   small: 20,
@@ -27,8 +37,8 @@ export const SIZE_TO_PX = {
 
 export const BADGE_SIZE_TO_PX = {
   tiny: 10,
-  small: 17,
-  normal: 23,
+  small: 18,
+  normal: 24,
   big: 30,
   huge: 36,
 };
@@ -73,12 +83,20 @@ export const TEXT_FROM_SIZE = {
   huge: 21,
 };
 
+export const ICON_FROM_SIZE = {
+  tiny: 11,
+  small: 14,
+  normal: 17,
+  big: 20,
+  huge: 23,
+};
+
 export const PADDING_FROM_SIZE = {
-  tiny: 2,
-  small: 5,
-  normal: 8,
-  big: 11,
-  huge: 14,
+  tiny: 5,
+  small: 8,
+  normal: 11,
+  big: 14,
+  huge: 17,
 };
 
 export const RADIUS_FROM_SIZE = {
@@ -90,12 +108,20 @@ export const RADIUS_FROM_SIZE = {
 };
 
 export const ICON_FROM_HEADER_SIZE = {
-  1: 21,
-  2: 18,
-  3: 15,
-  4: 12,
-  5: 9,
-  6: 6,
+  1: 23,
+  2: 20,
+  3: 17,
+  4: 14,
+  5: 11,
+  6: 8,
+};
+
+export const ICON_WRAPPER_FROM_HEADER_SIZE = {
+  huge: 34,
+  big: 26,
+  normal: 19,
+  small: 17,
+  tiny: 15,
 };
 
 export const WEIGHT_TO_NUMBER = {

package/src/containers/ReqoreProvider.tsx

@@ -25,7 +25,7 @@ export interface IReqoreNotificationData {
   type?: IReqoreNotificationType;
   intent?: TReqoreIntent;
   flat?: boolean;
-  inverted?: boolean;
+  minimal?: boolean;
   size?: TSizes;
 }
 

package/src/containers/UIProvider.tsx

@@ -27,6 +27,9 @@ export interface IReqoreUIProviderProps {
 
 const StyledPortal = styled.div`
   z-index: 9999;
+  * {
+    box-sizing: border-box;
+  }
 `;
 
 const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = ({ children, theme, options }) => {

package/src/helpers/colors.ts

@@ -108,7 +108,7 @@ export const buildTheme = (theme: IReqoreTheme): IReqoreTheme => {
   }
 
   if (!newTheme.notifications?.muted) {
-    newTheme.notifications.muted = newTheme.intents.muted || DEFAULT_INTENTS.muted;
+    newTheme.notifications.muted = `${newTheme.intents.muted || DEFAULT_INTENTS.muted}30`;
   }
 
   return newTheme;
@@ -122,9 +122,13 @@ export const mergeThemes = (element: string, theme: IReqoreTheme, customTheme: a
   }
 
   if (element === 'main' && customTheme) {
-    merge(clonedTheme, { main: customTheme.main, originalMain: clonedTheme.main });
+    merge(clonedTheme, {
+      main: customTheme.main,
+      originalMain: clonedTheme.main,
+      text: customTheme.text,
+    });
   } else {
-    merge(clonedTheme, { [element]: customTheme || {} });
+    merge(clonedTheme, { [element]: customTheme || {}, text: customTheme.text });
   }
 
   return clonedTheme;
@@ -135,7 +139,7 @@ export const getNotificationIntent = (theme: IReqoreTheme, intent?: TReqoreInten
     return theme.notifications[intent];
   }
 
-  return theme.main;
+  return changeLightness(theme.main, 0.1);
 };
 
 export const getMainBackgroundColor = (theme: IReqoreTheme): string =>

package/src/helpers/utils.ts

@@ -8,7 +8,7 @@ import {
   isString,
   isUndefined,
 } from 'lodash';
-import { NUMBER_TO_SIZE, SIZE_TO_NUMBER, TSizes } from '../constants/sizes';
+import { NUMBER_TO_SIZE, SIZES, SIZE_TO_NUMBER, TSizes } from '../constants/sizes';
 
 export const sleep = async (ms: number) => await new Promise((r) => setTimeout(r, ms));
 
@@ -71,10 +71,15 @@ 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
+    Array.from(value).reduce((acc, cur) => acc + (widths[cur.charCodeAt(0)] ?? avg), 0) *
+    (fontSize * 1.15)
   );
 };
 
+export const isStringSize = (value: TSizes | string | number) => {
+  return SIZES.includes(value as TSizes);
+};
+
 export const getOneLessSize = (size: TSizes): TSizes => {
   // Get the initial sizes number
   const initialSizeNumber: number = SIZE_TO_NUMBER[size];

package/src/mock/collectionData.tsx

@@ -50,18 +50,22 @@ export default [
     ],
   },
   {
+    icon: 'TextWrap',
     label: 'Item that is not minimal',
     tooltip: 'This is a test item',
     content:
       'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
     minimal: false,
+    badge: 0,
   },
   {
+    icon: 'FolderWarningFill',
     label: 'Expandable item',
     tooltip: 'This is a test item',
     content:
       'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
     expandable: true,
+    badge: 10,
     tags: [
       {
         label: 23,