@qoretechnologies/reqore 0.30.4 → 0.30.6

package/src/components/Panel/index.tsx

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

package/src/components/Popover/index.tsx

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