@qoretechnologies/reqore 0.38.1 → 0.38.3

package/src/components/Textarea/index.tsx

@@ -2,7 +2,13 @@ import { rgba } from 'polished';
 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 {
+  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';
@@ -67,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)};
@@ -201,6 +214,7 @@ const ReqoreInput = forwardRef<HTMLTextAreaElement, IReqoreTextareaProps>(
             rows={1}
             value={_value}
             readonly={rest?.readOnly}
+            tabIndex={rest?.disabled ? -1 : 0}
           />
           <ReqoreInputClearButton
             enabled={!rest?.readOnly && !rest?.disabled && !!(onClearClick && onChange)}

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/DropdownTests.stories.tsx

@@ -3,6 +3,7 @@ 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';
@@ -47,6 +48,38 @@ 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 }) => {

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

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

@@ -359,6 +359,16 @@ export const Minimal: Story = {
   },
 };
 
+export const MinimalCollapsed: Story = {
+  render: Template,
+
+  args: {
+    minimal: true,
+    flat: true,
+    isCollapsed: true,
+  },
+};
+
 export const MinimalOnlyContent: Story = {
   render: Template,
 

package/src/stories/Tabs/Tabs.stories.tsx

@@ -247,6 +247,33 @@ export const Fill: Story = {
   },
 };
 
+export const FillWithFixedItem: Story = {
+  render: () => {
+    return (
+      <ReqoreTabs
+        fill
+        tabs={[
+          { id: 'tab1', label: 'Non fixed tab that should be very long', icon: 'FunctionLine' },
+          { id: 'tab2', fixed: true, label: 'Fixed tab', icon: 'DirectionFill' },
+          { id: 'tab3', label: 'Non fixed tab that should be very long', icon: 'FunctionLine' },
+          { id: 'tab4', fixed: true, label: 'Fixed tab', icon: 'DirectionFill' },
+        ]}
+      >
+        <ReqoreTabsContent tabId='tab1'>
+          <ReqoreH3>Tab 1</ReqoreH3>
+        </ReqoreTabsContent>
+        <ReqoreTabsContent tabId='tab2'>
+          <ReqoreH3>Tab 2</ReqoreH3>
+        </ReqoreTabsContent>
+      </ReqoreTabs>
+    );
+  },
+
+  args: {
+    fill: true,
+  },
+};
+
 export const CustomActiveIntent: Story = {
   render: Template,
 

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

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