@qoretechnologies/reqore 0.31.1 → 0.32.0

package/src/components/Panel/index.tsx

@@ -21,6 +21,7 @@ import {
 } from '../../helpers/colors';
 import { getOneHigherSize, isActionShown } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useReqore } from '../../hooks/useReqore';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
 import { ACTIVE_ICON_SCALE, INACTIVE_ICON_SCALE } from '../../styles';
@@ -29,6 +30,7 @@ import {
   IWithReqoreCustomTheme,
   IWithReqoreFlat,
   IWithReqoreFluid,
+  IWithReqoreIconImage,
   IWithReqoreSize,
   IWithReqoreTooltip,
 } from '../../types/global';
@@ -40,8 +42,7 @@ import ReqoreDropdown from '../Dropdown';
 import { IReqoreDropdownItem } from '../Dropdown/list';
 import { IReqoreEffect, StyledEffect, TReqoreEffectColor } from '../Effect';
 import { ReqoreHeading } from '../Header';
-import ReqoreIcon, { StyledIconWrapper } from '../Icon';
-import { ReqoreHorizontalSpacer, ReqoreSpacer } from '../Spacer';
+import ReqoreIcon, { IReqoreIconProps, StyledIconWrapper } from '../Icon';
 
 export interface IReqorePanelAction extends IReqoreButtonProps, IWithReqoreTooltip, IReqoreIntent {
   label?: string | number;
@@ -72,10 +73,12 @@ export interface IReqorePanelProps
     IReqoreIntent,
     IWithReqoreTooltip,
     IWithReqoreFluid,
+    IWithReqoreIconImage,
     React.HTMLAttributes<HTMLDivElement> {
   as?: any;
   children?: any;
   icon?: IReqoreIconName;
+  iconProps?: IReqoreIconProps;
   label?: string | ReactElement<any>;
   badge?: TReqoreBadge | TReqoreBadge[];
   collapsible?: boolean;
@@ -184,6 +187,7 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
 
 export const StyledPanelTitle = styled.div<IStyledPanel>`
   display: flex;
+  flex-flow: ${({ isMobile }) => (isMobile ? 'column' : 'row')};
   background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
     rgba(changeLightness(getMainBackgroundColor(theme), 0.03), opacity)};
   justify-content: space-between;
@@ -198,6 +202,7 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
   transition: background-color 0.2s ease-out;
   overflow: hidden;
   flex: 0 0 auto;
+  gap: ${GAP_FROM_SIZE.normal}px;
 
   > div > ${StyledIconWrapper} {
     transform: scale(${INACTIVE_ICON_SCALE});
@@ -252,7 +257,6 @@ export const StyledPanelTitleHeader = styled.div`
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  padding-right: 5px;
   flex: 1 1 auto;
   width: 100%;
   overflow: hidden;
@@ -272,6 +276,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       isCollapsed,
       customTheme,
       icon,
+      iconImage,
       intent,
       className,
       flat,
@@ -287,6 +292,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       tooltip,
       badge,
       iconColor,
+      iconProps = {},
       fluid,
       responsiveActions = true,
       size: panelSize = 'normal',
@@ -302,6 +308,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           ? { main: Object.values(contentEffect.gradient.colors)[0] as TReqoreEffectColor }
           : undefined)
     );
+    const { isMobile } = useReqore();
     const { targetRef } = useCombinedRefs(ref);
 
     useTooltip(targetRef.current, tooltip);
@@ -414,8 +421,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
               stack
               customTheme={rest.customTheme || theme}
               size={rest.size}
-              fixed
-              fluid={rest.fluid}
+              fixed={rest.fixed ? true : false}
+              fluid={rest.fluid ? true : false}
               key={index}
             >
               {group.map((action, index) => renderActions(action, index, true))}
@@ -426,9 +433,9 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         if (size(actions)) {
           return (
             <ReqoreDropdown<IReqoreButtonProps>
+              fixed
               {...rest}
               key={index}
-              fixed
               label={label}
               items={actions}
               intent={intent}
@@ -445,7 +452,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             <CustomElement
               fixed
               {...props}
-              key={index}
+              key={props.key || index}
+              reactKey={props.key || index}
               customTheme={props.customTheme || theme}
               onClick={(e: React.MouseEvent<any>) => {
                 e.stopPropagation();
@@ -457,9 +465,9 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
 
         return (
           <ReqoreButton
+            fixed
             {...rest}
             id={id}
-            fixed
             key={index}
             className={className}
             customTheme={rest.customTheme || theme}
@@ -532,19 +540,22 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             size={contentSize || panelSize}
             opacity={opacity ?? (minimal ? 0 : 1)}
             noHorizontalPadding={noHorizontalPadding}
+            isMobile={isMobile}
           >
             {hasTitleHeader && (
               <StyledPanelTitleHeader>
-                {icon && (
+                {icon || iconImage ? (
                   <ReqoreIcon
                     size={`${
                       ICON_FROM_HEADER_SIZE[headerSize || HEADER_SIZE_TO_NUMBER[panelSize]]
                     }px`}
                     icon={icon}
+                    image={iconImage}
                     margin='right'
                     color={iconColor}
+                    {...iconProps}
                   />
-                )}
+                ) : null}
                 {typeof label === 'string' ? (
                   <ReqoreHeading
                     size={headerSize || panelSize}
@@ -566,7 +577,6 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                       size={getOneHigherSize(panelSize)}
                       content={badge}
                     />
-                    <ReqoreSpacer width={PADDING_FROM_SIZE.normal} />
                   </>
                 ) : null}
               </StyledPanelTitleHeader>
@@ -574,7 +584,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             {hasResponsiveActions(actions) && (
               <ReqoreControlGroup
                 responsive={responsiveActions}
-                fluid={responsiveActions}
+                fluid={responsiveActions || isMobile}
                 horizontalAlign='flex-end'
                 customTheme={theme}
                 size={panelSize}
@@ -584,8 +594,12 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             )}
             {collapsible || onClose || hasNonResponsiveActions(actions) ? (
               <>
-                <ReqoreHorizontalSpacer width={GAP_FROM_SIZE.normal} />
-                <ReqoreControlGroup fixed horizontalAlign='flex-end' size={panelSize}>
+                <ReqoreControlGroup
+                  fixed={!isMobile}
+                  fluid={isMobile}
+                  horizontalAlign='flex-end'
+                  size={panelSize}
+                >
                   {actions.map(renderNonResponsiveActions)}
                   {collapsible && (
                     <ReqoreButton
@@ -637,12 +651,9 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             noHorizontalPadding={noHorizontalPadding}
           >
             {hasNonResponsiveActions(leftBottomActions) ? (
-              <>
-                <ReqoreControlGroup size={panelSize}>
-                  {leftBottomActions.map(renderNonResponsiveActions)}
-                </ReqoreControlGroup>
-                <ReqoreHorizontalSpacer width={GAP_FROM_SIZE.normal} />
-              </>
+              <ReqoreControlGroup size={panelSize}>
+                {leftBottomActions.map(renderNonResponsiveActions)}
+              </ReqoreControlGroup>
             ) : null}
             {hasResponsiveActions(leftBottomActions) && (
               <ReqoreControlGroup
@@ -666,12 +677,9 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
               </ReqoreControlGroup>
             )}
             {hasNonResponsiveActions(rightBottomActions) ? (
-              <>
-                <ReqoreHorizontalSpacer width={GAP_FROM_SIZE.normal} />
-                <ReqoreControlGroup horizontalAlign='flex-end' size={panelSize}>
-                  {rightBottomActions.map(renderNonResponsiveActions)}
-                </ReqoreControlGroup>
-              </>
+              <ReqoreControlGroup horizontalAlign='flex-end' size={panelSize}>
+                {rightBottomActions.map(renderNonResponsiveActions)}
+              </ReqoreControlGroup>
             ) : null}
           </StyledPanelBottomActions>
         ) : null}

package/src/components/Textarea/index.tsx

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

package/src/hooks/useAutoFocus.ts

@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { useUnmount, useUpdateEffect } from 'react-use';
+
+export type TReqoreAutoFocusType = 'auto' | 'keypress';
+
+export interface IReqoreAutoFocusRules {
+  type: TReqoreAutoFocusType;
+  viewportOnly?: boolean;
+  viewport?: HTMLElement;
+  viewportMargin?: string;
+  shortcut?: 'letters' | 'numbers' | string | ('letters' | 'numbers' | string)[];
+  clearOnFocus?: boolean;
+}
+
+export const useAutoFocus = (
+  element: HTMLInputElement | HTMLTextAreaElement,
+  rules?: IReqoreAutoFocusRules,
+  onChange?: (e: unknown) => void
+) => {
+  const isInViewport = useRef<boolean>(false);
+  const observer = useRef<IntersectionObserver>(null);
+
+  const focus = useCallback(() => {
+    if (!rules.viewportOnly || isInViewport.current) {
+      if (rules.clearOnFocus) {
+        onChange?.({ target: { value: '' } } as any);
+      }
+
+      element.setSelectionRange(-1, -1);
+      element.focus();
+    }
+  }, [element, rules, isInViewport.current]);
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    // Check if this event came from another html input
+    if (
+      e.target &&
+      ((e.target as HTMLElement).tagName === 'INPUT' ||
+        (e.target as HTMLElement).tagName === 'TEXTAREA')
+    ) {
+      return;
+    }
+
+    const shortcut = Array.isArray(rules?.shortcut) ? rules?.shortcut : [rules?.shortcut];
+
+    if (shortcut.includes('letters') && e.key.length === 1 && e.key.match(/[a-z]/i)) {
+      focus();
+    }
+
+    if (shortcut.includes('numbers') && e.key.length === 1 && e.key.match(/[0-9]/i)) {
+      focus();
+    }
+
+    if (shortcut.includes(e.key)) {
+      focus();
+    }
+  };
+
+  useUpdateEffect(() => {
+    if (element && rules) {
+      if (rules.viewportOnly) {
+        observer.current = new IntersectionObserver(
+          (entries: IntersectionObserverEntry[]) => {
+            entries.forEach((entry) => {
+              if (entry.isIntersecting) {
+                isInViewport.current = true;
+              } else {
+                isInViewport.current = false;
+              }
+              // If the focus type is auto, we focus the element now if its in the viewport
+              // and set the observer to null so it doesn't run again
+              if (rules.type === 'auto' && isInViewport.current) {
+                element.focus();
+                observer.current?.disconnect();
+                observer.current = null;
+              }
+            });
+          },
+          {
+            root: rules?.viewport,
+            rootMargin: rules?.viewportMargin,
+            threshold: 0.8,
+          }
+        );
+
+        observer.current.observe(element);
+      } else if (rules.type === 'auto') {
+        focus();
+      }
+    }
+  }, [element]);
+
+  useUnmount(() => {
+    observer.current?.disconnect();
+  });
+
+  useEffect(() => {
+    if (element && rules && rules.type === 'keypress') {
+      window.addEventListener('keydown', handleKeyDown);
+    }
+
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [element, rules]);
+};

package/src/mock/collectionData.tsx

@@ -94,6 +94,7 @@ export default [
     label: 'Item with custom content when expanded',
     tooltip: 'Expandable item with custom content',
     selected: true,
+    badge: '2km',
     content:
       'Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long. Hello I am a test item content and I am very long so I will wrap to the next line and I will be very long',
     expandable: true,

package/src/stories/Collection/Collection.stories.tsx

@@ -1,8 +1,10 @@
 import { Meta, Story } from '@storybook/react';
+import { ReqoreButton, ReqoreControlGroup } from '../..';
 import { IReqoreCollectionProps, ReqoreCollection } from '../../components/Collection';
 import { IReqoreColumnsProps } from '../../components/Columns';
 import items from '../../mock/collectionData';
-import { IntentArg, SizeArg, argManager } from '../utils/args';
+import data from '../../mock/data.json';
+import { argManager, IntentArg, SizeArg } from '../utils/args';
 
 export interface IColumnsStoryArgs extends IReqoreColumnsProps {
   multipleColumns?: boolean;
@@ -57,7 +59,7 @@ export default {
       description: 'If true, the collection will fill the parent',
     }),
     ...createArg('label', {
-      defaultValue: 'Collection of items',
+      defaultValue: undefined,
       type: 'string',
       name: 'Label',
       description: 'Label of the collection',
@@ -69,20 +71,17 @@ export default {
 } as Meta<IReqoreCollectionProps>;
 
 const Template: Story<IReqoreCollectionProps> = (args) => {
-  return (
-    <ReqoreCollection
-      {...args}
-      badge={10}
-      selectedIcon='CheckLine'
-      actions={[{ label: 'Custom action', icon: 'Home7Line' }, { actions: [{ value: 'Test' }] }]}
-    />
-  );
+  return <ReqoreCollection {...args} selectedIcon='CheckLine' />;
 };
 
 export const Basic = Template.bind({});
 Basic.args = {
   label: 'Config Items',
   items,
+  actions: [
+    { label: 'Custom action', icon: 'Home7Line', fixed: true },
+    { actions: [{ value: 'Test' }] },
+  ],
 };
 
 export const WithHeight = Template.bind({});
@@ -90,6 +89,10 @@ WithHeight.args = {
   label: 'Collection of items',
   height: '600px',
   items,
+  actions: [
+    { label: 'Custom action', icon: 'Home7Line', fixed: true },
+    { actions: [{ value: 'Test' }] },
+  ],
 };
 
 export const Stacked = Template.bind({});
@@ -97,6 +100,10 @@ Stacked.args = {
   label: 'Collection of items',
   stacked: true,
   items,
+  actions: [
+    { label: 'Custom action', icon: 'Home7Line', fixed: true },
+    { actions: [{ value: 'Test' }] },
+  ],
 };
 
 export const Fill = Template.bind({});
@@ -104,6 +111,10 @@ Fill.args = {
   label: 'Collection of items',
   fill: true,
   items,
+  actions: [
+    { label: 'Custom action', icon: 'Home7Line', fixed: true },
+    { actions: [{ value: 'Test' }] },
+  ],
 };
 
 export const SelectedFirst = Template.bind({});
@@ -127,3 +138,66 @@ CustomPropsAndTexts.args = {
   sortButtonTooltip: (sort) => `Seradit ${sort === 'asc' ? 'vzestupne' : 'sestupne'}`,
   displayButtonTooltip: (display) => `Zobrazit ${display === 'list' ? 'v liste' : 'v mriezke'}`,
 };
+
+export const ChildrenBeforeAndAfter = Template.bind({});
+ChildrenBeforeAndAfter.args = {
+  label: 'Collection of items',
+  items,
+  childrenBefore: (
+    <ReqoreControlGroup horizontalAlign='center' fluid>
+      <ReqoreButton fluid> I could be a filter of some kind</ReqoreButton>
+    </ReqoreControlGroup>
+  ),
+  childrenAfter: (
+    <ReqoreControlGroup horizontalAlign='center' fluid>
+      <ReqoreControlGroup fluid={false} fixed>
+        <ReqoreButton fixed textAlign='center'>
+          1
+        </ReqoreButton>
+        <ReqoreButton fixed textAlign='center'>
+          2
+        </ReqoreButton>
+        <ReqoreButton fixed textAlign='center'>
+          3
+        </ReqoreButton>
+        <ReqoreButton fixed textAlign='center'>
+          4
+        </ReqoreButton>
+      </ReqoreControlGroup>
+    </ReqoreControlGroup>
+  ),
+};
+
+export const FilteringSearchingPaging = Template.bind({});
+FilteringSearchingPaging.args = {
+  inputProps: {
+    focusRules: {
+      type: 'keypress',
+      shortcut: 'letters',
+      clearOnFocus: true,
+    },
+  },
+  inputPlaceholder(items) {
+    return `Start typing to search in ${items.length} items`;
+  },
+  size: 'big',
+  padded: false,
+  fill: true,
+  items: data.slice(0, 100).map((datum) => ({
+    label: `${datum.firstName} ${datum.lastName}`,
+    badge: datum.id,
+    size: 'small',
+    expandable: true,
+    content: datum.address,
+    tags: [
+      {
+        labelKey: 'Age',
+        label: datum.age,
+      },
+      {
+        labelKey: 'Occupation',
+        label: datum.occupation,
+      },
+    ],
+  })),
+} as IReqoreCollectionProps;

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

@@ -29,7 +29,13 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
     <>
       <ReqoreControlGroup wrap>
         <ReqoreInput {...args} placeholder='Reqore Input' onChange={handleValueChange} />
-        <ReqoreInput {...args} placeholder='Minimal Input' minimal onChange={handleValueChange} />
+        <ReqoreInput
+          {...args}
+          placeholder='Minimal Input'
+          minimal
+          onChange={handleValueChange}
+          rightIcon='ClipboardLine'
+        />
         <ReqoreInput
           {...args}
           placeholder='Flat Input'
@@ -44,11 +50,22 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
           onClearClick={handleValueClear}
           onChange={handleValueChange}
         />
+        <ReqoreInput
+          {...args}
+          iconColor='pending:lighten:2'
+          placeholder='Clearable Input w/ icon'
+          onClearClick={handleValueClear}
+          onChange={handleValueChange}
+          rightIcon='EraserFill'
+          rightIconColor='#8727b7'
+        />
         <ReqoreInput {...args} placeholder='Disabled Input' disabled onChange={handleValueChange} />
         <ReqoreInput
           {...args}
           placeholder='Read Only Input'
           readOnly
+          rightIcon='Bus2Fill'
+          rightIconColor='info'
           onChange={handleValueChange}
         />
       </ReqoreControlGroup>
@@ -73,6 +90,8 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
           flat
           tooltip="I'm a tooltip"
           onChange={handleValueChange}
+          rightIcon='DragMoveLine'
+          rightIconColor='#eb0e8c'
           value={value}
         />
         <ReqoreInput
@@ -84,18 +103,21 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
         />
         <ReqoreInput
           {...args}
-          placeholder='Disabled Input'
-          disabled
-          onChange={handleValueChange}
+          placeholder='Clearable Input w/ icon'
+          onClearClick={handleValueClear}
           value={value}
+          rightIcon='FilePptFill'
+          rightIconColor='#508a90'
+          onChange={handleValueChange}
         />
         <ReqoreInput
           {...args}
-          placeholder='Read Only Input'
-          readOnly
+          placeholder='Disabled Input'
+          disabled
           onChange={handleValueChange}
           value={value}
         />
+        <ReqoreInput {...args} placeholder='Read Only Input' readOnly value={value} />
       </ReqoreControlGroup>
       <br />
       <ReqoreControlGroup fluid>
@@ -104,6 +126,7 @@ const Template: Story<IReqoreInputProps> = (args: IReqoreInputProps) => {
           placeholder='Fluid Input'
           onChange={handleValueChange}
           value={value}
+          focusRules={{ type: 'keypress', shortcut: 'k' }}
         />
       </ReqoreControlGroup>
     </>

package/src/stories/Panel/Panel.stories.tsx

@@ -3,7 +3,7 @@ import { noop } from 'lodash';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
 import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../../components/Panel';
 import { ReqoreVerticalSpacer } from '../../components/Spacer';
-import { FlatArg, IconArg, IntentArg, SizeArg, argManager } from '../utils/args';
+import { argManager, FlatArg, IconArg, IntentArg, SizeArg } from '../utils/args';
 
 const { createArg } = argManager<IReqorePanelProps>();
 
@@ -168,6 +168,7 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
             {
               icon: 'FullscreenExitLine',
               customTheme: { main: '#a40a62' },
+              fixed: true,
             },
           ],
         },
@@ -199,7 +200,7 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
           position: 'left',
           intent: 'success',
           group: [
-            { label: 'Test 1', icon: '24HoursFill' },
+            { label: 'Test 1', icon: '24HoursFill', fixed: true },
             { label: 'Test 2', icon: '24HoursFill' },
           ],
         },
@@ -346,6 +347,23 @@ Size.args = {
   size: 'small',
 };
 
+export const NoActions: Story<IReqorePanelProps> = Template.bind({});
+NoActions.args = {
+  collapsible: false,
+  actions: [],
+  label:
+    'This is a really long title that should stretch all the way to the right of the panel, all the way to the end and not end in the middle',
+};
+
+export const ImageAsIcon: Story<IReqorePanelProps> = Template.bind({});
+ImageAsIcon.args = {
+  iconImage:
+    'https://avatars.githubusercontent.com/u/44835090?s=400&u=371120ce0755102d2e432f11ad9aa0378c871b45&v=4',
+  iconProps: {
+    size: '30px',
+  },
+};
+
 export const ContentSize: Story<IReqorePanelProps> = Template.bind({});
 ContentSize.args = {
   contentSize: 'big',

package/src/stories/TextArea/TextArea.stories.tsx

@@ -137,6 +137,7 @@ const Template: Story<IReqoreTextareaProps> = (args) => {
           onClearClick={handleValueClear}
           value={value}
           fluid
+          focusRules={{ type: 'keypress', shortcut: 'letters', clearOnFocus: true }}
         />
       </ReqoreControlGroup>
     </>

package/src/styles.ts

@@ -51,6 +51,5 @@ export const DisabledElement = css`
 `;
 
 export const ReadOnlyElement = css`
-  pointer-events: none;
   cursor: not-allowed;
 `;