@qoretechnologies/reqore 0.30.6 → 0.30.8

package/src/components/InternalPopover/index.tsx

@@ -1,6 +1,6 @@
-import { isString } from 'lodash';
+import { cloneDeep, isString } from 'lodash';
 import { rgba } from 'polished';
-import React, { MutableRefObject, useContext, useEffect, useRef, useState } from 'react';
+import React, { MutableRefObject, memo, useContext, useEffect, useRef, useState } from 'react';
 import { usePopper } from 'react-popper';
 import styled, { css } from 'styled-components';
 import { RADIUS_FROM_SIZE } from '../../constants/sizes';
@@ -62,8 +62,8 @@ const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
   max-height: ${({ maxHeight = '80vh' }) => maxHeight};
   z-index: 999999;
   border-radius: ${RADIUS_FROM_SIZE.normal}px;
-  border: ${({ flat, isString, ...rest }: any) =>
-    !flat && !isString ? `1px solid ${getPopoverArrowColor({ ...rest, flat })}` : undefined};
+  border: ${({ flat, noWrapper, ...rest }: any) =>
+    !flat && noWrapper ? `1px solid ${getPopoverArrowColor({ ...rest, flat })}` : undefined};
 
   ${({ transparent }) =>
     !transparent &&
@@ -129,7 +129,7 @@ const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
   }
 `;
 
-const StyledPopoverContent = styled.div<{ isString?: boolean }>`
+const StyledPopoverContent = styled.div`
   width: 100%;
   height: 100%;
   z-index: 20;
@@ -139,133 +139,138 @@ const StyledPopoverContent = styled.div<{ isString?: boolean }>`
 
 export interface IReqoreInternalPopoverProps extends IPopoverData {}
 
-const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
-  targetElement,
-  content,
-  id,
-  placement,
-  noArrow,
-  useTargetWidth,
-  transparent,
-  maxWidth,
-  maxHeight,
-  blur,
-  intent,
-  title,
-  icon,
-  minimal,
-  flat = true,
-  effect,
-}) => {
-  const { removePopover, updatePopover, uiScale } = useContext(PopoverContext);
-  const [popperElement, setPopperElement] = useState(null);
-  const [arrowElement, setArrowElement] = useState(null);
-  const popperRef: MutableRefObject<any> = useRef(null);
-  const { styles, attributes } = usePopper(targetElement, popperElement, {
+const InternalPopover: React.FC<IReqoreInternalPopoverProps> = memo(
+  ({
+    targetElement,
+    content,
+    id,
     placement,
-    modifiers: [
-      {
-        name: 'offset',
-        options: {
-          offset: [0, noArrow ? 5 : 10],
+    noArrow,
+    noWrapper,
+    useTargetWidth,
+    transparent,
+    maxWidth,
+    maxHeight,
+    blur,
+    intent,
+    title,
+    icon,
+    minimal,
+    flat = true,
+    effect,
+  }) => {
+    const { removePopover, updatePopover, uiScale } = useContext(PopoverContext);
+    const [popperElement, setPopperElement] = useState(null);
+    const [arrowElement, setArrowElement] = useState(null);
+    const popperRef: MutableRefObject<any> = useRef(null);
+    const { styles, attributes } = usePopper(targetElement, popperElement, {
+      placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, noArrow ? 5 : 10],
+          },
         },
-      },
-      {
-        name: 'arrow',
-        options: {
-          element: arrowElement,
+        {
+          name: 'arrow',
+          options: {
+            element: arrowElement,
+          },
         },
-      },
-      {
-        name: 'hide',
-        enabled: true,
-      },
-    ],
-  });
-
-  useEffect(() => {
-    if (popperRef.current) {
-      updatePopover?.(id, { popperRef });
-    }
-  }, [popperRef]);
+        {
+          name: 'hide',
+          enabled: true,
+        },
+      ],
+    });
 
-  useEffect(() => {
-    if (attributes.popper?.['data-popper-reference-hidden']) {
-      removePopover?.(id);
-    }
-  }, [attributes.popper]);
+    useEffect(() => {
+      if (popperRef.current) {
+        updatePopover?.(id, { popperRef: cloneDeep(popperRef) });
+      }
+    }, [popperRef]);
 
-  /* Getting the x and y values from the transform property of the popper element. */
-  const translateValues = styles.popper.transform
-    ?.replace('translate3d(', '')
-    .replace('translate(', '')
-    .replace(')', '')
-    .split(',')
-    .map((axis) => {
-      if (uiScale || uiScale === 0) {
-        return parseInt(axis, 10) < 0 ? parseInt(axis, 10) * uiScale : parseInt(axis, 10) / uiScale;
+    useEffect(() => {
+      if (attributes.popper?.['data-popper-reference-hidden']) {
+        removePopover?.(id);
       }
-      return parseInt(axis, 10);
-    });
+    }, [attributes.popper]);
 
-  return (
-    <ReqoreThemeProvider>
-      {blur > 0 ? <StyledBackdrop zIndex={999998} blur={blur} closable /> : null}
-      <StyledPopoverWrapper
-        maxWidth={maxWidth}
-        maxHeight={maxHeight}
-        transparent={transparent}
-        effect={effect}
-        isOpaque={!transparent && !minimal}
-        intent={intent}
-        flat={flat}
-        isString={isString(content)}
-        dim={flat && !transparent && !effect && minimal}
-        className='reqore-popover-content'
-        ref={(el) => {
-          setPopperElement(el);
-          popperRef.current = el;
-        }}
-        style={{
-          ...styles.popper,
-          transform: `translate(${translateValues?.[0] || 0}px, ${translateValues?.[1] || 0}px)`,
-          width: useTargetWidth && (targetElement?.getBoundingClientRect()?.width || undefined),
-        }}
-        {...attributes.popper}
-      >
-        {!noArrow && !transparent ? (
-          <StyledPopoverArrow ref={setArrowElement} style={styles.arrow} data-popper-arrow />
-        ) : null}
-        <StyledPopoverContent isString={isString(content)}>
-          {isString(content) ? (
-            <ReqoreMessage
-              opaque={!transparent && !minimal}
-              className='reqore-popover-text'
-              intent={intent}
-              title={title}
-              icon={icon}
-              minimal={transparent}
-              flat={flat || transparent}
-              effect={effect}
-            >
-              {content}
-            </ReqoreMessage>
-          ) : (
-            <>
-              {React.Children.map(content, (child) =>
-                child
-                  ? React.cloneElement(child, {
-                      _insidePopover: true,
-                      _popoverId: id,
-                    })
-                  : null
-              )}
-            </>
-          )}
-        </StyledPopoverContent>
-      </StyledPopoverWrapper>
-    </ReqoreThemeProvider>
-  );
-};
+    /* Getting the x and y values from the transform property of the popper element. */
+    const translateValues = styles.popper.transform
+      ?.replace('translate3d(', '')
+      .replace('translate(', '')
+      .replace(')', '')
+      .split(',')
+      .map((axis) => {
+        if (uiScale || uiScale === 0) {
+          return parseInt(axis, 10) < 0
+            ? parseInt(axis, 10) * uiScale
+            : parseInt(axis, 10) / uiScale;
+        }
+        return parseInt(axis, 10);
+      });
+
+    return (
+      <ReqoreThemeProvider>
+        {blur > 0 ? <StyledBackdrop zIndex={999998} blur={blur} closable /> : null}
+        <StyledPopoverWrapper
+          maxWidth={maxWidth}
+          maxHeight={maxHeight}
+          transparent={transparent}
+          effect={effect}
+          isOpaque={!transparent && !minimal}
+          intent={intent}
+          flat={flat}
+          noWrapper={noWrapper}
+          dim={flat && !transparent && !effect && minimal}
+          className='reqore-popover-content'
+          ref={(el) => {
+            setPopperElement(el);
+            popperRef.current = el;
+          }}
+          style={{
+            ...styles.popper,
+            transform: `translate(${translateValues?.[0] || 0}px, ${translateValues?.[1] || 0}px)`,
+            width: useTargetWidth && (targetElement?.getBoundingClientRect()?.width || undefined),
+          }}
+          {...attributes.popper}
+        >
+          {!noArrow && !transparent ? (
+            <StyledPopoverArrow ref={setArrowElement} style={styles.arrow} data-popper-arrow />
+          ) : null}
+          <StyledPopoverContent>
+            {!noWrapper || isString(content) ? (
+              <ReqoreMessage
+                opaque={!transparent && !minimal}
+                className='reqore-popover-text'
+                intent={intent}
+                title={title}
+                icon={icon}
+                minimal={transparent}
+                flat={flat || transparent}
+                effect={effect}
+              >
+                {content}
+              </ReqoreMessage>
+            ) : (
+              <>
+                {React.Children.map(content, (child) =>
+                  child
+                    ? React.cloneElement(child, {
+                        _insidePopover: true,
+                        _popoverId: id,
+                      })
+                    : null
+                )}
+              </>
+            )}
+          </StyledPopoverContent>
+        </StyledPopoverWrapper>
+      </ReqoreThemeProvider>
+    );
+  }
+);
 
 export default InternalPopover;

package/src/components/Menu/index.tsx

@@ -74,7 +74,13 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
 
     return (
       <ReqoreThemeProvider theme={theme}>
-        <StyledReqoreMenu {...rest} position={position} ref={ref} theme={theme}>
+        <StyledReqoreMenu
+          {...rest}
+          position={position}
+          ref={ref}
+          theme={theme}
+          className={`${rest.className || ''} reqore-menu`}
+        >
           {React.Children.map(children, (child) => {
             return child
               ? // @ts-ignore

package/src/components/Message/index.tsx

@@ -14,6 +14,7 @@ import {
   IWithReqoreSize,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
+import { TReqoreEffectColor } from '../Effect';
 import { ReqoreHeading } from '../Header';
 import ReqoreIcon from '../Icon';
 import {
@@ -35,6 +36,7 @@ export interface IReqoreMessageProps
   title?: string;
   children: any;
   icon?: IReqoreIconName;
+  iconColor?: TReqoreEffectColor;
   onClose?: () => any;
   onClick?: () => any;
   duration?: number;
@@ -64,6 +66,7 @@ const ReqoreMessage = forwardRef<HTMLDivElement, IReqoreMessageProps>(
       minimal,
       size = 'normal',
       customTheme,
+      iconColor,
       ...rest
     },
     ref: any
@@ -128,7 +131,12 @@ const ReqoreMessage = forwardRef<HTMLDivElement, IReqoreMessageProps>(
         >
           {leftIcon ? (
             <StyledIconWrapper intent={intent} size={size} theme={theme}>
-              <ReqoreIcon icon={leftIcon} margin={flat && minimal ? 'right' : 'both'} size={size} />
+              <ReqoreIcon
+                icon={leftIcon}
+                margin={flat && minimal ? 'right' : 'both'}
+                size={size}
+                color={iconColor}
+              />
             </StyledIconWrapper>
           ) : null}
           <StyledNotificationContentWrapper size={size} theme={theme}>