@qoretechnologies/reqore 0.29.9 → 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/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;