@qoretechnologies/reqore 0.32.3 → 0.33.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.32.3",
+  "version": "0.33.0",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -53,7 +53,7 @@
     "@storybook/react": "^6.5.13",
     "@storybook/testing-library": "^0.0.13",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^11.2.2",
+    "@testing-library/react": "^13.4.0",
     "@types/jest": "^26.0.19",
     "@types/lodash": "^4.14.166",
     "@types/node": "^14.14.14",
@@ -62,7 +62,8 @@
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
     "chromatic": "^6.3.3",
-    "jest": "^26.6.3",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
     "jest-github-actions-reporter": "^1.0.2",
     "npm-cli-login": "^0.1.1",
     "playwright": "^1.16.3",
@@ -73,7 +74,7 @@
     "react-test-renderer": "^18.2.0",
     "storybook-addon-outline": "^1.4.2",
     "storybook-dark-mode": "^1.1.2",
-    "ts-jest": "^26.4.4",
+    "ts-jest": "^29.0.5",
     "ts-node": "^9.1.1",
     "typescript": "^4.7.3",
     "viteshot": "^0.3.1"
@@ -94,6 +95,7 @@
     "react-popper": "^2.3.0",
     "react-scrollbar": "^0.5.6",
     "react-use": "^17.4.0",
+    "react-use-pagination-hook": "^1.1.2",
     "react-window": "^1.8.6",
     "scheduler": "^0.23.0",
     "shortid": "^2.2.16",

package/src/components/Button/index.tsx

@@ -69,6 +69,7 @@ export interface IReqoreButtonProps
   description?: string | number;
   maxWidth?: string;
   textAlign?: 'left' | 'center' | 'right';
+  iconsAlign?: 'center' | 'sides';
   iconColor?: TReqoreEffectColor;
   leftIconColor?: TReqoreEffectColor;
   rightIconColor?: TReqoreEffectColor;
@@ -393,6 +394,7 @@ const ReqoreButton = memo(
         leftIconColor,
         rightIconColor,
         iconColor,
+        iconsAlign,
         ...rest
       }: IReqoreButtonProps,
       ref
@@ -455,17 +457,18 @@ const ReqoreButton = memo(
                   size={size}
                   color={leftIconColor || iconColor}
                   style={
-                    textAlign !== 'left'
+                    textAlign !== 'left' || iconsAlign === 'center'
                       ? {
-                          marginRight: 'auto',
-                          marginLeft: textAlign === 'center' ? 'auto' : undefined,
+                          marginRight: iconsAlign !== 'center' || !children ? 'auto' : undefined,
+                          marginLeft:
+                            iconsAlign === 'center' || (textAlign === 'center' && !children)
+                              ? 'auto'
+                              : undefined,
                         }
                       : undefined
                   }
                 />
-                {children || badge || rightIcon ? (
-                  <ReqoreSpacer width={PADDING_FROM_SIZE[size]} />
-                ) : null}
+                {children || rightIcon ? <ReqoreSpacer width={PADDING_FROM_SIZE[size]} /> : null}
               </>
             ) : children ? (
               <ReqoreHorizontalSpacer
@@ -476,7 +479,9 @@ const ReqoreButton = memo(
             {children && (
               <StyledAnimatedTextWrapper
                 textAlign={textAlign}
-                style={textAlign === 'center' ? { margin: 'auto' } : undefined}
+                style={
+                  textAlign === 'center' && iconsAlign !== 'center' ? { margin: 'auto' } : undefined
+                }
               >
                 <StyledActiveContent wrap={wrap} effect={labelEffect}>
                   {children}
@@ -509,10 +514,13 @@ const ReqoreButton = memo(
                   icon={rightIcon}
                   size={size}
                   style={
-                    textAlign !== 'right'
+                    textAlign !== 'right' || iconsAlign === 'center'
                       ? {
-                          marginLeft: 'auto',
-                          marginRight: textAlign === 'center' ? 'auto' : undefined,
+                          marginLeft: iconsAlign !== 'center' || !children ? 'auto' : undefined,
+                          marginRight:
+                            iconsAlign === 'center' || (textAlign === 'center' && !children)
+                              ? 'auto'
+                              : undefined,
                         }
                       : undefined
                   }

package/src/components/Collection/index.tsx

@@ -1,17 +1,26 @@
 import { size } from 'lodash';
-import { useMemo, useState } from 'react';
+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 { 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,
@@ -48,8 +57,10 @@ export interface IReqoreCollectionProps
   selectedIcon?: IReqoreIconName;
   searchDelay?: number;
 
-  childrenBefore?: React.ReactNode;
-  childrenAfter?: React.ReactNode;
+  contentRenderer?: (
+    children: React.ReactNode,
+    items: IReqoreCollectionItemProps[]
+  ) => React.ReactNode;
 
   onQueryChange?: (query: string) => void;
 
@@ -57,6 +68,8 @@ export interface IReqoreCollectionProps
   sortButtonTooltip?: (sort?: 'asc' | 'desc') => string;
   displayButtonTooltip?: (display?: 'list' | 'grid') => string;
   inputPlaceholder?: (items?: IReqoreCollectionItemProps[]) => string;
+
+  paging?: TReqorePaginationType;
 }
 
 export const StyledCollectionWrapper = styled(StyledColumns)`
@@ -92,13 +105,13 @@ export const ReqoreCollection = ({
   minimal,
   transparent = true,
   onQueryChange,
-  childrenBefore,
-  childrenAfter,
+  contentRenderer = (children) => children,
   searchDelay = 300,
   emptyMessage = 'No data in this collection, try changing your search query or filters',
   sortButtonTooltip = (sort) => (sort === 'desc' ? 'Sort ascending' : 'Sort descending'),
   displayButtonTooltip = (display) => (display === 'grid' ? 'Show as list' : 'Show as grid'),
   inputPlaceholder = (items) => `Search in ${size(items)} items`,
+  paging,
   ...rest
 }: IReqoreCollectionProps) => {
   const [_showAs, setShowAs] = useState<'list' | 'grid'>(showAs);
@@ -152,7 +165,7 @@ export const ReqoreCollection = ({
     });
   }, [items, sort]);
 
-  const finalItems: IReqoreCollectionItemProps[] = useMemo(() => {
+  const filteredItems: IReqoreCollectionItemProps[] = useMemo(() => {
     if (!filterable || query === '') {
       return sortedItems;
     }
@@ -170,6 +183,18 @@ 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);
   };
@@ -210,8 +235,11 @@ export const ReqoreCollection = ({
           props: {
             key: 'search',
             fixed: false,
-            placeholder: inputPlaceholder(finalItems),
-            onClearClick: () => setQuery(''),
+            placeholder: inputPlaceholder(items),
+            onClearClick: () => {
+              setQuery('');
+              setPreQuery('');
+            },
             onChange: handlePreQueryChange,
             value: preQuery,
             icon: 'Search2Line',
@@ -225,6 +253,65 @@ export const ReqoreCollection = ({
     return [...actions, toolbarGroup];
   }, [filterable, preQuery, query, rest.actions, _showAs, sort, sortable, finalItems]);
 
+  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}
+      </>,
+      finalItems
+    );
+  }, [
+    contentRenderer,
+    finalItems,
+    _showAs,
+    columnsGap,
+    emptyMessage,
+    maxItemHeight,
+    rest,
+    rounded,
+    selectedIcon,
+    size,
+    stacked,
+  ]);
+
   return (
     <ReqorePanel
       {...rest}
@@ -239,42 +326,7 @@ export const ReqoreCollection = ({
       actions={finalActions}
       className={`reqore-collection ${rest.className || ''}`}
     >
-      {childrenBefore ? (
-        <>
-          {childrenBefore}
-          <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>
-      )}
-      {childrenAfter ? (
-        <>
-          <ReqoreVerticalSpacer height={PADDING_FROM_SIZE[rest.size || 'normal']} />
-          {childrenAfter}
-        </>
-      ) : null}
+      {renderContent()}
     </ReqorePanel>
   );
 };

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';

package/src/components/Dropdown/index.tsx

@@ -4,9 +4,10 @@ import { ReqorePopover } from '../..';
 import { IPopoverOptions } from '../../hooks/usePopover';
 import { IReqoreIconName } from '../../types/icons';
 import ReqoreButton, { IReqoreButtonProps } from '../Button';
+import { IReqoreInputProps } from '../Input';
 import ReqoreDropdownList, { IReqoreDropdownItem, TDropdownItemOnClick } from './list';
 
-export interface IReqoreDropdownProps extends Partial<IPopoverOptions> {
+export interface IReqoreDropdownProps extends Partial<Omit<IPopoverOptions, 'openOnMount'>> {
   items?: IReqoreDropdownItem[];
   multiSelect?: boolean;
   buttonStyle?: React.CSSProperties;
@@ -23,6 +24,8 @@ export interface IReqoreDropdownProps extends Partial<IPopoverOptions> {
   isDefaultOpen?: boolean;
   onItemSelect?: TDropdownItemOnClick;
   style?: React.CSSProperties;
+  inputProps?: IReqoreInputProps;
+  scrollToSelected?: boolean;
 }
 
 function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
@@ -50,13 +53,14 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
   maxWidth,
   noArrow = true,
   transparent,
-  openOnMount,
   show,
   targetElement,
   useTargetWidth,
   listWidth,
   listHeight,
   passPopoverData,
+  inputProps,
+  scrollToSelected,
   ...rest
 }: IReqoreDropdownProps & T) {
   const componentProps = useMemo(
@@ -82,6 +86,8 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
         items={items}
         filterable={filterable}
         onItemSelect={onItemSelect}
+        inputProps={inputProps}
+        scrollToSelected={scrollToSelected}
       />
     ) : undefined;
   }, [items]);

package/src/components/Dropdown/list.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useEffect, useMemo, useState } from 'react';
 import { IReqoreComponent } from '../../types/global';
-import ReqoreInput from '../Input';
+import ReqoreInput, { IReqoreInputProps } from '../Input';
 import ReqoreMenu from '../Menu';
 import ReqoreMenuDivider from '../Menu/divider';
 import ReqoreMenuItem, { IReqoreMenuItemProps } from '../Menu/item';
@@ -25,6 +25,8 @@ export interface IReqoreDropdownListProps extends IReqoreComponent {
   height?: string;
   filterable?: boolean;
   onItemSelect?: TDropdownItemOnClick;
+  inputProps?: IReqoreInputProps;
+  scrollToSelected?: boolean;
 }
 
 const ReqoreDropdownList = memo(
@@ -37,6 +39,8 @@ const ReqoreDropdownList = memo(
     width,
     height,
     onItemSelect,
+    inputProps,
+    scrollToSelected,
   }: IReqoreDropdownListProps) => {
     const [_items, setItems] = useState<TReqoreDropdownItems>(items);
     const [query, setQuery] = useState<string>('');
@@ -94,6 +98,7 @@ const ReqoreDropdownList = memo(
               onChange={handleQueryChange}
               placeholder='Filter'
               onClearClick={() => setQuery('')}
+              {...inputProps}
             />
           </>
         )}
@@ -108,6 +113,7 @@ const ReqoreDropdownList = memo(
                 label={item.label || item.value}
                 onClick={() => handleItemClick({ ...item, onClick })}
                 rightIcon={item.selected ? 'CheckLine' : undefined}
+                scrollIntoView={scrollToSelected && item.selected && !multiSelect}
               />
             )
         )}

package/src/components/Menu/item.tsx

@@ -1,8 +1,9 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 import { useContext } from 'use-context-selector';
 import { ReqoreButton, ReqoreControlGroup } from '../..';
 import { IReqoreTheme, TReqoreIntent } from '../../constants/theme';
 import PopoverContext from '../../context/PopoverContext';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { IReqoreComponent } from '../../types/global';
 import { IReqoreButtonProps } from '../Button';
 
@@ -17,6 +18,7 @@ export interface IReqoreMenuItemProps
   itemId?: string;
   onRightIconClick?: (itemId?: string, event?: React.MouseEvent<HTMLElement>) => void;
   onClick?: (itemId?: string, event?: React.MouseEvent<HTMLElement>) => void;
+  scrollIntoView?: boolean;
 }
 
 export interface IReqoreMenuItemStyle {
@@ -50,11 +52,14 @@ const ReqoreMenuItem = forwardRef<HTMLButtonElement, IReqoreMenuItemProps>(
       tooltip,
       intent,
       flat = true,
+      scrollIntoView,
       ...rest
     }: IReqoreMenuItemProps,
     ref
   ) => {
     const { removePopover } = useContext(PopoverContext);
+    const { targetRef } = useCombinedRefs<HTMLButtonElement>(ref);
+    const [itemRef, setItemRef] = useState<HTMLButtonElement>(undefined);
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
       event.persist();
@@ -79,6 +84,12 @@ const ReqoreMenuItem = forwardRef<HTMLButtonElement, IReqoreMenuItemProps>(
       }
     };
 
+    useEffect(() => {
+      if (scrollIntoView && itemRef) {
+        itemRef.scrollIntoView?.({ behavior: 'smooth', block: 'center', inline: 'center' });
+      }
+    }, [itemRef, scrollIntoView]);
+
     return (
       <ReqoreControlGroup stack={!!onRightIconClick} fluid>
         <ReqoreButton
@@ -90,7 +101,10 @@ const ReqoreMenuItem = forwardRef<HTMLButtonElement, IReqoreMenuItemProps>(
           fluid
           onClick={handleClick}
           active={selected}
-          ref={ref}
+          ref={(ref) => {
+            targetRef.current = ref;
+            setItemRef(ref);
+          }}
           disabled={disabled}
           intent={intent}
           icon={icon}

package/src/components/MultiSelect/index.tsx

@@ -28,7 +28,7 @@ export interface IReqoreMultiSelectProps
   selectedItemEffect?: IReqoreEffect;
   selectedItemSize?: TSizes;
   selectorProps?: Omit<IReqoreInputProps, 'value' | 'onValueChange'> & IReqoreDropdownProps;
-  openOnMount?: IReqoreDropdownProps['openOnMount'];
+  openOnMount?: IReqoreDropdownProps['isDefaultOpen'];
   enterKeySelects?: boolean;
 }