@qoretechnologies/reqore 0.27.5 → 0.28.0

package/src/components/Notifications/notification.tsx

@@ -1,27 +1,29 @@
 import { animated, useTransition } from '@react-spring/web';
-import { darken, rgba } from 'polished';
+import { rgba } from 'polished';
 import React, { forwardRef, useEffect, useState } from 'react';
 import { useMount, useUnmount } from 'react-use';
 import styled, { css, keyframes } from 'styled-components';
 import { SPRING_CONFIG } from '../../constants/animations';
-import { PADDING_FROM_SIZE, TABS_SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import {
+  ICON_WRAPPER_FROM_HEADER_SIZE,
+  PADDING_FROM_SIZE,
+  TABS_SIZE_TO_PX,
+  TEXT_FROM_SIZE,
+  TSizes,
+} from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { fadeIn } from '../../helpers/animations';
-import {
-  changeDarkness,
-  changeLightness,
-  getNotificationIntent,
-  getReadableColorFrom,
-} from '../../helpers/colors';
-import { IWithReqoreEffect } from '../../types/global';
+import { changeLightness, getNotificationIntent, getReadableColor } from '../../helpers/colors';
+import { IWithReqoreEffect, IWithReqoreMinimal } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import { StyledEffect } from '../Effect';
+import { ReqoreHeading } from '../Header';
 import ReqoreIcon from '../Icon';
 
 export type IReqoreNotificationType = TReqoreIntent;
 
-export interface IReqoreNotificationProps extends IWithReqoreEffect {
+export interface IReqoreNotificationProps extends IWithReqoreEffect, IWithReqoreMinimal {
   type?: IReqoreNotificationType;
   intent?: TReqoreIntent;
   title?: string;
@@ -33,7 +35,6 @@ export interface IReqoreNotificationProps extends IWithReqoreEffect {
   onFinish?: () => any;
   fluid?: boolean;
   flat?: boolean;
-  inverted?: boolean;
   size?: TSizes;
 }
 
@@ -46,7 +47,7 @@ export interface IReqoreNotificationStyle {
   hasShadow?: boolean;
   fluid?: boolean;
   flat?: boolean;
-  inverted?: boolean;
+  minimal?: boolean;
   size?: TSizes;
   asMessage?: boolean;
 }
@@ -79,8 +80,6 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
           animation: 0.2s ${fadeIn} ease-in;
         `};
 
-  font-size: ${({ size = 'normal' }) => TEXT_FROM_SIZE[size]}px;
-
   &:not(:first-child) {
     margin-top: ${({ asMessage }) => (asMessage ? undefined : `10px`)};
   }
@@ -93,13 +92,13 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
     timeout,
     hasShadow,
     flat,
-    inverted,
+    minimal,
   }: IReqoreNotificationStyle) => css`
-    background-color: ${inverted ? 'transparent' : getNotificationIntent(theme, intent || type)};
+    background-color: ${minimal
+      ? 'transparent'
+      : rgba(getNotificationIntent(theme, intent || type), 0.3)};
     border: ${flat ? 0 : '1px solid'};
-    border-color: ${inverted
-      ? getNotificationIntent(theme, intent || type)
-      : darken(0.2, getNotificationIntent(theme, intent || type))};
+    border-color: ${getNotificationIntent(theme, intent || type)};
 
     ${hasShadow &&
     css`
@@ -120,30 +119,32 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
       }
     `}
 
-    color: ${inverted && (intent || type)
-      ? getNotificationIntent(theme, intent || type)
-      : getReadableColorFrom(getNotificationIntent(theme, intent || type), true)};
+    color: ${getReadableColor(theme, null, null, true, theme.originalMain)};
 
     ${clickable &&
     css`
       cursor: pointer;
       &:hover {
-        background-color: ${inverted
-          ? rgba(changeDarkness(getNotificationIntent(theme, intent || type), 0.2), 0.1)
-          : changeLightness(getNotificationIntent(theme, intent || type), 0.0625)};
+        background-color: ${rgba(
+          getNotificationIntent(theme, intent || type),
+          minimal ? 0.2 : 0.5
+        )};
+        border-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.1)};
       }
     `}
   `}
 `;
 
 export const StyledIconWrapper = styled.div<IReqoreNotificationStyle>`
-  min-height: ${({ size = 'normal' }: IReqoreNotificationStyle) => TABS_SIZE_TO_PX[size]}px;
+  height: ${({ size = 'normal' }: IReqoreNotificationStyle) =>
+    ICON_WRAPPER_FROM_HEADER_SIZE[size]}px;
   flex: 0 1 auto;
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.2s ease-out;
+  margin-top: ${({ size = 'normal' }: IReqoreNotificationStyle) => `${PADDING_FROM_SIZE[size]}px`};
 
   ${({ clickable, theme, intent, type }) =>
     clickable &&
@@ -178,12 +179,17 @@ export const StyledNotificationTitle = styled.h4`
   align-items: center;
 `;
 
-export const StyledNotificationContent = styled.p`
+export const StyledNotificationContent = styled.div`
   margin: 0;
   padding: 0;
   flex: 1;
-  display: flex;
-  align-items: center;
+  font-size: ${({ size = 'normal' }) => TEXT_FROM_SIZE[size]}px;
+
+  ${({ hasTitle, size = 'normal' }) =>
+    hasTitle &&
+    css`
+      padding-top: ${PADDING_FROM_SIZE[size]}px;
+    `}
 `;
 
 export const typeToIcon: { [type: string]: IReqoreIconName } = {
@@ -195,10 +201,7 @@ export const typeToIcon: { [type: string]: IReqoreIconName } = {
   muted: 'Forbid2Line',
 };
 
-const ReqoreNotification: React.FC<IReqoreNotificationProps> = forwardRef<
-  HTMLDivElement,
-  IReqoreNotificationProps
->(
+const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
   (
     {
       type,
@@ -211,7 +214,7 @@ const ReqoreNotification: React.FC<IReqoreNotificationProps> = forwardRef<
       duration,
       onFinish,
       flat,
-      inverted,
+      minimal,
       size = 'normal',
     },
     ref: any
@@ -262,7 +265,7 @@ const ReqoreNotification: React.FC<IReqoreNotificationProps> = forwardRef<
             clickable={!!onClick}
             onClick={onClick}
             flat={flat}
-            inverted={inverted}
+            minimal={minimal}
             className='reqore-notification'
             ref={ref}
             style={styles}
@@ -270,16 +273,14 @@ const ReqoreNotification: React.FC<IReqoreNotificationProps> = forwardRef<
           >
             {type || intent || icon ? (
               <StyledIconWrapper type={type || intent} size={size}>
-                <ReqoreIcon
-                  icon={icon || typeToIcon[type || intent]}
-                  margin={'both'}
-                  size={`${TEXT_FROM_SIZE[size]}px`}
-                />
+                <ReqoreIcon icon={icon || typeToIcon[type || intent]} margin={'both'} size={size} />
               </StyledIconWrapper>
             ) : null}
             <StyledNotificationContentWrapper size={size}>
-              {title && <StyledNotificationTitle>{title}</StyledNotificationTitle>}
-              <StyledNotificationContent>{content}</StyledNotificationContent>
+              {title && <ReqoreHeading size={size}>{title}</ReqoreHeading>}
+              <StyledNotificationContent hasTitle={!!title} size={size}>
+                {content}
+              </StyledNotificationContent>
             </StyledNotificationContentWrapper>
             <StyledIconWrapper
               type={type || intent}
@@ -291,7 +292,7 @@ const ReqoreNotification: React.FC<IReqoreNotificationProps> = forwardRef<
                 onClose && onClose();
               }}
             >
-              <ReqoreIcon icon='CloseFill' margin='both' size={`${TEXT_FROM_SIZE[size]}px`} />
+              <ReqoreIcon icon='CloseFill' margin='both' size={size} />
             </StyledIconWrapper>
           </StyledReqoreNotification>
         </ReqoreThemeProvider>

package/src/components/Panel/index.tsx

@@ -5,6 +5,7 @@ import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
   ICON_FROM_HEADER_SIZE,
+  PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
   TEXT_FROM_SIZE,
   TSizes,
@@ -19,6 +20,7 @@ import {
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
+import { ACTIVE_ICON_SCALE, INACTIVE_ICON_SCALE } from '../../styles';
 import {
   IReqoreIntent,
   IWithReqoreCustomTheme,
@@ -27,19 +29,20 @@ import {
   IWithReqoreTooltip,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import ReqoreButton, { IReqoreButtonProps } from '../Button';
+import ReqoreButton, { ButtonBadge, IReqoreButtonProps, TReqoreBadge } from '../Button';
 import { StyledCollectionItemContent } from '../Collection/item';
 import ReqoreControlGroup from '../ControlGroup';
 import ReqoreDropdown from '../Dropdown';
 import { IReqoreDropdownItem } from '../Dropdown/list';
 import { IReqoreEffect, StyledEffect } from '../Effect';
 import { ReqoreHeading } from '../Header';
-import ReqoreIcon from '../Icon';
+import ReqoreIcon, { StyledIconWrapper } from '../Icon';
+import { ReqoreSpacer } from '../Spacer';
 
 export interface IReqorePanelAction extends IReqoreButtonProps, IWithReqoreTooltip, IReqoreIntent {
   label?: string | number;
   onClick?: () => void;
-  actions?: IReqoreDropdownItem[];
+  actions?: Omit<IReqoreDropdownItem[], 'value'>;
   // Custom react element
   as?: React.ElementType;
   props?: any;
@@ -62,7 +65,7 @@ export interface IReqorePanelProps
   children?: any;
   icon?: IReqoreIconName;
   label?: string | ReactElement<any>;
-
+  badge?: TReqoreBadge | TReqoreBadge[];
   collapsible?: boolean;
   isCollapsed?: boolean;
   onClose?: () => void;
@@ -114,6 +117,10 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
           cursor: pointer;
 
           &:hover {
+            ${StyledPanelTitle} > div > ${StyledIconWrapper} {
+              transform: scale(${ACTIVE_ICON_SCALE});
+            }
+
             background-color: ${rgba(
               darken(0.025, rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)),
               opacity === 0 ? 0.2 : opacity
@@ -159,7 +166,7 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
 export const StyledPanelTitle = styled.div<IStyledPanel>`
   display: flex;
   background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
-    rgba(changeLightness(getMainBackgroundColor(theme), 0.07), opacity)};
+    rgba(changeLightness(getMainBackgroundColor(theme), 0.03), opacity)};
   justify-content: space-between;
   height: 40px;
   align-items: center;
@@ -175,13 +182,21 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
   overflow: hidden;
   flex: 0 0 auto;
 
+  > div > ${StyledIconWrapper} {
+    transform: scale(${INACTIVE_ICON_SCALE});
+  }
+
   ${({ collapsible }) =>
     collapsible &&
     css`
       cursor: pointer;
       &:hover {
+        > div > ${StyledIconWrapper} {
+          transform: scale(${ACTIVE_ICON_SCALE});
+        }
+
         background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
-          rgba(changeLightness(getMainBackgroundColor(theme), 0.1), opacity)};
+          rgba(changeLightness(getMainBackgroundColor(theme), 0.05), opacity)};
       }
     `}
 `;
@@ -247,6 +262,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       contentSize = 'normal',
       minimal,
       tooltip,
+      badge,
       ...rest
     }: IReqorePanelProps,
     ref
@@ -267,12 +283,17 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       setIsCollapsed(!!isCollapsed);
     }, [isCollapsed]);
 
+    // Return true if the card has a title bar, otherwise return false.
     const hasTitleBar: boolean = useMemo(
-      () => !!label || collapsible || !!onClose || !!size(actions),
-      [label, collapsible, onClose, actions]
+      () => !!label || collapsible || !!onClose || !!size(actions) || !!badge,
+      [label, collapsible, onClose, actions, badge]
     );
 
+    // If collapsible is true, toggle the isCollapsed state
+    // If the isCollapsed state is true, the component is expanded
+    // If the isCollapsed state is false, the component is collapsed
     const handleCollapseClick = useCallback(() => {
+      // If collapsible is true, toggle the isCollapsed state
       if (collapsible) {
         setIsCollapsed(!_isCollapsed);
         onCollapseChange?.(!_isCollapsed);
@@ -289,6 +310,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       [bottomActions]
     );
 
+    // Calculates whether or not the bottom actions should be displayed.
     const hasBottomActions: boolean = useMemo(
       () => !!(size(leftBottomActions) || size(rightBottomActions)),
       [leftBottomActions, rightBottomActions]
@@ -437,6 +459,16 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
               ) : (
                 label
               )}
+              {badge && (
+                <>
+                  <ButtonBadge
+                    color={changeLightness(theme.main, 0.18)}
+                    size='big'
+                    content={badge}
+                  />
+                  <ReqoreSpacer width={PADDING_FROM_SIZE.normal} />
+                </>
+              )}
             </StyledPanelTitleHeader>
             <ReqoreControlGroup>
               {actions.map(renderActions)}

package/src/components/Table/row.tsx

@@ -342,7 +342,7 @@ const ReqoreTableRow = ({
                 ? 'CheckboxCircleLine'
                 : 'CheckboxBlankCircleLine'
             }
-            size={`${TEXT_FROM_SIZE[size]}px`}
+            size={size}
             style={{ opacity: !data[index]._selectId || !isSelected ? 0.4 : 1 }}
           />
         </StyledTableCell>

package/src/components/Tabs/index.tsx

@@ -2,22 +2,18 @@ import React, { ReactElement, useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { TSizes } from '../../constants/sizes';
 import { IReqoreCustomTheme, TReqoreIntent } from '../../constants/theme';
-import { TReqoreTooltipProp } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
+import { IReqoreButtonProps } from '../Button';
 import ReqoreTabsList from './list';
 
-export interface IReqoreTabsListItem {
+export interface IReqoreTabsListItem extends Omit<IReqoreButtonProps, 'id'> {
   label: string;
-  icon?: IReqoreIconName;
   as?: any;
-  disabled?: boolean;
   id: string | number;
-  tooltip?: TReqoreTooltipProp;
   props?: React.HTMLAttributes<any>;
   onClick?: (event: any) => any;
   onCloseClick?: (id: string | number) => any;
   activeIntent?: TReqoreIntent;
-  intent?: TReqoreIntent;
   closeIcon?: IReqoreIconName;
 }
 

package/src/components/Tabs/item.tsx

@@ -3,11 +3,10 @@ import styled, { css } from 'styled-components';
 import { IReqoreTabsListItem } from '.';
 import { TABS_PADDING_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
-import { changeLightness } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { IWithReqoreFlat } from '../../types/global';
-import ReqoreButton from '../Button';
+import ReqoreButton, { StyledButton } from '../Button';
 import ReqoreControlGroup from '../ControlGroup';
 
 export interface IReqoreTabListItemProps extends IReqoreTabsListItem, IWithReqoreFlat {
@@ -28,7 +27,7 @@ export interface IReqoreTabListItemStyle extends IReqoreTabListItemProps {
 }
 
 export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
-  ${({ active, disabled, vertical, activeColor, size, fill }: IReqoreTabListItemStyle) => {
+  ${({ disabled, vertical, size, fill }: IReqoreTabListItemStyle) => {
     return css`
       display: flex;
       flex-shrink: 0;
@@ -37,19 +36,30 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
       align-items: center;
       width: ${vertical ? `100%` : undefined};
       padding: ${vertical ? `${TABS_PADDING_TO_PX[size!]}px` : `${TABS_PADDING_TO_PX[size!]}px`};
-      ${active &&
-      css`
-        &:after {
-          width: ${vertical ? '5px' : '1px'};
-          height: ${vertical ? '1px' : '5px'};
-          left: ${vertical ? '0' : '50%'};
-          top: ${vertical ? '50%' : undefined};
-          bottom: ${vertical ? undefined : '0'};
-          content: '';
-          position: absolute;
-          background-color: ${activeColor};
-        }
-      `}
+      padding-bottom: ${!vertical && 0};
+      padding-right: ${vertical && 0};
+
+      ${vertical
+        ? css`
+            ${StyledButton}:last-child {
+              border-right: 0;
+            }
+            ${StyledButton}:last-child {
+              border-top-right-radius: 0;
+              border-bottom-right-radius: 0;
+            }
+          `
+        : css`
+            ${StyledButton} {
+              border-bottom: 0;
+            }
+            ${StyledButton}:first-child {
+              border-bottom-left-radius: 0;
+            }
+            ${StyledButton}:last-child {
+              border-bottom-right-radius: 0;
+            }
+          `}
 
       ${fill &&
       css`
@@ -98,13 +108,13 @@ const ReqoreTabsListItem = memo(
         className,
         flat = true,
         wrapTabNames,
+        id,
+        ...rest
       }: IReqoreTabListItemProps,
       ref
     ) => {
       const { targetRef } = useCombinedRefs(ref);
       const theme = useReqoreTheme('main', customTheme);
-      const _intent = activeIntent || intent;
-      const activeColor = _intent ? theme.intents[_intent] : changeLightness(theme.main, 0.05);
 
       return (
         <StyledTabListItem
@@ -112,8 +122,6 @@ const ReqoreTabsListItem = memo(
           {...props}
           className={className}
           intent={intent}
-          activeIntent={activeIntent}
-          activeColor={activeColor}
           as={as}
           size={size}
           active={active}
@@ -125,7 +133,7 @@ const ReqoreTabsListItem = memo(
           {label || icon ? (
             <ReqoreControlGroup stack size={size} fluid={fill || vertical}>
               <ReqoreButton
-                flat={active || intent ? false : flat}
+                flat={intent ? false : flat}
                 fluid={fill || vertical}
                 icon={icon}
                 minimal
@@ -135,21 +143,22 @@ const ReqoreTabsListItem = memo(
                 disabled={disabled}
                 onClick={onClick}
                 tooltip={tooltip}
-                customTheme={customTheme}
+                customTheme={theme}
                 className={`reqore-tabs-list-item ${active ? 'reqore-tabs-list-item-active' : ''}`}
+                {...rest}
               >
                 {label}
               </ReqoreButton>
               {onCloseClick && !disabled ? (
                 <ReqoreButton
                   fixed
-                  flat={active || intent ? false : flat}
+                  flat={intent ? false : flat}
                   icon={closeIcon || 'CloseLine'}
                   intent={active ? activeIntent || intent : intent}
                   minimal
                   active={active}
                   className='reqore-tabs-list-item-close'
-                  customTheme={customTheme}
+                  customTheme={theme}
                   onClick={(event) => {
                     event.stopPropagation();
                     onCloseClick?.();

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,9 @@ const ReqoreTabsList = ({
                     label: getMoreLabel(item, activeTab),
                     active: !!isTabHidden(item, activeTab),
                     activeIntent: activeTabIntent,
-                    customTheme: theme,
+                    customTheme: {
+                      main: currentTabColor,
+                    },
                     vertical,
                     flat,
                     size,
@@ -203,6 +230,7 @@ const ReqoreTabsList = ({
                         intent,
                         activeIntent,
                         closeIcon,
+                        ...rest
                       }) => (
                         <ReqoreMenuItem
                           {...({
@@ -212,11 +240,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 +258,7 @@ const ReqoreTabsList = ({
                             },
                           } as IReqoreMenuItemProps)}
                           tooltip={tooltip}
+                          {...rest}
                           key={index + label}
                         >
                           {label}
@@ -242,13 +272,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}