@qoretechnologies/reqore 0.30.6 → 0.30.8

package/src/components/Tag/index.tsx

@@ -21,10 +21,13 @@ import {
 } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useTooltip } from '../../hooks/useTooltip';
+import { ActiveIconScale, InactiveIconScale } from '../../styles';
 import {
   IReqoreDisabled,
   IReqoreIntent,
   IWithReqoreEffect,
+  IWithReqoreFixed,
+  IWithReqoreFluid,
   IWithReqoreMinimal,
   IWithReqoreTooltip,
 } from '../../types/global';
@@ -34,6 +37,7 @@ import ReqoreIcon from '../Icon';
 
 export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
   icon: IReqoreIconName;
+  show?: boolean;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 
@@ -42,7 +46,9 @@ export interface IReqoreTagProps
     IWithReqoreTooltip,
     IReqoreDisabled,
     IWithReqoreEffect,
-    IWithReqoreMinimal {
+    IWithReqoreMinimal,
+    IWithReqoreFluid,
+    IWithReqoreFixed {
   size?: TSizes;
   label?: string | number;
   labelKey?: string | number;
@@ -50,6 +56,9 @@ export interface IReqoreTagProps
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
   icon?: IReqoreIconName;
   rightIcon?: IReqoreIconName;
+  iconColor?: TReqoreEffectColor;
+  leftIconColor?: TReqoreEffectColor;
+  rightIconColor?: TReqoreEffectColor;
   color?: TReqoreEffectColor;
   actions?: IReqoreTagAction[];
   width?: string;
@@ -77,10 +86,15 @@ 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)};
+  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;
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
 
+  ${InactiveIconScale};
+
   ${({ wrap, hasWidth }) =>
     wrap || hasWidth
       ? css`
@@ -106,16 +120,24 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
     `}
 
   ${({ theme, color, interactive, minimal, effect }) =>
-    interactive && !effect?.gradient
+    interactive
       ? css`
           cursor: pointer;
           &:hover {
-            background-color: ${changeLightness(color || theme.main, color ? 0.05 : 0.15)};
-            color: ${minimal
-              ? getReadableColor(theme, undefined, undefined, false, theme.originalMain)
-              : color
-              ? getReadableColorFrom(color)
-              : getReadableColor(theme, undefined, undefined)};
+            .reqore-tag-content,
+            .reqore-tag-key-content {
+              ${ActiveIconScale}
+            }
+
+            ${!effect?.gradient &&
+            css`
+              background-color: ${changeLightness(color || theme.main, color ? 0.05 : 0.15)};
+              color: ${minimal
+                ? getReadableColor(theme, undefined, undefined, false, theme.originalMain)
+                : color
+                ? getReadableColorFrom(color)
+                : getReadableColor(theme, undefined, undefined)};
+            `}
           }
         `
       : undefined}
@@ -130,8 +152,6 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
     `}
 `;
 
-const StyledTagRightIcon = styled(ReqoreIcon)``;
-
 const StyledTagKeyWrapper = styled.span<{ size: TSizes }>`
   display: flex;
   align-items: center;
@@ -227,6 +247,9 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       minimal,
       wrap = false,
       width,
+      leftIconColor,
+      rightIconColor,
+      iconColor,
       ...rest
     }: IReqoreTagProps,
     ref
@@ -252,6 +275,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
         {...rest}
         effect={{
           ...rest.effect,
+          gradient: intent ? undefined : rest.effect?.gradient,
           interactive: !!onClick && !rest.disabled,
         }}
         width={width}
@@ -276,7 +300,14 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             hasWidth={!!width}
             hasKey={!!labelKey}
           >
-            {icon && <ReqoreIcon icon={icon} size={size} margin={label ? 'left' : 'both'} />}
+            {icon && (
+              <ReqoreIcon
+                icon={icon}
+                size={size}
+                margin={label ? 'left' : 'both'}
+                color={leftIconColor || iconColor}
+              />
+            )}
             {labelKey && (
               <StyledTagContentKey wrap={wrap} hasWidth={!!width} size={size}>
                 {labelKey}
@@ -299,37 +330,40 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
               </StyledTagContent>
             ) : null}
             {rightIcon && (
-              <StyledTagRightIcon
+              <ReqoreIcon
                 icon={rightIcon}
                 size={size}
                 margin={label || icon ? 'right' : 'both'}
+                color={rightIconColor || iconColor}
               />
             )}
           </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
-                    : {})}
-                  noWrapper
-                >
-                  <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
@@ -341,7 +375,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
               onClick: onRemoveClick,
               effect: rest.effect,
             }}
-            noWrapper
+            isReqoreComponent
             content='Remove'
           >
             <ReqoreIcon icon='CloseLine' size={size} />

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 = {
@@ -109,9 +109,9 @@ export const PADDING_FROM_SIZE = {
 };
 
 export const RADIUS_FROM_SIZE = {
-  tiny: 1,
-  small: 3,
-  normal: 5,
+  tiny: 4,
+  small: 5,
+  normal: 5.5,
   big: 7,
   huge: 9,
 };

package/src/containers/PopoverProvider.tsx

@@ -22,12 +22,15 @@ const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiSc
   const handleClick = useCallback(
     (event: MouseEvent) => {
       popovers.forEach(({ popperRef, closeOnAnyClick, closeOnOutsideClick, id, targetElement }) => {
+        if (closeOnAnyClick) {
+          removePopover(id);
+          return;
+        }
+
         if (
-          closeOnAnyClick ||
-          (closeOnOutsideClick &&
-            popperRef?.current &&
-            !popperRef.current.contains(event.target) &&
-            !targetElement?.contains(event.target as Node))
+          closeOnOutsideClick &&
+          !(popperRef?.current && popperRef.current.contains(event.target)) &&
+          !targetElement?.contains(event.target as Node)
         ) {
           removePopover(id);
         }
@@ -66,21 +69,21 @@ const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiSc
   };
 
   useEffect(() => {
-    document.addEventListener('click', handleClick);
+    document.addEventListener('click', handleClick, true);
 
     if (closePopoversOnEscPress) {
       document.addEventListener('keydown', handleKeyDown);
     }
 
     return () => {
-      document.removeEventListener('click', handleClick);
+      document.removeEventListener('click', handleClick, true);
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [popovers]);
 
   useEffect(() => {
     if (!size(popovers)) {
-      document.removeEventListener('click', handleClick);
+      document.removeEventListener('click', handleClick, true);
       document.removeEventListener('keydown', handleKeyDown);
     }
   }, [popovers]);

package/src/containers/ReqoreProvider.tsx

@@ -120,8 +120,10 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
           isMobile,
           isTablet,
           isMobileOrTablet,
+          latestZIndex: latestZIndex.current,
           getAndIncreaseZIndex,
           animations: options.animations || { buttons: true, dialogs: true },
+          tooltips: options.tooltips || { delay: 0 },
           closePopoversOnEscPress:
             'closePopoversOnEscPress' in options ? options.closePopoversOnEscPress : true,
         }}
@@ -156,44 +158,47 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
           </ReqoreNotificationsWrapper>
         ) : null}
         {children}
-        <ReqoreModal
-          isOpen={confirmationModal.isOpen}
-          flat
-          opacity={0.9}
-          blur={2}
-          width='500px'
-          intent={confirmationModal.intent}
-          label={confirmationModal.title || 'Confirm your action'}
-          icon='ErrorWarningFill'
-          bottomActions={[
-            {
-              label: confirmationModal.cancelLabel || 'Cancel',
-              icon: 'CloseLine',
-              onClick: () => {
-                confirmationModal?.onCancel?.();
-                closeConfirmationModal();
+        {confirmationModal.isOpen && (
+          <ReqoreModal
+            isOpen
+            flat
+            opacity={0.9}
+            blur={2}
+            width='500px'
+            intent={confirmationModal.intent}
+            label={confirmationModal.title || 'Confirm your action'}
+            icon='ErrorWarningFill'
+            className='reqore-confirmation-modal'
+            bottomActions={[
+              {
+                label: confirmationModal.cancelLabel || 'Cancel',
+                icon: 'CloseLine',
+                onClick: () => {
+                  confirmationModal?.onCancel?.();
+                  closeConfirmationModal();
+                },
+                position: 'left',
               },
-              position: 'left',
-            },
-            {
-              label: confirmationModal.confirmLabel || 'Confirm',
-              intent: confirmationModal.confirmButtonIntent || 'success',
-              icon: confirmationModal.confirmIcon || 'CheckLine',
-              onClick: () => {
-                confirmationModal?.onConfirm?.();
-                closeConfirmationModal();
+              {
+                label: confirmationModal.confirmLabel || 'Confirm',
+                intent: confirmationModal.confirmButtonIntent || 'success',
+                icon: confirmationModal.confirmIcon || 'CheckLine',
+                onClick: () => {
+                  confirmationModal?.onConfirm?.();
+                  closeConfirmationModal();
+                },
+                position: 'right',
               },
-              position: 'right',
-            },
-          ]}
-        >
-          <ReqoreTextEffect
-            as='p'
-            effect={{ textAlign: 'center', weight: 'bold', textSize: 'big' }}
+            ]}
           >
-            {confirmationModal.description || 'Are you sure you want to proceed?'}
-          </ReqoreTextEffect>
-        </ReqoreModal>
+            <ReqoreTextEffect
+              as='p'
+              effect={{ textAlign: 'center', weight: 'bold', textSize: 'big' }}
+            >
+              {confirmationModal.description || 'Are you sure you want to proceed?'}
+            </ReqoreTextEffect>
+          </ReqoreModal>
+        )}
       </ReqoreContext.Provider>
     </>
   );

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,7 +12,9 @@ export interface IReqoreContext {
   readonly isMobileOrTablet?: boolean;
   readonly getAndIncreaseZIndex?: () => number;
   readonly animations?: IReqoreOptions['animations'];
+  readonly tooltips?: IReqoreOptions['tooltips'];
   readonly closePopoversOnEscPress?: boolean;
+  readonly latestZIndex?: number;
 }
 
 export default createContext<IReqoreContext>({

package/src/helpers/colors.ts

@@ -96,6 +96,9 @@ export const buildTheme = (theme: IReqoreTheme): IReqoreTheme => {
     newTheme.main = '#333333';
   }
 
+  // Add the original theme main color to the theme
+  newTheme.originalMain = newTheme.main;
+
   if (!newTheme.notifications?.info) {
     newTheme.notifications.info = newTheme.intents.info || DEFAULT_INTENTS.info;
   }
@@ -200,7 +203,8 @@ export const createEffectGradient = (
   theme: IReqoreTheme,
   colors: TReqoreEffectGradientColors,
   lighten: number = 0,
-  minimal?: boolean
+  minimal?: boolean,
+  active?: boolean
 ): string => {
   let _colors: TReqoreEffectGradientColorsObject;
   // Check if the colors are valid
@@ -219,7 +223,9 @@ export const createEffectGradient = (
     (colorsString, color, percentage) => {
       return `${colorsString}, ${
         minimal
-          ? theme.originalMain
+          ? active
+            ? theme.originalMain
+            : changeLightness(theme.originalMain, lighten)
           : changeLightness(getColorFromMaybeString(theme, color), lighten)
       } ${percentage}%`;
     },

package/src/helpers/utils.ts

@@ -8,6 +8,7 @@ import {
   isString,
   isUndefined,
 } from 'lodash';
+import { IReqorePanelAction } from '../components/Panel';
 import { NUMBER_TO_SIZE, SIZES, SIZE_TO_NUMBER, TSizes } from '../constants/sizes';
 
 export const sleep = async (ms: number) => await new Promise((r) => setTimeout(r, ms));
@@ -88,3 +89,20 @@ export const getOneLessSize = (size: TSizes): TSizes => {
   // Get the size name from the number
   return NUMBER_TO_SIZE[oneLessSizeNumber];
 };
+
+export const isActionShown = (action: IReqorePanelAction) => action.show !== false;
+
+export const alignToFlexAlign = (
+  align: 'left' | 'right' | 'center'
+): 'flex-start' | 'center' | 'flex-end' => {
+  switch (align) {
+    case 'left':
+      return 'flex-start';
+    case 'right':
+      return 'flex-end';
+    case 'center':
+      return 'center';
+    default:
+      return 'flex-start';
+  }
+};

package/src/hooks/useLatestZIndex.ts

@@ -2,8 +2,8 @@ import { useContext, useMemo } from 'react';
 import { ReqoreContext } from '..';
 
 const useLatestZIndex = (): number => {
-  const { getAndIncreaseZIndex } = useContext(ReqoreContext);
-  const zIndex = useMemo(() => getAndIncreaseZIndex(), []);
+  const { getAndIncreaseZIndex, latestZIndex } = useContext(ReqoreContext);
+  const zIndex = useMemo(() => getAndIncreaseZIndex(), [latestZIndex]);
 
   return zIndex;
 };

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',
@@ -44,6 +45,7 @@ export interface IPopover
   show?: boolean;
   openOnMount?: boolean;
   noArrow?: boolean;
+  noWrapper?: boolean;
   useTargetWidth?: boolean;
   closeOnOutsideClick?: boolean;
   closeOnAnyClick?: boolean;
@@ -76,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);
 
@@ -95,11 +98,11 @@ const usePopover = ({
       noArrow,
       useTargetWidth,
       closeOnOutsideClick,
-      closeOnAnyClick: handler === 'hover' || handler === 'hoverStay',
+      closeOnAnyClick: handler === 'hover',
       ...rest,
     });
 
-    if (rest?.blur > 0) {
+    if (rest.blur > 0) {
       targetElement.style.position = 'relative';
       targetElement.style.zIndex = '999999';
     }
@@ -108,13 +111,13 @@ const usePopover = ({
   const _addPopover = () => {
     if (currentPopover) {
       if (handler !== 'hoverStay' && handler !== 'focus') {
-        _removePopover?.();
+        _removePopover();
       }
     } else if (show) {
-      if (delay) {
+      if (delay || tooltips.delay) {
         timeout = setTimeout(() => {
           openPopover();
-        }, delay);
+        }, delay || tooltips.delay);
       } else {
         openPopover();
       }
@@ -141,7 +144,7 @@ const usePopover = ({
         noArrow,
         useTargetWidth,
         closeOnOutsideClick,
-        closeOnAnyClick: handler === 'hover' || handler === 'hoverStay',
+        closeOnAnyClick: handler === 'hover',
         ...rest,
       });
     }

package/src/mock/collectionData.tsx

@@ -32,6 +32,8 @@ export default [
     tooltip: 'This is a test item',
     headerSize: 2,
     contentSize: 'huge',
+    selected: true,
+    icon: 'Hashtag',
     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',
     tags: [
@@ -51,13 +53,21 @@ export default [
   },
   {
     icon: 'TextWrap',
-    label: 'Item that is not minimal',
+    label: 'Small item that is not minimal',
     tooltip: 'This is a test item',
+    size: 'small',
     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',
     minimal: false,
     badge: 0,
   },
+  {
+    icon: 'ZcoolLine',
+    label: 'Item without fade',
+    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 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 Hello I am a test item content and I am very long so 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',
+    showContentFade: false,
+  },
   {
     icon: 'FolderWarningFill',
     label: 'Expandable item',
@@ -82,6 +92,7 @@ export default [
   {
     label: 'Item with custom content when expanded',
     tooltip: 'Expandable item with custom content',
+    selected: true,
     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',
     expandable: true,
@@ -94,6 +105,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>
@@ -181,6 +208,9 @@ export default [
   },
   {
     label: 'I have intent!',
+    transparent: true,
+    minimal: false,
+    flat: false,
     content: (
       <ReqoreP>
         'Well would you look at that. Lorem ipsum dolor{' '}
@@ -232,13 +262,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',