@qoretechnologies/reqore 0.33.0 → 0.34.1

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
@@ -370,9 +372,10 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
     );
 
     const renderResponsiveActions = useCallback(
-      (action: IReqorePanelAction, index: number) => {
-        return renderActions(action, index, true);
-      },
+      (align: 'flex-start' | 'center' | 'flex-end' = 'flex-end') =>
+        (action: IReqorePanelAction, index: number) => {
+          return renderActions(action, index, true, align);
+        },
       [actions]
     );
 
@@ -389,14 +392,20 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
     );
 
     const renderNonResponsiveActions = useCallback(
-      (action: IReqorePanelAction, index: number) => {
-        return renderActions(action, index, false);
-      },
+      (align: 'flex-start' | 'center' | 'flex-end' = 'flex-end') =>
+        (action: IReqorePanelAction, index: number) => {
+          return renderActions(action, index, false, align);
+        },
       [actions]
     );
 
     const renderActions = useCallback(
-      (action: IReqorePanelAction, index: number, includeResponsive) => {
+      (
+        action: IReqorePanelAction,
+        index: number,
+        includeResponsive,
+        align: 'flex-start' | 'center' | 'flex-end' = 'flex-end'
+      ) => {
         if (
           action.show === false ||
           (includeResponsive && action.responsive === false) ||
@@ -427,6 +436,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
               fixed={rest.fixed}
               fluid={rest.fluid}
               key={index}
+              horizontalAlign={align}
             >
               {group.map((action, index) => renderActions(action, index, true))}
             </ReqoreControlGroup>
@@ -596,18 +606,18 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                 customTheme={theme}
                 size={panelSize}
               >
-                {actions.map(renderResponsiveActions)}
+                {actions.map(renderResponsiveActions())}
               </ReqoreControlGroup>
             )}
             {collapsible || onClose || hasNonResponsiveActions(actions) ? (
               <>
                 <ReqoreControlGroup
-                  fixed={!isMobile}
-                  fluid={isMobile}
+                  fixed={isMobile ? false : hasResponsiveActions(actions)}
+                  fluid={isMobile ? true : !hasResponsiveActions(actions)}
                   horizontalAlign='flex-end'
                   size={panelSize}
                 >
-                  {actions.map(renderNonResponsiveActions)}
+                  {actions.map(renderNonResponsiveActions())}
                   {collapsible && (
                     <ReqoreButton
                       customTheme={theme}
@@ -643,6 +653,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
             padded={padded}
             minimal={minimal}
             size={contentSize || panelSize}
+            ref={getContentRef}
             noHorizontalPadding={noHorizontalPadding}
           >
             {children}
@@ -659,7 +670,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
           >
             {hasNonResponsiveActions(leftBottomActions) ? (
               <ReqoreControlGroup size={panelSize}>
-                {leftBottomActions.map(renderNonResponsiveActions)}
+                {leftBottomActions.map(renderNonResponsiveActions('flex-start'))}
               </ReqoreControlGroup>
             ) : null}
             {hasResponsiveActions(leftBottomActions) && (
@@ -669,7 +680,7 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                 customTheme={theme}
                 size={panelSize}
               >
-                {leftBottomActions.map(renderResponsiveActions)}
+                {leftBottomActions.map(renderResponsiveActions('flex-start'))}
               </ReqoreControlGroup>
             )}
             {hasResponsiveActions(rightBottomActions) && (
@@ -680,12 +691,12 @@ export const ReqorePanel = forwardRef<HTMLDivElement, IReqorePanelProps>(
                 customTheme={theme}
                 size={panelSize}
               >
-                {rightBottomActions.map(renderResponsiveActions)}
+                {rightBottomActions.map(renderResponsiveActions())}
               </ReqoreControlGroup>
             )}
             {hasNonResponsiveActions(rightBottomActions) ? (
               <ReqoreControlGroup horizontalAlign='flex-end' size={panelSize}>
-                {rightBottomActions.map(renderNonResponsiveActions)}
+                {rightBottomActions.map(renderNonResponsiveActions())}
               </ReqoreControlGroup>
             ) : null}
           </StyledPanelBottomActions>

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),

package/src/index.tsx

@@ -58,6 +58,7 @@ export { ReqoreTree } from './components/Tree';
 export { Colors as ReqoreColors } from './constants/colors';
 export { ReqoreSizes } from './constants/sizes';
 export { ReqoreIntents } from './constants/theme';
+export { ReqorePaginationContainer } from './containers/Paging';
 export { default as ReqoreNotifications } from './containers/ReqoreProvider';
 export { default as ReqoreUIProvider } from './containers/UIProvider';
 export { default as ReqoreContext } from './context/ReqoreContext';

package/src/stories/Collection/Collection.stories.tsx

@@ -143,6 +143,7 @@ CustomPropsAndTexts.args = {
 export const ChildrenBeforeAndAfter = Template.bind({});
 ChildrenBeforeAndAfter.args = {
   label: 'Collection of items',
+  padded: false,
   items,
   contentRenderer: (children) => (
     <>
@@ -188,9 +189,29 @@ FilteringSearchingPaging.args = {
   sortButtonProps: {
     fixed: false,
   },
-  paging: true,
+  paging: 'buttons',
   size: 'big',
   padded: false,
-  fill: true,
   items: bigCollection,
 } as IReqoreCollectionProps;
+
+export const CustomFilteringSearchingPaging = Template.bind({});
+CustomFilteringSearchingPaging.args = {
+  inputProps: {
+    fluid: true,
+    focusRules: {
+      type: 'auto',
+      clearOnFocus: true,
+    },
+  },
+  paging: {
+    itemsPerPage: 55,
+    scrollToTopOnPageChange: true,
+  },
+  inputInTitle: false,
+  responsiveTitle: true,
+  size: 'small',
+  padded: false,
+  fill: true,
+  items: [...bigCollection, ...bigCollection, ...bigCollection, ...bigCollection, ...bigCollection],
+} as IReqoreCollectionProps;

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

@@ -1,8 +1,7 @@
 import { Meta, Story } from '@storybook/react/types-6-0';
-import { useState } from 'react';
 import ReqoreButton from '../../components/Button';
 import { IReqoreDropdownProps } from '../../components/Dropdown';
-import { ReqoreControlGroup, ReqoreDropdown, ReqoreInput, ReqoreTag } from '../../index';
+import { ReqoreControlGroup, ReqoreDropdown, ReqoreInput } from '../../index';
 import { argManager } from '../utils/args';
 
 const { createArg, disableArg } = argManager<IReqoreDropdownProps>();
@@ -130,15 +129,16 @@ export default {
 } as Meta<IReqoreDropdownProps>;
 
 const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
-  const [selected, setSelected] = useState<(string | number)[]>(['Item 3', 'Item 6']);
-
-  if (args.scrollToSelected) {
+  if (args.scrollToSelected || args.paging) {
     return (
       <ReqoreControlGroup>
         <ReqoreDropdown
-          label='Scrolling to selected'
+          {...args}
+          label={args.label}
           isDefaultOpen
-          scrollToSelected
+          filterable
+          scrollToSelected={args.scrollToSelected}
+          paging={args.paging}
           items={Array(130)
             .fill(null)
             .map((_, i) => ({
@@ -151,31 +151,6 @@ const Template: Story<IReqoreDropdownProps> = (args: IReqoreDropdownProps) => {
     );
   }
 
-  if (args.multiSelect) {
-    return (
-      <>
-        <ReqoreControlGroup>
-          <ReqoreDropdown
-            label='Multi Select'
-            multiSelect
-            isDefaultOpen
-            onItemSelect={({ label }) => setSelected([...selected, label])}
-            items={Array(13)
-              .fill(null)
-              .map((_, i) => ({
-                label: `Item ${i}`,
-                value: `item-${i}`,
-                selected: selected.includes(`Item ${i}`),
-              }))}
-          />
-          {selected.map((item, index) => (
-            <ReqoreTag label={item} key={index} />
-          ))}
-        </ReqoreControlGroup>
-      </>
-    );
-  }
-
   return (
     <>
       <ReqoreControlGroup wrap>
@@ -248,8 +223,52 @@ CustomComponent.args = {
 export const ScrollToSelectedItem = Template.bind({});
 ScrollToSelectedItem.args = {
   scrollToSelected: true,
+  label: 'Dropdown that scrolls to selected item',
 };
-export const MultiSelect = Template.bind({});
-MultiSelect.args = {
-  multiSelect: true,
+export const WithPaging: Story<IReqoreDropdownProps> = Template.bind({});
+WithPaging.args = {
+  paging: {
+    itemsPerPage: 50,
+  },
+  label: 'Dropdown with paging',
 };
+
+export const WithLoadMore: Story<IReqoreDropdownProps> = Template.bind({});
+WithLoadMore.args = {
+  paging: {
+    fluid: true,
+    infinite: true,
+    scrollOnLoadMore: true,
+    loadMoreLabel: 'Load additional items...',
+    showLabels: true,
+    includeBottomControls: false,
+  },
+  label: 'Dropdown with load more',
+};
+
+export const WithCustomPaging: Story<IReqoreDropdownProps> = Template.bind({});
+WithCustomPaging.args = {
+  paging: {
+    fluid: true,
+    infinite: true,
+    scrollOnLoadMore: true,
+    pageControlsPosition: 'both',
+    loadMoreLabel: 'Load additional items...',
+    showLabels: true,
+    loadMoreButtonProps: {
+      textAlign: 'center',
+      effect: {
+        gradient: {
+          colors: 'info',
+          animate: 'hover',
+        },
+        textSize: 'small',
+        uppercase: true,
+        spaced: 3,
+      },
+    },
+  },
+  label: 'Dropdown with custom paging',
+};
+
+WithCustomPaging.play = () => {};

package/src/stories/Menu/Menu.stories.tsx

@@ -192,6 +192,10 @@ export const Minimal = Template.bind({});
 Minimal.args = {
   minimal: true,
 };
+export const NoPadding = Template.bind({});
+NoPadding.args = {
+  padded: false,
+};
 export const NotFlat = Template.bind({});
 NotFlat.args = {
   flat: false,

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

@@ -1,4 +1,6 @@
 import { Story, StoryObj } from '@storybook/react/types-6-0';
+import { useState } from 'react';
+import { useMount } from 'react-use';
 import { IReqorePaginationProps, ReqorePagination } from '../../components/Paging';
 import { IReqorePagingOptions } from '../../hooks/usePaging';
 import { ReqoreControlGroup, ReqoreTag, useReqorePaging } from '../../index';
@@ -10,14 +12,19 @@ export default {
 
 const Template: Story<IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }> =
   (args) => {
+    const [scrollContainer, setScrollContainer] = useState<any>(undefined);
     const paging = useReqorePaging<any>({ items: tableData, ...args.pagingOptions });
 
+    useMount(() => {
+      setScrollContainer(document.querySelector('.reqore-content')!);
+    });
+
     return (
       <ReqoreControlGroup vertical fluid>
         {paging.items.map((item) => (
           <ReqoreTag fixed='key' labelKey={item.id} label={`${item.firstName} ${item.lastName}`} />
         ))}
-        <ReqorePagination<any> {...paging} {...args} />
+        <ReqorePagination<any> {...paging} {...args} scrollContainer={scrollContainer} />
       </ReqoreControlGroup>
     );
   };
@@ -131,6 +138,17 @@ WithLabels.args = {
   } as IReqorePagingOptions<any>,
 };
 
+export const ScrollToTop: Story<
+  IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
+> = Template.bind({});
+ScrollToTop.args = {
+  scrollToTopOnPageChange: true,
+  pagingOptions: {
+    pagesToShow: 5,
+    itemsPerPage: 100,
+  } as IReqorePagingOptions<any>,
+};
+
 export const Infinite: Story<
   IReqorePaginationProps<any> & { pagingOptions?: IReqorePagingOptions<any> }
 > = Template.bind({});

package/src/stories/Panel/Panel.stories.tsx

@@ -3,7 +3,7 @@ import { noop } from 'lodash';
 import ReqoreInput, { IReqoreInputProps } from '../../components/Input';
 import { IReqorePanelAction, IReqorePanelProps, ReqorePanel } from '../../components/Panel';
 import { ReqoreVerticalSpacer } from '../../components/Spacer';
-import { argManager, FlatArg, IconArg, IntentArg, SizeArg } from '../utils/args';
+import { FlatArg, IconArg, IntentArg, SizeArg, argManager } from '../utils/args';
 
 const { createArg } = argManager<IReqorePanelProps>();
 
@@ -356,6 +356,23 @@ NoActions.args = {
     'This is a really long title that should stretch all the way to the right of the panel, all the way to the end and not end in the middle',
 };
 
+export const NoLabel: Story<IReqorePanelProps> = Template.bind({});
+NoLabel.args = {
+  collapsible: false,
+  actions: [
+    {
+      responsive: false,
+      group: [
+        { label: 'Stacked Action 1', icon: 'BallPenLine', intent: 'warning' },
+        { icon: 'CopperCoinFill', intent: 'danger' },
+      ],
+    },
+  ],
+  label: undefined,
+  icon: undefined,
+  badge: undefined,
+};
+
 export const ImageAsIcon: Story<IReqorePanelProps> = Template.bind({});
 ImageAsIcon.args = {
   iconImage: