@qoretechnologies/reqore 0.25.10 → 0.26.0

package/src/components/Menu/item.tsx

@@ -4,26 +4,20 @@ import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import PopoverContext from '../../context/PopoverContext';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useTooltip } from '../../hooks/useTooltip';
-import { IReqoreComponent, IWithReqoreCustomTheme, TReqoreTooltipProp } from '../../types/global';
-import { IReqoreIconName } from '../../types/icons';
+import { IReqoreComponent } from '../../types/global';
+import { IReqoreButtonProps } from '../Button';
 
 // @ts-ignore
 export interface IReqoreMenuItemProps
   extends IReqoreComponent,
     React.HTMLAttributes<HTMLElement>,
-    IWithReqoreCustomTheme {
-  children?: string;
+    IReqoreButtonProps {
   label?: string | number;
-  icon?: IReqoreIconName;
-  rightIcon?: IReqoreIconName;
   as?: JSX.Element | React.ElementType | never;
   selected?: boolean;
-  disabled?: boolean;
-  onClick?: (itemId?: string, event?: React.MouseEvent<HTMLElement>) => void;
+  itemId?: string;
   onRightIconClick?: (itemId?: string, event?: React.MouseEvent<HTMLElement>) => void;
-  tooltip?: TReqoreTooltipProp;
-  intent?: TReqoreIntent;
-  wrapText?: boolean;
+  onClick?: (itemId?: string, event?: React.MouseEvent<HTMLElement>) => void;
 }
 
 export interface IReqoreMenuItemStyle {
@@ -51,12 +45,11 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
       onClick,
       onRightIconClick,
       disabled,
-      id,
+      itemId,
       _insidePopover,
       _popoverId,
       tooltip,
       intent,
-      wrapText,
       ...rest
     },
     ref: any
@@ -67,7 +60,7 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
       event.persist();
 
-      onClick?.(id, event);
+      onClick?.(itemId, event);
 
       if (_insidePopover && _popoverId) {
         removePopover!(_popoverId);
@@ -79,7 +72,7 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
       event.stopPropagation();
 
       if (onRightIconClick) {
-        onRightIconClick(id, event);
+        onRightIconClick(itemId, event);
 
         if (_insidePopover && _popoverId) {
           removePopover!(_popoverId);
@@ -104,7 +97,6 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
           disabled={disabled}
           intent={intent}
           icon={icon}
-          wrap={wrapText}
         >
           {label || children}
         </ReqoreButton>
@@ -120,7 +112,6 @@ const ReqoreMenuItem: React.FC<IReqoreMenuItemProps> = forwardRef(
             readOnly={!onRightIconClick}
             intent={intent}
             active={selected && !!onRightIconClick}
-            wrap={wrapText}
           />
         )}
       </ReqoreControlGroup>

package/src/components/Message/index.tsx

@@ -1,10 +1,16 @@
+import { animated } from '@react-spring/web';
 import React, { forwardRef, useEffect, useMemo, useState } from 'react';
 import { useMount, useUnmount } from 'react-use';
-import { TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
-import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
+import { TEXT_FROM_SIZE } from '../../constants/sizes';
+import { IReqoreTheme } from '../../constants/theme';
 import ReqoreThemeProvider from '../../containers/ThemeProvider';
 import { useReqoreTheme } from '../../hooks/useTheme';
-import { IWithReqoreCustomTheme } from '../../types/global';
+import {
+  IReqoreIntent,
+  IWithReqoreCustomTheme,
+  IWithReqoreEffect,
+  IWithReqoreSize,
+} from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreIcon from '../Icon';
 import {
@@ -18,8 +24,10 @@ import {
 
 export interface IReqoreMessageProps
   extends IWithReqoreCustomTheme,
+    IWithReqoreEffect,
+    IWithReqoreSize,
+    IReqoreIntent,
     React.HTMLAttributes<HTMLDivElement> {
-  intent?: TReqoreIntent;
   title?: string;
   children: any;
   icon?: IReqoreIconName;
@@ -29,7 +37,6 @@ export interface IReqoreMessageProps
   onFinish?: () => any;
   flat?: boolean;
   inverted?: boolean;
-  size?: TSizes;
 }
 
 export interface IReqoreNotificationStyle extends IReqoreMessageProps {
@@ -96,6 +103,7 @@ const ReqoreMessage: React.FC<IReqoreMessageProps> = forwardRef(
       <ReqoreThemeProvider>
         <StyledReqoreNotification
           {...rest}
+          as={animated.div}
           key={`${duration}${intent}${title}${children}`}
           intent={intent}
           timeout={duration}

package/src/components/Notifications/notification.tsx

@@ -14,16 +14,18 @@ import {
   getNotificationIntent,
   getReadableColorFrom,
 } from '../../helpers/colors';
+import { IWithReqoreEffect } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
+import { StyledEffect } from '../Effect';
 import ReqoreIcon from '../Icon';
 
 export type IReqoreNotificationType = TReqoreIntent;
 
-export interface IReqoreNotificationProps {
+export interface IReqoreNotificationProps extends IWithReqoreEffect {
   type?: IReqoreNotificationType;
   intent?: TReqoreIntent;
   title?: string;
-  content: string;
+  content: string | React.ReactNode;
   icon?: IReqoreIconName;
   onClose?: () => any;
   onClick?: () => any;
@@ -58,7 +60,7 @@ const timeoutAnimation = keyframes`
   }
 `;
 
-export const StyledReqoreNotification = styled(animated.div)<IReqoreNotificationStyle>`
+export const StyledReqoreNotification = styled(StyledEffect)<IReqoreNotificationStyle>`
   min-width: ${({ fluid }) => (!fluid ? '200px' : undefined)};
   max-width: ${({ fluid }) => (!fluid ? '450px' : undefined)};
   border-radius: 5px;
@@ -249,6 +251,7 @@ const ReqoreNotification: React.FC<IReqoreNotificationProps> = forwardRef(
       item ? (
         <ReqoreThemeProvider>
           <StyledReqoreNotification
+            as={animated.div}
             key={`${duration}${type || intent}${title}${content}`}
             type={type || intent}
             hasShadow

package/src/components/Panel/index.tsx

@@ -32,6 +32,8 @@ import { StyledCollectionItemContent } from '../Collection/item';
 import ReqoreControlGroup from '../ControlGroup';
 import ReqoreDropdown from '../Dropdown';
 import { IReqoreDropdownItem } from '../Dropdown/list';
+import { IReqoreEffect, StyledEffect } from '../Effect';
+import { ReqoreHeading } from '../Header';
 import ReqoreIcon from '../Icon';
 
 export interface IReqorePanelAction extends IReqoreButtonProps, IWithReqoreTooltip, IReqoreIntent {
@@ -58,6 +60,7 @@ export interface IReqorePanelProps
   children?: any;
   icon?: IReqoreIconName;
   label?: string | ReactElement<any>;
+
   collapsible?: boolean;
   isCollapsed?: boolean;
   onClose?: () => void;
@@ -74,6 +77,8 @@ export interface IReqorePanelProps
   minimal?: boolean;
   headerSize?: 1 | 2 | 3 | 4 | 5 | 6;
   contentSize?: TSizes;
+  contentEffect?: IReqoreEffect;
+  headerEffect?: IReqoreEffect;
 }
 
 export interface IStyledPanel extends IReqorePanelProps {
@@ -81,7 +86,7 @@ export interface IStyledPanel extends IReqorePanelProps {
   noHorizontalPadding?: boolean;
 }
 
-export const StyledPanel = styled.div<IStyledPanel>`
+export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
   background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
     rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)};
   border-radius: ${({ rounded }) => (rounded ? RADIUS_FROM_SIZE.normal : 0)}px;
@@ -136,8 +141,8 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
   justify-content: space-between;
   height: 40px;
   align-items: center;
-  padding: ${({ noHorizontalPadding }: IStyledPanel) =>
-    `0 5px 0 ${noHorizontalPadding ? 0 : '15px'}`};
+  padding: ${({ noHorizontalPadding, contentSize }: IStyledPanel) =>
+    `0 5px 0 ${noHorizontalPadding ? 0 : `${TEXT_FROM_SIZE[contentSize]}px`}`};
   border-bottom: ${({ theme, isCollapsed, flat, opacity = 1 }) =>
     !isCollapsed && !flat
       ? `1px solid ${rgba(changeLightness(getMainBackgroundColor(theme), 0.2), opacity)}`
@@ -159,6 +164,7 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
 
 export const StyledPanelBottomActions = styled(StyledPanelTitle)`
   padding-left: 5px;
+  padding-right: 5px;
   border-bottom: 0;
   border-top: ${({ theme, flat, opacity = 1 }) =>
     !flat
@@ -183,23 +189,12 @@ export const StyledPanelContent = styled.div<IStyledPanel>`
   font-size: ${({ contentSize }) => TEXT_FROM_SIZE[contentSize]}px;
 `;
 
-export const StyledPanelTitleLabel = styled.span`
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  margin: 0;
-`;
-
 export const StyledPanelTitleHeader = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   padding-right: 5px;
-
-  ${StyledPanelTitleLabel} {
-    font-weight: 600;
-  }
 `;
 
 export const ReqorePanel = forwardRef(
@@ -222,6 +217,8 @@ export const ReqorePanel = forwardRef(
       onCollapseChange,
       padded = true,
       contentStyle,
+      contentEffect,
+      headerEffect = {},
       headerSize = 4,
       contentSize = 'normal',
       minimal,
@@ -271,9 +268,7 @@ export const ReqorePanel = forwardRef(
       (actionOrActions: IReqorePanelAction | IReqorePanelAction[], index: number) => {
         if (Array.isArray(actionOrActions)) {
           return (
-            <ReqoreControlGroup stack minimal>
-              {actionOrActions.map(renderActions)}
-            </ReqoreControlGroup>
+            <ReqoreControlGroup stack>{actionOrActions.map(renderActions)}</ReqoreControlGroup>
           );
         }
 
@@ -330,10 +325,6 @@ export const ReqorePanel = forwardRef(
       [actions, theme]
     );
 
-    const HTMLheaderElement = useMemo(() => {
-      return `h${headerSize}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    }, [headerSize]);
-
     const interactive: boolean = !!(
       rest.onClick ||
       rest.onMouseOver ||
@@ -353,6 +344,7 @@ export const ReqorePanel = forwardRef(
         className={`${className || ''} reqore-panel`}
         interactive={interactive}
         theme={theme}
+        effect={contentEffect}
       >
         {hasTitleBar && (
           <StyledPanelTitle
@@ -362,6 +354,7 @@ export const ReqorePanel = forwardRef(
             className='reqore-panel-title'
             onClick={handleCollapseClick}
             theme={theme}
+            contentSize={contentSize}
             opacity={rest.opacity ?? (minimal ? 0 : 1)}
             noHorizontalPadding={rest.opacity === 0}
           >
@@ -374,12 +367,20 @@ export const ReqorePanel = forwardRef(
                 />
               )}
               {typeof label === 'string' ? (
-                <StyledPanelTitleLabel as={HTMLheaderElement}>{label}</StyledPanelTitleLabel>
+                <ReqoreHeading
+                  size={headerSize}
+                  effect={{
+                    noWrap: true,
+                    ...headerEffect,
+                  }}
+                >
+                  {label}
+                </ReqoreHeading>
               ) : (
                 label
               )}
             </StyledPanelTitleHeader>
-            <ReqoreControlGroup minimal>
+            <ReqoreControlGroup>
               {actions.map(renderActions)}
               {collapsible && (
                 <ReqoreButton
@@ -404,6 +405,7 @@ export const ReqorePanel = forwardRef(
         )}
         {!_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? (
           <StyledPanelContent
+            as={'div'}
             className='reqore-panel-content'
             hasLabel={!!label}
             isCollapsed={_isCollapsed}
@@ -424,8 +426,8 @@ export const ReqorePanel = forwardRef(
             opacity={rest.opacity ?? (minimal ? 0 : 1)}
             noHorizontalPadding={rest.opacity === 0}
           >
-            <ReqoreControlGroup minimal>{leftBottomActions.map(renderActions)}</ReqoreControlGroup>
-            <ReqoreControlGroup minimal>{rightBottomActions.map(renderActions)}</ReqoreControlGroup>
+            <ReqoreControlGroup>{leftBottomActions.map(renderActions)}</ReqoreControlGroup>
+            <ReqoreControlGroup>{rightBottomActions.map(renderActions)}</ReqoreControlGroup>
           </StyledPanelBottomActions>
         ) : null}
       </StyledPanel>

package/src/components/Popover/index.tsx

@@ -1,7 +1,6 @@
 import React, { memo, useState } from 'react';
 import styled from 'styled-components';
 import usePopover, { IPopoverOptions } from '../../hooks/usePopover';
-import { useWhyDidYouUpdate } from '../../hooks/useWhyDidYouUpdate';
 import { IReqoreComponent } from '../../types/global';
 
 export interface IReqorePopoverProps extends IReqoreComponent, IPopoverOptions {
@@ -33,18 +32,6 @@ const Popover = memo(
   }: IReqorePopoverProps) => {
     const [ref, setRef] = useState(undefined);
 
-    useWhyDidYouUpdate('popover', {
-      component: Component,
-      componentProps,
-      children,
-      isReqoreComponent,
-      noWrapper,
-      wrapperTag,
-      wrapperStyle,
-      _insidePopover,
-      _popoverId,
-      ...rest,
-    });
     usePopover({ targetElement: ref, ...rest });
 
     if (isReqoreComponent || noWrapper) {

package/src/components/Tabs/item.tsx

@@ -1,8 +1,9 @@
-import { forwardRef } from 'react';
+import { forwardRef, memo } from 'react';
 import styled, { css } from 'styled-components';
 import { IReqoreTabsListItem } from '.';
 import { TABS_PADDING_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreCustomTheme, IReqoreTheme } from '../../constants/theme';
+import { changeLightness } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import ReqoreButton from '../Button';
@@ -37,7 +38,16 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
       padding: ${vertical ? `${TABS_PADDING_TO_PX[size!]}px` : `${TABS_PADDING_TO_PX[size!]}px`};
       ${active &&
       css`
-        background-color: ${activeColor}60;
+        &:after {
+          width: ${vertical ? '5px' : '1px'};
+          height: ${vertical ? '1px' : '5px'};
+          left: ${vertical ? '0' : '50%'};
+          top: ${vertical ? '50%' : undefined};
+          bottom: ${vertical ? undefined : '0'};
+          content: '';
+          position: absolute;
+          background-color: ${activeColor};
+        }
       `}
 
       ${fill &&
@@ -64,87 +74,90 @@ export const StyledTabListItem = styled.div<IReqoreTabListItemStyle>`
   }
 `;
 
-const ReqoreTabsListItem = forwardRef(
-  (
-    {
-      tooltip,
-      label,
-      props,
-      icon,
-      active,
-      as,
-      disabled,
-      vertical,
-      onClick,
-      activeIntent,
-      onCloseClick,
-      fill,
-      intent,
-      size = 'normal',
-      closeIcon,
-      customTheme,
-      className,
-    }: IReqoreTabListItemProps,
-    ref
-  ) => {
-    const { targetRef } = useCombinedRefs(ref);
-    const theme = useReqoreTheme('main', customTheme);
-    const _intent = activeIntent || intent;
-    const activeColor = _intent ? theme.intents[_intent] : theme.main;
+const ReqoreTabsListItem = memo(
+  forwardRef(
+    (
+      {
+        tooltip,
+        label,
+        props,
+        icon,
+        active,
+        as,
+        disabled,
+        vertical,
+        onClick,
+        activeIntent,
+        onCloseClick,
+        fill,
+        intent,
+        size = 'normal',
+        closeIcon,
+        customTheme,
+        className,
+      }: IReqoreTabListItemProps,
+      ref
+    ) => {
+      const { targetRef } = useCombinedRefs(ref);
+      const theme = useReqoreTheme('main', customTheme);
+      const _intent = activeIntent || intent;
+      const activeColor = _intent ? theme.intents[_intent] : changeLightness(theme.main, 0.05);
 
-    return (
-      <StyledTabListItem
-        ref={targetRef}
-        {...props}
-        className={className}
-        intent={intent}
-        activeIntent={activeIntent}
-        activeColor={activeColor}
-        as={as}
-        size={size}
-        active={active}
-        disabled={disabled}
-        vertical={vertical}
-        theme={theme}
-        fill={fill}
-      >
-        {label || icon ? (
-          <ReqoreControlGroup stack size={size} fluid={fill || vertical}>
-            <ReqoreButton
-              flat
-              fluid={fill || vertical}
-              icon={icon}
-              minimal
-              intent={active ? activeIntent || intent : intent}
-              active={active}
-              disabled={disabled}
-              onClick={onClick}
-              tooltip={tooltip}
-              customTheme={customTheme}
-              className={`reqore-tabs-list-item ${active ? 'reqore-tabs-list-item-active' : ''}`}
-            >
-              {label}
-            </ReqoreButton>
-            {onCloseClick && !disabled ? (
+      return (
+        <StyledTabListItem
+          ref={targetRef}
+          {...props}
+          className={className}
+          intent={intent}
+          activeIntent={activeIntent}
+          activeColor={activeColor}
+          as={as}
+          size={size}
+          active={active}
+          disabled={disabled}
+          vertical={vertical}
+          theme={theme}
+          fill={fill}
+        >
+          {label || icon ? (
+            <ReqoreControlGroup stack size={size} fluid={fill || vertical}>
               <ReqoreButton
-                fixed
-                flat
-                icon={closeIcon || 'CloseLine'}
-                intent={active ? activeIntent || intent : intent}
+                flat={!active && !intent}
+                fluid={fill || vertical}
+                icon={icon}
                 minimal
-                className='reqore-tabs-list-item-close'
+                intent={active ? activeIntent || intent : intent}
+                active={active}
+                disabled={disabled}
+                onClick={onClick}
+                tooltip={tooltip}
                 customTheme={customTheme}
-                onClick={(event) => {
-                  event.stopPropagation();
-                  onCloseClick?.();
-                }}
-              />
-            ) : null}
-          </ReqoreControlGroup>
-        ) : null}
-      </StyledTabListItem>
-    );
-  }
+                className={`reqore-tabs-list-item ${active ? 'reqore-tabs-list-item-active' : ''}`}
+              >
+                {label}
+              </ReqoreButton>
+              {onCloseClick && !disabled ? (
+                <ReqoreButton
+                  fixed
+                  flat={!active && !intent}
+                  icon={closeIcon || 'CloseLine'}
+                  intent={active ? activeIntent || intent : intent}
+                  minimal
+                  active={active}
+                  className='reqore-tabs-list-item-close'
+                  customTheme={customTheme}
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    onCloseClick?.();
+                  }}
+                />
+              ) : null}
+            </ReqoreControlGroup>
+          ) : null}
+        </StyledTabListItem>
+      );
+    }
+  )
 );
 
 export default ReqoreTabsListItem;

package/src/components/Tag/index.tsx

@@ -1,4 +1,5 @@
 import _size from 'lodash/size';
+import { rgba } from 'polished';
 import React, { forwardRef, useContext } from 'react';
 import styled, { css } from 'styled-components';
 import { ReqorePopover } from '../..';
@@ -14,8 +15,14 @@ import ThemeContext from '../../context/ThemeContext';
 import { changeLightness, getReadableColor, getReadableColorFrom } from '../../helpers/colors';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useTooltip } from '../../hooks/useTooltip';
-import { IReqoreDisabled, IReqoreIntent, IWithReqoreTooltip } from '../../types/global';
+import {
+  IReqoreDisabled,
+  IReqoreIntent,
+  IWithReqoreEffect,
+  IWithReqoreTooltip,
+} from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
+import { StyledEffect } from '../Effect';
 import ReqoreIcon from '../Icon';
 
 export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, IReqoreIntent {
@@ -26,7 +33,8 @@ export interface IReqoreTagAction extends IWithReqoreTooltip, IReqoreDisabled, I
 export interface IReqoreTagProps
   extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'>,
     IWithReqoreTooltip,
-    IReqoreDisabled {
+    IReqoreDisabled,
+    IWithReqoreEffect {
   size?: TSizes;
   label?: string | number;
   labelKey?: string | number;
@@ -47,7 +55,7 @@ export interface IReqoreTagStyle extends IReqoreTagProps {
   interactive?: boolean;
 }
 
-export const StyledTag = styled.div<IReqoreTagStyle>`
+export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   display: inline-flex;
   justify-content: center;
   flex-shrink: 0;
@@ -55,6 +63,7 @@ export const StyledTag = styled.div<IReqoreTagStyle>`
   font-family: system-ui;
   font-weight: 600;
   overflow: hidden;
+  vertical-align: middle;
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
   height: ${({ size }) => SIZE_TO_PX[size]}px;
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
@@ -67,8 +76,8 @@ export const StyledTag = styled.div<IReqoreTagStyle>`
       background-color: ${color || changeLightness(theme.main, 0.1)};
       color: ${color ? getReadableColorFrom(color) : getReadableColor(theme, undefined, undefined)};
 
-      ${StyledTagContentKey}, ${StyledTagContentWrapper} {
-        background-color: ${labelKey ? changeLightness(color || theme.main, 0.05) : undefined};
+      ${StyledTagContentWrapper} {
+        background-color: ${labelKey ? rgba('#000000', 0.2) : undefined};
       }
     `}
 
@@ -130,14 +139,14 @@ const StyledButtonWrapper = styled.div<IReqoreTagStyle>`
   align-items: center;
   transition: all 0.2s ease-out;
 
-  ${({ theme, color }) =>
+  ${({ color }) =>
     css`
       .reqore-icon {
         transform: scale(0.85);
       }
       &:hover {
         cursor: pointer;
-        background-color: ${changeLightness(color || theme.main, color ? 0.09 : 0.19)};
+        background-color: ${color ? changeLightness(color, 0.09) : rgba('#000000', 0.2)};
 
         .reqore-icon {
           transform: scale(1);