@qoretechnologies/reqore 0.31.2 → 0.32.2

package/src/components/ControlGroup/index.tsx

@@ -1,12 +1,5 @@
 import { debounce } from 'lodash';
-import React, {
-  memo,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useMount, useUnmount } from 'react-use';
 import styled, { css } from 'styled-components';
 import { ReqoreButton, ReqoreDrawer } from '../..';
@@ -63,16 +56,13 @@ export interface IReqoreControlGroupStyle extends IReqoreControlGroupProps {
 
 export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
   display: flex;
-  flex: ${({ fluid, fixed }) =>
-    fixed ? '0 0 auto' : fluid ? undefined : '0 0 auto'};
+  flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? undefined : '0 0 auto')};
   width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
-  justify-content: ${({ fluid, vertical }) =>
-    vertical && fluid ? 'stretch' : undefined};
+  justify-content: ${({ fluid, vertical }) => (vertical && fluid ? 'stretch' : undefined)};
   align-items: ${({ vertical, fluid, horizontalAlign }) =>
     vertical ? (fluid ? 'stretch' : horizontalAlign) : undefined};
   flex-flow: ${({ vertical }) => (vertical ? 'column' : 'row')};
-  gap: ${({ gapSize, stack }) =>
-    !stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined};
+  gap: ${({ gapSize, stack }) => (!stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined)};
   flex-wrap: ${({ wrap }) => (wrap ? 'wrap' : 'nowrap')};
 
   // If the group has the fill prop,
@@ -95,23 +85,16 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
 
   > * {
     margin-top: ${({ fill, verticalAlign }) =>
-      !fill && (verticalAlign === 'flex-end' || verticalAlign === 'center')
-        ? 'auto'
-        : undefined};
+      !fill && (verticalAlign === 'flex-end' || verticalAlign === 'center') ? 'auto' : undefined};
     margin-bottom: ${({ fill, verticalAlign }) =>
-      !fill && (verticalAlign === 'flex-start' || verticalAlign === 'center')
-        ? 'auto'
-        : undefined};
-    margin-right: ${({ horizontalAlign }) =>
-      horizontalAlign === 'center' ? 'auto' : undefined};
+      !fill && (verticalAlign === 'flex-start' || verticalAlign === 'center') ? 'auto' : undefined};
+    margin-right: ${({ horizontalAlign }) => (horizontalAlign === 'center' ? 'auto' : undefined)};
 
     ${({ vertical }) =>
       vertical &&
       css`
         margin-left: ${({ horizontalAlign }) =>
-          horizontalAlign === 'flex-end' || horizontalAlign === 'center'
-            ? 'auto'
-            : undefined};
+          horizontalAlign === 'flex-end' || horizontalAlign === 'center' ? 'auto' : undefined};
       `}
   }
 
@@ -120,9 +103,7 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
     css`
       > *:first-child {
         margin-left: ${({ horizontalAlign }) =>
-          horizontalAlign === 'flex-end' || horizontalAlign === 'center'
-            ? 'auto'
-            : undefined};
+          horizontalAlign === 'flex-end' || horizontalAlign === 'center' ? 'auto' : undefined};
       }
     `}
 
@@ -168,12 +149,9 @@ const ReqoreControlGroup = memo(
     const isStack = stack || isInsideStackGroup;
     const isVertical = vertical || isInsideVerticalGroup;
 
-    const [overflowingChildren, setOverflowingChildren] = useState<
-      number | undefined
-    >(0);
+    const [overflowingChildren, setOverflowingChildren] = useState<number | undefined>(0);
     const [lastReSize, setLastReSize] = useState<number>(0);
-    const [isOverflownDialogOpen, setIsOverflownDialogOpen] =
-      useState<boolean>(false);
+    const [isOverflownDialogOpen, setIsOverflownDialogOpen] = useState<boolean>(false);
     const observer = useRef<ResizeObserver | null>(null);
     const ref = useRef<HTMLDivElement>(null);
 
@@ -232,10 +210,7 @@ const ReqoreControlGroup = memo(
 
     useEffect(() => {
       // Is the control group still overflowing?
-      if (
-        (overflowingChildren || overflowingChildren === 0) &&
-        checkIfOverflowing()
-      ) {
+      if ((overflowingChildren || overflowingChildren === 0) && checkIfOverflowing()) {
         setOverflowingChildren(overflowingChildren + 1);
       }
 
@@ -258,33 +233,22 @@ const ReqoreControlGroup = memo(
     const getIsLastInFirstGroup = (index: number): boolean => {
       return !isInsideStackGroup
         ? index === 0
-        : isFirstGroup &&
-            (isLast || isLast !== false) &&
-            index === realChildCount - 1;
+        : isFirstGroup && (isLast || isLast !== false) && index === realChildCount - 1;
     };
     const getIsFirstInLastGroup = (index: number): boolean => {
       return !isInsideStackGroup
         ? index === realChildCount - 1
-        : isLastGroup &&
-            (isFirst || isFirst !== false) &&
-            childId === 1 &&
-            index === 0;
+        : isLastGroup && (isFirst || isFirst !== false) && childId === 1 && index === 0;
     };
     const getIsLastInLastGroup = (index: number): boolean => {
       return !isInsideStackGroup
         ? index === realChildCount - 1
-        : isLastGroup &&
-            (isLast || isLast !== false) &&
-            index === realChildCount - 1;
+        : isLastGroup && (isLast || isLast !== false) && index === realChildCount - 1;
     };
 
     const getBorderTopLeftRadius = (index: number): number | undefined => {
       const _isFirstGroup =
-        !isInsideStackGroup || childrenCount === 1
-          ? true
-          : isChild
-          ? isFirstGroup
-          : index === 0;
+        !isInsideStackGroup || childrenCount === 1 ? true : isChild ? isFirstGroup : index === 0;
 
       // If this is the first item
       if (_isFirstGroup && getIsFirst(index)) {
@@ -324,11 +288,7 @@ const ReqoreControlGroup = memo(
       // If this group is not vertical we need to style the very first item
       if (!isVertical || !isStack) {
         const _isFirstGroup =
-          !isInsideStackGroup || childrenCount === 1
-            ? true
-            : isChild
-            ? isFirstGroup
-            : index === 0;
+          !isInsideStackGroup || childrenCount === 1 ? true : isChild ? isFirstGroup : index === 0;
 
         if (_isFirstGroup && getIsFirst(index)) {
           return RADIUS_FROM_SIZE[size];
@@ -369,38 +329,23 @@ const ReqoreControlGroup = memo(
         return React.Children.map(children, (child) => {
           if (child && React.isValidElement(child)) {
             if (child.type === React.Fragment) {
-              // just compare to `React.Fragment`
               return cloneThroughFragments(child.props.children);
             }
 
             let newProps = {
               ...child.props,
-              key: index,
+              key: child.props.reactKey || child.props.key || index,
               minimal:
                 child.props?.minimal || child.props?.minimal === false
                   ? child.props.minimal
                   : minimal,
               size: child.props?.size || size,
-              flat:
-                child.props?.flat || child.props?.flat === false
-                  ? child.props.flat
-                  : flat,
-              fluid:
-                child.props?.fluid || child.props?.fluid === false
-                  ? child.props.fluid
-                  : fluid,
-              fixed:
-                child.props?.fixed || child.props?.fixed === false
-                  ? child.props.fixed
-                  : fixed,
-              fill:
-                child.props?.fill || child.props?.fill === false
-                  ? child.props.fill
-                  : fill,
+              flat: child.props?.flat || child.props?.flat === false ? child.props.flat : flat,
+              fluid: child.props?.fluid || child.props?.fluid === false ? child.props.fluid : fluid,
+              fixed: child.props?.fixed || child.props?.fixed === false ? child.props.fixed : fixed,
+              fill: child.props?.fill || child.props?.fill === false ? child.props.fill : fill,
               stack:
-                child.props?.stack || child.props?.stack === false
-                  ? child.props.stack
-                  : isStack,
+                child.props?.stack || child.props?.stack === false ? child.props.stack : isStack,
               intent: child.props?.intent || intent,
               customTheme: child.props?.customTheme || customTheme,
             };
@@ -428,9 +373,7 @@ const ReqoreControlGroup = memo(
                 childId: index + 1,
 
                 isFirstGroup: isChild ? isFirstGroup : index === 0,
-                isLastGroup: isChild
-                  ? isLastGroup
-                  : index === realChildCount - 1,
+                isLastGroup: isChild ? isLastGroup : index === realChildCount - 1,
               };
             }
 
@@ -469,9 +412,7 @@ const ReqoreControlGroup = memo(
     // Get the overflown children
     const overflownChildren = useMemo(
       () =>
-        overflowingChildren
-          ? React.Children.toArray(children).slice(0, overflowingChildren)
-          : [],
+        overflowingChildren ? React.Children.toArray(children).slice(0, overflowingChildren) : [],
       [children, overflowingChildren]
     );
 
@@ -485,9 +426,7 @@ const ReqoreControlGroup = memo(
                 icon='MenuLine'
                 customTheme={customTheme}
                 tooltip={{
-                  content: `Show ${React.Children.count(
-                    overflownChildren
-                  )} hidden items`,
+                  content: `Show ${React.Children.count(overflownChildren)} hidden items`,
                 }}
                 fixed
                 active={isOverflownDialogOpen}

package/src/components/Drawer/index.tsx

@@ -1,10 +1,10 @@
 import { animated, useTransition } from '@react-spring/web';
 import { rgba } from 'polished';
 import { Resizable } from 're-resizable';
-import { useContext, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { createPortal } from 'react-dom';
 import styled, { css } from 'styled-components';
-import { ReqoreContext } from '../..';
+import { useReqoreProperty } from '../..';
 import { SPRING_CONFIG, SPRING_CONFIG_NO_ANIMATIONS } from '../../constants/animations';
 import { IReqoreTheme } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
@@ -147,7 +147,7 @@ const getSpringConfig = (isModal?: boolean, position?: TPosition, floating?: boo
         leave: { opacity: 0, [position]: '-80px' },
       };
 
-export const ReqoreDrawer = ({
+export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
   children,
   isOpen,
   isHidden,
@@ -173,7 +173,7 @@ export const ReqoreDrawer = ({
   actions = [],
   ...rest
 }: IReqoreDrawerProps) => {
-  const { animations } = useContext(ReqoreContext);
+  const animations = useReqoreProperty('animations');
   const theme = useReqoreTheme('main', customTheme, intent);
   const layout = useMemo(
     () =>

package/src/components/Icon/index.tsx

@@ -1,9 +1,9 @@
-import React, { forwardRef, memo, useContext } from 'react';
+import React, { forwardRef, memo } from 'react';
 import { IconContext } from 'react-icons';
 import { IconBaseProps, IconType } from 'react-icons/lib';
 import * as RemixIcons from 'react-icons/ri';
 import styled, { css, keyframes } from 'styled-components';
-import { ReqoreThemeContext } from '../..';
+import { useReqoreTheme } from '../..';
 import { ICON_FROM_SIZE, PADDING_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { getColorFromMaybeString } from '../../helpers/colors';
 import { isStringSize } from '../../helpers/utils';
@@ -21,6 +21,8 @@ export interface IReqoreIconProps
   icon?: IReqoreIconName;
   color?: TReqoreEffectColor;
   size?: TSizes | string;
+  wrapperSize?: TSizes | string;
+  wrapperElement?: any;
   iconProps?: IconBaseProps;
   margin?: 'right' | 'left' | 'both';
   image?: string;
@@ -38,8 +40,10 @@ const SpinKeyframes = keyframes`
 `;
 
 export const StyledIconWrapper = styled(StyledEffect)<{ margin: 'right' | 'left' | 'both' }>`
-  display: inline-block;
+  display: inline-flex;
   flex: 0 0 auto;
+  justify-content: center;
+  align-items: center;
   vertical-align: text-bottom;
   transition: all 0.2s ease-out;
   overflow: hidden;
@@ -78,6 +82,8 @@ const ReqoreIcon = memo(
       {
         icon,
         size = 'normal',
+        wrapperSize,
+        wrapperElement,
         className,
         color,
         margin,
@@ -91,24 +97,31 @@ const ReqoreIcon = memo(
       ref
     ) => {
       const { targetRef } = useCombinedRefs(ref);
-      const theme = useContext(ReqoreThemeContext);
+      const [iconRef, setIconRef] = React.useState<HTMLSpanElement>(undefined);
+      const theme = useReqoreTheme();
       const Icon: IconType = RemixIcons[`Ri${icon}`];
       const finalColor: string | undefined = intent
         ? theme.intents[intent]
         : getColorFromMaybeString(theme, color);
       const finalSize: string = isStringSize(size) ? ICON_FROM_SIZE[size] : size;
+      const finalWrapperSize: string = wrapperSize
+        ? isStringSize(wrapperSize)
+          ? ICON_FROM_SIZE[wrapperSize]
+          : wrapperSize
+        : finalSize;
 
-      useTooltip(targetRef.current, tooltip);
+      useTooltip(iconRef, tooltip);
 
       if (image) {
         return (
           <StyledIconWrapper
             {...rest}
+            as={wrapperElement}
             ref={targetRef}
             size={size}
             margin={margin}
             className={`${className || ''} reqore-icon`}
-            style={{ ...style, width: finalSize, height: finalSize }}
+            style={{ width: finalWrapperSize, height: finalWrapperSize, ...style }}
           >
             <img src={image} alt='' />
           </StyledIconWrapper>
@@ -119,11 +132,12 @@ const ReqoreIcon = memo(
         return (
           <StyledIconWrapper
             {...rest}
+            as={wrapperElement}
             ref={targetRef}
             size={size}
             margin={margin}
             className={`${className || ''} reqore-icon`}
-            style={{ ...style, width: finalSize, height: finalSize }}
+            style={{ width: finalWrapperSize, height: finalWrapperSize, ...style }}
           />
         );
       }
@@ -131,10 +145,14 @@ const ReqoreIcon = memo(
       return (
         <StyledIconWrapper
           {...rest}
-          ref={targetRef}
+          as={wrapperElement}
+          ref={(ref) => {
+            targetRef.current = ref;
+            setIconRef(ref);
+          }}
           margin={margin}
           size={size}
-          style={{ ...style, width: finalSize, height: finalSize }}
+          style={{ width: finalWrapperSize, height: finalWrapperSize, ...style }}
           className={`${className || ''} reqore-icon`}
         >
           <IconContext.Provider

package/src/components/Input/index.tsx

@@ -1,5 +1,5 @@
 import { rgba } from 'polished';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import {
   PADDING_FROM_SIZE,
@@ -10,6 +10,7 @@ import {
 } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness, getReadableColor } from '../../helpers/colors';
+import { IReqoreAutoFocusRules, useAutoFocus } from '../../hooks/useAutoFocus';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
@@ -44,11 +45,14 @@ export interface IReqoreInputProps
   onClearClick?: () => void;
   maxLength?: number;
   icon?: IReqoreIconName;
+  rightIcon?: IReqoreIconName;
   flat?: boolean;
   rounded?: boolean;
   type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
   wrapperStyle?: React.CSSProperties;
   iconColor?: TReqoreEffectColor;
+  rightIconColor?: TReqoreEffectColor;
+  focusRules?: IReqoreAutoFocusRules;
 }
 
 export interface IReqoreInputStyle extends IReqoreInputProps {
@@ -76,6 +80,8 @@ const StyledIconWrapper = styled.div<IReqoreInputStyle>`
   position: absolute;
   height: ${({ _size }) => SIZE_TO_PX[_size]}px;
   width: ${({ _size }) => SIZE_TO_PX[_size]}px;
+  right: ${({ position }) => (position === 'right' ? 0 : undefined)};
+  top: 0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -87,7 +93,18 @@ export const StyledInput = styled(StyledEffect)<IReqoreInputStyle>`
   flex: 1;
   margin: 0;
   padding: ${({ _size }) => PADDING_FROM_SIZE[_size] / 2}px 7px;
-  padding-right: ${({ clearable, _size }) => (clearable ? SIZE_TO_PX[_size] : 7)}px;
+  padding-right: ${({ clearable, hasRightIcon, _size }) => {
+    let padding = 7;
+
+    if (clearable || hasRightIcon) {
+      padding = 0;
+      padding += clearable ? SIZE_TO_PX[_size] : 0;
+      padding += hasRightIcon ? SIZE_TO_PX[_size] : 0;
+    }
+
+    return padding;
+  }}px;
+
   padding-left: ${({ hasIcon, _size }) => (hasIcon ? SIZE_TO_PX[_size] : 7)}px;
   font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
   transition: all 0.2s ease-out;
@@ -154,7 +171,9 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       className,
       onClearClick,
       icon,
+      rightIcon,
       iconColor,
+      rightIconColor,
       flat,
       rounded = true,
       minimal,
@@ -163,14 +182,17 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       customTheme,
       intent,
       wrapperStyle,
+      focusRules,
       ...rest
     }: IReqoreInputProps,
     ref
   ) => {
     const { targetRef } = useCombinedRefs(ref);
+    const [inputRef, setInputRef] = useState<HTMLInputElement>(null);
     const theme = useReqoreTheme('main', customTheme, intent);
 
-    useTooltip(targetRef.current, tooltip);
+    useTooltip(inputRef, tooltip);
+    useAutoFocus(inputRef, readOnly || rest.disabled ? undefined : focusRules, rest.onChange);
 
     return (
       <StyledInputWrapper
@@ -199,23 +221,32 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
             interactive: !rest?.disabled && !readOnly,
             ...rest?.effect,
           }}
+          onChange={!readOnly && !rest?.disabled ? rest?.onChange : undefined}
           as='input'
+          ref={(ref) => setInputRef(ref)}
           theme={theme}
           _size={size}
           minimal={minimal}
           flat={flat}
           rounded={rounded}
           hasIcon={!!icon}
-          clearable={!rest?.disabled && !!(onClearClick && rest?.onChange)}
+          hasRightIcon={!!rightIcon}
+          clearable={!rest?.disabled && !readOnly && !!(onClearClick && rest?.onChange)}
           className={`${className || ''} reqore-control reqore-input`}
           readOnly={readOnly}
         />
         <ReqoreInputClearButton
           enabled={!readOnly && !rest?.disabled && !!(onClearClick && rest?.onChange)}
           onClick={onClearClick}
+          hasRightIcon={!!rightIcon}
           size={size}
           show={rest?.value && rest.value !== '' ? true : false}
         />
+        {rightIcon && (
+          <StyledIconWrapper _size={size} position='right'>
+            <ReqoreIcon size={size} icon={rightIcon} color={rightIconColor} />
+          </StyledIconWrapper>
+        )}
       </StyledInputWrapper>
     );
   }

package/src/components/InputClearButton/index.tsx

@@ -1,16 +1,28 @@
+import { animated, useTransition } from '@react-spring/web';
 import styled from 'styled-components';
-import ReqoreButton, { IReqoreButtonProps } from '../Button';
+import { SPRING_CONFIG } from '../../constants/animations';
+import { SIZE_TO_PX } from '../../constants/sizes';
+import { IReqoreButtonProps } from '../Button';
+import ReqoreIcon from '../Icon';
 
 export interface IReqoreInputClearButtonProps extends IReqoreButtonProps {
   show: boolean;
   enabled: boolean;
+  hasRightIcon?: boolean;
 }
 
-export const StyledInputClearButton = styled(ReqoreButton)<{ show?: boolean }>`
+export const StyledInputClearButton = styled(ReqoreIcon)<{ show?: boolean }>`
   position: absolute;
-  right: ${({ show }) => (show ? 0 : -40)}px;
+  right: ${({ size, hasRightIcon }) => (hasRightIcon ? SIZE_TO_PX[size] : 0)}px;
   top: 0;
-  opacity: ${({ show }) => (show ? 0.2 : 0)};
+  justify-content: center;
+  align-items: center;
+  transition: all 0.1s ease-out;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1 !important;
+  }
 `;
 
 const ReqoreInputClearButton = ({
@@ -18,18 +30,30 @@ const ReqoreInputClearButton = ({
   enabled,
   size = 'normal',
   ...rest
-}: IReqoreInputClearButtonProps) =>
-  enabled ? (
-    <StyledInputClearButton
-      {...rest}
-      className='reqore-clear-input-button'
-      icon='CloseLine'
-      minimal
-      flat
-      tabIndex={show ? 1 : -1}
-      size={size}
-      show={show}
-    />
-  ) : null;
+}: IReqoreInputClearButtonProps) => {
+  const transitions = useTransition(show && enabled, {
+    from: { opacity: 0, filter: 'blur(10px)' },
+    enter: { opacity: 0.5, filter: 'blur(0px)' },
+    leave: { opacity: 0, filter: 'blur(10px)' },
+    config: SPRING_CONFIG,
+  });
+
+  return transitions((styles, item) =>
+    item ? (
+      <StyledInputClearButton
+        {...rest}
+        className='reqore-clear-input-button'
+        icon='CloseLine'
+        wrapperElement={animated.span}
+        size={size}
+        wrapperSize={SIZE_TO_PX[size]}
+        show={show}
+        style={{
+          opacity: styles.opacity,
+        }}
+      />
+    ) : null
+  );
+};
 
 export default ReqoreInputClearButton;

package/src/components/InternalPopover/index.tsx

@@ -1,9 +1,10 @@
 import { cloneDeep, isString } from 'lodash';
 import { rgba } from 'polished';
-import React, { memo, MutableRefObject, useContext, useEffect, useRef, useState } from 'react';
+import React, { MutableRefObject, memo, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
 import styled, { css } from 'styled-components';
+import { useContext } from 'use-context-selector';
 import { RADIUS_FROM_SIZE } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { IPopoverData } from '../../containers/PopoverProvider';

package/src/components/Menu/item.tsx

@@ -1,9 +1,8 @@
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef } from 'react';
+import { useContext } from 'use-context-selector';
 import { ReqoreButton, ReqoreControlGroup } from '../..';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import PopoverContext from '../../context/PopoverContext';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import { useTooltip } from '../../hooks/useTooltip';
 import { IReqoreComponent } from '../../types/global';
 import { IReqoreButtonProps } from '../Button';
 
@@ -33,7 +32,7 @@ export interface IReqoreMenuItemRightIconStyle {
   intent?: TReqoreIntent;
 }
 
-const ReqoreMenuItem = forwardRef<HTMLDivElement, IReqoreMenuItemProps>(
+const ReqoreMenuItem = forwardRef<HTMLButtonElement, IReqoreMenuItemProps>(
   (
     {
       children,
@@ -53,10 +52,9 @@ const ReqoreMenuItem = forwardRef<HTMLDivElement, IReqoreMenuItemProps>(
       flat = true,
       ...rest
     }: IReqoreMenuItemProps,
-    ref: any
+    ref
   ) => {
     const { removePopover } = useContext(PopoverContext);
-    const { targetRef } = useCombinedRefs(ref);
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
       event.persist();
@@ -81,8 +79,6 @@ const ReqoreMenuItem = forwardRef<HTMLDivElement, IReqoreMenuItemProps>(
       }
     };
 
-    useTooltip(targetRef.current, tooltip);
-
     return (
       <ReqoreControlGroup stack={!!onRightIconClick} fluid>
         <ReqoreButton
@@ -94,11 +90,12 @@ const ReqoreMenuItem = forwardRef<HTMLDivElement, IReqoreMenuItemProps>(
           fluid
           onClick={handleClick}
           active={selected}
-          ref={targetRef}
+          ref={ref}
           disabled={disabled}
           intent={intent}
           icon={icon}
           rightIcon={onRightIconClick ? undefined : rightIcon}
+          tooltip={tooltip}
         >
           {label || children}
         </ReqoreButton>

package/src/components/Message/index.tsx

@@ -87,8 +87,9 @@ const ReqoreMessage = memo(
       const [internalTimeout, setInternalTimeout] = useState<NodeJS.Timeout | null>(null);
       const theme = useReqoreTheme('main', customTheme, intent);
       const { targetRef } = useCombinedRefs(ref);
+      const [itemRef, setItemRef] = useState<HTMLDivElement>(undefined);
 
-      useTooltip(targetRef.current, tooltip);
+      useTooltip(itemRef, tooltip);
 
       useMount(() => {
         if (duration) {
@@ -142,7 +143,10 @@ const ReqoreMessage = memo(
             fluid={fluid}
             fixed={fixed}
             className={`${rest?.className || ''} reqore-message`}
-            ref={targetRef}
+            ref={(ref) => {
+              targetRef.current = ref;
+              setItemRef(ref);
+            }}
             size={size}
             theme={theme}
           >