@qoretechnologies/reqore 0.28.6 → 0.29.1

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,12 +1,15 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 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;
@@ -98,37 +101,45 @@ export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
         `}
 `;
 
-const ReqoreControlGroup = ({
-  children,
-  className,
-  minimal,
-  size = 'normal',
-  gapSize = 'normal',
-  fluid,
-  rounded = true,
-  ...rest
-}: IReqoreControlGroupProps) => (
-  <StyledReqoreControlGroup
-    {...rest}
-    size={size}
-    gapSize={gapSize}
-    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';
@@ -53,6 +54,8 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
   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}
@@ -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;
@@ -28,7 +30,18 @@ export type TReqoreEffectColorList = [
   TReqoreEffectColorManipulationMultiplier | undefined
 ];
 
-export interface IReqoreEffect {
+export interface IReqoreEffectFilters {
+  grayscale?: boolean;
+  blur?: number;
+  sepia?: boolean;
+  invert?: boolean;
+  opacity?: number;
+  brightness?: number;
+  contrast?: number;
+  saturate?: number;
+}
+
+export interface IReqoreEffect extends IReqoreEffectFilters {
   gradient?: {
     type?: 'linear' | 'radial';
     shape?: 'circle' | 'ellipse';
@@ -53,83 +66,92 @@ 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;
+  isText?: boolean;
 }
 
 export const StyledEffect = styled.span`
   transition: all 0.2s ease-in-out;
 
   // If gradient was supplied
-  ${({ effect, theme }: IReqoreTextEffectProps) => {
+  ${({ effect, theme, minimal, active, isText }: 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,
+      !isText && 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 if (!isText) {
+      // 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 +161,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 +181,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)};
     `;
   }}
@@ -224,16 +243,65 @@ export const StyledEffect = styled.span`
           text-align: ${effect.textAlign};
         `
       : undefined}
+
+  ${({ effect }) =>
+    effect &&
+    effect.grayscale &&
+    css`
+      filter: grayscale(100%);
+    `};
+  ${({ effect }) =>
+    effect &&
+    effect.blur &&
+    css`
+      filter: blur(${effect.blur}px);
+    `};
+  ${({ effect }) =>
+    effect &&
+    effect.sepia &&
+    css`
+      filter: sepia(100%);
+    `};
+  ${({ effect }) =>
+    effect &&
+    effect.invert &&
+    css`
+      filter: invert(100%);
+    `};
+  ${({ effect }) =>
+    effect && (effect.opacity || effect.opacity === 0)
+      ? css`
+          opacity: ${effect.opacity};
+        `
+      : undefined};
+  ${({ effect }) =>
+    effect &&
+    effect.brightness &&
+    css`
+      filter: brightness(${effect.brightness}%);
+    `};
+  ${({ effect }) =>
+    effect &&
+    effect.contrast &&
+    css`
+      filter: contrast(${effect.contrast}%);
+    `};
+  ${({ effect }) =>
+    effect &&
+    effect.saturate &&
+    css`
+      filter: saturate(${effect.saturate}%);
+    `};
 `;
 
-export const StyledTextEffect = styled(StyledEffect)`
+export const StyledTextEffect = styled(StyledEffect).attrs((props) => ({ ...props, isText: true }))`
   display: inline-block;
 
   ${({ effect }: IReqoreTextEffectProps) =>
     effect && effect.gradient
       ? css`
-          -webkit-background-clip: text;
-          -webkit-text-fill-color: transparent;
+          -webkit-background-clip: text !important;
+          -webkit-text-fill-color: transparent !important;
         `
       : undefined}
 `;

package/src/components/Icon/index.tsx

@@ -7,9 +7,11 @@ import { ReqoreThemeContext } from '../..';
 import { ICON_FROM_SIZE, PADDING_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { TReqoreIntent } from '../../constants/theme';
 import { isStringSize } from '../../helpers/utils';
+import { IWithReqoreEffect } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
+import { StyledEffect } from '../Effect';
 
-export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement>, IWithReqoreEffect {
   icon?: IReqoreIconName;
   color?: string;
   size?: TSizes | string;
@@ -18,17 +20,9 @@ export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement>
   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' }>`
+export const StyledIconWrapper = styled(StyledEffect)<{ margin: 'right' | 'left' | 'both' }>`
   display: inline-block;
   flex: 0 0 auto;
   vertical-align: text-bottom;
@@ -37,48 +31,6 @@ export const StyledIconWrapper = styled.span<{ margin: 'right' | 'left' | 'both'
 
   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 &&
     css`

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

@@ -62,6 +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};
 
   ${({ transparent }) =>
     !transparent &&
@@ -165,7 +167,7 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
       {
         name: 'offset',
         options: {
-          offset: [0, noArrow ? -1 : 10],
+          offset: [0, noArrow ? 5 : 10],
         },
       },
       {
@@ -188,10 +190,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
@@ -217,6 +219,7 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
         isOpaque={!transparent && !minimal}
         intent={intent}
         flat={flat}
+        isString={isString(content)}
         dim={flat && !transparent && !effect && minimal}
         className='reqore-popover-content'
         ref={(el) => {