@qoretechnologies/reqore 0.37.9 → 0.38.1

package/src/components/Effect/index.tsx

@@ -75,6 +75,7 @@ export interface IReqoreEffect extends IReqoreEffectFilters {
     inset?: boolean;
     blur?: number;
     opacity?: number;
+    when?: 'always' | 'hover' | 'focus' | 'active';
   };
   interactive?: boolean;
 }
@@ -222,28 +223,58 @@ export const StyledEffect = styled.span`
       return undefined;
     }
 
+    let glow;
+
     if (!isText) {
-      return css`
+      glow = css`
         box-shadow: ${effect.glow.inset ? 'inset ' : ''} 0 0 ${effect.glow.blur || 0}px
           ${effect.glow.size || 2}px ${getColorFromMaybeString(theme, effect.glow.color)};
       `;
+    } else {
+      const color = getColorFromMaybeString(
+        theme,
+        effect.glow.color === 'main' ? 'main:lighten:2' : effect.glow.color
+      );
+      const blur = effect.glow.blur || 0;
+      const opacity = effect.glow.opacity || 1;
+
+      glow = css`
+        color: ${Colors.LIGHT};
+        text-shadow: 0 0 ${blur}px ${rgba(color, opacity)},
+          0 0 ${blur + 5}px ${rgba(color, opacity)}, 0 0 ${blur + 10}px ${rgba(color, opacity)},
+          0 0 1px ${rgba(getReadableColorFrom(color), opacity)},
+          0 0 2px ${rgba(getReadableColorFrom(color), opacity)},
+          0 0 3px ${rgba(getReadableColorFrom(color), opacity)};
+      `;
     }
 
-    const color = getColorFromMaybeString(
-      theme,
-      effect.glow.color === 'main' ? 'main:lighten:2' : effect.glow.color
-    );
-    const blur = effect.glow.blur || 0;
-    const opacity = effect.glow.opacity || 1;
+    if (effect.glow.when === 'always' || !effect.glow.when) {
+      return glow;
+    }
 
-    return css`
-      color: ${Colors.LIGHT};
-      text-shadow: 0 0 ${blur}px ${rgba(color, opacity)}, 0 0 ${blur + 5}px ${rgba(color, opacity)},
-        0 0 ${blur + 10}px ${rgba(color, opacity)},
-        0 0 1px ${rgba(getReadableColorFrom(color), opacity)},
-        0 0 2px ${rgba(getReadableColorFrom(color), opacity)},
-        0 0 3px ${rgba(getReadableColorFrom(color), opacity)};
-    `;
+    if (effect.glow.when === 'hover') {
+      return css`
+        &:hover {
+          ${glow}
+        }
+      `;
+    }
+
+    if (effect.glow.when === 'focus') {
+      return css`
+        &:focus {
+          ${glow}
+        }
+      `;
+    }
+
+    if (effect.glow.when === 'active') {
+      return css`
+        &:active {
+          ${glow}
+        }
+      `;
+    }
   }}
 
   ${({ effect }: IReqoreTextEffectProps) =>

package/src/components/InternalPopover/index.tsx

@@ -3,6 +3,7 @@ import { rgba } from 'polished';
 import React, { MutableRefObject, memo, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { usePopper } from 'react-popper';
+import { useUnmount, useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import { useContext } from 'use-context-selector';
 import { RADIUS_FROM_SIZE } from '../../constants/sizes';
@@ -164,7 +165,8 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = memo(
     const [popperElement, setPopperElement] = useState(null);
     const [arrowElement, setArrowElement] = useState(null);
     const popperRef: MutableRefObject<any> = useRef(null);
-    const { styles, attributes } = usePopper(targetElement, popperElement, {
+    const mutationObserber: MutableRefObject<any> = useRef(null);
+    const { styles, attributes, forceUpdate, state } = usePopper(targetElement, popperElement, {
       placement,
       modifiers: [
         {
@@ -186,6 +188,27 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = memo(
       ],
     });
 
+    useUpdateEffect(() => {
+      if (!mutationObserber.current && targetElement && state) {
+        // Watch for changes in the target element
+        const observer = new MutationObserver(() => {
+          forceUpdate();
+        });
+
+        observer.observe(document, {
+          attributes: true,
+          childList: true,
+          subtree: true,
+        });
+
+        mutationObserber.current = observer;
+      }
+    }, [styles, attributes, state]);
+
+    useUnmount(() => {
+      mutationObserber.current?.disconnect();
+    });
+
     useEffect(() => {
       if (popperRef.current) {
         updatePopover?.(id, { popperRef: cloneDeep(popperRef) });

package/src/components/Menu/index.tsx

@@ -85,8 +85,8 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
           {React.Children.map(children, (child) => {
             return child
               ? React.cloneElement(child, {
-                  _insidePopover,
-                  _popoverId,
+                  _insidePopover: child.props?._insidePopover ?? _insidePopover,
+                  _popoverId: child.props?._popoverId ?? _popoverId,
                   customTheme: child.props?.customTheme || theme,
                   wrap: 'wrap' in (child.props || {}) ? child.props.wrap : wrapText,
                   flat: 'flat' in (child.props || {}) ? child.props.flat : flat,

package/src/components/Menu/item.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, memo, useCallback, useEffect, useState } from 'react';
 import { useContext } from 'use-context-selector';
 import { ReqoreButton, ReqoreControlGroup } from '../..';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
@@ -29,101 +29,109 @@ export interface IReqoreMenuItemRightIconStyle {
   intent?: TReqoreIntent;
 }
 
-const ReqoreMenuItem = forwardRef<HTMLButtonElement, IReqoreMenuItemProps>(
-  (
-    {
-      children,
-      label,
-      icon,
-      rightIcon,
-      as,
-      selected,
-      onClick,
-      onRightIconClick,
-      disabled,
-      itemId,
-      _insidePopover,
-      _popoverId,
-      tooltip,
-      intent,
-      flat = true,
-      scrollIntoView,
-      ...rest
-    }: IReqoreMenuItemProps,
-    ref
-  ) => {
-    const { removePopover } = useContext(PopoverContext);
-    const { targetRef } = useCombinedRefs<HTMLButtonElement>(ref);
-    const [itemRef, setItemRef] = useState<HTMLButtonElement | null>(null);
+const ReqoreMenuItem = memo(
+  forwardRef<HTMLButtonElement, IReqoreMenuItemProps>(
+    (
+      {
+        children,
+        label,
+        icon,
+        rightIcon,
+        as,
+        selected,
+        onClick,
+        onRightIconClick,
+        disabled,
+        itemId,
+        _insidePopover,
+        _popoverId,
+        tooltip,
+        intent,
+        flat = true,
+        scrollIntoView,
+        ...rest
+      }: IReqoreMenuItemProps,
+      ref
+    ) => {
+      const { removePopover } = useContext(PopoverContext);
+      const { targetRef } = useCombinedRefs<HTMLButtonElement>(ref);
+      const [itemRef, setItemRef] = useState<HTMLButtonElement | null>(null);
 
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-      event.persist();
+      const handleClick = useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+          event.persist();
 
-      onClick?.(event, itemId);
+          onClick?.(event, itemId);
 
-      if (_insidePopover && _popoverId) {
-        removePopover!(_popoverId);
-      }
-    };
+          if (_insidePopover && _popoverId) {
+            removePopover!(_popoverId);
+          }
+        },
+        [itemId, _insidePopover, _popoverId, onClick]
+      );
 
-    const handleRightIconClick = (event: React.MouseEvent<HTMLSpanElement>) => {
-      event.persist();
-      event.stopPropagation();
+      const handleRightIconClick = useCallback(
+        (event: React.MouseEvent<HTMLSpanElement>) => {
+          event.persist();
+          event.stopPropagation();
 
-      if (onRightIconClick) {
-        onRightIconClick(itemId, event);
+          if (onRightIconClick) {
+            onRightIconClick(itemId, event);
 
-        if (_insidePopover && _popoverId) {
-          removePopover!(_popoverId);
-        }
-      }
-    };
+            if (_insidePopover && _popoverId) {
+              removePopover!(_popoverId);
+            }
+          }
+        },
+        [itemId, _insidePopover, _popoverId, onRightIconClick]
+      );
 
-    useEffect(() => {
-      if (scrollIntoView && itemRef) {
-        itemRef.scrollIntoView?.({ behavior: 'smooth', block: 'center', inline: 'center' });
-      }
-    }, [itemRef, scrollIntoView]);
+      useEffect(() => {
+        if (scrollIntoView && itemRef) {
+          itemRef.scrollIntoView?.({ behavior: 'smooth', block: 'center', inline: 'center' });
+        }
+      }, [itemRef, scrollIntoView]);
 
-    return (
-      <ReqoreControlGroup stack={!!onRightIconClick} fluid fill>
-        <ReqoreButton
-          as={as}
-          {...rest}
-          flat={flat}
-          className={`${rest.className || ''} reqore-menu-item`}
-          fluid
-          onClick={handleClick}
-          active={selected}
-          ref={(ref) => {
-            targetRef.current = ref || undefined;
-            setItemRef(ref);
-          }}
-          disabled={disabled}
-          intent={intent}
-          icon={icon}
-          rightIcon={onRightIconClick ? undefined : rightIcon}
-          tooltip={tooltip}
-        >
-          {label || children}
-        </ReqoreButton>
-        {rightIcon && onRightIconClick ? (
+      return (
+        <ReqoreControlGroup stack={!!onRightIconClick} fluid fill>
           <ReqoreButton
-            icon={rightIcon}
+            as={as}
+            {...rest}
             flat={flat}
-            fixed
-            minimal={!onRightIconClick}
-            customTheme={rest.customTheme}
-            className='reqore-menu-item-right-icon'
-            onClick={handleRightIconClick}
-            readOnly={!onRightIconClick}
+            className={`${rest.className || ''} reqore-menu-item`}
+            fluid
+            onClick={handleClick}
+            active={selected}
+            ref={(ref) => {
+              targetRef.current = ref || undefined;
+              setItemRef(ref);
+            }}
+            disabled={disabled}
             intent={intent}
-            active={selected && !!onRightIconClick}
-          />
-        ) : null}
-      </ReqoreControlGroup>
-    );
-  }
+            icon={icon}
+            rightIcon={onRightIconClick ? undefined : rightIcon}
+            tooltip={tooltip}
+          >
+            {label || children}
+          </ReqoreButton>
+          {rightIcon && onRightIconClick ? (
+            <ReqoreButton
+              icon={rightIcon}
+              flat={flat}
+              fixed
+              minimal={!onRightIconClick}
+              customTheme={rest.customTheme}
+              className='reqore-menu-item-right-icon'
+              onClick={handleRightIconClick}
+              readOnly={!onRightIconClick}
+              intent={intent}
+              active={selected && !!onRightIconClick}
+            />
+          ) : null}
+        </ReqoreControlGroup>
+      );
+    }
+  )
 );
 
 export default ReqoreMenuItem;

package/src/components/Message/index.tsx

@@ -26,6 +26,7 @@ import {
   StyledIconWrapper,
   StyledNotificationContent,
   StyledNotificationContentWrapper,
+  StyledNotificationInnerContent,
   StyledReqoreNotification,
   typeToIcon,
 } from '../Notifications/notification';
@@ -153,43 +154,46 @@ const ReqoreMessage = memo(
             size={size}
             theme={theme}
           >
-            {leftIcon ? (
-              <StyledIconWrapper intent={intent} size={size} theme={theme}>
-                {intent === 'pending' ? (
-                  <ReqoreSpinner
-                    size={size}
-                    iconColor={iconColor}
-                    type={5}
-                    iconMargin={flat && minimal ? 'right' : 'both'}
-                    iconProps={iconProps}
-                  />
-                ) : (
-                  <ReqoreIcon
-                    icon={leftIcon}
-                    margin={flat && minimal ? 'right' : 'both'}
+            <StyledNotificationContentWrapper size={size} theme={theme}>
+              {leftIcon ? (
+                <>
+                  {intent === 'pending' ? (
+                    <ReqoreSpinner
+                      size={size}
+                      iconColor={iconColor}
+                      type={5}
+                      iconMargin={'right'}
+                      iconProps={iconProps}
+                    />
+                  ) : (
+                    <ReqoreIcon
+                      icon={leftIcon}
+                      margin={'right'}
+                      size={size}
+                      color={iconColor}
+                      {...iconProps}
+                    />
+                  )}
+                </>
+              ) : null}
+              <StyledNotificationInnerContent>
+                {title && (
+                  <ReqoreHeading
                     size={size}
-                    color={iconColor}
-                    {...iconProps}
-                  />
+                    customTheme={
+                      rest.effect?.color
+                        ? { text: { color: getColorFromMaybeString(theme, rest.effect.color) } }
+                        : undefined
+                    }
+                  >
+                    {title}
+                  </ReqoreHeading>
                 )}
-              </StyledIconWrapper>
-            ) : null}
-            <StyledNotificationContentWrapper size={size} theme={theme}>
-              {title && (
-                <ReqoreHeading
-                  size={size}
-                  customTheme={
-                    rest.effect?.color
-                      ? { text: { color: getColorFromMaybeString(theme, rest.effect.color) } }
-                      : undefined
-                  }
-                >
-                  {title}
-                </ReqoreHeading>
-              )}
-              <StyledNotificationContent theme={theme} hasTitle={!!title} size={size}>
-                {children}
-              </StyledNotificationContent>
+
+                <StyledNotificationContent theme={theme} hasTitle={!!title} size={size}>
+                  {children}
+                </StyledNotificationContent>
+              </StyledNotificationInnerContent>
             </StyledNotificationContentWrapper>
             {onClose && (
               <StyledIconWrapper

package/src/components/MultiSelect/index.tsx

@@ -124,7 +124,7 @@ export const ReqoreMultiSelect = ({
         onItemAdded?.(item.value);
       }
     },
-    [value]
+    [value, onValueChange, onItemAdded, onItemRemoved]
   );
 
   const handleItemSelect = useCallback(
@@ -142,7 +142,7 @@ export const ReqoreMultiSelect = ({
 
       setQuery('');
     },
-    [createdItems, value]
+    [createdItems, value, items, addRemoveItem]
   );
 
   /*

package/src/components/Notifications/notification.tsx

@@ -4,13 +4,7 @@ import React, { forwardRef, useEffect, useState } from 'react';
 import { useMount, useUnmount } from 'react-use';
 import styled, { css, keyframes } from 'styled-components';
 import { SPRING_CONFIG } from '../../constants/animations';
-import {
-  ICON_WRAPPER_FROM_HEADER_SIZE,
-  PADDING_FROM_SIZE,
-  TABS_SIZE_TO_PX,
-  TEXT_FROM_SIZE,
-  TSizes,
-} from '../../constants/sizes';
+import { PADDING_FROM_SIZE, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { fadeIn } from '../../helpers/animations';
@@ -82,7 +76,6 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
   min-width: ${({ fluid }) => (!fluid ? '30px' : undefined)};
   max-width: ${({ maxWidth, fluid, fixed }) => maxWidth || (fluid && !fixed ? '100%' : undefined)};
   border-radius: 5px;
-  min-height: ${({ size = 'normal' }: IReqoreNotificationStyle) => TABS_SIZE_TO_PX[size]}px;
   display: flex;
   flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
   align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
@@ -172,15 +165,12 @@ export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotification
 `;
 
 export const StyledIconWrapper = styled.div<IReqoreNotificationStyle>`
-  height: ${({ size = 'normal' }: IReqoreNotificationStyle) =>
-    ICON_WRAPPER_FROM_HEADER_SIZE[size]}px;
   flex: 0 1 auto;
   flex-shrink: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.2s ease-out;
-  margin-top: ${({ size = 'normal' }: IReqoreNotificationStyle) => `${PADDING_FROM_SIZE[size]}px`};
 
   ${({ clickable, theme, intent, type }) =>
     clickable &&
@@ -202,12 +192,21 @@ export const StyledIconWrapper = styled.div<IReqoreNotificationStyle>`
     `}
 `;
 
-export const StyledNotificationContentWrapper = styled.div<IReqoreNotificationStyle>`
+export const StyledNotificationInnerContent = styled.div<IReqoreNotificationStyle>`
   flex: 1;
-  min-height: ${({ size = 'normal' }: IReqoreNotificationStyle) => TABS_SIZE_TO_PX[size]}px;
   display: flex;
   flex-flow: column;
   justify-content: center;
+
+  .reqore-heading {
+    line-height: 1;
+  }
+`;
+
+export const StyledNotificationContentWrapper = styled.div<IReqoreNotificationStyle>`
+  flex: 1;
+  display: flex;
+  justify-content: center;
   padding: ${({ size = 'normal' }: IReqoreNotificationStyle) => `${PADDING_FROM_SIZE[size]}px`};
 `;
 
@@ -224,6 +223,9 @@ export const StyledNotificationContent = styled.div`
   flex: 1;
   font-size: ${({ size = 'normal' }) => TEXT_FROM_SIZE[size]}px;
   overflow-wrap: anywhere;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
 
   ${({ hasTitle, size = 'normal' }) =>
     hasTitle &&
@@ -317,24 +319,26 @@ const ReqoreNotification = forwardRef<HTMLDivElement, IReqoreNotificationProps>(
             theme={theme}
             maxWidth='450px'
           >
-            {type || intent || icon ? (
-              <StyledIconWrapper type={type || intent} size={size}>
-                {intent === 'pending' || type === 'pending' ? (
-                  <ReqoreSpinner size={size} type={5} iconMargin={'both'} />
-                ) : (
-                  <ReqoreIcon
-                    icon={icon || typeToIcon[type || intent]}
-                    margin={'both'}
-                    size={size}
-                  />
-                )}
-              </StyledIconWrapper>
-            ) : null}
             <StyledNotificationContentWrapper size={size} theme={theme}>
-              {title && <ReqoreHeading size={size}>{title}</ReqoreHeading>}
-              <StyledNotificationContent theme={theme} hasTitle={!!title} size={size}>
-                {content}
-              </StyledNotificationContent>
+              {type || intent || icon ? (
+                <>
+                  {intent === 'pending' || type === 'pending' ? (
+                    <ReqoreSpinner size={size} type={5} iconMargin={'right'} />
+                  ) : (
+                    <ReqoreIcon
+                      icon={icon || typeToIcon[type || intent]}
+                      margin={'right'}
+                      size={size}
+                    />
+                  )}
+                </>
+              ) : null}
+              <StyledNotificationInnerContent>
+                {title && <ReqoreHeading size={size}>{title}</ReqoreHeading>}
+                <StyledNotificationContent theme={theme} hasTitle={!!title} size={size}>
+                  {content}
+                </StyledNotificationContent>
+              </StyledNotificationInnerContent>
             </StyledNotificationContentWrapper>
             <StyledIconWrapper
               type={type || intent}

package/src/components/Panel/LabelEditor.tsx

@@ -0,0 +1,67 @@
+import { memo, useEffect, useState } from 'react';
+import { useUpdateEffect } from 'react-use';
+import { IReqoreHeadingProps, ReqoreHeading } from '../Header';
+import ReqoreIcon, { IReqoreIconProps } from '../Icon';
+import ReqoreInput, { IReqoreInputProps } from '../Input';
+
+export interface IReqoreLabelEditorProps extends Omit<IReqoreHeadingProps, 'onSubmit'> {
+  label: string | number;
+  onSubmit?: (label: string | number) => void;
+  iconProps?: IReqoreIconProps;
+  inputProps?: IReqoreInputProps;
+}
+
+export const LabelEditor = memo(
+  ({ label, onSubmit, inputProps, iconProps, ...rest }: IReqoreLabelEditorProps) => {
+    const [name, setName] = useState<string | number>(label);
+    const [isEditing, setIsEditing] = useState(false);
+
+    useEffect(() => {
+      setName(label);
+    }, [label]);
+
+    useUpdateEffect(() => {
+      if (!isEditing) {
+        onSubmit?.(name);
+      }
+    }, [isEditing]);
+
+    if (isEditing) {
+      return (
+        <ReqoreInput
+          focusRules={{ type: 'auto' }}
+          onClick={(e) => e.stopPropagation()}
+          value={name}
+          minimal
+          fluid
+          onChange={(e: any) => setName(e.target.value)}
+          onKeyUp={(e) => {
+            if (e.key === 'Enter') {
+              setIsEditing(false);
+            }
+          }}
+          onBlur={() => setIsEditing(false)}
+          {...inputProps}
+        />
+      );
+    }
+
+    return (
+      <ReqoreHeading
+        {...rest}
+        className={`${rest.className || ''} reqore-label-editor`}
+        onClick={
+          onSubmit
+            ? (e) => {
+                e.stopPropagation();
+                setIsEditing(true);
+              }
+            : undefined
+        }
+      >
+        {name}
+        {onSubmit ? <ReqoreIcon icon='EditLine' size='small' margin='left' {...iconProps} /> : null}
+      </ReqoreHeading>
+    );
+  }
+);