@qoretechnologies/reqore 0.20.6 → 0.21.0

package/src/components/Menu/item.tsx

@@ -1,16 +1,17 @@
-import React, { forwardRef, useContext, useRef } from 'react';
-import styled, { css } from 'styled-components';
-import { IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import React, { forwardRef, useContext } from 'react';
+import { ReqoreButton, ReqoreControlGroup } from '../..';
+import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import PopoverContext from '../../context/PopoverContext';
-import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useTooltip } from '../../hooks/useTooltip';
-import { IReqoreComponent, TReqoreTooltipProp } from '../../types/global';
+import { IReqoreComponent, IWithReqoreCustomTheme, TReqoreTooltipProp } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
-import ReqoreIcon from '../Icon';
 
 // @ts-ignore
-export interface IReqoreMenuItemProps extends IReqoreComponent, React.HTMLAttributes<HTMLElement> {
+export interface IReqoreMenuItemProps
+  extends IReqoreComponent,
+    React.HTMLAttributes<HTMLElement>,
+    IWithReqoreCustomTheme {
   children?: string;
   label?: string | number;
   icon?: IReqoreIconName;
@@ -21,120 +22,23 @@ export interface IReqoreMenuItemProps extends IReqoreComponent, React.HTMLAttrib
   onClick?: (itemId?: string, event?: React.MouseEvent<HTMLElement>) => void;
   onRightIconClick?: (itemId?: string, event?: React.MouseEvent<HTMLElement>) => void;
   tooltip?: TReqoreTooltipProp;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
+  wrapText?: boolean;
 }
 
-const StyledElementContent = styled.div<{
-  theme: IReqoreTheme;
-  hasRightIcon?: boolean;
-}>`
-  display: flex;
-  align-items: center;
-  flex: 1;
-  margin-right: 3px;
-  word-break: break-word;
-
-  ${({ hasRightIcon }) =>
-    hasRightIcon &&
-    css`
-      margin-right: 33px;
-    `}
-`;
-
 export interface IReqoreMenuItemStyle {
   theme: IReqoreTheme;
   selected: boolean;
   disabled: boolean;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
 }
 
-const StyledElement = styled.div<IReqoreMenuItemStyle>`
-  min-height: 35px;
-  color: ${({ theme, selected, intent }) =>
-    intent
-      ? getReadableColorFrom(theme.intents[intent], true)
-      : getReadableColor(theme, undefined, undefined, !selected)};
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 4px 6px;
-  position: relative;
-  width: 100%;
-  z-index: 0;
-  cursor: pointer;
-  transition: background-color 0.05s ease-out;
-  border-radius: 4px;
-  ${({ theme, selected, intent }: IReqoreMenuItemStyle) => {
-    const bg = intent ? theme.intents[intent] : theme.main;
-
-    return css`
-      background-color: ${selected ? changeLightness(bg!, 0.07) : bg};
-    `;
-  }};
-  overflow: hidden;
-
-  ${({ theme, selected, disabled, intent }) =>
-    !disabled
-      ? css`
-          ${!selected &&
-          css`
-            &:hover {
-              background-color: ${changeLightness(
-                intent ? theme.intents[intent] : theme.main,
-                0.05
-              )};
-            }
-          `}
-
-          &:hover {
-            color: ${({ theme }) =>
-              intent
-                ? getReadableColorFrom(theme.intents[intent])
-                : getReadableColor(theme, undefined, undefined)};
-            text-decoration: none;
-          }
-        `
-      : css`
-          cursor: not-allowed;
-          > * {
-            opacity: 0.5;
-          }
-        `}
-
-  &:not(:first-child) {
-    margin-top: 4px;
-  }
-`;
-
 export interface IReqoreMenuItemRightIconStyle {
   theme: IReqoreTheme;
   interactive?: boolean;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
 }
 
-const StyledRightIcon = styled.div<IReqoreMenuItemRightIconStyle>`
-  ${({ theme, interactive, intent }) => css`
-    position: absolute;
-    right: 0px;
-    height: 100%;
-    width: 33px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    top: 0;
-    z-index: 1;
-    transition: background-color 0.2s ease-out;
-
-    ${interactive &&
-    css`
-      cursor: pointer;
-      &:hover {
-        background-color: ${changeLightness(intent ? theme.intents[intent] : theme.main, 0.09)};
-      }
-    `}
-  `}
-`;
-
 const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
   (
     {
@@ -152,15 +56,15 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
       _popoverId,
       tooltip,
       intent,
+      wrapText,
       ...rest
     },
     ref: any
   ) => {
     const { removePopover } = useContext(PopoverContext);
-    const innerRef = useRef(null);
-    const combinedRef = useCombinedRefs(innerRef, ref);
+    const { targetRef } = useCombinedRefs(ref);
 
-    const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
       event.persist();
 
       onClick?.(id, event);
@@ -183,35 +87,41 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
       }
     };
 
-    useTooltip(combinedRef.current, tooltip);
+    useTooltip(targetRef.current, tooltip);
 
     return (
-      <StyledElement
-        //@ts-ignore
-        as={as}
-        {...rest}
-        className='reqore-menu-item'
-        onClick={handleClick}
-        selected={selected}
-        ref={combinedRef}
-        disabled={disabled}
-        intent={intent}
-      >
-        <StyledElementContent hasRightIcon={!!rightIcon}>
-          {icon && <ReqoreIcon icon={icon} size='13px' margin='right' />}
+      <ReqoreControlGroup stack fluid>
+        <ReqoreButton
+          //@ts-ignore
+          as={as}
+          {...rest}
+          flat
+          className='reqore-menu-item'
+          fluid
+          onClick={handleClick}
+          active={selected}
+          ref={targetRef}
+          disabled={disabled}
+          intent={intent}
+          icon={icon}
+          wrap={wrapText}
+        >
           {label || children}
-        </StyledElementContent>
+        </ReqoreButton>
         {rightIcon && (
-          <StyledRightIcon
+          <ReqoreButton
+            icon={rightIcon}
+            flat
+            fixed
+            customTheme={rest.customTheme}
             className='reqore-menu-item-right-icon'
-            interactive={!!onRightIconClick}
             onClick={handleRightIconClick}
             intent={intent}
-          >
-            <ReqoreIcon icon={rightIcon} size='13px' />
-          </StyledRightIcon>
+            active={selected}
+            wrap={wrapText}
+          />
         )}
-      </StyledElement>
+      </ReqoreControlGroup>
     );
   }
 );

package/src/components/Message/index.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useEffect, useMemo, useState } from 'react';
 import { useMount, useUnmount } from 'react-use';
 import { TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
-import { IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreIcon from '../Icon';
@@ -15,7 +15,7 @@ import {
 } from '../Notifications/notification';
 
 export interface IReqoreMessageProps {
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
   title?: string;
   children: any;
   icon?: IReqoreIconName;

package/src/components/Navbar/item.tsx

@@ -2,6 +2,12 @@ import React, { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness, getMainColor } from '../../helpers/colors';
+import {
+  ActiveIconScale,
+  DisabledElement,
+  InactiveIconScale,
+  ScaleIconOnHover,
+} from '../../styles';
 
 export interface IReqoreNavbarItemProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: any;
@@ -27,6 +33,18 @@ const StyledNavbarItem = styled.div<IReqoreNavbarItemStyle>`
   background-color: ${({ theme, active, type }) =>
     active && (theme[type]?.hoverColor || changeLightness(getMainColor(theme, type), 0.05))};
 
+  ${InactiveIconScale}
+
+  ${({ active }: IReqoreNavbarItemStyle) => {
+    if (active) {
+      return css`
+        ${ActiveIconScale}
+      `;
+    }
+
+    return undefined;
+  }}
+
   ${({ interactive, theme, type }: IReqoreNavbarItemStyle) => {
     if (interactive) {
       return css`
@@ -36,6 +54,7 @@ const StyledNavbarItem = styled.div<IReqoreNavbarItemStyle>`
           background-color: ${theme[type]?.hoverColor ||
           changeLightness(getMainColor(theme, type), 0.05)};
         }
+        ${ScaleIconOnHover}
       `;
     }
 
@@ -47,9 +66,7 @@ const StyledNavbarItem = styled.div<IReqoreNavbarItemStyle>`
   ${({ disabled }) =>
     disabled &&
     css`
-      opacity: 0.5;
-      pointer-events: none;
-      cursor: not-allowed;
+      ${DisabledElement}
     `}
 `;
 

package/src/components/Notifications/notification.tsx

@@ -5,7 +5,7 @@ import { useMount, useUnmount } from 'react-use';
 import styled, { css, keyframes } from 'styled-components';
 import { SPRING_CONFIG } from '../../constants/animations';
 import { PADDING_FROM_SIZE, TABS_SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
-import { IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { fadeIn } from '../../helpers/animations';
 import {
@@ -17,11 +17,11 @@ import {
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreIcon from '../Icon';
 
-export type IReqoreNotificationType = IReqoreIntent;
+export type IReqoreNotificationType = TReqoreIntent;
 
 export interface IReqoreNotificationProps {
   type?: IReqoreNotificationType;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
   title?: string;
   content: string;
   icon?: IReqoreIconName;
@@ -40,7 +40,7 @@ export interface IReqoreNotificationStyle {
   type?: IReqoreNotificationType;
   clickable?: boolean;
   timeout?: number;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
   hasShadow?: boolean;
   fluid?: boolean;
   flat?: boolean;

package/src/components/Panel/index.tsx

@@ -4,7 +4,7 @@ import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react'
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import { RADIUS_FROM_SIZE } from '../../constants/sizes';
-import { IReqoreCustomTheme, IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import { IReqoreCustomTheme, IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import {
   changeDarkness,
@@ -24,7 +24,7 @@ export interface IReqorePanelAction {
   icon?: IReqoreIconName;
   label?: string;
   onClick?: () => void;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
   actions?: IReqoreDropdownItemProps[];
   className?: string;
   id?: string;
@@ -46,7 +46,7 @@ export interface IReqorePanelProps extends React.HTMLAttributes<HTMLDivElement>
   actions?: IReqorePanelAction[];
   bottomActions?: IReqorePanelBottomAction[];
   customTheme?: IReqoreCustomTheme;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
   flat?: boolean;
   unMountContentOnCollapse?: boolean;
   onCollapseChange?: (isCollapsed?: boolean) => void;

package/src/components/Paragraph/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 IReqoreParagraphStyle extends React.HTMLAttributes<HTMLHeadingElement> {
   theme: IReqoreTheme;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
 }
 
 const style = ({ theme, intent }: IReqoreParagraphStyle) => css`

package/src/components/Sidebar/index.tsx

@@ -11,6 +11,7 @@ import { changeLightness, getMainColor, getReadableColor } from '../../helpers/c
 import { transformMenu } from '../../helpers/sidebar';
 import useLatestZIndex from '../../hooks/useLatestZIndex';
 import { useReqoreTheme } from '../../hooks/useTheme';
+import { ActiveIconScale, InactiveIconScale, ScaleIconOnHover } from '../../styles';
 import { IReqoreIconName } from '../../types/icons';
 import { StyledBackdrop } from '../Drawer';
 import ReqoreIcon from '../Icon';
@@ -198,6 +199,8 @@ const StyledSidebar = styled.div<IReqoreSidebarStyle>`
     }
 
     .sidebarItem.active {
+      ${ActiveIconScale}
+
       color: ${({ theme }) =>
         theme.sidebar?.item?.activeColor ||
         theme.sidebar?.item?.color ||
@@ -219,6 +222,8 @@ const StyledSidebar = styled.div<IReqoreSidebarStyle>`
     }
 
     .sidebarSubItem.active {
+      ${ActiveIconScale}
+
       color: ${({ theme }) =>
         theme.sidebar?.subItem?.activeColor ||
         theme.sidebar?.subItem?.color ||
@@ -240,6 +245,8 @@ const StyledSidebar = styled.div<IReqoreSidebarStyle>`
     }
 
     .sidebarItem {
+      ${InactiveIconScale}
+
       position: relative;
 
       span.bp3-icon:not(.favorite) {
@@ -259,6 +266,8 @@ const StyledSidebar = styled.div<IReqoreSidebarStyle>`
         theme.sidebar?.item?.background || getMainColor(theme, 'sidebar')};
 
       &:hover {
+        ${ScaleIconOnHover}
+
         color: ${({ theme }) =>
           theme.sidebar?.item?.hoverColor || theme.sidebar?.item?.color || 'inherit'};
         background-color: ${({ theme }) =>
@@ -298,6 +307,8 @@ const StyledSidebar = styled.div<IReqoreSidebarStyle>`
         theme.sidebar?.subItem?.background || darken(0.04, getMainColor(theme, 'sidebar'))};
 
       &:hover {
+        ${ScaleIconOnHover}
+
         color: ${({ theme }) =>
           theme.sidebar?.subItem?.hoverColor || theme.sidebar?.subItem?.color || 'inherit'};
         background-color: ${({ theme }) =>

package/src/components/Table/index.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import { TABLE_SIZE_TO_PX, TSizes } from '../../constants/sizes';
-import { IReqoreCustomTheme, IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import { IReqoreCustomTheme, IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { changeLightness, getReadableColor } from '../../helpers/colors';
 import { useReqoreTheme } from '../../hooks/useTheme';
@@ -18,12 +18,12 @@ export type TReqoreTableColumnContent =
   | React.FC<{ [key: string]: any; _selectId?: string }>
   | 'time-ago'
   | 'tag'
-  | `tag:${IReqoreIntent}`
+  | `tag:${TReqoreIntent}`
   | `tag:#${string}`
   | 'title'
-  | `title:${IReqoreIntent}`
+  | `title:${TReqoreIntent}`
   | 'text'
-  | `text:${IReqoreIntent}`;
+  | `text:${TReqoreIntent}`;
 
 export interface IReqoreTableColumn {
   dataId: string;
@@ -38,7 +38,7 @@ export interface IReqoreTableColumn {
   icon?: IReqoreIconName;
   iconSize?: string;
   tooltip?: string;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
   cellTooltip?: (data: { [key: string]: any; _selectId?: string }) => string | JSX.Element;
   onCellClick?: (data: { [key: string]: any; _selectId?: string }) => void;
 }
@@ -46,7 +46,7 @@ export interface IReqoreTableColumn {
 export interface IReqoreTableRowData {
   [key: string]: any;
   _selectId?: string;
-  _intent?: IReqoreIntent;
+  _intent?: TReqoreIntent;
   _disabled?: boolean;
 }
 
@@ -63,13 +63,13 @@ export interface IReqoreTableProps extends React.HTMLAttributes<HTMLDivElement>
   striped?: boolean;
   selectable?: boolean;
   selected?: string[];
-  selectedRowIntent?: IReqoreIntent;
+  selectedRowIntent?: TReqoreIntent;
   onSortChange?: (sort?: IReqoreTableSort) => void;
   onSelectedChange?: (selected?: any[]) => void;
   selectToggleTooltip?: string;
   onRowClick?: IReqoreTableRowClick;
   customTheme?: IReqoreCustomTheme;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
   rounded?: boolean;
   flat?: boolean;
   size?: TSizes;

package/src/components/Table/row.tsx

@@ -11,7 +11,7 @@ import {
 } from '.';
 import { ReqorePopover } from '../..';
 import { SIZE_TO_PX, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
-import { IReqoreIntent, IReqoreTheme } from '../../constants/theme';
+import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { changeLightness, getReadableColorFrom } from '../../helpers/colors';
 import { ReqoreH4 } from '../Header';
 import ReqoreIcon from '../Icon';
@@ -27,7 +27,7 @@ export interface IReqoreTableRowOptions {
   selected?: string[];
   onRowClick?: IReqoreTableRowClick;
   striped?: boolean;
-  selectedRowIntent?: IReqoreIntent;
+  selectedRowIntent?: TReqoreIntent;
   size?: TSizes;
   flat?: boolean;
 }
@@ -41,9 +41,9 @@ export interface IReqoreTableRowProps extends React.HTMLAttributes<HTMLTableRowE
 export interface IReqoreTableRowStyle {
   theme: IReqoreTheme;
   interactive?: boolean;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
   selected?: boolean;
-  selectedIntent?: IReqoreIntent;
+  selectedIntent?: TReqoreIntent;
   flat?: boolean;
   disabled?: boolean;
   hovered?: boolean;
@@ -61,7 +61,7 @@ export interface IReqoreTableCellStyle {
   grow?: number;
   theme?: IReqoreTheme;
   align?: 'center' | 'left' | 'right';
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
   interactive?: boolean;
   interactiveCell?: boolean;
   size?: TSizes;
@@ -69,7 +69,7 @@ export interface IReqoreTableCellStyle {
   disabled?: boolean;
   selected?: boolean;
   hovered?: boolean;
-  selectedIntent?: IReqoreIntent;
+  selectedIntent?: TReqoreIntent;
   even?: boolean;
   striped?: boolean;
 }
@@ -211,9 +211,9 @@ const ReqoreTableRow = ({
       // Separate the content string by colon
       let [type, intentOrColor] = content.split(':');
       // Check if the intent starts with hash for tags
-      let intent: IReqoreIntent = intentOrColor?.startsWith('#')
+      let intent: TReqoreIntent = intentOrColor?.startsWith('#')
         ? undefined
-        : (intentOrColor as IReqoreIntent);
+        : (intentOrColor as TReqoreIntent);
       let color: string =
         intentOrColor?.startsWith('#') && type === 'tag' ? intentOrColor : undefined;
       // Render content based on the type
@@ -225,15 +225,15 @@ const ReqoreTableRow = ({
             <ReqoreTag
               label={data[dataId]}
               size={size}
-              intent={intent as IReqoreIntent}
+              intent={intent as TReqoreIntent}
               color={color}
             />
           );
         case 'title':
-          return <ReqoreH4 intent={intent as IReqoreIntent}>{data[dataId]}</ReqoreH4>;
+          return <ReqoreH4 intent={intent as TReqoreIntent}>{data[dataId]}</ReqoreH4>;
         case 'text':
           return (
-            <ReqoreP className='reqore-table-text' intent={intent as IReqoreIntent}>
+            <ReqoreP className='reqore-table-text' intent={intent as TReqoreIntent}>
               {data[dataId]}
             </ReqoreP>
           );

package/src/components/Tabs/index.tsx

@@ -1,7 +1,7 @@
 import React, { ReactElement, useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
 import { TSizes } from '../../constants/sizes';
-import { IReqoreCustomTheme, IReqoreIntent } from '../../constants/theme';
+import { IReqoreCustomTheme, TReqoreIntent } from '../../constants/theme';
 import { TReqoreTooltipProp } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreTabsList from './list';
@@ -16,8 +16,8 @@ export interface IReqoreTabsListItem {
   props?: React.HTMLAttributes<any>;
   onClick?: (event: any) => any;
   onCloseClick?: (id: string | number) => any;
-  activeIntent?: IReqoreIntent;
-  intent?: IReqoreIntent;
+  activeIntent?: TReqoreIntent;
+  intent?: TReqoreIntent;
   closeIcon?: IReqoreIconName;
 }
 
@@ -29,13 +29,13 @@ export interface IReqoreTabsProps extends React.HTMLAttributes<HTMLDivElement> {
   fill?: boolean;
   fillParent?: boolean;
   vertical?: boolean;
-  activeTabIntent?: IReqoreIntent;
+  activeTabIntent?: TReqoreIntent;
   wrapTabNames?: boolean;
   flat?: boolean;
   size?: TSizes;
   width?: string;
   customTheme?: IReqoreCustomTheme;
-  intent?: IReqoreIntent;
+  intent?: TReqoreIntent;
   // Internal prop, ignore!
   _testWidth?: number;
 }

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}