@qoretechnologies/reqore 0.29.8 → 0.30.0

package/src/components/Panel/index.tsx

@@ -4,6 +4,7 @@ import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react'
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
+  GAP_FROM_SIZE,
   ICON_FROM_HEADER_SIZE,
   PADDING_FROM_SIZE,
   RADIUS_FROM_SIZE,
@@ -25,6 +26,7 @@ import {
   IReqoreIntent,
   IWithReqoreCustomTheme,
   IWithReqoreFlat,
+  IWithReqoreFluid,
   IWithReqoreSize,
   IWithReqoreTooltip,
 } from '../../types/global';
@@ -37,7 +39,7 @@ 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;
@@ -45,9 +47,11 @@ export interface IReqorePanelAction extends IReqoreButtonProps, IWithReqoreToolt
   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 {
@@ -62,6 +66,7 @@ export interface IReqorePanelProps
     IWithReqoreFlat,
     IReqoreIntent,
     IWithReqoreTooltip,
+    IWithReqoreFluid,
     React.HTMLAttributes<HTMLDivElement> {
   as?: any;
   children?: any;
@@ -99,12 +104,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;
@@ -113,7 +118,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
@@ -125,35 +132,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}
@@ -215,7 +224,7 @@ export const StyledPanelBottomActions = styled(StyledPanelTitle)`
 `;
 
 export const StyledPanelContent = styled.div<IStyledPanel>`
-  display: ${({ isCollapsed }) => (isCollapsed ? 'none' : undefined)};
+  display: ${({ isCollapsed }) => (isCollapsed ? 'none !important' : undefined)};
   padding: ${({ padded, contentSize, noHorizontalPadding }) =>
     !padded
       ? undefined
@@ -224,9 +233,10 @@ export const StyledPanelContent = styled.div<IStyledPanel>`
       : `${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 }) =>
-    minimal && hasLabel && padded ? '0px' : undefined};
-  padding-bottom: ${({ minimal, padded }) => (minimal && padded ? '10px' : undefined)};
+  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};
   flex: 1;
   overflow: auto;
   font-size: ${({ contentSize }) => TEXT_FROM_SIZE[contentSize]}px;
@@ -234,10 +244,13 @@ export const StyledPanelContent = styled.div<IStyledPanel>`
 
 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>(
@@ -268,6 +281,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       tooltip,
       badge,
       iconColor,
+      fluid,
       ...rest
     }: IReqorePanelProps,
     ref
@@ -321,17 +335,56 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       [leftBottomActions, rightBottomActions]
     );
 
-    const renderActions = useCallback(
+    const renderResponsiveActions = useCallback(
       (actionOrActions: IReqorePanelAction | IReqorePanelAction[], index: number) => {
-        if (Array.isArray(actionOrActions)) {
-          return (
-            <ReqoreControlGroup key={index} stack>
-              {actionOrActions.map(renderActions)}
-            </ReqoreControlGroup>
-          );
-        }
+        return renderActions(actionOrActions, index, true);
+      },
+      [actions]
+    );
+
+    const hasNonResponsiveActions = useCallback(
+      (data: (IReqorePanelAction[] | IReqorePanelAction)[]) =>
+        data.some((action) => !Array.isArray(action) && action.responsive === false),
+      [actions, bottomActions]
+    );
+
+    const hasResponsiveActions = useCallback(
+      (data: (IReqorePanelAction[] | IReqorePanelAction)[]) =>
+        data.some((action) => Array.isArray(action) || action.responsive !== false),
+      [actions, bottomActions]
+    );
 
-        if (actionOrActions.show === false) {
+    const renderNonResponsiveActions = useCallback(
+      (actionOrActions: IReqorePanelAction | IReqorePanelAction[], index: number) => {
+        return renderActions(actionOrActions, 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;
+
+        if (
+          action.show === false ||
+          (includeResponsive && action.responsive === false) ||
+          (!includeResponsive && (action.responsive === true || !('responsive' in action)))
+        ) {
           return null;
         }
 
@@ -342,20 +395,21 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           intent,
           className,
           as: CustomElement,
-          props,
+          props = {},
           ...rest
-        }: IReqorePanelAction = actionOrActions;
+        }: IReqorePanelAction = action;
 
         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}
             />
@@ -365,9 +419,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);
@@ -380,9 +435,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
@@ -423,6 +479,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
@@ -438,6 +495,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
         theme={theme}
         effect={transformedContentEffect}
         opacity={opacity}
+        fluid={fluid}
       >
         {hasTitleBar && (
           <StyledPanelTitle
@@ -449,7 +507,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             theme={theme}
             contentSize={contentSize}
             opacity={opacity ?? (minimal ? 0 : 1)}
-            noHorizontalPadding={opacity === 0}
+            noHorizontalPadding={noHorizontalPadding}
           >
             <StyledPanelTitleHeader>
               {icon && (
@@ -485,27 +543,39 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                 </>
               ) : 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}>
+                {actions.map(renderResponsiveActions)}
+              </ReqoreControlGroup>
+            )}
+            {collapsible || onClose || hasNonResponsiveActions(actions) ? (
+              <>
+                <ReqoreHorizontalSpacer width={GAP_FROM_SIZE.normal} />
+                <ReqoreControlGroup fixed horizontalAlign='flex-end'>
+                  {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) ? (
@@ -518,7 +588,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             padded={padded}
             minimal={minimal}
             contentSize={contentSize}
-            noHorizontalPadding={opacity === 0}
+            noHorizontalPadding={noHorizontalPadding}
           >
             {children}
           </StyledPanelContent>
@@ -529,10 +599,34 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             className='reqore-panel-bottom-actions'
             theme={theme}
             opacity={opacity ?? (minimal ? 0 : 1)}
-            noHorizontalPadding={opacity === 0}
+            noHorizontalPadding={noHorizontalPadding}
           >
-            <ReqoreControlGroup>{leftBottomActions.map(renderActions)}</ReqoreControlGroup>
-            <ReqoreControlGroup>{rightBottomActions.map(renderActions)}</ReqoreControlGroup>
+            {hasNonResponsiveActions(leftBottomActions) ? (
+              <>
+                <ReqoreControlGroup>
+                  {leftBottomActions.map(renderNonResponsiveActions)}
+                </ReqoreControlGroup>
+                <ReqoreHorizontalSpacer width={GAP_FROM_SIZE.normal} />
+              </>
+            ) : null}
+            {hasResponsiveActions(leftBottomActions) && (
+              <ReqoreControlGroup fluid responsive customTheme={theme}>
+                {leftBottomActions.map(renderResponsiveActions)}
+              </ReqoreControlGroup>
+            )}
+            {hasResponsiveActions(rightBottomActions) && (
+              <ReqoreControlGroup fluid horizontalAlign='flex-end' responsive customTheme={theme}>
+                {rightBottomActions.map(renderResponsiveActions)}
+              </ReqoreControlGroup>
+            )}
+            {hasNonResponsiveActions(rightBottomActions) ? (
+              <>
+                <ReqoreHorizontalSpacer width={GAP_FROM_SIZE.normal} />
+                <ReqoreControlGroup horizontalAlign='flex-end'>
+                  {rightBottomActions.map(renderNonResponsiveActions)}
+                </ReqoreControlGroup>
+              </>
+            ) : null}
           </StyledPanelBottomActions>
         ) : null}
       </StyledPanel>

package/src/components/Spacer/index.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import styled, { css } from 'styled-components';
 import { SIZE_TO_NUMBER, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { changeLightness } from '../../helpers/colors';
@@ -6,32 +6,68 @@ import { useReqoreTheme } from '../../hooks/useTheme';
 import { IReqoreIntent, IWithReqoreCustomTheme, IWithReqoreEffect } from '../../types/global';
 import { StyledEffect } from '../Effect';
 
-export const StyledSpacer = styled(StyledEffect)`
+export const StyledSpacer = styled.div`
+  display: ${({ horizontal }) => (horizontal ? 'inline-flex' : 'flex')};
+  vertical-align: middle;
+
+  ${({ horizontal, vertical }) => {
+    if (horizontal) {
+      return css`
+        flex-flow: row;
+      `;
+    }
+
+    if (vertical) {
+      return css`
+        flex-flow: column;
+      `;
+    }
+  }}
+
+  flex-shrink: 0;
+`;
+
+export const StyledSpace = styled.div`
+  display: inline-block;
+  flex: 0 0 auto;
+
   ${({ horizontal, vertical, width, height, lineSize }) => {
     if (horizontal) {
       return css`
-        margin-left: ${width / 2}px;
-        margin-right: ${width / 2}px;
-        width: ${lineSize === 'none' ? 1 : SIZE_TO_NUMBER[lineSize]}px;
+        width: ${width / 2 - lineSize / 2}px;
         height: ${height ? `${height}px` : `${TEXT_FROM_SIZE.normal}px`};
-        vertical-align: middle;
-        display: inline-block;
       `;
     }
 
     if (vertical) {
       return css`
-        margin-top: ${height / 2}px;
-        margin-bottom: ${height / 2}px;
-        height: ${lineSize === 'none' ? 1 : SIZE_TO_NUMBER[lineSize]}px;
         width: ${width ? `${width}px` : '100%'};
+        height: ${height / 2 - lineSize / 2}px;
       `;
     }
   }}
+`;
 
+export const StyledLine = styled(StyledEffect)`
+  flex-shrink: 0;
   background-color: ${({ theme, lineSize }) =>
     lineSize === 'none' ? 'transparent' : changeLightness(theme.main, 0.2)};
-  flex-shrink: 0;
+
+  ${({ horizontal, vertical, width, height, lineSize }) => {
+    if (horizontal) {
+      return css`
+        width: ${lineSize}px;
+        height: ${height ? `${height}px` : `${TEXT_FROM_SIZE.normal}px`};
+      `;
+    }
+
+    if (vertical) {
+      return css`
+        width: ${width ? `${width}px` : '100%'};
+        height: ${lineSize}px;
+      `;
+    }
+  }}
 `;
 
 export interface IReqoreSpacerProps
@@ -66,16 +102,29 @@ export const ReqoreSpacer = memo(
       }
     }
 
+    const _lineSize = useMemo(
+      () => (lineSize === 'none' ? 0 : SIZE_TO_NUMBER[lineSize]),
+      [lineSize]
+    );
+
     return (
       <StyledSpacer
         as='div'
         {...rest}
-        theme={theme}
-        lineSize={lineSize}
         horizontal={horizontal}
         vertical={vertical}
         className='reqore-spacer'
-      />
+      >
+        <StyledSpace {...rest} horizontal={horizontal} vertical={vertical} lineSize={_lineSize} />
+        <StyledLine
+          {...rest}
+          horizontal={horizontal}
+          vertical={vertical}
+          theme={theme}
+          lineSize={_lineSize}
+        />
+        <StyledSpace {...rest} horizontal={horizontal} vertical={vertical} lineSize={_lineSize} />
+      </StyledSpacer>
     );
   }
 );

package/src/components/Tabs/content.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 
+export type TReqoreTabsContentPadding = 'horizontal' | 'vertical' | 'none' | 'both' | true | false;
+
 export interface IReqoreTabsContent extends React.HTMLAttributes<HTMLDivElement> {
   children?: any;
   tabId: string | number;
+  padded?: TReqoreTabsContentPadding;
 }
 
 const StyledTabsContent = styled.div`
@@ -11,11 +14,16 @@ const StyledTabsContent = styled.div`
   flex-flow: column;
   overflow: hidden;
   flex: 1;
-  padding: 10px;
+  padding: ${({ padded }: IReqoreTabsContent) =>
+    padded === 'none' || padded === false
+      ? undefined
+      : `${padded === 'both' || padded === true || padded === 'vertical' ? 10 : 0}px ${
+          padded === 'both' || padded === true || padded === 'horizontal' ? 10 : 0
+        }px}`};
 `;
 
-const ReqoreTabsContent = ({ children, className, ...rest }: IReqoreTabsContent) => (
-  <StyledTabsContent {...rest} className={`${className || ''} reqore-tabs-content`}>
+const ReqoreTabsContent = ({ children, className, padded = true, ...rest }: IReqoreTabsContent) => (
+  <StyledTabsContent {...rest} padded={padded} className={`${className || ''} reqore-tabs-content`}>
     {children}
   </StyledTabsContent>
 );

package/src/components/Tabs/index.tsx

@@ -1,9 +1,11 @@
-import React, { ReactElement, useEffect, useState } from 'react';
+import React, { ReactElement, useState } from 'react';
+import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import { TSizes } from '../../constants/sizes';
 import { IReqoreCustomTheme, TReqoreIntent } from '../../constants/theme';
 import { IReqoreIconName } from '../../types/icons';
 import { IReqoreButtonProps } from '../Button';
+import { TReqoreTabsContentPadding } from './content';
 import ReqoreTabsList from './list';
 
 export interface IReqoreTabsListItem extends Omit<IReqoreButtonProps, 'id'> {
@@ -26,6 +28,8 @@ export interface IReqoreTabsProps extends React.HTMLAttributes<HTMLDivElement> {
   fillParent?: boolean;
   vertical?: boolean;
   activeTabIntent?: TReqoreIntent;
+  padded?: boolean;
+  tabsPadding?: TReqoreTabsContentPadding;
   wrapTabNames?: boolean;
   flat?: boolean;
   size?: TSizes;
@@ -61,11 +65,13 @@ const ReqoreTabs = ({
   wrapTabNames,
   customTheme,
   intent,
+  padded,
+  tabsPadding,
   ...rest
 }: IReqoreTabsProps) => {
   const [_activeTab, setActiveTab] = useState<string | number>(activeTab || tabs[0].id);
 
-  useEffect(() => {
+  useUpdateEffect(() => {
     if (activeTab || activeTab === 0) {
       setActiveTab(activeTab);
 
@@ -84,6 +90,7 @@ const ReqoreTabs = ({
     >
       <ReqoreTabsList
         tabs={tabs}
+        padded={padded}
         flat={flat}
         fill={fill}
         size={size}
@@ -104,7 +111,11 @@ const ReqoreTabs = ({
         }}
       />
       {React.Children.map(children, (child) =>
-        child && child.props?.tabId === _activeTab ? child : null
+        child && child.props?.tabId === _activeTab
+          ? React.cloneElement(child, {
+              padded: child.props?.padded || tabsPadding,
+            })
+          : null
       )}
     </StyledTabs>
   );