@qoretechnologies/reqore 0.29.7 → 0.29.9

package/src/components/Icon/index.tsx

@@ -1,23 +1,27 @@
-import React, { memo, useContext } from 'react';
+import React, { forwardRef, memo, useContext } from 'react';
 import { IconContext } from 'react-icons';
 import { IconBaseProps, IconType } from 'react-icons/lib';
 import * as RemixIcons from 'react-icons/ri';
 import styled, { css } from 'styled-components';
 import { ReqoreThemeContext } from '../..';
 import { ICON_FROM_SIZE, PADDING_FROM_SIZE, TSizes } from '../../constants/sizes';
-import { TReqoreIntent } from '../../constants/theme';
 import { getColorFromMaybeString } from '../../helpers/colors';
 import { isStringSize } from '../../helpers/utils';
-import { IWithReqoreEffect } from '../../types/global';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useTooltip } from '../../hooks/useTooltip';
+import { IReqoreIntent, IWithReqoreEffect, IWithReqoreTooltip } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import { StyledEffect, TReqoreEffectColor } from '../Effect';
 
-export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement>, IWithReqoreEffect {
+export interface IReqoreIconProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    IWithReqoreEffect,
+    IWithReqoreTooltip,
+    IReqoreIntent {
   icon?: IReqoreIconName;
   color?: TReqoreEffectColor;
   size?: TSizes | string;
   iconProps?: IconBaseProps;
-  intent?: TReqoreIntent;
   margin?: 'right' | 'left' | 'both';
   image?: string;
   rounded?: boolean;
@@ -53,73 +57,85 @@ export const StyledIconWrapper = styled(StyledEffect)<{ margin: 'right' | 'left'
 `;
 
 const ReqoreIcon = memo(
-  ({
-    icon,
-    size = 'normal',
-    className,
-    color,
-    margin,
-    style = {},
-    iconProps,
-    intent,
-    image,
-    ...rest
-  }: IReqoreIconProps) => {
-    const theme = useContext(ReqoreThemeContext);
-    const Icon: IconType = RemixIcons[`Ri${icon}`];
-    const finalColor: string | undefined = intent
-      ? theme.intents[intent]
-      : getColorFromMaybeString(theme, color);
-    const finalSize: string = isStringSize(size) ? ICON_FROM_SIZE[size] : size;
+  forwardRef<HTMLSpanElement, IReqoreIconProps>(
+    (
+      {
+        icon,
+        size = 'normal',
+        className,
+        color,
+        margin,
+        style = {},
+        iconProps,
+        intent,
+        image,
+        tooltip,
+        ...rest
+      }: IReqoreIconProps,
+      ref
+    ) => {
+      const { targetRef } = useCombinedRefs(ref);
+      const theme = useContext(ReqoreThemeContext);
+      const Icon: IconType = RemixIcons[`Ri${icon}`];
+      const finalColor: string | undefined = intent
+        ? theme.intents[intent]
+        : getColorFromMaybeString(theme, color);
+      const finalSize: string = isStringSize(size) ? ICON_FROM_SIZE[size] : size;
+
+      useTooltip(targetRef.current, tooltip);
+
+      if (image) {
+        return (
+          <StyledIconWrapper
+            {...rest}
+            ref={targetRef}
+            size={size}
+            margin={margin}
+            className={`${className || ''} reqore-icon`}
+            style={{ ...style, width: finalSize, height: finalSize }}
+          >
+            <img src={image} alt='' />
+          </StyledIconWrapper>
+        );
+      }
+
+      if (!Icon) {
+        return (
+          <StyledIconWrapper
+            {...rest}
+            ref={targetRef}
+            size={size}
+            margin={margin}
+            className={`${className || ''} reqore-icon`}
+            style={{ ...style, width: finalSize, height: finalSize }}
+          />
+        );
+      }
 
-    if (image) {
       return (
         <StyledIconWrapper
           {...rest}
-          size={size}
+          ref={targetRef}
           margin={margin}
-          className={`${className || ''} reqore-icon`}
+          size={size}
           style={{ ...style, width: finalSize, height: finalSize }}
+          className={`${className || ''} reqore-icon`}
         >
-          <img src={image} alt='' />
+          <IconContext.Provider
+            value={{
+              color: finalColor || 'inherit',
+              size: finalSize,
+              style: {
+                verticalAlign: 'super',
+              },
+            }}
+          >
+            <Icon {...iconProps} />
+          </IconContext.Provider>
         </StyledIconWrapper>
       );
     }
-
-    if (!Icon) {
-      return (
-        <StyledIconWrapper
-          {...rest}
-          size={size}
-          margin={margin}
-          className={`${className || ''} reqore-icon`}
-          style={{ ...style, width: finalSize, height: finalSize }}
-        />
-      );
-    }
-
-    return (
-      <StyledIconWrapper
-        {...rest}
-        margin={margin}
-        size={size}
-        style={{ ...style, width: finalSize, height: finalSize }}
-        className={`${className || ''} reqore-icon`}
-      >
-        <IconContext.Provider
-          value={{
-            color: finalColor || 'inherit',
-            size: finalSize,
-            style: {
-              verticalAlign: 'super',
-            },
-          }}
-        >
-          <Icon {...iconProps} />
-        </IconContext.Provider>
-      </StyledIconWrapper>
-    );
-  }
+  )
 );
 
 export default ReqoreIcon;

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 {
@@ -25,6 +25,7 @@ import {
   IReqoreIntent,
   IWithReqoreCustomTheme,
   IWithReqoreFlat,
+  IWithReqoreFluid,
   IWithReqoreSize,
   IWithReqoreTooltip,
 } from '../../types/global';
@@ -62,6 +63,7 @@ export interface IReqorePanelProps
     IWithReqoreFlat,
     IReqoreIntent,
     IWithReqoreTooltip,
+    IWithReqoreFluid,
     React.HTMLAttributes<HTMLDivElement> {
   as?: any;
   children?: any;
@@ -99,12 +101,12 @@ export const StyledPanel = 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;
-  border: ${({ theme, flat, opacity = 1, intent }) =>
+  border: ${({ theme, flat, intent }) =>
     flat && !intent
       ? undefined
-      : `1px solid ${rgba(
-          changeLightness(intent ? theme.intents[intent] : getMainBackgroundColor(theme), 0.2),
-          opacity
+      : `1px solid ${changeLightness(
+          intent ? theme.intents[intent] : getMainBackgroundColor(theme),
+          0.2
         )}`};
   color: ${({ theme }) => getReadableColor(theme, undefined, undefined, true)};
   overflow: hidden;
@@ -113,7 +115,8 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
   position: relative;
   backdrop-filter: ${({ blur, opacity }) => (blur && opacity < 1 ? `blur(${blur}px)` : undefined)};
   transition: 0.2s ease-in-out;
-  flex: auto;
+  width: ${({ fluid }) => (fluid ? '100%' : undefined)};
+  flex: ${({ fluid }) => (fluid ? '1 auto' : '0 0 auto')};
 
   ${({ interactive, theme, opacity = 1, flat, intent }) =>
     interactive
@@ -125,35 +128,37 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
               transform: scale(${ACTIVE_ICON_SCALE});
             }
 
-            background-color: ${rgba(
-              darken(0.025, rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)),
-              opacity === 0 ? 0.2 : opacity
-            )};
+            background-color: ${opacity === 0 && flat
+              ? undefined
+              : rgba(
+                  darken(0.025, rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)),
+                  opacity
+                )};
 
             border-color: ${flat && !intent
               ? undefined
-              : `${rgba(
-                  changeLightness(
-                    intent ? theme.intents[intent] : getMainBackgroundColor(theme),
-                    0.25
-                  ),
-                  opacity
+              : `${changeLightness(
+                  intent ? theme.intents[intent] : getMainBackgroundColor(theme),
+                  0.25
                 )}`};
 
-            ${StyledCollectionItemContent}:after {
-              background: linear-gradient(
-                to top,
-                ${rgba(
-                    darken(
-                      0.025,
-                      rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)
-                    ),
-                    opacity === 0 ? 0.2 : opacity
-                  )}
-                  0%,
-                transparent 100%
-              );
-            }
+            ${opacity !== 0 &&
+            css`
+              ${StyledCollectionItemContent}:after {
+                background: linear-gradient(
+                  to top,
+                  ${rgba(
+                      darken(
+                        0.025,
+                        rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)
+                      ),
+                      opacity
+                    )}
+                    0%,
+                  transparent 100%
+                );
+              }
+            `}
           }
         `
       : undefined}
@@ -215,7 +220,7 @@ export const StyledPanelBottomActions = styled(StyledPanelTitle)`
 `;
 
 export const StyledPanelContent = styled.div<IStyledPanel>`
-  display: ${({ isCollapsed }) => (isCollapsed ? 'none' : undefined)};
+  display: ${({ isCollapsed }) => (isCollapsed ? 'none !important' : undefined)};
   padding: ${({ padded, contentSize, noHorizontalPadding }) =>
     !padded
       ? undefined
@@ -224,9 +229,10 @@ export const StyledPanelContent = styled.div<IStyledPanel>`
       : `${TEXT_FROM_SIZE[contentSize]}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 }) =>
-    minimal && hasLabel && padded ? '0px' : undefined};
-  padding-bottom: ${({ minimal, padded }) => (minimal && padded ? '10px' : undefined)};
+  padding-top: ${({ minimal, hasLabel, padded, contentSize }) =>
+    minimal && hasLabel && padded ? `${TEXT_FROM_SIZE[contentSize] / 2}px` : undefined};
+  padding-bottom: ${({ minimal, padded, contentSize }) =>
+    minimal && padded ? `${TEXT_FROM_SIZE[contentSize]}px` : undefined};
   flex: 1;
   overflow: auto;
   font-size: ${({ contentSize }) => TEXT_FROM_SIZE[contentSize]}px;
@@ -268,6 +274,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       tooltip,
       badge,
       iconColor,
+      fluid,
       ...rest
     }: IReqorePanelProps,
     ref
@@ -423,6 +430,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
     }, [intent, theme, contentEffect, interactive]);
 
     const opacity = rest.transparent ? 0 : rest.opacity;
+    const noHorizontalPadding = opacity === 0 && flat && !intent;
 
     return (
       <StyledPanel
@@ -438,6 +446,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         theme={theme}
         effect={transformedContentEffect}
         opacity={opacity}
+        fluid={fluid}
       >
         {hasTitleBar && (
           <StyledPanelTitle
@@ -449,7 +458,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             theme={theme}
             contentSize={contentSize}
             opacity={opacity ?? (minimal ? 0 : 1)}
-            noHorizontalPadding={opacity === 0}
+            noHorizontalPadding={noHorizontalPadding}
           >
             <StyledPanelTitleHeader>
               {icon && (
@@ -518,7 +527,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             padded={padded}
             minimal={minimal}
             contentSize={contentSize}
-            noHorizontalPadding={opacity === 0}
+            noHorizontalPadding={noHorizontalPadding}
           >
             {children}
           </StyledPanelContent>
@@ -529,7 +538,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             className='reqore-panel-bottom-actions'
             theme={theme}
             opacity={opacity ?? (minimal ? 0 : 1)}
-            noHorizontalPadding={opacity === 0}
+            noHorizontalPadding={noHorizontalPadding}
           >
             <ReqoreControlGroup>{leftBottomActions.map(renderActions)}</ReqoreControlGroup>
             <ReqoreControlGroup>{rightBottomActions.map(renderActions)}</ReqoreControlGroup>

package/src/components/Tabs/content.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 
+export type TReqoreTabsContentPadding = 'horizontal' | 'vertical' | 'none' | 'both' | true | false;
+
 export interface IReqoreTabsContent extends React.HTMLAttributes<HTMLDivElement> {
   children?: any;
   tabId: string | number;
+  padded?: TReqoreTabsContentPadding;
 }
 
 const StyledTabsContent = styled.div`
@@ -11,11 +14,16 @@ const StyledTabsContent = styled.div`
   flex-flow: column;
   overflow: hidden;
   flex: 1;
-  padding: 10px;
+  padding: ${({ padded }: IReqoreTabsContent) =>
+    padded === 'none' || padded === false
+      ? undefined
+      : `${padded === 'both' || padded === true || padded === 'vertical' ? 10 : 0}px ${
+          padded === 'both' || padded === true || padded === 'horizontal' ? 10 : 0
+        }px}`};
 `;
 
-const ReqoreTabsContent = ({ children, className, ...rest }: IReqoreTabsContent) => (
-  <StyledTabsContent {...rest} className={`${className || ''} reqore-tabs-content`}>
+const ReqoreTabsContent = ({ children, className, padded = true, ...rest }: IReqoreTabsContent) => (
+  <StyledTabsContent {...rest} padded={padded} className={`${className || ''} reqore-tabs-content`}>
     {children}
   </StyledTabsContent>
 );

package/src/components/Tabs/index.tsx

@@ -4,6 +4,7 @@ import { TSizes } from '../../constants/sizes';
 import { IReqoreCustomTheme, TReqoreIntent } from '../../constants/theme';
 import { IReqoreIconName } from '../../types/icons';
 import { IReqoreButtonProps } from '../Button';
+import { TReqoreTabsContentPadding } from './content';
 import ReqoreTabsList from './list';
 
 export interface IReqoreTabsListItem extends Omit<IReqoreButtonProps, 'id'> {
@@ -26,6 +27,8 @@ export interface IReqoreTabsProps extends React.HTMLAttributes<HTMLDivElement> {
   fillParent?: boolean;
   vertical?: boolean;
   activeTabIntent?: TReqoreIntent;
+  padded?: boolean;
+  tabsPadding?: TReqoreTabsContentPadding;
   wrapTabNames?: boolean;
   flat?: boolean;
   size?: TSizes;
@@ -61,6 +64,8 @@ const ReqoreTabs = ({
   wrapTabNames,
   customTheme,
   intent,
+  padded,
+  tabsPadding,
   ...rest
 }: IReqoreTabsProps) => {
   const [_activeTab, setActiveTab] = useState<string | number>(activeTab || tabs[0].id);
@@ -84,6 +89,7 @@ const ReqoreTabs = ({
     >
       <ReqoreTabsList
         tabs={tabs}
+        padded={padded}
         flat={flat}
         fill={fill}
         size={size}
@@ -104,7 +110,11 @@ const ReqoreTabs = ({
         }}
       />
       {React.Children.map(children, (child) =>
-        child && child.props?.tabId === _activeTab ? child : null
+        child && child.props?.tabId === _activeTab
+          ? React.cloneElement(child, {
+              padded: child.props?.padded || tabsPadding,
+            })
+          : null
       )}
     </StyledTabs>
   );

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

@@ -35,6 +35,7 @@ import ReqoreIcon from '../Icon';
 
 export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
   icon: IReqoreIconName;
+  show?: boolean;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 
@@ -331,28 +332,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/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/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();
       }