@qoretechnologies/reqore 0.28.5 → 0.29.0

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/Input/index.tsx

@@ -90,9 +90,9 @@ export const StyledInput = styled(StyledEffect)<IReqoreInputStyle>`
   border-radius: ${({ minimal, rounded, _size }) =>
     minimal || !rounded ? 0 : RADIUS_FROM_SIZE[_size]}px;
   border: ${({ minimal, theme, flat }) =>
-    !minimal && !flat ? `1px solid ${changeLightness(theme.main, 0.05)}` : 0};
+    !minimal && !flat ? `1px solid ${changeLightness(theme.main, 0.2)}` : 0};
   border-bottom: ${({ minimal, theme, flat }) =>
-    minimal && !flat ? `0.5px solid ${changeLightness(theme.main, 0.05)}` : undefined};
+    minimal && !flat ? `0.5px solid ${changeLightness(theme.main, 0.2)}` : undefined};
 
   ${({ disabled, readOnly }) =>
     !disabled && !readOnly
@@ -101,7 +101,7 @@ export const StyledInput = styled(StyledEffect)<IReqoreInputStyle>`
           &:focus,
           &:hover {
             outline: none;
-            border-color: ${({ theme }) => changeLightness(theme.main, 0.1)};
+            border-color: ${({ theme }) => changeLightness(theme.main, 0.25)};
           }
         `
       : undefined}

package/src/components/InputClearButton/index.tsx

@@ -25,6 +25,7 @@ const ReqoreInputClearButton = ({
       className='reqore-clear-input-button'
       icon='CloseLine'
       minimal
+      flat
       tabIndex={show ? 1 : -1}
       size={size}
       show={show}

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);
@@ -118,7 +165,7 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
       {
         name: 'offset',
         options: {
-          offset: [0, noArrow ? -1 : 10],
+          offset: [0, noArrow ? 5 : 10],
         },
       },
       {
@@ -141,10 +188,10 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
   }, [popperRef]);
 
   useEffect(() => {
-    if (attributes?.popper?.['data-popper-reference-hidden']) {
+    if (attributes.popper?.['data-popper-reference-hidden']) {
       removePopover?.(id);
     }
-  }, [attributes?.popper]);
+  }, [attributes.popper]);
 
   /* Getting the x and y values from the transform property of the popper element. */
   const translateValues = styles.popper.transform
@@ -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,27 +1,55 @@
 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';
 
 export interface IReqoreMenuDividerProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,
     IWithReqoreEffect,
     IWithReqoreSize {
-  label?: string;
+  label?: string | number;
+  margin?: 'left' | 'right' | 'both';
+  align?: 'left' | 'center' | 'right';
 }
 
-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)};
 `;
 
 const ReqoreMenuDivider = forwardRef<HTMLDivElement, IReqoreMenuDividerProps>(
-  ({ label, className, effect, size = 'normal', ...rest }: IReqoreMenuDividerProps, ref: any) => (
+  (
+    {
+      label,
+      className,
+      effect,
+      size = 'normal',
+      align = 'center',
+      ...rest
+    }: IReqoreMenuDividerProps,
+    ref: any
+  ) => (
     <StyledMenuDivider
       as='div'
       {...rest}
@@ -32,8 +60,8 @@ const ReqoreMenuDivider = forwardRef<HTMLDivElement, IReqoreMenuDividerProps>(
         {
           uppercase: true,
           spaced: 2,
-          textAlign: 'center',
-          textSize: 'small',
+          textAlign: align,
+          textSize: getOneLessSize(size),
           weight: 'bold',
           ...effect,
         } as IReqoreEffect

package/src/components/Menu/index.tsx

@@ -81,10 +81,10 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
                 React.cloneElement(child, {
                   _insidePopover,
                   _popoverId,
-                  customTheme: child?.props.customTheme || theme,
+                  customTheme: child.props?.customTheme || theme,
                   wrap: wrapText,
-                  flat: 'flat' in child?.props ? child.props.flat : flat,
-                  minimal: 'minimal' in child?.props ? child.props.minimal : minimal,
+                  flat: 'flat' in (child.props || {}) ? child.props.flat : flat,
+                  minimal: 'minimal' in (child.props || {}) ? child.props.minimal : minimal,
                 })
               : null;
           })}

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 {