@qoretechnologies/reqore 0.30.5 → 0.30.6

package/src/components/Tag/index.tsx

@@ -21,13 +21,10 @@ 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';
@@ -37,7 +34,6 @@ import ReqoreIcon from '../Icon';
 
 export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
   icon: IReqoreIconName;
-  show?: boolean;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
 }
 
@@ -46,9 +42,7 @@ export interface IReqoreTagProps
     IWithReqoreTooltip,
     IReqoreDisabled,
     IWithReqoreEffect,
-    IWithReqoreMinimal,
-    IWithReqoreFluid,
-    IWithReqoreFixed {
+    IWithReqoreMinimal {
   size?: TSizes;
   label?: string | number;
   labelKey?: string | number;
@@ -56,9 +50,6 @@ 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;
@@ -86,15 +77,10 @@ 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`
@@ -120,24 +106,16 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
     `}
 
   ${({ theme, color, interactive, minimal, effect }) =>
-    interactive
+    interactive && !effect?.gradient
       ? css`
           cursor: pointer;
           &:hover {
-            .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)};
-            `}
+            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}
@@ -152,6 +130,8 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
     `}
 `;
 
+const StyledTagRightIcon = styled(ReqoreIcon)``;
+
 const StyledTagKeyWrapper = styled.span<{ size: TSizes }>`
   display: flex;
   align-items: center;
@@ -247,9 +227,6 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
       minimal,
       wrap = false,
       width,
-      leftIconColor,
-      rightIconColor,
-      iconColor,
       ...rest
     }: IReqoreTagProps,
     ref
@@ -275,7 +252,6 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
         {...rest}
         effect={{
           ...rest.effect,
-          gradient: intent ? undefined : rest.effect?.gradient,
           interactive: !!onClick && !rest.disabled,
         }}
         width={width}
@@ -300,14 +276,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             hasWidth={!!width}
             hasKey={!!labelKey}
           >
-            {icon && (
-              <ReqoreIcon
-                icon={icon}
-                size={size}
-                margin={label ? 'left' : 'both'}
-                color={leftIconColor || iconColor}
-              />
-            )}
+            {icon && <ReqoreIcon icon={icon} size={size} margin={label ? 'left' : 'both'} />}
             {labelKey && (
               <StyledTagContentKey wrap={wrap} hasWidth={!!width} size={size}>
                 {labelKey}
@@ -330,40 +299,37 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
               </StyledTagContent>
             ) : null}
             {rightIcon && (
-              <ReqoreIcon
+              <StyledTagRightIcon
                 icon={rightIcon}
                 size={size}
                 margin={label || icon ? 'right' : 'both'}
-                color={rightIconColor || iconColor}
               />
             )}
           </StyledTagContentWrapper>
         ) : null}
         {_size(actions)
-          ? 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>
-              ))
+          ? 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>
+            ))
           : null}
         {onRemoveClick && !rest.disabled ? (
           <ReqorePopover
@@ -375,7 +341,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
               onClick: onRemoveClick,
               effect: rest.effect,
             }}
-            isReqoreComponent
+            noWrapper
             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} responsive>
+        <ReqoreControlGroup stack size={size}>
           {isDeep() && !allExpanded ? (
             <ReqoreButton
               flat

package/src/constants/animations.ts

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

package/src/constants/sizes.ts

@@ -37,19 +37,19 @@ export const HEADER_SIZE_TO_NUMBER = {
 };
 
 export const SIZE_TO_PX = {
-  tiny: 18,
-  small: 24,
+  tiny: 10,
+  small: 20,
   normal: 30,
   big: 40,
   huge: 50,
 };
 
 export const BADGE_SIZE_TO_PX = {
-  tiny: 14,
-  small: 20,
-  normal: 26,
-  big: 32,
-  huge: 38,
+  tiny: 10,
+  small: 18,
+  normal: 24,
+  big: 30,
+  huge: 36,
 };
 
 export const TABS_SIZE_TO_PX = {
@@ -109,9 +109,9 @@ export const PADDING_FROM_SIZE = {
 };
 
 export const RADIUS_FROM_SIZE = {
-  tiny: 4,
-  small: 5,
-  normal: 5.5,
+  tiny: 1,
+  small: 3,
+  normal: 5,
   big: 7,
   huge: 9,
 };

package/src/containers/PopoverProvider.tsx

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

package/src/containers/ReqoreProvider.tsx

@@ -120,10 +120,8 @@ 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,
         }}
@@ -158,47 +156,44 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
           </ReqoreNotificationsWrapper>
         ) : null}
         {children}
-        {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',
+        <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();
               },
-              {
-                label: confirmationModal.confirmLabel || 'Confirm',
-                intent: confirmationModal.confirmButtonIntent || 'success',
-                icon: confirmationModal.confirmIcon || 'CheckLine',
-                onClick: () => {
-                  confirmationModal?.onConfirm?.();
-                  closeConfirmationModal();
-                },
-                position: 'right',
+              position: 'left',
+            },
+            {
+              label: confirmationModal.confirmLabel || 'Confirm',
+              intent: confirmationModal.confirmButtonIntent || 'success',
+              icon: confirmationModal.confirmIcon || 'CheckLine',
+              onClick: () => {
+                confirmationModal?.onConfirm?.();
+                closeConfirmationModal();
               },
-            ]}
+              position: 'right',
+            },
+          ]}
+        >
+          <ReqoreTextEffect
+            as='p'
+            effect={{ textAlign: 'center', weight: 'bold', textSize: 'big' }}
           >
-            <ReqoreTextEffect
-              as='p'
-              effect={{ textAlign: 'center', weight: 'bold', textSize: 'big' }}
-            >
-              {confirmationModal.description || 'Are you sure you want to proceed?'}
-            </ReqoreTextEffect>
-          </ReqoreModal>
-        )}
+            {confirmationModal.description || 'Are you sure you want to proceed?'}
+          </ReqoreTextEffect>
+        </ReqoreModal>
       </ReqoreContext.Provider>
     </>
   );

package/src/containers/UIProvider.tsx

@@ -18,13 +18,6 @@ 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,9 +12,7 @@ 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,9 +96,6 @@ 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;
   }
@@ -203,8 +200,7 @@ export const createEffectGradient = (
   theme: IReqoreTheme,
   colors: TReqoreEffectGradientColors,
   lighten: number = 0,
-  minimal?: boolean,
-  active?: boolean
+  minimal?: boolean
 ): string => {
   let _colors: TReqoreEffectGradientColorsObject;
   // Check if the colors are valid
@@ -223,9 +219,7 @@ export const createEffectGradient = (
     (colorsString, color, percentage) => {
       return `${colorsString}, ${
         minimal
-          ? active
-            ? theme.originalMain
-            : changeLightness(theme.originalMain, lighten)
+          ? theme.originalMain
           : changeLightness(getColorFromMaybeString(theme, color), lighten)
       } ${percentage}%`;
     },

package/src/helpers/utils.ts

@@ -8,7 +8,6 @@ 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));
@@ -89,20 +88,3 @@ 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, latestZIndex } = useContext(ReqoreContext);
-  const zIndex = useMemo(() => getAndIncreaseZIndex(), [latestZIndex]);
+  const { getAndIncreaseZIndex } = useContext(ReqoreContext);
+  const zIndex = useMemo(() => getAndIncreaseZIndex(), []);
 
   return zIndex;
 };

package/src/hooks/usePopover.tsx

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

package/src/mock/collectionData.tsx

@@ -32,8 +32,6 @@ 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: [
@@ -53,21 +51,13 @@ export default [
   },
   {
     icon: 'TextWrap',
-    label: 'Small item that is not minimal',
+    label: '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',
@@ -92,7 +82,6 @@ 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,
@@ -105,22 +94,6 @@ 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>
@@ -208,9 +181,6 @@ export default [
   },
   {
     label: 'I have intent!',
-    transparent: true,
-    minimal: false,
-    flat: false,
     content: (
       <ReqoreP>
         'Well would you look at that. Lorem ipsum dolor{' '}
@@ -262,14 +232,13 @@ 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',