@qoretechnologies/reqore 0.25.10 → 0.26.1

package/src/components/Header/index.tsx

@@ -1,38 +1,43 @@
-import styled, { css } from 'styled-components';
+import { useMemo } from 'react';
+import styled from 'styled-components';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { getReadableColor } from '../../helpers/colors';
+import { IWithReqoreEffect } from '../../types/global';
+import { StyledTextEffect } from '../Effect';
 
-export interface IReqoreHeaderStyle extends React.HTMLAttributes<HTMLHeadingElement> {
-  theme: IReqoreTheme;
+export interface IReqoreHeadingProps
+  extends IWithReqoreEffect,
+    React.HTMLAttributes<HTMLHeadingElement> {
   intent?: TReqoreIntent;
+  size?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+
+export interface IReqoreHeadingStyle extends IReqoreHeadingProps {
+  theme: IReqoreTheme;
 }
 
-const style = ({ theme, intent }: IReqoreHeaderStyle) => css`
+export const StyledHeader = styled(StyledTextEffect)`
   margin: 0;
   padding: 0;
-  color: ${intent ? theme.intents[intent] : getReadableColor(theme, undefined, undefined, true)};
-`;
-
-export const ReqoreH1: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h1<IReqoreHeaderStyle>`
-  ${(props) => style(props)};
-`;
-
-export const ReqoreH2: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h2<IReqoreHeaderStyle>`
-  ${(props) => style(props)};
+  color: ${({ theme, intent }) =>
+    intent ? theme.intents[intent] : getReadableColor(theme, undefined, undefined, true)};
 `;
 
-export const ReqoreH3: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h3<IReqoreHeaderStyle>`
-  ${(props) => style(props)};
-`;
-
-export const ReqoreH4: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h4<IReqoreHeaderStyle>`
-  ${(props) => style(props)};
-`;
-
-export const ReqoreH5: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h5<IReqoreHeaderStyle>`
-  ${(props) => style(props)};
-`;
-
-export const ReqoreH6: React.FC<Omit<IReqoreHeaderStyle, 'theme'>> = styled.h6<IReqoreHeaderStyle>`
-  ${(props) => style(props)};
-`;
+export const ReqoreHeading = ({ size, children, ...props }: IReqoreHeadingProps) => {
+  const HTMLheaderElement = useMemo(() => {
+    return `h${size}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  }, [size]);
+
+  return (
+    <StyledHeader as={HTMLheaderElement} {...props}>
+      {children}
+    </StyledHeader>
+  );
+};
+
+export const ReqoreH1 = (props: IReqoreHeadingProps) => <ReqoreHeading size={1} {...props} />;
+export const ReqoreH2 = (props: IReqoreHeadingProps) => <ReqoreHeading size={2} {...props} />;
+export const ReqoreH3 = (props: IReqoreHeadingProps) => <ReqoreHeading size={3} {...props} />;
+export const ReqoreH4 = (props: IReqoreHeadingProps) => <ReqoreHeading size={4} {...props} />;
+export const ReqoreH5 = (props: IReqoreHeadingProps) => <ReqoreHeading size={5} {...props} />;
+export const ReqoreH6 = (props: IReqoreHeadingProps) => <ReqoreHeading size={6} {...props} />;

package/src/components/Input/index.tsx

@@ -13,8 +13,10 @@ import {
   IReqoreIntent,
   IReqoreReadOnly,
   IWithReqoreCustomTheme,
+  IWithReqoreEffect,
 } from '../../types/global';
 import { IReqoreIconName } from '../../types/icons';
+import { StyledEffect } from '../Effect';
 import ReqoreIcon from '../Icon';
 import ReqoreInputClearButton from '../InputClearButton';
 
@@ -23,7 +25,8 @@ export interface IReqoreInputProps
     IReqoreDisabled,
     IReqoreReadOnly,
     IReqoreIntent,
-    IWithReqoreCustomTheme {
+    IWithReqoreCustomTheme,
+    IWithReqoreEffect {
   autoFocus?: boolean;
   tooltip?: string;
   width?: number;
@@ -37,6 +40,7 @@ export interface IReqoreInputProps
   icon?: IReqoreIconName;
   flat?: boolean;
   rounded?: boolean;
+  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
 }
 
 export interface IReqoreInputStyle extends IReqoreInputProps {
@@ -66,7 +70,7 @@ const StyledIconWrapper = styled.div<IReqoreInputStyle>`
   align-items: center;
 `;
 
-export const StyledInput = styled.input<IReqoreInputStyle>`
+export const StyledInput = styled(StyledEffect)<IReqoreInputStyle>`
   height: 100%;
   width: 100%;
   flex: 1;
@@ -96,25 +100,28 @@ export const StyledInput = styled.input<IReqoreInputStyle>`
       : undefined}
 
   background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
-    minimal ? 'transparent' : rgba(theme.main, 0.3)};
-  color: ${({ theme }: IReqoreInputStyle) => getReadableColor(theme)};
+    minimal ? 'transparent' : rgba(theme.main, 0.1)};
+  color: ${({ theme }: IReqoreInputStyle) =>
+    getReadableColor(theme, undefined, undefined, true, theme.originalMain)};
 
   transition: all 0.2s ease-out;
 
   &:active,
   &:focus {
     background-color: ${({ theme, minimal }: IReqoreInputStyle) =>
-      minimal ? 'transparent' : rgba(theme.main, 0.5)};
+      minimal ? 'transparent' : rgba(theme.main, 0.15)};
   }
 
   &::placeholder {
     transition: all 0.2s ease-out;
-    color: ${({ theme }) => rgba(getReadableColor(theme), 0.3)};
+    color: ${({ theme }) =>
+      rgba(getReadableColor(theme, undefined, undefined, true, theme.originalMain), 0.3)};
   }
 
   &:focus {
     &::placeholder {
-      color: ${({ theme }) => rgba(getReadableColor(theme), 0.5)};
+      color: ${({ theme }) =>
+        rgba(getReadableColor(theme, undefined, undefined, true, theme.originalMain), 0.5)};
     }
   }
 
@@ -174,6 +181,7 @@ const ReqoreInput = forwardRef(
         )}
         <StyledInput
           {...rest}
+          as='input'
           theme={theme}
           _size={size}
           minimal={minimal}

package/src/components/Menu/index.tsx

@@ -63,7 +63,7 @@ const ReqoreMenu: React.FC<IReqoreMenuProps> = forwardRef(
                   _insidePopover,
                   _popoverId,
                   customTheme: theme,
-                  wrapText,
+                  wrap: wrapText,
                 })
               : null
           )}

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,13 +60,13 @@ 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;
   min-height: ${({ size = 'normal' }: IReqoreNotificationStyle) => TABS_SIZE_TO_PX[size]}px;
   display: flex;
-  flex: 0 auto;
+  flex: 0 0 auto;
   overflow: auto;
   position: relative;
   transition: all 0.2s ease-out;
@@ -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,10 @@ 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 ${noHorizontalPadding ? 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)}`
@@ -158,7 +165,7 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
 `;
 
 export const StyledPanelBottomActions = styled(StyledPanelTitle)`
-  padding-left: 5px;
+  padding: ${({ noHorizontalPadding }: IStyledPanel) => `0 ${noHorizontalPadding ? 0 : '5px'}`};
   border-bottom: 0;
   border-top: ${({ theme, flat, opacity = 1 }) =>
     !flat
@@ -183,23 +190,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 +218,8 @@ export const ReqorePanel = forwardRef(
       onCollapseChange,
       padded = true,
       contentStyle,
+      contentEffect,
+      headerEffect = {},
       headerSize = 4,
       contentSize = 'normal',
       minimal,
@@ -271,9 +269,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 +326,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 +345,7 @@ export const ReqorePanel = forwardRef(
         className={`${className || ''} reqore-panel`}
         interactive={interactive}
         theme={theme}
+        effect={contentEffect}
       >
         {hasTitleBar && (
           <StyledPanelTitle
@@ -362,6 +355,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 +368,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 +406,7 @@ export const ReqorePanel = forwardRef(
         )}
         {!_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? (
           <StyledPanelContent
+            as={'div'}
             className='reqore-panel-content'
             hasLabel={!!label}
             isCollapsed={_isCollapsed}
@@ -424,8 +427,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) {