@qoretechnologies/reqore 0.20.7 → 0.21.0

package/src/components/Button/index.tsx

@@ -1,6 +1,5 @@
-import { Placement } from '@popperjs/core';
 import { rgba } from 'polished';
-import React, { forwardRef, useRef } from 'react';
+import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import {
   PADDING_FROM_SIZE,
@@ -9,26 +8,38 @@ import {
   TEXT_FROM_SIZE,
   TSizes,
 } from '../../constants/sizes';
-import { IReqoreCustomTheme, IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
 import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
-import { ActiveIconScale, ScaleIconOnHover } from '../../styles';
-import { TReqoreTooltipProp } from '../../types/global';
+import {
+  ActiveIconScale,
+  DisabledElement,
+  InactiveIconScale,
+  ReadOnlyElement,
+  ScaleIconOnHover,
+} from '../../styles';
+import {
+  IReqoreDisabled,
+  IReqoreIntent,
+  IReqoreReadOnly,
+  TReqoreTooltipProp,
+} from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreIcon from '../Icon';
 
-export interface IReqoreButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+export interface IReqoreButtonProps
+  extends React.HTMLAttributes<HTMLButtonElement>,
+    IReqoreDisabled,
+    IReqoreIntent,
+    IReqoreReadOnly {
   icon?: IReqoreIconName;
   size?: TSizes;
   minimal?: boolean;
-  disabled?: boolean;
   tooltip?: TReqoreTooltipProp;
-  tooltipPlacement?: Placement;
   fluid?: boolean;
   fixed?: boolean;
-  intent?: IReqoreIntent;
   active?: boolean;
   flat?: boolean;
   rightIcon?: IReqoreIconName;
@@ -51,6 +62,7 @@ const getButtonMainColor = (theme: IReqoreTheme, color?: string) => {
 export const StyledAnimatedTextWrapper = styled.span`
   overflow: hidden;
   position: relative;
+  padding: 4px 0;
 `;
 
 export const StyledActiveContent = styled.span`
@@ -99,6 +111,7 @@ export const StyledInvisibleContent = styled.span`
 
 export const StyledButton = styled.button<IReqoreButtonStyle>`
   display: flex;
+  text-align: left;
   align-items: center;
   margin: 0;
   font-weight: 600;
@@ -109,7 +122,14 @@ export const StyledButton = styled.button<IReqoreButtonStyle>`
   padding: 0 ${({ size }) => PADDING_FROM_SIZE[size]}px;
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
 
-  height: ${({ size }) => SIZE_TO_PX[size]}px;
+  min-height: ${({ size }) => SIZE_TO_PX[size]}px;
+
+  ${({ wrap }) =>
+    wrap &&
+    css`
+      max-height: ${({ size }) => SIZE_TO_PX[size]}px;
+    `}
+
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
 
   flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1 auto' : '0 0 auto')};
@@ -134,38 +154,47 @@ export const StyledButton = styled.button<IReqoreButtonStyle>`
         : getReadableColorFrom(color, true)
       : getReadableColor(theme, undefined, undefined, true)};
 
-  ${ScaleIconOnHover}
-
-  &:not(:disabled) {
-    cursor: pointer;
-    transition: all 0.2s ease-out;
-
-    &:active {
-      transform: scale(0.95);
-    }
-
-    &:hover,
-    &:focus {
-      background-color: ${({ theme, color }: IReqoreButtonStyle) =>
-        changeLightness(getButtonMainColor(theme, color), 0.05)};
-      color: ${({ theme, color }) =>
-        getReadableColor({ main: getButtonMainColor(theme, color) }, undefined, undefined)};
-      border-color: ${({ minimal, theme, color }) =>
-        minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.1)};
-
-      ${StyledActiveContent} {
-        transform: translateY(0px);
-        filter: blur(0);
-        opacity: 1;
-      }
-
-      ${StyledInActiveContent} {
-        transform: translateY(150%);
-        filter: blur(10px);
-        opacity: 0;
-      }
-    }
-  }
+  ${InactiveIconScale}
+
+  ${({ readOnly }) =>
+    !readOnly
+      ? css`
+          &:not(:disabled) {
+            ${ScaleIconOnHover}
+
+            cursor: pointer;
+            transition: all 0.2s ease-out;
+
+            &:active {
+              transform: scale(0.95);
+            }
+
+            &:hover,
+            &:focus {
+              background-color: ${({ theme, color }: IReqoreButtonStyle) =>
+                changeLightness(getButtonMainColor(theme, color), 0.05)};
+              color: ${({ theme, color }) =>
+                getReadableColor({ main: getButtonMainColor(theme, color) }, undefined, undefined)};
+              border-color: ${({ minimal, theme, color }) =>
+                minimal ? undefined : changeLightness(getButtonMainColor(theme, color), 0.1)};
+
+              ${StyledActiveContent} {
+                transform: translateY(0px);
+                filter: blur(0);
+                opacity: 1;
+              }
+
+              ${StyledInActiveContent} {
+                transform: translateY(150%);
+                filter: blur(10px);
+                opacity: 0;
+              }
+            }
+          }
+        `
+      : css`
+          ${ReadOnlyElement};
+        `}
 
   ${({ active, minimal, theme, color }: IReqoreButtonStyle) =>
     active &&
@@ -180,9 +209,7 @@ export const StyledButton = styled.button<IReqoreButtonStyle>`
     `}
 
   &:disabled {
-    opacity: 0.5;
-    pointer-events: none;
-    cursor: not-allowed;
+    ${DisabledElement};
   }
 
   &:focus,
@@ -213,16 +240,16 @@ const ReqoreButton = forwardRef(
       rightIcon,
       customTheme,
       wrap = true,
+      readOnly,
       ...rest
     }: IReqoreButtonProps,
     ref
   ) => {
-    const innerRef = useRef(null);
-    const combinedRef = useCombinedRefs(innerRef, ref);
+    const { targetRef } = useCombinedRefs(ref);
     const theme: IReqoreTheme = useReqoreTheme('main', customTheme, intent);
 
     /* A custom hook that is used to add a tooltip to the button. */
-    useTooltip(combinedRef.current, tooltip);
+    useTooltip(targetRef.current, tooltip);
 
     // If color or intent was specified, set the color
     const customColor = theme.main;
@@ -231,7 +258,7 @@ const ReqoreButton = forwardRef(
       <StyledButton
         {...rest}
         theme={theme}
-        ref={combinedRef}
+        ref={targetRef}
         fluid={fluid}
         fixed={fixed}
         minimal={minimal}
@@ -239,6 +266,7 @@ const ReqoreButton = forwardRef(
         color={customColor}
         flat={flat}
         active={active}
+        readOnly={readOnly}
         className={`${className || ''} reqore-control reqore-button`}
       >
         {icon && (

package/src/components/Checkbox/index.tsx

@@ -1,26 +1,29 @@
 import { rgba } from 'polished';
-import React, { forwardRef, useRef } from 'react';
-import styled from 'styled-components';
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
 import { SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { getReadableColor } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import usePopover from '../../hooks/usePopover';
-import { IReqoreTooltip } from '../../types/global';
+import { useTooltip } from '../../hooks/useTooltip';
+import { DisabledElement, ReadOnlyElement } from '../../styles';
+import { IReqoreDisabled, IReqoreReadOnly, TReqoreTooltipProp } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreIcon from '../Icon';
 
-export interface IReqoreCheckboxProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IReqoreCheckboxProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    IReqoreDisabled,
+    IReqoreReadOnly {
   label?: string;
   labelDetail?: any;
   labelDetailPosition?: 'left' | 'right';
   size?: TSizes;
   checked?: boolean;
-  disabled?: boolean;
   labelPosition?: 'right' | 'left';
   fluid?: boolean;
   fixed?: boolean;
-  tooltip?: IReqoreTooltip;
+  tooltip?: TReqoreTooltipProp;
   asSwitch?: boolean;
   uncheckedIcon?: IReqoreIconName;
   checkedIcon?: IReqoreIconName;
@@ -68,7 +71,7 @@ const StyledSwitch = styled.div<IReqoreCheckboxStyle>`
 `;
 
 const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
-  display: flex;
+  display: inline-flex;
   align-items: center;
   cursor: pointer;
   padding: 0px;
@@ -79,8 +82,17 @@ const StyledCheckbox = styled.div<IReqoreCheckboxStyle>`
 
   flex: ${({ fluid, fixed }) => (fixed ? '0 auto' : fluid ? '1' : '0 0 auto')};
 
-  opacity: ${({ disabled }) => disabled && 0.5};
-  pointer-events: ${({ disabled }) => disabled && 'none'};
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      ${DisabledElement};
+    `}
+
+  ${({ readOnly }) =>
+    readOnly &&
+    css`
+      ${ReadOnlyElement};
+    `}
 
   color: ${({ theme, checked }) => getReadableColor(theme, undefined, undefined, !checked)};
 
@@ -109,25 +121,23 @@ const Checkbox = forwardRef(
       asSwitch,
       uncheckedIcon = 'CheckboxBlankCircleLine',
       checkedIcon = 'CheckboxCircleFill',
+      readOnly,
       ...rest
     }: IReqoreCheckboxProps,
     ref
   ) => {
-    const innerRef = useRef(null);
-    const combinedRef = useCombinedRefs(innerRef, ref);
+    const { targetRef } = useCombinedRefs(ref);
 
-    usePopover({
-      targetElement: combinedRef.current,
-      ...tooltip,
-    });
+    useTooltip(targetRef.current, tooltip);
 
     return (
       <StyledCheckbox
         {...rest}
-        ref={combinedRef}
+        ref={targetRef}
         size={size}
         disabled={disabled}
         checked={checked}
+        readOnly={readOnly}
         className={`${className || ''} reqore-checkbox reqore-control`}
       >
         {label && labelPosition === 'left' ? (

package/src/components/Comment/index.tsx

@@ -1,7 +1,7 @@
 import { size } from 'lodash';
 import styled from 'styled-components';
 import { ReqoreButton, ReqoreColumn, ReqoreControlGroup, ReqoreDropdown } from '../..';
-import { IReqoreIntent } from '../../constants/theme';
+import { TReqoreIntent } from '../../constants/theme';
 import { IReqoreIconName } from '../../types/icons';
 import { ReqoreColumns } from '../Columns';
 import { ReqoreH3 } from '../Header';
@@ -14,7 +14,7 @@ export interface IReqoreCommentProps {
   image?: string;
   title?: string;
   children: any;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
   rounded?: boolean;
   flat?: boolean;
   detail?: string;

package/src/components/ControlGroup/index.tsx

@@ -16,7 +16,7 @@ export interface IReqoreControlGroupStyle extends IReqoreControlGroupProps {
   theme: IReqoreTheme;
 }
 
-const StyledControlGroup = styled.div<IReqoreControlGroupStyle>`
+export const StyledReqoreControlGroup = styled.div<IReqoreControlGroupStyle>`
   display: flex;
   flex: 0 auto;
   width: ${({ fluid }) => (fluid ? '100%' : undefined)};
@@ -59,7 +59,7 @@ const ReqoreControlGroup = ({
   rounded = true,
   ...rest
 }: IReqoreControlGroupProps) => (
-  <StyledControlGroup
+  <StyledReqoreControlGroup
     {...rest}
     size={size}
     rounded={rounded}
@@ -75,7 +75,7 @@ const ReqoreControlGroup = ({
           })
         : null
     )}
-  </StyledControlGroup>
+  </StyledReqoreControlGroup>
 );
 
 export default ReqoreControlGroup;

package/src/components/Header/index.tsx

@@ -1,10 +1,10 @@
 import styled, { css } from 'styled-components';
-import { IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { getReadableColor } from '../../helpers/colors';
 
 export interface IReqoreHeaderStyle extends React.HTMLAttributes<HTMLHeadingElement> {
   theme: IReqoreTheme;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
 }
 
 const style = ({ theme, intent }: IReqoreHeaderStyle) => css`

package/src/components/Icon/index.tsx

@@ -4,7 +4,7 @@ import { IconBaseProps, IconType } from 'react-icons/lib';
 import * as RemixIcons from 'react-icons/ri';
 import styled, { css } from 'styled-components';
 import { ReqoreThemeContext } from '../..';
-import { IReqoreIntent } from '../../constants/theme';
+import { TReqoreIntent } from '../../constants/theme';
 import { IReqoreIconName } from '../../types/icons';
 
 export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement> {
@@ -12,7 +12,7 @@ export interface IReqoreIconProps extends React.HTMLAttributes<HTMLSpanElement>
   color?: string;
   size?: string;
   iconProps?: IconBaseProps;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
   margin?: 'right' | 'left' | 'both';
 }
 

package/src/components/Input/index.tsx

@@ -1,21 +1,31 @@
-import { Placement } from '@popperjs/core';
-import { darken, rgba } from 'polished';
-import React, { forwardRef, useRef } from 'react';
-import styled from 'styled-components';
+import { rgba } from 'polished';
+import React, { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
 import { RADIUS_FROM_SIZE, SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness, getReadableColor } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
-import usePopover from '../../hooks/usePopover';
+import { useReqoreTheme } from '../../hooks/useTheme';
+import { useTooltip } from '../../hooks/useTooltip';
+import { DisabledElement, ReadOnlyElement } from '../../styles';
+import {
+  IReqoreDisabled,
+  IReqoreIntent,
+  IReqoreReadOnly,
+  IWithReqoreCustomTheme,
+} from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreIcon from '../Icon';
 import ReqoreInputClearButton from '../InputClearButton';
 
-export interface IReqoreInputProps extends React.HTMLAttributes<HTMLInputElement> {
+export interface IReqoreInputProps
+  extends React.HTMLAttributes<HTMLInputElement>,
+    IReqoreDisabled,
+    IReqoreReadOnly,
+    IReqoreIntent,
+    IWithReqoreCustomTheme {
   autoFocus?: boolean;
-  disabled?: boolean;
   tooltip?: string;
-  tooltipPlacement?: Placement;
   width?: number;
   size?: TSizes;
   minimal?: boolean;
@@ -45,19 +55,6 @@ export const StyledInputWrapper = styled.div<IReqoreInputStyle>`
   overflow: hidden;
   border-radius: ${({ minimal, rounded, _size }) =>
     minimal || !rounded ? 0 : RADIUS_FROM_SIZE[_size]}px;
-  border: ${({ minimal, theme, flat }) =>
-    !minimal && !flat ? `1px solid ${rgba(getReadableColor(theme), 0.2)}` : 0};
-  border-bottom: ${({ minimal, theme, flat }) =>
-    minimal && !flat ? `0.5px solid ${rgba(getReadableColor(theme), 0.2)}` : undefined};
-
-  transition: all 0.2s ease-out;
-
-  &:active,
-  &:focus,
-  &:hover {
-    outline: none;
-    border-color: ${({ theme }) => rgba(getReadableColor(theme), 0.3)};
-  }
 `;
 
 const StyledIconWrapper = styled.div<IReqoreInputStyle>`
@@ -78,24 +75,37 @@ export const StyledInput = styled.input<IReqoreInputStyle>`
   padding-right: ${({ clearable, _size }) => (clearable ? SIZE_TO_PX[_size] : 7)}px;
   padding-left: ${({ hasIcon, _size }) => (hasIcon ? SIZE_TO_PX[_size] : 7)}px;
   font-size: ${({ _size }) => TEXT_FROM_SIZE[_size]}px;
-  border: none;
+  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}
 
   background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
-    minimal ? 'transparent' : darken(0.01, theme.main)};
+    minimal ? 'transparent' : rgba(theme.main, 0.3)};
   color: ${({ theme }: IReqoreInputStyle) => getReadableColor(theme)};
 
   transition: all 0.2s ease-out;
 
-  &:active,
-  &:focus,
-  &:hover {
-    outline: none;
-  }
-
   &:active,
   &:focus {
     background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
-      minimal ? 'transparent' : changeLightness(darken(0.01, theme.main), 0.01)};
+      minimal ? 'transparent' : rgba(theme.main, 0.5)};
   }
 
   &::placeholder {
@@ -109,9 +119,10 @@ export const StyledInput = styled.input<IReqoreInputStyle>`
     }
   }
 
+  ${({ readOnly }) => readOnly && ReadOnlyElement};
+
   &:disabled {
-    pointer-events: none;
-    opacity: 0.3;
+    ${DisabledElement};
   }
 `;
 
@@ -119,7 +130,6 @@ const ReqoreInput = forwardRef(
   (
     {
       tooltip,
-      tooltipPlacement,
       width,
       size = 'normal',
       fluid,
@@ -131,20 +141,17 @@ const ReqoreInput = forwardRef(
       rounded = true,
       minimal,
       children,
+      readOnly,
+      customTheme,
+      intent,
       ...rest
     }: IReqoreInputProps,
     ref
   ) => {
-    const innerRef = useRef(null);
-    const combinedRef = useCombinedRefs(innerRef, ref);
+    const { targetRef } = useCombinedRefs(ref);
+    const theme = useReqoreTheme('main', customTheme, intent);
 
-    usePopover({
-      targetElement: combinedRef.current,
-      content: tooltip,
-      handler: 'hover',
-      placement: tooltipPlacement,
-      show: !!tooltip,
-    });
+    useTooltip(targetRef.current, tooltip);
 
     return (
       <StyledInputWrapper
@@ -153,10 +160,13 @@ const ReqoreInput = forwardRef(
         fixed={fixed}
         width={width}
         flat={flat}
+        theme={theme}
         rounded={rounded}
         minimal={minimal}
         _size={size}
-        ref={combinedRef}
+        ref={targetRef}
+        readOnly={readOnly}
+        disabled={rest.disabled}
       >
         {icon && (
           <StyledIconWrapper _size={size}>
@@ -165,14 +175,18 @@ const ReqoreInput = forwardRef(
         )}
         <StyledInput
           {...rest}
+          theme={theme}
           _size={size}
           minimal={minimal}
+          flat={flat}
+          rounded={rounded}
           hasIcon={!!icon}
           clearable={!rest?.disabled && !!(onClearClick && rest?.onChange)}
           className={`${className || ''} reqore-control reqore-input`}
+          readOnly={readOnly}
         />
         <ReqoreInputClearButton
-          enabled={!rest?.disabled && !!(onClearClick && rest?.onChange)}
+          enabled={!readOnly && !rest?.disabled && !!(onClearClick && rest?.onChange)}
           onClick={onClearClick}
           size={size}
           show={rest?.value && rest.value !== '' ? true : false}

package/src/components/Menu/index.tsx

@@ -1,10 +1,11 @@
 import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { IReqoreCustomTheme, IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import { IReqoreCustomTheme, IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { changeLightness } from '../../helpers/colors';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { IReqoreComponent } from '../../types/global';
+import { StyledReqoreControlGroup } from '../ControlGroup';
 
 export interface IReqoreMenuProps extends IReqoreComponent, React.HTMLAttributes<HTMLDivElement> {
   children: any;
@@ -12,7 +13,8 @@ export interface IReqoreMenuProps extends IReqoreComponent, React.HTMLAttributes
   width?: string;
   maxHeight?: string;
   customTheme?: IReqoreCustomTheme;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
+  wrapText?: boolean;
 }
 
 export interface IReqoreMenuStyle extends IReqoreMenuProps {
@@ -37,10 +39,17 @@ const StyledReqoreMenu = styled.div<IReqoreMenuStyle>`
     )};
     padding-${position === 'left' ? 'right' : 'left'}: 10px;
   `}
+
+  ${StyledReqoreControlGroup}:not(:last-child) {
+    margin-bottom: 5px;
+  }
 `;
 
 const ReqoreMenu: React.FC<IReqoreMenuProps> = forwardRef(
-  ({ children, position, _insidePopover, _popoverId, customTheme, intent, ...rest }, ref: any) => {
+  (
+    { children, position, _insidePopover, _popoverId, customTheme, intent, wrapText, ...rest },
+    ref: any
+  ) => {
     const theme = useReqoreTheme('main', customTheme, intent);
 
     return (
@@ -52,6 +61,8 @@ const ReqoreMenu: React.FC<IReqoreMenuProps> = forwardRef(
                 React.cloneElement(child, {
                   _insidePopover,
                   _popoverId,
+                  customTheme: theme,
+                  wrapText,
                 })
               : null
           )}