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

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

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 {
@@ -61,10 +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')};
-  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)};
+  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;
@@ -154,7 +150,6 @@ const ReqoreInput = forwardRef<HTMLDivElement, IReqoreInputProps>(
       className,
       onClearClick,
       icon,
-      iconColor,
       flat,
       rounded = true,
       minimal,
@@ -190,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