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

@@ -31,13 +31,15 @@ import ReqoreButton, { IReqoreButtonProps } from '../Button';
 import { StyledCollectionItemContent } from '../Collection/item';
 import ReqoreControlGroup from '../ControlGroup';
 import ReqoreDropdown from '../Dropdown';
-import { IReqoreDropdownItemProps } from '../Dropdown/item';
+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 {
   label?: string | number;
   onClick?: () => void;
-  actions?: IReqoreDropdownItemProps[];
+  actions?: IReqoreDropdownItem[];
   customContent?: () => string | React.ReactNode;
 }
 
@@ -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,
@@ -267,70 +264,66 @@ export const ReqorePanel = forwardRef(
       [leftBottomActions, rightBottomActions]
     );
 
-    const renderActions = (
-      actionOrActions: IReqorePanelAction | IReqorePanelAction[],
-      index: number
-    ) => {
-      if (Array.isArray(actionOrActions)) {
-        return (
-          <ReqoreControlGroup stack minimal>
-            {actionOrActions.map(renderActions)}
-          </ReqoreControlGroup>
-        );
-      }
-
-      const { id, actions, label, intent, className, customContent, ...rest }: IReqorePanelAction =
-        actionOrActions;
+    const renderActions = useCallback(
+      (actionOrActions: IReqorePanelAction | IReqorePanelAction[], index: number) => {
+        if (Array.isArray(actionOrActions)) {
+          return (
+            <ReqoreControlGroup stack>{actionOrActions.map(renderActions)}</ReqoreControlGroup>
+          );
+        }
+
+        const {
+          id,
+          actions,
+          label,
+          intent,
+          className,
+          customContent,
+          ...rest
+        }: IReqorePanelAction = actionOrActions;
+
+        if (size(actions)) {
+          return (
+            <ReqoreDropdown<IReqoreButtonProps>
+              {...rest}
+              key={index}
+              label={label}
+              items={actions}
+              intent={intent}
+              className={className}
+              onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.stopPropagation()}
+              id={id}
+            />
+          );
+        }
+
+        if (customContent) {
+          return customContent();
+        }
 
-      if (size(actions)) {
         return (
-          <ReqoreDropdown
+          <ReqoreButton
             {...rest}
+            id={id}
             key={index}
-            label={label}
-            componentProps={{
-              intent,
-              id,
-              minimal: true,
-              className,
-              onClick: (e: React.MouseEvent<HTMLButtonElement>) => {
-                e.stopPropagation();
-              },
-            }}
-            items={actions}
-          />
+            className={className}
+            customTheme={theme}
+            intent={intent}
+            onClick={
+              rest.onClick
+                ? (e: React.MouseEvent<HTMLButtonElement>) => {
+                    e.stopPropagation();
+                    rest.onClick?.();
+                  }
+                : undefined
+            }
+          >
+            {label}
+          </ReqoreButton>
         );
-      }
-
-      if (customContent) {
-        return customContent();
-      }
-
-      return (
-        <ReqoreButton
-          {...rest}
-          id={id}
-          key={index}
-          className={className}
-          customTheme={theme}
-          intent={intent}
-          onClick={
-            rest.onClick
-              ? (e: React.MouseEvent<HTMLButtonElement>) => {
-                  e.stopPropagation();
-                  rest.onClick?.();
-                }
-              : undefined
-          }
-        >
-          {label}
-        </ReqoreButton>
-      );
-    };
-
-    const HTMLheaderElement = useMemo(() => {
-      return `h${headerSize}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    }, [headerSize]);
+      },
+      [actions, theme]
+    );
 
     const interactive: boolean = !!(
       rest.onClick ||
@@ -351,6 +344,7 @@ export const ReqorePanel = forwardRef(
         className={`${className || ''} reqore-panel`}
         interactive={interactive}
         theme={theme}
+        effect={contentEffect}
       >
         {hasTitleBar && (
           <StyledPanelTitle
@@ -360,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}
           >
@@ -372,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
@@ -402,6 +405,7 @@ export const ReqorePanel = forwardRef(
         )}
         {!_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? (
           <StyledPanelContent
+            as={'div'}
             className='reqore-panel-content'
             hasLabel={!!label}
             isCollapsed={_isCollapsed}
@@ -422,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,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { memo, useState } from 'react';
 import styled from 'styled-components';
 import usePopover, { IPopoverOptions } from '../../hooks/usePopover';
 import { IReqoreComponent } from '../../types/global';
@@ -17,49 +17,51 @@ export const StyledPopover = styled.span`
   overflow: hidden;
 `;
 
-const Popover = ({
-  component: Component,
-  componentProps,
-  children,
-  isReqoreComponent,
-  noWrapper,
-  wrapperTag = 'span',
-  wrapperStyle = {},
-  _insidePopover,
-  _popoverId,
-  ...rest
-}: IReqorePopoverProps) => {
-  const [ref, setRef] = useState(undefined);
+const Popover = memo(
+  ({
+    component: Component,
+    componentProps,
+    children,
+    isReqoreComponent,
+    noWrapper,
+    wrapperTag = 'span',
+    wrapperStyle = {},
+    _insidePopover,
+    _popoverId,
+    ...rest
+  }: IReqorePopoverProps) => {
+    const [ref, setRef] = useState(undefined);
 
-  usePopover({ targetElement: ref, ...rest });
+    usePopover({ targetElement: ref, ...rest });
+
+    if (isReqoreComponent || noWrapper) {
+      return (
+        <Component
+          {...componentProps}
+          _insidePopover={_insidePopover}
+          _popoverId={_popoverId}
+          ref={setRef}
+        >
+          {children}
+        </Component>
+      );
+    }
 
-  if (isReqoreComponent || noWrapper) {
     return (
-      <Component
-        {...componentProps}
-        _insidePopover={_insidePopover}
-        _popoverId={_popoverId}
+      // @ts-ignore
+      <StyledPopover
+        // @ts-ignore
+        as={wrapperTag}
+        className='reqore-popover-wrapper'
         ref={setRef}
+        style={wrapperStyle}
       >
-        {children}
-      </Component>
+        <Component {...componentProps} _insidePopover={_insidePopover} _popoverId={_popoverId}>
+          {children}
+        </Component>
+      </StyledPopover>
     );
   }
-
-  return (
-    // @ts-ignore
-    <StyledPopover
-      // @ts-ignore
-      as={wrapperTag}
-      className='reqore-popover-wrapper'
-      ref={setRef}
-      style={wrapperStyle}
-    >
-      <Component {...componentProps} _insidePopover={_insidePopover} _popoverId={_popoverId}>
-        {children}
-      </Component>
-    </StyledPopover>
-  );
-};
+);
 
 export default Popover;