@qoretechnologies/reqore 0.28.4 → 0.28.6

package/src/components/Checkbox/index.tsx

@@ -1,20 +1,27 @@
 import { rgba } from 'polished';
 import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { PADDING_FROM_SIZE, SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { getReadableColor } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useTooltip } from '../../hooks/useTooltip';
 import { DisabledElement, ReadOnlyElement } from '../../styles';
-import { IReqoreDisabled, IReqoreReadOnly, TReqoreTooltipProp } from '../../types/global';
+import {
+  IReqoreDisabled,
+  IReqoreReadOnly,
+  IWithReqoreEffect,
+  TReqoreTooltipProp,
+} from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
+import { ReqoreTextEffect } from '../Effect';
 import ReqoreIcon from '../Icon';
 
 export interface IReqoreCheckboxProps
   extends React.HTMLAttributes<HTMLDivElement>,
     IReqoreDisabled,
-    IReqoreReadOnly {
+    IReqoreReadOnly,
+    IWithReqoreEffect {
   label?: string;
   labelDetail?: any;
   labelDetailPosition?: 'left' | 'right';
@@ -27,12 +34,35 @@ export interface IReqoreCheckboxProps
   asSwitch?: boolean;
   uncheckedIcon?: IReqoreIconName;
   checkedIcon?: IReqoreIconName;
+  image?: string;
 }
 
 export interface IReqoreCheckboxStyle extends IReqoreCheckboxProps {
   theme: IReqoreTheme;
 }
 
+const StyledSwitchToggle = styled.div`
+  transition: all 0.2s ease-in-out;
+  content: '';
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  height: ${({ size }) => SIZE_TO_PX[size] - 13}px;
+  width: ${({ size }) => SIZE_TO_PX[size] - 13}px;
+  top: 50%;
+  transform: translateY(-50%);
+  left: ${({ checked, size }) =>
+    !checked ? '5px' : `${SIZE_TO_PX[size] * 1.8 - (SIZE_TO_PX[size] - 7)}px`};
+  border-radius: 100%;
+  background-color: ${({ theme, checked, transparent }) =>
+    transparent
+      ? 'transparent'
+      : !checked
+      ? rgba(getReadableColor(theme, undefined, undefined), 0.2)
+      : getReadableColor(theme, undefined, undefined)};
+`;
+
 const StyledSwitch = styled.div<IReqoreCheckboxStyle>`
   transition: all 0.2s ease-out;
   position: relative;
@@ -42,32 +72,14 @@ const StyledSwitch = styled.div<IReqoreCheckboxStyle>`
 
   border: 1px solid
     ${({ theme, checked }) =>
-      rgba(getReadableColor(theme, undefined, undefined), checked ? 0.6 : 0.3)};
+      rgba(getReadableColor(theme, undefined, undefined), checked ? 0.8 : 0.2)};
   border-radius: 50px;
 
-  margin-right: ${({ labelPosition }) => labelPosition === 'right' && '8px'};
-  margin-left: ${({ labelPosition }) => labelPosition === 'left' && '8px'};
+  margin-right: ${({ size }) => PADDING_FROM_SIZE[size]}px;
+  margin-left: ${({ size }) => PADDING_FROM_SIZE[size]}px;
 
   background-color: ${({ theme, checked }) =>
-    checked ? rgba(getReadableColor(theme, undefined, undefined), 0.2) : 'transparent'};
-
-  &::before {
-    transition: all 0.2s ease-in-out;
-    content: '';
-    display: block;
-    position: absolute;
-    height: ${({ size }) => SIZE_TO_PX[size] - 13}px;
-    width: ${({ size }) => SIZE_TO_PX[size] - 13}px;
-    top: 50%;
-    transform: translateY(-50%);
-    left: ${({ checked, size }) =>
-      !checked ? '5px' : `${SIZE_TO_PX[size] * 1.8 - (SIZE_TO_PX[size] - 7)}px`};
-    border-radius: 100%;
-    background-color: ${({ theme, checked }) =>
-      !checked
-        ? rgba(getReadableColor(theme, undefined, undefined), 0.2)
-        : getReadableColor(theme, undefined, undefined)};
-  }
+    checked ? rgba(getReadableColor(theme, undefined, undefined), 0.1) : 'transparent'};
 `;
 
 const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
@@ -122,6 +134,8 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
       uncheckedIcon = 'CheckboxBlankCircleLine',
       checkedIcon = 'CheckboxCircleFill',
       readOnly,
+      effect,
+      image,
       ...rest
     }: IReqoreCheckboxProps,
     ref
@@ -143,23 +157,37 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
         {label && labelPosition === 'left' ? (
           <>
             {labelDetailPosition === 'left' && labelDetail}
-            <span>{label}</span>
+            <ReqoreTextEffect
+              effect={{ ...effect, interactive: !disabled && !readOnly && !checked }}
+            >
+              {label}
+            </ReqoreTextEffect>
             {labelDetailPosition === 'right' && labelDetail}
           </>
         ) : null}
         {asSwitch ? (
-          <StyledSwitch size={size} labelPosition={labelPosition} checked={checked} />
+          <StyledSwitch size={size} labelPosition={labelPosition} checked={checked}>
+            <StyledSwitchToggle size={size} checked={checked} transparent={!!image}>
+              {image ? <ReqoreIcon size={size} image={image} grayscale={!checked} /> : null}
+            </StyledSwitchToggle>
+          </StyledSwitch>
         ) : (
           <ReqoreIcon
             size={size}
-            icon={checked ? checkedIcon : uncheckedIcon}
-            margin={labelPosition}
+            icon={!image ? (checked ? checkedIcon : uncheckedIcon) : undefined}
+            image={image}
+            grayscale={image ? !checked : undefined}
+            margin='both'
           />
         )}
         {label && labelPosition === 'right' ? (
           <>
             {labelDetailPosition === 'left' && labelDetail}
-            <span>{label}</span>
+            <ReqoreTextEffect
+              effect={{ ...effect, interactive: !disabled && !readOnly && !checked }}
+            >
+              {label}
+            </ReqoreTextEffect>
             {labelDetailPosition === 'right' && labelDetail}
           </>
         ) : null}

package/src/components/ControlGroup/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
-import { RADIUS_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { GAP_FROM_SIZE, RADIUS_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 
 export interface IReqoreControlGroupProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -10,6 +10,7 @@ export interface IReqoreControlGroupProps extends React.HTMLAttributes<HTMLDivEl
   children: any;
   fluid?: boolean;
   rounded?: boolean;
+  gapSize?: TSizes;
   /*
    * Whether the contents of the control group should be stacked vertically
    */
@@ -39,7 +40,8 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
           > .reqore-tag,
           > * {
             &:not(:last-child) {
-              margin-bottom: ${({ stack }) => (!stack ? '5px' : undefined)};
+              margin-bottom: ${({ stack, gapSize }) =>
+                !stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined};
               border-bottom: ${({ stack }) => (!stack ? undefined : 0)};
             }
 
@@ -61,7 +63,8 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
           }
 
           > .reqore-control-wrapper:not(:last-child) .reqore-control {
-            margin-bottom: ${({ stack }) => (!stack ? '5px' : undefined)};
+            margin-bottom: ${({ stack, gapSize }) =>
+              !stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined};
             border-bottom: ${({ stack }) => (!stack ? undefined : 0)};
           }
         `
@@ -71,7 +74,8 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
           > .reqore-tag,
           > * {
             &:not(:last-child) {
-              margin-right: ${({ stack }) => (!stack ? '5px' : undefined)};
+              margin-right: ${({ stack, gapSize }) =>
+                !stack ? `${GAP_FROM_SIZE[gapSize]}px` : undefined};
               border-right: ${({ stack }) => (!stack ? undefined : 0)};
             }
 
@@ -99,6 +103,7 @@ const ReqoreControlGroup = ({
   className,
   minimal,
   size = 'normal',
+  gapSize = 'normal',
   fluid,
   rounded = true,
   ...rest
@@ -106,6 +111,7 @@ const ReqoreControlGroup = ({
   <StyledReqoreControlGroup
     {...rest}
     size={size}
+    gapSize={gapSize}
     rounded={rounded}
     fluid={fluid}
     className={`${className || ''} reqore-control-group`}

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 {