@qoretechnologies/reqore 0.32.2 → 0.33.0

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

package/src/components/Paging/index.tsx

@@ -0,0 +1,232 @@
+import { memo, useEffect, useRef, useState } from 'react';
+import { useUnmount, useUpdateEffect } from 'react-use';
+import styled from 'styled-components';
+import { ReqoreDropdown } from '../..';
+import { IReqorePagingResult } from '../../hooks/usePaging';
+import ReqoreButton, { IReqoreButtonProps, StyledButton } from '../Button';
+import ReqoreControlGroup, { IReqoreControlGroupProps } from '../ControlGroup';
+import { IReqoreDropdownProps } from '../Dropdown';
+import { IReqoreDropdownItemProps } from '../Dropdown/item';
+
+export interface IReqorePaginationComponentProps
+  extends Omit<IReqoreControlGroupProps, 'children'> {
+  pageButtonProps?: IReqoreButtonProps;
+  activePageButtonProps?: IReqoreButtonProps;
+  listPageButtonProps?: IReqoreDropdownProps;
+  controlPageButtonProps?: IReqoreButtonProps;
+  loadMoreButtonProps?: IReqoreButtonProps;
+  firstPageLabel?: string;
+  lastPageLabel?: string;
+  nextPageLabel?: string;
+  previousPageLabel?: string;
+  pageLabel?: string;
+  loadMoreLabel?: string;
+  showPages?: boolean;
+  showControls?: boolean;
+  showPagesAs?: 'buttons' | 'list';
+  showLabels?: boolean;
+  scrollOnLoadMore?: boolean;
+  autoLoadMore?: boolean;
+}
+export interface IReqorePaginationProps<T>
+  extends Omit<IReqorePagingResult<T>, 'items'>,
+    IReqorePaginationComponentProps {}
+
+export const StyledPagesWrapper = styled(ReqoreControlGroup)`
+  width: unset;
+  max-width: 100%;
+  justify-content: center;
+
+  & > ${StyledButton} {
+    margin: 0;
+  }
+`;
+
+function Pagination<T>({
+  allPages,
+  back,
+  first,
+  currentPage,
+  isLastPage,
+  isFirstPage,
+  pageCount,
+  pages,
+  last,
+  next,
+  setPage,
+  infinite,
+  itemsLeft,
+  showPagesAs = 'buttons',
+  pageButtonProps = {},
+  activePageButtonProps = {},
+  listPageButtonProps = {},
+  controlPageButtonProps = {},
+  loadMoreButtonProps = {},
+  firstPageLabel = 'First',
+  lastPageLabel = 'Last',
+  nextPageLabel = 'Next',
+  previousPageLabel = 'Back',
+  pageLabel = 'Page',
+  loadMoreLabel = 'Load more',
+  showLabels,
+  showPages = true,
+  showControls = true,
+  scrollOnLoadMore,
+  autoLoadMore,
+  itemsPerPage,
+  ...rest
+}: IReqorePaginationProps<T>) {
+  const [loadMoreRef, setLoadMoreRef] = useState<HTMLButtonElement>(undefined);
+  const [scrollTargetRef, setScrollTargetRef] = useState<HTMLDivElement>(undefined);
+  const observer = useRef<IntersectionObserver>(null);
+
+  useEffect(() => {
+    if (scrollTargetRef && scrollOnLoadMore && !isLastPage && !isFirstPage) {
+      scrollTargetRef.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+        inline: 'nearest',
+      });
+    }
+  }, [currentPage, scrollTargetRef, scrollOnLoadMore, isLastPage, isFirstPage]);
+
+  useUpdateEffect(() => {
+    if (loadMoreRef && autoLoadMore) {
+      observer.current = new IntersectionObserver(
+        (entries: IntersectionObserverEntry[]) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              next();
+            }
+          });
+        },
+        {
+          threshold: 0.8,
+        }
+      );
+
+      observer.current.observe(loadMoreRef);
+    }
+  }, [loadMoreRef, autoLoadMore, isLastPage]);
+
+  useUnmount(() => {
+    observer.current?.disconnect();
+  });
+
+  if (pageCount === 1 || pageCount === 0) return null;
+
+  return (
+    <ReqoreControlGroup
+      {...rest}
+      className={`${rest.className || ''} reqore-pagination-wrapper`}
+      style={{ justifyContent: 'center' }}
+    >
+      {infinite && !isLastPage ? (
+        <ReqoreControlGroup vertical>
+          <div className='reqore-auto-scroll-target' ref={setScrollTargetRef} />
+          <ReqoreButton
+            icon='ArrowDropDownLine'
+            badge={itemsLeft}
+            iconsAlign='center'
+            {...loadMoreButtonProps}
+            onClick={next}
+            ref={setLoadMoreRef}
+            style={{
+              scrollMarginTop: '200px',
+            }}
+          >
+            {showLabels && loadMoreLabel}
+          </ReqoreButton>
+        </ReqoreControlGroup>
+      ) : (
+        <>
+          {showPagesAs === 'list' || (showControls && !showPages) ? (
+            <ReqoreButton
+              icon='RewindMiniLine'
+              fixed
+              {...controlPageButtonProps}
+              onClick={first}
+              disabled={isFirstPage}
+              tooltip={!showLabels && firstPageLabel}
+            >
+              {showLabels && firstPageLabel}
+            </ReqoreButton>
+          ) : null}
+          {showControls && (
+            <ReqoreButton
+              icon='ArrowDropLeftLine'
+              fixed
+              {...controlPageButtonProps}
+              onClick={back}
+              disabled={isFirstPage}
+              tooltip={!showLabels && previousPageLabel}
+            >
+              {showLabels && previousPageLabel}
+            </ReqoreButton>
+          )}
+          {showPages && (
+            <StyledPagesWrapper wrap horizontalAlign='center'>
+              {showPagesAs === 'buttons' ? (
+                pages.map((page) => (
+                  <ReqoreButton
+                    textAlign='center'
+                    fixed
+                    key={page}
+                    onClick={() => setPage(page)}
+                    active={page === currentPage}
+                    {...(page === currentPage ? activePageButtonProps : pageButtonProps)}
+                  >
+                    {page}
+                  </ReqoreButton>
+                ))
+              ) : (
+                <ReqoreDropdown
+                  filterable
+                  label={`${showLabels ? `${pageLabel} ` : ''}${currentPage} / ${pageCount}`}
+                  items={pages.map((page) => ({
+                    label: `${showLabels ? `${pageLabel} ` : ''}${page}`,
+                    onClick: () => setPage(page),
+                    selected: page === currentPage,
+                    ...(page === currentPage
+                      ? (activePageButtonProps as IReqoreDropdownItemProps)
+                      : (pageButtonProps as IReqoreDropdownItemProps)),
+                  }))}
+                  placement='bottom'
+                  inputProps={{ focusRules: { type: 'auto', viewportOnly: true } }}
+                  scrollToSelected
+                  {...listPageButtonProps}
+                />
+              )}
+            </StyledPagesWrapper>
+          )}
+          {showControls && (
+            <ReqoreButton
+              icon='ArrowDropRightLine'
+              fixed
+              {...controlPageButtonProps}
+              onClick={next}
+              disabled={isLastPage}
+              tooltip={!showLabels && nextPageLabel}
+            >
+              {showLabels && nextPageLabel}
+            </ReqoreButton>
+          )}
+          {showPagesAs === 'list' || (showControls && !showPages) ? (
+            <ReqoreButton
+              icon='SpeedMiniLine'
+              fixed
+              {...controlPageButtonProps}
+              onClick={last}
+              disabled={isLastPage}
+              tooltip={!showLabels && lastPageLabel}
+            >
+              {showLabels && lastPageLabel}
+            </ReqoreButton>
+          ) : null}
+        </>
+      )}
+    </ReqoreControlGroup>
+  );
+}
+
+export const ReqorePagination = memo(Pagination) as typeof Pagination;

package/src/components/Paragraph/index.tsx

@@ -15,8 +15,8 @@ export interface IReqoreParagraphProps
 }
 
 export const StyledParagraph = styled(StyledTextEffect)`
-  margin: 0;
   padding: 0;
+  margin: 0;
   color: ${({ theme, intent }) => (intent ? theme.intents[intent] : 'inherit')};
   font-size: ${({ _size }) => (isStringSize(_size) ? `${TEXT_FROM_SIZE[_size]}px` : _size)};
 `;

package/src/components/Spinner/index.tsx

@@ -3,10 +3,12 @@ import { ReqoreIcon, ReqoreP } from '../..';
 import { TSizes } from '../../constants/sizes';
 import { TReqoreIntent } from '../../constants/theme';
 import { IWithReqoreEffect } from '../../types/global';
-import ReqoreControlGroup from '../ControlGroup';
+import ReqoreControlGroup, { IReqoreControlGroupProps } from '../ControlGroup';
 import { IReqoreEffect, TReqoreEffectColor } from '../Effect';
 
-export interface IReqoreSpinnerProps extends IWithReqoreEffect {
+export interface IReqoreSpinnerProps
+  extends Omit<IReqoreControlGroupProps, 'children' | 'size'>,
+    IWithReqoreEffect {
   size?: TSizes | string;
   intent?: TReqoreIntent;
   children?: any;
@@ -27,6 +29,7 @@ export const ReqoreSpinner = ({
   effect,
   iconMargin,
   centered,
+  ...rest
 }: IReqoreSpinnerProps) => {
   const renderContent = useCallback(() => {
     return (
@@ -44,7 +47,12 @@ export const ReqoreSpinner = ({
 
   if (children) {
     return (
-      <ReqoreControlGroup vertical={centered} horizontalAlign={centered ? 'center' : undefined}>
+      <ReqoreControlGroup
+        {...rest}
+        vertical={centered}
+        horizontalAlign={centered ? 'center' : undefined}
+        verticalAlign='center'
+      >
         {renderContent()}
         <ReqoreP
           size={size}

package/src/components/Tag/index.tsx

@@ -25,7 +25,6 @@ import {
   IReqoreDisabled,
   IReqoreIntent,
   IWithReqoreEffect,
-  IWithReqoreFixed,
   IWithReqoreFluid,
   IWithReqoreMinimal,
   IWithReqoreTooltip,
@@ -52,8 +51,8 @@ export interface IReqoreTagProps
     IReqoreDisabled,
     IWithReqoreMinimal,
     IWithReqoreFluid,
-    IWithReqoreFixed,
     IWithReqoreEffect {
+  fixed?: boolean | 'key' | 'label';
   size?: TSizes;
   label?: string | number;
   labelKey?: string | number;
@@ -93,9 +92,10 @@ export const StyledTag = styled(StyledEffect)<IReqoreTagStyle>`
   font-size: ${({ size }) => TEXT_FROM_SIZE[size]}px;
 
   min-width: ${({ size }) => SIZE_TO_PX[size]}px;
-  max-width: ${({ fixed }) => (!fixed ? '100%' : undefined)};
-  flex: ${({ fluid, fixed }) => (fixed ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
-  align-self: ${({ fixed, fluid }) => (fixed ? 'flex-start' : fluid ? 'stretch' : undefined)};
+  max-width: ${({ fixed }) => (fixed !== true ? '100%' : undefined)};
+  flex: ${({ fluid, fixed }) => (fixed === true ? '0 0 auto' : fluid ? '1 auto' : '0 0 auto')};
+  align-self: ${({ fixed, fluid }) =>
+    fixed === true ? 'flex-start' : fluid ? 'stretch' : undefined};
   border-radius: ${({ asBadge, size }) => (asBadge ? 18 : RADIUS_FROM_SIZE[size])}px;
   width: ${({ width }) => width || undefined};
   transition: all 0.2s ease-out;
@@ -163,7 +163,7 @@ const StyledTagKeyWrapper = styled.span<{ size: TSizes }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  flex: ${({ hasKey }) => (hasKey ? 1 : undefined)};
+  flex: ${({ hasKey, fixed }) => (hasKey ? (fixed === 'key' ? '0 0 auto' : 1) : undefined)};
   flex-shrink: 0;
   min-height: 100%;
 `;
@@ -172,7 +172,7 @@ const StyledTagContentWrapper = styled.span<{ size: TSizes }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  flex: 1;
+  flex: ${({ fixed }) => (fixed === 'label' ? '0 0 auto' : 1)};
   flex-shrink: 0;
   min-height: 100%;
 `;
@@ -311,6 +311,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             wrap={wrap}
             hasWidth={!!width}
             hasKey={!!labelKey}
+            fixed={rest.fixed}
           >
             {icon && (
               <ReqoreIcon
@@ -345,6 +346,7 @@ const ReqoreTag = forwardRef<HTMLSpanElement, IReqoreTagProps>(
             wrap={wrap}
             hasWidth={!!width}
             hasKey={!!labelKey}
+            fixed={rest.fixed}
           >
             {label || label === 0 ? (
               <StyledTagContent

package/src/constants/colors.ts

@@ -1,9 +1,13 @@
-export const Colors = {
+import { TReqoreHexColor } from '../components/Effect';
+
+export const Colors: Record<string, TReqoreHexColor> = {
   DARK: '#000000',
+  DARK_THEME: '#333333',
   LIGHT: '#ffffff',
   BLUE: '#0E5A8A',
   GREEN: '#0A6640',
   YELLOW: '#d1a036',
   ORANGE: '#A66321',
   RED: '#A82A2A',
+  GRAY: '#444444',
 };

package/src/constants/paging.ts

@@ -0,0 +1,48 @@
+import { IReqoreCollectionPagingOptions } from '../components/Collection';
+import { IReqorePaginationProps } from '../components/Paging';
+import { IReqorePagingOptions } from '../hooks/usePaging';
+
+export type TReqorePaginationType =
+  | true
+  | 'list'
+  | 'infinite'
+  | 'auto-load'
+  | IReqoreCollectionPagingOptions;
+
+export function getPaginationOptionsFromType<T>(type: TReqorePaginationType): {
+  pagingOptions?: Omit<IReqorePagingOptions<T>, 'items'>;
+  componentOptions?: Partial<Omit<IReqorePaginationProps<T>, 'items'>>;
+  pageControlsPosition?: 'top' | 'bottom' | 'both';
+} {
+  if (!type) return {};
+
+  if (typeof type === 'object') {
+    const {
+      infinite,
+      itemsPerPage,
+      pagesToShow,
+      startPage,
+      pageControlsPosition = 'bottom',
+      ...componentOptions
+    } = type;
+    return {
+      pagingOptions: { infinite, itemsPerPage, pagesToShow, startPage },
+      pageControlsPosition,
+      componentOptions,
+    };
+  }
+
+  switch (type) {
+    case true:
+      return {};
+    case 'list':
+      return {
+        componentOptions: {
+          showPagesAs: 'list',
+        },
+      };
+    case 'infinite':
+    case 'auto-load':
+      return { pagingOptions: { infinite: true } };
+  }
+}

package/src/constants/theme.ts

@@ -3,6 +3,7 @@ import {
   TReqoreEffectGradientAnimationTrigger,
   TReqoreHexColor,
 } from '../components/Effect';
+import { Colors } from './colors';
 
 export interface IReqoreSidebarTheme {
   main?: TReqoreHexColor;
@@ -94,16 +95,16 @@ export interface IReqoreIntents {
 export type TReqoreIntent = 'info' | 'success' | 'pending' | 'warning' | 'danger' | 'muted';
 
 export const DEFAULT_INTENTS: IReqoreIntents = {
-  info: '#0E5A8A',
-  success: '#0A6640',
-  pending: '#d1a036',
-  warning: '#A66321',
-  danger: '#A82A2A',
-  muted: '#444444',
+  info: Colors.BLUE,
+  success: Colors.GREEN,
+  pending: Colors.YELLOW,
+  warning: Colors.ORANGE,
+  danger: Colors.RED,
+  muted: Colors.GRAY,
 };
 
 export const DEFAULT_THEME: IReqoreTheme = {
-  main: '#333333',
+  main: Colors.DARK_THEME,
   text: {
     dim: true,
   },

package/src/containers/ReqoreProvider.tsx

@@ -1,5 +1,5 @@
 import { size } from 'lodash';
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { useMedia } from 'react-use';
 import shortid from 'shortid';
 import { useContext } from 'use-context-selector';
@@ -62,11 +62,11 @@ const ReqoreProvider: React.FC<IReqoreNotifications> = ({ children, options = {}
       : useMedia('(min-width: 480px) and (max-width: 1200px)');
   const isMobileOrTablet = isMobile || isTablet;
 
-  const getAndIncreaseZIndex = (): number => {
+  const getAndIncreaseZIndex = useCallback((): number => {
     latestZIndex.current += 1;
 
     return latestZIndex.current;
-  };
+  }, [latestZIndex.current]);
 
   const confirmAction = (data: IReqoreConfirmationModal): void => {
     setConfirmationModal({

package/src/containers/UIProvider.tsx

@@ -1,13 +1,13 @@
 import { cloneDeep } from 'lodash';
 import merge from 'lodash/merge';
 import { rgba } from 'polished';
-import React, { useState } from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
+import React, { forwardRef, useState } from 'react';
+import styled, { createGlobalStyle, css } from 'styled-components';
 import ReqoreLayoutWrapper from '../components/Layout';
 import { IReqoreNotificationsPosition } from '../components/Notifications';
 import { DEFAULT_THEME, IReqoreTheme } from '../constants/theme';
 import ThemeContext from '../context/ThemeContext';
-import { buildTheme, getMainBackgroundColor } from '../helpers/colors';
+import { buildTheme, getMainBackgroundColor, getReadableColor } from '../helpers/colors';
 import PopoverProvider from './PopoverProvider';
 import ReqoreProvider from './ReqoreProvider';
 import ReqoreThemeProvider from './ThemeProvider';
@@ -56,11 +56,24 @@ const GlobalStyle = createGlobalStyle`
 
 const StyledPortal = styled.div`
   z-index: 9999;
+
   * {
     box-sizing: border-box;
   }
+
+  ${({ theme }) => css`
+    color: ${getReadableColor(theme, undefined, undefined, true)};
+  `}
 `;
 
+const ReqorePortal = forwardRef<HTMLDivElement, {}>((_props, ref) => {
+  return (
+    <ReqoreThemeProvider>
+      <StyledPortal id='reqore-portal' ref={ref} />
+    </ReqoreThemeProvider>
+  );
+});
+
 const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = ({ children, theme, options }) => {
   const [modalPortal, setModalPortal] = useState<any>(false);
 
@@ -81,8 +94,8 @@ const ReqoreUIProvider: React.FC<IReqoreUIProviderProps> = ({ children, theme, o
             </ReqoreProvider>
           ) : null}
         </ReqoreLayoutWrapper>
+        <ReqorePortal ref={setModalPortal} />
       </ThemeContext.Provider>
-      <StyledPortal id='reqore-portal' ref={setModalPortal} />
     </>
   );
 };

package/src/hooks/useCombinedRefs.ts

@@ -6,9 +6,9 @@ import React from 'react';
  * @param refs - An array of refs to combine.
  * @returns A ref object.
  */
-export function useCombinedRefs(...refs) {
+export function useCombinedRefs<T = any>(...refs) {
   const [_innerRef, setInnerRef] = React.useState(null);
-  const targetRef = React.useRef();
+  const targetRef = React.useRef<T>();
 
   React.useEffect(() => {
     [...refs, setInnerRef].forEach((ref) => {