@qoretechnologies/reqore 0.28.5 → 0.29.0

package/src/components/Tag/group.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import styled from 'styled-components';
 import { StyledTag } from '.';
-import { TSizes } from '../../constants/sizes';
+import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { IWithReqoreMinimal, IWithReqoreSize } from '../../types/global';
 
-export interface IReqoreTagGroup extends React.HTMLAttributes<HTMLDivElement> {
+export interface IReqoreTagGroup
+  extends React.HTMLAttributes<HTMLDivElement>,
+    IWithReqoreSize,
+    IWithReqoreMinimal {
   children: any;
-  size?: TSizes;
+  gapSize?: TSizes;
   columns?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
   hasBottomMargin?: boolean;
 }
@@ -15,7 +19,7 @@ const StyledTagGroup = styled.div`
 
   ${StyledTag} {
     &:not(:last-child) {
-      margin-right: 5px;
+      margin-right: ${({ gapSize }: IReqoreTagGroup) => `${GAP_FROM_SIZE[gapSize]}px`};
     }
 
     margin-bottom: ${({ hasBottomMargin }) => (hasBottomMargin ? '5px' : '0px')};
@@ -25,6 +29,8 @@ const StyledTagGroup = styled.div`
 const ReqoreTagGroup = ({
   children,
   size,
+  gapSize = 'normal',
+  minimal,
   className,
   columns,
   hasBottomMargin = true,
@@ -32,6 +38,7 @@ const ReqoreTagGroup = ({
 }: IReqoreTagGroup) => (
   <StyledTagGroup
     {...rest}
+    gapSize={gapSize}
     hasBottomMargin={hasBottomMargin}
     className={`${className || ''} reqore-tag-group`}
   >
@@ -40,6 +47,10 @@ const ReqoreTagGroup = ({
         ? React.cloneElement(child, {
             size: child.props?.size || size,
             width: columns ? `calc(${100 / columns}% - 5px)` : child.props.width,
+            minimal:
+              child.props?.minimal || child.props?.minimal === false
+                ? child.props.minimal
+                : minimal,
           })
         : null
     )}

package/src/components/Tag/index.tsx

@@ -265,7 +265,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
           <StyledTagKeyWrapper
             size={size}
             className='reqore-tag-key-content'
-            onClick={onClick}
+            onClick={rest.disabled ? undefined : onClick}
             wrap={wrap}
             hasWidth={!!width}
             hasKey={!!labelKey}
@@ -282,13 +282,13 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
           <StyledTagContentWrapper
             size={size}
             className='reqore-tag-content'
-            onClick={onClick}
+            onClick={rest.disabled ? undefined : onClick}
             wrap={wrap}
             hasWidth={!!width}
             hasKey={!!labelKey}
           >
             {label || label === 0 ? (
-              <StyledTagContent size={size} onClick={onClick} wrap={wrap} hasWidth={!!width}>
+              <StyledTagContent size={size} wrap={wrap} hasWidth={!!width}>
                 {label}
               </StyledTagContent>
             ) : null}
@@ -302,8 +302,8 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
           </StyledTagContentWrapper>
         ) : null}
         {_size(actions)
-          ? actions.map((action) => (
-              <>
+          ? actions.map((action, index) => (
+              <React.Fragment key={index}>
                 <ReqorePopover
                   component={StyledButtonWrapper}
                   componentProps={{
@@ -316,13 +316,13 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
                   {...(action.tooltip
                     ? typeof action.tooltip === 'string'
                       ? { tooltip: action.tooltip }
-                      : action.tooltip || {}
+                      : action.tooltip
                     : {})}
                   noWrapper
                 >
                   <ReqoreIcon icon={action.icon} size={size} />
                 </ReqorePopover>
-              </>
+              </React.Fragment>
             ))
           : null}
         {onRemoveClick && !rest.disabled ? (

package/src/components/Tree/index.tsx

@@ -106,9 +106,9 @@ export const ReqoreTree = ({
             <ReqoreControlGroup size={size}>
               <ReqoreButton
                 className='reqore-tree-toggle'
-                icon={isObject ? (isExpandable ? 'ArrowDownSFill' : 'ArrowRightSFill') : undefined}
-                intent={isObject && isExpandable ? 'info' : undefined}
-                onClick={isObject ? () => handleItemClick(stateKey, isExpandable) : undefined}
+                icon={isExpandable ? 'ArrowDownSFill' : 'ArrowRightSFill'}
+                intent={isExpandable ? 'info' : undefined}
+                onClick={() => handleItemClick(stateKey, isExpandable)}
                 flat
               >
                 {displayKey}

package/src/constants/sizes.ts

@@ -107,6 +107,14 @@ export const RADIUS_FROM_SIZE = {
   huge: 9,
 };
 
+export const GAP_FROM_SIZE = {
+  tiny: 1,
+  small: 3,
+  normal: 5,
+  big: 18,
+  huge: 30,
+};
+
 export const ICON_FROM_HEADER_SIZE = {
   1: 23,
   2: 20,

package/src/containers/PopoverProvider.tsx

@@ -3,6 +3,7 @@ import React, { MutableRefObject, useCallback, useEffect, useState } from 'react
 import Popover from '../components/InternalPopover';
 import PopoverContext from '../context/PopoverContext';
 import { IPopoverOptions } from '../hooks/usePopover';
+import { useReqore } from '../hooks/useReqore';
 
 export interface IReqorePopoverProviderProps {
   children: any;
@@ -16,6 +17,7 @@ export interface IPopoverData extends IPopoverOptions {
 
 const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiScale }) => {
   const [popovers, setPopovers] = useState<IPopoverData[]>([]);
+  const { closePopoversOnEscPress } = useReqore();
 
   const handleClick = useCallback(
     (event: MouseEvent) => {
@@ -27,8 +29,6 @@ const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiSc
             !popperRef.current.contains(event.target) &&
             !targetElement?.contains(event.target as Node))
         ) {
-          targetElement.style.position = 'initial';
-          targetElement.style.zIndex = 'initial';
           removePopover(id);
         }
       });
@@ -36,21 +36,52 @@ const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiSc
     [popovers]
   );
 
+  // Close last popover when ESC is pressed
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        const lastPopover = popovers[popovers.length - 1];
+
+        if (lastPopover) {
+          removePopover(lastPopover.id);
+        }
+      }
+    },
+    [popovers]
+  );
+
   const removePopover = (id: string) => {
-    setPopovers((cur: IPopoverData[]) => [...cur].filter((p) => p.id !== id));
+    // Get the popover
+    const popover = popovers.find((p) => p.id === id);
+
+    if (popover) {
+      // Remove the blur
+      if (popover.blur > 0) {
+        popover.targetElement.style.position = 'initial';
+        popover.targetElement.style.zIndex = 'initial';
+      }
+      // Remove the popover
+      setPopovers((cur: IPopoverData[]) => [...cur].filter((p) => p.id !== id));
+    }
   };
 
   useEffect(() => {
     document.addEventListener('click', handleClick);
 
+    if (closePopoversOnEscPress) {
+      document.addEventListener('keydown', handleKeyDown);
+    }
+
     return () => {
       document.removeEventListener('click', handleClick);
+      document.removeEventListener('keydown', handleKeyDown);
     };
   }, [popovers]);
 
   useEffect(() => {
     if (!size(popovers)) {
       document.removeEventListener('click', handleClick);
+      document.removeEventListener('keydown', handleKeyDown);
     }
   }, [popovers]);
 
@@ -72,6 +103,7 @@ const PopoverProvider: React.FC<IReqorePopoverProviderProps> = ({ children, uiSc
             }, [])
           );
         },
+        isPopoverOpen: (popoverId: string) => !!popovers.find((p) => p.id === popoverId),
         removePopover,
         popovers,
       }}

package/src/containers/ReqoreProvider.tsx

@@ -47,7 +47,7 @@ export interface IReqoreConfirmationModal {
   intent?: TReqoreIntent;
 }
 
-const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options }) => {
+const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {} }) => {
   const [notifications, setNotifications] = useState<IReqoreNotificationData[] | null>([]);
   const [confirmationModal, setConfirmationModal] = useState<IReqoreConfirmationModal>({});
   const latestZIndex = useRef<number>(9000);
@@ -121,17 +121,19 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options }) =
           isTablet,
           isMobileOrTablet,
           getAndIncreaseZIndex,
-          animations: options?.animations || { buttons: true, dialogs: true },
+          animations: options.animations || { buttons: true, dialogs: true },
+          closePopoversOnEscPress:
+            'closePopoversOnEscPress' in options ? options.closePopoversOnEscPress : true,
         }}
       >
         {size(notifications) > 0 ? (
-          <ReqoreNotificationsWrapper position={options?.notificationsPosition}>
+          <ReqoreNotificationsWrapper position={options.notificationsPosition}>
             {notifications.map((notification) => (
               <ReqoreNotification
                 {...notification}
                 key={notification.id}
                 onClick={
-                  notification?.onClick
+                  notification.onClick
                     ? () => void notification.onClick(notification.id)
                     : undefined
                 }

package/src/containers/UIProvider.tsx

@@ -18,6 +18,7 @@ export interface IReqoreOptions {
     buttons?: boolean;
     dialogs?: boolean;
   };
+  closePopoversOnEscPress?: boolean;
 }
 export interface IReqoreUIProviderProps {
   children?: any;

package/src/context/PopoverContext.tsx

@@ -5,6 +5,7 @@ export default createContext<{
   addPopover?: (popoverData: IPopoverData) => void;
   removePopover?: (popoverId: string) => void;
   updatePopover?: (popoverId: string, popoverData: Partial<IPopoverData>) => void;
+  isPopoverOpen?: (popoverId: string) => boolean;
   popovers?: IPopoverData[];
   uiScale?: number;
 }>({});

package/src/context/ReqoreContext.tsx

@@ -12,6 +12,7 @@ export interface IReqoreContext {
   readonly isMobileOrTablet?: boolean;
   readonly getAndIncreaseZIndex?: () => number;
   readonly animations?: IReqoreOptions['animations'];
+  readonly closePopoversOnEscPress?: boolean;
 }
 
 export default createContext<IReqoreContext>({
@@ -23,4 +24,5 @@ export default createContext<IReqoreContext>({
     buttons: true,
     dialogs: true,
   },
+  closePopoversOnEscPress: true,
 });

package/src/helpers/colors.ts

@@ -1,5 +1,5 @@
-import { cloneDeep, merge } from 'lodash';
-import { darken, lighten, readableColor } from 'polished';
+import { cloneDeep, merge, reduce } from 'lodash';
+import { darken, getLuminance, lighten, mix, readableColor } from 'polished';
 import { TReqoreEffectColor, TReqoreEffectColorList, TReqoreHexColor } from '../components/Effect';
 import { Colors } from '../constants/colors';
 import { DEFAULT_INTENTS, IReqoreTheme, TReqoreIntent } from '../constants/theme';
@@ -46,9 +46,7 @@ export const percentToHexAlpha = (p: number) => {
 };
 
 export const shouldDarken = (mainColor: TReqoreHexColor): boolean => {
-  const contrast = getColorByBgColor(mainColor);
-
-  return contrast === '#000000';
+  return getLuminance(mainColor) > 0.2;
 };
 
 export const getMainColor: (theme: IReqoreTheme, component: string) => TReqoreHexColor = (
@@ -126,14 +124,14 @@ export const mergeThemes = (element: string, theme: IReqoreTheme, customTheme: a
     return clonedTheme;
   }
 
-  if (element === 'main' && customTheme) {
+  if (element === 'main') {
     merge(clonedTheme, {
       main: customTheme.main,
       originalMain: clonedTheme.main,
       text: customTheme.text,
     });
   } else {
-    merge(clonedTheme, { [element]: customTheme || {}, text: customTheme.text });
+    merge(clonedTheme, { [element]: customTheme, text: customTheme.text });
   }
 
   return clonedTheme;
@@ -191,3 +189,51 @@ export const getColorFromMaybeString = (
 
   return _color;
 };
+
+export const createEffectGradient = (
+  theme: IReqoreTheme,
+  colors: Record<number, TReqoreEffectColor>,
+  lighten: number = 0,
+  minimal?: boolean
+): string => {
+  return reduce(
+    colors,
+    (colorsString, color, percentage) => {
+      return `${colorsString}, ${
+        minimal ? theme.main : changeLightness(getColorFromMaybeString(theme, color), lighten)
+      } ${percentage}%`;
+    },
+    ''
+  );
+};
+
+export const getNthGradientColor = (
+  theme: IReqoreTheme,
+  colors?: Record<number, TReqoreEffectColor>,
+  nth: number = 1
+): TReqoreHexColor | undefined => {
+  if (colors) {
+    return getColorFromMaybeString(theme, Object.values(colors)[nth - 1]);
+  }
+
+  return undefined;
+};
+
+export const getGradientMix = (
+  theme: IReqoreTheme,
+  colors: Record<number, TReqoreEffectColor>,
+  fallback?: TReqoreHexColor
+): TReqoreHexColor | undefined => {
+  if (colors && Object.keys(colors).length === 2) {
+    const gradientColor1: TReqoreHexColor = getNthGradientColor(theme, colors);
+    const gradientColor2: TReqoreHexColor = getNthGradientColor(theme, colors, 2);
+
+    return mix(
+      0.5,
+      gradientColor1 === '#00000000' ? theme.main : gradientColor1,
+      gradientColor2 === '#00000000' ? theme.main : gradientColor2
+    ) as TReqoreHexColor;
+  }
+
+  return fallback;
+};

package/src/hooks/usePopover.tsx

@@ -2,7 +2,15 @@ import { Placement } from '@popperjs/core';
 import { MutableRefObject, useContext, useEffect, useMemo, useRef } from 'react';
 import { useUnmount, useUpdateEffect } from 'react-use';
 import shortid from 'shortid';
+import { IPopoverData } from '../containers/PopoverProvider';
 import PopoverContext from '../context/PopoverContext';
+import {
+  IReqoreIntent,
+  IWithReqoreEffect,
+  IWithReqoreFlat,
+  IWithReqoreMinimal,
+} from '../types/global';
+import { IReqoreIconName } from '../types/icons';
 
 const startEvents = {
   hover: 'mouseenter',
@@ -18,7 +26,18 @@ const endEvents = {
   focus: null,
 };
 
-export interface IPopover {
+export interface IPopoverControls {
+  open: () => void;
+  close: () => void;
+  isOpen: () => boolean;
+  id: string;
+}
+
+export interface IPopover
+  extends IReqoreIntent,
+    IWithReqoreMinimal,
+    IWithReqoreEffect,
+    IWithReqoreFlat {
   content?: JSX.Element | string | undefined;
   handler?: 'hover' | 'click' | 'focus' | 'hoverStay';
   placement?: Placement;
@@ -30,13 +49,16 @@ export interface IPopover {
   closeOnAnyClick?: boolean;
   delay?: number;
   blur?: number;
-  opaque?: boolean;
+  transparent?: boolean;
   maxWidth?: string;
   maxHeight?: string;
+  icon?: IReqoreIconName;
+  title?: string;
 }
 
 export interface IPopoverOptions extends IPopover {
   targetElement?: HTMLElement;
+  passPopoverData?: (data: IPopoverControls) => void;
 }
 
 const usePopover = ({
@@ -51,14 +73,15 @@ const usePopover = ({
   openOnMount = false,
   delay,
   ...rest
-}: IPopoverOptions) => {
-  const { addPopover, removePopover, updatePopover, popovers } = useContext(PopoverContext);
+}: IPopoverOptions): IPopoverControls => {
+  const { addPopover, removePopover, updatePopover, popovers, isPopoverOpen } =
+    useContext(PopoverContext);
   const { current }: MutableRefObject<string> = useRef(shortid.generate());
   let { current: timeout }: MutableRefObject<any> = useRef(0);
 
   const startEvent = startEvents[handler];
   const endEvent = endEvents[handler];
-  const currentPopover = useMemo(
+  const currentPopover: IPopoverData = useMemo(
     () => popovers?.find((p) => p.id === current),
     [popovers, current]
   );
@@ -84,7 +107,7 @@ const usePopover = ({
 
   const _addPopover = () => {
     if (currentPopover) {
-      if (handler !== 'hoverStay') {
+      if (handler !== 'hoverStay' && handler !== 'focus') {
         _removePopover?.();
       }
     } else if (show) {
@@ -99,11 +122,6 @@ const usePopover = ({
   };
 
   const _removePopover = () => {
-    if (rest?.blur > 0) {
-      targetElement.style.position = 'initial';
-      targetElement.style.zIndex = 'initial';
-    }
-
     cancelTimeout();
     removePopover?.(current);
   };
@@ -175,7 +193,16 @@ const usePopover = ({
     cancelTimeout();
   });
 
-  return current;
+  return {
+    id: current,
+    open: () => {
+      if (!isPopoverOpen(current)) {
+        openPopover();
+      }
+    },
+    close: () => _removePopover(),
+    isOpen: () => isPopoverOpen(current),
+  };
 };
 
 export default usePopover;

package/src/hooks/useReqore.ts

@@ -0,0 +1,12 @@
+import { useContext } from 'react';
+import ReqoreContext, { IReqoreContext } from '../context/ReqoreContext';
+
+export const useReqore = (): IReqoreContext => {
+  const reqore = useContext(ReqoreContext);
+
+  if (!reqore) {
+    throw new Error('Reqore context is not defined');
+  }
+
+  return reqore;
+};

package/src/hooks/useTheme.ts

@@ -14,11 +14,16 @@ export interface IReqoreCustomTheme extends Partial<Omit<IReqoreTheme, 'main' |
 }
 
 export const useReqoreTheme = (
-  element: string,
+  element?: string,
   customTheme: IReqoreCustomTheme = {},
   intent?: TReqoreIntent
 ) => {
   const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
+
+  if (!element) {
+    return theme;
+  }
+
   let _customTheme: IReqoreCustomTheme = cloneDeep(customTheme);
 
   if (_customTheme.main) {

package/src/index.tsx

@@ -30,6 +30,7 @@ export { default as ReqoreMenuDivider } from './components/Menu/divider';
 export { default as ReqoreMenuItem } from './components/Menu/item';
 export { default as ReqoreMessage } from './components/Message';
 export { ReqoreModal } from './components/Modal';
+export { ReqoreMultiSelect } from './components/MultiSelect';
 export { ReqoreFooter, ReqoreHeader } from './components/Navbar';
 export { default as ReqoreNavbarDivider } from './components/Navbar/divider';
 export { default as ReqoreNavbarGroup } from './components/Navbar/group';
@@ -58,3 +59,5 @@ export { default as ReqoreUIProvider } from './containers/UIProvider';
 export { default as ReqoreContext } from './context/ReqoreContext';
 export { default as ReqoreThemeContext } from './context/ThemeContext';
 export { default as useLatestZIndex } from './hooks/useLatestZIndex';
+export { useReqore } from './hooks/useReqore';
+export { useReqoreTheme } from './hooks/useTheme';

package/src/mock/multiSelect.ts

@@ -0,0 +1,61 @@
+import { TReqoreMultiSelectItem } from '../components/MultiSelect';
+
+export const MultiSelectItems: TReqoreMultiSelectItem[] = [
+  {
+    label: 'Existing item 1',
+    value: 'Existing item 1',
+    icon: 'SunCloudyLine',
+  },
+  {
+    label: 'Existing item 2',
+    value: 'Existing item 2',
+    icon: 'BatteryChargeFill',
+  },
+  {
+    label: 'Existing item 3',
+    value: 'Existing item 3',
+    icon: 'DropboxFill',
+    intent: 'info',
+  },
+  {
+    label: 'Existing item 4',
+    value: 'Existing item 4',
+    icon: 'PagesLine',
+    effect: { gradient: { colors: { 0: 'success', 100: 'info:darken:1' } } },
+  },
+  {
+    disabled: true,
+    label: 'Disabled item',
+    value: 'Disabled item',
+    icon: 'StopCircleLine',
+  },
+  {
+    minimal: true,
+    label: 'Minimal item',
+    value: 'Minimal item',
+    icon: 'StopCircleLine',
+  },
+  {
+    divider: true,
+    icon: 'CheckDoubleLine',
+  },
+  {
+    value: 'itemWithNoLabel',
+    icon: 'TakeawayLine',
+  },
+  {
+    label: 'Other Item 1',
+    value: 'Other Item 1',
+    icon: 'MapFill',
+  },
+  {
+    label: 'Other Item 2',
+    value: 'Other Item 2',
+    icon: 'ArrowLeftUpFill',
+  },
+  {
+    label: 'Other Item 3',
+    value: 'Other Item 3',
+    icon: 'MicLine',
+  },
+];

package/src/stories/Button/Button.stories.tsx

@@ -32,17 +32,29 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
         <ReqoreButton {...buttonProps} active tooltip='hello'>
           Active
         </ReqoreButton>
+        <ReqoreButton {...buttonProps} minimal flat>
+          Minimal
+        </ReqoreButton>
+        <ReqoreButton {...buttonProps} readOnly onClick={alert}>
+          Read only
+        </ReqoreButton>
+      </ReqoreControlGroup>
+      <br />
+      <ReqoreControlGroup size={buttonProps.size}>
+        <ReqoreButton {...buttonProps} active flat={false} tooltip='hello'>
+          Active Not Flat
+        </ReqoreButton>
         <ReqoreButton {...buttonProps} flat={false}>
           Not Flat
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} minimal>
-          Minimal
+        <ReqoreButton {...buttonProps} minimal flat={false}>
+          Minimal not flat
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} minimal flat>
-          Minimal flat
+        <ReqoreButton {...buttonProps} readOnly onClick={alert} flat={false}>
+          Read only not flat
         </ReqoreButton>
-        <ReqoreButton {...buttonProps} readOnly onClick={alert}>
-          Read only
+        <ReqoreButton {...buttonProps} disabled flat={false}>
+          Disabled not flat
         </ReqoreButton>
       </ReqoreControlGroup>
       <br />
@@ -98,10 +110,10 @@ const Template: ComponentStory<typeof ReqoreButton> = (buttonProps) => {
       <br />
       <ReqoreControlGroup>
         <ReqoreButton {...buttonProps} readOnly badge={10} onClick={alert}>
-          With Badge
+          Read only with badge
         </ReqoreButton>
         <ReqoreButton {...buttonProps} minimal badge={20} onClick={alert}>
-          With Badge
+          Minimal with badge
         </ReqoreButton>
         <ReqoreButton
           {...buttonProps}