@qoretechnologies/reqore 0.32.3 → 0.34.0

package/src/components/Collection/index.tsx

@@ -1,14 +1,14 @@
 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 { PADDING_FROM_SIZE } from '../../constants/sizes';
+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 { IReqorePanelAction, IReqorePanelProps, ReqorePanel, TReqorePanelActions } from '../Panel';
-import { ReqoreVerticalSpacer } from '../Spacer';
 import { sortTableData } from '../Table/helpers';
 import { IReqoreCollectionItemProps, ReqoreCollectionItem } from './item';
 
@@ -48,8 +48,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 +59,8 @@ export interface IReqoreCollectionProps
   sortButtonTooltip?: (sort?: 'asc' | 'desc') => string;
   displayButtonTooltip?: (display?: 'list' | 'grid') => string;
   inputPlaceholder?: (items?: IReqoreCollectionItemProps[]) => string;
+
+  paging?: TReqorePaginationType<IReqoreCollectionItemProps>;
 }
 
 export const StyledCollectionWrapper = styled(StyledColumns)`
@@ -92,19 +96,20 @@ 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);
   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);
@@ -152,7 +157,7 @@ export const ReqoreCollection = ({
     });
   }, [items, sort]);
 
-  const finalItems: IReqoreCollectionItemProps[] = useMemo(() => {
+  const filteredItems: IReqoreCollectionItemProps[] = useMemo(() => {
     if (!filterable || query === '') {
       return sortedItems;
     }
@@ -184,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,
         },
@@ -196,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,
       });
@@ -210,8 +215,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',
@@ -223,7 +231,63 @@ 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(
+      <>
+        <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>
+      </>,
+      filteredItems
+    );
+  }, [
+    contentRenderer,
+    filteredItems,
+    _showAs,
+    columnsGap,
+    emptyMessage,
+    maxItemHeight,
+    rest,
+    rounded,
+    selectedIcon,
+    size,
+    stacked,
+  ]);
 
   return (
     <ReqorePanel
@@ -239,42 +303,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

@@ -1,12 +1,15 @@
 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<IPopoverOptions> {
+export interface IReqoreDropdownProps extends Partial<Omit<IPopoverOptions, 'openOnMount'>> {
   items?: IReqoreDropdownItem[];
   multiSelect?: boolean;
   buttonStyle?: React.CSSProperties;
@@ -23,6 +26,10 @@ export interface IReqoreDropdownProps extends Partial<IPopoverOptions> {
   isDefaultOpen?: boolean;
   onItemSelect?: TDropdownItemOnClick;
   style?: React.CSSProperties;
+  inputProps?: IReqoreInputProps;
+  wrapperProps?: IReqorePanelProps;
+  scrollToSelected?: boolean;
+  paging?: TReqorePaginationType<IReqoreDropdownItem>;
 }
 
 function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
@@ -50,13 +57,16 @@ function ReqoreDropdown<T extends unknown = IReqoreButtonProps>({
   maxWidth,
   noArrow = true,
   transparent,
-  openOnMount,
   show,
   targetElement,
   useTargetWidth,
   listWidth,
   listHeight,
   passPopoverData,
+  inputProps,
+  scrollToSelected,
+  wrapperProps,
+  paging,
   ...rest
 }: IReqoreDropdownProps & T) {
   const componentProps = useMemo(
@@ -74,15 +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}
-      />
+      <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 from '../Input';
+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
@@ -25,6 +30,9 @@ export interface IReqoreDropdownListProps extends IReqoreComponent {
   height?: string;
   filterable?: boolean;
   onItemSelect?: TDropdownItemOnClick;
+  inputProps?: IReqoreInputProps;
+  scrollToSelected?: boolean;
+  paging?: TReqorePaginationType<TReqoreDropdownItem>;
 }
 
 const ReqoreDropdownList = memo(
@@ -37,9 +45,13 @@ const ReqoreDropdownList = memo(
     width,
     height,
     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);
@@ -80,38 +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}
-              />
-            )
-        )}
-      </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/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;
 }