@qoretechnologies/reqore 0.30.6 → 0.30.8

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

package/src/components/Dropdown/index.tsx

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

@@ -114,10 +114,16 @@ export const StyledEffect = styled.span`
     const gradientColors = createEffectGradient(
       theme,
       effect.gradient.colors,
-      0,
+      minimal ? 0.05 : 0,
       !isText && minimal && !active
     );
-    const gradientColorsActive = createEffectGradient(theme, effect.gradient.colors, 0.05);
+    const gradientColorsActive = createEffectGradient(
+      theme,
+      effect.gradient.colors,
+      0.05,
+      minimal,
+      true
+    );
 
     const gradientDirectionOrShape =
       gradientType === 'linear'
@@ -167,16 +173,17 @@ export const StyledEffect = styled.span`
       background: ${active ? gradientActive : gradient};
       border-color: ${borderColor} !important;
 
-      ${color &&
-      css`
-        color: ${getReadableColorFrom(getColorFromMaybeString(theme, color), false)} !important;
-        &::placeholder {
-          color: ${rgba(
-            getReadableColorFrom(getColorFromMaybeString(theme, color), false),
-            0.7
-          )} !important;
-        }
-      `}
+      ${color && !minimal
+        ? css`
+            color: ${getReadableColorFrom(getColorFromMaybeString(theme, color), false)} !important;
+            &::placeholder {
+              color: ${rgba(
+                getReadableColorFrom(getColorFromMaybeString(theme, color), false),
+                0.7
+              )} !important;
+            }
+          `
+        : undefined}
 
       ${effect.gradient.animate === 'always' || (effect.gradient.animate === 'active' && active)
         ? css`
@@ -269,6 +276,7 @@ export const StyledEffect = styled.span`
           white-space: nowrap;
           text-overflow: ellipsis;
           overflow: hidden;
+          min-width: 30px;
         `
       : undefined}
 
@@ -364,9 +372,9 @@ export const ReqoreEffect = ({ children, ...rest }: IReqoreTextEffectProps) => {
   );
 };
 
-export const ReqoreTextEffect = ({ children, ...rest }: IReqoreTextEffectProps) => {
+export const ReqoreTextEffect = ({ children, className, ...rest }: IReqoreTextEffectProps) => {
   return (
-    <StyledTextEffect className='reqore-text-effect' {...rest}>
+    <StyledTextEffect className={`${className || ''} reqore-text-effect`} {...rest}>
       {children}
     </StyledTextEffect>
   );

package/src/components/Icon/index.tsx

@@ -1,22 +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 } from '../Effect';
+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?: string;
+  color?: TReqoreEffectColor;
   size?: TSizes | string;
   iconProps?: IconBaseProps;
-  intent?: TReqoreIntent;
   margin?: 'right' | 'left' | 'both';
   image?: string;
   rounded?: boolean;
@@ -52,71 +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] : 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

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