@qoretechnologies/reqore 0.34.3 → 0.34.4

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,4 +1,5 @@
-import { memo, useRef, useState } from 'react';
+import { debounce } from 'lodash';
+import { memo, useEffect, useRef, useState } from 'react';
 import { useUnmount, useUpdateEffect } from 'react-use';
 import styled from 'styled-components';
 import { ReqoreDropdown } from '../..';
@@ -27,6 +28,7 @@ export interface IReqorePaginationComponentProps
   showLabels?: boolean;
   scrollOnLoadMore?: boolean;
   autoLoadMore?: boolean;
+  changePageOnScroll?: 'vertical' | 'horizontal';
   scrollContainer?: HTMLElement;
   scrollToTopOnPageChange?: boolean;
 }
@@ -79,6 +81,7 @@ function Pagination<T>({
   renderControls,
   scrollContainer,
   scrollToTopOnPageChange = true,
+  changePageOnScroll,
   ...rest
 }: IReqorePaginationProps<T>) {
   const [loadMoreRef, setLoadMoreRef] = useState<HTMLButtonElement>(undefined);
@@ -119,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;

package/src/containers/Paging.tsx

@@ -1,10 +1,14 @@
 import { memo, useMemo } from 'react';
-import { IReqorePaginationProps, ReqorePagination } from '../components/Paging';
+import {
+  IReqorePaginationComponentProps,
+  IReqorePaginationProps,
+  ReqorePagination,
+} from '../components/Paging';
 import { ReqoreVerticalSpacer } from '../components/Spacer';
 import {
+  getPaginationOptionsFromType,
   TReqorePaginationType,
   TReqorePaginationTypeResult,
-  getPaginationOptionsFromType,
 } from '../constants/paging';
 import { PADDING_FROM_SIZE, TSizes } from '../constants/sizes';
 import { IReqorePagingResult, useReqorePaging } from '../hooks/usePaging';
@@ -12,7 +16,7 @@ import { IReqorePagingResult, useReqorePaging } from '../hooks/usePaging';
 export interface IReqorePagingContainerProps<T> {
   type?: TReqorePaginationType<T>;
   items: T[];
-  scrollContainer?: HTMLElement;
+  scrollContainer?: IReqorePaginationComponentProps['scrollContainer'];
   children: (
     items: T[],
     Controls: JSX.Element,

package/src/hooks/usePaging.ts

@@ -3,6 +3,11 @@ import { useEffect, useMemo } from 'react';
 import { useUpdateEffect } from 'react-use';
 import usePagination, { usePaginationReturn } from 'react-use-pagination-hook';
 
+export interface IReqorePageChangeData {
+  isFirst?: boolean;
+  isLast?: boolean;
+}
+
 export interface IReqorePagingOptions<T> {
   items: T[];
   startPage?: number;
@@ -10,6 +15,7 @@ export interface IReqorePagingOptions<T> {
   itemsPerPage?: number;
   infinite?: boolean;
   enabled?: boolean;
+  onPageChange?: (page: number, info: IReqorePageChangeData) => void;
 }
 
 export interface IReqorePagingResult<T>
@@ -46,6 +52,7 @@ export const useReqorePaging = <T>(
     pagesToShow,
     startPage,
     enabled = true,
+    onPageChange,
   }: IReqorePagingOptions<T> = merge({}, defaultPagingOptions, options);
   const allPageCount = useMemo(() => Math.ceil(size(items) / itemsPerPage), [items, itemsPerPage]);
   const { pagelist, currentPage, setPage, setTotalPage, goNext, goBefore } = usePagination({
@@ -57,6 +64,13 @@ export const useReqorePaging = <T>(
     setPage(startPage || 1);
   }, [startPage]);
 
+  useUpdateEffect(() => {
+    onPageChange?.(currentPage, {
+      isFirst: currentPage === 1,
+      isLast: currentPage === allPageCount,
+    });
+  }, [currentPage]);
+
   useUpdateEffect(() => {
     setPage(1);
     setTotalPage(Math.ceil(size(items) / itemsPerPage));

package/src/stories/Drawer/Drawer.stories.tsx

@@ -10,12 +10,17 @@ import {
   ReqoreTabsContent,
   useReqoreProperty,
 } from '../../index';
-import { FlatArg, IntentArg, argManager } from '../utils/args';
+import { argManager, FlatArg, IntentArg } from '../utils/args';
 
 const { createArg } = argManager<IReqoreDrawerProps>();
 
 export default {
   title: 'Components/Drawer',
+  parameters: {
+    chromatic: {
+      viewports: [450, 600, 1440],
+    },
+  },
   argTypes: {
     ...FlatArg,
     ...createArg('floating', {

package/src/stories/Dropdown/Dropdown.stories.tsx

@@ -229,6 +229,7 @@ export const WithPaging: Story<IReqoreDropdownProps> = Template.bind({});
 WithPaging.args = {
   paging: {
     itemsPerPage: 50,
+    changePageOnScroll: 'horizontal',
   },
   label: 'Dropdown with paging',
 };

package/src/stories/Header/Header.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
 import { IReqoreHeadingProps } from '../../components/Header';
-import { ReqoreHeading, ReqoreVerticalSpacer } from '../../index';
+import { ReqoreControlGroup, ReqoreHeading } from '../../index';
 import { IntentArg } from '../utils/args';
 
 export default {
@@ -12,31 +12,29 @@ export default {
 
 const Template: Story<IReqoreHeadingProps> = (args) => {
   return (
-    <>
+    <ReqoreControlGroup gapSize='big' vertical>
       <ReqoreHeading size={1} {...args}>
         This is a heading
       </ReqoreHeading>
-      <ReqoreVerticalSpacer height={10} />
       <ReqoreHeading size={2} {...args}>
         This is a heading
       </ReqoreHeading>
-      <ReqoreVerticalSpacer height={10} />
       <ReqoreHeading size={3} {...args}>
         This is a heading
       </ReqoreHeading>
-      <ReqoreVerticalSpacer height={10} />
       <ReqoreHeading size={4} {...args}>
         This is a heading
       </ReqoreHeading>
-      <ReqoreVerticalSpacer height={10} />
       <ReqoreHeading size={5} {...args}>
         This is a heading
       </ReqoreHeading>
-      <ReqoreVerticalSpacer height={10} />
       <ReqoreHeading size={6} {...args}>
         This is a heading
       </ReqoreHeading>
-    </>
+      <ReqoreHeading size={1} {...args} tooltip={{ content: 'Nice tooltip', openOnMount: true }}>
+        This is a heading with tooltip
+      </ReqoreHeading>
+    </ReqoreControlGroup>
   );
 };
 

package/src/stories/Paging/Paging.stories.tsx

@@ -27,7 +27,9 @@ const Template: Story<IReqorePaginationProps<any> & { pagingOptions?: IReqorePag
         <ReqorePagination<any>
           {...paging}
           {...args}
-          scrollContainer={args.scrollToTopOnPageChange ? scrollContainer : undefined}
+          scrollContainer={
+            args.scrollToTopOnPageChange || !!args.changePageOnScroll ? scrollContainer : undefined
+          }
         />
       </ReqoreControlGroup>
     );
@@ -142,6 +144,20 @@ WithLabels.args = {
   } as IReqorePagingOptions<any>,
 };
 
+export const NextPageOnVerticalScroll: Story<
+  IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
+> = Template.bind({});
+NextPageOnVerticalScroll.args = {
+  changePageOnScroll: 'vertical',
+};
+
+export const NextPageOnHorizontalScroll: Story<
+  IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
+> = Template.bind({});
+NextPageOnHorizontalScroll.args = {
+  changePageOnScroll: 'horizontal',
+};
+
 export const ScrollToTop: Story<
   IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
 > = Template.bind({});