@qoretechnologies/reqore 0.29.8 → 0.30.0

package/src/components/Tabs/item.tsx

@@ -18,6 +18,7 @@ export interface IReqoreTabListItemProps extends IReqoreTabsListItem, IWithReqor
   wrapTabNames?: boolean;
   fill?: boolean;
   className?: string;
+  padded?: boolean;
 }
 
 export interface IReqoreTabListItemStyle extends IReqoreTabListItemProps {
@@ -27,7 +28,7 @@ export interface IReqoreTabListItemStyle extends IReqoreTabListItemProps {
 }
 
 export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
-  ${({ disabled, vertical, size, fill }: IReqoreTabListItemStyle) => {
+  ${({ disabled, vertical, size, fill, padded }: IReqoreTabListItemStyle) => {
     return css`
       display: flex;
       flex-shrink: 0;
@@ -48,6 +49,16 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
               border-top-right-radius: 0 !important;
               border-bottom-right-radius: 0 !important;
             }
+
+            ${padded === false &&
+            css`
+              &:first-child {
+                padding-top: 0;
+              }
+              &:last-child {
+                padding-bottom: 0;
+              }
+            `}
           `
         : css`
             ${StyledButton} {
@@ -59,6 +70,16 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
             ${StyledButton}:last-child {
               border-bottom-right-radius: 0 !important;
             }
+
+            ${padded === false &&
+            css`
+              &:first-child {
+                padding-left: 0;
+              }
+              &:last-child {
+                padding-right: 0;
+              }
+            `}
           `}
 
       ${fill &&
@@ -109,6 +130,7 @@ const ReqoreTabsListItem = memo(
         flat = true,
         wrapTabNames,
         id,
+        padded,
         ...rest
       }: IReqoreTabListItemProps,
       ref
@@ -129,6 +151,7 @@ const ReqoreTabsListItem = memo(
           vertical={vertical}
           theme={theme}
           fill={fill}
+          padded={padded}
         >
           {label || icon ? (
             <ReqoreControlGroup stack size={size} fluid={fill || vertical}>

package/src/components/Tabs/list.tsx

@@ -162,6 +162,7 @@ const ReqoreTabsList = ({
   flat,
   size,
   intent,
+  padded,
   ...rest
 }: IReqoreTabsListProps) => {
   const [ref, { width }] = useMeasure();
@@ -211,6 +212,7 @@ const ReqoreTabsList = ({
                     vertical,
                     flat,
                     size,
+                    padded,
                     className: 'reqore-tabs-list-item-menu',
                   } as IReqoreTabListItemProps
                 }
@@ -279,6 +281,7 @@ const ReqoreTabsList = ({
                 fill={fill}
                 size={size}
                 flat={flat}
+                padded={padded}
                 activeIntent={activeTabIntent}
                 wrapTabNames={wrapTabNames}
                 {...item}

package/src/components/Tag/index.tsx

@@ -26,6 +26,7 @@ import {
   IReqoreDisabled,
   IReqoreIntent,
   IWithReqoreEffect,
+  IWithReqoreFluid,
   IWithReqoreMinimal,
   IWithReqoreTooltip,
 } from '../../types/global';
@@ -35,6 +36,7 @@ import ReqoreIcon from '../Icon';
 
 export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
   icon: IReqoreIconName;
+  show?: boolean;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 
@@ -43,7 +45,8 @@ export interface IReqoreTagProps
     IWithReqoreTooltip,
     IReqoreDisabled,
     IWithReqoreEffect,
-    IWithReqoreMinimal {
+    IWithReqoreMinimal,
+    IWithReqoreFluid {
   size?: TSizes;
   label?: string | number;
   labelKey?: string | number;
@@ -81,6 +84,8 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
 
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
+  width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
+  flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
   border-radius: ${({ asBadge, size }) => (asBadge ? 18 : RADIUS_FROM_SIZE[size])}px;
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
@@ -331,28 +336,30 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
           </StyledTagContentWrapper>
         ) : null}
         {_size(actions)
-          ? actions.map((action, index) => (
-              <React.Fragment key={index}>
-                <ReqorePopover
-                  component={StyledButtonWrapper}
-                  componentProps={{
-                    size,
-                    color: getCustomColor(action.intent),
-                    className: 'reqore-tag-action',
-                    onClick: action.onClick,
-                    effect: rest.effect,
-                  }}
-                  {...(action.tooltip
-                    ? typeof action.tooltip === 'string'
-                      ? { tooltip: action.tooltip }
-                      : action.tooltip
-                    : {})}
-                  isReqoreComponent
-                >
-                  <ReqoreIcon icon={action.icon} size={size} />
-                </ReqorePopover>
-              </React.Fragment>
-            ))
+          ? actions
+              .filter((action) => action.show !== false)
+              .map((action, index) => (
+                <React.Fragment key={index}>
+                  <ReqorePopover
+                    component={StyledButtonWrapper}
+                    componentProps={{
+                      size,
+                      color: getCustomColor(action.intent),
+                      className: 'reqore-tag-action',
+                      onClick: action.onClick,
+                      effect: rest.effect,
+                    }}
+                    {...(action.tooltip
+                      ? typeof action.tooltip === 'string'
+                        ? { tooltip: action.tooltip }
+                        : action.tooltip
+                      : {})}
+                    isReqoreComponent
+                  >
+                    <ReqoreIcon icon={action.icon} size={size} />
+                  </ReqorePopover>
+                </React.Fragment>
+              ))
           : null}
         {onRemoveClick && !rest.disabled ? (
           <ReqorePopover

package/src/components/Tree/index.tsx

@@ -181,7 +181,7 @@ export const ReqoreTree = ({
   return (
     <StyledTreeWrapper className='reqore-tree'>
       {showControls && (
-        <ReqoreControlGroup stack size={size}>
+        <ReqoreControlGroup stack size={size} responsive>
           {isDeep() && !allExpanded ? (
             <ReqoreButton
               flat

package/src/constants/animations.ts

@@ -1,5 +1,5 @@
 export const SPRING_CONFIG = {
-  tension: 120,
+  tension: 180,
   friction: 20,
 };
 

package/src/constants/sizes.ts

@@ -37,19 +37,19 @@ export const HEADER_SIZE_TO_NUMBER = {
 };
 
 export const SIZE_TO_PX = {
-  tiny: 10,
-  small: 20,
+  tiny: 18,
+  small: 24,
   normal: 30,
   big: 40,
   huge: 50,
 };
 
 export const BADGE_SIZE_TO_PX = {
-  tiny: 10,
-  small: 18,
-  normal: 24,
-  big: 30,
-  huge: 36,
+  tiny: 14,
+  small: 20,
+  normal: 26,
+  big: 32,
+  huge: 38,
 };
 
 export const TABS_SIZE_TO_PX = {

package/src/containers/PopoverProvider.tsx

@@ -66,21 +66,21 @@ const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiSc
   };
 
   useEffect(() => {
-    document.addEventListener('click', handleClick);
+    document.addEventListener('mousedown', handleClick);
 
     if (closePopoversOnEscPress) {
       document.addEventListener('keydown', handleKeyDown);
     }
 
     return () => {
-      document.removeEventListener('click', handleClick);
+      document.removeEventListener('mousedown', handleClick);
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [popovers]);
 
   useEffect(() => {
     if (!size(popovers)) {
-      document.removeEventListener('click', handleClick);
+      document.removeEventListener('mousedown', handleClick);
       document.removeEventListener('keydown', handleKeyDown);
     }
   }, [popovers]);

package/src/containers/ReqoreProvider.tsx

@@ -122,6 +122,7 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
           isMobileOrTablet,
           getAndIncreaseZIndex,
           animations: options.animations || { buttons: true, dialogs: true },
+          tooltips: options.tooltips || { delay: 0 },
           closePopoversOnEscPress:
             'closePopoversOnEscPress' in options ? options.closePopoversOnEscPress : true,
         }}

package/src/containers/UIProvider.tsx

@@ -18,6 +18,13 @@ export interface IReqoreOptions {
     buttons?: boolean;
     dialogs?: boolean;
   };
+  tooltips?: {
+    /**
+     * Delay in ms before showing the tooltip
+     * @default 0
+     * */
+    delay?: number;
+  };
   closePopoversOnEscPress?: boolean;
 }
 export interface IReqoreUIProviderProps {

package/src/context/ReqoreContext.tsx

@@ -12,6 +12,7 @@ export interface IReqoreContext {
   readonly isMobileOrTablet?: boolean;
   readonly getAndIncreaseZIndex?: () => number;
   readonly animations?: IReqoreOptions['animations'];
+  readonly tooltips?: IReqoreOptions['tooltips'];
   readonly closePopoversOnEscPress?: boolean;
 }
 

package/src/hooks/usePopover.tsx

@@ -11,6 +11,7 @@ import {
   IWithReqoreMinimal,
 } from '../types/global';
 import { IReqoreIconName } from '../types/icons';
+import { useReqore } from './useReqore';
 
 const startEvents = {
   hover: 'mouseenter',
@@ -77,6 +78,7 @@ const usePopover = ({
 }: IPopoverOptions): IPopoverControls => {
   const { addPopover, removePopover, updatePopover, popovers, isPopoverOpen } =
     useContext(PopoverContext);
+  const { tooltips } = useReqore();
   const { current }: MutableRefObject<string> = useRef(shortid.generate());
   let { current: timeout }: MutableRefObject<any> = useRef(0);
 
@@ -112,10 +114,10 @@ const usePopover = ({
         _removePopover?.();
       }
     } else if (show) {
-      if (delay) {
+      if (delay || tooltips.delay) {
         timeout = setTimeout(() => {
           openPopover();
-        }, delay);
+        }, delay || tooltips.delay);
       } else {
         openPopover();
       }

package/src/mock/collectionData.tsx

@@ -104,6 +104,22 @@ export default [
       weight: 'thin',
       spaced: 2,
     },
+    expandedActions: [
+      {
+        label: 'Action 1',
+        id: 'action1',
+        icon: 'CapsuleFill',
+        onClick: () => alert('Action 1 clicked'),
+        position: 'left',
+      },
+      {
+        label: 'Action 2',
+        id: 'action2',
+        icon: 'CapsuleFill',
+        onClick: () => alert('Action 2 clicked'),
+        position: 'right',
+      },
+    ],
     expandedContent: (
       <>
         <ReqoreMessage intent='info'>Hello I am a custom content</ReqoreMessage>
@@ -191,6 +207,9 @@ export default [
   },
   {
     label: 'I have intent!',
+    transparent: true,
+    minimal: false,
+    flat: false,
     content: (
       <ReqoreP>
         'Well would you look at that. Lorem ipsum dolor{' '}
@@ -242,13 +261,14 @@ export default [
   {
     label: 'I have actions',
     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. 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',
     actions: [
       {
         label: 'Action 1',
         id: 'action1',
         icon: 'CapsuleFill',
         onClick: () => alert('Action 1 clicked'),
+        show: false,
       },
       {
         label: 'Action 2',

package/src/stories/ControlGroup/ControlGroup.stories.tsx

@@ -9,7 +9,7 @@ import {
   ReqoreTag,
   ReqoreVerticalSpacer,
 } from '../../index';
-import { GapSizeArg, MinimalArg, SizeArg, argManager } from '../utils/args';
+import { argManager, GapSizeArg, MinimalArg, SizeArg } from '../utils/args';
 
 const { createArg } = argManager<IReqoreControlGroupProps>();
 
@@ -47,14 +47,49 @@ export default {
 } as Meta<IReqoreControlGroupProps>;
 
 const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProps) => {
+  if (args.responsive) {
+    return (
+      <div style={{ width: 600 }}>
+        <ReqoreControlGroup {...args} wrap={false}>
+          <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
+          <ReqoreControlGroup stack>
+            <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
+          </ReqoreControlGroup>
+          <ReqoreControlGroup stack>
+            <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
+            <ReqoreTag label='A wild tag appears!' color='main:lighten:2' />
+          </ReqoreControlGroup>
+          <ReqoreControlGroup stack>
+            <ReqoreControlGroup>
+              <ReqoreButton customTheme={{ main: '#00e3e8' }}>Level 2 deep</ReqoreButton>
+              <ReqoreControlGroup fixed>
+                <ReqoreButton disabled fixed id='test'>
+                  Level 3 deep and fixed
+                </ReqoreButton>
+              </ReqoreControlGroup>
+            </ReqoreControlGroup>
+            <ReqoreButton intent='danger'>Level 1 deep</ReqoreButton>
+            <ReqoreCheckbox checked margin='both' label='Level 1 deep' />
+          </ReqoreControlGroup>
+          <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
+          <ReqoreButton maxWidth='300px'>Button with max width</ReqoreButton>
+        </ReqoreControlGroup>
+      </div>
+    );
+  }
+
   return (
     <>
       <ReqoreControlGroup {...args}>
         <ReqoreButton icon='PictureInPictureLine'>Button</ReqoreButton>
+        <ReqoreButton icon='PictureInPictureLine' fluid>
+          Fluid Button
+        </ReqoreButton>
         <ReqoreButton
           icon='PictureInPictureLine'
           flat={false}
           effect={{ gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } }}
+          description="With a description, it's a bit longer than the button itself"
         >
           Non flat Button
         </ReqoreButton>
@@ -71,13 +106,13 @@ const Template: Story<IReqoreControlGroupProps> = (args: IReqoreControlGroupProp
           checked
           uncheckedIcon='CheckboxBlankLine'
         />
-        <ReqoreInput icon='4KFill' value='Hello' />
+        <ReqoreInput icon='4KFill' value='Hello I am fluid' fluid />
         <ReqoreControlGroup stack>
           <ReqoreControlGroup>
             <ReqoreButton customTheme={{ main: '#00e3e8' }}>Level 2 deep</ReqoreButton>
-            <ReqoreControlGroup>
+            <ReqoreControlGroup fixed>
               <ReqoreButton disabled fixed id='test'>
-                Level 3 deep
+                Level 3 deep and fixed
               </ReqoreButton>
             </ReqoreControlGroup>
           </ReqoreControlGroup>
@@ -187,6 +222,11 @@ Minimal.args = {
   minimal: true,
 };
 
+export const Fluid = Template.bind({});
+Fluid.args = {
+  fluid: true,
+};
+
 export const NotFlat = Template.bind({});
 NotFlat.args = {
   flat: false,
@@ -197,8 +237,14 @@ Vertical.args = {
   vertical: true,
 };
 
-export const VerticalStacked = Template.bind({});
-VerticalStacked.args = {
+export const VerticalFluid = Template.bind({});
+VerticalFluid.args = {
+  vertical: true,
+  fluid: true,
+};
+
+export const VerticalStackedFluid = Template.bind({});
+VerticalStackedFluid.args = {
   vertical: true,
   stack: true,
   fluid: true,
@@ -218,3 +264,19 @@ export const NoWrap = Template.bind({});
 NoWrap.args = {
   wrap: false,
 };
+
+export const HorizontalAlign = Template.bind({});
+HorizontalAlign.args = {
+  vertical: true,
+  horizontalAlign: 'center',
+};
+
+export const VerticalAlign = Template.bind({});
+VerticalAlign.args = {
+  verticalAlign: 'flex-end',
+};
+
+export const Responsive = Template.bind({});
+Responsive.args = {
+  responsive: true,
+};

package/src/stories/Icon/Icon.stories.tsx

@@ -21,6 +21,7 @@ export const Icon: Story<IReqoreIconProps> = () => {
           color='#291133'
           effect={{ sepia: true }}
           margin='both'
+          tooltip={{ content: 'I have a tooltip', openOnMount: true }}
         />
         <ReqoreIcon
           icon='SignalTowerFill'

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

@@ -2,13 +2,14 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import { useState } from 'react';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
 import { ReqoreControlGroup } from '../../index';
-import { FlatArg, IconArg, MinimalArg } from '../utils/args';
+import { FlatArg, IconArg, MinimalArg, SizeArg } from '../utils/args';
 
 export default {
   title: 'Components/Input',
   argTypes: {
     ...MinimalArg,
     ...FlatArg,
+    ...SizeArg,
     ...IconArg('icon', 'Icon', 'SearchLine'),
   },
 } as Meta<IReqoreInputProps>;

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

@@ -1,7 +1,8 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { noop } from 'lodash';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
-import { IReqorePanelProps, ReqorePanel } from '../../components/Panel';
+import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../../components/Panel';
+import { ReqoreVerticalSpacer } from '../../components/Spacer';
 import { FlatArg, IconArg, IntentArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqorePanelProps>();
@@ -64,6 +65,62 @@ export default {
 } as Meta<IReqorePanelProps>;
 
 const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
+  if (args.fluid) {
+    const actions: IReqorePanelAction[] = [
+      {
+        icon: 'GiftFill',
+        label: 'Visible',
+        responsive: false,
+      },
+      {
+        label: 'Hidden when small',
+        icon: 'EyeCloseLine',
+      },
+      {
+        label: 'Hidden when small',
+        icon: 'EyeCloseLine',
+      },
+      {
+        label: 'Hidden when small',
+        icon: 'EyeCloseLine',
+      },
+      {
+        label: 'Hidden when small',
+        icon: 'EyeCloseLine',
+      },
+    ];
+
+    return (
+      <>
+        <ReqorePanel
+          {...args}
+          badge='Fluid'
+          actions={actions}
+          bottomActions={[
+            ...actions,
+            ...actions.map((action) => ({ ...action, position: 'right' })),
+          ]}
+        >
+          This is a fluid panel
+        </ReqorePanel>
+        <ReqoreVerticalSpacer height={10} />
+        <ReqorePanel
+          {...args}
+          style={{ width: 400 }}
+          fluid={false}
+          badge='Not Fluid'
+          actions={actions}
+          bottomActions={[
+            ...actions,
+            ...actions.map((action) => ({ ...action, position: 'right' })),
+          ]}
+        >
+          This is not a fluid panel
+        </ReqorePanel>
+      </>
+    );
+  }
+
   return (
     <ReqorePanel
       {...args}
@@ -85,7 +142,12 @@ const Template: Story<IReqorePanelProps> = (args: IReqorePanelProps) => {
         },
       ]}
       actions={[
-        { label: 'Test', icon: '24HoursFill', intent: 'info' },
+        {
+          label: 'Non responsive',
+          icon: '24HoursFill',
+          customTheme: { main: '#eb0e8c' },
+          responsive: false,
+        },
         [
           { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
           { icon: 'CopperCoinFill', intent: 'danger' },
@@ -167,12 +229,31 @@ Transparent.args = {
   transparent: true,
 };
 
+export const Intent: Story<IReqorePanelProps> = Template.bind({});
+Intent.args = {
+  intent: 'success',
+  iconColor: 'success:lighten:2',
+  transparent: true,
+  flat: true,
+};
+
 export const Minimal: Story<IReqorePanelProps> = Template.bind({});
 Minimal.args = {
   minimal: true,
   flat: true,
 };
 
+export const TransparentFlat: Story<IReqorePanelProps> = Template.bind({});
+TransparentFlat.args = {
+  transparent: true,
+  flat: true,
+};
+
+export const Fluid: Story<IReqorePanelProps> = Template.bind({});
+Fluid.args = {
+  fluid: true,
+};
+
 export const WithEffect: Story<IReqorePanelProps> = Template.bind({});
 WithEffect.args = {
   iconColor: 'info:lighten:2',

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

@@ -8,9 +8,9 @@ import {
   ReqoreMessage,
   ReqorePanel,
   ReqorePopover,
-  ReqoreSpacer,
+  ReqoreSpacer
 } from '../../index';
-import { FlatArg, argManager } from '../utils/args';
+import { argManager, FlatArg } from '../utils/args';
 
 const { createArg } = argManager<IReqorePopoverProps>();
 
@@ -56,7 +56,7 @@ export default {
 
 const HoverButton = (args: any) => {
   return (
-    <ReqorePopover component={ReqoreButton} isReqoreComponent {...args}>
+    <ReqorePopover component={ReqoreButton} isReqoreComponent {...args} fixed>
       Hover popover
     </ReqorePopover>
   );
@@ -107,7 +107,7 @@ const HoverStayButton = (args: any) => {
 const Template: Story<IReqorePopoverProps> = (args: IReqorePopoverProps) => {
   return (
     <>
-      <ReqoreControlGroup vertical gapSize='huge'>
+      <ReqoreControlGroup vertical gapSize='huge' horizontalAlign='flex-start'>
         <HoverButton {...args} />
         <ClickButton {...args} />
         <DelayButton {...args} />
@@ -128,7 +128,7 @@ const Template: Story<IReqorePopoverProps> = (args: IReqorePopoverProps) => {
               Full popover
             </ReqorePopover>
             <ReqoreControlGroup>
-              <ReqoreSpacer width={350} />
+              <ReqoreSpacer width={190} />
               <ReqorePopover
                 {...args}
                 component={ReqoreButton}