@qoretechnologies/reqore 0.34.2 → 0.34.4

package/src/components/ControlGroup/index.tsx

@@ -11,7 +11,7 @@ import {
   IWithReqoreFlat,
   IWithReqoreFluid,
   IWithReqoreMinimal,
-  IWithReqoreSize
+  IWithReqoreSize,
 } from '../../types/global';
 import { StyledHeader } from '../Header';
 import { StyledParagraph } from '../Paragraph';
@@ -336,7 +336,6 @@ const ReqoreControlGroup = memo(
 
             let newProps = {
               ...child.props,
-              key: child.props.reactKey || child.props.key || index,
               minimal:
                 child.props?.minimal || child.props?.minimal === false
                   ? child.props.minimal
@@ -430,13 +429,13 @@ const ReqoreControlGroup = memo(
                 tooltip={{
                   content: `Show ${React.Children.count(overflownChildren)} hidden items`,
                 }}
-                fixed
                 active={isOverflownDialogOpen}
                 onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
                   e.stopPropagation();
                   setIsOverflownDialogOpen(!isOverflownDialogOpen);
                 }}
                 flat
+                fixed
               />,
             ]
           : children,

package/src/components/Drawer/index.tsx

@@ -218,16 +218,6 @@ export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
       });
     }
 
-    /* Adding a close button to the drawer. */
-    if (onClose) {
-      builtActions.push({
-        responsive: false,
-        icon: 'CloseLine',
-        onClick: onClose,
-        className: 'reqore-drawer-close-button',
-      });
-    }
-
     return builtActions;
   }, [hidable, position, onClose]);
 
@@ -370,6 +360,10 @@ export const ReqoreDrawer: React.FC<IReqoreDrawerProps> = ({
                 intent={intent}
                 rounded={floating || _isModal ? true : false}
                 flat={flat}
+                onClose={onClose}
+                closeButtonProps={{
+                  className: 'reqore-drawer-close-button',
+                }}
                 className={`reqore-drawer`}
                 style={{
                   width: '100%',

package/src/components/Dropdown/list.tsx

@@ -132,7 +132,7 @@ const ReqoreDropdownList = memo(
                     />
                   )
               )}
-              {!includeBottomControls && <Controls />}
+              {!includeBottomControls && Controls}
             </ReqoreMenu>
           )}
         </ReqorePaginationContainer>

package/src/components/Header/index.tsx

@@ -1,14 +1,16 @@
-import { memo, useMemo } from 'react';
+import { memo, useMemo, useState } from 'react';
 import styled from 'styled-components';
 import { HEADER_SIZE_TO_NUMBER, TSizes } from '../../constants/sizes';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import { isStringSize } from '../../helpers/utils';
 import { useReqoreTheme } from '../../hooks/useTheme';
-import { IWithReqoreEffect } from '../../types/global';
+import { useTooltip } from '../../hooks/useTooltip';
+import { IWithReqoreEffect, IWithReqoreTooltip } from '../../types/global';
 import { StyledTextEffect } from '../Effect';
 
 export interface IReqoreHeadingProps
   extends IWithReqoreEffect,
+    IWithReqoreTooltip,
     React.HTMLAttributes<HTMLHeadingElement> {
   intent?: TReqoreIntent;
   size?: 1 | 2 | 3 | 4 | 5 | 6 | TSizes;
@@ -45,18 +47,22 @@ export const StyledHeader = styled(StyledTextEffect)`
 `;
 
 export const ReqoreHeading = memo(
-  ({ size, children, customTheme, intent, className, ...rest }: IReqoreHeadingProps) => {
+  ({ size, children, customTheme, intent, className, tooltip, ...rest }: IReqoreHeadingProps) => {
+    const [ref, setRef] = useState<HTMLHeadingElement>(undefined);
     const theme = useReqoreTheme('main', customTheme, intent);
     const _size: number = isStringSize(size) ? HEADER_SIZE_TO_NUMBER[size] : size;
     const HTMLheaderElement = useMemo(() => {
       return `h${_size}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     }, [_size]);
 
+    useTooltip(ref, tooltip);
+
     return (
       <StyledHeader
         as={HTMLheaderElement}
         theme={theme}
         intent={intent}
+        ref={setRef}
         {...rest}
         _size={_size}
         className={`${className || ''} reqore-heading`}

package/src/components/Paging/index.tsx

@@ -1,3 +1,4 @@
+import { debounce } from 'lodash';
 import { memo, useEffect, useRef, useState } from 'react';
 import { useUnmount, useUpdateEffect } from 'react-use';
 import styled from 'styled-components';
@@ -27,6 +28,7 @@ export interface IReqorePaginationComponentProps
   showLabels?: boolean;
   scrollOnLoadMore?: boolean;
   autoLoadMore?: boolean;
+  changePageOnScroll?: 'vertical' | 'horizontal';
   scrollContainer?: HTMLElement;
   scrollToTopOnPageChange?: boolean;
 }
@@ -79,24 +81,29 @@ function Pagination<T>({
   renderControls,
   scrollContainer,
   scrollToTopOnPageChange = true,
+  changePageOnScroll,
   ...rest
 }: IReqorePaginationProps<T>) {
   const [loadMoreRef, setLoadMoreRef] = useState<HTMLButtonElement>(undefined);
   const [scrollTargetRef, setScrollTargetRef] = useState<HTMLDivElement>(undefined);
   const observer = useRef<IntersectionObserver>(null);
 
-  useEffect(() => {
-    if (scrollTargetRef && scrollOnLoadMore && !isLastPage && !isFirstPage) {
+  useUpdateEffect(() => {
+    // If scroll container is defined, do not scroll to load more button
+    // because it will be scrolled to the bottom of the container
+    // resulting in infinite scroll
+    if (!scrollContainer && scrollTargetRef && scrollOnLoadMore && !isLastPage && !isFirstPage) {
       scrollTargetRef.scrollIntoView({
         behavior: 'smooth',
         block: 'end',
-        inline: 'nearest',
+        inline: 'start',
       });
     }
-  }, [currentPage, scrollTargetRef, scrollOnLoadMore, isLastPage, isFirstPage]);
+  }, [currentPage, scrollTargetRef, scrollContainer, scrollOnLoadMore, isLastPage, isFirstPage]);
 
   // Scroll to bottom on load more
-  useEffect(() => {
+  // Scroll container has power over scroll target
+  useUpdateEffect(() => {
     if (scrollContainer && scrollOnLoadMore && !isFirstPage) {
       scrollContainer.scrollBy?.({
         top: scrollContainer.scrollHeight,
@@ -106,7 +113,7 @@ function Pagination<T>({
   }, [currentPage, scrollContainer, scrollOnLoadMore, isFirstPage]);
 
   // Scroll to top on page change
-  useEffect(() => {
+  useUpdateEffect(() => {
     if (scrollContainer && scrollToTopOnPageChange && !infinite) {
       scrollContainer.scrollTo?.({
         top: 0,
@@ -115,6 +122,39 @@ function Pagination<T>({
     }
   }, [currentPage, scrollContainer, scrollToTopOnPageChange, infinite]);
 
+  // Switch pages when user scrolls and holds the Shift key
+  useEffect(() => {
+    const handleScroll = debounce((e: WheelEvent) => {
+      const deltaKey = changePageOnScroll === 'vertical' ? 'deltaY' : 'deltaX';
+      // Only change pages when user holds the shift key
+      // aka horizontal scroll
+      if (
+        changePageOnScroll === 'vertical' ||
+        (changePageOnScroll === 'horizontal' && e.shiftKey)
+      ) {
+        // Do not horizontal scroll
+        e.preventDefault();
+        // If the user scrolls to the right, go to the next page
+        if (e[deltaKey] > 20) {
+          next();
+          // If the user scrolls to the left, go to the previous page
+        } else if (e[deltaKey] < -20) {
+          back();
+        }
+      }
+    }, 30);
+
+    if (scrollContainer && changePageOnScroll) {
+      scrollContainer.addEventListener('wheel', handleScroll);
+    }
+
+    return () => {
+      if (scrollContainer) {
+        scrollContainer.removeEventListener('wheel', handleScroll);
+      }
+    };
+  }, [currentPage, scrollContainer, changePageOnScroll]);
+
   useUpdateEffect(() => {
     if (loadMoreRef && autoLoadMore) {
       observer.current = new IntersectionObserver(

package/src/components/Panel/NonResponsiveActions.tsx

@@ -0,0 +1,79 @@
+import { size } from 'lodash';
+import { memo } from 'react';
+import { IReqorePanelProps } from '.';
+import { ReqoreButton } from '../..';
+import { IWithReqoreCustomTheme } from '../../types/global';
+import ReqoreControlGroup, { IReqoreControlGroupProps } from '../ControlGroup';
+
+export interface IReqorePanelNonResponsiveActionsProps
+  extends IWithReqoreCustomTheme,
+    Omit<IReqoreControlGroupProps, 'children'> {
+  onCollapseClick?: () => void;
+  onCloseClick?: () => void;
+  hasResponsiveActions?: boolean;
+  isCollapsed?: boolean;
+  showControlButtons?: boolean;
+  show?: boolean;
+  children?: IReqoreControlGroupProps['children'] | undefined;
+  closeButtonProps?: IReqorePanelProps['closeButtonProps'];
+  collapseButtonProps?: IReqorePanelProps['collapseButtonProps'];
+  isSmall: boolean;
+}
+
+export const ReqorePanelNonResponsiveActions = memo(
+  ({
+    onCollapseClick,
+    onCloseClick,
+    hasResponsiveActions,
+    isCollapsed,
+    customTheme,
+    children,
+    showControlButtons,
+    show,
+    collapseButtonProps,
+    closeButtonProps,
+    isSmall,
+    ...rest
+  }: IReqorePanelNonResponsiveActionsProps) => {
+    if (!show || (!size(children) && !showControlButtons)) {
+      return null;
+    }
+
+    return (
+      <ReqoreControlGroup
+        fixed={isSmall ? false : hasResponsiveActions}
+        fluid={isSmall ? true : !hasResponsiveActions}
+        horizontalAlign='flex-end'
+        {...rest}
+      >
+        {children}
+        {!!onCollapseClick && showControlButtons ? (
+          <ReqoreButton
+            customTheme={customTheme}
+            icon={isCollapsed ? 'ArrowDownSLine' : 'ArrowUpSLine'}
+            onClick={(e) => {
+              e.stopPropagation();
+              onCollapseClick();
+            }}
+            tooltip={isCollapsed ? 'Expand' : 'Collapse'}
+            fixed
+            {...collapseButtonProps}
+          />
+        ) : null}
+        {!!onCloseClick && showControlButtons ? (
+          <ReqoreButton
+            fixed
+            customTheme={customTheme}
+            icon='CloseLine'
+            onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+              e.stopPropagation();
+              onCloseClick();
+            }}
+            tooltip='Close'
+            {...closeButtonProps}
+          />
+        ) : null}
+      </ReqoreControlGroup>
+    );
+  }
+);

package/src/components/Panel/index.tsx

@@ -1,7 +1,7 @@
 import { size } from 'lodash';
 import { darken, rgba } from 'polished';
-import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
-import { useUpdateEffect } from 'react-use';
+import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
+import { useMeasure, useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
   GAP_FROM_SIZE,
@@ -41,8 +41,9 @@ import ReqoreControlGroup from '../ControlGroup';
 import ReqoreDropdown from '../Dropdown';
 import { IReqoreDropdownItem } from '../Dropdown/list';
 import { IReqoreEffect, StyledEffect, TReqoreEffectColor } from '../Effect';
-import { ReqoreHeading } from '../Header';
+import { ReqoreHeading, StyledHeader } from '../Header';
 import ReqoreIcon, { IReqoreIconProps, StyledIconWrapper } from '../Icon';
+import { ReqorePanelNonResponsiveActions } from './NonResponsiveActions';
 
 export interface IReqorePanelAction extends IReqoreButtonProps, IWithReqoreTooltip, IReqoreIntent {
   label?: string | number;
@@ -83,7 +84,11 @@ export interface IReqorePanelProps
   badge?: TReqoreBadge | TReqoreBadge[];
   collapsible?: boolean;
   isCollapsed?: boolean;
+  collapseButtonProps?: IReqoreButtonProps;
+
   onClose?: () => void;
+  closeButtonProps?: IReqoreButtonProps;
+
   rounded?: boolean;
   actions?: TReqorePanelActions;
   bottomActions?: TReqorePanelBottomActions;
@@ -104,6 +109,8 @@ export interface IReqorePanelProps
   responsiveActions?: boolean;
   responsiveTitle?: boolean;
   getContentRef?: (ref: HTMLDivElement) => any;
+
+  headerProps?: React.HTMLAttributes<unknown>;
 }
 
 export interface IStyledPanel extends IReqorePanelProps {
@@ -111,6 +118,40 @@ export interface IStyledPanel extends IReqorePanelProps {
   noHorizontalPadding?: boolean;
 }
 
+export const StyledPanelTitleHeader = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex: 1 1 auto;
+  width: 100%;
+  overflow: hidden;
+`;
+
+export const StyledPanelTitleHeaderContent = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex: 0 1 auto;
+  overflow: hidden;
+  min-width: ${({ iconSize, hasLabel, hasIcon }) => {
+    let width = 0;
+
+    if (hasIcon) {
+      width += iconSize;
+    }
+
+    if (hasLabel) {
+      width += 50;
+    }
+
+    return width;
+  }}px;
+
+  ${StyledHeader} {
+    min-width: 50px;
+  }
+`;
+
 export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
   background-color: ${({ theme, opacity = 1 }: IStyledPanel) =>
     rgba(changeDarkness(getMainBackgroundColor(theme), 0.03), opacity)};
@@ -139,7 +180,7 @@ export const StyledPanel = styled(StyledEffect)<IStyledPanel>`
           cursor: pointer;
 
           &:hover {
-            ${StyledPanelTitle} > div > ${StyledIconWrapper} {
+            ${StyledPanelTitle} ${StyledPanelTitleHeaderContent} > ${StyledIconWrapper} {
               transform: scale(${ACTIVE_ICON_SCALE});
             }
 
@@ -206,7 +247,7 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
   flex: 0 0 auto;
   gap: ${GAP_FROM_SIZE.normal}px;
 
-  > div > ${StyledIconWrapper} {
+  ${StyledPanelTitleHeaderContent} > ${StyledIconWrapper} {
     transform: scale(${INACTIVE_ICON_SCALE});
   }
 
@@ -215,7 +256,7 @@ export const StyledPanelTitle = styled.div<IStyledPanel>`
     css`
       cursor: pointer;
       &:hover {
-        > div > ${StyledIconWrapper} {
+        ${StyledPanelTitleHeaderContent} > ${StyledIconWrapper} {
           transform: scale(${ACTIVE_ICON_SCALE});
         }
 
@@ -255,23 +296,15 @@ export const StyledPanelContent = styled.div<IStyledPanel>`
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
 `;
 
-export const StyledPanelTitleHeader = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex: 1 1 auto;
-  width: 100%;
-  overflow: hidden;
-  min-width: 100px;
-`;
-
 export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
   (
     {
       children,
       label,
+      collapseButtonProps = {},
       collapsible,
       onClose,
+      closeButtonProps = {},
       rounded = true,
       actions = [],
       bottomActions = [],
@@ -300,6 +333,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       responsiveTitle = true,
       size: panelSize = 'normal',
       getContentRef,
+      headerProps = {},
       ...rest
     }: IReqorePanelProps,
     ref
@@ -315,6 +349,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
     const isMobile = useReqoreProperty('isMobile');
     const { targetRef } = useCombinedRefs(ref);
     const [itemRef, setItemRef] = useState<HTMLDivElement>(undefined);
+    const [measureRef, { width }] = useMeasure();
 
     useTooltip(itemRef, tooltip);
 
@@ -340,6 +375,8 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       [label, icon, badge]
     );
 
+    const isSmall = useMemo(() => width < 480 && process.env.NODE_ENV !== 'test', [width]);
+
     // If collapsible is true, toggle the isCollapsed state
     // If the isCollapsed state is true, the component is expanded
     // If the isCollapsed state is false, the component is collapsed
@@ -557,51 +594,80 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             opacity={opacity ?? (minimal ? 0 : 1)}
             noHorizontalPadding={noHorizontalPadding}
             responsive={responsiveTitle}
-            isMobile={isMobile}
+            isMobile={isMobile || isSmall}
+            ref={measureRef}
           >
             {hasTitleHeader && (
               <StyledPanelTitleHeader>
-                {icon || iconImage ? (
-                  <ReqoreIcon
-                    size={`${
-                      ICON_FROM_HEADER_SIZE[headerSize || HEADER_SIZE_TO_NUMBER[panelSize]]
-                    }px`}
-                    icon={icon}
-                    image={iconImage}
-                    margin='right'
-                    color={iconColor}
-                    {...iconProps}
-                  />
-                ) : null}
-                {typeof label === 'string' ? (
-                  <ReqoreHeading
-                    size={headerSize || panelSize}
-                    customTheme={theme}
-                    effect={{
-                      noWrap: true,
-                      ...headerEffect,
-                    }}
+                {icon || iconImage || label ? (
+                  <StyledPanelTitleHeaderContent
+                    size={panelSize}
+                    {...headerProps}
+                    hasLabel={!!label}
+                    hasIcon={!!icon || !!iconImage}
+                    iconSize={ICON_FROM_HEADER_SIZE[headerSize || HEADER_SIZE_TO_NUMBER[panelSize]]}
                   >
-                    {label}
-                  </ReqoreHeading>
-                ) : (
-                  label
-                )}
+                    {icon || iconImage ? (
+                      <ReqoreIcon
+                        size={`${
+                          ICON_FROM_HEADER_SIZE[headerSize || HEADER_SIZE_TO_NUMBER[panelSize]]
+                        }px`}
+                        icon={icon}
+                        image={iconImage}
+                        margin='right'
+                        color={iconColor}
+                        tooltip={{
+                          content: label,
+                        }}
+                        {...iconProps}
+                      />
+                    ) : null}
+                    {typeof label === 'string' ? (
+                      <ReqoreHeading
+                        size={headerSize || panelSize}
+                        customTheme={theme}
+                        effect={{
+                          noWrap: true,
+                          ...headerEffect,
+                        }}
+                        tooltip={label}
+                      >
+                        {label}
+                      </ReqoreHeading>
+                    ) : (
+                      label
+                    )}
+                  </StyledPanelTitleHeaderContent>
+                ) : null}
                 {badge || badge === 0 ? (
-                  <>
-                    <ButtonBadge
-                      color={changeLightness(theme.main, 0.18)}
-                      size={getOneHigherSize(panelSize)}
-                      content={badge}
-                    />
-                  </>
+                  <ButtonBadge
+                    color={changeLightness(theme.main, 0.18)}
+                    size={getOneHigherSize(panelSize)}
+                    content={badge}
+                    wrapGroup={isSmall}
+                  />
                 ) : null}
+                <ReqorePanelNonResponsiveActions
+                  show={isSmall}
+                  isSmall={isSmall}
+                  showControlButtons
+                  size={panelSize}
+                  hasResponsiveActions={hasResponsiveActions(actions)}
+                  customTheme={theme}
+                  isCollapsed={_isCollapsed}
+                  onCollapseClick={collapsible ? handleCollapseClick : undefined}
+                  onCloseClick={onClose}
+                  closeButtonProps={closeButtonProps}
+                  collapseButtonProps={collapseButtonProps}
+                  fluid={false}
+                  style={{ marginLeft: 'auto' }}
+                />
               </StyledPanelTitleHeader>
             )}
             {hasResponsiveActions(actions) && (
               <ReqoreControlGroup
                 responsive={responsiveActions}
-                fluid={responsiveActions || isMobile}
+                fluid={responsiveActions || isSmall}
                 horizontalAlign='flex-end'
                 customTheme={theme}
                 size={panelSize}
@@ -611,34 +677,21 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             )}
             {collapsible || onClose || hasNonResponsiveActions(actions) ? (
               <>
-                <ReqoreControlGroup
-                  fixed={isMobile ? false : hasResponsiveActions(actions)}
-                  fluid={isMobile ? true : !hasResponsiveActions(actions)}
-                  horizontalAlign='flex-end'
+                <ReqorePanelNonResponsiveActions
+                  show
+                  isSmall={isSmall}
+                  showControlButtons={!isSmall}
                   size={panelSize}
+                  hasResponsiveActions={hasResponsiveActions(actions)}
+                  customTheme={theme}
+                  isCollapsed={_isCollapsed}
+                  onCollapseClick={collapsible ? handleCollapseClick : undefined}
+                  onCloseClick={onClose}
+                  closeButtonProps={closeButtonProps}
+                  collapseButtonProps={collapseButtonProps}
                 >
                   {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>
+                </ReqorePanelNonResponsiveActions>
               </>
             ) : null}
           </StyledPanelTitle>

package/src/components/Tag/group.tsx

@@ -14,7 +14,7 @@ export interface IReqoreTagGroup
 }
 
 const StyledTagGroup = styled.div`
-  flex-shrink: 0;
+  flex-shrink: ${({ wrap }: IReqoreTagGroup) => (wrap ? 1 : 0)};
   display: flex;
   flex-wrap: ${({ wrap }: IReqoreTagGroup) => (wrap ? 'wrap' : 'nowrap')};
   gap: ${({ gapSize }: IReqoreTagGroup) => GAP_FROM_SIZE[gapSize]}px;