@qoretechnologies/reqore 0.28.6 → 0.29.1

package/src/components/Menu/divider.tsx

@@ -7,11 +7,12 @@ import { IWithReqoreEffect, IWithReqoreSize } from '../../types/global';
 import { IReqoreEffect, StyledTextEffect } from '../Effect';
 
 export interface IReqoreMenuDividerProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,
     IWithReqoreEffect,
     IWithReqoreSize {
-  label?: string;
+  label?: string | number;
   margin?: 'left' | 'right' | 'both';
+  align?: 'left' | 'center' | 'right';
 }
 
 export const StyledMenuDivider = styled(StyledTextEffect)`
@@ -38,7 +39,17 @@ export const StyledMenuDivider = styled(StyledTextEffect)`
 `;
 
 const ReqoreMenuDivider = forwardRef<HTMLDivElement, IReqoreMenuDividerProps>(
-  ({ label, className, effect, size = 'normal', ...rest }: IReqoreMenuDividerProps, ref: any) => (
+  (
+    {
+      label,
+      className,
+      effect,
+      size = 'normal',
+      align = 'center',
+      ...rest
+    }: IReqoreMenuDividerProps,
+    ref: any
+  ) => (
     <StyledMenuDivider
       as='div'
       {...rest}
@@ -49,7 +60,7 @@ const ReqoreMenuDivider = forwardRef<HTMLDivElement, IReqoreMenuDividerProps>(
         {
           uppercase: true,
           spaced: 2,
-          textAlign: 'center',
+          textAlign: align,
           textSize: getOneLessSize(size),
           weight: 'bold',
           ...effect,

package/src/components/Menu/index.tsx

@@ -81,10 +81,10 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
                 React.cloneElement(child, {
                   _insidePopover,
                   _popoverId,
-                  customTheme: child?.props.customTheme || theme,
+                  customTheme: child.props?.customTheme || theme,
                   wrap: wrapText,
-                  flat: 'flat' in child?.props ? child.props.flat : flat,
-                  minimal: 'minimal' in child?.props ? child.props.minimal : minimal,
+                  flat: 'flat' in (child.props || {}) ? child.props.flat : flat,
+                  minimal: 'minimal' in (child.props || {}) ? child.props.minimal : minimal,
                 })
               : null;
           })}

package/src/components/MultiSelect/index.tsx

@@ -0,0 +1,292 @@
+import { omit, size } from 'lodash';
+import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useUpdateEffect } from 'react-use';
+import { ReqoreDropdown, ReqoreInput } from '../..';
+import { TSizes } from '../../constants/sizes';
+import { IPopoverControls } from '../../hooks/usePopover';
+import ReqoreControlGroup, { IReqoreControlGroupProps } from '../ControlGroup';
+import { IReqoreDropdownProps } from '../Dropdown';
+import { IReqoreDropdownItem } from '../Dropdown/list';
+import { IReqoreEffect } from '../Effect';
+import { IReqoreInputProps } from '../Input';
+import ReqoreTag, { IReqoreTagProps } from '../Tag';
+import ReqoreTagGroup from '../Tag/group';
+
+export type TReqoreMultiSelectItem = Omit<IReqoreDropdownItem, 'color'> &
+  Pick<IReqoreTagProps, 'asBadge' | 'rightIcon' | 'actions'> & { isNew?: boolean };
+
+export interface IReqoreMultiSelectProps
+  extends Omit<IReqoreControlGroupProps, 'children' | 'vertical' | 'stack'> {
+  value?: string[];
+  onValueChange?: (value: string[]) => void;
+  items?: TReqoreMultiSelectItem[];
+  onItemClick?: (item: IReqoreDropdownItem) => void;
+  onItemClickIcon?: IReqoreTagProps['rightIcon'];
+  canRemoveItems?: boolean;
+  canCreateItems?: boolean;
+  selectedItemEffect?: IReqoreEffect;
+  selectedItemSize?: TSizes;
+  selectorProps?: Omit<IReqoreInputProps, 'value' | 'onValueChange'> & IReqoreDropdownProps;
+  openOnMount?: IReqoreDropdownProps['openOnMount'];
+  enterKeySelects?: boolean;
+}
+
+export interface IReqoreMultiSelectItemProps
+  extends Pick<IReqoreMultiSelectProps, 'selectedItemEffect' | 'selectedItemSize'> {
+  item: TReqoreMultiSelectItem;
+  onClick?: () => void;
+  onRemoveClick?: () => void;
+  onItemClickIcon?: IReqoreTagProps['rightIcon'];
+}
+
+export const ReqoreMultiSelectItem = memo(
+  ({
+    item,
+    onRemoveClick,
+    onClick,
+    selectedItemEffect,
+    selectedItemSize,
+    onItemClickIcon,
+  }: IReqoreMultiSelectItemProps) => {
+    if (!item) {
+      return null;
+    }
+
+    return (
+      <ReqoreTag
+        {...item}
+        label={item.label || item.value}
+        onRemoveClick={onRemoveClick}
+        intent={item.intent}
+        effect={!item.intent ? item.effect || selectedItemEffect : undefined}
+        size={selectedItemSize}
+        onClick={onClick}
+        rightIcon={item.rightIcon || item.disabled ? undefined : onItemClickIcon}
+      />
+    );
+  }
+);
+
+export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectProps>(
+  (
+    {
+      value,
+      onValueChange,
+      onItemClick,
+      canRemoveItems,
+      canCreateItems,
+      items = [],
+      selectedItemEffect,
+      selectedItemSize,
+      selectorProps,
+      openOnMount,
+      enterKeySelects,
+      onItemClickIcon,
+      ...rest
+    }: IReqoreMultiSelectProps,
+    ref
+  ) => {
+    const [_value, setValue] = useState<string[]>(value || []);
+    const [createdItems, setCreatedItems] = useState<TReqoreMultiSelectItem[]>([]);
+    const [query, setQuery] = useState<string>('');
+    const popoverData = useRef<IPopoverControls>(undefined);
+    const [focused, setFocused] = useState<boolean>(false);
+
+    useUpdateEffect(() => {
+      onValueChange?.(_value);
+    }, [_value]);
+
+    useEffect(() => {
+      setValue(value || []);
+    }, [value]);
+
+    useEffect(() => {
+      if (query && !popoverData.current?.isOpen()) {
+        popoverData.current?.open();
+      }
+    }, [query]);
+
+    useEffect(() => {
+      if (enterKeySelects) {
+        document.addEventListener('keydown', handleKeyDown);
+      }
+
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown);
+      };
+    });
+
+    const addRemoveItem = useCallback(
+      (item: TReqoreMultiSelectItem): void => {
+        if (_value.includes(item.value)) {
+          setValue(_value.filter((v) => v !== item.value));
+        } else {
+          setValue([..._value, item.value]);
+        }
+      },
+      [_value, value]
+    );
+
+    const handleItemSelect = useCallback(
+      (item: Partial<TReqoreMultiSelectItem>) => {
+        addRemoveItem(item);
+
+        if (item.isNew) {
+          setCreatedItems([
+            ...createdItems,
+            {
+              value: item.value,
+            },
+          ]);
+        }
+
+        setQuery('');
+      },
+      [createdItems, _value]
+    );
+
+    /*
+    This code creates a list of all items that are available
+    for selection in the dropdown. It will include the items
+    that are passed in as props, as well as any items that the
+    user has created.
+    */
+    const allItems: TReqoreMultiSelectItem[] = useMemo(() => {
+      const customItems: TReqoreMultiSelectItem[] = size(createdItems)
+        ? [{ divider: true, label: 'Custom Items' }, ...createdItems]
+        : [];
+
+      let filteredItems: TReqoreMultiSelectItem[] = [...items, ...customItems].filter((item) =>
+        query
+          ? item.divider
+            ? false
+            : (item.label || item.value)?.toString().toLowerCase().indexOf(query.toLowerCase()) !==
+              -1
+          : true
+      );
+
+      // Mark selected items as selected
+      filteredItems = filteredItems.map((item: TReqoreMultiSelectItem) => ({
+        ...omit(item, ['actions', 'asBadge', 'rightIcon']),
+        selected: _value.includes(item.value),
+      }));
+
+      if (query && !size(filteredItems)) {
+        filteredItems = [
+          { label: 'No existing items found', readOnly: true, minimal: true, icon: 'ForbidLine' },
+        ];
+      }
+
+      // If there is a query and there are filtered items
+      // and there is no item that exactly matches the query, add it to the list
+      if (
+        query &&
+        !filteredItems.some((item: TReqoreMultiSelectItem) => item.value === query) &&
+        canCreateItems
+      ) {
+        filteredItems = [
+          {
+            label: `Create new "${query}"`,
+            value: query,
+            isNew: true,
+            icon: 'AddCircleLine',
+            minimal: true,
+            flat: false,
+            effect: {
+              gradient: {
+                colors: {
+                  0: 'success',
+                  100: 'success:darken:1',
+                },
+              },
+            },
+          },
+          { divider: true, label: 'Items matching your query' },
+          ...filteredItems,
+        ];
+      }
+
+      return filteredItems;
+    }, [items, createdItems, query, _value]);
+
+    const handleKeyDown = useCallback(
+      (e: KeyboardEvent) => {
+        if (e.key === 'Enter' && focused) {
+          const item = [...items, ...createdItems].find((item) => item.value === query);
+
+          if (item) {
+            handleItemSelect(item);
+          } else if (canCreateItems && query) {
+            handleItemSelect({
+              value: query,
+              isNew: true,
+            });
+          }
+        }
+      },
+      [items, createdItems, query, canCreateItems, focused]
+    );
+
+    const getItemByValue = useCallback(
+      (value: string): TReqoreMultiSelectItem => {
+        return [...items, ...createdItems].find((item) => item.value === value);
+      },
+      [items, createdItems, _value]
+    );
+
+    return (
+      <ReqoreControlGroup vertical fluid {...rest} ref={ref}>
+        <ReqoreTagGroup minimal={rest.minimal} size={rest.size}>
+          {size(_value) ? (
+            _value.map((v) => (
+              <ReqoreMultiSelectItem
+                key={v}
+                item={getItemByValue(v)}
+                onItemClickIcon={onItemClickIcon}
+                onRemoveClick={canRemoveItems ? () => addRemoveItem(getItemByValue(v)) : undefined}
+                onClick={
+                  onItemClick
+                    ? () => {
+                        onItemClick(getItemByValue(v));
+                      }
+                    : undefined
+                }
+                selectedItemEffect={selectedItemEffect}
+                selectedItemSize={selectedItemSize}
+              />
+            ))
+          ) : (
+            <ReqoreTag color='transparent' icon='ForbidLine' label='No items selected' />
+          )}
+        </ReqoreTagGroup>
+        <ReqoreControlGroup minimal={rest.minimal} flat={rest.flat} size={rest.size}>
+          <ReqoreDropdown<IReqoreInputProps>
+            {...selectorProps}
+            multiSelect
+            handler='focus'
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            passPopoverData={(data) => (popoverData.current = data)}
+            component={ReqoreInput}
+            onClearClick={() => setQuery('')}
+            value={query}
+            isDefaultOpen={openOnMount}
+            onItemSelect={handleItemSelect}
+            placeholder={
+              canCreateItems ? 'Type to search or create an item...' : 'Type to search...'
+            }
+            onChange={(e: any) => setQuery(e.target.value)}
+            items={
+              size(allItems)
+                ? allItems
+                : canCreateItems
+                ? [{ label: 'No items exist', readOnly: true, minimal: true, icon: 'ForbidLine' }]
+                : []
+            }
+            useTargetWidth
+          />
+        </ReqoreControlGroup>
+      </ReqoreControlGroup>
+    );
+  }
+);

package/src/components/Panel/index.tsx

@@ -8,14 +8,14 @@ import {
   PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
   TEXT_FROM_SIZE,
-  TSizes
+  TSizes,
 } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import {
   changeDarkness,
   changeLightness,
   getMainBackgroundColor,
-  getReadableColor
+  getReadableColor,
 } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
@@ -26,7 +26,7 @@ import {
   IWithReqoreCustomTheme,
   IWithReqoreFlat,
   IWithReqoreSize,
-  IWithReqoreTooltip
+  IWithReqoreTooltip,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreButton, { ButtonBadge, IReqoreButtonProps, TReqoreBadge } from '../Button';
@@ -323,7 +323,9 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       (actionOrActions: IReqorePanelAction | IReqorePanelAction[], index: number) => {
         if (Array.isArray(actionOrActions)) {
           return (
-            <ReqoreControlGroup stack>{actionOrActions.map(renderActions)}</ReqoreControlGroup>
+            <ReqoreControlGroup key={index} stack>
+              {actionOrActions.map(renderActions)}
+            </ReqoreControlGroup>
           );
         }
 

package/src/components/Popover/index.tsx

@@ -1,6 +1,6 @@
-import React, { memo, useState } from 'react';
+import React, { memo, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import usePopover, { IPopoverOptions } from '../../hooks/usePopover';
+import usePopover, { IPopoverControls, IPopoverOptions } from '../../hooks/usePopover';
 import { IReqoreComponent } from '../../types/global';
 
 export interface IReqorePopoverProps extends IReqoreComponent, IPopoverOptions {
@@ -26,13 +26,18 @@ const Popover = memo(
     noWrapper,
     wrapperTag = 'span',
     wrapperStyle = {},
+    passPopoverData,
     _insidePopover,
     _popoverId,
     ...rest
   }: IReqorePopoverProps) => {
     const [ref, setRef] = useState(undefined);
 
-    usePopover({ targetElement: ref, ...rest });
+    const popoverData: IPopoverControls = usePopover({ targetElement: ref, ...rest });
+
+    useEffect(() => {
+      passPopoverData?.(popoverData);
+    }, [popoverData]);
 
     if (isReqoreComponent || noWrapper) {
       return (

package/src/components/RadioGroup/index.tsx

@@ -19,6 +19,8 @@ export interface IReqoreRadioGroupProps
   size?: TSizes;
   disabled?: boolean;
   asSwitch?: boolean;
+  onText?: string;
+  offText?: string;
 }
 
 const ReqoreRadioGroup = ({
@@ -29,6 +31,8 @@ const ReqoreRadioGroup = ({
   disabled,
   asSwitch,
   vertical = true,
+  onText,
+  offText,
   ...rest
 }: IReqoreRadioGroupProps) => (
   <ReqoreControlGroup {...rest} vertical={vertical}>
@@ -44,6 +48,8 @@ const ReqoreRadioGroup = ({
       ) : (
         <ReqoreCheckbox
           asSwitch={asSwitch}
+          onText={onText}
+          offText={offText}
           {...itemRest}
           key={value}
           checked={value === selected}

package/src/components/Table/row.tsx

@@ -277,10 +277,10 @@ const ReqoreTableRow = ({
                 onClick: (e: React.MouseEvent<HTMLDivElement>) => {
                   if (onCellClick) {
                     e.stopPropagation();
-                    onCellClick?.(data[index]);
+                    onCellClick(data[index]);
                   } else if (onRowClick) {
                     e.stopPropagation();
-                    onRowClick?.(data[index]);
+                    onRowClick(data[index]);
                   } else if (selectable && data[index]._selectId) {
                     // Otherwise select the row if selectable
                     onSelectClick(data[index]._selectId);

package/src/components/Tabs/item.tsx

@@ -35,7 +35,7 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
       position: relative;
       align-items: center;
       width: ${vertical ? `100%` : undefined};
-      padding: ${vertical ? `${TABS_PADDING_TO_PX[size!]}px` : `${TABS_PADDING_TO_PX[size!]}px`};
+      padding: ${`${TABS_PADDING_TO_PX[size!]}px`};
       padding-bottom: ${!vertical && 0};
       padding-right: ${vertical && 0};
 

package/src/components/Tabs/list.tsx

@@ -13,9 +13,14 @@ import {
 } from '../../constants/sizes';
 import { IReqoreBreadcrumbsTheme, IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
-import { changeLightness } from '../../helpers/colors';
+import {
+  changeLightness,
+  getColorFromMaybeString,
+  getNthGradientColor,
+} from '../../helpers/colors';
 import { calculateStringSizeInPixels } from '../../helpers/utils';
 import { useReqoreTheme } from '../../hooks/useTheme';
+import { TReqoreHexColor } from '../Effect';
 import ReqoreMenu from '../Menu';
 import ReqoreMenuItem, { IReqoreMenuItemProps } from '../Menu/item';
 import { StyledPopover } from '../Popover';
@@ -159,23 +164,18 @@ const ReqoreTabsList = ({
   intent,
   ...rest
 }: IReqoreTabsListProps) => {
-  const [ref, { width, height }] = useMeasure();
+  const [ref, { width }] = useMeasure();
   const theme = useReqoreTheme('main', customTheme, intent);
   const activeTabData = tabs.find((tab) => tab.id === activeTab);
-  const currentTabColor =
+  const currentTabColor: TReqoreHexColor =
     activeTabIntent || activeTabData?.intent
       ? theme.intents[activeTabIntent || activeTabData.intent]
-      : activeTabData?.customTheme?.main || theme.main;
+      : getNthGradientColor(theme, activeTabData?.effect?.gradient?.colors) ||
+        getColorFromMaybeString(theme, activeTabData?.customTheme?.main || theme.main);
 
   const transformedItems = vertical
     ? tabs
-    : getTransformedItems(
-        tabs,
-        vertical ? height : _testWidth || width,
-        vertical ? 'height' : 'width',
-        activeTab,
-        size
-      );
+    : getTransformedItems(tabs, _testWidth || width, 'width', activeTab, size);
 
   return (
     <ReqoreThemeProvider theme={theme}>

package/src/components/Tag/group.tsx

@@ -2,10 +2,13 @@ import React from 'react';
 import styled from 'styled-components';
 import { StyledTag } from '.';
 import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { IWithReqoreMinimal, IWithReqoreSize } from '../../types/global';
 
-export interface IReqoreTagGroup extends React.HTMLAttributes<HTMLDivElement> {
+export interface IReqoreTagGroup
+  extends React.HTMLAttributes<HTMLDivElement>,
+    IWithReqoreSize,
+    IWithReqoreMinimal {
   children: any;
-  size?: TSizes;
   gapSize?: TSizes;
   columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
   hasBottomMargin?: boolean;
@@ -27,6 +30,7 @@ const ReqoreTagGroup = ({
   children,
   size,
   gapSize = 'normal',
+  minimal,
   className,
   columns,
   hasBottomMargin = true,
@@ -43,6 +47,10 @@ const ReqoreTagGroup = ({
         ? React.cloneElement(child, {
             size: child.props?.size || size,
             width: columns ? `calc(${100 / columns}% - 5px)` : child.props.width,
+            minimal:
+              child.props?.minimal || child.props?.minimal === false
+                ? child.props.minimal
+                : minimal,
           })
         : null
     )}

package/src/components/Tag/index.tsx

@@ -53,7 +53,7 @@ export interface IReqoreTagProps
   color?: TReqoreEffectColor;
   actions?: IReqoreTagAction[];
   width?: string;
-  badge?: boolean;
+  asBadge?: boolean;
   intent?: TReqoreIntent;
   wrap?: boolean;
 }
@@ -77,17 +77,18 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
 
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
-  border-radius: ${({ badge, size }) => (badge ? 18 : RADIUS_FROM_SIZE[size])}px;
+  border-radius: ${({ asBadge, size }) => (asBadge ? 18 : RADIUS_FROM_SIZE[size])}px;
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
 
   ${({ wrap, hasWidth }) =>
     wrap || hasWidth
       ? css`
-          min-height: ${({ size, badge }) => (badge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
+          min-height: ${({ size, asBadge }) =>
+            asBadge ? 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;
+          height: ${({ size, asBadge }) => (asBadge ? BADGE_SIZE_TO_PX[size] : SIZE_TO_PX[size])}px;
         `}
 
   ${({ theme, color, labelKey, minimal }: IReqoreTagStyle) =>
@@ -220,7 +221,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       size = 'normal',
       onRemoveClick,
       actions,
-      badge,
+      asBadge,
       intent,
       color,
       minimal,
@@ -236,10 +237,15 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
     useTooltip(targetRef.current, tooltip);
 
     // If color or intent was specified, set the color
-    let customColor: TReqoreHexColor = intent
-      ? theme.intents[intent]
-      : getColorFromMaybeString(theme, color);
-    customColor = minimal ? `${customColor || '#000000'}40` : customColor;
+    const getCustomColor = (itemIntent?: TReqoreIntent): TReqoreHexColor => {
+      let customColor: TReqoreHexColor = itemIntent
+        ? theme.intents[itemIntent]
+        : getColorFromMaybeString(theme, color);
+
+      customColor = minimal ? `${customColor || '#000000'}40` : customColor;
+
+      return customColor;
+    };
 
     return (
       <StyledTag
@@ -250,11 +256,11 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
         }}
         width={width}
         labelKey={labelKey}
-        color={customColor}
+        color={getCustomColor(intent)}
         className={`${className || ''} reqore-tag`}
         size={size}
         ref={targetRef}
-        badge={badge}
+        asBadge={asBadge}
         minimal={minimal}
         removable={!!onRemoveClick}
         interactive={!!onClick && !rest.disabled}
@@ -265,7 +271,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
           <StyledTagKeyWrapper
             size={size}
             className='reqore-tag-key-content'
-            onClick={onClick}
+            onClick={rest.disabled ? undefined : onClick}
             wrap={wrap}
             hasWidth={!!width}
             hasKey={!!labelKey}
@@ -282,13 +288,13 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
           <StyledTagContentWrapper
             size={size}
             className='reqore-tag-content'
-            onClick={onClick}
+            onClick={rest.disabled ? undefined : onClick}
             wrap={wrap}
             hasWidth={!!width}
             hasKey={!!labelKey}
           >
             {label || label === 0 ? (
-              <StyledTagContent size={size} onClick={onClick} wrap={wrap} hasWidth={!!width}>
+              <StyledTagContent size={size} wrap={wrap} hasWidth={!!width}>
                 {label}
               </StyledTagContent>
             ) : null}
@@ -302,13 +308,13 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
           </StyledTagContentWrapper>
         ) : null}
         {_size(actions)
-          ? actions.map((action) => (
-              <>
+          ? actions.map((action, index) => (
+              <React.Fragment key={index}>
                 <ReqorePopover
                   component={StyledButtonWrapper}
                   componentProps={{
                     size,
-                    color: customColor,
+                    color: getCustomColor(action.intent),
                     className: 'reqore-tag-action',
                     onClick: action.onClick,
                     effect: rest.effect,
@@ -316,13 +322,13 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                   {...(action.tooltip
                     ? typeof action.tooltip === 'string'
                       ? { tooltip: action.tooltip }
-                      : action.tooltip || {}
+                      : action.tooltip
                     : {})}
                   noWrapper
                 >
                   <ReqoreIcon icon={action.icon} size={size} />
                 </ReqorePopover>
-              </>
+              </React.Fragment>
             ))
           : null}
         {onRemoveClick && !rest.disabled ? (
@@ -330,7 +336,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             component={StyledButtonWrapper}
             componentProps={{
               size,
-              color: customColor,
+              color: getCustomColor(intent),
               className: 'reqore-tag-remove',
               onClick: onRemoveClick,
               effect: rest.effect,