@qoretechnologies/reqore 0.30.6 → 0.30.8

package/src/components/Panel/index.tsx

@@ -4,6 +4,8 @@ import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react'
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
+  GAP_FROM_SIZE,
+  HEADER_SIZE_TO_NUMBER,
   ICON_FROM_HEADER_SIZE,
   PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
@@ -17,6 +19,7 @@ import {
   getMainBackgroundColor,
   getReadableColor,
 } from '../../helpers/colors';
+import { isActionShown } from '../../helpers/utils';
 import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { useTooltip } from '../../hooks/useTooltip';
@@ -25,6 +28,7 @@ import {
   IReqoreIntent,
   IWithReqoreCustomTheme,
   IWithReqoreFlat,
+  IWithReqoreFluid,
   IWithReqoreSize,
   IWithReqoreTooltip,
 } from '../../types/global';
@@ -37,17 +41,20 @@ import { IReqoreDropdownItem } from '../Dropdown/list';
 import { IReqoreEffect, StyledEffect, TReqoreEffectColor } from '../Effect';
 import { ReqoreHeading } from '../Header';
 import ReqoreIcon, { StyledIconWrapper } from '../Icon';
-import { ReqoreSpacer } from '../Spacer';
+import { ReqoreHorizontalSpacer, ReqoreSpacer } from '../Spacer';
 
 export interface IReqorePanelAction extends IReqoreButtonProps, IWithReqoreTooltip, IReqoreIntent {
   label?: string | number;
   onClick?: () => void;
+  group?: IReqorePanelAction[];
   actions?: Omit<IReqoreDropdownItem[], 'value'>;
   // Custom react element
   as?: React.ElementType;
-  props?: any;
+  props?: { [key: string | number]: any } | undefined;
   // Hide the action if the condition is false
   show?: boolean;
+  // Hide the action if the group is too small
+  responsive?: boolean;
 }
 
 export interface IReqorePanelBottomAction extends IReqorePanelAction {
@@ -55,6 +62,8 @@ export interface IReqorePanelBottomAction extends IReqorePanelAction {
 }
 
 export interface IReqorePanelContent {}
+export type TReqorePanelActions = IReqorePanelAction[];
+export type TReqorePanelBottomActions = IReqorePanelBottomAction[];
 
 export interface IReqorePanelProps
   extends IWithReqoreSize,
@@ -62,6 +71,7 @@ export interface IReqorePanelProps
     IWithReqoreFlat,
     IReqoreIntent,
     IWithReqoreTooltip,
+    IWithReqoreFluid,
     React.HTMLAttributes<HTMLDivElement> {
   as?: any;
   children?: any;
@@ -72,8 +82,8 @@ export interface IReqorePanelProps
   isCollapsed?: boolean;
   onClose?: () => void;
   rounded?: boolean;
-  actions?: (IReqorePanelAction | IReqorePanelAction[])[];
-  bottomActions?: IReqorePanelBottomAction[];
+  actions?: TReqorePanelActions;
+  bottomActions?: TReqorePanelBottomActions;
   unMountContentOnCollapse?: boolean;
   onCollapseChange?: (isCollapsed?: boolean) => void;
   fill?: boolean;
@@ -87,6 +97,7 @@ export interface IReqorePanelProps
   contentEffect?: IReqoreEffect;
   headerEffect?: IReqoreEffect;
   transparent?: boolean;
+  iconColor?: TReqoreEffectColor;
 }
 
 export interface IStyledPanel extends IReqorePanelProps {
@@ -98,12 +109,12 @@ 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;
-  border: ${({ theme, flat, opacity = 1, intent }) =>
+  border: ${({ theme, flat, intent }) =>
     flat && !intent
       ? undefined
-      : `1px solid ${rgba(
-          changeLightness(intent ? theme.intents[intent] : getMainBackgroundColor(theme), 0.2),
-          opacity
+      : `1px solid ${changeLightness(
+          intent ? theme.intents[intent] : getMainBackgroundColor(theme),
+          0.2
         )}`};
   color: ${({ theme }) => getReadableColor(theme, undefined, undefined, true)};
   overflow: hidden;
@@ -112,7 +123,9 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
   position: relative;
   backdrop-filter: ${({ blur, opacity }) => (blur && opacity < 1 ? `blur(${blur}px)` : undefined)};
   transition: 0.2s ease-in-out;
-  flex: auto;
+  width: ${({ fluid }) => (fluid ? '100%' : undefined)};
+  max-width: 100%;
+  flex: ${({ fluid }) => (fluid ? '1 auto' : '0 0 auto')};
 
   ${({ interactive, theme, opacity = 1, flat, intent }) =>
     interactive
@@ -124,35 +137,37 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
               transform: scale(${ACTIVE_ICON_SCALE});
             }
 
-            background-color: ${rgba(
-              darken(0.025, rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)),
-              opacity === 0 ? 0.2 : opacity
-            )};
+            background-color: ${opacity === 0 && flat
+              ? undefined
+              : rgba(
+                  darken(0.025, rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)),
+                  opacity
+                )};
 
             border-color: ${flat && !intent
               ? undefined
-              : `${rgba(
-                  changeLightness(
-                    intent ? theme.intents[intent] : getMainBackgroundColor(theme),
-                    0.25
-                  ),
-                  opacity
+              : `${changeLightness(
+                  intent ? theme.intents[intent] : getMainBackgroundColor(theme),
+                  0.25
                 )}`};
 
-            ${StyledCollectionItemContent}:after {
-              background: linear-gradient(
-                to top,
-                ${rgba(
-                    darken(
-                      0.025,
-                      rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)
-                    ),
-                    opacity === 0 ? 0.2 : opacity
-                  )}
-                  0%,
-                transparent 100%
-              );
-            }
+            ${opacity !== 0 &&
+            css`
+              ${StyledCollectionItemContent}:after {
+                background: linear-gradient(
+                  to top,
+                  ${rgba(
+                      darken(
+                        0.025,
+                        rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)
+                      ),
+                      opacity
+                    )}
+                    0%,
+                  transparent 100%
+                );
+              }
+            `}
           }
         `
       : undefined}
@@ -171,12 +186,10 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
   background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
     rgba(changeLightness(getMainBackgroundColor(theme), 0.03), opacity)};
   justify-content: space-between;
-  height: 40px;
+  min-height: 20px;
   align-items: center;
-  padding: ${({ noHorizontalPadding, contentSize }: IStyledPanel) =>
-    `0 ${noHorizontalPadding ? 0 : '5px'} 0 ${
-      noHorizontalPadding ? 0 : `${TEXT_FROM_SIZE[contentSize]}px`
-    }`};
+  padding: ${({ noHorizontalPadding, size }: IStyledPanel) =>
+    `${PADDING_FROM_SIZE[size]}px ${noHorizontalPadding ? 0 : `${PADDING_FROM_SIZE[size]}px`}`};
   border-bottom: ${({ theme, isCollapsed, flat, opacity = 1 }) =>
     !isCollapsed && !flat
       ? `1px solid ${rgba(changeLightness(getMainBackgroundColor(theme), 0.2), opacity)}`
@@ -205,7 +218,8 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
 `;
 
 export const StyledPanelBottomActions = styled(StyledPanelTitle)`
-  padding: ${({ noHorizontalPadding }: IStyledPanel) => `0 ${noHorizontalPadding ? 0 : '5px'}`};
+  padding: ${({ noHorizontalPadding, size }: IStyledPanel) =>
+    `${PADDING_FROM_SIZE[size]}px ${noHorizontalPadding ? 0 : `${PADDING_FROM_SIZE[size]}px`}`};
   border-bottom: 0;
   border-top: ${({ theme, flat, opacity = 1 }) =>
     !flat
@@ -214,29 +228,33 @@ export const StyledPanelBottomActions = styled(StyledPanelTitle)`
 `;
 
 export const StyledPanelContent = styled.div<IStyledPanel>`
-  display: ${({ isCollapsed }) => (isCollapsed ? 'none' : undefined)};
-  padding: ${({ padded, contentSize, noHorizontalPadding }) =>
+  display: ${({ isCollapsed }) => (isCollapsed ? 'none !important' : undefined)};
+  padding: ${({ padded, size, noHorizontalPadding }) =>
     !padded
       ? undefined
       : noHorizontalPadding
-      ? `${TEXT_FROM_SIZE[contentSize]}px 0`
-      : `${TEXT_FROM_SIZE[contentSize]}px`};
+      ? `${PADDING_FROM_SIZE[size]}px 0`
+      : `${PADDING_FROM_SIZE[size]}px`};
   // The padding is not needed when the panel is minimal and has title, since
   // the title already has padding and is transparent
-  padding-top: ${({ minimal, hasLabel, padded }) =>
-    minimal && hasLabel && padded ? '0px' : undefined};
-  padding-bottom: ${({ minimal, padded }) => (minimal && padded ? '10px' : undefined)};
+  padding-top: ${({ minimal, hasLabel, padded, size }) =>
+    minimal && hasLabel && padded ? `${PADDING_FROM_SIZE[size] / 2}px` : undefined};
+  padding-bottom: ${({ minimal, padded, size }) =>
+    minimal && padded ? `${PADDING_FROM_SIZE[size]}px` : undefined};
   flex: 1;
   overflow: auto;
-  font-size: ${({ contentSize }) => TEXT_FROM_SIZE[contentSize]}px;
+  font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
 `;
 
 export const StyledPanelTitleHeader = styled.div`
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
-  overflow: hidden;
   padding-right: 5px;
+  flex: 1 1 auto;
+  width: 100%;
+  overflow: hidden;
+  min-width: 100px;
 `;
 
 export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
@@ -261,11 +279,14 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       contentStyle,
       contentEffect,
       headerEffect = {},
-      headerSize = 4,
-      contentSize = 'normal',
+      headerSize,
+      contentSize,
       minimal,
       tooltip,
       badge,
+      iconColor,
+      fluid,
+      size: panelSize = 'normal',
       ...rest
     }: IReqorePanelProps,
     ref
@@ -288,7 +309,13 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
 
     // Return true if the card has a title bar, otherwise return false.
     const hasTitleBar: boolean = useMemo(
-      () => !!label || collapsible || !!onClose || !!size(actions) || !!badge,
+      () =>
+        !!label ||
+        collapsible ||
+        !!onClose ||
+        !!size(actions.filter(isActionShown)) ||
+        !!badge ||
+        !!icon,
       [label, collapsible, onClose, actions, badge]
     );
 
@@ -315,21 +342,47 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
 
     // Calculates whether or not the bottom actions should be displayed.
     const hasBottomActions: boolean = useMemo(
-      () => !!(size(leftBottomActions) || size(rightBottomActions)),
+      () =>
+        !!(
+          size(leftBottomActions.filter(isActionShown)) ||
+          size(rightBottomActions.filter(isActionShown))
+        ),
       [leftBottomActions, rightBottomActions]
     );
 
-    const renderActions = useCallback(
-      (actionOrActions: IReqorePanelAction | IReqorePanelAction[], index: number) => {
-        if (Array.isArray(actionOrActions)) {
-          return (
-            <ReqoreControlGroup key={index} stack>
-              {actionOrActions.map(renderActions)}
-            </ReqoreControlGroup>
-          );
-        }
+    const renderResponsiveActions = useCallback(
+      (action: IReqorePanelAction, index: number) => {
+        return renderActions(action, index, true);
+      },
+      [actions]
+    );
+
+    const hasNonResponsiveActions = useCallback(
+      (data: TReqorePanelActions) =>
+        data.some((action) => action.responsive === false && action.show !== false),
+      [actions, bottomActions]
+    );
+
+    const hasResponsiveActions = useCallback(
+      (data: TReqorePanelActions) =>
+        data.some((action) => action.responsive !== false && action.show !== false),
+      [actions, bottomActions]
+    );
+
+    const renderNonResponsiveActions = useCallback(
+      (action: IReqorePanelAction, index: number) => {
+        return renderActions(action, index, false);
+      },
+      [actions]
+    );
 
-        if (actionOrActions.show === false) {
+    const renderActions = useCallback(
+      (action: IReqorePanelAction, index: number, includeResponsive) => {
+        if (
+          action.show === false ||
+          (includeResponsive && action.responsive === false) ||
+          (!includeResponsive && (action.responsive === true || !('responsive' in action)))
+        ) {
           return null;
         }
 
@@ -340,20 +393,38 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           intent,
           className,
           as: CustomElement,
-          props,
+          props = {},
+          group,
           ...rest
-        }: IReqorePanelAction = actionOrActions;
+        }: IReqorePanelAction = action;
+
+        if (size(group)) {
+          return (
+            <ReqoreControlGroup
+              intent={intent}
+              stack
+              customTheme={rest.customTheme || theme}
+              size={rest.size}
+              fixed
+              fluid={rest.fluid}
+              key={index}
+            >
+              {group.map((action, index) => renderActions(action, index, true))}
+            </ReqoreControlGroup>
+          );
+        }
 
         if (size(actions)) {
           return (
             <ReqoreDropdown<IReqoreButtonProps>
               {...rest}
               key={index}
+              fixed
               label={label}
               items={actions}
               intent={intent}
               className={className}
-              customTheme={theme}
+              customTheme={rest.customTheme || theme}
               onClick={(e: React.MouseEvent<HTMLButtonElement>) => e.stopPropagation()}
               id={id}
             />
@@ -363,9 +434,10 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         if (CustomElement) {
           return (
             <CustomElement
+              fixed
               {...props}
               key={index}
-              customTheme={theme}
+              customTheme={props.customTheme || theme}
               onClick={(e: React.MouseEvent<any>) => {
                 e.stopPropagation();
                 props?.onClick?.(e);
@@ -378,9 +450,10 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           <ReqoreButton
             {...rest}
             id={id}
+            fixed
             key={index}
             className={className}
-            customTheme={theme}
+            customTheme={rest.customTheme || theme}
             intent={intent}
             onClick={
               rest.onClick
@@ -409,7 +482,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
     const transformedContentEffect: IReqoreEffect = useMemo(() => {
       const newContentEffect: IReqoreEffect = { ...contentEffect };
 
-      if (newContentEffect?.gradient) {
+      if (newContentEffect.gradient) {
         newContentEffect.gradient.borderColor = intent
           ? theme.intents[intent]
           : newContentEffect.gradient.borderColor;
@@ -421,6 +494,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
     }, [intent, theme, contentEffect, interactive]);
 
     const opacity = rest.transparent ? 0 : rest.opacity;
+    const noHorizontalPadding = opacity === 0 && flat && !intent;
 
     return (
       <StyledPanel
@@ -436,6 +510,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         theme={theme}
         effect={transformedContentEffect}
         opacity={opacity}
+        fluid={fluid}
       >
         {hasTitleBar && (
           <StyledPanelTitle
@@ -445,21 +520,24 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             className='reqore-panel-title'
             onClick={handleCollapseClick}
             theme={theme}
-            contentSize={contentSize}
+            size={contentSize || panelSize}
             opacity={opacity ?? (minimal ? 0 : 1)}
-            noHorizontalPadding={opacity === 0}
+            noHorizontalPadding={noHorizontalPadding}
           >
             <StyledPanelTitleHeader>
               {icon && (
                 <ReqoreIcon
-                  size={`${ICON_FROM_HEADER_SIZE[headerSize]}px`}
+                  size={`${
+                    ICON_FROM_HEADER_SIZE[headerSize || HEADER_SIZE_TO_NUMBER[panelSize]]
+                  }px`}
                   icon={icon}
                   margin='right'
+                  color={iconColor}
                 />
               )}
               {typeof label === 'string' ? (
                 <ReqoreHeading
-                  size={headerSize}
+                  size={headerSize || panelSize}
                   customTheme={theme}
                   effect={{
                     noWrap: true,
@@ -475,34 +553,52 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                 <>
                   <ButtonBadge
                     color={changeLightness(theme.main, 0.18)}
-                    size='big'
+                    size={panelSize}
                     content={badge}
                   />
                   <ReqoreSpacer width={PADDING_FROM_SIZE.normal} />
                 </>
               ) : null}
             </StyledPanelTitleHeader>
-            <ReqoreControlGroup>
-              {actions.map(renderActions)}
-              {collapsible && (
-                <ReqoreButton
-                  customTheme={theme}
-                  icon={_isCollapsed ? 'ArrowDownSLine' : 'ArrowUpSLine'}
-                  onClick={handleCollapseClick}
-                  tooltip={_isCollapsed ? 'Expand' : 'Collapse'}
-                />
-              )}
-              {onClose && (
-                <ReqoreButton
-                  customTheme={theme}
-                  icon='CloseLine'
-                  onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
-                    e.stopPropagation();
-                    onClose?.();
-                  }}
-                />
-              )}
-            </ReqoreControlGroup>
+            {hasResponsiveActions(actions) && (
+              <ReqoreControlGroup
+                responsive
+                fluid
+                horizontalAlign='flex-end'
+                customTheme={theme}
+                size={panelSize}
+              >
+                {actions.map(renderResponsiveActions)}
+              </ReqoreControlGroup>
+            )}
+            {collapsible || onClose || hasNonResponsiveActions(actions) ? (
+              <>
+                <ReqoreHorizontalSpacer width={GAP_FROM_SIZE.normal} />
+                <ReqoreControlGroup fixed horizontalAlign='flex-end' size={panelSize}>
+                  {actions.map(renderNonResponsiveActions)}
+                  {collapsible && (
+                    <ReqoreButton
+                      customTheme={theme}
+                      icon={_isCollapsed ? 'ArrowDownSLine' : 'ArrowUpSLine'}
+                      onClick={handleCollapseClick}
+                      tooltip={_isCollapsed ? 'Expand' : 'Collapse'}
+                      fixed
+                    />
+                  )}
+                  {onClose && (
+                    <ReqoreButton
+                      fixed
+                      customTheme={theme}
+                      icon='CloseLine'
+                      onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+                        e.stopPropagation();
+                        onClose?.();
+                      }}
+                    />
+                  )}
+                </ReqoreControlGroup>
+              </>
+            ) : null}
           </StyledPanelTitle>
         )}
         {!_isCollapsed || (_isCollapsed && !unMountContentOnCollapse) ? (
@@ -514,8 +610,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             style={contentStyle}
             padded={padded}
             minimal={minimal}
-            contentSize={contentSize}
-            noHorizontalPadding={opacity === 0}
+            size={contentSize || panelSize}
+            noHorizontalPadding={noHorizontalPadding}
           >
             {children}
           </StyledPanelContent>
@@ -526,10 +622,41 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             className='reqore-panel-bottom-actions'
             theme={theme}
             opacity={opacity ?? (minimal ? 0 : 1)}
-            noHorizontalPadding={opacity === 0}
+            size={contentSize || panelSize}
+            noHorizontalPadding={noHorizontalPadding}
           >
-            <ReqoreControlGroup>{leftBottomActions.map(renderActions)}</ReqoreControlGroup>
-            <ReqoreControlGroup>{rightBottomActions.map(renderActions)}</ReqoreControlGroup>
+            {hasNonResponsiveActions(leftBottomActions) ? (
+              <>
+                <ReqoreControlGroup size={panelSize}>
+                  {leftBottomActions.map(renderNonResponsiveActions)}
+                </ReqoreControlGroup>
+                <ReqoreHorizontalSpacer width={GAP_FROM_SIZE.normal} />
+              </>
+            ) : null}
+            {hasResponsiveActions(leftBottomActions) && (
+              <ReqoreControlGroup fluid responsive customTheme={theme} size={panelSize}>
+                {leftBottomActions.map(renderResponsiveActions)}
+              </ReqoreControlGroup>
+            )}
+            {hasResponsiveActions(rightBottomActions) && (
+              <ReqoreControlGroup
+                fluid
+                horizontalAlign='flex-end'
+                responsive
+                customTheme={theme}
+                size={panelSize}
+              >
+                {rightBottomActions.map(renderResponsiveActions)}
+              </ReqoreControlGroup>
+            )}
+            {hasNonResponsiveActions(rightBottomActions) ? (
+              <>
+                <ReqoreHorizontalSpacer width={GAP_FROM_SIZE.normal} />
+                <ReqoreControlGroup horizontalAlign='flex-end' size={panelSize}>
+                  {rightBottomActions.map(renderNonResponsiveActions)}
+                </ReqoreControlGroup>
+              </>
+            ) : null}
           </StyledPanelBottomActions>
         ) : null}
       </StyledPanel>

package/src/components/Popover/index.tsx

@@ -8,7 +8,6 @@ export interface IReqorePopoverProps extends IReqoreComponent, IPopoverOptions {
   componentProps?: any;
   children?: any;
   isReqoreComponent?: boolean;
-  noWrapper?: boolean;
   wrapperTag?: string;
   wrapperStyle?: React.CSSProperties;
 }
@@ -23,7 +22,6 @@ const Popover = memo(
     componentProps,
     children,
     isReqoreComponent,
-    noWrapper,
     wrapperTag = 'span',
     wrapperStyle = {},
     passPopoverData,
@@ -39,7 +37,7 @@ const Popover = memo(
       passPopoverData?.(popoverData);
     }, [popoverData]);
 
-    if (isReqoreComponent || noWrapper) {
+    if (isReqoreComponent) {
       return (
         <Component
           {...componentProps}