@qoretechnologies/reqore 0.30.4 → 0.30.6

package/src/components/Drawer/index.tsx

@@ -27,7 +27,7 @@ export interface IReqoreDrawerProps extends Omit<IReqorePanelProps, 'size'> {
   onClose?: () => void;
   onHideToggle?: (isHidden: boolean) => void;
   hasBackdrop?: boolean;
-  size?: string | 'auto';
+  size?: string;
   maxSize?: string;
   minSize?: string;
   opacity?: number;
@@ -170,7 +170,6 @@ export const ReqoreDrawer = ({
   _isModal,
   width,
   height,
-  actions = [],
   ...rest
 }: IReqoreDrawerProps) => {
   const { animations } = useContext(ReqoreContext);
@@ -200,13 +199,12 @@ export const ReqoreDrawer = ({
 
   const zIndex = useLatestZIndex();
   const wrapperZIndex = useLatestZIndex();
-  const _actions: IReqorePanelAction[] = useMemo(() => {
-    const builtActions: IReqorePanelAction[] = [...actions];
+  const actions: IReqorePanelAction[] = useMemo(() => {
+    const actions: IReqorePanelAction[] = [];
 
     /* Adding a hide/show button to the drawer. */
     if (hidable) {
-      builtActions.push({
-        responsive: false,
+      actions.push({
         icon: getHideShowIcon(position, _isHidden),
         onClick: () => {
           setIsHidden(!_isHidden);
@@ -220,15 +218,14 @@ export const ReqoreDrawer = ({
 
     /* Adding a close button to the drawer. */
     if (onClose) {
-      builtActions.push({
-        responsive: false,
+      actions.push({
         icon: 'CloseLine',
         onClick: onClose,
         className: 'reqore-drawer-close-button',
       });
     }
 
-    return builtActions;
+    return actions;
   }, [hidable, position, onClose]);
 
   const positions = useMemo(() => {
@@ -266,27 +263,27 @@ export const ReqoreDrawer = ({
             />
           ) : null}
           <Resizable
-            className={`${className || ''} reqore-drawer-resizable`}
+            className='reqore-drawer-resizable'
             maxHeight={
               layout === 'horizontal' || layout === 'center' ? maxSize || '90vh' : undefined
             }
             minHeight={
               layout === 'center'
-                ? '40px'
+                ? '140px'
                 : layout === 'horizontal'
                 ? _isHidden
                   ? 0
-                  : minSize || '40px'
+                  : minSize || '140px'
                 : undefined
             }
             maxWidth={layout === 'vertical' || layout === 'center' ? maxSize || '90vw' : undefined}
             minWidth={
               layout === 'center'
-                ? '40px'
+                ? '140px'
                 : layout === 'vertical'
                 ? _isHidden
                   ? 0
-                  : minSize || '40px'
+                  : minSize || '140px'
                 : undefined
             }
             as={StyledDrawerResizable}
@@ -345,19 +342,21 @@ export const ReqoreDrawer = ({
               <StyledCloseWrapper
                 className='reqore-drawer-controls'
                 position={position}
-                w={layout === 'vertical' ? 0 : _size.width}
-                h={layout === 'horizontal' ? 0 : _size.height}
+                w={layout === 'vertical' && _isHidden ? 0 : _size.width}
+                h={layout === 'horizontal' && _isHidden ? 0 : _size.height}
               >
-                <ReqoreButton
-                  flat
-                  customTheme={theme}
-                  className='reqore-drawer-control reqore-drawer-hide-button'
-                  icon={getHideShowIcon(position, _isHidden)}
-                  onClick={() => {
-                    setIsHidden(!_isHidden);
-                    onHideToggle && onHideToggle(!_isHidden);
-                  }}
-                />
+                {hidable && (
+                  <ReqoreButton
+                    flat
+                    customTheme={theme}
+                    className='reqore-drawer-control reqore-drawer-hide-button'
+                    icon={getHideShowIcon(position, _isHidden)}
+                    onClick={() => {
+                      setIsHidden(!_isHidden);
+                      onHideToggle && onHideToggle(!_isHidden);
+                    }}
+                  />
+                )}
               </StyledCloseWrapper>
             ) : null}
             {!_isHidden && (
@@ -365,12 +364,12 @@ export const ReqoreDrawer = ({
                 {...rest}
                 opacity={opacity}
                 blur={hasBackdrop ? 0 : blur}
-                actions={_actions}
+                actions={actions}
                 customTheme={customTheme}
                 intent={intent}
                 rounded={floating || _isModal ? true : false}
                 flat={flat}
-                className={`reqore-drawer`}
+                className={`${className || ''} reqore-drawer`}
                 style={{
                   width: '100%',
                   maxHeight: '100%',

package/src/components/Dropdown/index.tsx

@@ -22,7 +22,6 @@ export interface IReqoreDropdownProps extends Partial<IPopoverOptions> {
   caretPosition?: 'left' | 'right';
   isDefaultOpen?: boolean;
   onItemSelect?: TDropdownItemOnClick;
-  style?: React.CSSProperties;
 }
 
 function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
@@ -65,7 +64,7 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
         ...rest,
         icon: caretPosition === 'left' ? icon || 'ArrowDownSFill' : rightIcon,
         rightIcon: caretPosition === 'right' ? icon || 'ArrowDownSFill' : rightIcon,
-        style: buttonStyle || rest.style,
+        style: buttonStyle,
         disabled: !size(items),
         className: `${(rest as any)?.className || ''} reqore-dropdown-control`,
       } as T),
@@ -99,7 +98,6 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
       useTargetWidth={useTargetWidth}
       component={component || ReqoreButton}
       componentProps={componentProps}
-      isReqoreComponent
       noWrapper
       placement={placement || 'bottom-start'}
       handler={handler || 'click'}

package/src/components/Effect/index.tsx

@@ -269,7 +269,6 @@ export const StyledEffect = styled.span`
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow: hidden;
-          min-width: 30px;
         `
       : undefined}
 

package/src/components/Icon/index.tsx

@@ -1,27 +1,22 @@
-import React, { forwardRef, memo, useContext } from 'react';
+import React, { memo, useContext } from 'react';
 import { IconContext } from 'react-icons';
 import { IconBaseProps, IconType } from 'react-icons/lib';
 import * as RemixIcons from 'react-icons/ri';
 import styled, { css } from 'styled-components';
 import { ReqoreThemeContext } from '../..';
 import { ICON_FROM_SIZE, PADDING_FROM_SIZE, TSizes } from '../../constants/sizes';
-import { getColorFromMaybeString } from '../../helpers/colors';
+import { TReqoreIntent } from '../../constants/theme';
 import { isStringSize } from '../../helpers/utils';
-import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import { useTooltip } from '../../hooks/useTooltip';
-import { IReqoreIntent, IWithReqoreEffect, IWithReqoreTooltip } from '../../types/global';
+import { IWithReqoreEffect } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import { StyledEffect, TReqoreEffectColor } from '../Effect';
+import { StyledEffect } from '../Effect';
 
-export interface IReqoreIconProps
-  extends React.HTMLAttributes<HTMLSpanElement>,
-    IWithReqoreEffect,
-    IWithReqoreTooltip,
-    IReqoreIntent {
+export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement>, IWithReqoreEffect {
   icon?: IReqoreIconName;
-  color?: TReqoreEffectColor;
+  color?: string;
   size?: TSizes | string;
   iconProps?: IconBaseProps;
+  intent?: TReqoreIntent;
   margin?: 'right' | 'left' | 'both';
   image?: string;
   rounded?: boolean;
@@ -57,85 +52,71 @@ export const StyledIconWrapper = styled(StyledEffect)<{ margin: 'right' | 'left'
 `;
 
 const ReqoreIcon = memo(
-  forwardRef<HTMLSpanElement, IReqoreIconProps>(
-    (
-      {
-        icon,
-        size = 'normal',
-        className,
-        color,
-        margin,
-        style = {},
-        iconProps,
-        intent,
-        image,
-        tooltip,
-        ...rest
-      }: IReqoreIconProps,
-      ref
-    ) => {
-      const { targetRef } = useCombinedRefs(ref);
-      const theme = useContext(ReqoreThemeContext);
-      const Icon: IconType = RemixIcons[`Ri${icon}`];
-      const finalColor: string | undefined = intent
-        ? theme.intents[intent]
-        : getColorFromMaybeString(theme, color);
-      const finalSize: string = isStringSize(size) ? ICON_FROM_SIZE[size] : size;
-
-      useTooltip(targetRef.current, tooltip);
-
-      if (image) {
-        return (
-          <StyledIconWrapper
-            {...rest}
-            ref={targetRef}
-            size={size}
-            margin={margin}
-            className={`${className || ''} reqore-icon`}
-            style={{ ...style, width: finalSize, height: finalSize }}
-          >
-            <img src={image} alt='' />
-          </StyledIconWrapper>
-        );
-      }
-
-      if (!Icon) {
-        return (
-          <StyledIconWrapper
-            {...rest}
-            ref={targetRef}
-            size={size}
-            margin={margin}
-            className={`${className || ''} reqore-icon`}
-            style={{ ...style, width: finalSize, height: finalSize }}
-          />
-        );
-      }
+  ({
+    icon,
+    size = 'normal',
+    className,
+    color,
+    margin,
+    style = {},
+    iconProps,
+    intent,
+    image,
+    ...rest
+  }: IReqoreIconProps) => {
+    const theme = useContext(ReqoreThemeContext);
+    const Icon: IconType = RemixIcons[`Ri${icon}`];
+    const finalColor: string | undefined = intent ? theme.intents[intent] : color;
+    const finalSize: string = isStringSize(size) ? ICON_FROM_SIZE[size] : size;
 
+    if (image) {
       return (
         <StyledIconWrapper
           {...rest}
-          ref={targetRef}
-          margin={margin}
           size={size}
-          style={{ ...style, width: finalSize, height: finalSize }}
+          margin={margin}
           className={`${className || ''} reqore-icon`}
+          style={{ ...style, width: finalSize, height: finalSize }}
         >
-          <IconContext.Provider
-            value={{
-              color: finalColor || 'inherit',
-              size: finalSize,
-              style: {
-                verticalAlign: 'super',
-              },
-            }}
-          >
-            <Icon {...iconProps} />
-          </IconContext.Provider>
+          <img src={image} alt='' />
         </StyledIconWrapper>
       );
     }
-  )
+
+    if (!Icon) {
+      return (
+        <StyledIconWrapper
+          {...rest}
+          size={size}
+          margin={margin}
+          className={`${className || ''} reqore-icon`}
+          style={{ ...style, width: finalSize, height: finalSize }}
+        />
+      );
+    }
+
+    return (
+      <StyledIconWrapper
+        {...rest}
+        margin={margin}
+        size={size}
+        style={{ ...style, width: finalSize, height: finalSize }}
+        className={`${className || ''} reqore-icon`}
+      >
+        <IconContext.Provider
+          value={{
+            color: finalColor || 'inherit',
+            size: finalSize,
+            style: {
+              verticalAlign: 'super',
+            },
+          }}
+        >
+          <Icon {...iconProps} />
+        </IconContext.Provider>
+      </StyledIconWrapper>
+    );
+  }
 );
 
 export default ReqoreIcon;

package/src/components/Input/index.tsx

@@ -22,7 +22,7 @@ import {
   IWithReqoreEffect,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import { StyledEffect, TReqoreEffectColor } from '../Effect';
+import { StyledEffect } from '../Effect';
 import ReqoreIcon from '../Icon';
 import ReqoreInputClearButton from '../InputClearButton';
 
@@ -48,7 +48,6 @@ export interface IReqoreInputProps
   rounded?: boolean;
   type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
   wrapperStyle?: React.CSSProperties;
-  iconColor?: TReqoreEffectColor;
 }
 
 export interface IReqoreInputStyle extends IReqoreInputProps {
@@ -60,10 +59,8 @@ export interface IReqoreInputStyle extends IReqoreInputProps {
 
 export const StyledInputWrapper = styled.div<IReqoreInputStyle>`
   height: ${({ _size }) => SIZE_TO_PX[_size]}px;
-  width: ${({ width, fluid, fixed }) => (width ? `${width}px` : fluid && !fixed ? '100%' : 'auto')};
-  max-width: ${({ fluid, fixed }) => (fluid && !fixed ? '100%' : undefined)};
-  min-width: 60px;
-  flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 1 auto')};
+  width: ${({ width }) => (width ? `${width}px` : 'auto')};
+  flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 0 auto' : '0 0 auto')};
   font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
   position: relative;
   overflow: hidden;
@@ -153,7 +150,6 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       className,
       onClearClick,
       icon,
-      iconColor,
       flat,
       rounded = true,
       minimal,
@@ -189,7 +185,7 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       >
         {icon && (
           <StyledIconWrapper _size={size}>
-            <ReqoreIcon size={size} icon={icon} color={iconColor} />
+            <ReqoreIcon size={size} icon={icon} />
           </StyledIconWrapper>
         )}
         <StyledInput

package/src/components/InternalPopover/index.tsx

@@ -1,6 +1,6 @@
-import { cloneDeep, isString } from 'lodash';
+import { isString } from 'lodash';
 import { rgba } from 'polished';
-import React, { MutableRefObject, memo, useContext, useEffect, useRef, useState } from 'react';
+import React, { MutableRefObject, useContext, useEffect, useRef, useState } from 'react';
 import { usePopper } from 'react-popper';
 import styled, { css } from 'styled-components';
 import { RADIUS_FROM_SIZE } from '../../constants/sizes';
@@ -62,8 +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, noWrapper, ...rest }: any) =>
-    !flat && noWrapper ? `1px solid ${getPopoverArrowColor({ ...rest, flat })}` : undefined};
+  border: ${({ flat, isString, ...rest }: any) =>
+    !flat && !isString ? `1px solid ${getPopoverArrowColor({ ...rest, flat })}` : undefined};
 
   ${({ transparent }) =>
     !transparent &&
@@ -129,7 +129,7 @@ const StyledPopoverWrapper = styled.div<{ theme: IReqoreTheme }>`
   }
 `;
 
-const StyledPopoverContent = styled.div`
+const StyledPopoverContent = styled.div<{ isString?: boolean }>`
   width: 100%;
   height: 100%;
   z-index: 20;
@@ -139,138 +139,133 @@ const StyledPopoverContent = styled.div`
 
 export interface IReqoreInternalPopoverProps extends IPopoverData {}
 
-const InternalPopover: React.FC<IReqoreInternalPopoverProps> = memo(
-  ({
-    targetElement,
-    content,
-    id,
+const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
+  targetElement,
+  content,
+  id,
+  placement,
+  noArrow,
+  useTargetWidth,
+  transparent,
+  maxWidth,
+  maxHeight,
+  blur,
+  intent,
+  title,
+  icon,
+  minimal,
+  flat = true,
+  effect,
+}) => {
+  const { removePopover, updatePopover, uiScale } = useContext(PopoverContext);
+  const [popperElement, setPopperElement] = useState(null);
+  const [arrowElement, setArrowElement] = useState(null);
+  const popperRef: MutableRefObject<any> = useRef(null);
+  const { styles, attributes } = usePopper(targetElement, popperElement, {
     placement,
-    noArrow,
-    noWrapper,
-    useTargetWidth,
-    transparent,
-    maxWidth,
-    maxHeight,
-    blur,
-    intent,
-    title,
-    icon,
-    minimal,
-    flat = true,
-    effect,
-  }) => {
-    const { removePopover, updatePopover, uiScale } = useContext(PopoverContext);
-    const [popperElement, setPopperElement] = useState(null);
-    const [arrowElement, setArrowElement] = useState(null);
-    const popperRef: MutableRefObject<any> = useRef(null);
-    const { styles, attributes } = usePopper(targetElement, popperElement, {
-      placement,
-      modifiers: [
-        {
-          name: 'offset',
-          options: {
-            offset: [0, noArrow ? 5 : 10],
-          },
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, noArrow ? 5 : 10],
         },
-        {
-          name: 'arrow',
-          options: {
-            element: arrowElement,
-          },
+      },
+      {
+        name: 'arrow',
+        options: {
+          element: arrowElement,
         },
-        {
-          name: 'hide',
-          enabled: true,
-        },
-      ],
-    });
+      },
+      {
+        name: 'hide',
+        enabled: true,
+      },
+    ],
+  });
 
-    useEffect(() => {
-      if (popperRef.current) {
-        updatePopover?.(id, { popperRef: cloneDeep(popperRef) });
-      }
-    }, [popperRef]);
+  useEffect(() => {
+    if (popperRef.current) {
+      updatePopover?.(id, { popperRef });
+    }
+  }, [popperRef]);
 
-    useEffect(() => {
-      if (attributes.popper?.['data-popper-reference-hidden']) {
-        removePopover?.(id);
-      }
-    }, [attributes.popper]);
+  useEffect(() => {
+    if (attributes.popper?.['data-popper-reference-hidden']) {
+      removePopover?.(id);
+    }
+  }, [attributes.popper]);
 
-    /* Getting the x and y values from the transform property of the popper element. */
-    const translateValues = styles.popper.transform
-      ?.replace('translate3d(', '')
-      .replace('translate(', '')
-      .replace(')', '')
-      .split(',')
-      .map((axis) => {
-        if (uiScale || uiScale === 0) {
-          return parseInt(axis, 10) < 0
-            ? parseInt(axis, 10) * uiScale
-            : parseInt(axis, 10) / uiScale;
-        }
-        return parseInt(axis, 10);
-      });
+  /* Getting the x and y values from the transform property of the popper element. */
+  const translateValues = styles.popper.transform
+    ?.replace('translate3d(', '')
+    .replace('translate(', '')
+    .replace(')', '')
+    .split(',')
+    .map((axis) => {
+      if (uiScale || uiScale === 0) {
+        return parseInt(axis, 10) < 0 ? parseInt(axis, 10) * uiScale : parseInt(axis, 10) / uiScale;
+      }
+      return parseInt(axis, 10);
+    });
 
-    return (
-      <ReqoreThemeProvider>
-        {blur > 0 ? <StyledBackdrop zIndex={999998} blur={blur} closable /> : null}
-        <StyledPopoverWrapper
-          maxWidth={maxWidth}
-          maxHeight={maxHeight}
-          transparent={transparent}
-          effect={effect}
-          isOpaque={!transparent && !minimal}
-          intent={intent}
-          flat={flat}
-          noWrapper={noWrapper}
-          dim={flat && !transparent && !effect && minimal}
-          className='reqore-popover-content'
-          ref={(el) => {
-            setPopperElement(el);
-            popperRef.current = el;
-          }}
-          style={{
-            ...styles.popper,
-            transform: `translate(${translateValues?.[0] || 0}px, ${translateValues?.[1] || 0}px)`,
-            width: useTargetWidth && (targetElement?.getBoundingClientRect()?.width || undefined),
-          }}
-          {...attributes.popper}
-        >
-          {!noArrow && !transparent ? (
-            <StyledPopoverArrow ref={setArrowElement} style={styles.arrow} data-popper-arrow />
-          ) : null}
-          <StyledPopoverContent>
-            {!noWrapper || isString(content) ? (
-              <ReqoreMessage
-                opaque={!transparent && !minimal}
-                className='reqore-popover-text'
-                intent={intent}
-                title={title}
-                icon={icon}
-                minimal={transparent}
-                flat={flat || transparent}
-                effect={effect}
-              >
-                {content}
-              </ReqoreMessage>
-            ) : (
-              <>
-                {React.Children.map(content, (child) =>
-                  child
-                    ? React.cloneElement(child, {
-                        _insidePopover: true,
-                        _popoverId: id,
-                      })
-                    : null
-                )}
-              </>
-            )}
-          </StyledPopoverContent>
-        </StyledPopoverWrapper>
-      </ReqoreThemeProvider>
-    );
-  }
-);
+  return (
+    <ReqoreThemeProvider>
+      {blur > 0 ? <StyledBackdrop zIndex={999998} blur={blur} closable /> : null}
+      <StyledPopoverWrapper
+        maxWidth={maxWidth}
+        maxHeight={maxHeight}
+        transparent={transparent}
+        effect={effect}
+        isOpaque={!transparent && !minimal}
+        intent={intent}
+        flat={flat}
+        isString={isString(content)}
+        dim={flat && !transparent && !effect && minimal}
+        className='reqore-popover-content'
+        ref={(el) => {
+          setPopperElement(el);
+          popperRef.current = el;
+        }}
+        style={{
+          ...styles.popper,
+          transform: `translate(${translateValues?.[0] || 0}px, ${translateValues?.[1] || 0}px)`,
+          width: useTargetWidth && (targetElement?.getBoundingClientRect()?.width || undefined),
+        }}
+        {...attributes.popper}
+      >
+        {!noArrow && !transparent ? (
+          <StyledPopoverArrow ref={setArrowElement} style={styles.arrow} data-popper-arrow />
+        ) : null}
+        <StyledPopoverContent isString={isString(content)}>
+          {isString(content) ? (
+            <ReqoreMessage
+              opaque={!transparent && !minimal}
+              className='reqore-popover-text'
+              intent={intent}
+              title={title}
+              icon={icon}
+              minimal={transparent}
+              flat={flat || transparent}
+              effect={effect}
+            >
+              {content}
+            </ReqoreMessage>
+          ) : (
+            <>
+              {React.Children.map(content, (child) =>
+                child
+                  ? React.cloneElement(child, {
+                      _insidePopover: true,
+                      _popoverId: id,
+                    })
+                  : null
+              )}
+            </>
+          )}
+        </StyledPopoverContent>
+      </StyledPopoverWrapper>
+    </ReqoreThemeProvider>
+  );
+};
 
 export default InternalPopover;