@qoretechnologies/reqore 0.35.0 → 0.35.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.35.0",
+  "version": "0.35.2",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/ControlGroup/index.tsx

@@ -469,6 +469,7 @@ const ReqoreControlGroup = memo(
           </ReqoreDrawer>
         ) : null}
         <StyledReqoreControlGroup
+          as='div'
           {...rest}
           vertical={vertical}
           style={{

package/src/components/Dropdown/list.tsx

@@ -17,6 +17,7 @@ export interface IReqoreDropdownItem
   onClick?: TDropdownItemOnClick;
   divider?: boolean;
   dividerAlign?: 'left' | 'center' | 'right';
+  line?: boolean;
 }
 
 export type TReqoreDropdownItem = IReqoreDropdownItem;

package/src/components/Menu/divider.tsx

@@ -5,6 +5,7 @@ import { getReadableColor } from '../../helpers/colors';
 import { getOneLessSize, isStringSize } from '../../helpers/utils';
 import { IWithReqoreEffect, IWithReqoreSize } from '../../types/global';
 import { IReqoreEffect, StyledTextEffect } from '../Effect';
+import { ReqoreVerticalSpacer } from '../Spacer';
 
 export interface IReqoreMenuDividerProps
   extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>,
@@ -13,6 +14,7 @@ export interface IReqoreMenuDividerProps
   label?: string | number;
   margin?: 'left' | 'right' | 'both' | 'none';
   align?: 'left' | 'center' | 'right';
+  line?: boolean;
 }
 
 export const StyledMenuDivider = styled(StyledTextEffect)`
@@ -46,30 +48,38 @@ const ReqoreMenuDivider = forwardRef<HTMLDivElement, IReqoreMenuDividerProps>(
       effect,
       size = 'normal',
       align = 'center',
+      line,
       ...rest
     }: IReqoreMenuDividerProps,
     ref: any
-  ) => (
-    <StyledMenuDivider
-      as='div'
-      {...rest}
-      size={size}
-      className={`${className || ''} reqore-menu-divider`}
-      ref={ref}
-      effect={
-        {
-          uppercase: true,
-          spaced: 2,
-          textAlign: align,
-          textSize: getOneLessSize(size),
-          weight: 'bold',
-          ...effect,
-        } as IReqoreEffect
-      }
-    >
-      {label}
-    </StyledMenuDivider>
-  )
+  ) =>
+    line ? (
+      <ReqoreVerticalSpacer
+        className={`${className || ''} reqore-menu-divider`}
+        height={PADDING_FROM_SIZE[size]}
+        lineSize={size}
+      />
+    ) : (
+      <StyledMenuDivider
+        as='div'
+        {...rest}
+        size={size}
+        className={`${className || ''} reqore-menu-divider`}
+        ref={ref}
+        effect={
+          {
+            uppercase: true,
+            spaced: 2,
+            textAlign: align,
+            textSize: getOneLessSize(size),
+            weight: 'bold',
+            ...effect,
+          } as IReqoreEffect
+        }
+      >
+        {label}
+      </StyledMenuDivider>
+    )
 );
 
 export default ReqoreMenuDivider;

package/src/components/Spacer/index.tsx

@@ -1,6 +1,6 @@
 import { memo, useMemo } from 'react';
 import styled, { css } from 'styled-components';
-import { SIZE_TO_NUMBER, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { LINE_SIZE_TO_NUMBER, TEXT_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { changeLightness } from '../../helpers/colors';
 import { useReqoreTheme } from '../../hooks/useTheme';
 import { IReqoreIntent, IWithReqoreCustomTheme, IWithReqoreEffect } from '../../types/global';
@@ -103,7 +103,7 @@ export const ReqoreSpacer = memo(
     }
 
     const _lineSize = useMemo(
-      () => (lineSize === 'none' ? 0 : SIZE_TO_NUMBER[lineSize]),
+      () => (lineSize === 'none' ? 0 : LINE_SIZE_TO_NUMBER[lineSize]),
       [lineSize]
     );
 

package/src/components/Table/body.tsx

@@ -1,46 +1,92 @@
-import { Dispatch, SetStateAction, useEffect, useRef } from 'react';
-import { useScroll } from 'react-use';
+import { forwardRef } from 'react';
+import { useMount } from 'react-use';
 import { FixedSizeList as List } from 'react-window';
+import styled from 'styled-components';
 import { TABLE_SIZE_TO_PX } from '../../constants/sizes';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import ReqoreTableRow, { IReqoreTableRowOptions } from './row';
 
 export interface IReqoreTableSectionBodyProps extends IReqoreTableRowOptions {
-  setLeftScroll: Dispatch<SetStateAction<number>>;
   rowHeight?: number;
   height: number;
+  refs: {
+    left: React.RefObject<HTMLDivElement>;
+    right: React.RefObject<HTMLDivElement>;
+    main: React.RefObject<HTMLDivElement>;
+    header: React.RefObject<HTMLDivElement>;
+  };
+  type?: 'left' | 'right' | 'main';
+  onScrollChange?: (isScrolled: boolean) => void;
 }
 
-const ReqoreTableBody = ({
-  data,
-  setLeftScroll,
-  height,
-  rowHeight,
-  size = 'normal',
-  ...rest
-}: IReqoreTableSectionBodyProps) => {
-  const ref = useRef(null);
-  const { x }: { x: number } = useScroll(ref);
-
-  useEffect(() => {
-    setLeftScroll(x);
-  }, [x]);
-
-  return (
-    <List
-      outerRef={ref}
-      itemCount={data.length}
-      height={height}
-      className='reqore-table-body'
-      itemSize={rest.flat ? TABLE_SIZE_TO_PX[size] : TABLE_SIZE_TO_PX[size] + 1}
-      itemData={{
-        data,
-        size,
-        ...rest,
-      }}
-    >
-      {ReqoreTableRow}
-    </List>
-  );
-};
+const StyledList = styled(List)`
+  ::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+const ReqoreTableBody = forwardRef<HTMLDivElement, IReqoreTableSectionBodyProps>(
+  (
+    {
+      data,
+      height,
+      rowHeight,
+      size = 'normal',
+      refs,
+      type,
+      onScrollChange,
+      ...rest
+    }: IReqoreTableSectionBodyProps,
+    ref
+  ) => {
+    const { targetRef } = useCombinedRefs(ref);
+
+    useMount(() => {
+      targetRef.current?.addEventListener('wheel', (e) => {
+        if (e.deltaY) {
+          e.preventDefault();
+
+          const currentScroll = refs[type].current?.scrollTop + e.deltaY;
+
+          onScrollChange?.(currentScroll > 0);
+
+          refs[type].current?.scrollTo({ top: currentScroll });
+
+          if (type === 'left') {
+            refs.main.current?.scrollTo({ top: refs.main.current?.scrollTop + e.deltaY });
+            refs.right.current?.scrollTo({ top: refs.right.current?.scrollTop + e.deltaY });
+          } else if (type === 'main') {
+            refs.left.current?.scrollTo({ top: refs.left.current?.scrollTop + e.deltaY });
+            refs.right.current?.scrollTo({ top: refs.right.current?.scrollTop + e.deltaY });
+          } else if (type === 'right') {
+            refs.main.current?.scrollTo({ top: refs.main.current?.scrollTop + e.deltaY });
+            refs.left.current?.scrollTo({ top: refs.left.current?.scrollTop + e.deltaY });
+          }
+        }
+
+        if (e.deltaX && type === 'main') {
+          refs.header.current?.scrollTo({ left: refs.main.current?.scrollLeft + e.deltaX });
+        }
+      });
+    });
+
+    return (
+      <StyledList
+        outerRef={targetRef}
+        itemCount={data.length}
+        height={height}
+        className='reqore-table-body'
+        itemSize={rest.flat ? TABLE_SIZE_TO_PX[size] : TABLE_SIZE_TO_PX[size] + 1}
+        itemData={{
+          data,
+          size,
+          ...rest,
+        }}
+      >
+        {ReqoreTableRow}
+      </StyledList>
+    );
+  }
+);
 
 export default ReqoreTableBody;

package/src/components/Table/cell.tsx

@@ -13,12 +13,16 @@ export interface IReqoreTableBodyCellProps
   extends Partial<IReqoreTableColumn>,
     React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
+  padded?: IReqoreTableColumn['cell']['padded'];
 }
 
 export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
-  ${({ width, grow }) =>
+  ${({ width, minWidth, maxWidth, grow }) =>
     css`
       width: ${width}px;
+      min-width: ${minWidth}px;
+      max-width: ${maxWidth}px;
+
       flex-grow: ${grow || (width ? undefined : 1)};
     `}
 
@@ -36,6 +40,7 @@ export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
     selectedIntent,
     disabled,
     hovered,
+    padded,
   }: IReqoreTableCellStyle) => {
     const getBackgroundColor = (): TReqoreColor => {
       let color = theme.main;
@@ -76,7 +81,8 @@ export const StyledTableCell = styled.div<IReqoreTableCellStyle>`
       border-bottom: ${!flat ? '1px solid ' : undefined};
 
       height: 100%;
-      padding: 0 10px;
+      padding: ${!padded || padded === 'both' || padded === 'vertical' ? 0 : undefined}
+        ${!padded || padded === 'both' || padded === 'horizontal' ? '10px' : undefined};
       font-size: ${TEXT_FROM_SIZE[size]}px;
       background-color: ${backgroundColor === 'transparent'
         ? 'transparent'

package/src/components/Table/header.tsx

@@ -1,14 +1,17 @@
 import { omit } from 'lodash';
+import { forwardRef, useCallback } from 'react';
+import { useMount } from 'react-use';
 import styled, { css } from 'styled-components';
 import { IReqoreTableColumn, IReqoreTableSort } from '.';
+import { SIZE_TO_PX, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
 import { changeLightness } from '../../helpers/colors';
 import { alignToFlexAlign } from '../../helpers/utils';
+import { useCombinedRefs } from '../../hooks/useCombinedRefs';
 import { IWithReqoreSize } from '../../types/global';
-import { IReqoreIconName } from '../../types/icons';
 import { IReqoreButtonProps } from '../Button';
 import { IReqoreTableHeaderCellProps, ReqoreTableHeaderCell } from './headerCell';
-import { calculateMinimumCellWidth, getOnlyShownColumns } from './helpers';
+import { getOnlyShownColumns } from './helpers';
 
 export type TColumnsUpdater = <T extends keyof IReqoreTableColumn>(
   id: string,
@@ -22,37 +25,45 @@ export interface IReqoreCustomHeaderCellProps
       'sortData' | 'onSortChange' | 'onColumnsUpdate' | 'onFilterChange'
     >,
     Omit<IReqoreTableColumn, 'cell' | 'header'>,
-    IReqoreButtonProps {
+    Omit<IReqoreButtonProps, 'maxWidth'> {
   hasColumns?: boolean;
 }
 export interface IReqoreCustomHeaderCellComponent extends React.FC<IReqoreCustomHeaderCellProps> {}
 
 export interface IReqoreTableSectionProps extends IWithReqoreSize {
   columns: IReqoreTableColumn[];
-  leftScroll: number;
   onSortChange?: (sort: string) => void;
   sortData: IReqoreTableSort;
-  selectable?: boolean;
-  selectedQuant: 'none' | 'all' | 'some';
-  onToggleSelectClick: () => void;
   hasVerticalScroll: boolean;
-  selectToggleTooltip?: string;
   onColumnsUpdate: TColumnsUpdater;
   onFilterChange?: (dataId: string, value: any) => void;
   component?: IReqoreCustomHeaderCellComponent;
+  heightAsGroup?: boolean;
+  scrollable?: boolean;
+  bodyRef: React.RefObject<HTMLDivElement>;
 }
 
 export interface IReqoreTableSectionStyle {
   leftScroll: number;
   hasVerticalScroll: boolean;
   theme: IReqoreTheme;
+  heightAsGroup?: boolean;
+  size?: TSizes;
 }
 
 const StyledTableHeaderWrapper = styled.div<IReqoreTableSectionStyle>`
-  ${({ leftScroll }) => css`
+  ${({ heightAsGroup, size }) => css`
     display: flex;
+
+    overflow-x: auto;
+    overflow-y: hidden;
+    ::-webkit-scrollbar {
+      display: none;
+    }
+
+    flex-shrink: 0;
     flex-flow: column;
-    transform: translate3d(${-leftScroll}px, 0, 0);
+    height: ${heightAsGroup ? `${SIZE_TO_PX[size] * 2}px` : undefined};
 
     ${({ theme }) => css`
       background-color: ${theme.main};
@@ -77,7 +88,10 @@ export const StyledColumnGroupHeader = styled.div<IReqoreTableHeaderStyle>`
 const StyledColumnGroup = styled.div<IReqoreTableHeaderStyle>`
   display: flex;
   flex-flow: column;
+  flex-shrink: 0;
   width: ${({ width }) => width}px;
+  max-width: ${({ maxWidth = 9999 }) => maxWidth}px;
+  min-width: ${({ minWidth, width }) => minWidth || width}px;
 
   ${({ grow }) =>
     grow &&
@@ -105,126 +119,121 @@ const StyledTableHeaderRow = styled.div<{ theme: IReqoreTheme }>`
   }
 `;
 
-const ReqoreTableHeader = ({
-  columns,
-  leftScroll,
-  onSortChange,
-  sortData,
-  selectable,
-  selectedQuant,
-  onToggleSelectClick,
-  selectToggleTooltip,
-  hasVerticalScroll,
-  onColumnsUpdate,
-  onFilterChange,
-  size,
-  component,
-}: IReqoreTableSectionProps) => {
-  const renderHeaderCell = (
-    headerCellComponent: IReqoreCustomHeaderCellComponent,
-    props: IReqoreCustomHeaderCellProps
+const ReqoreTableHeader = forwardRef<HTMLDivElement, IReqoreTableSectionProps>(
+  (
+    {
+      columns,
+      onSortChange,
+      sortData,
+      hasVerticalScroll,
+      onColumnsUpdate,
+      onFilterChange,
+      size,
+      component,
+      heightAsGroup,
+      scrollable,
+      bodyRef,
+    }: IReqoreTableSectionProps,
+    ref
   ) => {
-    const HeaderCell = headerCellComponent || component || ReqoreTableHeaderCell;
-
-    return <HeaderCell key={props.dataId} {...props} />;
-  };
-
-  const renderColumns = (columns: IReqoreTableColumn[]) =>
-    getOnlyShownColumns(columns).map(
+    const { targetRef } = useCombinedRefs(ref);
+
+    useMount(() => {
+      if (scrollable) {
+        targetRef.current?.addEventListener('wheel', (e) => {
+          if (e.deltaX) {
+            e.preventDefault();
+
+            targetRef.current?.scrollTo({ left: targetRef.current?.scrollLeft + e.deltaX });
+            bodyRef.current?.scrollTo({ left: bodyRef.current?.scrollLeft + e.deltaX });
+          }
+        });
+      }
+    });
+
+    const renderHeaderCell = useCallback(
       (
-        {
-          grow,
-          align,
-          dataId,
-          header: { columns, onClick, component: headerComponent, ...rest },
-          ...colRest
-        },
-        index
-      ) =>
-        columns ? (
-          <StyledColumnGroup
-            grow={grow}
-            key={index}
-            className='reqore-table-column-group'
-            width={getOnlyShownColumns(columns).reduce(
-              (wid, col) => wid + (col.resizedWidth || col.width || 80),
-              0
-            )}
-          >
-            {renderHeaderCell(headerComponent, {
+        headerCellComponent: IReqoreCustomHeaderCellComponent,
+        props: IReqoreCustomHeaderCellProps
+      ) => {
+        const HeaderCell = headerCellComponent || component || ReqoreTableHeaderCell;
+
+        return <HeaderCell key={props.dataId} {...props} />;
+      },
+      [component]
+    );
+
+    const renderColumns = (columns: IReqoreTableColumn[]) =>
+      getOnlyShownColumns(columns).map(
+        (
+          {
+            grow,
+            align,
+            dataId,
+            header: { columns, onClick, component: headerComponent, ...rest },
+            ...colRest
+          },
+          index
+        ) =>
+          columns ? (
+            <StyledColumnGroup
+              grow={getOnlyShownColumns(columns).reduce((gr, col) => gr + col.grow, 0)}
+              key={index}
+              className='reqore-table-column-group'
+              width={getOnlyShownColumns(columns).reduce(
+                (wid, col) => wid + (col.resizedWidth || col.width || 80),
+                0
+              )}
+              maxWidth={getOnlyShownColumns(columns).reduce((wid, col) => wid + col.maxWidth, 0)}
+              minWidth={getOnlyShownColumns(columns).reduce((wid, col) => wid + col.minWidth, 0)}
+            >
+              {renderHeaderCell(headerComponent, {
+                ...rest,
+                ...omit(colRest, ['cell']),
+                dataId,
+                size,
+                readOnly: !onClick,
+                onClick,
+                rounded: false,
+                textAlign: align,
+                className: 'reqore-table-column-group-header',
+                resizable: false,
+                hideable: false,
+                hasColumns: true,
+              })}
+              <StyledColumnGroupHeaders className='reqore-table-headers'>
+                {renderColumns(columns)}
+              </StyledColumnGroupHeaders>
+            </StyledColumnGroup>
+          ) : (
+            renderHeaderCell(headerComponent, {
               ...rest,
               ...omit(colRest, ['cell']),
+              onClick,
               dataId,
               size,
-              readOnly: !onClick,
-              rounded: false,
-              textAlign: align,
-              className: 'reqore-table-column-group-header',
-              resizable: false,
-              hideable: false,
-              hasColumns: true,
-            })}
-            <StyledColumnGroupHeaders className='reqore-table-headers'>
-              {renderColumns(columns)}
-            </StyledColumnGroupHeaders>
-          </StyledColumnGroup>
-        ) : (
-          renderHeaderCell(headerComponent, {
-            ...rest,
-            ...omit(colRest, ['cell']),
-            dataId,
-            size,
-            sortData,
-            grow,
-            align,
-            onSortChange,
-            onColumnsUpdate,
-            onFilterChange,
-          })
-        )
-    );
-
-  const getSelectedIcon = (): IReqoreIconName => {
-    switch (selectedQuant) {
-      case 'all':
-        return 'CheckboxCircleLine';
-      case 'some':
-        return 'IndeterminateCircleLine';
-      default:
-        return 'CheckboxBlankCircleLine';
-    }
-  };
-
-  return (
-    <StyledTableHeaderWrapper
-      className='reqore-table-header-wrapper'
-      hasVerticalScroll={hasVerticalScroll}
-    >
-      <StyledTableHeaderRow
-        style={{
-          transform: `translate3d(${leftScroll ? -leftScroll : 0}px, 0, 0)`,
-        }}
+              sortData,
+              grow,
+              align,
+              onSortChange,
+              onColumnsUpdate,
+              onFilterChange,
+            })
+          )
+      );
+
+    return (
+      <StyledTableHeaderWrapper
+        className='reqore-table-header-wrapper'
+        hasVerticalScroll={hasVerticalScroll}
+        heightAsGroup={heightAsGroup}
+        size={size}
+        ref={targetRef}
       >
-        {selectable &&
-          renderHeaderCell(component, {
-            dataId: 'selectbox',
-            sortData,
-            align: 'center',
-            size,
-            onSortChange,
-            icon: getSelectedIcon(),
-            width: calculateMinimumCellWidth(50, size),
-            resizable: false,
-            hideable: false,
-            tooltip: selectToggleTooltip || 'Toggle selection on all data',
-            onClick: () => {
-              onToggleSelectClick();
-            },
-          })}
-        {renderColumns(columns)}
-      </StyledTableHeaderRow>
-    </StyledTableHeaderWrapper>
-  );
-};
+        <StyledTableHeaderRow>{renderColumns(columns)}</StyledTableHeaderRow>
+      </StyledTableHeaderWrapper>
+    );
+  }
+);
 
 export default ReqoreTableHeader;