@qoretechnologies/reqore 0.31.1 → 0.32.0

package/src/components/Collection/index.tsx

@@ -2,11 +2,13 @@ import { size } from 'lodash';
 import { useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
+import { PADDING_FROM_SIZE } from '../../constants/sizes';
 import { IReqoreIconName } from '../../types/icons';
 import { IReqoreColumnsProps, StyledColumns } from '../Columns';
 import ReqoreInput, { IReqoreInputProps } from '../Input';
 import ReqoreMessage from '../Message';
 import { IReqorePanelAction, IReqorePanelProps, ReqorePanel, TReqorePanelActions } from '../Panel';
+import { ReqoreVerticalSpacer } from '../Spacer';
 import { sortTableData } from '../Table/helpers';
 import { IReqoreCollectionItemProps, ReqoreCollectionItem } from './item';
 
@@ -26,6 +28,8 @@ export interface IReqoreCollectionProps
       | 'minimal'
       | 'transparent'
       | 'fluid'
+      | 'responsiveActions'
+      | 'padded'
     >,
     IReqoreColumnsProps {
   items?: IReqoreCollectionItemProps[];
@@ -43,6 +47,11 @@ export interface IReqoreCollectionProps
   showSelectedFirst?: boolean;
   selectedIcon?: IReqoreIconName;
 
+  childrenBefore?: React.ReactNode;
+  childrenAfter?: React.ReactNode;
+
+  onQueryChange?: (query: string) => void;
+
   emptyMessage?: string;
   sortButtonTooltip?: (sort?: 'asc' | 'desc') => string;
   displayButtonTooltip?: (display?: 'list' | 'grid') => string;
@@ -50,7 +59,7 @@ export interface IReqoreCollectionProps
 }
 
 export const StyledCollectionWrapper = styled(StyledColumns)`
-  height: ${({ height }) => (height ? `${height}px` : 'auto')};
+  height: ${({ height }) => (height ? `${height}` : 'auto')};
 
   ${({ rounded, stacked }: IReqoreCollectionProps) =>
     (!rounded || stacked) &&
@@ -58,7 +67,7 @@ export const StyledCollectionWrapper = styled(StyledColumns)`
       border-radius: ${stacked && rounded ? '10px' : undefined};
     `}
 
-  overflow: hidden;
+  overflow: auto;
   position: relative;
 `;
 
@@ -68,7 +77,6 @@ export const ReqoreCollection = ({
   stacked,
   rounded = true,
   fill,
-  height,
   maxItemHeight,
   filterable,
   sortable,
@@ -82,11 +90,13 @@ export const ReqoreCollection = ({
   flat = true,
   minimal,
   transparent = true,
-
+  onQueryChange,
+  childrenBefore,
+  childrenAfter,
   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'),
-  inputPlaceholder = (items) => `Filter ${size(items)} items`,
+  inputPlaceholder = (items) => `Search in ${size(items)} items`,
   ...rest
 }: IReqoreCollectionProps) => {
   const [_showAs, setShowAs] = useState<'list' | 'grid'>(showAs);
@@ -97,6 +107,10 @@ export const ReqoreCollection = ({
     setShowAs(showAs);
   }, [showAs]);
 
+  useUpdateEffect(() => {
+    onQueryChange?.(query);
+  }, [query]);
+
   const sortedItems: IReqoreCollectionItemProps[] = useMemo(() => {
     if (!sortable) {
       return items;
@@ -182,6 +196,8 @@ export const ReqoreCollection = ({
         {
           as: ReqoreInput,
           props: {
+            key: 'search',
+            fixed: false,
             placeholder: inputPlaceholder(finalItems),
             onClearClick: () => setQuery(''),
             onChange: handleQueryChange,
@@ -203,16 +219,20 @@ export const ReqoreCollection = ({
       headerSize={headerSize}
       style={{
         ...rest.style,
-        height: height ?? undefined,
       }}
       fill={fill}
-      padded
       transparent={transparent}
       minimal={minimal}
       flat={flat}
       actions={finalActions}
       className={`reqore-collection ${rest.className || ''}`}
     >
+      {childrenBefore ? (
+        <>
+          {childrenBefore}
+          <ReqoreVerticalSpacer height={PADDING_FROM_SIZE[rest.size || 'normal']} />
+        </>
+      ) : null}
       {!size(finalItems) ? (
         <ReqoreMessage flat icon='Search2Line'>
           {emptyMessage}
@@ -227,6 +247,7 @@ export const ReqoreCollection = ({
         >
           {finalItems?.map((item, index) => (
             <ReqoreCollectionItem
+              size={rest.size}
               {...item}
               icon={item.icon || (item.selected ? selectedIcon : undefined)}
               key={index}
@@ -236,6 +257,12 @@ export const ReqoreCollection = ({
           ))}
         </StyledCollectionWrapper>
       )}
+      {childrenAfter ? (
+        <>
+          <ReqoreVerticalSpacer height={PADDING_FROM_SIZE[rest.size || 'normal']} />
+          {childrenAfter}
+        </>
+      ) : null}
     </ReqorePanel>
   );
 };

package/src/components/Collection/item.tsx

@@ -206,6 +206,7 @@ export const ReqoreCollectionItem = ({
           ref={ref}
           minimal={minimal}
           {...rest}
+          responsiveActions={false}
           bottomActions={isSelected ? expandedActions : undefined}
           style={{
             ...style,

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;