@qoretechnologies/reqore 0.28.5 → 0.28.6

package/src/components/Dropdown/index.tsx

@@ -47,7 +47,7 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
   maxHeight,
   maxWidth,
   noArrow = true,
-  opaque,
+  transparent,
   openOnMount,
   show,
   targetElement,
@@ -90,7 +90,7 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
       maxHeight={maxHeight}
       maxWidth={maxWidth}
       noArrow={noArrow}
-      opaque={opaque}
+      transparent={transparent}
       useTargetWidth={useTargetWidth}
       component={component || ReqoreButton}
       componentProps={componentProps}

package/src/components/Icon/index.tsx

@@ -10,12 +10,22 @@ import { isStringSize } from '../../helpers/utils';
 import { IReqoreIconName } from '../../types/icons';
 
 export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement> {
-  icon: IReqoreIconName;
+  icon?: IReqoreIconName;
   color?: string;
   size?: TSizes | string;
   iconProps?: IconBaseProps;
   intent?: TReqoreIntent;
   margin?: 'right' | 'left' | 'both';
+  image?: string;
+  rounded?: boolean;
+  grayscale?: boolean;
+  blur?: number;
+  sepia?: boolean;
+  invert?: boolean;
+  opacity?: number;
+  brightness?: number;
+  contrast?: number;
+  saturate?: number;
 }
 
 export const StyledIconWrapper = styled.span<{ margin: 'right' | 'left' | 'both' }>`
@@ -23,6 +33,51 @@ export const StyledIconWrapper = styled.span<{ margin: 'right' | 'left' | 'both'
   flex: 0 0 auto;
   vertical-align: text-bottom;
   transition: all 0.2s ease-out;
+  overflow: hidden;
+
+  border-radius: ${({ rounded }) => (rounded ? '50%' : undefined)};
+
+  ${({ grayscale }) =>
+    grayscale &&
+    css`
+      filter: grayscale(100%);
+    `};
+  ${({ blur }) =>
+    blur &&
+    css`
+      filter: blur(${blur}px);
+    `};
+  ${({ sepia }) =>
+    sepia &&
+    css`
+      filter: sepia(100%);
+    `};
+  ${({ invert }) =>
+    invert &&
+    css`
+      filter: invert(100%);
+    `};
+  ${({ opacity }) =>
+    opacity || opacity === 0
+      ? css`
+          opacity: ${opacity};
+        `
+      : undefined};
+  ${({ brightness }) =>
+    brightness &&
+    css`
+      filter: brightness(${brightness}%);
+    `};
+  ${({ contrast }) =>
+    contrast &&
+    css`
+      filter: contrast(${contrast}%);
+    `};
+  ${({ saturate }) =>
+    saturate &&
+    css`
+      filter: saturate(${saturate}%);
+    `};
 
   ${({ margin, size }) =>
     margin &&
@@ -38,6 +93,10 @@ export const StyledIconWrapper = styled.span<{ margin: 'right' | 'left' | 'both'
           : '10px'
         : undefined};
     `}
+
+  img {
+    width: 100%;
+  }
 `;
 
 const ReqoreIcon = memo(
@@ -50,6 +109,7 @@ const ReqoreIcon = memo(
     style = {},
     iconProps,
     intent,
+    image,
     ...rest
   }: IReqoreIconProps) => {
     const theme = useContext(ReqoreThemeContext);
@@ -57,6 +117,20 @@ const ReqoreIcon = memo(
     const finalColor: string | undefined = intent ? theme.intents[intent] : color;
     const finalSize: string = isStringSize(size) ? ICON_FROM_SIZE[size] : size;
 
+    if (image) {
+      return (
+        <StyledIconWrapper
+          {...rest}
+          size={size}
+          margin={margin}
+          className={`${className || ''} reqore-icon`}
+          style={{ ...style, width: finalSize, height: finalSize }}
+        >
+          <img src={image} alt='' />
+        </StyledIconWrapper>
+      );
+    }
+
     if (!Icon) {
       return (
         <StyledIconWrapper

package/src/components/InternalPopover/index.tsx

@@ -1,15 +1,44 @@
 import { isString } from 'lodash';
+import { rgba } from 'polished';
 import React, { MutableRefObject, useContext, useEffect, useRef, useState } from 'react';
 import { usePopper } from 'react-popper';
 import styled, { css } from 'styled-components';
+import { RADIUS_FROM_SIZE } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { IPopoverData } from '../../containers/PopoverProvider';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import PopoverContext from '../../context/PopoverContext';
 import { fadeIn } from '../../helpers/animations';
-import { getReadableColor } from '../../helpers/colors';
+import {
+  changeLightness,
+  getColorFromMaybeString,
+  getNotificationIntent,
+} from '../../helpers/colors';
 import { StyledBackdrop } from '../Drawer';
-import { TReqoreHexColor } from '../Effect';
+import ReqoreMessage from '../Message';
+
+const getPopoverArrowColor = ({ theme, dim, intent, flat, effect, isOpaque }) =>
+  rgba(
+    effect
+      ? changeLightness(
+          getColorFromMaybeString(
+            theme,
+            effect.gradient.borderColor || Object.values(effect.gradient.colors)[0]
+          ),
+          0.04
+        )
+      : intent
+      ? changeLightness(getNotificationIntent(theme, intent), flat ? 0.1 : 0.2)
+      : theme.popover?.main ||
+        rgba(
+          changeLightness(
+            flat ? theme.main : getNotificationIntent(theme, intent),
+            flat ? 0.1 : 0.2
+          ),
+          isOpaque ? 1 : 0.3
+        ),
+    dim ? 0.3 : 1
+  );
 
 const StyledPopoverArrow = styled.div<{ theme: IReqoreTheme }>`
   width: 10px;
@@ -20,15 +49,10 @@ const StyledPopoverArrow = styled.div<{ theme: IReqoreTheme }>`
   &:before {
     content: '';
     display: block;
-    width: 10px;
-    height: 10px;
+    width: 0;
+    height: 0;
     position: absolute;
     z-index: -1;
-    transform: rotate(45deg);
-    ${({ theme, opaque }) => css`
-      background-color: ${theme.popover?.main || theme.main};
-      box-shadow: ${opaque ? undefined : 'rgba(31, 26, 34, 0.6) 0px 0px 4px'};
-    `}
   }
 `;
 
@@ -36,40 +60,65 @@ const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
   animation: 0.2s ${fadeIn} ease-out;
   max-width: ${({ maxWidth = '80vw' }) => maxWidth};
   max-height: ${({ maxHeight = '80vh' }) => maxHeight};
+  z-index: 999999;
+  border-radius: ${RADIUS_FROM_SIZE.normal}px;
 
-  ${({ theme, opaque }) => {
-    const defaultColor: TReqoreHexColor = theme.popover?.main || theme.main;
-
-    if (opaque) {
-      return css`
-        z-index: 999999;
-        background-color: transparent;
-      `;
-    }
-
-    return css`
-      z-index: 999999;
-      background-color: ${defaultColor};
-      color: ${getReadableColor(theme, undefined, undefined, false, defaultColor)};
-      border-radius: 5.5px;
-      box-shadow: rgba(31, 26, 34, 0.6) 0px 0px 4px;
-    `;
-  }}
+  ${({ transparent }) =>
+    !transparent &&
+    css`
+      box-shadow: rgba(31, 26, 34, 0.7) 0px 0px 10px;
+    `}
 
   &[data-popper-placement^='top'] > ${StyledPopoverArrow} {
     bottom: -5px;
+
+    &:before {
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-top: 10px solid ${(props) => getPopoverArrowColor(props)};
+
+      top: 5px;
+      left: -5px;
+    }
   }
 
   &[data-popper-placement^='bottom'] > ${StyledPopoverArrow} {
     top: -5px;
+
+    &:before {
+      border-left: 10px solid transparent;
+      border-right: 10px solid transparent;
+      border-bottom: 10px solid ${(props) => getPopoverArrowColor(props)};
+
+      top: -5px;
+      left: -5px;
+    }
   }
 
   &[data-popper-placement^='left'] > ${StyledPopoverArrow} {
     right: -5px;
+
+    &:before {
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid transparent;
+      border-left: 10px solid ${(props) => getPopoverArrowColor(props)};
+
+      top: -5px;
+      left: 5px;
+    }
   }
 
   &[data-popper-placement^='right'] > ${StyledPopoverArrow} {
     left: -5px;
+
+    &:before {
+      border-top: 10px solid transparent;
+      border-bottom: 10px solid transparent;
+      border-right: 10px solid ${(props) => getPopoverArrowColor(props)};
+
+      top: -5px;
+      left: -5px;
+    }
   }
 
   &[data-popper-reference-hidden='true'] {
@@ -81,17 +130,9 @@ const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
 const StyledPopoverContent = styled.div<{ isString?: boolean }>`
   width: 100%;
   height: 100%;
-  padding: ${({ isString }) => (isString ? '8px' : '0px')};
   z-index: 20;
   position: relative;
   overflow: hidden;
-  background-color: ${({ theme, opaque }) =>
-    opaque ? 'transparent' : theme.popover?.main || theme.main};
-  border-radius: ${({ opaque }) => (opaque ? undefined : '3.5px')};
-
-  .reqore-popover-text {
-    font-size: 14px;
-  }
 `;
 
 export interface IReqoreInternalPopoverProps extends IPopoverData {}
@@ -103,10 +144,16 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
   placement,
   noArrow,
   useTargetWidth,
-  opaque,
+  transparent,
   maxWidth,
   maxHeight,
   blur,
+  intent,
+  title,
+  icon,
+  minimal,
+  flat = true,
+  effect,
 }) => {
   const { removePopover, updatePopover, uiScale } = useContext(PopoverContext);
   const [popperElement, setPopperElement] = useState(null);
@@ -165,7 +212,12 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
       <StyledPopoverWrapper
         maxWidth={maxWidth}
         maxHeight={maxHeight}
-        opaque={opaque}
+        transparent={transparent}
+        effect={effect}
+        isOpaque={!transparent && !minimal}
+        intent={intent}
+        flat={flat}
+        dim={flat && !transparent && !effect && minimal}
         className='reqore-popover-content'
         ref={(el) => {
           setPopperElement(el);
@@ -178,17 +230,23 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
         }}
         {...attributes.popper}
       >
-        {!noArrow && (
-          <StyledPopoverArrow
-            opaque={opaque}
-            ref={setArrowElement}
-            style={styles.arrow}
-            data-popper-arrow
-          />
-        )}
-        <StyledPopoverContent isString={isString(content)} opaque={opaque}>
+        {!noArrow && !transparent ? (
+          <StyledPopoverArrow ref={setArrowElement} style={styles.arrow} data-popper-arrow />
+        ) : null}
+        <StyledPopoverContent isString={isString(content)}>
           {isString(content) ? (
-            <span className='reqore-popover-text'>{content}</span>
+            <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) =>

package/src/components/Menu/divider.tsx

@@ -1,7 +1,8 @@
 import React, { forwardRef } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { PADDING_FROM_SIZE } from '../../constants/sizes';
 import { getReadableColor } from '../../helpers/colors';
+import { getOneLessSize, isStringSize } from '../../helpers/utils';
 import { IWithReqoreEffect, IWithReqoreSize } from '../../types/global';
 import { IReqoreEffect, StyledTextEffect } from '../Effect';
 
@@ -10,13 +11,29 @@ export interface IReqoreMenuDividerProps
     IWithReqoreEffect,
     IWithReqoreSize {
   label?: string;
+  margin?: 'left' | 'right' | 'both';
 }
 
-const StyledMenuDivider = styled(StyledTextEffect)`
+export const StyledMenuDivider = styled(StyledTextEffect)`
   width: 100%;
   padding: ${({ size }) => `${PADDING_FROM_SIZE[size]}px 0`};
   background-color: transparent;
 
+  ${({ margin, size }) =>
+    margin &&
+    css`
+      margin-left: ${margin === 'left' || margin === 'both'
+        ? isStringSize(size)
+          ? `${PADDING_FROM_SIZE[size]}px`
+          : '10px'
+        : undefined};
+      margin-right: ${margin === 'right' || margin === 'both'
+        ? isStringSize(size)
+          ? `${PADDING_FROM_SIZE[size]}px`
+          : '10px'
+        : undefined};
+    `}
+
   color: ${({ theme }) => getReadableColor(theme, undefined, undefined)};
 `;
 
@@ -33,7 +50,7 @@ const ReqoreMenuDivider = forwardRef<HTMLDivElement, IReqoreMenuDividerProps>(
           uppercase: true,
           spaced: 2,
           textAlign: 'center',
-          textSize: 'small',
+          textSize: getOneLessSize(size),
           weight: 'bold',
           ...effect,
         } as IReqoreEffect

package/src/components/Message/index.tsx

@@ -10,6 +10,7 @@ import {
   IWithReqoreCustomTheme,
   IWithReqoreEffect,
   IWithReqoreMinimal,
+  IWithReqoreOpaque,
   IWithReqoreSize,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
@@ -29,6 +30,7 @@ export interface IReqoreMessageProps
     IWithReqoreSize,
     IReqoreIntent,
     IWithReqoreMinimal,
+    IWithReqoreOpaque,
     React.HTMLAttributes<HTMLDivElement> {
   title?: string;
   children: any;
@@ -38,6 +40,7 @@ export interface IReqoreMessageProps
   duration?: number;
   onFinish?: () => any;
   flat?: boolean;
+  hasShadow?: boolean;
 }
 
 export interface IReqoreNotificationStyle extends IReqoreMessageProps {

package/src/components/Notifications/notification.tsx

@@ -15,7 +15,7 @@ import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { fadeIn } from '../../helpers/animations';
 import { changeLightness, getNotificationIntent, getReadableColor } from '../../helpers/colors';
-import { IWithReqoreEffect, IWithReqoreMinimal } from '../../types/global';
+import { IWithReqoreEffect, IWithReqoreMinimal, IWithReqoreOpaque } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import { StyledEffect } from '../Effect';
 import { ReqoreHeading } from '../Header';
@@ -23,7 +23,10 @@ import ReqoreIcon from '../Icon';
 
 export type IReqoreNotificationType = TReqoreIntent;
 
-export interface IReqoreNotificationProps extends IWithReqoreEffect, IWithReqoreMinimal {
+export interface IReqoreNotificationProps
+  extends IWithReqoreEffect,
+    IWithReqoreMinimal,
+    IWithReqoreOpaque {
   type?: IReqoreNotificationType;
   intent?: TReqoreIntent;
   title?: string;
@@ -38,7 +41,7 @@ export interface IReqoreNotificationProps extends IWithReqoreEffect, IWithReqore
   size?: TSizes;
 }
 
-export interface IReqoreNotificationStyle {
+export interface IReqoreNotificationStyle extends IWithReqoreOpaque {
   theme: IReqoreTheme;
   type?: IReqoreNotificationType;
   clickable?: boolean;
@@ -73,12 +76,14 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
   transition: all 0.2s ease-out;
 
   // Do not fade in the component if it's a message
-  ${({ asMessage }) =>
-    asMessage
-      ? undefined
-      : css`
-          animation: 0.2s ${fadeIn} ease-in;
-        `};
+  ${({ asMessage }) => {
+    if (asMessage) {
+      return undefined;
+    }
+    return css`
+      animation: 0.2s ${fadeIn} ease-in;
+    `;
+  }}
 
   &:not(:first-child) {
     margin-top: ${({ asMessage }) => (asMessage ? undefined : `10px`)};
@@ -93,12 +98,15 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
     hasShadow,
     flat,
     minimal,
+    opaque,
   }: IReqoreNotificationStyle) => css`
     background-color: ${minimal
       ? 'transparent'
+      : opaque
+      ? changeLightness(theme.main, 0.1)
       : rgba(getNotificationIntent(theme, intent || type), 0.3)};
     border: ${flat ? 0 : '1px solid'};
-    border-color: ${getNotificationIntent(theme, intent || type)};
+    border-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.2)};
 
     ${hasShadow &&
     css`
@@ -113,13 +121,13 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
         display: block;
         top: 0;
         height: 3px;
-        background-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.1)};
+        background-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.2)};
         animation-name: ${timeoutAnimation};
         animation-duration: ${timeout}ms;
       }
     `}
 
-    color: ${getReadableColor(theme, null, null, true, theme.originalMain)};
+    color: ${getReadableColor(theme, null, null, true, !opaque ? theme.originalMain : undefined)};
 
     ${clickable &&
     css`
@@ -129,7 +137,7 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
           getNotificationIntent(theme, intent || type),
           minimal ? 0.2 : 0.5
         )};
-        border-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.1)};
+        border-color: ${changeLightness(getNotificationIntent(theme, intent || type), 0.25)};
       }
     `}
   `}
@@ -218,6 +226,7 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
       onFinish,
       flat,
       minimal,
+      opaque,
       size = 'normal',
     },
     ref: any
@@ -273,6 +282,7 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
             ref={ref}
             style={styles}
             size={size}
+            opaque={opaque}
           >
             {type || intent || icon ? (
               <StyledIconWrapper type={type || intent} size={size}>

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 {
@@ -8,14 +8,14 @@ import {
   PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
   TEXT_FROM_SIZE,
-  TSizes,
+  TSizes
 } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import {
   changeDarkness,
   changeLightness,
   getMainBackgroundColor,
-  getReadableColor,
+  getReadableColor
 } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
@@ -26,7 +26,7 @@ import {
   IWithReqoreCustomTheme,
   IWithReqoreFlat,
   IWithReqoreSize,
-  IWithReqoreTooltip,
+  IWithReqoreTooltip
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreButton, { ButtonBadge, IReqoreButtonProps, TReqoreBadge } from '../Button';
@@ -86,6 +86,7 @@ export interface IReqorePanelProps
   contentSize?: TSizes;
   contentEffect?: IReqoreEffect;
   headerEffect?: IReqoreEffect;
+  transparent?: boolean;
 }
 
 export interface IStyledPanel extends IReqorePanelProps {
@@ -133,7 +134,7 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
               : `${rgba(
                   changeLightness(
                     intent ? theme.intents[intent] : getMainBackgroundColor(theme),
-                    0.3
+                    0.25
                   ),
                   opacity
                 )}`};
@@ -417,6 +418,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       return newContentEffect;
     }, [intent, theme, contentEffect, interactive]);
 
+    const opacity = rest.transparent ? 0 : rest.opacity;
+
     return (
       <StyledPanel
         {...rest}
@@ -430,6 +433,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         interactive={interactive}
         theme={theme}
         effect={transformedContentEffect}
+        opacity={opacity}
       >
         {hasTitleBar && (
           <StyledPanelTitle
@@ -440,8 +444,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             onClick={handleCollapseClick}
             theme={theme}
             contentSize={contentSize}
-            opacity={rest.opacity ?? (minimal ? 0 : 1)}
-            noHorizontalPadding={rest.opacity === 0}
+            opacity={opacity ?? (minimal ? 0 : 1)}
+            noHorizontalPadding={opacity === 0}
           >
             <StyledPanelTitleHeader>
               {icon && (
@@ -509,7 +513,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             padded={padded}
             minimal={minimal}
             contentSize={contentSize}
-            noHorizontalPadding={rest.opacity === 0}
+            noHorizontalPadding={opacity === 0}
           >
             {children}
           </StyledPanelContent>
@@ -519,8 +523,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             flat={flat}
             className='reqore-panel-bottom-actions'
             theme={theme}
-            opacity={rest.opacity ?? (minimal ? 0 : 1)}
-            noHorizontalPadding={rest.opacity === 0}
+            opacity={opacity ?? (minimal ? 0 : 1)}
+            noHorizontalPadding={opacity === 0}
           >
             <ReqoreControlGroup>{leftBottomActions.map(renderActions)}</ReqoreControlGroup>
             <ReqoreControlGroup>{rightBottomActions.map(renderActions)}</ReqoreControlGroup>