@qoretechnologies/reqore 0.37.9 → 0.38.1

package/src/components/Panel/index.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
-import { isArray, size } from 'lodash';
+import { isArray, omit, size } from 'lodash';
 import { darken, rgba } from 'polished';
+import { Resizable, ResizableProps } from 're-resizable';
 import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
 import { useMeasure, useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
@@ -44,8 +45,9 @@ import ReqoreControlGroup from '../ControlGroup';
 import ReqoreDropdown from '../Dropdown';
 import { IReqoreDropdownItem } from '../Dropdown/list';
 import { IReqoreEffect, StyledEffect, TReqoreEffectColor } from '../Effect';
-import { ReqoreHeading, StyledHeader } from '../Header';
+import { StyledHeader } from '../Header';
 import ReqoreIcon, { IReqoreIconProps, StyledIconWrapper } from '../Icon';
+import { LabelEditor } from './LabelEditor';
 import { ReqorePanelNonResponsiveActions } from './NonResponsiveActions';
 
 export interface IReqorePanelSubAction extends Omit<IReqoreDropdownItem, 'value'> {}
@@ -92,6 +94,9 @@ export interface IReqorePanelProps
   collapseButtonProps?: IReqoreButtonProps;
   disabled?: boolean;
 
+  onLabelEdit?: (label: string | number) => void;
+  resizable?: ResizableProps;
+
   breadcrumbs?: IReqoreBreadcrumbsProps;
 
   onClose?: () => void;
@@ -164,7 +169,17 @@ export const StyledPanelTitleHeaderContent = styled.div`
   }
 `;
 
-export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
+export type TPanelStyle = React.FC<
+  Omit<IReqorePanelProps, 'onResize' | 'size'> &
+    ResizableProps & {
+      ref?: any;
+      theme: IReqoreTheme;
+      effect: IReqoreEffect;
+      interactive?: boolean;
+    }
+>;
+
+export const StyledPanel: TPanelStyle = styled(StyledEffect)<IStyledPanel>`
   background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
     rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)};
   border-radius: ${({ rounded }) => (rounded ? RADIUS_FROM_SIZE.normal : 0)}px;
@@ -181,7 +196,6 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
   flex-flow: column;
   position: relative;
   backdrop-filter: ${({ blur, opacity }) => (blur && opacity < 1 ? `blur(${blur}px)` : undefined)};
-  transition: 0.2s ease-in-out;
   width: ${({ fluid }) => (fluid ? '100%' : undefined)};
   max-width: 100%;
   flex: ${({ fluid }) => (fluid ? '1 auto' : '0 0 auto')};
@@ -255,10 +269,14 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
     rgba(changeLightness(getMainBackgroundColor(theme), 0.03), opacity)};
   justify-content: space-between;
   // 2 is border that has to be added to the size + the button size + padding
-  min-height: ${({ size }) => 2 + (SIZE_TO_PX[size] + PADDING_FROM_SIZE[size] * 2)}px;
+  min-height: ${({ size, transparent, flat, minimal }) =>
+    2 +
+    (SIZE_TO_PX[size] + ((transparent && flat) || minimal ? 0 : PADDING_FROM_SIZE[size]) * 2)}px;
   align-items: center;
-  padding: ${({ noHorizontalPadding, size }: IStyledPanel) =>
-    `${PADDING_FROM_SIZE[size]}px ${noHorizontalPadding ? 0 : `${PADDING_FROM_SIZE[size]}px`}`};
+  padding: ${({ noHorizontalPadding, size, transparent, flat, intent }: IStyledPanel) =>
+    `${transparent && flat && !intent ? 0 : PADDING_FROM_SIZE[size]}px ${
+      noHorizontalPadding ? 0 : `${PADDING_FROM_SIZE[size]}px`
+    }`};
   border-bottom: ${({ theme, isCollapsed, flat, opacity = 1 }) =>
     !isCollapsed && !flat
       ? `1px solid ${rgba(changeLightness(getMainBackgroundColor(theme), 0.2), opacity)}`
@@ -287,9 +305,18 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
     `}
 `;
 
+export const StyledPanelTopBar = styled(StyledPanelTitle)`
+  padding-bottom: ${({ minimal, padded, size, transparent }: IStyledPanel) =>
+    !padded ? `${PADDING_FROM_SIZE[size]}px` : minimal || transparent ? 0 : undefined};
+  padding-top: ${({ minimal, size }: IStyledPanel) =>
+    minimal ? `${PADDING_FROM_SIZE[size]}px` : undefined};
+`;
+
 export const StyledPanelBottomActions = styled(StyledPanelTitle)`
-  padding: ${({ noHorizontalPadding, size }: IStyledPanel) =>
-    `${PADDING_FROM_SIZE[size]}px ${noHorizontalPadding ? 0 : `${PADDING_FROM_SIZE[size]}px`}`};
+  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]}px` : undefined};
   border-bottom: 0;
   border-top: ${({ theme, flat, opacity = 1 }) =>
     !flat
@@ -299,18 +326,26 @@ export const StyledPanelBottomActions = styled(StyledPanelTitle)`
 
 export const StyledPanelContent = styled.div<IStyledPanel>`
   display: ${({ isCollapsed }) => (isCollapsed ? 'none !important' : undefined)};
-  padding: ${({ padded, size, noHorizontalPadding }) =>
+  padding: ${({ padded, size, noHorizontalPadding, minimal }) =>
     !padded
       ? undefined
       : noHorizontalPadding
       ? `${PADDING_FROM_SIZE[size]}px 0`
-      : `${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]}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;
@@ -359,6 +394,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       breadcrumbs,
       showActionsWhenCollapsed = true,
       showHeaderTooltip,
+      resizable,
+      onLabelEdit,
       ...rest
     }: IReqorePanelProps,
     ref
@@ -382,6 +419,27 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       setIsCollapsed(!!isCollapsed);
     }, [isCollapsed]);
 
+    const _resizable: ResizableProps = useMemo(() => {
+      const disabledProps: ResizableProps = {
+        enable: {
+          top: false,
+          right: false,
+          bottom: false,
+          left: false,
+          topRight: false,
+          bottomRight: false,
+          bottomLeft: false,
+          topLeft: false,
+        },
+      };
+
+      if (isCollapsed || disabled) {
+        return disabledProps;
+      }
+
+      return resizable || disabledProps;
+    }, [resizable, isCollapsed, disabled]);
+
     // Return true if the card has a title bar, otherwise return false.
     const hasTitleBar: boolean = useMemo(
       () =>
@@ -626,11 +684,18 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
 
     return (
       <StyledPanel
-        {...rest}
-        as={rest.as || 'div'}
+        {...omit(rest, ['onResize'])}
+        {..._resizable}
+        as={rest.as || !!resizable ? Resizable : 'div'}
         ref={(ref) => {
-          targetRef.current = ref;
-          setItemRef(ref);
+          let _ref = ref;
+
+          if (ref?.resizable) {
+            _ref = ref.resizable;
+          }
+
+          targetRef.current = _ref;
+          setItemRef(_ref);
         }}
         isCollapsed={_isCollapsed}
         rounded={rounded}
@@ -645,19 +710,23 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         disabled={disabled}
       >
         {hasTitleBar && (
-          <StyledPanelTitle
+          <StyledPanelTopBar
             flat={flat}
             isCollapsed={_isCollapsed}
             collapsible={collapsible}
             className='reqore-panel-title'
             onClick={handleCollapseClick}
             theme={theme}
+            minimal={minimal}
             size={contentSize || panelSize}
             opacity={opacity ?? (minimal ? 0 : 1)}
             noHorizontalPadding={noHorizontalPadding}
             responsive={responsiveTitle}
             isMobile={isMobile || isSmall}
             ref={measureRef}
+            padded={padded}
+            transparent={rest.transparent || opacity === 0}
+            intent={intent}
           >
             {hasTitleHeader && (
               <StyledPanelTitleHeader>
@@ -693,17 +762,17 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                       />
                     ) : null}
                     {typeof label === 'string' ? (
-                      <ReqoreHeading
+                      <LabelEditor
                         size={headerSize || panelSize}
                         customTheme={theme}
                         effect={{
                           noWrap: true,
                           ...headerEffect,
                         }}
+                        label={label}
+                        onSubmit={onLabelEdit}
                         tooltip={showHeaderTooltip ? label : undefined}
-                      >
-                        {label}
-                      </ReqoreHeading>
+                      />
                     ) : (
                       label
                     )}
@@ -761,13 +830,14 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             >
               {actions.map(renderNonResponsiveActions())}
             </ReqorePanelNonResponsiveActions>
-          </StyledPanelTitle>
+          </StyledPanelTopBar>
         )}
         {!_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? (
           <StyledPanelContent
             as={'div'}
             className='reqore-panel-content'
-            hasLabel={!!label}
+            hasLabel={!!hasTitleBar}
+            hasBottomActions={hasBottomActions}
             isCollapsed={_isCollapsed}
             style={contentStyle}
             padded={padded}
@@ -784,6 +854,10 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             flat={flat}
             className='reqore-panel-bottom-actions'
             theme={theme}
+            padded={padded}
+            intent={intent}
+            minimal={minimal}
+            transparent={rest.transparent || opacity === 0}
             opacity={opacity ?? (minimal ? 0 : 1)}
             size={contentSize || panelSize}
             noHorizontalPadding={noHorizontalPadding}

package/src/components/Tabs/content.tsx

@@ -1,12 +1,24 @@
 import React from 'react';
 import styled from 'styled-components';
+import { PADDING_FROM_SIZE, TSizes } from '../../constants/sizes';
 
-export type TReqoreTabsContentPadding = 'horizontal' | 'vertical' | 'none' | 'both' | true | false;
+export type TReqoreTabsContentPadding =
+  | 'horizontal'
+  | 'vertical'
+  | 'none'
+  | 'both'
+  | 'top'
+  | 'bottom'
+  | 'left'
+  | 'right'
+  | true
+  | false;
 
 export interface IReqoreTabsContent extends React.HTMLAttributes<HTMLDivElement> {
   children?: any;
   tabId: string | number;
   padded?: TReqoreTabsContentPadding;
+  size?: TSizes;
 }
 
 const StyledTabsContent = styled.div`
@@ -14,16 +26,41 @@ const StyledTabsContent = styled.div`
   flex-flow: column;
   overflow: hidden;
   flex: 1;
-  padding: ${({ padded }: IReqoreTabsContent) =>
+  padding: ${({ padded, size }: IReqoreTabsContent) =>
     padded === 'none' || padded === false
       ? undefined
-      : `${padded === 'both' || padded === true || padded === 'vertical' ? 10 : 0}px ${
-          padded === 'both' || padded === true || padded === 'horizontal' ? 10 : 0
-        }px}`};
+      : `${
+          padded === 'both' || padded === true || padded === 'vertical'
+            ? `${PADDING_FROM_SIZE[size]}px`
+            : 0
+        } ${
+          padded === 'both' || padded === true || padded === 'horizontal'
+            ? `${PADDING_FROM_SIZE[size]}px`
+            : 0
+        }`};
+  padding-top: ${({ padded, size }: IReqoreTabsContent) =>
+    padded === 'top' ? `${PADDING_FROM_SIZE[size]}px` : undefined};
+  padding-bottom: ${({ padded, size }: IReqoreTabsContent) =>
+    padded === 'bottom' ? `${PADDING_FROM_SIZE[size]}px` : undefined};
+  padding-left: ${({ padded, size }: IReqoreTabsContent) =>
+    padded === 'left' ? `${PADDING_FROM_SIZE[size]}px` : undefined};
+  padding-right: ${({ padded, size }: IReqoreTabsContent) =>
+    padded === 'right' ? `${PADDING_FROM_SIZE[size]}px` : undefined};
 `;
 
-const ReqoreTabsContent = ({ children, className, padded = true, ...rest }: IReqoreTabsContent) => (
-  <StyledTabsContent {...rest} padded={padded} className={`${className || ''} reqore-tabs-content`}>
+const ReqoreTabsContent = ({
+  children,
+  className,
+  padded = true,
+  size = 'normal',
+  ...rest
+}: IReqoreTabsContent) => (
+  <StyledTabsContent
+    {...rest}
+    size={size}
+    padded={padded}
+    className={`${className || ''} reqore-tabs-content`}
+  >
     {children}
   </StyledTabsContent>
 );

package/src/components/Textarea/index.tsx

@@ -1,6 +1,7 @@
 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 { ReqoreDropdown } from '../..';
 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';
@@ -18,10 +19,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 +50,7 @@ export interface IReqoreTextareaProps
   onClearClick?: () => any;
   wrapperStyle?: React.CSSProperties;
   focusRules?: IReqoreAutoFocusRules;
+  templates?: IReqoreFormTemplates;
 }
 
 export interface IReqoreTextareaStyle extends IReqoreTextareaProps {
@@ -141,6 +146,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
       onChange,
       fixed,
       focusRules,
+      templates,
       ...rest
     }: IReqoreTextareaProps,
     ref
@@ -158,6 +164,75 @@ 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}
+          />
+          <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 +245,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/mock/breadcrumbs.ts

@@ -17,9 +17,20 @@ export default [
     props: {
       href: 'https://google.com',
     },
-    icon: Icons.Workflows,
+    leftIconProps: {
+      image:
+        'https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4',
+    },
     flat: false,
     intent: 'info',
+    effect: {
+      glow: {
+        color: 'info',
+        size: 1,
+        blur: 10,
+        when: 'hover',
+      },
+    },
   },
   {
     icon: Icons.Services,

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,78 @@
+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 { 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 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/Message/Message.stories.tsx

@@ -39,11 +39,8 @@ const Template: StoryFn<IReqoreMessageProps> = (args: IReqoreMessageProps) => {
   return (
     <>
       <ReqoreMessage {...args} onClick={noop}>
-        In to am attended desirous raptures declared diverted confined at. Collected instantly
-        remaining up certainly to necessary as. Over walk dull into son boy door went new. At or
-        happiness commanded daughters as. Is handsome an declared at received in extended vicinity
-        subjects. Into miss on he over been late pain an. Only week bore boy what fat case left use.
-        Match round scale now sex style far times. Your me past an much.
+        {args.children ||
+          'In to am attended desirous raptures declared diverted confined at. Collected instantly remaining up certainly to necessary as. Over walk dull into son boy door went new. At or happiness commanded daughters as. Is handsome an declared at received in extended vicinity subjects. Into miss on he over been late pain an. Only week bore boy what fat case left use. Match round scale now sex style far times. Your me past an much.'}
       </ReqoreMessage>
     </>
   );
@@ -53,6 +50,16 @@ export const Basic: Story = {
   render: Template,
 };
 
+export const NoTitle: Story = {
+  render: Template,
+  args: {
+    icon: 'InformationFill',
+    flat: true,
+    title: undefined,
+    children: 'This is a test',
+  },
+};
+
 export const Flat: Story = {
   render: Template,
 
@@ -68,6 +75,7 @@ export const Minimal: Story = {
   args: {
     minimal: true,
     intent: 'danger',
+    size: 'small',
   },
 };