@qoretechnologies/reqore 0.37.9 → 0.38.0

package/src/components/ControlGroup/index.tsx

@@ -474,6 +474,7 @@ const ReqoreControlGroup = memo(
                 active={isOverflownDialogOpen}
                 flat
                 fixed
+                onClick={(e) => e.stopPropagation()}
               />,
             ]
           : children,

package/src/components/Drawer/index.tsx

@@ -16,7 +16,7 @@ import { ReqoreBackdrop } from './backdrop';
 
 export type TPosition = 'top' | 'bottom' | 'left' | 'right';
 
-export interface IReqoreDrawerProps extends Omit<IReqorePanelProps, 'size'> {
+export interface IReqoreDrawerProps extends Omit<IReqorePanelProps, 'size' | 'resizable'> {
   children?: any;
   isOpen?: boolean;
   isHidden?: boolean;

package/src/components/Effect/index.tsx

@@ -75,6 +75,7 @@ export interface IReqoreEffect extends IReqoreEffectFilters {
     inset?: boolean;
     blur?: number;
     opacity?: number;
+    when?: 'always' | 'hover' | 'focus' | 'active';
   };
   interactive?: boolean;
 }
@@ -222,28 +223,58 @@ export const StyledEffect = styled.span`
       return undefined;
     }
 
+    let glow;
+
     if (!isText) {
-      return css`
+      glow = css`
         box-shadow: ${effect.glow.inset ? 'inset ' : ''} 0 0 ${effect.glow.blur || 0}px
           ${effect.glow.size || 2}px ${getColorFromMaybeString(theme, effect.glow.color)};
       `;
+    } else {
+      const color = getColorFromMaybeString(
+        theme,
+        effect.glow.color === 'main' ? 'main:lighten:2' : effect.glow.color
+      );
+      const blur = effect.glow.blur || 0;
+      const opacity = effect.glow.opacity || 1;
+
+      glow = css`
+        color: ${Colors.LIGHT};
+        text-shadow: 0 0 ${blur}px ${rgba(color, opacity)},
+          0 0 ${blur + 5}px ${rgba(color, opacity)}, 0 0 ${blur + 10}px ${rgba(color, opacity)},
+          0 0 1px ${rgba(getReadableColorFrom(color), opacity)},
+          0 0 2px ${rgba(getReadableColorFrom(color), opacity)},
+          0 0 3px ${rgba(getReadableColorFrom(color), opacity)};
+      `;
     }
 
-    const color = getColorFromMaybeString(
-      theme,
-      effect.glow.color === 'main' ? 'main:lighten:2' : effect.glow.color
-    );
-    const blur = effect.glow.blur || 0;
-    const opacity = effect.glow.opacity || 1;
+    if (effect.glow.when === 'always' || !effect.glow.when) {
+      return glow;
+    }
 
-    return css`
-      color: ${Colors.LIGHT};
-      text-shadow: 0 0 ${blur}px ${rgba(color, opacity)}, 0 0 ${blur + 5}px ${rgba(color, opacity)},
-        0 0 ${blur + 10}px ${rgba(color, opacity)},
-        0 0 1px ${rgba(getReadableColorFrom(color), opacity)},
-        0 0 2px ${rgba(getReadableColorFrom(color), opacity)},
-        0 0 3px ${rgba(getReadableColorFrom(color), opacity)};
-    `;
+    if (effect.glow.when === 'hover') {
+      return css`
+        &:hover {
+          ${glow}
+        }
+      `;
+    }
+
+    if (effect.glow.when === 'focus') {
+      return css`
+        &:focus {
+          ${glow}
+        }
+      `;
+    }
+
+    if (effect.glow.when === 'active') {
+      return css`
+        &:active {
+          ${glow}
+        }
+      `;
+    }
   }}
 
   ${({ effect }: IReqoreTextEffectProps) =>

package/src/components/InternalPopover/index.tsx

@@ -3,6 +3,7 @@ import { rgba } from 'polished';
 import React, { MutableRefObject, memo, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
+import { useUnmount, useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import { useContext } from 'use-context-selector';
 import { RADIUS_FROM_SIZE } from '../../constants/sizes';
@@ -164,7 +165,8 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = memo(
     const [popperElement, setPopperElement] = useState(null);
     const [arrowElement, setArrowElement] = useState(null);
     const popperRef: MutableRefObject<any> = useRef(null);
-    const { styles, attributes } = usePopper(targetElement, popperElement, {
+    const mutationObserber: MutableRefObject<any> = useRef(null);
+    const { styles, attributes, forceUpdate, state } = usePopper(targetElement, popperElement, {
       placement,
       modifiers: [
         {
@@ -186,6 +188,27 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = memo(
       ],
     });
 
+    useUpdateEffect(() => {
+      if (!mutationObserber.current && targetElement && state) {
+        // Watch for changes in the target element
+        const observer = new MutationObserver(() => {
+          forceUpdate();
+        });
+
+        observer.observe(document, {
+          attributes: true,
+          childList: true,
+          subtree: true,
+        });
+
+        mutationObserber.current = observer;
+      }
+    }, [styles, attributes, state]);
+
+    useUnmount(() => {
+      mutationObserber.current?.disconnect();
+    });
+
     useEffect(() => {
       if (popperRef.current) {
         updatePopover?.(id, { popperRef: cloneDeep(popperRef) });

package/src/components/Panel/LabelEditor.tsx

@@ -0,0 +1,66 @@
+import { memo, useEffect, useState } from 'react';
+import { useUpdateEffect } from 'react-use';
+import { IReqoreHeadingProps, ReqoreHeading } from '../Header';
+import ReqoreIcon, { IReqoreIconProps } from '../Icon';
+import ReqoreInput, { IReqoreInputProps } from '../Input';
+
+export interface IReqoreLabelEditorProps extends Omit<IReqoreHeadingProps, 'onSubmit'> {
+  label: string | number;
+  onSubmit?: (label: string | number) => void;
+  iconProps?: IReqoreIconProps;
+  inputProps?: IReqoreInputProps;
+}
+
+export const LabelEditor = memo(
+  ({ label, onSubmit, inputProps, iconProps, ...rest }: IReqoreLabelEditorProps) => {
+    const [name, setName] = useState<string | number>(label);
+    const [isEditing, setIsEditing] = useState(false);
+
+    useEffect(() => {
+      setName(label);
+    }, [label]);
+
+    useUpdateEffect(() => {
+      if (!isEditing) {
+        onSubmit?.(name);
+      }
+    }, [isEditing]);
+
+    if (isEditing) {
+      return (
+        <ReqoreInput
+          focusRules={{ type: 'auto' }}
+          onClick={(e) => e.stopPropagation()}
+          value={name}
+          minimal
+          onChange={(e: any) => setName(e.target.value)}
+          onKeyUp={(e) => {
+            if (e.key === 'Enter') {
+              setIsEditing(false);
+            }
+          }}
+          onBlur={() => setIsEditing(false)}
+          {...inputProps}
+        />
+      );
+    }
+
+    return (
+      <ReqoreHeading
+        {...rest}
+        className={`${rest.className || ''} reqore-label-editor`}
+        onClick={
+          onSubmit
+            ? (e) => {
+                e.stopPropagation();
+                setIsEditing(true);
+              }
+            : undefined
+        }
+      >
+        {name}
+        {onSubmit ? <ReqoreIcon icon='EditLine' size='small' margin='left' {...iconProps} /> : null}
+      </ReqoreHeading>
+    );
+  }
+);

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,16 @@ 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, minimal, intent }: IStyledPanel) =>
+    `${transparent && flat && !intent ? 0 : PADDING_FROM_SIZE[size]}px ${
+      noHorizontalPadding
+        ? 0
+        : `${minimal ? PADDING_FROM_SIZE[size] / 2 : 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 +307,18 @@ 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-top: ${({ minimal, size }: IStyledPanel) =>
+    minimal ? `${PADDING_FROM_SIZE[size] / 2}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 }: IStyledPanel) =>
+    !padded ? `${PADDING_FROM_SIZE[size] / (minimal ? 2 : 1)}px` : minimal ? 0 : undefined};
+  padding-bottom: ${({ minimal, size }: IStyledPanel) =>
+    minimal ? `${PADDING_FROM_SIZE[size] / 2}px` : undefined};
   border-bottom: 0;
   border-top: ${({ theme, flat, opacity = 1 }) =>
     !flat
@@ -299,18 +328,18 @@ 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`};
+      : `${minimal ? PADDING_FROM_SIZE[size] / 2 : 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 && padded ? `${PADDING_FROM_SIZE[size] / 2}px` : undefined};
   flex: 1;
   overflow: auto;
   overflow-wrap: anywhere;
@@ -359,6 +388,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       breadcrumbs,
       showActionsWhenCollapsed = true,
       showHeaderTooltip,
+      resizable,
+      onLabelEdit,
       ...rest
     }: IReqorePanelProps,
     ref
@@ -382,6 +413,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 +678,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 +704,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}
+            intent={intent}
           >
             {hasTitleHeader && (
               <StyledPanelTitleHeader>
@@ -693,17 +756,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,7 +824,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             >
               {actions.map(renderNonResponsiveActions())}
             </ReqorePanelNonResponsiveActions>
-          </StyledPanelTitle>
+          </StyledPanelTopBar>
         )}
         {!_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? (
           <StyledPanelContent
@@ -784,6 +847,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={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/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/Panel/Panel.stories.tsx

@@ -1,4 +1,5 @@
 import { StoryFn, StoryObj } from '@storybook/react';
+import { fireEvent } from '@storybook/testing-library';
 import { noop } from 'lodash';
 import ReqoreControlGroup from '../../components/ControlGroup';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
@@ -358,6 +359,17 @@ export const Minimal: Story = {
   },
 };
 
+export const MinimalWithIntent: Story = {
+  render: Template,
+
+  args: {
+    minimal: true,
+    flat: true,
+    intent: 'info',
+    transparent: true,
+  },
+};
+
 export const Disabled: Story = {
   render: Template,
 
@@ -615,3 +627,28 @@ export const WithEffect: Story = {
     headerSize: 2,
   },
 };
+
+export const Resizable: Story = {
+  render: Template,
+
+  args: {
+    resizable: {
+      minWidth: 400,
+      maxWidth: 600,
+      defaultSize: { width: 400, height: '100%' },
+      enable: { right: true },
+    },
+  },
+};
+
+export const EditableLabel: Story = {
+  render: Template,
+
+  args: {
+    onLabelEdit: (label) => console.log(label),
+    badge: undefined,
+  },
+  play: async ({ canvasElement }) => {
+    await fireEvent.click(canvasElement.querySelector('.reqore-label-editor'));
+  },
+};

package/src/stories/Popover/Popover.stories.tsx

@@ -1,15 +1,20 @@
 import { StoryFn, StoryObj } from '@storybook/react';
+import { fireEvent } from '@storybook/testing-library';
 import { useState } from 'react';
 import { IReqorePopoverProps } from '../../components/Popover';
+import { sleep } from '../../helpers/utils';
 import usePopover from '../../hooks/usePopover';
 import {
   ReqoreButton,
   ReqoreControlGroup,
+  ReqoreMenu,
+  ReqoreMenuItem,
   ReqoreMessage,
   ReqoreModal,
   ReqorePanel,
   ReqorePopover,
   ReqoreSpacer,
+  ReqoreTextarea,
 } from '../../index';
 import { StoryMeta } from '../utils';
 import { FlatArg, argManager } from '../utils/args';
@@ -393,3 +398,39 @@ export const BlurredInsideModal: Story = {
     animatedDialogs: false,
   },
 };
+
+export const ChangingElement: Story = {
+  render: (args) => {
+    return <ReqoreTextarea scaleWithContent tooltip={args} />;
+  },
+
+  args: {
+    content: (
+      <ReqoreMenu>
+        <ReqoreMenuItem label='Item 1' />
+        <ReqoreMenuItem label='Item 2' />
+        <ReqoreMenuItem label='Item 3' />
+        <ReqoreMenuItem label='Item 4' />
+        <ReqoreMenuItem label='Item 5' />
+        <ReqoreMenuItem label='Item 6' />
+      </ReqoreMenu>
+    ),
+    handler: 'focus',
+    noArrow: true,
+    noWrapper: true,
+    useTargetWidth: true,
+  },
+
+  play: async ({ canvasElement }) => {
+    const textarea = canvasElement.querySelector('textarea');
+    await sleep(1000);
+    fireEvent.focusIn(textarea);
+    await sleep(1000);
+    fireEvent.change(textarea, {
+      target: {
+        value:
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl eget aliquam tincidunt, nunc nisl aliquet nunc, quis aliquam nisl nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl eget aliquam tincidunt, nunc nisl aliquet nunc, quis aliquam nisl nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl eget aliquam tincidunt, nunc nisl aliquet nunc, quis aliquam nisl nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl eget aliquam tincidunt, nunc nisl aliquet nunc, quis aliquam nisl nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl eget aliquam tincidunt, nunc nisl aliquet nunc, quis aliquam nisl nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl eget aliquam tincidunt, nunc nisl aliquet nunc, quis aliquam nisl nisl.',
+      },
+    });
+  },
+};