@qoretechnologies/reqore 0.38.0 → 0.38.2

package/src/components/Dropdown/index.tsx

@@ -14,9 +14,7 @@ import ReqoreDropdownList, {
 } from './list';
 
 export interface IReqoreDropdownProps
-  extends Partial<
-    Omit<IPopoverOptions, 'openOnMount' | 'show' | 'targetElement' | 'wrapperProps'>
-  > {
+  extends Partial<Omit<IPopoverOptions, 'openOnMount' | 'targetElement' | 'wrapperProps'>> {
   items?: IReqoreDropdownItem[];
   multiSelect?: boolean;
   buttonStyle?: React.CSSProperties;
@@ -42,16 +40,18 @@ export interface IReqoreDropdownProps
   paging?: TReqorePaginationType<IReqoreDropdownItem>;
 }
 
-const ReqoreDropdownListWrapper = ({
-  wrapperProps,
-  ...rest
-}: IReqoreDropdownListProps & { wrapperProps?: IReqoreDropdownProps['wrapperProps'] }) => {
-  return (
-    <ReqorePanel flat size='small' {...wrapperProps}>
-      <ReqoreDropdownList {...rest} />
-    </ReqorePanel>
-  );
-};
+const ReqoreDropdownListWrapper = memo(
+  ({
+    wrapperProps,
+    ...rest
+  }: IReqoreDropdownListProps & { wrapperProps?: IReqoreDropdownProps['wrapperProps'] }) => {
+    return (
+      <ReqorePanel flat size='small' {...wrapperProps}>
+        <ReqoreDropdownList {...rest} />
+      </ReqorePanel>
+    );
+  }
+);
 
 function ReqoreDropdown<T = IReqoreButtonProps>({
   items,
@@ -87,6 +87,7 @@ function ReqoreDropdown<T = IReqoreButtonProps>({
   inputProps,
   scrollToSelected,
   paging,
+  show,
   ...rest
 }: IReqoreDropdownProps & T) {
   const componentProps = useMemo(
@@ -120,7 +121,7 @@ function ReqoreDropdown<T = IReqoreButtonProps>({
         filter={filter}
       />
     ) : undefined;
-  }, [items]);
+  }, [items, onItemSelect]);
 
   return (
     <ReqorePopover
@@ -142,6 +143,7 @@ function ReqoreDropdown<T = IReqoreButtonProps>({
       openOnMount={isDefaultOpen}
       content={popoverContent}
       passPopoverData={passPopoverData}
+      show={show}
     >
       {children || label}
     </ReqorePopover>

package/src/components/Dropdown/item.tsx

@@ -1,17 +1,33 @@
-import { ReqoreMenuDivider, ReqoreMenuItem } from '../..';
-import { IReqoreMenuDividerProps } from '../Menu/divider';
+import { size } from 'lodash';
+import { memo, useCallback } from 'react';
+import { ReqoreMenuItem } from '../..';
+import ReqoreMenuDivider, { IReqoreMenuDividerProps } from '../Menu/divider';
 import { IReqoreDropdownItem } from './list';
 
-export interface IReqoreDropdownItemProps extends Omit<IReqoreDropdownItem, 'value' | 'onClick'> {}
+export interface IReqoreDropdownItemProps extends IReqoreDropdownItem {
+  onItemClick: (item: IReqoreDropdownItem) => void;
+  scrollIntoView?: boolean;
+}
 
-export const ReqoreDropdownItem = ({ children, ...rest }: IReqoreDropdownItemProps) => (
-  <ReqoreMenuItem {...rest} rightIcon={rest.selected ? 'CheckLine' : undefined}>
-    {children}
-  </ReqoreMenuItem>
-);
+export const ReqoreDropdownItem = memo(
+  ({ onItemClick, scrollIntoView, ...rest }: IReqoreDropdownItemProps) => {
+    const handleItemClick = useCallback(() => {
+      onItemClick(rest);
+    }, [onItemClick, rest]);
 
-export interface IReqoreDropdownDividerProps extends IReqoreMenuDividerProps {}
+    return (
+      <ReqoreMenuItem
+        {...rest}
+        _insidePopover={size(rest.items) ? false : rest._insidePopover}
+        label={rest.label || rest.value}
+        onClick={handleItemClick}
+        rightIcon={rest.selected ? 'CheckLine' : rest.rightIcon}
+        scrollIntoView={scrollIntoView}
+      />
+    );
+  }
+);
 
-export const ReqoreDropdownDivider = (props: IReqoreDropdownDividerProps) => (
+export const ReqoreDropdownDivider = (props: IReqoreMenuDividerProps) => (
   <ReqoreMenuDivider {...props} />
 );

package/src/components/Dropdown/list.tsx

@@ -1,20 +1,23 @@
 import { size } from 'lodash';
-import React, { memo, useEffect, useMemo, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { TReqorePaginationType } from '../../constants/paging';
 import { PADDING_FROM_SIZE } from '../../constants/sizes';
 import { ReqorePaginationContainer } from '../../containers/Paging';
 import { IReqoreComponent } from '../../types/global';
+import ReqoreButton from '../Button';
+import ReqoreControlGroup from '../ControlGroup';
 import ReqoreInput, { IReqoreInputProps } from '../Input';
 import ReqoreMenu from '../Menu';
-import ReqoreMenuDivider from '../Menu/divider';
-import ReqoreMenuItem, { IReqoreMenuItemProps } from '../Menu/item';
+import ReqoreMenuDivider, { IReqoreMenuDividerProps } from '../Menu/divider';
+import { IReqoreMenuItemProps } from '../Menu/item';
 import { ReqoreVerticalSpacer } from '../Spacer';
-import { IReqoreDropdownDividerProps } from './item';
+import { ReqoreDropdownItem } from './item';
 
 export type TDropdownItemOnClick = (item: IReqoreDropdownItem) => void;
 export interface IReqoreDropdownItem
-  extends Omit<IReqoreMenuItemProps, 'onClick' | 'rightIcon' | 'onRightIconClick'> {
+  extends Omit<IReqoreMenuItemProps, 'onClick' | 'onRightIconClick'> {
   value?: any;
+  items?: TReqoreDropdownItems;
   onClick?: TDropdownItemOnClick;
   divider?: boolean;
   dividerAlign?: 'left' | 'center' | 'right';
@@ -40,6 +43,8 @@ export interface IReqoreDropdownListProps extends IReqoreComponent {
   inputProps?: IReqoreInputProps;
   scrollToSelected?: boolean;
   paging?: TReqorePaginationType<TReqoreDropdownItem>;
+
+  _onBackClick?: () => void;
 }
 
 const ReqoreDropdownList = memo(
@@ -58,10 +63,12 @@ const ReqoreDropdownList = memo(
     onFilterChange,
     filterPlaceholder,
     filter,
+    _onBackClick,
   }: IReqoreDropdownListProps) => {
     const [_items, setItems] = useState<TReqoreDropdownItems>(items);
     const [query, setQuery] = useState<string | number>(onFilterChange ? '' : filter || '');
     const [menuRef, setMenuRef] = useState<HTMLDivElement>(undefined);
+    const [selectedItem, setSelectedItem] = useState<IReqoreDropdownItem>(undefined);
 
     useEffect(() => {
       setItems(items);
@@ -95,31 +102,76 @@ const ReqoreDropdownList = memo(
       }
     };
 
-    const handleItemClick = (item: IReqoreDropdownItem): void => {
-      if (item.onClick) {
-        item.onClick(item);
-      }
+    const handleItemClick = useCallback(
+      (item: IReqoreDropdownItem): void => {
+        if (size(item.items)) {
+          setSelectedItem(item);
 
-      if (onItemSelect) {
-        onItemSelect(item);
-      }
-    };
+          return;
+        }
+
+        if (item.onClick) {
+          item.onClick(item);
+        }
+
+        if (onItemSelect) {
+          onItemSelect(item);
+        }
+      },
+      [onItemSelect, selectedItem]
+    );
+
+    if (selectedItem) {
+      return (
+        <ReqoreDropdownList
+          {...{
+            items: selectedItem.items,
+            multiSelect,
+            listStyle,
+            _popoverId,
+            filterable,
+            width,
+            height,
+            onItemSelect,
+            inputProps,
+            scrollToSelected,
+            paging,
+            onFilterChange,
+            filterPlaceholder,
+            filter,
+            _onBackClick: () => setSelectedItem(undefined),
+          }}
+        />
+      );
+    }
 
     return (
       <>
-        {filterable && (
+        {filterable || _onBackClick ? (
           <>
-            <ReqoreInput
-              value={onFilterChange ? filter : query}
-              icon='SearchLine'
-              onChange={handleQueryChange}
-              placeholder={filterPlaceholder || `Search ${size(_items)} items...`}
-              onClearClick={() => (onFilterChange ? onFilterChange('') : setQuery(''))}
-              {...inputProps}
-            />
+            <ReqoreControlGroup fluid>
+              {_onBackClick && (
+                <ReqoreButton
+                  icon='ArrowLeftSLine'
+                  fluid
+                  onClick={_onBackClick}
+                  className='reqore-dropdown-back-button'
+                />
+              )}
+              {filterable && (
+                <ReqoreInput
+                  value={onFilterChange ? filter : query}
+                  icon='SearchLine'
+                  onChange={handleQueryChange}
+                  placeholder={filterPlaceholder || `Search ${size(_items)} items...`}
+                  onClearClick={() => (onFilterChange ? onFilterChange('') : setQuery(''))}
+                  {...inputProps}
+                />
+              )}
+            </ReqoreControlGroup>
             <ReqoreVerticalSpacer height={PADDING_FROM_SIZE.normal} />
           </>
-        )}
+        ) : null}
         <ReqorePaginationContainer type={paging} items={filteredItems} scrollContainer={menuRef}>
           {(finalItems, Controls, { includeBottomControls }) => (
             <ReqoreMenu
@@ -132,20 +184,18 @@ const ReqoreDropdownList = memo(
               ref={setMenuRef}
             >
               {finalItems.map(
-                ({ onClick, dividerAlign, divider, ...item }: IReqoreDropdownItem, index: number) =>
+                ({ dividerAlign, divider, ...item }: IReqoreDropdownItem, index: number) =>
                   divider ? (
                     <ReqoreMenuDivider
                       key={index}
-                      {...(item as unknown as IReqoreDropdownDividerProps)}
+                      {...(item as unknown as IReqoreMenuDividerProps)}
                       align={dividerAlign}
                     />
                   ) : (
-                    <ReqoreMenuItem
-                      key={index}
+                    <ReqoreDropdownItem
+                      key={item.label || item.value || index}
                       {...item}
-                      label={item.label || item.value}
-                      onClick={() => handleItemClick({ ...item, onClick })}
-                      rightIcon={item.selected ? 'CheckLine' : undefined}
+                      onItemClick={handleItemClick}
                       scrollIntoView={scrollToSelected && item.selected && !multiSelect}
                     />
                   )

package/src/components/Input/index.tsx

@@ -3,10 +3,10 @@ import { rgba } from 'polished';
 import React, { forwardRef, useState } from 'react';
 import styled, { css } from 'styled-components';
 import {
+  CONTROL_TEXT_FROM_SIZE,
   PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
   SIZE_TO_PX,
-  TEXT_FROM_SIZE,
   TSizes,
 } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
@@ -72,11 +72,17 @@ export const StyledInputWrapper = styled.div<IReqoreInputStyle>`
   min-width: 60px;
   flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 1 auto')};
   align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
-  font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
+  font-size: ${({ _size }) => CONTROL_TEXT_FROM_SIZE[_size]}px;
   position: relative;
   overflow: hidden;
   border-radius: ${({ minimal, rounded, _size }) =>
     minimal || rounded === false ? 0 : RADIUS_FROM_SIZE[_size]}px;
+
+  &:focus-within {
+    .reqore-clear-input-button {
+      display: flex;
+    }
+  }
 `;
 
 const StyledIconWrapper = styled.div<IReqoreInputStyle>`
@@ -109,7 +115,7 @@ export const StyledInput = styled(StyledEffect)<IReqoreInputStyle>`
   }}px;
 
   padding-left: ${({ hasIcon, _size }) => (hasIcon ? SIZE_TO_PX[_size] : 7)}px;
-  font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
+  font-size: ${({ _size }) => CONTROL_TEXT_FROM_SIZE[_size]}px;
   transition: all 0.2s ease-out;
   border-radius: ${({ minimal, rounded, _size }) =>
     minimal || rounded === false ? 0 : RADIUS_FROM_SIZE[_size]}px;

package/src/components/InputClearButton/index.tsx

@@ -19,6 +19,7 @@ export const StyledInputClearButton = styled(ReqoreIcon)<{ show?: boolean }>`
   align-items: center;
   transition: all 0.1s ease-out;
   cursor: pointer;
+  display: none;
 
   &:hover {
     opacity: 1 !important;

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, removePopover]
+      );
 
-    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, removePopover]
+      );
 
-    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]
   );
 
   /*