@qoretechnologies/reqore 0.30.7 → 0.30.9

package/src/components/Message/index.tsx

@@ -1,10 +1,12 @@
 import { animated } from '@react-spring/web';
-import React, { forwardRef, useEffect, useMemo, useState } from 'react';
+import React, { forwardRef, memo, useEffect, useMemo, useState } from 'react';
 import { useMount, useUnmount } from 'react-use';
 import { IReqoreTheme } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { getColorFromMaybeString } from '../../helpers/colors';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
+import { useTooltip } from '../../hooks/useTooltip';
 import {
   IReqoreIntent,
   IWithReqoreCustomTheme,
@@ -12,6 +14,7 @@ import {
   IWithReqoreMinimal,
   IWithReqoreOpaque,
   IWithReqoreSize,
+  IWithReqoreTooltip,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import { TReqoreEffectColor } from '../Effect';
@@ -32,6 +35,7 @@ export interface IReqoreMessageProps
     IReqoreIntent,
     IWithReqoreMinimal,
     IWithReqoreOpaque,
+    IWithReqoreTooltip,
     React.HTMLAttributes<HTMLDivElement> {
   title?: string;
   children: any;
@@ -51,130 +55,136 @@ export interface IReqoreNotificationStyle extends IReqoreMessageProps {
   timeout?: number;
 }
 
-const ReqoreMessage = forwardRef<HTMLDivElement, IReqoreMessageProps>(
-  (
-    {
-      intent,
-      icon,
-      title,
-      children,
-      onClose,
-      onClick,
-      duration,
-      onFinish,
-      flat,
-      minimal,
-      size = 'normal',
-      customTheme,
-      iconColor,
-      ...rest
-    },
-    ref: any
-  ) => {
-    const [internalTimeout, setInternalTimeout] = useState<NodeJS.Timeout | null>(null);
-    const theme = useReqoreTheme('main', customTheme, intent);
+const ReqoreMessage = memo(
+  forwardRef<HTMLDivElement, IReqoreMessageProps>(
+    (
+      {
+        intent,
+        icon,
+        title,
+        children,
+        onClose,
+        onClick,
+        duration,
+        onFinish,
+        flat,
+        minimal,
+        size = 'normal',
+        customTheme,
+        iconColor,
+        tooltip,
+        ...rest
+      },
+      ref
+    ) => {
+      const [internalTimeout, setInternalTimeout] = useState<NodeJS.Timeout | null>(null);
+      const theme = useReqoreTheme('main', customTheme, intent);
+      const { targetRef } = useCombinedRefs(ref);
 
-    useMount(() => {
-      if (duration) {
-        setInternalTimeout(
-          setTimeout(() => {
-            onFinish && onFinish();
-          }, duration)
-        );
-      }
-    });
+      useTooltip(targetRef.current, tooltip);
 
-    useEffect(() => {
-      if (internalTimeout) {
-        clearTimeout(internalTimeout);
-        setInternalTimeout(
-          setTimeout(() => {
-            onFinish && onFinish();
-          }, duration)
-        );
-      }
-    }, [duration, intent, children, title]);
+      useMount(() => {
+        if (duration) {
+          setInternalTimeout(
+            setTimeout(() => {
+              onFinish && onFinish();
+            }, duration)
+          );
+        }
+      });
 
-    useUnmount(() => {
-      if (internalTimeout) {
-        clearTimeout(internalTimeout);
-      }
-    });
+      useEffect(() => {
+        if (internalTimeout) {
+          clearTimeout(internalTimeout);
+          setInternalTimeout(
+            setTimeout(() => {
+              onFinish && onFinish();
+            }, duration)
+          );
+        }
+      }, [duration, intent, children, title]);
 
-    const leftIcon: IReqoreIconName | undefined = useMemo(
-      () => icon || (intent ? typeToIcon[intent] : undefined),
-      [icon, intent]
-    );
+      useUnmount(() => {
+        if (internalTimeout) {
+          clearTimeout(internalTimeout);
+        }
+      });
 
-    return (
-      <ReqoreThemeProvider>
-        <StyledReqoreNotification
-          {...rest}
-          effect={{
-            interactive: !!onClick,
-            ...rest?.effect,
-          }}
-          as={animated.div}
-          key={`${duration}${intent}${title}${children}`}
-          intent={intent}
-          timeout={duration}
-          clickable={!!onClick}
-          onClick={onClick}
-          flat={flat}
-          minimal={minimal}
-          asMessage
-          fluid
-          className={`${rest?.className || ''} reqore-message`}
-          ref={ref}
-          size={size}
-          theme={theme}
-        >
-          {leftIcon ? (
-            <StyledIconWrapper intent={intent} size={size} theme={theme}>
-              <ReqoreIcon
-                icon={leftIcon}
-                margin={flat && minimal ? 'right' : 'both'}
-                size={size}
-                color={iconColor}
-              />
-            </StyledIconWrapper>
-          ) : null}
-          <StyledNotificationContentWrapper size={size} theme={theme}>
-            {title && (
-              <ReqoreHeading
+      const leftIcon: IReqoreIconName | undefined = useMemo(
+        () => icon || (intent ? typeToIcon[intent] : undefined),
+        [icon, intent]
+      );
+
+      return (
+        <ReqoreThemeProvider>
+          <StyledReqoreNotification
+            {...rest}
+            effect={{
+              interactive: !!onClick,
+              ...rest?.effect,
+            }}
+            as={animated.div}
+            key={`${duration}${intent}${title}${children}`}
+            intent={intent}
+            timeout={duration}
+            clickable={!!onClick}
+            onClick={onClick}
+            flat={flat}
+            minimal={minimal}
+            asMessage
+            fluid
+            className={`${rest?.className || ''} reqore-message`}
+            ref={targetRef}
+            size={size}
+            theme={theme}
+          >
+            {leftIcon ? (
+              <StyledIconWrapper intent={intent} size={size} theme={theme}>
+                <ReqoreIcon
+                  icon={leftIcon}
+                  margin={flat && minimal ? 'right' : 'both'}
+                  size={size}
+                  color={iconColor}
+                />
+              </StyledIconWrapper>
+            ) : null}
+            <StyledNotificationContentWrapper size={size} theme={theme}>
+              {title && (
+                <ReqoreHeading
+                  size={size}
+                  customTheme={
+                    rest.effect?.color
+                      ? { text: { color: getColorFromMaybeString(theme, rest.effect.color) } }
+                      : undefined
+                  }
+                >
+                  {title}
+                </ReqoreHeading>
+              )}
+              <StyledNotificationContent theme={theme} hasTitle={!!title} size={size}>
+                {children}
+              </StyledNotificationContent>
+            </StyledNotificationContentWrapper>
+            {onClose && (
+              <StyledIconWrapper
+                theme={theme}
                 size={size}
-                customTheme={
-                  rest.effect?.color
-                    ? { text: { color: getColorFromMaybeString(theme, rest.effect.color) } }
-                    : undefined
-                }
+                intent={intent}
+                clickable
+                className='reqore-message-close'
+                onClick={(event) => {
+                  event.stopPropagation();
+                  onClose && onClose();
+                }}
               >
-                {title}
-              </ReqoreHeading>
+                <ReqoreIcon icon='CloseFill' margin='both' size={size} />
+              </StyledIconWrapper>
             )}
-            <StyledNotificationContent theme={theme} hasTitle={!!title} size={size}>
-              {children}
-            </StyledNotificationContent>
-          </StyledNotificationContentWrapper>
-          {onClose && (
-            <StyledIconWrapper
-              theme={theme}
-              size={size}
-              intent={intent}
-              clickable
-              className='reqore-message-close'
-              onClick={(event) => {
-                event.stopPropagation();
-                onClose && onClose();
-              }}
-            >
-              <ReqoreIcon icon='CloseFill' margin='both' size={size} />
-            </StyledIconWrapper>
-          )}
-        </StyledReqoreNotification>
-      </ReqoreThemeProvider>
-    );
-  }
+          </StyledReqoreNotification>
+        </ReqoreThemeProvider>
+      );
+    }
+  )
 );
 
 export default ReqoreMessage;

package/src/components/Panel/index.tsx

@@ -1,6 +1,6 @@
 import { size } from 'lodash';
 import { darken, rgba } from 'polished';
-import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
+import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
@@ -98,6 +98,7 @@ export interface IReqorePanelProps
   headerEffect?: IReqoreEffect;
   transparent?: boolean;
   iconColor?: TReqoreEffectColor;
+  responsiveActions?: boolean;
 }
 
 export interface IStyledPanel extends IReqorePanelProps {
@@ -286,6 +287,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       badge,
       iconColor,
       fluid,
+      responsiveActions = true,
       size: panelSize = 'normal',
       ...rest
     }: IReqorePanelProps,
@@ -316,7 +318,13 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         !!size(actions.filter(isActionShown)) ||
         !!badge ||
         !!icon,
-      [label, collapsible, onClose, actions, badge]
+      [label, collapsible, onClose, actions, badge, icon]
+    );
+
+    // Return true if the card has a title bar, otherwise return false.
+    const hasTitleHeader: boolean = useMemo(
+      () => !!label || !!badge || !!icon,
+      [label, icon, badge]
     );
 
     // If collapsible is true, toggle the isCollapsed state
@@ -524,45 +532,47 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             opacity={opacity ?? (minimal ? 0 : 1)}
             noHorizontalPadding={noHorizontalPadding}
           >
-            <StyledPanelTitleHeader>
-              {icon && (
-                <ReqoreIcon
-                  size={`${
-                    ICON_FROM_HEADER_SIZE[headerSize || HEADER_SIZE_TO_NUMBER[panelSize]]
-                  }px`}
-                  icon={icon}
-                  margin='right'
-                  color={iconColor}
-                />
-              )}
-              {typeof label === 'string' ? (
-                <ReqoreHeading
-                  size={headerSize || panelSize}
-                  customTheme={theme}
-                  effect={{
-                    noWrap: true,
-                    ...headerEffect,
-                  }}
-                >
-                  {label}
-                </ReqoreHeading>
-              ) : (
-                label
-              )}
-              {badge || badge === 0 ? (
-                <>
-                  <ButtonBadge
-                    color={changeLightness(theme.main, 0.18)}
-                    size={panelSize}
-                    content={badge}
+            {hasTitleHeader && (
+              <StyledPanelTitleHeader>
+                {icon && (
+                  <ReqoreIcon
+                    size={`${
+                      ICON_FROM_HEADER_SIZE[headerSize || HEADER_SIZE_TO_NUMBER[panelSize]]
+                    }px`}
+                    icon={icon}
+                    margin='right'
+                    color={iconColor}
                   />
-                  <ReqoreSpacer width={PADDING_FROM_SIZE.normal} />
-                </>
-              ) : null}
-            </StyledPanelTitleHeader>
+                )}
+                {typeof label === 'string' ? (
+                  <ReqoreHeading
+                    size={headerSize || panelSize}
+                    customTheme={theme}
+                    effect={{
+                      noWrap: true,
+                      ...headerEffect,
+                    }}
+                  >
+                    {label}
+                  </ReqoreHeading>
+                ) : (
+                  label
+                )}
+                {badge || badge === 0 ? (
+                  <>
+                    <ButtonBadge
+                      color={changeLightness(theme.main, 0.18)}
+                      size={panelSize}
+                      content={badge}
+                    />
+                    <ReqoreSpacer width={PADDING_FROM_SIZE.normal} />
+                  </>
+                ) : null}
+              </StyledPanelTitleHeader>
+            )}
             {hasResponsiveActions(actions) && (
               <ReqoreControlGroup
-                responsive
+                responsive={responsiveActions}
                 fluid
                 horizontalAlign='flex-end'
                 customTheme={theme}
@@ -634,7 +644,12 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
               </>
             ) : null}
             {hasResponsiveActions(leftBottomActions) && (
-              <ReqoreControlGroup fluid responsive customTheme={theme} size={panelSize}>
+              <ReqoreControlGroup
+                fluid
+                responsive={responsiveActions}
+                customTheme={theme}
+                size={panelSize}
+              >
                 {leftBottomActions.map(renderResponsiveActions)}
               </ReqoreControlGroup>
             )}
@@ -642,7 +657,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
               <ReqoreControlGroup
                 fluid
                 horizontalAlign='flex-end'
-                responsive
+                responsive={responsiveActions}
                 customTheme={theme}
                 size={panelSize}
               >

package/src/components/Tabs/item.tsx

@@ -84,7 +84,7 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
 
       ${fill &&
       css`
-        flex: 1;
+        flex: 1 0 auto;
       `}
 
       ${disabled &&

package/src/components/Tag/index.tsx

@@ -86,7 +86,7 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
 
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
-  max-width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
+  max-width: ${({ fixed }) => (!fixed ? '100%' : undefined)};
   flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
   align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
   border-radius: ${({ asBadge, size }) => (asBadge ? 18 : RADIUS_FROM_SIZE[size])}px;

package/src/containers/PopoverProvider.tsx

@@ -59,9 +59,11 @@ const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiSc
 
     if (popover) {
       // Remove the blur
-      if (popover.blur > 0) {
-        popover.targetElement.style.position = 'initial';
-        popover.targetElement.style.zIndex = 'initial';
+      if (popover.blur) {
+        // Remove the blur
+        document.getElementById(`reqore-blur-${id}`)?.remove();
+        // Remove the z index class
+        popover.targetElement.classList.remove('reqore-blur-z-index');
       }
       // Remove the popover
       setPopovers((cur: IPopoverData[]) => [...cur].filter((p) => p.id !== id));

package/src/containers/UIProvider.tsx

@@ -1,14 +1,16 @@
 import { cloneDeep } from 'lodash';
 import merge from 'lodash/merge';
+import { rgba } from 'polished';
 import React, { useState } from 'react';
-import styled from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 import ReqoreLayoutWrapper from '../components/Layout';
 import { IReqoreNotificationsPosition } from '../components/Notifications';
 import { DEFAULT_THEME, IReqoreTheme } from '../constants/theme';
 import ThemeContext from '../context/ThemeContext';
-import { buildTheme } from '../helpers/colors';
+import { buildTheme, getMainBackgroundColor } from '../helpers/colors';
 import PopoverProvider from './PopoverProvider';
 import ReqoreProvider from './ReqoreProvider';
+import ReqoreThemeProvider from './ThemeProvider';
 
 export interface IReqoreOptions {
   withSidebar?: boolean;
@@ -22,6 +24,7 @@ export interface IReqoreOptions {
     /**
      * Delay in ms before showing the tooltip
      * @default 0
+     * Works only for `hover` handler
      * */
     delay?: number;
   };
@@ -33,6 +36,24 @@ export interface IReqoreUIProviderProps {
   options?: IReqoreOptions;
 }
 
+const GlobalStyle = createGlobalStyle`
+  .reqore-blur-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999998;
+    cursor: pointer;
+    background-color: ${({ theme }) => rgba(getMainBackgroundColor(theme), 0.3)};
+    backdrop-filter: blur(3px);
+  }
+
+  .reqore-blur-z-index {
+    z-index: 999999;
+  }
+`;
+
 const StyledPortal = styled.div`
   z-index: 9999;
   * {
@@ -50,6 +71,9 @@ const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = ({ children, theme, o
   return (
     <>
       <ThemeContext.Provider value={{ ...rebuiltTheme }}>
+        <ReqoreThemeProvider>
+          <GlobalStyle />
+        </ReqoreThemeProvider>
         <ReqoreLayoutWrapper withSidebar={options?.withSidebar}>
           {modalPortal ? (
             <ReqoreProvider options={options}>

package/src/hooks/usePopover.tsx

@@ -50,7 +50,7 @@ export interface IPopover
   closeOnOutsideClick?: boolean;
   closeOnAnyClick?: boolean;
   delay?: number;
-  blur?: number;
+  blur?: boolean;
   transparent?: boolean;
   maxWidth?: string;
   maxHeight?: string;
@@ -102,9 +102,18 @@ const usePopover = ({
       ...rest,
     });
 
-    if (rest.blur > 0) {
-      targetElement.style.position = 'relative';
-      targetElement.style.zIndex = '999999';
+    if (rest.blur) {
+      // Create a div and prepend before the targetElement
+      const blurDiv = document.createElement('div');
+
+      blurDiv.id = `reqore-blur-${current}`;
+      blurDiv.classList.add('reqore-blur-wrapper');
+
+      // Add the blur div before the target element
+      targetElement.before(blurDiv);
+
+      // Add the highest z-index to the target element
+      targetElement.classList.add('reqore-blur-z-index');
     }
   };
 

package/src/stories/Columns/Columns.stories.tsx

@@ -1,6 +1,14 @@
 import { Meta, Story } from '@storybook/react';
 import { IReqoreColumnsProps } from '../../components/Columns';
-import { ReqoreColumn, ReqoreColumns } from '../../index';
+import {
+  ReqoreButton,
+  ReqoreColumn,
+  ReqoreColumns,
+  ReqoreControlGroup,
+  ReqoreH2,
+  ReqoreInput,
+  ReqoreVerticalSpacer,
+} from '../../index';
 import { argManager } from '../utils/args';
 
 export interface IColumnsStoryArgs extends IReqoreColumnsProps {
@@ -43,20 +51,74 @@ export default {
 
 const Template: Story<IColumnsStoryArgs> = (args) => {
   return (
-    <ReqoreColumns {...args}>
-      <ReqoreColumn {...args} style={{ border: '1px solid white', padding: '10px' }}>
-        1st column
+    <ReqoreColumns {...args} columnsGap='10px'>
+      <ReqoreColumn
+        {...args}
+        style={{ border: '1px solid white', padding: '10px' }}
+        flexFlow='column'
+      >
+        <ReqoreH2>Left Column</ReqoreH2>
+        <ReqoreVerticalSpacer height={20} lineSize='tiny' />
+        <ReqoreControlGroup fluid>
+          <ReqoreInput placeholder='Filter' />
+        </ReqoreControlGroup>
+        <ReqoreVerticalSpacer height={10} />
+        <ReqoreControlGroup vertical fluid>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+        </ReqoreControlGroup>
       </ReqoreColumn>
-      <ReqoreColumn {...args} style={{ border: '1px solid white', padding: '10px' }}>
-        2nd column
+      <ReqoreColumn
+        {...args}
+        style={{ border: '1px solid white', padding: '10px' }}
+        flexFlow='column'
+      >
+        <ReqoreH2>Right Column</ReqoreH2>
+        <ReqoreVerticalSpacer height={20} lineSize='tiny' />
+        <ReqoreControlGroup fluid>
+          <ReqoreInput placeholder='Filter' />
+        </ReqoreControlGroup>
+        <ReqoreVerticalSpacer height={10} />
+        <ReqoreControlGroup vertical fluid>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+          <ReqoreButton description='This is a button'>Button</ReqoreButton>
+        </ReqoreControlGroup>
       </ReqoreColumn>
       {args.multipleColumns && (
         <>
-          <ReqoreColumn {...args} style={{ border: '1px solid white', padding: '10px' }}>
-            4th column
+          <ReqoreColumn
+            {...args}
+            style={{ border: '1px solid white', padding: '10px' }}
+            flexFlow='column'
+          >
+            <ReqoreH2>3rd Column</ReqoreH2>
+            <ReqoreVerticalSpacer height={20} lineSize='tiny' />
+            <ReqoreControlGroup fluid>
+              <ReqoreInput placeholder='Filter' />
+            </ReqoreControlGroup>
+            <ReqoreVerticalSpacer height={10} />
+            <ReqoreControlGroup vertical fluid>
+              <ReqoreButton description='This is a button'>Button</ReqoreButton>
+              <ReqoreButton description='This is a button'>Button</ReqoreButton>
+              <ReqoreButton description='This is a button'>Button</ReqoreButton>
+              <ReqoreButton description='This is a button'>Button</ReqoreButton>
+            </ReqoreControlGroup>
           </ReqoreColumn>
-          <ReqoreColumn {...args} style={{ border: '1px solid white', padding: '10px' }}>
-            3rd column
+          <ReqoreColumn
+            {...args}
+            style={{ border: '1px solid white', padding: '10px' }}
+            flexFlow='column'
+          >
+            <ReqoreH2>4th Column</ReqoreH2>
+            <ReqoreVerticalSpacer height={20} lineSize='tiny' />
+            <ReqoreControlGroup fluid>
+              <ReqoreInput placeholder='Filter' />
+            </ReqoreControlGroup>
           </ReqoreColumn>
         </>
       )}
@@ -69,3 +131,14 @@ export const MultipleColumns = Template.bind({});
 MultipleColumns.args = {
   multipleColumns: true,
 };
+export const CustomAlignment = Template.bind({});
+CustomAlignment.args = {
+  multipleColumns: true,
+  alignItems: 'center',
+};
+
+export const WithMinimumWidth = Template.bind({});
+WithMinimumWidth.args = {
+  multipleColumns: true,
+  minColumnWidth: '500px',
+};