@qoretechnologies/reqore 0.32.0 → 0.32.3

package/src/components/Collection/index.tsx

@@ -1,6 +1,6 @@
 import { size } from 'lodash';
 import { useMemo, useState } from 'react';
-import { useUpdateEffect } from 'react-use';
+import { useDebounce, useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import { PADDING_FROM_SIZE } from '../../constants/sizes';
 import { IReqoreIconName } from '../../types/icons';
@@ -46,6 +46,7 @@ export interface IReqoreCollectionProps
   showAs?: 'list' | 'grid';
   showSelectedFirst?: boolean;
   selectedIcon?: IReqoreIconName;
+  searchDelay?: number;
 
   childrenBefore?: React.ReactNode;
   childrenAfter?: React.ReactNode;
@@ -93,6 +94,7 @@ export const ReqoreCollection = ({
   onQueryChange,
   childrenBefore,
   childrenAfter,
+  searchDelay = 300,
   emptyMessage = 'No data in this collection, try changing your search query or filters',
   sortButtonTooltip = (sort) => (sort === 'desc' ? 'Sort ascending' : 'Sort descending'),
   displayButtonTooltip = (display) => (display === 'grid' ? 'Show as list' : 'Show as grid'),
@@ -102,6 +104,7 @@ export const ReqoreCollection = ({
   const [_showAs, setShowAs] = useState<'list' | 'grid'>(showAs);
   const [sort, setSort] = useState<'asc' | 'desc'>('asc');
   const [query, setQuery] = useState<string>('');
+  const [preQuery, setPreQuery] = useState<string>('');
 
   useUpdateEffect(() => {
     setShowAs(showAs);
@@ -111,6 +114,14 @@ export const ReqoreCollection = ({
     onQueryChange?.(query);
   }, [query]);
 
+  useDebounce(
+    () => {
+      setQuery(preQuery);
+    },
+    searchDelay,
+    [preQuery]
+  );
+
   const sortedItems: IReqoreCollectionItemProps[] = useMemo(() => {
     if (!sortable) {
       return items;
@@ -141,7 +152,7 @@ export const ReqoreCollection = ({
     });
   }, [items, sort]);
 
-  const filteredItems: IReqoreCollectionItemProps[] = useMemo(() => {
+  const finalItems: IReqoreCollectionItemProps[] = useMemo(() => {
     if (!filterable || query === '') {
       return sortedItems;
     }
@@ -159,11 +170,10 @@ export const ReqoreCollection = ({
     });
   }, [items, query, sortedItems]);
 
-  const handleQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setQuery(event.target.value);
+  const handlePreQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setPreQuery(event.target.value);
   };
 
-  const finalItems = filteredItems;
   const finalActions: TReqorePanelActions = useMemo(() => {
     let actions: TReqorePanelActions = rest.actions ? [...rest.actions] : [];
 
@@ -171,10 +181,11 @@ export const ReqoreCollection = ({
       responsive: false,
       group: [
         {
-          icon: _showAs === 'grid' ? 'ListOrdered' : 'GridLine',
+          icon: _showAs === 'grid' ? 'ListUnordered' : 'GridLine',
           onClick: () => setShowAs(_showAs === 'grid' ? 'list' : 'grid'),
           tooltip: displayButtonTooltip(_showAs),
           disabled: !size(finalItems),
+          textAlign: 'center',
           ...displayButtonProps,
         },
       ],
@@ -186,6 +197,7 @@ export const ReqoreCollection = ({
         onClick: () => setSort(sort === 'desc' ? 'asc' : 'desc'),
         tooltip: sortButtonTooltip(sort),
         disabled: !size(finalItems),
+        textAlign: 'center',
         ...sortButtonProps,
       });
     }
@@ -200,8 +212,8 @@ export const ReqoreCollection = ({
             fixed: false,
             placeholder: inputPlaceholder(finalItems),
             onClearClick: () => setQuery(''),
-            onChange: handleQueryChange,
-            value: query,
+            onChange: handlePreQueryChange,
+            value: preQuery,
             icon: 'Search2Line',
             minimal: false,
             ...inputProps,
@@ -211,7 +223,7 @@ export const ReqoreCollection = ({
     }
 
     return [...actions, toolbarGroup];
-  }, [filterable, handleQueryChange, query, rest.actions, _showAs, sort, sortable, finalItems]);
+  }, [filterable, preQuery, query, rest.actions, _showAs, sort, sortable, finalItems]);
 
   return (
     <ReqorePanel

package/src/components/Collection/item.tsx

@@ -1,10 +1,10 @@
 import { map, size } from 'lodash';
 import { rgba } from 'polished';
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useDebounce, useMeasure } from 'react-use';
 import styled, { css } from 'styled-components';
-import ReqoreContext from '../../context/ReqoreContext';
 import { changeDarkness, getMainBackgroundColor } from '../../helpers/colors';
+import { useReqoreProperty } from '../../hooks/useReqoreContext';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { StyledBackdrop } from '../Drawer';
 import {
@@ -84,7 +84,7 @@ export const ReqoreCollectionItem = ({
   ...rest
 }: IReqoreCollectionItemProps) => {
   const [isSelected, setIsSelected] = useState(false);
-  const { getAndIncreaseZIndex } = useContext(ReqoreContext);
+  const getAndIncreaseZIndex = useReqoreProperty('getAndIncreaseZIndex');
   const ref = useRef<HTMLDivElement>(null);
   const [contentRef, sizes] = useMeasure();
   const originalDimensions = useRef(null);

package/src/components/ControlGroup/index.tsx

@@ -13,6 +13,8 @@ import {
   IWithReqoreMinimal,
   IWithReqoreSize,
 } from '../../types/global';
+import { StyledHeader } from '../Header';
+import { StyledParagraph } from '../Paragraph';
 
 export interface IReqoreControlGroupProps
   extends React.HTMLAttributes<HTMLDivElement>,
@@ -83,7 +85,7 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
     return undefined;
   }}
 
-  > * {
+  > *, > ${StyledParagraph}, > ${StyledHeader} {
     margin-top: ${({ fill, verticalAlign }) =>
       !fill && (verticalAlign === 'flex-end' || verticalAlign === 'center') ? 'auto' : undefined};
     margin-bottom: ${({ fill, verticalAlign }) =>
@@ -334,7 +336,7 @@ const ReqoreControlGroup = memo(
 
             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

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';
@@ -97,7 +97,8 @@ 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]
@@ -109,7 +110,7 @@ const ReqoreIcon = memo(
           : wrapperSize
         : finalSize;
 
-      useTooltip(targetRef.current, tooltip);
+      useTooltip(iconRef, tooltip);
 
       if (image) {
         return (
@@ -145,7 +146,10 @@ const ReqoreIcon = memo(
         <StyledIconWrapper
           {...rest}
           as={wrapperElement}
-          ref={targetRef}
+          ref={(ref) => {
+            targetRef.current = ref;
+            setIconRef(ref);
+          }}
           margin={margin}
           size={size}
           style={{ width: finalWrapperSize, height: finalWrapperSize, ...style }}

package/src/components/Input/index.tsx

@@ -1,5 +1,5 @@
 import { rgba } from 'polished';
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import {
   PADDING_FROM_SIZE,
@@ -188,15 +188,11 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
     ref
   ) => {
     const { targetRef } = useCombinedRefs(ref);
-    const inputRef = useRef<HTMLInputElement>(null);
+    const [inputRef, setInputRef] = useState<HTMLInputElement>(null);
     const theme = useReqoreTheme('main', customTheme, intent);
 
-    useTooltip(targetRef.current, tooltip);
-    useAutoFocus(
-      inputRef.current,
-      readOnly || rest.disabled ? undefined : focusRules,
-      rest.onChange
-    );
+    useTooltip(inputRef, tooltip);
+    useAutoFocus(inputRef, readOnly || rest.disabled ? undefined : focusRules, rest.onChange);
 
     return (
       <StyledInputWrapper
@@ -227,7 +223,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
           }}
           onChange={!readOnly && !rest?.disabled ? rest?.onChange : undefined}
           as='input'
-          ref={inputRef}
+          ref={(ref) => setInputRef(ref)}
           theme={theme}
           _size={size}
           minimal={minimal}

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

package/src/components/Panel/index.tsx

@@ -21,7 +21,7 @@ import {
 } from '../../helpers/colors';
 import { getOneHigherSize, isActionShown } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import { useReqore } from '../../hooks/useReqore';
+import { useReqoreProperty } from '../../hooks/useReqoreContext';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
 import { ACTIVE_ICON_SCALE, INACTIVE_ICON_SCALE } from '../../styles';
@@ -102,6 +102,7 @@ export interface IReqorePanelProps
   transparent?: boolean;
   iconColor?: TReqoreEffectColor;
   responsiveActions?: boolean;
+  responsiveTitle?: boolean;
 }
 
 export interface IStyledPanel extends IReqorePanelProps {
@@ -187,7 +188,7 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
 
 export const StyledPanelTitle = styled.div<IStyledPanel>`
   display: flex;
-  flex-flow: ${({ isMobile }) => (isMobile ? 'column' : 'row')};
+  flex-flow: ${({ responsive, isMobile }) => (responsive ? (isMobile ? 'column' : 'row') : 'row')};
   background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
     rgba(changeLightness(getMainBackgroundColor(theme), 0.03), opacity)};
   justify-content: space-between;
@@ -295,6 +296,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       iconProps = {},
       fluid,
       responsiveActions = true,
+      responsiveTitle = true,
       size: panelSize = 'normal',
       ...rest
     }: IReqorePanelProps,
@@ -308,10 +310,11 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           ? { main: Object.values(contentEffect.gradient.colors)[0] as TReqoreEffectColor }
           : undefined)
     );
-    const { isMobile } = useReqore();
+    const isMobile = useReqoreProperty('isMobile');
     const { targetRef } = useCombinedRefs(ref);
+    const [itemRef, setItemRef] = useState<HTMLDivElement>(undefined);
 
-    useTooltip(targetRef.current, tooltip);
+    useTooltip(itemRef, tooltip);
 
     useUpdateEffect(() => {
       setIsCollapsed(!!isCollapsed);
@@ -421,8 +424,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
               stack
               customTheme={rest.customTheme || theme}
               size={rest.size}
-              fixed={rest.fixed ? true : false}
-              fluid={rest.fluid ? true : false}
+              fixed={rest.fixed}
+              fluid={rest.fluid}
               key={index}
             >
               {group.map((action, index) => renderActions(action, index, true))}
@@ -517,7 +520,10 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       <StyledPanel
         {...rest}
         as={rest.as || 'div'}
-        ref={targetRef}
+        ref={(ref) => {
+          targetRef.current = ref;
+          setItemRef(ref);
+        }}
         isCollapsed={_isCollapsed}
         rounded={rounded}
         flat={flat}
@@ -540,6 +546,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             size={contentSize || panelSize}
             opacity={opacity ?? (minimal ? 0 : 1)}
             noHorizontalPadding={noHorizontalPadding}
+            responsive={responsiveTitle}
             isMobile={isMobile}
           >
             {hasTitleHeader && (

package/src/components/Paragraph/index.tsx

@@ -15,8 +15,8 @@ export interface IReqoreParagraphProps
 }
 
 export const StyledParagraph = styled(StyledTextEffect)`
-  margin: 0;
   padding: 0;
+  margin: 0;
   color: ${({ theme, intent }) => (intent ? theme.intents[intent] : 'inherit')};
   font-size: ${({ _size }) => (isStringSize(_size) ? `${TEXT_FROM_SIZE[_size]}px` : _size)};
 `;

package/src/components/Sidebar/item.tsx

@@ -1,11 +1,9 @@
 import classnames from 'classnames';
 import map from 'lodash/map';
-import { useContext } from 'react';
 import { useMount } from 'react-use';
 import { IQorusSidebarItem } from '.';
-import { ReqorePopover } from '../..';
+import { ReqorePopover, useReqoreTheme } from '../..';
 import { IReqoreTheme } from '../../constants/theme';
-import ThemeContext from '../../context/ThemeContext';
 import { getMainColor, getReadableColor } from '../../helpers/colors';
 import { isActiveMulti } from '../../helpers/sidebar';
 import ReqoreIcon from '../Icon';
@@ -202,7 +200,7 @@ const SidebarItemWrapper = ({
   useNativeTitle,
   onClick,
 }: SidebarItemProps) => {
-  const theme: IReqoreTheme = useContext(ThemeContext);
+  const theme: IReqoreTheme = useReqoreTheme();
 
   useMount(() => {
     if (

package/src/components/Spinner/index.tsx

@@ -3,10 +3,12 @@ import { ReqoreIcon, ReqoreP } from '../..';
 import { TSizes } from '../../constants/sizes';
 import { TReqoreIntent } from '../../constants/theme';
 import { IWithReqoreEffect } from '../../types/global';
-import ReqoreControlGroup from '../ControlGroup';
+import ReqoreControlGroup, { IReqoreControlGroupProps } from '../ControlGroup';
 import { IReqoreEffect, TReqoreEffectColor } from '../Effect';
 
-export interface IReqoreSpinnerProps extends IWithReqoreEffect {
+export interface IReqoreSpinnerProps
+  extends Omit<IReqoreControlGroupProps, 'children' | 'size'>,
+    IWithReqoreEffect {
   size?: TSizes | string;
   intent?: TReqoreIntent;
   children?: any;
@@ -27,6 +29,7 @@ export const ReqoreSpinner = ({
   effect,
   iconMargin,
   centered,
+  ...rest
 }: IReqoreSpinnerProps) => {
   const renderContent = useCallback(() => {
     return (
@@ -44,7 +47,12 @@ export const ReqoreSpinner = ({
 
   if (children) {
     return (
-      <ReqoreControlGroup vertical={centered} horizontalAlign={centered ? 'center' : undefined}>
+      <ReqoreControlGroup
+        {...rest}
+        vertical={centered}
+        horizontalAlign={centered ? 'center' : undefined}
+        verticalAlign='center'
+      >
         {renderContent()}
         <ReqoreP
           size={size}

package/src/components/Tag/index.tsx

@@ -1,8 +1,8 @@
 import _size from 'lodash/size';
 import { rgba } from 'polished';
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { ReqorePopover } from '../..';
+import { ReqorePopover, useReqoreTheme } from '../..';
 import {
   BADGE_SIZE_TO_PX,
   PADDING_FROM_SIZE,
@@ -12,7 +12,6 @@ import {
   TSizes,
 } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
-import ThemeContext from '../../context/ThemeContext';
 import {
   changeLightness,
   getColorFromMaybeString,
@@ -264,9 +263,10 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
     ref
   ) => {
     const { targetRef } = useCombinedRefs(ref);
-    const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
+    const theme: IReqoreTheme = useReqoreTheme();
+    const [itemRef, setItemRef] = useState<HTMLDivElement>(undefined);
 
-    useTooltip(targetRef.current, tooltip);
+    useTooltip(itemRef, tooltip);
 
     // If color or intent was specified, set the color
     const getCustomColor = (itemIntent?: TReqoreIntent): TReqoreHexColor => {
@@ -292,7 +292,10 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
         color={getCustomColor(intent)}
         className={`${className || ''} reqore-tag`}
         size={size}
-        ref={targetRef}
+        ref={(ref) => {
+          targetRef.current = ref;
+          setItemRef(ref);
+        }}
         asBadge={asBadge}
         minimal={minimal}
         removable={!!onRemoveClick}

package/src/components/Textarea/index.tsx

@@ -146,6 +146,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
     ref
   ) => {
     const { targetRef }: any = useCombinedRefs(ref);
+    const [inputRef, setInputRef] = useState<HTMLTextAreaElement>(null);
     const theme = useReqoreTheme('main', customTheme, intent);
     const [_value, setValue] = useState(value || '');
 
@@ -153,13 +154,9 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
       setValue(value || '');
     }, [value]);
 
-    useTooltip(targetRef?.current, tooltip);
-    useAutosizeTextArea(targetRef?.current, _value, scaleWithContent);
-    useAutoFocus(
-      targetRef.current,
-      rest.readOnly || rest.disabled ? undefined : focusRules,
-      onChange
-    );
+    useTooltip(inputRef, tooltip);
+    useAutosizeTextArea(inputRef, _value, scaleWithContent);
+    useAutoFocus(inputRef, rest.readOnly || rest.disabled ? undefined : focusRules, onChange);
 
     return (
       <StyledTextareaWrapper
@@ -171,6 +168,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
         _size={size}
         theme={theme}
         style={wrapperStyle}
+        ref={targetRef}
       >
         <StyledTextarea
           {...rest}
@@ -185,7 +183,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
           as='textarea'
           className={`${className || ''} reqore-control reqore-textarea`}
           _size={size}
-          ref={targetRef}
+          ref={(ref) => setInputRef(ref)}
           theme={theme}
           rounded={rounded}
           rows={1}

package/src/components/Tree/index.tsx

@@ -1,10 +1,9 @@
 import { cloneDeep, size as lodashSize } from 'lodash';
-import { useContext, useState } from 'react';
+import { useState } from 'react';
 import styled from 'styled-components';
-import { ReqoreMessage, ReqorePanel, ReqoreTextarea } from '../..';
+import { ReqoreMessage, ReqorePanel, ReqoreTextarea, useReqoreProperty } from '../..';
 import { IReqoreTheme } from '../../constants/theme';
-import ReqoreContext from '../../context/ReqoreContext';
-import { getLineCount, getTypeFromValue } from '../../helpers/utils';
+import { getTypeFromValue } from '../../helpers/utils';
 import { IWithReqoreSize } from '../../types/global';
 import ReqoreButton from '../Button';
 import ReqoreControlGroup from '../ControlGroup';
@@ -45,7 +44,7 @@ export const ReqoreTree = ({
   const [items, setItems] = useState({});
   const [allExpanded, setAllExpanded] = useState(expanded || !showControls);
   const [_showTypes, setShowTypes] = useState(showTypes);
-  const { addNotification } = useContext(ReqoreContext);
+  const addNotification = useReqoreProperty('addNotification');
 
   const handleCopyClick = () => {
     setMode('copy');
@@ -173,7 +172,6 @@ export const ReqoreTree = ({
   }
 
   const textData: string = renderText(data);
-  const lineCount: number = getLineCount(textData);
 
   return (
     <ReqorePanel
@@ -224,12 +222,11 @@ export const ReqoreTree = ({
         <ReqoreTextarea
           className='reqore-tree-textarea'
           id='tree-content'
-          defaultValue={textData}
+          value={textData}
           scaleWithContent
           size={size}
           fluid
           readOnly
-          rows={lineCount > 20 ? 20 : lineCount}
         />
       )}
     </ReqorePanel>

package/src/containers/PopoverProvider.tsx

@@ -1,9 +1,9 @@
 import { size } from 'lodash';
 import React, { MutableRefObject, useCallback, useEffect, useState } from 'react';
+import { useReqoreProperty } from '..';
 import Popover from '../components/InternalPopover';
 import PopoverContext from '../context/PopoverContext';
 import { IPopoverOptions } from '../hooks/usePopover';
-import { useReqore } from '../hooks/useReqore';
 
 export interface IReqorePopoverProviderProps {
   children: any;
@@ -17,7 +17,7 @@ export interface IPopoverData extends IPopoverOptions {
 
 const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiScale }) => {
   const [popovers, setPopovers] = useState<IPopoverData[]>([]);
-  const { closePopoversOnEscPress } = useReqore();
+  const closePopoversOnEscPress = useReqoreProperty('closePopoversOnEscPress');
 
   const handleClick = useCallback(
     (event: MouseEvent) => {