@qoretechnologies/reqore 0.20.7 → 0.22.0

package/src/components/Tabs/item.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useRef } from 'react';
+import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { IReqoreTabsListItem } from '.';
 import { TABS_PADDING_TO_PX, TSizes } from '../../constants/sizes';
@@ -87,15 +87,14 @@ const ReqoreTabsListItem = forwardRef(
     }: IReqoreTabListItemProps,
     ref
   ) => {
-    const innerRef = useRef(null);
-    const combinedRef = useCombinedRefs(innerRef, ref);
+    const { targetRef } = useCombinedRefs(ref);
     const theme = useReqoreTheme('main', customTheme);
     const _intent = activeIntent || intent;
     const activeColor = _intent ? theme.intents[_intent] : theme.main;
 
     return (
       <StyledTabListItem
-        ref={combinedRef}
+        ref={targetRef}
         {...props}
         className={className}
         intent={intent}

package/src/components/Tag/index.tsx

@@ -1,5 +1,5 @@
 import _size from 'lodash/size';
-import React, { forwardRef, useContext, useRef } from 'react';
+import React, { forwardRef, useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { ReqorePopover } from '../..';
 import {
@@ -9,24 +9,24 @@ import {
   TEXT_FROM_SIZE,
   TSizes,
 } from '../../constants/sizes';
-import { IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ThemeContext from '../../context/ThemeContext';
 import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import usePopover from '../../hooks/usePopover';
-import { IReqoreTooltip } from '../../types/global';
+import { useTooltip } from '../../hooks/useTooltip';
+import { IReqoreDisabled, IReqoreIntent, IWithReqoreTooltip } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreIcon from '../Icon';
 
-export interface IReqoreTagAction {
+export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
   icon: IReqoreIconName;
   onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-  disabled?: boolean;
-  tooltip?: IReqoreTooltip;
-  intent?: IReqoreIntent;
 }
 
-export interface IReqoreTagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> {
+export interface IReqoreTagProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,
+    IWithReqoreTooltip,
+    IReqoreDisabled {
   size?: TSizes;
   label?: string;
   onRemoveClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
@@ -34,12 +34,10 @@ export interface IReqoreTagProps extends Omit<React.HTMLAttributes<HTMLSpanEleme
   icon?: IReqoreIconName;
   rightIcon?: IReqoreIconName;
   color?: string;
-  tooltip?: IReqoreTooltip;
-  disabled?: boolean;
   actions?: IReqoreTagAction[];
   width?: string;
   badge?: boolean;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
 }
 
 export interface IReqoreTagStyle extends IReqoreTagProps {
@@ -154,15 +152,10 @@ const ReqoreTag = forwardRef(
     }: IReqoreTagProps,
     ref
   ) => {
-    const innerRef = useRef(null);
-    const combinedRef = useCombinedRefs(innerRef, ref);
+    const { targetRef } = useCombinedRefs(ref);
     const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
 
-    usePopover({
-      ...tooltip,
-      targetElement: combinedRef.current,
-      show: !!tooltip?.content,
-    });
+    useTooltip(targetRef.current, tooltip);
 
     // If color or intent was specified, set the color
     const customColor = intent ? theme.intents[intent] : color;
@@ -173,7 +166,7 @@ const ReqoreTag = forwardRef(
         color={customColor}
         className={`${className || ''} reqore-tag`}
         size={size}
-        ref={combinedRef}
+        ref={targetRef}
         badge={badge}
         removable={!!onRemoveClick}
         interactive={!!onClick && !rest.disabled}
@@ -199,7 +192,6 @@ const ReqoreTag = forwardRef(
           ? actions.map((action) => (
               <>
                 <ReqorePopover
-                  {...action.tooltip}
                   component={StyledButtonWrapper}
                   componentProps={{
                     size,
@@ -207,6 +199,11 @@ const ReqoreTag = forwardRef(
                     className: 'reqore-tag-action',
                     onClick: action.onClick,
                   }}
+                  {...(action.tooltip
+                    ? typeof action.tooltip === 'string'
+                      ? { tooltip: action.tooltip }
+                      : action.tooltip || {}
+                    : {})}
                   noWrapper
                 >
                   <ReqoreIcon icon={action.icon} size={`${TEXT_FROM_SIZE[size]}px`} />

package/src/components/Textarea/index.tsx

@@ -1,14 +1,31 @@
-import { darken, rgba } from 'polished';
+import { rgba } from 'polished';
 import React, { forwardRef } from 'react';
-import styled from 'styled-components';
-import { TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import styled, { css } from 'styled-components';
+import { RADIUS_FROM_SIZE, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
-import { getReadableColor } from '../../helpers/colors';
+import { changeLightness, getReadableColor } from '../../helpers/colors';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { useTooltip } from '../../hooks/useTooltip';
+import { DisabledElement, ReadOnlyElement } from '../../styles';
+import {
+  IReqoreDisabled,
+  IReqoreIntent,
+  IReqoreReadOnly,
+  IWithReqoreCustomTheme,
+  IWithReqoreTooltip,
+} from '../../types/global';
+import { IReqoreInputStyle } from '../Input';
 import ReqoreInputClearButton from '../InputClearButton';
 
-export interface IReqoreTextareaProps extends React.HTMLAttributes<HTMLTextAreaElement> {
+export interface IReqoreTextareaProps
+  extends React.HTMLAttributes<HTMLTextAreaElement>,
+    IReqoreReadOnly,
+    IReqoreDisabled,
+    IWithReqoreCustomTheme,
+    IWithReqoreTooltip,
+    IReqoreIntent {
   autoFocus?: boolean;
-  disabled?: boolean;
   width?: number;
   height?: number;
   scaleWithContent?: boolean;
@@ -18,6 +35,8 @@ export interface IReqoreTextareaProps extends React.HTMLAttributes<HTMLTextAreaE
   value?: string;
   rows?: number;
   cols?: number;
+  rounded?: boolean;
+  flat?: boolean;
   onClearClick?: () => any;
 }
 
@@ -42,25 +61,39 @@ export const StyledTextarea = styled.textarea<IReqoreTextareaStyle>`
   padding: 5px 7px;
   resize: none;
 
-  background-color: ${({ theme, minimal }: IReqoreTextareaStyle) =>
-    minimal ? 'transparent' : darken(0.01, theme.main)};
-  color: ${({ theme }: IReqoreTextareaStyle) => getReadableColor(theme)};
+  background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
+    minimal ? 'transparent' : rgba(theme.main, 0.3)};
+  color: ${({ theme }: IReqoreInputStyle) => getReadableColor(theme)};
 
-  border: ${({ minimal, theme }) =>
-    !minimal ? `1px solid ${rgba(getReadableColor(theme), 0.2)}` : 0};
-  border-bottom: ${({ minimal, theme }) =>
-    minimal ? `0.5px solid ${rgba(getReadableColor(theme), 0.2)}` : undefined};
-
-  border-radius: ${({ minimal }) => (minimal ? 0 : 3)}px;
   transition: all 0.2s ease-out;
 
   &:active,
-  &:focus,
-  &:hover {
-    outline: none;
-    border-color: ${({ theme }) => rgba(getReadableColor(theme), 0.3)};
+  &:focus {
+    background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
+      minimal ? 'transparent' : rgba(theme.main, 0.5)};
   }
 
+  border-radius: ${({ minimal, rounded, _size }) =>
+    minimal || !rounded ? 0 : RADIUS_FROM_SIZE[_size]}px;
+  border: ${({ minimal, theme, flat }) =>
+    !minimal && !flat ? `1px solid ${changeLightness(theme.main, 0.05)}` : 0};
+  border-bottom: ${({ minimal, theme, flat }) =>
+    minimal && !flat ? `0.5px solid ${changeLightness(theme.main, 0.05)}` : undefined};
+
+  transition: all 0.2s ease-out;
+
+  ${({ disabled, readOnly }) =>
+    !disabled && !readOnly
+      ? css`
+          &:active,
+          &:focus,
+          &:hover {
+            outline: none;
+            border-color: ${({ theme }) => changeLightness(theme.main, 0.1)};
+          }
+        `
+      : undefined}
+
   &::placeholder {
     transition: all 0.2s ease-out;
     color: ${({ theme }) => rgba(getReadableColor(theme), 0.3)};
@@ -72,9 +105,10 @@ export const StyledTextarea = styled.textarea<IReqoreTextareaStyle>`
     }
   }
 
+  ${({ readOnly }) => readOnly && ReadOnlyElement};
+
   &:disabled {
-    pointer-events: none;
-    opacity: 0.3;
+    ${DisabledElement};
   }
 `;
 
@@ -88,10 +122,19 @@ const ReqoreInput = forwardRef(
       className,
       onClearClick,
       fluid,
+      tooltip,
+      customTheme,
+      intent,
+      rounded = true,
       ...rest
     }: IReqoreTextareaProps,
     ref: any
   ) => {
+    const { targetRef } = useCombinedRefs(ref);
+    const theme = useReqoreTheme('main', customTheme, intent);
+
+    useTooltip(targetRef?.current, tooltip);
+
     return (
       <StyledTextareaWrapper
         className={`${className || ''} reqore-control-wrapper`}
@@ -99,20 +142,25 @@ const ReqoreInput = forwardRef(
         height={height}
         fluid={fluid}
         _size={size}
+        theme={theme}
       >
         <StyledTextarea
           {...rest}
           className={`${className || ''} reqore-control reqore-textarea`}
           _size={size}
-          ref={ref}
+          ref={targetRef}
+          theme={theme}
+          rounded={rounded}
           rows={scaleWithContent ? (rest?.value?.split(/\r\n|\r|\n/).length || 1) + 1 : rest.rows}
         />
-        <ReqoreInputClearButton
-          enabled={!rest?.disabled && !!(onClearClick && rest?.onChange)}
-          show={rest?.value && rest.value !== ''}
-          onClick={onClearClick}
-          size='big'
-        />
+        {!rest.readOnly && (
+          <ReqoreInputClearButton
+            enabled={!rest?.disabled && !!(onClearClick && rest?.onChange)}
+            show={rest?.value && rest.value !== ''}
+            onClick={onClearClick}
+            size='big'
+          />
+        )}
       </StyledTextareaWrapper>
     );
   }

package/src/constants/theme.ts

@@ -81,7 +81,7 @@ export interface IReqoreIntents {
   muted?: string;
 }
 
-export type IReqoreIntent = 'info' | 'success' | 'pending' | 'warning' | 'danger' | 'muted';
+export type TReqoreIntent = 'info' | 'success' | 'pending' | 'warning' | 'danger' | 'muted';
 
 export const DEFAULT_INTENTS: IReqoreIntents = {
   info: '#0E5A8A',

package/src/containers/ReqoreProvider.tsx

@@ -10,7 +10,7 @@ import ReqoreNotification, {
   IReqoreNotificationType,
 } from '../components/Notifications/notification';
 import { TSizes } from '../constants/sizes';
-import { IReqoreIntent } from '../constants/theme';
+import { TReqoreIntent } from '../constants/theme';
 import ReqoreContext from '../context/ReqoreContext';
 import { IReqoreIconName } from '../types/icons';
 
@@ -24,7 +24,7 @@ export interface IReqoreNotificationData {
   onFinish?: (id?: string) => any;
   id?: string;
   type?: IReqoreNotificationType;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
   flat?: boolean;
   inverted?: boolean;
   size?: TSizes;
@@ -40,12 +40,12 @@ export interface IReqoreConfirmationModal {
   description?: string;
   onConfirm?: () => void;
   onCancel?: () => void;
-  confirmButtonIntent?: IReqoreIntent;
+  confirmButtonIntent?: TReqoreIntent;
   confirmLabel?: string;
   confirmIcon?: IReqoreIconName;
   cancelLabel?: string;
   isOpen?: boolean;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
 }
 
 const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, position }) => {

package/src/helpers/colors.ts

@@ -1,7 +1,7 @@
 import { cloneDeep, merge } from 'lodash';
 import { darken, lighten, readableColor } from 'polished';
 import { Colors } from '../constants/colors';
-import { DEFAULT_INTENTS, IReqoreIntent, IReqoreTheme } from '../constants/theme';
+import { DEFAULT_INTENTS, IReqoreTheme, TReqoreIntent } from '../constants/theme';
 
 export const getReadableColor: (
   theme: Partial<IReqoreTheme>,
@@ -130,7 +130,7 @@ export const mergeThemes = (element: string, theme: IReqoreTheme, customTheme: a
   return clonedTheme;
 };
 
-export const getNotificationIntent = (theme: IReqoreTheme, intent?: IReqoreIntent) => {
+export const getNotificationIntent = (theme: IReqoreTheme, intent?: TReqoreIntent) => {
   if (intent) {
     return theme.notifications[intent];
   }

package/src/hooks/useCombinedRefs.ts

@@ -1,10 +1,17 @@
 import React from 'react';
 
+/**
+ * It takes a list of refs and returns a single ref that can be used to reference the same underlying
+ * DOM element
+ * @param refs - An array of refs to combine.
+ * @returns A ref object.
+ */
 export function useCombinedRefs(...refs) {
+  const [_innerRef, setInnerRef] = React.useState(null);
   const targetRef = React.useRef();
 
   React.useEffect(() => {
-    refs.forEach((ref) => {
+    [...refs, setInnerRef].forEach((ref) => {
       if (!ref) return;
 
       if (typeof ref === 'function') {
@@ -15,5 +22,5 @@ export function useCombinedRefs(...refs) {
     });
   }, [refs]);
 
-  return targetRef;
+  return { _innerRef, targetRef };
 }

package/src/hooks/useTheme.ts

@@ -1,13 +1,13 @@
 import { cloneDeep } from 'lodash';
 import { useContext } from 'react';
-import { IReqoreIntent, IReqoreTheme } from '../constants/theme';
+import { IReqoreTheme, TReqoreIntent } from '../constants/theme';
 import ThemeContext from '../context/ThemeContext';
 import { mergeThemes } from '../helpers/colors';
 
 export const useReqoreTheme = (
   element: string,
   customTheme: Partial<IReqoreTheme> = {},
-  intent?: IReqoreIntent
+  intent?: TReqoreIntent
 ) => {
   const theme: IReqoreTheme = useContext<IReqoreTheme>(ThemeContext);
   let _customTheme: Partial<IReqoreTheme> = cloneDeep(customTheme);