@qoretechnologies/reqore 0.33.0 → 0.34.0

package/src/components/Collection/index.tsx

@@ -2,25 +2,16 @@ import { size } from 'lodash';
 import { useCallback, useMemo, useState } from 'react';
 import { useDebounce, useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
-import { getPaginationOptionsFromType, TReqorePaginationType } from '../../constants/paging';
-import { PADDING_FROM_SIZE } from '../../constants/sizes';
-import { IReqorePagingOptions, useReqorePaging } from '../../hooks/usePaging';
+import { TReqorePaginationType } from '../../constants/paging';
+import { ReqorePaginationContainer } from '../../containers/Paging';
 import { IReqoreIconName } from '../../types/icons';
 import { IReqoreColumnsProps, StyledColumns } from '../Columns';
 import ReqoreInput, { IReqoreInputProps } from '../Input';
 import ReqoreMessage from '../Message';
-import { IReqorePaginationComponentProps, ReqorePagination } from '../Paging';
 import { IReqorePanelAction, IReqorePanelProps, ReqorePanel, TReqorePanelActions } from '../Panel';
-import { ReqoreVerticalSpacer } from '../Spacer';
 import { sortTableData } from '../Table/helpers';
 import { IReqoreCollectionItemProps, ReqoreCollectionItem } from './item';
 
-export interface IReqoreCollectionPagingOptions
-  extends Omit<IReqorePagingOptions<IReqoreCollectionItemProps>, 'items'>,
-    IReqorePaginationComponentProps {
-  pageControlsPosition?: 'top' | 'bottom' | 'both';
-}
-
 export interface IReqoreCollectionProps
   extends Pick<
       IReqorePanelProps,
@@ -69,7 +60,7 @@ export interface IReqoreCollectionProps
   displayButtonTooltip?: (display?: 'list' | 'grid') => string;
   inputPlaceholder?: (items?: IReqoreCollectionItemProps[]) => string;
 
-  paging?: TReqorePaginationType;
+  paging?: TReqorePaginationType<IReqoreCollectionItemProps>;
 }
 
 export const StyledCollectionWrapper = styled(StyledColumns)`
@@ -118,6 +109,7 @@ export const ReqoreCollection = ({
   const [sort, setSort] = useState<'asc' | 'desc'>('asc');
   const [query, setQuery] = useState<string>('');
   const [preQuery, setPreQuery] = useState<string>('');
+  const [contentRef, setContentRef] = useState<HTMLDivElement>(undefined);
 
   useUpdateEffect(() => {
     setShowAs(showAs);
@@ -183,18 +175,6 @@ export const ReqoreCollection = ({
     });
   }, [items, query, sortedItems]);
 
-  const {
-    pagingOptions = {},
-    componentOptions = {},
-    pageControlsPosition,
-  } = useMemo(() => getPaginationOptionsFromType(paging), [paging]);
-
-  const { items: finalItems, ...pagingData } = useReqorePaging({
-    items: filteredItems,
-    ...pagingOptions,
-    enabled: !!paging,
-  });
-
   const handlePreQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setPreQuery(event.target.value);
   };
@@ -209,7 +189,7 @@ export const ReqoreCollection = ({
           icon: _showAs === 'grid' ? 'ListUnordered' : 'GridLine',
           onClick: () => setShowAs(_showAs === 'grid' ? 'list' : 'grid'),
           tooltip: displayButtonTooltip(_showAs),
-          disabled: !size(finalItems),
+          disabled: !size(filteredItems),
           textAlign: 'center',
           ...displayButtonProps,
         },
@@ -221,7 +201,7 @@ export const ReqoreCollection = ({
         icon: sort === 'desc' ? 'SortDesc' : 'SortAsc',
         onClick: () => setSort(sort === 'desc' ? 'asc' : 'desc'),
         tooltip: sortButtonTooltip(sort),
-        disabled: !size(finalItems),
+        disabled: !size(filteredItems),
         textAlign: 'center',
         ...sortButtonProps,
       });
@@ -251,56 +231,53 @@ export const ReqoreCollection = ({
     }
 
     return [...actions, toolbarGroup];
-  }, [filterable, preQuery, query, rest.actions, _showAs, sort, sortable, finalItems]);
+  }, [filterable, preQuery, query, rest.actions, _showAs, sort, sortable, filteredItems]);
 
   const renderContent = useCallback(() => {
     return contentRenderer(
       <>
-        {!!paging && (pageControlsPosition === 'top' || pageControlsPosition === 'both') ? (
-          <>
-            <ReqorePagination size={rest.size} {...pagingData} {...componentOptions} />
-            <ReqoreVerticalSpacer height={PADDING_FROM_SIZE[rest.size || 'normal']} />
-          </>
-        ) : null}
-        {!size(finalItems) ? (
-          <ReqoreMessage flat icon='Search2Line'>
-            {emptyMessage}
-          </ReqoreMessage>
-        ) : (
-          <StyledCollectionWrapper
-            columns={_showAs === 'grid' ? 'auto-fit' : 1}
-            columnsGap={stacked ? '0px' : columnsGap}
-            rounded={rounded}
-            stacked={stacked}
-            {...rest}
-          >
-            {finalItems?.map((item, index) => (
-              <ReqoreCollectionItem
-                size={rest.size}
-                {...item}
-                icon={item.icon || (item.selected ? selectedIcon : undefined)}
-                key={index}
-                rounded={!stacked}
-                maxContentHeight={maxItemHeight}
-              />
-            ))}
-          </StyledCollectionWrapper>
-        )}
-        {!!paging &&
-        (!pageControlsPosition ||
-          pageControlsPosition === 'bottom' ||
-          pageControlsPosition === 'both') ? (
-          <>
-            <ReqoreVerticalSpacer height={PADDING_FROM_SIZE[rest.size || 'normal']} />
-            <ReqorePagination size={rest.size} {...pagingData} {...componentOptions} />
-          </>
-        ) : null}
+        <ReqorePaginationContainer
+          items={filteredItems}
+          type={paging}
+          size={rest.size}
+          scrollContainer={contentRef}
+        >
+          {(finalItems) => (
+            <>
+              {!size(finalItems) ? (
+                <ReqoreMessage flat icon='Search2Line'>
+                  {emptyMessage}
+                </ReqoreMessage>
+              ) : (
+                <StyledCollectionWrapper
+                  columns={_showAs === 'grid' ? 'auto-fit' : 1}
+                  columnsGap={stacked ? '0px' : columnsGap}
+                  rounded={rounded}
+                  stacked={stacked}
+                  ref={setContentRef}
+                  {...rest}
+                >
+                  {finalItems?.map((item, index) => (
+                    <ReqoreCollectionItem
+                      size={rest.size}
+                      {...item}
+                      icon={item.icon || (item.selected ? selectedIcon : undefined)}
+                      key={index}
+                      rounded={!stacked}
+                      maxContentHeight={maxItemHeight}
+                    />
+                  ))}
+                </StyledCollectionWrapper>
+              )}
+            </>
+          )}
+        </ReqorePaginationContainer>
       </>,
-      finalItems
+      filteredItems
     );
   }, [
     contentRenderer,
-    finalItems,
+    filteredItems,
     _showAs,
     columnsGap,
     emptyMessage,

package/src/components/Dropdown/index.tsx

@@ -1,10 +1,12 @@
 import { size } from 'lodash';
 import React, { memo, useMemo } from 'react';
-import { ReqorePopover } from '../..';
+import { ReqorePanel, ReqorePopover } from '../..';
+import { TReqorePaginationType } from '../../constants/paging';
 import { IPopoverOptions } from '../../hooks/usePopover';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreButton, { IReqoreButtonProps } from '../Button';
 import { IReqoreInputProps } from '../Input';
+import { IReqorePanelProps } from '../Panel';
 import ReqoreDropdownList, { IReqoreDropdownItem, TDropdownItemOnClick } from './list';
 
 export interface IReqoreDropdownProps extends Partial<Omit<IPopoverOptions, 'openOnMount'>> {
@@ -25,7 +27,9 @@ export interface IReqoreDropdownProps extends Partial<Omit<IPopoverOptions, 'ope
   onItemSelect?: TDropdownItemOnClick;
   style?: React.CSSProperties;
   inputProps?: IReqoreInputProps;
+  wrapperProps?: IReqorePanelProps;
   scrollToSelected?: boolean;
+  paging?: TReqorePaginationType<IReqoreDropdownItem>;
 }
 
 function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
@@ -61,6 +65,8 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
   passPopoverData,
   inputProps,
   scrollToSelected,
+  wrapperProps,
+  paging,
   ...rest
 }: IReqoreDropdownProps & T) {
   const componentProps = useMemo(
@@ -78,17 +84,20 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
 
   const popoverContent = useMemo(() => {
     return size(items) ? (
-      <ReqoreDropdownList
-        multiSelect={multiSelect}
-        listStyle={listStyle}
-        width={useTargetWidth ? '100%' : listWidth}
-        height={listHeight}
-        items={items}
-        filterable={filterable}
-        onItemSelect={onItemSelect}
-        inputProps={inputProps}
-        scrollToSelected={scrollToSelected}
-      />
+      <ReqorePanel flat size='small' {...wrapperProps}>
+        <ReqoreDropdownList
+          multiSelect={multiSelect}
+          listStyle={listStyle}
+          width={useTargetWidth ? '100%' : listWidth}
+          height={listHeight}
+          items={items}
+          filterable={filterable}
+          onItemSelect={onItemSelect}
+          inputProps={inputProps}
+          scrollToSelected={scrollToSelected}
+          paging={paging}
+        />
+      </ReqorePanel>
     ) : undefined;
   }, [items]);
 

package/src/components/Dropdown/list.tsx

@@ -1,9 +1,14 @@
+import { size } from 'lodash';
 import React, { memo, useEffect, useMemo, useState } from 'react';
+import { TReqorePaginationType } from '../../constants/paging';
+import { PADDING_FROM_SIZE } from '../../constants/sizes';
+import { ReqorePaginationContainer } from '../../containers/Paging';
 import { IReqoreComponent } from '../../types/global';
 import ReqoreInput, { IReqoreInputProps } from '../Input';
 import ReqoreMenu from '../Menu';
 import ReqoreMenuDivider from '../Menu/divider';
 import ReqoreMenuItem, { IReqoreMenuItemProps } from '../Menu/item';
+import { ReqoreVerticalSpacer } from '../Spacer';
 
 export type TDropdownItemOnClick = (item: IReqoreDropdownItem) => void;
 export interface IReqoreDropdownItem
@@ -27,6 +32,7 @@ export interface IReqoreDropdownListProps extends IReqoreComponent {
   onItemSelect?: TDropdownItemOnClick;
   inputProps?: IReqoreInputProps;
   scrollToSelected?: boolean;
+  paging?: TReqorePaginationType<TReqoreDropdownItem>;
 }
 
 const ReqoreDropdownList = memo(
@@ -41,9 +47,11 @@ const ReqoreDropdownList = memo(
     onItemSelect,
     inputProps,
     scrollToSelected,
+    paging,
   }: IReqoreDropdownListProps) => {
     const [_items, setItems] = useState<TReqoreDropdownItems>(items);
     const [query, setQuery] = useState<string>('');
+    const [menuRef, setMenuRef] = useState<HTMLDivElement>(undefined);
 
     useEffect(() => {
       setItems(items);
@@ -84,40 +92,51 @@ const ReqoreDropdownList = memo(
     };
 
     return (
-      <ReqoreMenu
-        _insidePopover={!multiSelect}
-        _popoverId={_popoverId}
-        style={listStyle}
-        width={width}
-        maxHeight={height || '300px'}
-      >
+      <>
         {filterable && (
           <>
             <ReqoreInput
               value={query}
+              icon='SearchLine'
               onChange={handleQueryChange}
-              placeholder='Filter'
+              placeholder={`Search ${size(_items)} items...`}
               onClearClick={() => setQuery('')}
               {...inputProps}
             />
+            <ReqoreVerticalSpacer height={PADDING_FROM_SIZE.normal} />
           </>
         )}
-        {filteredItems.map(
-          ({ onClick, dividerAlign, divider, ...item }: IReqoreDropdownItem, index: number) =>
-            divider ? (
-              <ReqoreMenuDivider key={index} {...item} align={dividerAlign} />
-            ) : (
-              <ReqoreMenuItem
-                key={index}
-                {...item}
-                label={item.label || item.value}
-                onClick={() => handleItemClick({ ...item, onClick })}
-                rightIcon={item.selected ? 'CheckLine' : undefined}
-                scrollIntoView={scrollToSelected && item.selected && !multiSelect}
-              />
-            )
-        )}
-      </ReqoreMenu>
+        <ReqorePaginationContainer type={paging} items={filteredItems} scrollContainer={menuRef}>
+          {(finalItems, Controls, { includeBottomControls }) => (
+            <ReqoreMenu
+              _insidePopover={!multiSelect}
+              _popoverId={_popoverId}
+              style={listStyle}
+              width={width}
+              maxHeight={height || '300px'}
+              padded={false}
+              ref={setMenuRef}
+            >
+              {finalItems.map(
+                ({ onClick, dividerAlign, divider, ...item }: IReqoreDropdownItem, index: number) =>
+                  divider ? (
+                    <ReqoreMenuDivider key={index} {...item} align={dividerAlign} />
+                  ) : (
+                    <ReqoreMenuItem
+                      key={index}
+                      {...item}
+                      label={item.label || item.value}
+                      onClick={() => handleItemClick({ ...item, onClick })}
+                      rightIcon={item.selected ? 'CheckLine' : undefined}
+                      scrollIntoView={scrollToSelected && item.selected && !multiSelect}
+                    />
+                  )
+              )}
+              {!includeBottomControls && <Controls />}
+            </ReqoreMenu>
+          )}
+        </ReqorePaginationContainer>
+      </>
     );
   }
 );

package/src/components/Menu/index.tsx

@@ -21,6 +21,7 @@ export interface IReqoreMenuProps
   wrapText?: boolean;
   flat?: boolean;
   rounded?: boolean;
+  padded?: boolean;
 }
 
 export interface IReqoreMenuStyle extends IReqoreMenuProps {
@@ -30,7 +31,7 @@ export interface IReqoreMenuStyle extends IReqoreMenuProps {
 const StyledReqoreMenu = styled.div<IReqoreMenuStyle>`
   width: ${({ width }) => width || undefined};
   min-width: ${({ width }) => (width ? undefined : '160px')};
-  padding: 5px;
+  padding: ${({ padded = true }) => (padded ? '5px' : undefined)};
   max-height: ${({ maxHeight }) => maxHeight || undefined};
   overflow-y: auto;
   overflow-x: hidden;
@@ -68,7 +69,7 @@ const ReqoreMenu = forwardRef<HTMLDivElement, IReqoreMenuProps>(
       minimal,
       ...rest
     }: IReqoreMenuProps,
-    ref: any
+    ref
   ) => {
     const theme = useReqoreTheme('main', customTheme, intent);
 

package/src/components/Paging/index.tsx

@@ -27,6 +27,8 @@ export interface IReqorePaginationComponentProps
   showLabels?: boolean;
   scrollOnLoadMore?: boolean;
   autoLoadMore?: boolean;
+  scrollContainer?: HTMLElement;
+  scrollToTopOnPageChange?: boolean;
 }
 export interface IReqorePaginationProps<T>
   extends Omit<IReqorePagingResult<T>, 'items'>,
@@ -34,7 +36,7 @@ export interface IReqorePaginationProps<T>
 
 export const StyledPagesWrapper = styled(ReqoreControlGroup)`
   width: unset;
-  max-width: 100%;
+  flex: 0 auto;
   justify-content: center;
 
   & > ${StyledButton} {
@@ -74,6 +76,9 @@ function Pagination<T>({
   scrollOnLoadMore,
   autoLoadMore,
   itemsPerPage,
+  renderControls,
+  scrollContainer,
+  scrollToTopOnPageChange = true,
   ...rest
 }: IReqorePaginationProps<T>) {
   const [loadMoreRef, setLoadMoreRef] = useState<HTMLButtonElement>(undefined);
@@ -90,6 +95,26 @@ function Pagination<T>({
     }
   }, [currentPage, scrollTargetRef, scrollOnLoadMore, isLastPage, isFirstPage]);
 
+  // Scroll to bottom on load more
+  useEffect(() => {
+    if (scrollContainer && scrollOnLoadMore && !isFirstPage) {
+      scrollContainer.scrollBy?.({
+        top: scrollContainer.scrollHeight,
+        behavior: 'smooth',
+      });
+    }
+  }, [currentPage, scrollContainer, scrollOnLoadMore, isFirstPage]);
+
+  // Scroll to top on page change
+  useEffect(() => {
+    if (scrollContainer && scrollToTopOnPageChange && !infinite) {
+      scrollContainer.scrollTo?.({
+        top: 0,
+        behavior: 'smooth',
+      });
+    }
+  }, [currentPage, scrollContainer, scrollToTopOnPageChange, infinite]);
+
   useUpdateEffect(() => {
     if (loadMoreRef && autoLoadMore) {
       observer.current = new IntersectionObserver(
@@ -113,7 +138,9 @@ function Pagination<T>({
     observer.current?.disconnect();
   });
 
-  if (pageCount === 1 || pageCount === 0) return null;
+  if (!renderControls) {
+    return null;
+  }
 
   return (
     <ReqoreControlGroup
@@ -138,7 +165,8 @@ function Pagination<T>({
             {showLabels && loadMoreLabel}
           </ReqoreButton>
         </ReqoreControlGroup>
-      ) : (
+      ) : null}
+      {!infinite ? (
         <>
           {showPagesAs === 'list' || (showControls && !showPages) ? (
             <ReqoreButton
@@ -224,7 +252,7 @@ function Pagination<T>({
             </ReqoreButton>
           ) : null}
         </>
-      )}
+      ) : null}
     </ReqoreControlGroup>
   );
 }

package/src/components/Panel/index.tsx

@@ -1,6 +1,6 @@
 import { size } from 'lodash';
 import { darken, rgba } from 'polished';
-import { forwardRef, ReactElement, useCallback, useMemo, useState } from 'react';
+import { ReactElement, forwardRef, useCallback, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import styled, { css } from 'styled-components';
 import {
@@ -103,6 +103,7 @@ export interface IReqorePanelProps
   iconColor?: TReqoreEffectColor;
   responsiveActions?: boolean;
   responsiveTitle?: boolean;
+  getContentRef?: (ref: HTMLDivElement) => any;
 }
 
 export interface IStyledPanel extends IReqorePanelProps {
@@ -298,6 +299,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
       responsiveActions = true,
       responsiveTitle = true,
       size: panelSize = 'normal',
+      getContentRef,
       ...rest
     }: IReqorePanelProps,
     ref
@@ -643,6 +645,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             padded={padded}
             minimal={minimal}
             size={contentSize || panelSize}
+            ref={getContentRef}
             noHorizontalPadding={noHorizontalPadding}
           >
             {children}

package/src/constants/paging.ts

@@ -1,19 +1,32 @@
-import { IReqoreCollectionPagingOptions } from '../components/Collection';
-import { IReqorePaginationProps } from '../components/Paging';
+import { IReqorePaginationComponentProps, IReqorePaginationProps } from '../components/Paging';
 import { IReqorePagingOptions } from '../hooks/usePaging';
 
-export type TReqorePaginationType =
-  | true
+export type TReqorePaginationType<T> =
+  | 'buttons'
   | 'list'
   | 'infinite'
   | 'auto-load'
-  | IReqoreCollectionPagingOptions;
+  | IReqoreComponentPagingOptions<T>;
 
-export function getPaginationOptionsFromType<T>(type: TReqorePaginationType): {
+export interface IReqoreComponentPagingOptions<T>
+  extends Omit<IReqorePagingOptions<T>, 'items'>,
+    IReqorePaginationComponentProps {
+  pageControlsPosition?: 'top' | 'bottom' | 'both';
+  includeTopControls?: boolean;
+  includeBottomControls?: boolean;
+}
+
+export type TReqorePaginationTypeResult<T> = {
   pagingOptions?: Omit<IReqorePagingOptions<T>, 'items'>;
   componentOptions?: Partial<Omit<IReqorePaginationProps<T>, 'items'>>;
   pageControlsPosition?: 'top' | 'bottom' | 'both';
-} {
+  includeTopControls?: boolean;
+  includeBottomControls?: boolean;
+};
+
+export function getPaginationOptionsFromType<T>(
+  type: TReqorePaginationType<T>
+): TReqorePaginationTypeResult<T> {
   if (!type) return {};
 
   if (typeof type === 'object') {
@@ -23,17 +36,21 @@ export function getPaginationOptionsFromType<T>(type: TReqorePaginationType): {
       pagesToShow,
       startPage,
       pageControlsPosition = 'bottom',
+      includeBottomControls,
+      includeTopControls,
       ...componentOptions
     } = type;
     return {
       pagingOptions: { infinite, itemsPerPage, pagesToShow, startPage },
       pageControlsPosition,
       componentOptions,
+      includeBottomControls,
+      includeTopControls,
     };
   }
 
   switch (type) {
-    case true:
+    case 'buttons':
       return {};
     case 'list':
       return {
@@ -44,5 +61,7 @@ export function getPaginationOptionsFromType<T>(type: TReqorePaginationType): {
     case 'infinite':
     case 'auto-load':
       return { pagingOptions: { infinite: true } };
+    default:
+      return {};
   }
 }

package/src/containers/Paging.tsx

@@ -0,0 +1,90 @@
+import { memo, useMemo } from 'react';
+import { IReqorePaginationProps, ReqorePagination } from '../components/Paging';
+import { ReqoreVerticalSpacer } from '../components/Spacer';
+import {
+  TReqorePaginationType,
+  TReqorePaginationTypeResult,
+  getPaginationOptionsFromType,
+} from '../constants/paging';
+import { PADDING_FROM_SIZE, TSizes } from '../constants/sizes';
+import { useReqorePaging } from '../hooks/usePaging';
+
+export interface IReqorePagingContainerProps<T> {
+  type?: TReqorePaginationType<T>;
+  items: T[];
+  scrollContainer?: HTMLElement;
+  children: (
+    items: T[],
+    Controls: React.FC<Partial<IReqorePaginationProps<T>>>,
+    options: TReqorePaginationTypeResult<T>
+  ) => React.ReactNode;
+  size?: TSizes;
+}
+
+function PagingContainer<T>({
+  type,
+  items,
+  scrollContainer,
+  children,
+  size = 'normal',
+}: IReqorePagingContainerProps<T>) {
+  const {
+    pagingOptions = {},
+    componentOptions = {},
+    pageControlsPosition = 'bottom',
+    includeTopControls = true,
+    includeBottomControls = true,
+  } = useMemo(() => getPaginationOptionsFromType(type), [type]);
+
+  const { items: finalItems, ...pagingData } = useReqorePaging({
+    items,
+    ...pagingOptions,
+    enabled: !!type,
+  });
+
+  const Controls = ({
+    withSpacer,
+    position,
+    ...pagingProps
+  }: Partial<IReqorePaginationProps<T>> & { withSpacer?: boolean; position?: 'top' | 'bottom' }) =>
+    pagingData.renderControls ? (
+      <>
+        {withSpacer && position === 'bottom' ? (
+          <ReqoreVerticalSpacer height={PADDING_FROM_SIZE[size]} />
+        ) : null}
+        <ReqorePagination
+          size={size}
+          {...pagingData}
+          {...componentOptions}
+          scrollContainer={scrollContainer}
+          {...pagingProps}
+        />
+        {withSpacer && position === 'top' ? (
+          <ReqoreVerticalSpacer height={PADDING_FROM_SIZE[size]} />
+        ) : null}
+      </>
+    ) : null;
+
+  return (
+    <>
+      {includeTopControls && (pageControlsPosition === 'top' || pageControlsPosition === 'both') ? (
+        <Controls autoLoadMore={false} scrollOnLoadMore={false} position='top' withSpacer />
+      ) : null}
+
+      {children(finalItems, Controls, {
+        pagingOptions,
+        componentOptions,
+        pageControlsPosition,
+        includeTopControls,
+        includeBottomControls,
+      })}
+
+      {includeBottomControls &&
+      (pageControlsPosition === 'bottom' || pageControlsPosition === 'both') ? (
+        <Controls position='bottom' withSpacer />
+      ) : null}
+    </>
+  );
+}
+
+export const ReqorePaginationContainer = memo(PagingContainer) as typeof PagingContainer;

package/src/hooks/usePaging.ts

@@ -27,6 +27,7 @@ export interface IReqorePagingResult<T>
   last: () => void;
   pageCount: number;
   infinite: boolean;
+  renderControls: boolean;
 }
 
 export const defaultPagingOptions: IReqorePagingOptions<any> = {
@@ -102,6 +103,9 @@ export const useReqorePaging = <T>(
     currentPage,
     next: goNext,
     back: goBefore,
+    renderControls:
+      enabled &&
+      !(allPageCount === 1 || allPageCount === 0 || (infinite && currentPage === allPageCount)),
     isLastPage: currentPage === allPageCount,
     isFirstPage: currentPage === 1,
     first: () => setPage(1),