@qoretechnologies/reqore 0.29.8 → 0.30.0

package/src/components/Drawer/index.tsx

@@ -205,6 +205,7 @@ export const ReqoreDrawer = ({
     /* Adding a hide/show button to the drawer. */
     if (hidable) {
       actions.push({
+        responsive: false,
         icon: getHideShowIcon(position, _isHidden),
         onClick: () => {
           setIsHidden(!_isHidden);
@@ -219,6 +220,7 @@ export const ReqoreDrawer = ({
     /* Adding a close button to the drawer. */
     if (onClose) {
       actions.push({
+        responsive: false,
         icon: 'CloseLine',
         onClick: onClose,
         className: 'reqore-drawer-close-button',
@@ -269,21 +271,21 @@ export const ReqoreDrawer = ({
             }
             minHeight={
               layout === 'center'
-                ? '140px'
+                ? '40px'
                 : layout === 'horizontal'
                 ? _isHidden
                   ? 0
-                  : minSize || '140px'
+                  : minSize || '40px'
                 : undefined
             }
             maxWidth={layout === 'vertical' || layout === 'center' ? maxSize || '90vw' : undefined}
             minWidth={
               layout === 'center'
-                ? '140px'
+                ? '40px'
                 : layout === 'vertical'
                 ? _isHidden
                   ? 0
-                  : minSize || '140px'
+                  : minSize || '40px'
                 : undefined
             }
             as={StyledDrawerResizable}

package/src/components/Effect/index.tsx

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

package/src/components/Icon/index.tsx

@@ -1,23 +1,27 @@
-import React, { memo, useContext } from 'react';
+import React, { forwardRef, 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 { TReqoreIntent } from '../../constants/theme';
 import { getColorFromMaybeString } from '../../helpers/colors';
 import { isStringSize } from '../../helpers/utils';
-import { IWithReqoreEffect } from '../../types/global';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useTooltip } from '../../hooks/useTooltip';
+import { IReqoreIntent, IWithReqoreEffect, IWithReqoreTooltip } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import { StyledEffect, TReqoreEffectColor } from '../Effect';
 
-export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement>, IWithReqoreEffect {
+export interface IReqoreIconProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    IWithReqoreEffect,
+    IWithReqoreTooltip,
+    IReqoreIntent {
   icon?: IReqoreIconName;
   color?: TReqoreEffectColor;
   size?: TSizes | string;
   iconProps?: IconBaseProps;
-  intent?: TReqoreIntent;
   margin?: 'right' | 'left' | 'both';
   image?: string;
   rounded?: boolean;
@@ -53,73 +57,85 @@ export const StyledIconWrapper = styled(StyledEffect)<{ margin: 'right' | 'left'
 `;
 
 const ReqoreIcon = memo(
-  ({
-    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]
-      : getColorFromMaybeString(theme, color);
-    const finalSize: string = isStringSize(size) ? ICON_FROM_SIZE[size] : size;
+  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 }}
+          />
+        );
+      }
 
-    if (image) {
       return (
         <StyledIconWrapper
           {...rest}
-          size={size}
+          ref={targetRef}
           margin={margin}
-          className={`${className || ''} reqore-icon`}
+          size={size}
           style={{ ...style, width: finalSize, height: finalSize }}
+          className={`${className || ''} reqore-icon`}
         >
-          <img src={image} alt='' />
+          <IconContext.Provider
+            value={{
+              color: finalColor || 'inherit',
+              size: finalSize,
+              style: {
+                verticalAlign: 'super',
+              },
+            }}
+          >
+            <Icon {...iconProps} />
+          </IconContext.Provider>
         </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

@@ -60,7 +60,7 @@ export interface IReqoreInputStyle extends IReqoreInputProps {
 
 export const StyledInputWrapper = styled.div<IReqoreInputStyle>`
   height: ${({ _size }) => SIZE_TO_PX[_size]}px;
-  width: ${({ width }) => (width ? `${width}px` : 'auto')};
+  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')};

package/src/components/InternalPopover/index.tsx

@@ -1,6 +1,6 @@
 import { isString } from 'lodash';
 import { rgba } from 'polished';
-import React, { MutableRefObject, useContext, useEffect, useRef, useState } from 'react';
+import React, { MutableRefObject, memo, useContext, useEffect, useRef, useState } from 'react';
 import { usePopper } from 'react-popper';
 import styled, { css } from 'styled-components';
 import { RADIUS_FROM_SIZE } from '../../constants/sizes';
@@ -139,134 +139,138 @@ const StyledPopoverContent = styled.div`
 
 export interface IReqoreInternalPopoverProps extends IPopoverData {}
 
-const InternalPopover: React.FC<IReqoreInternalPopoverProps> = ({
-  targetElement,
-  content,
-  id,
-  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, {
+const InternalPopover: React.FC<IReqoreInternalPopoverProps> = memo(
+  ({
+    targetElement,
+    content,
+    id,
     placement,
-    modifiers: [
-      {
-        name: 'offset',
-        options: {
-          offset: [0, noArrow ? 5 : 10],
+    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],
+          },
         },
-      },
-      {
-        name: 'arrow',
-        options: {
-          element: arrowElement,
+        {
+          name: 'arrow',
+          options: {
+            element: arrowElement,
+          },
         },
-      },
-      {
-        name: 'hide',
-        enabled: true,
-      },
-    ],
-  });
-
-  useEffect(() => {
-    if (popperRef.current) {
-      updatePopover?.(id, { popperRef });
-    }
-  }, [popperRef]);
+        {
+          name: 'hide',
+          enabled: true,
+        },
+      ],
+    });
 
-  useEffect(() => {
-    if (attributes.popper?.['data-popper-reference-hidden']) {
-      removePopover?.(id);
-    }
-  }, [attributes.popper]);
+    useEffect(() => {
+      if (popperRef.current) {
+        updatePopover?.(id, { popperRef });
+      }
+    }, [popperRef]);
 
-  /* 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;
+    useEffect(() => {
+      if (attributes.popper?.['data-popper-reference-hidden']) {
+        removePopover?.(id);
       }
-      return parseInt(axis, 10);
-    });
+    }, [attributes.popper]);
 
-  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>
-  );
-};
+    /* 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>
+    );
+  }
+);
 
 export default InternalPopover;