@qoretechnologies/reqore 0.28.5 → 0.29.0

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/Collection/item.tsx

@@ -170,7 +170,7 @@ export const ReqoreCollectionItem = ({
         setIsSelected(!isSelected);
       }
 
-      rest?.onClick?.(event);
+      rest.onClick?.(event);
     };
 
     const actualContent: string | React.ReactNode =
@@ -239,5 +239,5 @@ export const ReqoreCollectionItem = ({
     );
   };
 
-  return isSelected ? renderContent() : renderContent();
+  return renderContent();
 };

package/src/components/ControlGroup/index.tsx

@@ -1,15 +1,19 @@
-import React from 'react';
+import React, { forwardRef } 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';
+import { IWithReqoreFlat, IWithReqoreMinimal, IWithReqoreSize } from '../../types/global';
 
-export interface IReqoreControlGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IReqoreControlGroupProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    IWithReqoreFlat,
+    IWithReqoreSize,
+    IWithReqoreMinimal {
   stack?: boolean;
-  minimal?: boolean;
-  size?: TSizes;
   children: any;
   fluid?: boolean;
   rounded?: boolean;
+  gapSize?: TSizes;
   /*
    * Whether the contents of the control group should be stacked vertically
    */
@@ -39,7 +43,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 +66,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 +77,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)};
             }
 
@@ -94,35 +101,45 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
         `}
 `;
 
-const ReqoreControlGroup = ({
-  children,
-  className,
-  minimal,
-  size = 'normal',
-  fluid,
-  rounded = true,
-  ...rest
-}: IReqoreControlGroupProps) => (
-  <StyledReqoreControlGroup
-    {...rest}
-    size={size}
-    rounded={rounded}
-    fluid={fluid}
-    className={`${className || ''} reqore-control-group`}
-  >
-    {React.Children.map(children, (child) =>
-      child
-        ? React.cloneElement(child, {
-            minimal:
-              child.props?.minimal || child.props?.minimal === false
-                ? child.props.minimal
-                : minimal,
-            size: child.props?.size || size,
-            fluid,
-          })
-        : null
-    )}
-  </StyledReqoreControlGroup>
+const ReqoreControlGroup = forwardRef<HTMLDivElement, IReqoreControlGroupProps>(
+  (
+    {
+      children,
+      className,
+      minimal,
+      size = 'normal',
+      gapSize = 'normal',
+      fluid,
+      flat,
+      rounded = true,
+      ...rest
+    }: IReqoreControlGroupProps,
+    ref
+  ) => (
+    <StyledReqoreControlGroup
+      {...rest}
+      size={size}
+      gapSize={gapSize}
+      ref={ref}
+      rounded={rounded}
+      fluid={fluid}
+      className={`${className || ''} reqore-control-group`}
+    >
+      {React.Children.map(children, (child) =>
+        child
+          ? React.cloneElement(child, {
+              minimal:
+                child.props?.minimal || child.props?.minimal === false
+                  ? child.props.minimal
+                  : minimal,
+              size: child.props?.size || size,
+              flat: child.props?.flat || child.props?.flat === false ? child.props.flat : flat,
+              fluid,
+            })
+          : null
+      )}
+    </StyledReqoreControlGroup>
+  )
 );
 
 export default ReqoreControlGroup;

package/src/components/Dropdown/index.tsx

@@ -16,6 +16,7 @@ export interface IReqoreDropdownProps extends Partial<IPopoverOptions> {
   label?: any;
   children?: any;
   listWidth?: string;
+  listHeight?: string;
   icon?: IReqoreIconName;
   rightIcon?: IReqoreIconName;
   caretPosition?: 'left' | 'right';
@@ -47,12 +48,14 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
   maxHeight,
   maxWidth,
   noArrow = true,
-  opaque,
+  transparent,
   openOnMount,
   show,
   targetElement,
   useTargetWidth,
   listWidth,
+  listHeight,
+  passPopoverData,
   ...rest
 }: IReqoreDropdownProps & T) {
   const componentProps = useMemo(
@@ -74,6 +77,7 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
         multiSelect={multiSelect}
         listStyle={listStyle}
         width={useTargetWidth ? '100%' : listWidth}
+        height={listHeight}
         items={items}
         filterable={filterable}
         onItemSelect={onItemSelect}
@@ -90,7 +94,7 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
       maxHeight={maxHeight}
       maxWidth={maxWidth}
       noArrow={noArrow}
-      opaque={opaque}
+      transparent={transparent}
       useTargetWidth={useTargetWidth}
       component={component || ReqoreButton}
       componentProps={componentProps}
@@ -99,6 +103,7 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
       handler={handler || 'click'}
       openOnMount={isDefaultOpen}
       content={popoverContent}
+      passPopoverData={passPopoverData}
     >
       {children || label}
     </ReqorePopover>

package/src/components/Dropdown/list.tsx

@@ -2,18 +2,23 @@ import React, { memo, useEffect, useMemo, useState } from 'react';
 import { IReqoreComponent } from '../../types/global';
 import ReqoreInput from '../Input';
 import ReqoreMenu from '../Menu';
+import ReqoreMenuDivider from '../Menu/divider';
 import ReqoreMenuItem, { IReqoreMenuItemProps } from '../Menu/item';
 
 export type TDropdownItemOnClick = (item: IReqoreDropdownItem) => void;
 export interface IReqoreDropdownItem
   extends Omit<IReqoreMenuItemProps, 'onClick' | 'rightIcon' | 'onRightIconClick'> {
-  value: any;
-  label?: string;
+  value?: any;
   onClick?: TDropdownItemOnClick;
+  divider?: boolean;
+  dividerAlign?: 'left' | 'center' | 'right';
 }
 
+export type TReqoreDropdownItem = IReqoreDropdownItem;
+export type TReqoreDropdownItems = TReqoreDropdownItem[];
+
 export interface IReqoreDropdownListProps extends IReqoreComponent {
-  items?: IReqoreDropdownItem[];
+  items?: TReqoreDropdownItems;
   multiSelect?: boolean;
   listStyle?: React.CSSProperties;
   width?: string;
@@ -33,20 +38,24 @@ const ReqoreDropdownList = memo(
     height,
     onItemSelect,
   }: IReqoreDropdownListProps) => {
-    const [_items, setItems] = useState<IReqoreDropdownItem[]>(items);
+    const [_items, setItems] = useState<TReqoreDropdownItems>(items);
     const [query, setQuery] = useState<string>('');
 
     useEffect(() => {
       setItems(items);
     }, [items]);
 
-    const filteredItems: IReqoreDropdownItem[] = useMemo(() => {
+    const filteredItems: TReqoreDropdownItems = useMemo(() => {
       if (!filterable || query === '') {
         return _items;
       }
 
       return _items.filter((item) => {
-        const text = item.label || item.value || item.children;
+        if (item.divider) {
+          return false;
+        }
+
+        const text: string | undefined = item.label || item.value || item.children;
 
         if (!text) {
           return false;
@@ -88,15 +97,20 @@ const ReqoreDropdownList = memo(
             />
           </>
         )}
-        {filteredItems.map((item: IReqoreDropdownItem, index: number) => (
-          <ReqoreMenuItem
-            key={index}
-            {...item}
-            label={item.label || item.value}
-            onClick={() => handleItemClick(item)}
-            rightIcon={item.selected ? 'CheckLine' : undefined}
-          />
-        ))}
+        {filteredItems.map(
+          ({ onClick, dividerAlign, divider, ...item }: IReqoreDropdownItem, index: number) =>
+            divider ? (
+              <ReqoreMenuDivider key={index} {...item} align={dividerAlign} />
+            ) : (
+              <ReqoreMenuItem
+                key={index}
+                {...item}
+                label={item.label || item.value}
+                onClick={() => handleItemClick({ ...item, onClick })}
+                rightIcon={item.selected ? 'CheckLine' : undefined}
+              />
+            )
+        )}
       </ReqoreMenu>
     );
   }

package/src/components/Effect/index.tsx

@@ -1,14 +1,16 @@
-import { reduce } from 'lodash';
-import { mix } from 'polished';
+import { rgba } from 'polished';
 import { HTMLAttributes } from 'react';
 import styled, { css } from 'styled-components';
 import { TEXT_FROM_SIZE, TSizes, WEIGHT_TO_NUMBER } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import {
   changeLightness,
+  createEffectGradient,
   getColorFromMaybeString,
+  getGradientMix,
   getReadableColorFrom,
 } from '../../helpers/colors';
+import { IWithReqoreMinimal } from '../../types/global';
 
 export type TReqoreEffectColorManipulation = 'darken' | 'lighten';
 export type TReqoreEffectColorManipulationMultiplier = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
@@ -53,83 +55,91 @@ export interface IReqoreEffect {
   interactive?: boolean;
 }
 
-export interface IReqoreTextEffectProps extends HTMLAttributes<HTMLSpanElement> {
+export interface IReqoreTextEffectProps
+  extends HTMLAttributes<HTMLSpanElement>,
+    IWithReqoreMinimal {
   children: React.ReactNode;
   effect: IReqoreEffect;
   as?: React.ElementType;
   theme?: IReqoreTheme;
+  active?: boolean;
 }
 
 export const StyledEffect = styled.span`
   transition: all 0.2s ease-in-out;
 
   // If gradient was supplied
-  ${({ effect, theme }: IReqoreTextEffectProps) => {
+  ${({ effect, theme, minimal, active }: IReqoreTextEffectProps) => {
     if (!effect || !effect.gradient) {
       return undefined;
     }
 
     const gradientType: string = effect.gradient.type || 'linear';
-    const gradientColors = reduce(
-      effect.gradient.colors,
-      (colorsString, color, percentage) =>
-        `${colorsString}, ${
-          color === 'transparent' || !effect.interactive
-            ? getColorFromMaybeString(theme, color)
-            : changeLightness(getColorFromMaybeString(theme, color), 0.03)
-        } ${percentage}%`,
-      ''
-    );
-    const gradientColorsActive = reduce(
+    const gradientColors = createEffectGradient(
+      theme,
       effect.gradient.colors,
-      (colorsString, color, percentage) =>
-        `${colorsString}, ${getColorFromMaybeString(theme, color)} ${percentage}%`,
-      ''
+      0,
+      minimal && !active
     );
+    const gradientColorsActive = createEffectGradient(theme, effect.gradient.colors, 0.05);
 
     const gradientDirectionOrShape =
       gradientType === 'linear'
         ? effect.gradient.direction || 'to right'
         : effect.gradient.shape || 'circle';
-    const gradient = `${gradientType}-gradient(${gradientDirectionOrShape}${gradientColors})`;
-    const gradientActive = `${gradientType}-gradient(${gradientDirectionOrShape}${gradientColorsActive})`;
+    let gradient = `${gradientType}-gradient(${gradientDirectionOrShape}${gradientColors}) padding-box`;
+    let gradientActive = `${gradientType}-gradient(${gradientDirectionOrShape}${gradientColorsActive}) padding-box`;
 
     // Determine the text color based on the gradient colors
     let color: TReqoreHexColor | undefined;
     // Only works if there are 2 colors not more and color was not provided
     if (!effect.color) {
-      if (Object.keys(effect.gradient.colors).length === 2) {
-        const gradientColor1: TReqoreHexColor = getColorFromMaybeString(
-          theme,
-          Object.values(effect.gradient.colors)[0]
-        );
-        const gradientColor2: TReqoreHexColor = getColorFromMaybeString(
-          theme,
-          Object.values(effect.gradient.colors)[1]
-        );
-
-        color = mix(
-          0.5,
-          gradientColor1 === '#00000000' ? theme.main : gradientColor1,
-          gradientColor2 === '#00000000' ? theme.main : gradientColor2
-        ) as TReqoreHexColor;
-      }
+      color = getGradientMix(theme, effect.gradient.colors);
+    }
+
+    let borderColor: string;
+    let borderHoverColor: string;
+
+    // The user provided a border color - we will use that
+    if (effect.gradient.borderColor) {
+      borderColor = `${getColorFromMaybeString(theme, effect.gradient.borderColor)}`;
+      borderHoverColor = `${changeLightness(
+        getColorFromMaybeString(theme, effect.gradient.borderColor),
+        0.15
+      )}`;
+    } else {
+      // We will use border-image and create a gradient border
+      borderColor = 'transparent';
+      borderHoverColor = 'transparent';
+
+      const borderGradientColors: string = createEffectGradient(
+        theme,
+        effect.gradient.colors,
+        0.15
+      );
+      const borderGradientColorsActive: string = createEffectGradient(
+        theme,
+        effect.gradient.colors,
+        0.25
+      );
+
+      gradient = `${gradient}, ${gradientType}-gradient(${gradientDirectionOrShape}${borderGradientColors}) border-box`;
+      gradientActive = `${gradientActive}, ${gradientType}-gradient(${gradientDirectionOrShape}${borderGradientColorsActive}) border-box`;
     }
 
     return css`
-      background-image: ${gradient};
-      // Get the first color from the colors object
-      border-color: ${changeLightness(
-        getColorFromMaybeString(
-          theme,
-          effect.gradient.borderColor || Object.values(effect.gradient.colors)[0]
-        ),
-        0.04
-      )} !important;
+      background: ${active ? gradientActive : gradient};
+      border-color: ${borderColor} !important;
 
       ${color &&
       css`
         color: ${getReadableColorFrom(getColorFromMaybeString(theme, color), false)} !important;
+        &::placeholder {
+          color: ${rgba(
+            getReadableColorFrom(getColorFromMaybeString(theme, color), false),
+            0.7
+          )} !important;
+        }
       `}
 
       ${effect.interactive &&
@@ -139,11 +149,8 @@ export const StyledEffect = styled.span`
         &:hover,
         &:focus,
         &:active {
-          background-image: ${gradientActive};
-          border-color: ${getColorFromMaybeString(
-            theme,
-            effect.gradient.borderColor || Object.values(effect.gradient.colors)[0]
-          )} !important;
+          background: ${gradientActive};
+          border-color: ${borderHoverColor} !important;
         }
       `}
     `;
@@ -162,7 +169,7 @@ export const StyledEffect = styled.span`
     }
 
     return css`
-      box-shadow: ${effect.glow.inset ? 'inset ' : ''} 0 0 ${effect.glow.blur || 0}
+      box-shadow: ${effect.glow.inset ? 'inset ' : ''} 0 0 ${effect.glow.blur || 0}px
         ${effect.glow.size || 2}px ${getColorFromMaybeString(theme, effect.glow.color)};
     `;
   }}