@qoretechnologies/reqore 0.30.1 → 0.30.3

package/dist/types/global.d.ts

@@ -129,6 +129,19 @@ export interface IWithReqoreFluid {
      */
     fluid?: boolean;
 }
+export interface IWithReqoreFixed {
+    /**
+     * If true, the component will be fixed in fluid containers
+     * @default false
+     * @type boolean
+     * @example
+     * <ReqoreInput fixed />
+     * <ReqoreInput fixed={true} />
+     * <ReqoreInput fixed={false} />
+     *
+     */
+    fixed?: boolean;
+}
 export interface IWithReqoreMinimal {
     /**
      * If true, the component will be minimal

package/dist/types/global.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/types/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;CACnC;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe;CAAG;AAC1D,oBAAY,kBAAkB,GAAG,MAAM,GAAG,cAAc,CAAC"}
+{"version":3,"file":"global.d.ts","sourceRoot":"","sources":["../../src/types/global.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAC5C,OAAO,EAAE,kBAAkB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B;;;;;;;;;;;;OAYG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,kBAAkB,CAAC;CAClC;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC;CACnC;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B;;;;;;;;;;OAUG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;;;OASG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,kBAAkB;IACjC;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,iBAAiB;IAChC;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,aAAa,CAAC;CACxB;AAED,MAAM,WAAW,cAAe,SAAQ,eAAe;CAAG;AAC1D,oBAAY,kBAAkB,GAAG,MAAM,GAAG,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.30.1",
+  "version": "0.30.3",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,6 +24,10 @@
     "qorus",
     "react"
   ],
+  "pre-push": [
+    "build:test",
+    "test"
+  ],
   "author": "Qore Technologies",
   "license": "ISC",
   "bugs": {
@@ -60,6 +64,7 @@
     "jest-github-actions-reporter": "^1.0.2",
     "npm-cli-login": "^0.1.1",
     "playwright": "^1.16.3",
+    "pre-push": "^0.1.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-test-renderer": "^17.0.2",

package/src/components/Checkbox/index.tsx

@@ -272,7 +272,7 @@ const Checkbox = forwardRef<HTMLDivElement, IReqoreCheckboxProps>(
                       textSize: getOneLessSize(size),
                       weight: 'bold',
                       ...switchTextEffect,
-                      opacity: checked ? 0.8 : 1,
+                      opacity: checked ? 0.3 : 1,
                     } as IReqoreEffect
                   }
                 >

package/src/components/Collection/index.tsx

@@ -6,7 +6,7 @@ import { IReqoreIconName } from '../../types/icons';
 import { IReqoreColumnsProps, StyledColumns } from '../Columns';
 import ReqoreInput from '../Input';
 import ReqoreMessage from '../Message';
-import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../Panel';
+import { IReqorePanelAction, IReqorePanelProps, ReqorePanel, TReqorePanelActions } from '../Panel';
 import { sortTableData } from '../Table/helpers';
 import { IReqoreCollectionItemProps, ReqoreCollectionItem } from './item';
 
@@ -134,10 +134,29 @@ export const ReqoreCollection = ({
   };
 
   const finalItems = filteredItems;
-  const finalActions: (IReqorePanelAction[] | IReqorePanelAction)[] = useMemo(() => {
-    let actions: (IReqorePanelAction[] | IReqorePanelAction)[] = rest.actions
-      ? [...rest.actions]
-      : [];
+  const finalActions: TReqorePanelActions = useMemo(() => {
+    let actions: TReqorePanelActions = rest.actions ? [...rest.actions] : [];
+
+    const toolbarGroup: IReqorePanelAction = {
+      responsive: false,
+      group: [
+        {
+          icon: _showAs === 'grid' ? 'ListOrdered' : 'GridLine',
+          onClick: () => setShowAs(_showAs === 'grid' ? 'list' : 'grid'),
+          tooltip: _showAs === 'grid' ? 'Show as list' : 'Show as grid',
+          disabled: !size(finalItems),
+        },
+      ],
+    };
+
+    if (sortable) {
+      toolbarGroup.group.push({
+        icon: sort === 'desc' ? 'SortDesc' : 'SortAsc',
+        onClick: () => setSort(sort === 'desc' ? 'asc' : 'desc'),
+        tooltip: sort === 'desc' ? 'Sort ascending' : 'Sort descending',
+        disabled: !size(finalItems),
+      });
+    }
 
     if (filterable) {
       actions = [
@@ -156,29 +175,7 @@ export const ReqoreCollection = ({
       ];
     }
 
-    if (sortable) {
-      actions = [
-        ...actions,
-        {
-          icon: sort === 'desc' ? 'SortDesc' : 'SortAsc',
-          onClick: () => setSort(sort === 'desc' ? 'asc' : 'desc'),
-          tooltip: sort === 'desc' ? 'Sort ascending' : 'Sort descending',
-          disabled: !size(finalItems),
-          responsive: false,
-        },
-      ];
-    }
-
-    return [
-      ...actions,
-      {
-        icon: _showAs === 'grid' ? 'ListOrdered' : 'GridLine',
-        onClick: () => setShowAs(_showAs === 'grid' ? 'list' : 'grid'),
-        tooltip: _showAs === 'grid' ? 'Show as list' : 'Show as grid',
-        disabled: !size(finalItems),
-        responsive: false,
-      },
-    ];
+    return [...actions, toolbarGroup];
   }, [filterable, handleQueryChange, query, rest.actions, _showAs, sort, sortable, finalItems]);
 
   return (

package/src/components/Collection/item.tsx

@@ -71,7 +71,6 @@ export const StyledCollectionItemContent = styled.div`
 export const ReqoreCollectionItem = ({
   flat = true,
   minimal = true,
-  headerSize = 3,
   style,
   content,
   actions,
@@ -203,7 +202,6 @@ export const ReqoreCollectionItem = ({
         )}
         <ReqorePanel
           flat={flat}
-          headerSize={headerSize}
           ref={ref}
           minimal={minimal}
           {...rest}

package/src/components/ControlGroup/index.tsx

@@ -2,7 +2,7 @@ import { debounce } from 'lodash';
 import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useMount, useUnmount } from 'react-use';
 import styled, { css } from 'styled-components';
-import { ReqoreButton, ReqoreModal } from '../..';
+import { ReqoreButton, ReqoreDrawer } from '../..';
 import { GAP_FROM_SIZE, RADIUS_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import {
@@ -131,12 +131,9 @@ const ReqoreControlGroup = memo(
 
     const [overflowingChildren, setOverflowingChildren] = useState<number | undefined>(0);
     const [lastReSize, setLastReSize] = useState<number>(0);
-    const [isResizing, setIsResizing] = useState<boolean>(false);
     const [isOverflownDialogOpen, setIsOverflownDialogOpen] = useState<boolean>(false);
     const observer = useRef<ResizeObserver | null>(null);
     const ref = useRef<HTMLDivElement>(null);
-    const resizeTimerObserver = useRef<ResizeObserver | null>(null);
-    const resizingTimer = useRef<any>(null);
 
     const realChildCount = useMemo((): number => {
       let count = 0;
@@ -160,10 +157,10 @@ const ReqoreControlGroup = memo(
 
     const checkIfOverflowing = useCallback(() => {
       return (
+        ref.current &&
         ref.current.clientWidth > 40 &&
         !vertical &&
         responsive &&
-        ref.current &&
         ref.current.scrollWidth > ref.current.clientWidth
       );
     }, [vertical, responsive, ref, children]);
@@ -180,18 +177,7 @@ const ReqoreControlGroup = memo(
             }, 200)
           );
 
-          resizeTimerObserver.current = new ResizeObserver(() => {
-            if (ref && ref.current) {
-              setIsResizing(true);
-              clearTimeout(resizingTimer.current);
-              resizingTimer.current = setTimeout(() => {
-                setIsResizing(false);
-              }, 500);
-            }
-          });
-
           observer.current.observe(ref.current);
-          resizeTimerObserver.current.observe(ref.current);
         }
       }
     });
@@ -200,12 +186,6 @@ const ReqoreControlGroup = memo(
       if (observer.current) {
         observer.current.disconnect();
       }
-
-      if (resizeTimerObserver.current) {
-        resizeTimerObserver.current.disconnect();
-      }
-
-      clearTimeout(resizingTimer.current);
     });
 
     useEffect(() => {
@@ -427,12 +407,12 @@ const ReqoreControlGroup = memo(
                 customTheme={customTheme}
                 tooltip={{
                   content: `Show ${React.Children.count(overflownChildren)} hidden items`,
-                  closeOnAnyClick: true,
                 }}
                 fixed
+                active={isOverflownDialogOpen}
                 onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
                   e.stopPropagation();
-                  setIsOverflownDialogOpen(true);
+                  setIsOverflownDialogOpen(!isOverflownDialogOpen);
                 }}
                 flat
               />,
@@ -444,26 +424,28 @@ const ReqoreControlGroup = memo(
     return (
       <>
         {isOverflownDialogOpen ? (
-          <ReqoreModal
+          <ReqoreDrawer
             isOpen
             onClose={() => setIsOverflownDialogOpen(false)}
             flat
+            floating
             minimal
+            position='bottom'
             hasBackdrop={false}
-            intent='info'
             label='Hidden items'
+            minSize='100px'
+            size='auto'
           >
             <ReqoreControlGroup fluid wrap>
               {overflownChildren}
             </ReqoreControlGroup>
-          </ReqoreModal>
+          </ReqoreDrawer>
         ) : null}
         <StyledReqoreControlGroup
           {...rest}
           vertical={vertical}
           style={{
             overflowX: responsive ? 'auto' : undefined,
-            visibility: isResizing ? 'hidden' : undefined,
             ...rest.style,
           }}
           size={size}

package/src/components/Drawer/index.tsx

@@ -27,7 +27,7 @@ export interface IReqoreDrawerProps extends Omit<IReqorePanelProps, 'size'> {
   onClose?: () => void;
   onHideToggle?: (isHidden: boolean) => void;
   hasBackdrop?: boolean;
-  size?: string;
+  size?: string | 'auto';
   maxSize?: string;
   minSize?: string;
   opacity?: number;

package/src/components/InternalPopover/index.tsx

@@ -1,4 +1,4 @@
-import { isString } from 'lodash';
+import { cloneDeep, isString } from 'lodash';
 import { rgba } from 'polished';
 import React, { MutableRefObject, memo, useContext, useEffect, useRef, useState } from 'react';
 import { usePopper } from 'react-popper';
@@ -187,7 +187,7 @@ const InternalPopover: React.FC<IReqoreInternalPopoverProps> = memo(
 
     useEffect(() => {
       if (popperRef.current) {
-        updatePopover?.(id, { popperRef });
+        updatePopover?.(id, { popperRef: cloneDeep(popperRef) });
       }
     }, [popperRef]);
 

package/src/components/Menu/index.tsx

@@ -74,7 +74,13 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
 
     return (
       <ReqoreThemeProvider theme={theme}>
-        <StyledReqoreMenu {...rest} position={position} ref={ref} theme={theme}>
+        <StyledReqoreMenu
+          {...rest}
+          position={position}
+          ref={ref}
+          theme={theme}
+          className={`${rest.className || ''} reqore-menu`}
+        >
           {React.Children.map(children, (child) => {
             return child
               ? // @ts-ignore

package/src/components/Panel/index.tsx

@@ -5,6 +5,7 @@ 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,
@@ -18,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';
@@ -44,6 +46,7 @@ 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;
@@ -59,6 +62,8 @@ export interface IReqorePanelBottomAction extends IReqorePanelAction {
 }
 
 export interface IReqorePanelContent {}
+export type TReqorePanelActions = IReqorePanelAction[];
+export type TReqorePanelBottomActions = IReqorePanelBottomAction[];
 
 export interface IReqorePanelProps
   extends IWithReqoreSize,
@@ -77,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;
@@ -181,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)}`
@@ -215,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
@@ -225,21 +229,21 @@ export const StyledPanelBottomActions = styled(StyledPanelTitle)`
 
 export const StyledPanelContent = styled.div<IStyledPanel>`
   display: ${({ isCollapsed }) => (isCollapsed ? 'none !important' : undefined)};
-  padding: ${({ padded, contentSize, noHorizontalPadding }) =>
+  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, contentSize }) =>
-    minimal && hasLabel && padded ? `${TEXT_FROM_SIZE[contentSize] / 2}px` : undefined};
-  padding-bottom: ${({ minimal, padded, contentSize }) =>
-    minimal && padded ? `${TEXT_FROM_SIZE[contentSize]}px` : 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`
@@ -275,13 +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
@@ -304,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]
     );
 
@@ -331,55 +342,42 @@ 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 renderResponsiveActions = useCallback(
-      (actionOrActions: IReqorePanelAction | IReqorePanelAction[], index: number) => {
-        return renderActions(actionOrActions, index, true);
+      (action: IReqorePanelAction, index: number) => {
+        return renderActions(action, index, true);
       },
       [actions]
     );
 
     const hasNonResponsiveActions = useCallback(
-      (data: (IReqorePanelAction[] | IReqorePanelAction)[]) =>
-        data.some((action) => !Array.isArray(action) && action.responsive === false),
+      (data: TReqorePanelActions) =>
+        data.some((action) => action.responsive === false && action.show !== false),
       [actions, bottomActions]
     );
 
     const hasResponsiveActions = useCallback(
-      (data: (IReqorePanelAction[] | IReqorePanelAction)[]) =>
-        data.some((action) => Array.isArray(action) || action.responsive !== false),
+      (data: TReqorePanelActions) =>
+        data.some((action) => action.responsive !== false && action.show !== false),
       [actions, bottomActions]
     );
 
     const renderNonResponsiveActions = useCallback(
-      (actionOrActions: IReqorePanelAction | IReqorePanelAction[], index: number) => {
-        return renderActions(actionOrActions, index, false);
+      (action: IReqorePanelAction, index: number) => {
+        return renderActions(action, index, false);
       },
       [actions]
     );
 
     const renderActions = useCallback(
-      (
-        actionOrActions: IReqorePanelAction | IReqorePanelAction[],
-        index: number,
-        includeResponsive
-      ) => {
-        const action: IReqorePanelAction = Array.isArray(actionOrActions)
-          ? {
-              show: true,
-              responsive: true,
-              as: ReqoreControlGroup,
-              props: {
-                stack: true,
-                fluid: true,
-                children: actionOrActions.map(renderActions),
-              },
-            }
-          : actionOrActions;
-
+      (action: IReqorePanelAction, index: number, includeResponsive) => {
         if (
           action.show === false ||
           (includeResponsive && action.responsive === false) ||
@@ -396,9 +394,26 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           className,
           as: CustomElement,
           props = {},
+          group,
           ...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>
+          );
+        }
+
         if (size(actions)) {
           return (
             <ReqoreDropdown<IReqoreButtonProps>
@@ -467,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;
@@ -505,14 +520,16 @@ 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={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}
@@ -520,7 +537,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
               )}
               {typeof label === 'string' ? (
                 <ReqoreHeading
-                  size={headerSize}
+                  size={headerSize || panelSize}
                   customTheme={theme}
                   effect={{
                     noWrap: true,
@@ -536,7 +553,7 @@ 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} />
@@ -544,14 +561,20 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
               ) : null}
             </StyledPanelTitleHeader>
             {hasResponsiveActions(actions) && (
-              <ReqoreControlGroup responsive fluid horizontalAlign='flex-end' customTheme={theme}>
+              <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'>
+                <ReqoreControlGroup fixed horizontalAlign='flex-end' size={panelSize}>
                   {actions.map(renderNonResponsiveActions)}
                   {collapsible && (
                     <ReqoreButton
@@ -587,7 +610,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             style={contentStyle}
             padded={padded}
             minimal={minimal}
-            contentSize={contentSize}
+            size={contentSize || panelSize}
             noHorizontalPadding={noHorizontalPadding}
           >
             {children}
@@ -599,30 +622,37 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             className='reqore-panel-bottom-actions'
             theme={theme}
             opacity={opacity ?? (minimal ? 0 : 1)}
+            size={contentSize || panelSize}
             noHorizontalPadding={noHorizontalPadding}
           >
             {hasNonResponsiveActions(leftBottomActions) ? (
               <>
-                <ReqoreControlGroup>
+                <ReqoreControlGroup size={panelSize}>
                   {leftBottomActions.map(renderNonResponsiveActions)}
                 </ReqoreControlGroup>
                 <ReqoreHorizontalSpacer width={GAP_FROM_SIZE.normal} />
               </>
             ) : null}
             {hasResponsiveActions(leftBottomActions) && (
-              <ReqoreControlGroup fluid responsive customTheme={theme}>
+              <ReqoreControlGroup fluid responsive customTheme={theme} size={panelSize}>
                 {leftBottomActions.map(renderResponsiveActions)}
               </ReqoreControlGroup>
             )}
             {hasResponsiveActions(rightBottomActions) && (
-              <ReqoreControlGroup fluid horizontalAlign='flex-end' responsive customTheme={theme}>
+              <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'>
+                <ReqoreControlGroup horizontalAlign='flex-end' size={panelSize}>
                   {rightBottomActions.map(renderNonResponsiveActions)}
                 </ReqoreControlGroup>
               </>

package/src/components/Tag/index.tsx

@@ -26,6 +26,7 @@ import {
   IReqoreDisabled,
   IReqoreIntent,
   IWithReqoreEffect,
+  IWithReqoreFixed,
   IWithReqoreFluid,
   IWithReqoreMinimal,
   IWithReqoreTooltip,
@@ -46,7 +47,8 @@ export interface IReqoreTagProps
     IReqoreDisabled,
     IWithReqoreEffect,
     IWithReqoreMinimal,
-    IWithReqoreFluid {
+    IWithReqoreFluid,
+    IWithReqoreFixed {
   size?: TSizes;
   label?: string | number;
   labelKey?: string | number;