@qoretechnologies/reqore 0.29.0 → 0.29.1

package/src/components/Checkbox/index.tsx

@@ -1,27 +1,40 @@
 import { rgba } from 'polished';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
+import { useMeasure } from 'react-use';
 import styled, { css } from 'styled-components';
 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 {
+  changeLightness,
+  getNthGradientColor,
+  getReadableColor,
+  getReadableColorFrom,
+} from '../../helpers/colors';
+import { getOneLessSize } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
 import { DisabledElement, ReadOnlyElement } from '../../styles';
 import {
   IReqoreDisabled,
+  IReqoreIntent,
   IReqoreReadOnly,
+  IWithReqoreCustomTheme,
   IWithReqoreEffect,
   TReqoreTooltipProp,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import { ReqoreTextEffect } from '../Effect';
-import ReqoreIcon from '../Icon';
+import { IReqoreEffect, ReqoreTextEffect, StyledEffect, StyledTextEffect } from '../Effect';
+import ReqoreIcon, { StyledIconWrapper } from '../Icon';
+import { ReqoreSpacer } from '../Spacer';
 
 export interface IReqoreCheckboxProps
   extends React.HTMLAttributes<HTMLDivElement>,
     IReqoreDisabled,
     IReqoreReadOnly,
-    IWithReqoreEffect {
+    IWithReqoreEffect,
+    IReqoreIntent,
+    IWithReqoreCustomTheme {
   label?: string;
   labelDetail?: any;
   labelDetailPosition?: 'left' | 'right';
@@ -35,6 +48,10 @@ export interface IReqoreCheckboxProps
   uncheckedIcon?: IReqoreIconName;
   checkedIcon?: IReqoreIconName;
   image?: string;
+  onText?: string | number;
+  offText?: string | number;
+  switchTextEffect?: IReqoreEffect;
+  labelEffect?: IReqoreEffect;
 }
 
 export interface IReqoreCheckboxStyle extends IReqoreCheckboxProps {
@@ -48,38 +65,65 @@ const StyledSwitchToggle = styled.div`
   align-items: center;
   justify-content: center;
   position: absolute;
-  height: ${({ size }) => SIZE_TO_PX[size] - 13}px;
-  width: ${({ size }) => SIZE_TO_PX[size] - 13}px;
+  height: ${({ size }) => SIZE_TO_PX[size] - 4}px;
+  width: ${({ size, width }) => width || SIZE_TO_PX[size] - 4}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 }) =>
+  left: ${({ checked, size, width }) =>
+    !checked ? '1px' : `calc(100% - ${width || SIZE_TO_PX[size] - 4}px - 1px)`};
+  border-radius: 50px;
+  background-color: ${({ theme, checked, transparent, parentEffect }) =>
     transparent
       ? 'transparent'
       : !checked
-      ? rgba(getReadableColor(theme, undefined, undefined), 0.2)
-      : getReadableColor(theme, undefined, undefined)};
+      ? parentEffect?.gradient
+        ? changeLightness(getNthGradientColor(theme, parentEffect?.gradient?.colors, 1), 0.2)
+        : theme.main
+      : parentEffect?.gradient
+      ? changeLightness(getNthGradientColor(theme, parentEffect?.gradient?.colors, 2), 0.2)
+      : theme.main};
 `;
 
-const StyledSwitch = styled.div<IReqoreCheckboxStyle>`
+const StyledSwitch = styled(StyledEffect)<IReqoreCheckboxStyle>`
   transition: all 0.2s ease-out;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  height: ${({ size }) => SIZE_TO_PX[size] - 5}px;
-  width: ${({ size }) => SIZE_TO_PX[size] * 1.8}px;
+  height: ${({ size }) => SIZE_TO_PX[size]}px;
+  min-width: ${({ size }) => SIZE_TO_PX[size] * 1.8}px;
 
-  border: 1px solid
-    ${({ theme, checked }) =>
-      rgba(getReadableColor(theme, undefined, undefined), checked ? 0.8 : 0.2)};
+  border: 1px solid ${({ theme, checked }) => changeLightness(theme.main, checked ? 0.25 : 0.2)};
   border-radius: 50px;
 
   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.1) : 'transparent'};
+    checked ? rgba(changeLightness(theme.main, 0.15), 0.5) : 'transparent'};
+
+  ${StyledIconWrapper} {
+    z-index: 1;
+  }
+`;
+
+const StyledSwitchTextWrapper = styled(StyledTextEffect)`
+  margin: 0 ${({ size }) => PADDING_FROM_SIZE[size]}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+`;
+
+const StyledOnSwitchText = styled(StyledSwitchTextWrapper)<IReqoreCheckboxStyle>`
+  color: ${({ theme, checked }) =>
+    getReadableColorFrom(!checked ? theme.originalMain : theme.main)};
+`;
+
+const StyledOffSwitchText = styled(StyledSwitchTextWrapper)<IReqoreCheckboxStyle>`
+  color: ${({ theme, checked }) =>
+    getReadableColorFrom(!checked ? theme.main : changeLightness(theme.main, 0.1))};
 `;
 
 const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
@@ -106,14 +150,15 @@ const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
       ${ReadOnlyElement};
     `}
 
-  color: ${({ theme, checked }) => getReadableColor(theme, undefined, undefined, !checked)};
+  color: ${({ theme, checked }) =>
+    getReadableColor(theme, undefined, undefined, !checked, theme.originalMain)};
 
   &:hover {
-    color: ${({ theme }) => getReadableColor(theme, undefined, undefined, false)};
+    color: ${({ theme }) =>
+      getReadableColor(theme, undefined, undefined, false, theme.originalMain)};
 
     > ${StyledSwitch} {
-      border-color: ${({ theme, checked }) =>
-        rgba(getReadableColor(theme, undefined, undefined, false), checked ? 0.8 : 0.5)};
+      border-color: ${({ theme, checked }) => changeLightness(theme.main, checked ? 0.3 : 0.25)};
     }
   }
 `;
@@ -131,23 +176,45 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
       labelPosition = 'right',
       tooltip,
       asSwitch,
-      uncheckedIcon = 'CheckboxBlankCircleLine',
-      checkedIcon = 'CheckboxCircleFill',
+      uncheckedIcon,
+      checkedIcon,
       readOnly,
-      effect,
+      labelEffect,
+      switchTextEffect,
       image,
+      onText,
+      offText,
+      intent,
+      effect,
+      customTheme,
       ...rest
     }: IReqoreCheckboxProps,
     ref
   ) => {
     const { targetRef } = useCombinedRefs(ref);
+    const [offRef, { width: offWidth }] = useMeasure();
+    const [onRef, { width: onWidth }] = useMeasure();
+    const theme = useReqoreTheme('main', customTheme, intent);
 
     useTooltip(targetRef.current, tooltip);
 
+    const width = useMemo(() => {
+      if ((!image && !onText) || !offText) return undefined;
+
+      const selectedWidth = checked ? onWidth : offWidth;
+
+      return selectedWidth + PADDING_FROM_SIZE[size] * 2;
+    }, [checked, offWidth, onWidth, size]);
+
+    const hasText = useMemo(() => {
+      return !!onText || !!offText;
+    }, [onText, offText]);
+
     return (
       <StyledCheckbox
         {...rest}
         ref={targetRef}
+        theme={theme}
         size={size}
         disabled={disabled}
         checked={checked}
@@ -156,9 +223,11 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
       >
         {label && labelPosition === 'left' ? (
           <>
+            <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
             {labelDetailPosition === 'left' && labelDetail}
             <ReqoreTextEffect
-              effect={{ ...effect, interactive: !disabled && !readOnly && !checked }}
+              active={checked}
+              effect={{ ...labelEffect, interactive: !disabled && !readOnly && !checked }}
             >
               {label}
             </ReqoreTextEffect>
@@ -166,25 +235,111 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
           </>
         ) : null}
         {asSwitch ? (
-          <StyledSwitch size={size} labelPosition={labelPosition} checked={checked}>
-            <StyledSwitchToggle size={size} checked={checked} transparent={!!image}>
-              {image ? <ReqoreIcon size={size} image={image} grayscale={!checked} /> : null}
+          <StyledSwitch
+            size={size}
+            labelPosition={labelPosition}
+            checked={checked}
+            theme={theme}
+            as='div'
+            effect={effect}
+          >
+            <>
+              {offText || offText === 0 ? (
+                <StyledOffSwitchText
+                  ref={offRef}
+                  size={size}
+                  theme={theme}
+                  checked={checked}
+                  effect={
+                    {
+                      uppercase: true,
+                      textSize: getOneLessSize(size),
+                      weight: 'bold',
+                      ...switchTextEffect,
+                      opacity: checked ? 0.8 : 1,
+                    } as IReqoreEffect
+                  }
+                >
+                  {image || uncheckedIcon ? (
+                    <ReqoreIcon
+                      size={size}
+                      image={image}
+                      icon={uncheckedIcon}
+                      effect={{ grayscale: true }}
+                      margin={offText ? 'right' : undefined}
+                    />
+                  ) : null}
+                  {offText}
+                </StyledOffSwitchText>
+              ) : null}
+              {onText || onText === 0 ? (
+                <StyledOnSwitchText
+                  ref={onRef}
+                  size={size}
+                  theme={theme}
+                  checked={checked}
+                  effect={
+                    {
+                      uppercase: true,
+                      textSize: getOneLessSize(size),
+                      weight: 'thick',
+                      ...switchTextEffect,
+                      opacity: checked ? 1 : 0.5,
+                    } as IReqoreEffect
+                  }
+                >
+                  {image || checkedIcon ? (
+                    <ReqoreIcon
+                      size={size}
+                      image={image}
+                      margin={onText ? 'right' : undefined}
+                      icon={checkedIcon}
+                    />
+                  ) : null}
+                  {onText}
+                </StyledOnSwitchText>
+              ) : null}
+            </>
+            <StyledSwitchToggle
+              size={size}
+              checked={checked}
+              width={width}
+              theme={theme}
+              parentEffect={effect}
+              transparent={(image || checkedIcon) && !hasText}
+            >
+              {!onText && !offText ? (
+                <ReqoreIcon
+                  size={size}
+                  image={image}
+                  icon={checked ? checkedIcon : uncheckedIcon}
+                  effect={{ grayscale: !checked, opacity: checked ? 1 : 0.5 }}
+                />
+              ) : null}
             </StyledSwitchToggle>
           </StyledSwitch>
         ) : (
           <ReqoreIcon
             size={size}
-            icon={!image ? (checked ? checkedIcon : uncheckedIcon) : undefined}
+            icon={
+              !image
+                ? checked
+                  ? checkedIcon || 'CheckboxCircleFill'
+                  : uncheckedIcon || 'CheckboxBlankCircleLine'
+                : undefined
+            }
             image={image}
-            grayscale={image ? !checked : undefined}
+            effect={{ grayscale: image ? !checked : undefined, opacity: checked ? 1 : 0.5 }}
             margin='both'
+            intent={intent}
           />
         )}
         {label && labelPosition === 'right' ? (
           <>
             {labelDetailPosition === 'left' && labelDetail}
             <ReqoreTextEffect
-              effect={{ ...effect, interactive: !disabled && !readOnly && !checked }}
+              active={checked}
+              effect={{ ...labelEffect, interactive: !disabled && !readOnly && !checked }}
             >
               {label}
             </ReqoreTextEffect>

package/src/components/Effect/index.tsx

@@ -30,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';
@@ -63,13 +74,14 @@ export interface IReqoreTextEffectProps
   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, minimal, active }: IReqoreTextEffectProps) => {
+  ${({ effect, theme, minimal, active, isText }: IReqoreTextEffectProps) => {
     if (!effect || !effect.gradient) {
       return undefined;
     }
@@ -79,7 +91,7 @@ export const StyledEffect = styled.span`
       theme,
       effect.gradient.colors,
       0,
-      minimal && !active
+      !isText && minimal && !active
     );
     const gradientColorsActive = createEffectGradient(theme, effect.gradient.colors, 0.05);
 
@@ -107,7 +119,7 @@ export const StyledEffect = styled.span`
         getColorFromMaybeString(theme, effect.gradient.borderColor),
         0.15
       )}`;
-    } else {
+    } else if (!isText) {
       // We will use border-image and create a gradient border
       borderColor = 'transparent';
       borderHoverColor = 'transparent';
@@ -231,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/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 &&
@@ -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) => {

package/src/components/MultiSelect/index.tsx

@@ -1,4 +1,4 @@
-import { size } from 'lodash';
+import { omit, size } from 'lodash';
 import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import { ReqoreDropdown, ReqoreInput } from '../..';
@@ -13,7 +13,7 @@ import ReqoreTag, { IReqoreTagProps } from '../Tag';
 import ReqoreTagGroup from '../Tag/group';
 
 export type TReqoreMultiSelectItem = Omit<IReqoreDropdownItem, 'color'> &
-  Pick<IReqoreTagProps, 'badge'> & { isNew?: boolean };
+  Pick<IReqoreTagProps, 'asBadge' | 'rightIcon' | 'actions'> & { isNew?: boolean };
 
 export interface IReqoreMultiSelectProps
   extends Omit<IReqoreControlGroupProps, 'children' | 'vertical' | 'stack'> {
@@ -21,6 +21,7 @@ export interface IReqoreMultiSelectProps
   onValueChange?: (value: string[]) => void;
   items?: TReqoreMultiSelectItem[];
   onItemClick?: (item: IReqoreDropdownItem) => void;
+  onItemClickIcon?: IReqoreTagProps['rightIcon'];
   canRemoveItems?: boolean;
   canCreateItems?: boolean;
   selectedItemEffect?: IReqoreEffect;
@@ -35,6 +36,7 @@ export interface IReqoreMultiSelectItemProps
   item: TReqoreMultiSelectItem;
   onClick?: () => void;
   onRemoveClick?: () => void;
+  onItemClickIcon?: IReqoreTagProps['rightIcon'];
 }
 
 export const ReqoreMultiSelectItem = memo(
@@ -44,6 +46,7 @@ export const ReqoreMultiSelectItem = memo(
     onClick,
     selectedItemEffect,
     selectedItemSize,
+    onItemClickIcon,
   }: IReqoreMultiSelectItemProps) => {
     if (!item) {
       return null;
@@ -58,6 +61,7 @@ export const ReqoreMultiSelectItem = memo(
         effect={!item.intent ? item.effect || selectedItemEffect : undefined}
         size={selectedItemSize}
         onClick={onClick}
+        rightIcon={item.rightIcon || item.disabled ? undefined : onItemClickIcon}
       />
     );
   }
@@ -77,6 +81,7 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
       selectorProps,
       openOnMount,
       enterKeySelects,
+      onItemClickIcon,
       ...rest
     }: IReqoreMultiSelectProps,
     ref
@@ -85,6 +90,7 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
     const [createdItems, setCreatedItems] = useState<TReqoreMultiSelectItem[]>([]);
     const [query, setQuery] = useState<string>('');
     const popoverData = useRef<IPopoverControls>(undefined);
+    const [focused, setFocused] = useState<boolean>(false);
 
     useUpdateEffect(() => {
       onValueChange?.(_value);
@@ -140,11 +146,11 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
     );
 
     /*
-  This code creates a list of all items that are available
-  for selection in the dropdown. It will include the items
-  that are passed in as props, as well as any items that the
-  user has created.
-  */
+    This code creates a list of all items that are available
+    for selection in the dropdown. It will include the items
+    that are passed in as props, as well as any items that the
+    user has created.
+    */
     const allItems: TReqoreMultiSelectItem[] = useMemo(() => {
       const customItems: TReqoreMultiSelectItem[] = size(createdItems)
         ? [{ divider: true, label: 'Custom Items' }, ...createdItems]
@@ -161,7 +167,7 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
 
       // Mark selected items as selected
       filteredItems = filteredItems.map((item: TReqoreMultiSelectItem) => ({
-        ...item,
+        ...omit(item, ['actions', 'asBadge', 'rightIcon']),
         selected: _value.includes(item.value),
       }));
 
@@ -205,12 +211,12 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
 
     const handleKeyDown = useCallback(
       (e: KeyboardEvent) => {
-        if (e.key === 'Enter') {
+        if (e.key === 'Enter' && focused) {
           const item = [...items, ...createdItems].find((item) => item.value === query);
 
           if (item) {
             handleItemSelect(item);
-          } else if (canCreateItems) {
+          } else if (canCreateItems && query) {
             handleItemSelect({
               value: query,
               isNew: true,
@@ -218,7 +224,7 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
           }
         }
       },
-      [items, createdItems, query, canCreateItems]
+      [items, createdItems, query, canCreateItems, focused]
     );
 
     const getItemByValue = useCallback(
@@ -236,6 +242,7 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
               <ReqoreMultiSelectItem
                 key={v}
                 item={getItemByValue(v)}
+                onItemClickIcon={onItemClickIcon}
                 onRemoveClick={canRemoveItems ? () => addRemoveItem(getItemByValue(v)) : undefined}
                 onClick={
                   onItemClick
@@ -257,6 +264,8 @@ export const ReqoreMultiSelect = forwardRef<HTMLDivElement, IReqoreMultiSelectPr
             {...selectorProps}
             multiSelect
             handler='focus'
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
             passPopoverData={(data) => (popoverData.current = data)}
             component={ReqoreInput}
             onClearClick={() => setQuery('')}