@qoretechnologies/reqore 0.31.2 → 0.32.0

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,7 +329,6 @@ 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);
             }
 
@@ -381,26 +340,12 @@ const ReqoreControlGroup = memo(
                   ? 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/Icon/index.tsx

@@ -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,
@@ -97,6 +103,11 @@ const ReqoreIcon = memo(
         ? 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);
 
@@ -104,11 +115,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 }}
           >
             <img src={image} alt='' />
           </StyledIconWrapper>
@@ -119,11 +131,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 +144,11 @@ const ReqoreIcon = memo(
       return (
         <StyledIconWrapper
           {...rest}
+          as={wrapperElement}
           ref={targetRef}
           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, useRef } 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,21 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       customTheme,
       intent,
       wrapperStyle,
+      focusRules,
       ...rest
     }: IReqoreInputProps,
     ref
   ) => {
     const { targetRef } = useCombinedRefs(ref);
+    const inputRef = useRef<HTMLInputElement>(null);
     const theme = useReqoreTheme('main', customTheme, intent);
 
     useTooltip(targetRef.current, tooltip);
+    useAutoFocus(
+      inputRef.current,
+      readOnly || rest.disabled ? undefined : focusRules,
+      rest.onChange
+    );
 
     return (
       <StyledInputWrapper
@@ -199,23 +225,32 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
             interactive: !rest?.disabled && !readOnly,
             ...rest?.effect,
           }}
+          onChange={!readOnly && !rest?.disabled ? rest?.onChange : undefined}
           as='input'
+          ref={inputRef}
           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/Panel/index.tsx

@@ -1,6 +1,6 @@
 import { size } from 'lodash';
 import { darken, rgba } from 'polished';
-import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
+import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
@@ -21,6 +21,7 @@ import {
 } from '../../helpers/colors';
 import { getOneHigherSize, isActionShown } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useReqore } from '../../hooks/useReqore';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
 import { ACTIVE_ICON_SCALE, INACTIVE_ICON_SCALE } from '../../styles';
@@ -186,6 +187,7 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
 
 export const StyledPanelTitle = styled.div<IStyledPanel>`
   display: flex;
+  flex-flow: ${({ isMobile }) => (isMobile ? 'column' : 'row')};
   background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
     rgba(changeLightness(getMainBackgroundColor(theme), 0.03), opacity)};
   justify-content: space-between;
@@ -306,6 +308,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           ? { main: Object.values(contentEffect.gradient.colors)[0] as TReqoreEffectColor }
           : undefined)
     );
+    const { isMobile } = useReqore();
     const { targetRef } = useCombinedRefs(ref);
 
     useTooltip(targetRef.current, tooltip);
@@ -418,8 +421,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
               stack
               customTheme={rest.customTheme || theme}
               size={rest.size}
-              fixed
-              fluid={rest.fluid}
+              fixed={rest.fixed ? true : false}
+              fluid={rest.fluid ? true : false}
               key={index}
             >
               {group.map((action, index) => renderActions(action, index, true))}
@@ -430,9 +433,9 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         if (size(actions)) {
           return (
             <ReqoreDropdown<IReqoreButtonProps>
+              fixed
               {...rest}
               key={index}
-              fixed
               label={label}
               items={actions}
               intent={intent}
@@ -449,7 +452,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             <CustomElement
               fixed
               {...props}
-              key={index}
+              key={props.key || index}
+              reactKey={props.key || index}
               customTheme={props.customTheme || theme}
               onClick={(e: React.MouseEvent<any>) => {
                 e.stopPropagation();
@@ -461,9 +465,9 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
 
         return (
           <ReqoreButton
+            fixed
             {...rest}
             id={id}
-            fixed
             key={index}
             className={className}
             customTheme={rest.customTheme || theme}
@@ -536,6 +540,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             size={contentSize || panelSize}
             opacity={opacity ?? (minimal ? 0 : 1)}
             noHorizontalPadding={noHorizontalPadding}
+            isMobile={isMobile}
           >
             {hasTitleHeader && (
               <StyledPanelTitleHeader>
@@ -579,7 +584,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             {hasResponsiveActions(actions) && (
               <ReqoreControlGroup
                 responsive={responsiveActions}
-                fluid={responsiveActions}
+                fluid={responsiveActions || isMobile}
                 horizontalAlign='flex-end'
                 customTheme={theme}
                 size={panelSize}
@@ -589,7 +594,12 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             )}
             {collapsible || onClose || hasNonResponsiveActions(actions) ? (
               <>
-                <ReqoreControlGroup fixed horizontalAlign='flex-end' size={panelSize}>
+                <ReqoreControlGroup
+                  fixed={!isMobile}
+                  fluid={isMobile}
+                  horizontalAlign='flex-end'
+                  size={panelSize}
+                >
                   {actions.map(renderNonResponsiveActions)}
                   {collapsible && (
                     <ReqoreButton

package/src/components/Textarea/index.tsx

@@ -4,6 +4,7 @@ import styled, { css } from 'styled-components';
 import { RADIUS_FROM_SIZE, SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } 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 useAutosizeTextArea from '../../hooks/useTextareaAutoSize';
 import { useReqoreTheme } from '../../hooks/useTheme';
@@ -44,6 +45,7 @@ export interface IReqoreTextareaProps
   fixed?: boolean;
   onClearClick?: () => any;
   wrapperStyle?: React.CSSProperties;
+  focusRules?: IReqoreAutoFocusRules;
 }
 
 export interface IReqoreTextareaStyle extends IReqoreTextareaProps {
@@ -138,6 +140,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
       value,
       onChange,
       fixed,
+      focusRules,
       ...rest
     }: IReqoreTextareaProps,
     ref
@@ -152,6 +155,11 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
 
     useTooltip(targetRef?.current, tooltip);
     useAutosizeTextArea(targetRef?.current, _value, scaleWithContent);
+    useAutoFocus(
+      targetRef.current,
+      rest.readOnly || rest.disabled ? undefined : focusRules,
+      onChange
+    );
 
     return (
       <StyledTextareaWrapper
@@ -182,15 +190,14 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
           rounded={rounded}
           rows={1}
           value={_value}
+          readonly={rest?.readOnly}
+        />
+        <ReqoreInputClearButton
+          enabled={!rest?.readOnly && !rest?.disabled && !!(onClearClick && onChange)}
+          show={_value && _value !== ''}
+          onClick={onClearClick}
+          size={size}
         />
-        {!rest.readOnly && (
-          <ReqoreInputClearButton
-            enabled={!rest?.disabled && !!(onClearClick && onChange)}
-            show={_value && _value !== ''}
-            onClick={onClearClick}
-            size={size}
-          />
-        )}
       </StyledTextareaWrapper>
     );
   }