@qoretechnologies/reqore 0.37.8 → 0.38.0

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>
@@ -667,7 +730,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                     padded={false}
                     margin='none'
                     flat
-                    responsive={false}
+                    responsive
                   />
                 ) : icon || iconImage || label ? (
                   <StyledPanelTitleHeaderContent
@@ -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/components/Tabs/index.tsx

@@ -9,10 +9,10 @@ import { TReqoreTabsContentPadding } from './content';
 import ReqoreTabsList from './list';
 
 export interface IReqoreTabsListItem extends Omit<IReqoreButtonProps, 'id'> {
-  label: string | number;
+  label?: string | number;
   as?: any;
   id: string | number;
-  props?: React.HTMLAttributes<any>;
+  props?: Record<string, any>;
   onClick?: (event: any) => any;
   onCloseClick?: (id: string | number) => any;
   activeIntent?: TReqoreIntent;

package/src/components/Tabs/list.tsx

@@ -20,6 +20,7 @@ import {
 } from '../../helpers/colors';
 import { calculateStringSizeInPixels, getOneLessSize } from '../../helpers/utils';
 import { useReqoreTheme } from '../../hooks/useTheme';
+import { IReqoreBreadcrumbItem } from '../Breadcrumbs';
 import { IReqoreButtonProps } from '../Button';
 import { TReqoreHexColor } from '../Effect';
 import ReqoreMenu from '../Menu';
@@ -104,8 +105,8 @@ const getBadgeLength = (badge: IReqoreButtonProps['badge'], tabsSize: TSizes = '
   );
 };
 
-const getLabelLength = (
-  item: IReqoreTabsListItem | IReqoreTabsListItem[] | IReqoreTagProps,
+export const getLabelLength = (
+  item: IReqoreBreadcrumbItem | IReqoreTabsListItem | IReqoreTabsListItem[] | IReqoreTagProps,
   activeTab?: string | number,
   tabsSize: TSizes = 'normal'
 ) => {
@@ -128,14 +129,21 @@ const getLabelLength = (
   const badgeLength = isArray(item)
     ? 0
     : getBadgeLength((item as IReqoreTabsListItem).badge, tabsSize);
+  const descriptionLength = isArray(item)
+    ? 0
+    : calculateStringSizeInPixels(
+        (item as IReqoreBreadcrumbItem | IReqoreTabsListItem)?.description?.toString(),
+        TEXT_FROM_SIZE[getOneLessSize(tabsSize)]
+      );
 
-  return (
+  const topLabelLength =
     calculateStringSizeInPixels(label?.toString(), TEXT_FROM_SIZE[tabsSize]) +
     icon +
+    rightIcon +
     closeIconSize +
-    badgeLength +
-    rightIcon
-  );
+    badgeLength;
+
+  return Math.max(topLabelLength, descriptionLength);
 };
 
 /**

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,
@@ -33,7 +44,7 @@ export default [
   {
     label: 'Jobs',
     icon: Icons.Jobs,
-    customTheme: '#a9a9a9',
+    customTheme: { main: '#a9a9a9' },
     badge: 10,
     description: 'Some item description',
     intent: 'warning',
@@ -42,9 +53,9 @@ export default [
   {
     tooltip: 'Connections',
     icon: Icons.Connections,
-    customTheme: '#a9a9a9',
+    customTheme: { main: 'danger:darken' },
   },
-] as IReqoreBreadcrumbItem[];
+] satisfies IReqoreBreadcrumbItem[];
 
 export const breadcrumbsTabs = {
   withTabs: {

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.',
+      },
+    });
+  },
+};

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

@@ -98,7 +98,7 @@ const tabs = [
       textSize: 'small',
     },
   },
-] as IReqoreTabsProps['tabs'];
+] satisfies IReqoreTabsProps['tabs'];
 
 const { createArg } = argManager<IReqoreTabsProps>();