@qoretechnologies/reqore 0.38.0 → 0.38.2

package/src/components/Notifications/notification.tsx

@@ -4,13 +4,7 @@ import React, { forwardRef, useEffect, useState } from 'react';
 import { useMount, useUnmount } from 'react-use';
 import styled, { css, keyframes } from 'styled-components';
 import { SPRING_CONFIG } from '../../constants/animations';
-import {
-  ICON_WRAPPER_FROM_HEADER_SIZE,
-  PADDING_FROM_SIZE,
-  TABS_SIZE_TO_PX,
-  TEXT_FROM_SIZE,
-  TSizes,
-} from '../../constants/sizes';
+import { PADDING_FROM_SIZE, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { fadeIn } from '../../helpers/animations';
@@ -82,7 +76,6 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
   min-width: ${({ fluid }) => (!fluid ? '30px' : undefined)};
   max-width: ${({ maxWidth, fluid, fixed }) => maxWidth || (fluid && !fixed ? '100%' : undefined)};
   border-radius: 5px;
-  min-height: ${({ size = 'normal' }: IReqoreNotificationStyle) => TABS_SIZE_TO_PX[size]}px;
   display: flex;
   flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
   align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
@@ -172,15 +165,12 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
 `;
 
 export const StyledIconWrapper = styled.div<IReqoreNotificationStyle>`
-  height: ${({ size = 'normal' }: IReqoreNotificationStyle) =>
-    ICON_WRAPPER_FROM_HEADER_SIZE[size]}px;
   flex: 0 1 auto;
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.2s ease-out;
-  margin-top: ${({ size = 'normal' }: IReqoreNotificationStyle) => `${PADDING_FROM_SIZE[size]}px`};
 
   ${({ clickable, theme, intent, type }) =>
     clickable &&
@@ -202,12 +192,21 @@ export const StyledIconWrapper = styled.div<IReqoreNotificationStyle>`
     `}
 `;
 
-export const StyledNotificationContentWrapper = styled.div<IReqoreNotificationStyle>`
+export const StyledNotificationInnerContent = styled.div<IReqoreNotificationStyle>`
   flex: 1;
-  min-height: ${({ size = 'normal' }: IReqoreNotificationStyle) => TABS_SIZE_TO_PX[size]}px;
   display: flex;
   flex-flow: column;
   justify-content: center;
+
+  .reqore-heading {
+    line-height: 1;
+  }
+`;
+
+export const StyledNotificationContentWrapper = styled.div<IReqoreNotificationStyle>`
+  flex: 1;
+  display: flex;
+  justify-content: center;
   padding: ${({ size = 'normal' }: IReqoreNotificationStyle) => `${PADDING_FROM_SIZE[size]}px`};
 `;
 
@@ -224,6 +223,9 @@ export const StyledNotificationContent = styled.div`
   flex: 1;
   font-size: ${({ size = 'normal' }) => TEXT_FROM_SIZE[size]}px;
   overflow-wrap: anywhere;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
 
   ${({ hasTitle, size = 'normal' }) =>
     hasTitle &&
@@ -317,24 +319,26 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
             theme={theme}
             maxWidth='450px'
           >
-            {type || intent || icon ? (
-              <StyledIconWrapper type={type || intent} size={size}>
-                {intent === 'pending' || type === 'pending' ? (
-                  <ReqoreSpinner size={size} type={5} iconMargin={'both'} />
-                ) : (
-                  <ReqoreIcon
-                    icon={icon || typeToIcon[type || intent]}
-                    margin={'both'}
-                    size={size}
-                  />
-                )}
-              </StyledIconWrapper>
-            ) : null}
             <StyledNotificationContentWrapper size={size} theme={theme}>
-              {title && <ReqoreHeading size={size}>{title}</ReqoreHeading>}
-              <StyledNotificationContent theme={theme} hasTitle={!!title} size={size}>
-                {content}
-              </StyledNotificationContent>
+              {type || intent || icon ? (
+                <>
+                  {intent === 'pending' || type === 'pending' ? (
+                    <ReqoreSpinner size={size} type={5} iconMargin={'right'} />
+                  ) : (
+                    <ReqoreIcon
+                      icon={icon || typeToIcon[type || intent]}
+                      margin={'right'}
+                      size={size}
+                    />
+                  )}
+                </>
+              ) : null}
+              <StyledNotificationInnerContent>
+                {title && <ReqoreHeading size={size}>{title}</ReqoreHeading>}
+                <StyledNotificationContent theme={theme} hasTitle={!!title} size={size}>
+                  {content}
+                </StyledNotificationContent>
+              </StyledNotificationInnerContent>
             </StyledNotificationContentWrapper>
             <StyledIconWrapper
               type={type || intent}

package/src/components/Panel/LabelEditor.tsx

@@ -33,6 +33,7 @@ export const LabelEditor = memo(
           onClick={(e) => e.stopPropagation()}
           value={name}
           minimal
+          fluid
           onChange={(e: any) => setName(e.target.value)}
           onKeyUp={(e) => {
             if (e.key === 'Enter') {

package/src/components/Panel/index.tsx

@@ -273,11 +273,9 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
     2 +
     (SIZE_TO_PX[size] + ((transparent && flat) || minimal ? 0 : PADDING_FROM_SIZE[size]) * 2)}px;
   align-items: center;
-  padding: ${({ noHorizontalPadding, size, transparent, flat, minimal, intent }: IStyledPanel) =>
+  padding: ${({ noHorizontalPadding, size, transparent, flat, intent }: IStyledPanel) =>
     `${transparent && flat && !intent ? 0 : PADDING_FROM_SIZE[size]}px ${
-      noHorizontalPadding
-        ? 0
-        : `${minimal ? PADDING_FROM_SIZE[size] / 2 : PADDING_FROM_SIZE[size]}px`
+      noHorizontalPadding ? 0 : `${PADDING_FROM_SIZE[size]}px`
     }`};
   border-bottom: ${({ theme, isCollapsed, flat, opacity = 1 }) =>
     !isCollapsed && !flat
@@ -308,17 +306,21 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
 `;
 
 export const StyledPanelTopBar = styled(StyledPanelTitle)`
-  padding-bottom: ${({ minimal, padded, size }: IStyledPanel) =>
-    !padded ? `${PADDING_FROM_SIZE[size] / (minimal ? 2 : 1)}px` : minimal ? 0 : undefined};
+  padding-bottom: ${({ minimal, padded, size, transparent, isCollapsed }: IStyledPanel) =>
+    !padded || isCollapsed
+      ? `${PADDING_FROM_SIZE[size]}px`
+      : minimal || transparent
+      ? 0
+      : undefined};
   padding-top: ${({ minimal, size }: IStyledPanel) =>
-    minimal ? `${PADDING_FROM_SIZE[size] / 2}px` : undefined};
+    minimal ? `${PADDING_FROM_SIZE[size]}px` : undefined};
 `;
 
 export const StyledPanelBottomActions = styled(StyledPanelTitle)`
-  padding-top: ${({ minimal, padded, size }: IStyledPanel) =>
-    !padded ? `${PADDING_FROM_SIZE[size] / (minimal ? 2 : 1)}px` : minimal ? 0 : undefined};
+  padding-top: ${({ minimal, padded, size, transparent }: IStyledPanel) =>
+    !padded ? `${PADDING_FROM_SIZE[size]}px` : minimal || transparent ? 0 : undefined};
   padding-bottom: ${({ minimal, size }: IStyledPanel) =>
-    minimal ? `${PADDING_FROM_SIZE[size] / 2}px` : undefined};
+    minimal ? `${PADDING_FROM_SIZE[size]}px` : undefined};
   border-bottom: 0;
   border-top: ${({ theme, flat, opacity = 1 }) =>
     !flat
@@ -333,13 +335,21 @@ export const StyledPanelContent = styled.div<IStyledPanel>`
       ? undefined
       : noHorizontalPadding
       ? `${PADDING_FROM_SIZE[size]}px 0`
-      : `${minimal ? PADDING_FROM_SIZE[size] / 2 : PADDING_FROM_SIZE[size]}px`};
+      : `${PADDING_FROM_SIZE[size] / (minimal ? 2 : 1)}px ${PADDING_FROM_SIZE[size]}px`};
   // The padding is not needed when the panel is minimal and has title, since
   // the title already has padding and is transparent
   padding-top: ${({ minimal, hasLabel, padded, size }) =>
-    minimal && hasLabel && padded ? `${PADDING_FROM_SIZE[size] / 2}px` : undefined};
-  padding-bottom: ${({ minimal, padded, size }) =>
-    minimal && padded ? `${PADDING_FROM_SIZE[size] / 2}px` : undefined};
+    minimal && hasLabel && padded
+      ? `${PADDING_FROM_SIZE[size] / 2}px`
+      : padded
+      ? `${PADDING_FROM_SIZE[size]}px`
+      : undefined};
+  padding-bottom: ${({ minimal, padded, size, hasBottomActions }) =>
+    minimal && hasBottomActions && padded
+      ? `${PADDING_FROM_SIZE[size] / 2}px`
+      : padded
+      ? `${PADDING_FROM_SIZE[size]}px`
+      : undefined};
   flex: 1;
   overflow: auto;
   overflow-wrap: anywhere;
@@ -719,7 +729,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             isMobile={isMobile || isSmall}
             ref={measureRef}
             padded={padded}
-            transparent={rest.transparent}
+            transparent={rest.transparent || opacity === 0}
             intent={intent}
           >
             {hasTitleHeader && (
@@ -830,7 +840,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           <StyledPanelContent
             as={'div'}
             className='reqore-panel-content'
-            hasLabel={!!label}
+            hasLabel={!!hasTitleBar}
+            hasBottomActions={hasBottomActions}
             isCollapsed={_isCollapsed}
             style={contentStyle}
             padded={padded}
@@ -850,7 +861,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             padded={padded}
             intent={intent}
             minimal={minimal}
-            transparent={rest.transparent}
+            transparent={rest.transparent || opacity === 0}
             opacity={opacity ?? (minimal ? 0 : 1)}
             size={contentSize || panelSize}
             noHorizontalPadding={noHorizontalPadding}

package/src/components/Tabs/list.tsx

@@ -5,10 +5,10 @@ import styled, { css } from 'styled-components';
 import { IReqoreTabsListItem, IReqoreTabsProps } from '.';
 import { ReqorePopover } from '../..';
 import {
+  CONTROL_TEXT_FROM_SIZE,
   GAP_FROM_SIZE,
   ICON_FROM_SIZE,
   PADDING_FROM_SIZE,
-  TEXT_FROM_SIZE,
   TSizes,
 } from '../../constants/sizes';
 import { IReqoreBreadcrumbsTheme, IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
@@ -100,8 +100,10 @@ const getBadgeLength = (badge: IReqoreButtonProps['badge'], tabsSize: TSizes = '
   }
 
   return (
-    calculateStringSizeInPixels(badge.toString(), TEXT_FROM_SIZE[getOneLessSize(tabsSize)]) +
-    PADDING_FROM_SIZE[tabsSize]
+    calculateStringSizeInPixels(
+      badge.toString(),
+      CONTROL_TEXT_FROM_SIZE[getOneLessSize(tabsSize)]
+    ) + PADDING_FROM_SIZE[tabsSize]
   );
 };
 
@@ -133,11 +135,11 @@ export const getLabelLength = (
     ? 0
     : calculateStringSizeInPixels(
         (item as IReqoreBreadcrumbItem | IReqoreTabsListItem)?.description?.toString(),
-        TEXT_FROM_SIZE[getOneLessSize(tabsSize)]
+        CONTROL_TEXT_FROM_SIZE[getOneLessSize(tabsSize)]
       );
 
   const topLabelLength =
-    calculateStringSizeInPixels(label?.toString(), TEXT_FROM_SIZE[tabsSize]) +
+    calculateStringSizeInPixels(label?.toString(), CONTROL_TEXT_FROM_SIZE[tabsSize]) +
     icon +
     rightIcon +
     closeIconSize +

package/src/components/Tag/index.tsx

@@ -5,10 +5,10 @@ import styled, { css } from 'styled-components';
 import { ReqorePopover, useReqoreTheme } from '../..';
 import {
   BADGE_SIZE_TO_PX,
+  CONTROL_TEXT_FROM_SIZE,
   PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
   SIZE_TO_PX,
-  TEXT_FROM_SIZE,
   TSizes,
 } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
@@ -93,7 +93,7 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   font-weight: 600;
   overflow: hidden;
   vertical-align: middle;
-  font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
+  font-size: ${({ size }) => CONTROL_TEXT_FROM_SIZE[size]}px;
 
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
   max-width: ${({ fixed }) => (fixed !== true ? '100%' : undefined)};
@@ -213,7 +213,7 @@ const StyledTagContentKey = styled(StyledTagContent)`
 
 const StyledButtonWrapper = styled.span<IReqoreTagStyle>`
   flex-shrink: 0;
-  font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
+  font-size: ${({ size }) => CONTROL_TEXT_FROM_SIZE[size]}px;
   width: ${({ size }) => SIZE_TO_PX[size]}px;
   display: flex;
   justify-content: center;

package/src/components/Textarea/index.tsx

@@ -1,7 +1,14 @@
 import { rgba } from 'polished';
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
-import { RADIUS_FROM_SIZE, SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { ReqoreDropdown } from '../..';
+import {
+  CONTROL_TEXT_FROM_SIZE,
+  PADDING_FROM_SIZE,
+  RADIUS_FROM_SIZE,
+  SIZE_TO_PX,
+  TSizes,
+} from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness, getReadableColor } from '../../helpers/colors';
 import { IReqoreAutoFocusRules, useAutoFocus } from '../../hooks/useAutoFocus';
@@ -18,10 +25,13 @@ import {
   IWithReqoreEffect,
   IWithReqoreTooltip,
 } from '../../types/global';
+import { IReqoreDropdownProps } from '../Dropdown';
 import { StyledEffect } from '../Effect';
 import { IReqoreInputStyle } from '../Input';
 import ReqoreInputClearButton from '../InputClearButton';
 
+export interface IReqoreFormTemplates extends IReqoreDropdownProps {}
+
 export interface IReqoreTextareaProps
   extends React.HTMLAttributes<HTMLTextAreaElement>,
     IReqoreReadOnly,
@@ -46,6 +56,7 @@ export interface IReqoreTextareaProps
   onClearClick?: () => any;
   wrapperStyle?: React.CSSProperties;
   focusRules?: IReqoreAutoFocusRules;
+  templates?: IReqoreFormTemplates;
 }
 
 export interface IReqoreTextareaStyle extends IReqoreTextareaProps {
@@ -62,16 +73,23 @@ export const StyledTextareaWrapper = styled.div<IReqoreTextareaStyle>`
   align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
   position: relative;
   overflow: hidden;
+
+  &:focus-within {
+    .reqore-clear-input-button {
+      display: flex;
+    }
+  }
 `;
 
 export const StyledTextarea = styled(StyledEffect)<IReqoreTextareaStyle>`
   width: 100%;
   max-width: 100%;
   max-height: 100%;
-  font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
+  font-size: ${({ _size }) => CONTROL_TEXT_FROM_SIZE[_size]}px;
   margin: 0;
-  padding: 5px 7px;
+  padding: ${({ _size }) => PADDING_FROM_SIZE[_size] / 2}px;
   min-height: ${({ _size }) => SIZE_TO_PX[_size]}px;
+  line-height: ${({ _size }) => SIZE_TO_PX[_size] - CONTROL_TEXT_FROM_SIZE[_size]}px;
 
   background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
     minimal ? 'transparent' : rgba(theme.main, 0.1)};
@@ -141,6 +159,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
       onChange,
       fixed,
       focusRules,
+      templates,
       ...rest
     }: IReqoreTextareaProps,
     ref
@@ -158,6 +177,76 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
     useAutosizeTextArea(inputRef, _value, scaleWithContent);
     useAutoFocus(inputRef, rest.readOnly || rest.disabled ? undefined : focusRules, onChange);
 
+    const handleItemSelect = useCallback(
+      (item) => {
+        if (!inputRef || !item || !item.value) {
+          return;
+        }
+        // Add the value of the selected item to the current value at the cursor position
+        const value = `${_value.slice(0, inputRef.selectionStart)}${item.value}${_value.slice(
+          inputRef.selectionEnd
+        )}`;
+
+        setValue(value);
+      },
+      [inputRef, _value]
+    );
+
+    const renderChildren = () => {
+      return (
+        <>
+          <StyledTextarea
+            {...rest}
+            effect={{
+              interactive: !rest?.disabled && !rest.readOnly,
+              ...rest?.effect,
+            }}
+            onChange={(e) => {
+              setValue(e.target.value);
+              onChange?.(e);
+            }}
+            as='textarea'
+            className={`${className || ''} reqore-control reqore-textarea`}
+            _size={size}
+            ref={(ref) => setInputRef(ref)}
+            theme={theme}
+            rounded={rounded}
+            rows={1}
+            value={_value}
+            readonly={rest?.readOnly}
+            tabIndex={rest?.disabled ? -1 : 0}
+          />
+          <ReqoreInputClearButton
+            enabled={!rest?.readOnly && !rest?.disabled && !!(onClearClick && onChange)}
+            show={_value && _value !== ''}
+            onClick={onClearClick}
+            size={size}
+          />
+        </>
+      );
+    };
+
+    if (templates) {
+      return (
+        <ReqoreDropdown<Omit<IReqoreTextareaStyle & { ref: any }, 'content'>>
+          component={StyledTextareaWrapper}
+          className={`${className || ''} reqore-control-wrapper`}
+          width={width}
+          height={height}
+          fluid={fluid}
+          fixed={fixed}
+          _size={size}
+          theme={theme}
+          style={wrapperStyle}
+          ref={targetRef}
+          onItemSelect={handleItemSelect}
+          {...templates}
+        >
+          {renderChildren()}
+        </ReqoreDropdown>
+      );
+    }
+
     return (
       <StyledTextareaWrapper
         className={`${className || ''} reqore-control-wrapper`}
@@ -170,32 +259,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
         style={wrapperStyle}
         ref={targetRef}
       >
-        <StyledTextarea
-          {...rest}
-          effect={{
-            interactive: !rest?.disabled && !rest.readOnly,
-            ...rest?.effect,
-          }}
-          onChange={(e) => {
-            setValue(e.target.value);
-            onChange?.(e);
-          }}
-          as='textarea'
-          className={`${className || ''} reqore-control reqore-textarea`}
-          _size={size}
-          ref={(ref) => setInputRef(ref)}
-          theme={theme}
-          rounded={rounded}
-          rows={1}
-          value={_value}
-          readonly={rest?.readOnly}
-        />
-        <ReqoreInputClearButton
-          enabled={!rest?.readOnly && !rest?.disabled && !!(onClearClick && onChange)}
-          show={_value && _value !== ''}
-          onClick={onClearClick}
-          size={size}
-        />
+        {renderChildren()}
       </StyledTextareaWrapper>
     );
   }

package/src/constants/sizes.ts

@@ -109,6 +109,14 @@ export const TEXT_FROM_SIZE = {
   huge: 21,
 };
 
+export const CONTROL_TEXT_FROM_SIZE = {
+  tiny: 7,
+  small: 10,
+  normal: 13,
+  big: 16,
+  huge: 19,
+};
+
 export const ICON_FROM_SIZE = {
   tiny: 13,
   small: 17,

package/src/stories/Button/Button.stories.tsx

@@ -48,6 +48,11 @@ const Template: StoryFn<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} minimal flat>
           Minimal
         </ReqoreButton>
+        <ReqoreButton {...buttonProps} icon={undefined} rightIcon={undefined} compact>
+          Compact
+        </ReqoreButton>
+        <ReqoreButton {...buttonProps} rightIcon={undefined} compact />
+        <ReqoreButton {...buttonProps} compact />
         <ReqoreButton {...buttonProps} readOnly onClick={alert}>
           Read only
         </ReqoreButton>

package/src/stories/Dropdown/Dropdown.stories.tsx

@@ -1,6 +1,8 @@
 import { StoryFn, StoryObj } from '@storybook/react';
+import { fireEvent, within } from '@storybook/testing-library';
 import ReqoreButton, { IReqoreButtonProps } from '../../components/Button';
 import { IReqoreDropdownProps } from '../../components/Dropdown';
+import { sleep } from '../../helpers/utils';
 import { ReqoreControlGroup, ReqoreDropdown, ReqoreInput } from '../../index';
 import { StoryMeta } from '../utils';
 import { argManager } from '../utils/args';
@@ -315,3 +317,59 @@ export const WithCustomPaging: Story = {
 
   play: () => {},
 };
+
+export const WithChildItems: Story = {
+  render: (args) => <ReqoreDropdown {...args} />,
+  args: {
+    label: 'Dropdown with child items',
+    items: [
+      {
+        label: 'Test',
+        description: 'I have children',
+        rightIcon: 'MenuLine',
+        rightIconColor: 'info:lighten:2',
+        items: [
+          {
+            label: 'Test child 1',
+          },
+          {
+            label: 'Test child 2',
+          },
+          {
+            label: 'Test child 3',
+            description: 'I have children too',
+            items: [
+              {
+                label: 'Test deep child 1',
+              },
+              {
+                label: 'Test deep child 2',
+              },
+              {
+                label: 'Test deep child 3',
+              },
+            ],
+          },
+          {
+            label: 'Test child 4',
+          },
+        ],
+      },
+      {
+        label: 'Normal item',
+        description: 'I have no children',
+      },
+    ],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    await sleep(200);
+
+    await fireEvent.click(canvas.getAllByText('Dropdown with child items')[0]);
+
+    await sleep(200);
+
+    await fireEvent.click(canvas.getAllByText('Test')[0]);
+  },
+};

package/src/stories/Dropdown/DropdownTests.stories.tsx

@@ -0,0 +1,111 @@
+import { expect } from '@storybook/jest';
+import { StoryObj } from '@storybook/react';
+import { fireEvent, waitFor, within } from '@storybook/testing-library';
+import ReqoreButton, { IReqoreButtonProps } from '../../components/Button';
+import { IReqoreDropdownProps } from '../../components/Dropdown';
+import { sleep } from '../../helpers/utils';
+import { ReqoreDropdown } from '../../index';
+import { StoryMeta } from '../utils';
+import { argManager } from '../utils/args';
+import { WithChildItems } from './Dropdown.stories';
+
+const { createArg, disableArg } = argManager<IReqoreDropdownProps>();
+
+const meta = {
+  title: 'Form/Dropdown/Tests',
+  component: ReqoreDropdown,
+  parameters: {
+    chromatic: {
+      delay: 1500,
+    },
+  },
+  argTypes: {
+    ...disableArg('multiSelect'),
+    ...createArg('component', {
+      defaultValue: ReqoreButton,
+      table: {
+        disable: true,
+      },
+    }),
+    ...createArg('filterable', {
+      defaultValue: true,
+      name: 'Filterable',
+      type: 'boolean',
+    }),
+    ...createArg('items', {
+      table: {
+        disable: true,
+      },
+    }),
+  },
+  args: {
+    component: ReqoreButton,
+    filterable: true,
+  },
+} as StoryMeta<typeof ReqoreDropdown<IReqoreButtonProps>>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ListIsClosedWhenItemIsClicked: Story = {
+  args: {
+    label: 'Default dropdown',
+    items: [
+      {
+        label: 'Test item 1',
+      },
+      {
+        label: 'Test item 2',
+      },
+      {
+        label: 'Test item 3',
+      },
+    ],
+  },
+  play: async ({ canvasElement, ...rest }) => {
+    const canvas = within(canvasElement);
+
+    await sleep(200);
+
+    await fireEvent.click(canvas.getAllByText('Default dropdown')[0]);
+
+    await sleep(200);
+
+    await fireEvent.click(canvas.getAllByText('Test item 1')[0]);
+
+    await sleep(200);
+
+    await expect(document.querySelector('.reqore-popover-content')).toBeFalsy();
+  },
+};
+
+export const ItemsCanBeTraversed: Story = {
+  ...WithChildItems,
+  play: async ({ canvasElement, ...rest }) => {
+    const canvas = within(canvasElement);
+
+    await WithChildItems.play({ canvasElement, ...rest });
+
+    await waitFor(() => expect(canvas.getAllByText('Test child 3')[0]).toBeTruthy(), {
+      timeout: 5000,
+    });
+
+    await fireEvent.click(canvas.getAllByText('Test child 3')[0]);
+
+    await expect(canvas.getAllByText('Test deep child 3')[0]).toBeTruthy();
+  },
+};
+
+export const BackButtonsWork: Story = {
+  ...ItemsCanBeTraversed,
+  play: async ({ canvasElement, ...rest }) => {
+    const canvas = within(canvasElement);
+
+    await ItemsCanBeTraversed.play({ canvasElement, ...rest });
+
+    await fireEvent.click(document.querySelector('.reqore-dropdown-back-button'));
+
+    await expect(canvas.getAllByText('Test child 3')[0]).toBeTruthy();
+  },
+};

package/src/stories/Input/Input.stories.tsx

@@ -107,6 +107,7 @@ const Template: StoryFn<typeof ReqoreInput> = (args: IReqoreInputProps) => {
           placeholder='Clearable Input'
           onClearClick={handleValueClear}
           value={value}
+          focusRules={{ type: 'auto' }}
           onChange={handleValueChange}
         />
         <ReqoreInput