@onewelcome/react-lib-components 0.1.7-alpha → 0.1.8-alpha

package/src/DataGrid/DataGridHeader/DataGridHeader.tsx

@@ -0,0 +1,80 @@
+import React, { ComponentPropsWithRef, useEffect, useState } from 'react';
+import { ColumnName, Direction, HeaderCell, OnSortFunction, Sort } from '../datagrid.interfaces';
+import { DataGridHeaderCell } from './DataGridHeaderCell';
+import classes from './DataGridHeader.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'thead'> {
+  headers: HeaderCell[];
+  initialSort?: Sort;
+  onSort?: OnSortFunction;
+  disableContextMenuColumn?: boolean;
+  enableMultiSorting?: boolean;
+}
+
+const sortingStates = [undefined, 'ASC', 'DESC'] as (Direction | undefined)[];
+
+export const DataGridHeader = React.forwardRef<HTMLTableSectionElement, Props>(
+  (
+    { initialSort, onSort, headers, disableContextMenuColumn, enableMultiSorting, ...rest }: Props,
+    ref
+  ) => {
+    const [sortList, setSortList] = useState(initialSort || []);
+
+    useEffect(() => {
+      setSortList(initialSort || []);
+    }, [initialSort]);
+
+    const calculateNextSortState = (direction?: Direction) => {
+      const currentDirectionIdx = sortingStates.findIndex((item) => item === direction);
+      return sortingStates[currentDirectionIdx + (1 % sortingStates.length)];
+    };
+
+    /**
+     * The sortList contains sorting columns objects. The order of those objects determinates priorities of sorting.
+     * Last modified sorting column has the highest priority.
+     */
+    const updateSortList = (name: ColumnName): Sort => {
+      const current = sortList.find((item) => item.name === name);
+      const restSortList = enableMultiSorting ? sortList.filter((item) => item.name !== name) : [];
+      const newSortDirection = calculateNextSortState(current?.direction);
+      return newSortDirection
+        ? [{ name, direction: newSortDirection }, ...restSortList]
+        : restSortList;
+    };
+
+    const wrapOnSort = (name: ColumnName) => {
+      const newSort = updateSortList(name);
+      onSort && onSort(newSort);
+      setSortList(newSort);
+    };
+
+    const headerCells = headers.map((header) => {
+      if (header.hidden) {
+        return null;
+      }
+
+      const sort = sortList.find((item) => item.name === header.name);
+      return (
+        <DataGridHeaderCell
+          key={header.name}
+          name={header.name}
+          headline={header.headline}
+          disableSorting={header.disableSorting || !onSort}
+          onSort={wrapOnSort}
+          activeSortDirection={sort?.direction}
+        />
+      );
+    });
+
+    return (
+      <thead {...rest} ref={ref} className={classes['thead']}>
+        <tr className={classes['row']}>
+          {headerCells}
+          {!disableContextMenuColumn && (
+            <td aria-label="context menu" className={classes['context-menu']}></td>
+          )}
+        </tr>
+      </thead>
+    );
+  }
+);

package/src/DataGrid/DataGridHeader/DataGridHeaderCell.module.scss

@@ -0,0 +1,68 @@
+.header-cell {
+  font-weight: normal;
+  text-align: left;
+  padding: 0 0.625rem;
+
+  &:first-child {
+    padding-left: 1rem;
+  }
+
+  &:last-child {
+    padding-right: 1rem;
+  }
+
+  & > * {
+    display: inline-flex;
+  }
+
+  & > button {
+    padding: 0;
+    margin: 0;
+    border: 0;
+    background: none;
+    cursor: pointer;
+  }
+}
+
+.headline {
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  line-height: 1.5;
+  font-weight: 700;
+  color: var(--default);
+}
+
+.sorting-indicator-container {
+  display: flex;
+  flex-direction: column;
+  padding-left: 0.5rem;
+  justify-content: center;
+
+  & > * {
+    font-size: 0.625rem;
+  }
+
+  .indicator {
+    color: var(--greyed-out);
+
+    &.active {
+      color: var(--color-primary);
+    }
+
+    &.hidden {
+      visibility: hidden;
+    }
+  }
+}
+
+@media only screen and (min-width: 50em) {
+  .header-cell {
+    &:first-child {
+      padding-left: 1.25rem;
+    }
+
+    &:last-child {
+      padding-right: 1.25rem;
+    }
+  }
+}

package/src/DataGrid/DataGridHeader/DataGridHeaderCell.test.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useRef } from 'react';
+import { DataGridHeaderCell, Props } from './DataGridHeaderCell';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+const defaultParams: Props = { name: 'name-123', headline: 'Test' };
+
+const createDataGridHeaderCell = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const container = document.createElement('tr');
+  const queries = render(<DataGridHeaderCell {...parameters} data-testid="dataGridHeaderCell" />, {
+    container,
+  });
+  const dataGridHeaderCell = queries.getByTestId('dataGridHeaderCell');
+
+  return {
+    ...queries,
+    dataGridHeaderCell,
+  };
+};
+
+describe('DataGridHeaderCell should render', () => {
+  it('renders without crashing', () => {
+    const { dataGridHeaderCell, queryByRole } = createDataGridHeaderCell();
+
+    expect(dataGridHeaderCell).toBeDefined();
+    expect(dataGridHeaderCell).toHaveTextContent(defaultParams.headline);
+    expect(queryByRole('button')).toBeDefined();
+    expect(dataGridHeaderCell.querySelectorAll('[data-icon]')).toHaveLength(2);
+  });
+
+  it('renders without sorting indicators (icons)', () => {
+    const { dataGridHeaderCell } = createDataGridHeaderCell((params) => ({
+      ...params,
+      disableSorting: true,
+    }));
+
+    expect(dataGridHeaderCell.querySelector('[data-icon]')).toBeNull();
+  });
+
+  it('renders DESC and ASC sorting indicators (icons) when sorting is enabled and current sorting is not defined', () => {
+    const { dataGridHeaderCell } = createDataGridHeaderCell();
+
+    expect(dataGridHeaderCell).toBeDefined();
+    const sortingIcons = dataGridHeaderCell.querySelectorAll('[data-icon]');
+    expect(sortingIcons).toHaveLength(2);
+    sortingIcons.forEach((icon) => {
+      expect(icon).toHaveClass('indicator');
+      expect(icon).not.toHaveClass('active');
+      expect(icon).not.toHaveClass('hidden');
+    });
+  });
+
+  it('renders ASC sorting indicator (icon) when sorting is enabled and current sorting is ASC', () => {
+    const { dataGridHeaderCell } = createDataGridHeaderCell((params) => ({
+      ...params,
+      activeSortDirection: 'ASC',
+    }));
+
+    expect(dataGridHeaderCell).toBeDefined();
+    const sortingIcons = dataGridHeaderCell.querySelectorAll('[data-icon]');
+    expect(sortingIcons).toHaveLength(2);
+    sortingIcons.forEach((icon) => expect(icon).toHaveClass('indicator'));
+    expect(sortingIcons[0]).toHaveClass('indicator', 'active', 'icon-triangle-up');
+    expect(sortingIcons[0]).not.toHaveClass('hidden');
+    expect(sortingIcons[1]).toHaveClass('indicator', 'hidden', 'icon-triangle-down');
+    expect(sortingIcons[1]).not.toHaveClass('active');
+  });
+});
+
+it('renders DESC sorting indicator (icon) when sorting is enabled and current sorting is DESC', () => {
+  const { dataGridHeaderCell } = createDataGridHeaderCell((params) => ({
+    ...params,
+    activeSortDirection: 'DESC',
+  }));
+
+  expect(dataGridHeaderCell).toBeDefined();
+  const sortingIcons = dataGridHeaderCell.querySelectorAll('[data-icon]');
+  expect(sortingIcons).toHaveLength(2);
+  sortingIcons.forEach((icon) => expect(icon).toHaveClass('indicator'));
+  expect(sortingIcons[0]).toHaveClass('indicator', 'hidden', 'icon-triangle-up');
+  expect(sortingIcons[0]).not.toHaveClass('active');
+  expect(sortingIcons[1]).toHaveClass('indicator', 'active', 'icon-triangle-down');
+  expect(sortingIcons[1]).not.toHaveClass('hidden');
+});
+
+describe('DataGridHeaderCell should be interactive', () => {
+  it('clicking on cell calls onSort callback', () => {
+    const onSortHandler = jest.fn();
+    const { getByRole } = createDataGridHeaderCell((params) => ({
+      ...params,
+      disableSorting: false,
+      onSort: onSortHandler,
+    }));
+
+    userEvent.click(getByRole('button'));
+
+    expect(onSortHandler).toBeCalledWith(defaultParams.name);
+  });
+});
+
+describe('ref should work', () => {
+  it('should give back the proper data prop, this also checks if the component propagates ...rest properly', () => {
+    const ExampleComponent = ({
+      propagateRef,
+    }: {
+      propagateRef: (ref: React.RefObject<HTMLElement>) => void;
+    }) => {
+      const ref = useRef(null);
+
+      useEffect(() => {
+        propagateRef(ref);
+      }, [ref]);
+
+      return <DataGridHeaderCell {...defaultParams} data-ref="testing" ref={ref} />;
+    };
+
+    const refCheck = (ref: React.RefObject<HTMLElement>) => {
+      expect(ref.current).toHaveAttribute('data-ref', 'testing');
+    };
+
+    const container = document.createElement('tr');
+    render(<ExampleComponent propagateRef={refCheck} />, { container });
+  });
+});

package/src/DataGrid/DataGridHeader/DataGridHeaderCell.tsx

@@ -0,0 +1,72 @@
+import React, { ComponentPropsWithRef, Fragment } from 'react';
+import { Icon, Icons } from '../../Icon/Icon';
+import { ColumnName, Direction } from '../datagrid.interfaces';
+import classes from './DataGridHeaderCell.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'th'> {
+  headline: string;
+  name: ColumnName;
+  disableSorting?: boolean;
+  activeSortDirection?: Direction;
+  onSort?: (name: ColumnName) => void;
+}
+
+const ariaSortMapping = {
+  ASC: 'ascending',
+  DESC: 'descending',
+} as const;
+
+export const DataGridHeaderCell = React.forwardRef<HTMLTableCellElement, Props>(
+  ({ headline, name, disableSorting, activeSortDirection, onSort, ...rest }: Props, ref) => {
+    const onCellClick = () => {
+      onSort && onSort(name);
+    };
+
+    const sortingIndicator = () => {
+      const getSortingIndicatorClasses = (direction: Direction) => {
+        const sortingIndicatorClasses = [classes['indicator']];
+        activeSortDirection &&
+          sortingIndicatorClasses.push(
+            activeSortDirection === direction ? classes['active'] : classes['hidden']
+          );
+        return sortingIndicatorClasses;
+      };
+
+      return (
+        <Fragment>
+          <Icon className={getSortingIndicatorClasses('ASC').join(' ')} icon={Icons.TriangleUp} />
+          <Icon
+            className={getSortingIndicatorClasses('DESC').join(' ')}
+            icon={Icons.TriangleDown}
+          />
+        </Fragment>
+      );
+    };
+
+    const innerContent = (
+      <Fragment>
+        <span className={classes['headline']}>{headline}</span>
+        {!disableSorting && (
+          <div className={classes['sorting-indicator-container']}>{sortingIndicator()}</div>
+        )}
+      </Fragment>
+    );
+
+    return (
+      <th
+        {...rest}
+        ref={ref}
+        className={classes['header-cell']}
+        aria-sort={activeSortDirection && ariaSortMapping[activeSortDirection]}
+      >
+        {disableSorting ? (
+          <div key={name}>{innerContent}</div>
+        ) : (
+          <button key={name} onClick={onCellClick}>
+            {innerContent}
+          </button>
+        )}
+      </th>
+    );
+  }
+);

package/src/DataGrid/datagrid.interfaces.ts

@@ -0,0 +1,14 @@
+export type ColumnName = string;
+export type Direction = 'ASC' | 'DESC';
+export type Sort = {
+  name: ColumnName;
+  direction: Direction;
+}[];
+export type OnSortFunction = (sort: Sort) => void;
+
+export interface HeaderCell {
+  name: ColumnName;
+  headline: string;
+  disableSorting?: boolean;
+  hidden?: boolean;
+}

package/src/Form/Select/Option.tsx

@@ -1,14 +1,19 @@
-import React, { ComponentPropsWithRef, useEffect, useState } from 'react';
+import React, { ComponentPropsWithRef, createRef, RefObject, useEffect } from 'react';
 import classes from './Select.module.scss';
 
 export interface Props extends ComponentPropsWithRef<'li'> {
   children: string;
   value: string;
   disabled?: boolean;
-  selected?: boolean;
+  isSelected?: boolean;
+  selectOpened?: boolean;
+  hasFocus?: boolean;
+  shouldClick?: boolean;
+  isSearching?: boolean;
   label?: string;
-  filter?: string;
-  onOptionSelect?: (event: React.SyntheticEvent<HTMLLIElement>) => void;
+  childIndex?: number;
+  onOptionSelect?: (ref: React.RefObject<HTMLLIElement>) => void;
+  onFocusChange?: (childIndex: number) => void;
 }
 
 export const Option = React.forwardRef<HTMLLIElement, Props>(
@@ -16,44 +21,57 @@ export const Option = React.forwardRef<HTMLLIElement, Props>(
     {
       children,
       className,
-      selected = false,
+      isSelected = false,
+      shouldClick,
+      hasFocus,
+      selectOpened,
+      isSearching,
+      childIndex,
       onOptionSelect,
+      onFocusChange,
       disabled,
-      filter,
       value,
       ...rest
     }: Props,
     ref
   ) => {
-    const [showOption, setShowOption] = useState(true);
+    let innerOptionRef = (ref as RefObject<HTMLLIElement>) || createRef<HTMLLIElement>();
 
-    const onSelectHandler = (event: React.SyntheticEvent<HTMLLIElement>) => {
-      if (onOptionSelect) onOptionSelect(event);
-    };
+    useEffect(() => {
+      if (isSelected && innerOptionRef.current && shouldClick) {
+        innerOptionRef.current.click();
+      }
+    }, [isSelected, shouldClick]);
 
     useEffect(() => {
-      if (filter) {
-        setShowOption(children.toLowerCase().match(filter.toLowerCase()) !== null);
-      } else {
-        setShowOption(true);
+      if (innerOptionRef.current && hasFocus && selectOpened && !isSearching) {
+        onFocusChange && childIndex && onFocusChange(childIndex);
+        innerOptionRef.current.focus();
       }
-    }, [filter]);
+    }, [hasFocus, innerOptionRef, selectOpened, isSearching]);
 
-    if (!showOption) return null;
+    const onSelectHandler = () => {
+      if (onOptionSelect) onOptionSelect(innerOptionRef);
+    };
 
     return (
       <li
         {...rest}
-        ref={ref}
+        ref={innerOptionRef}
         data-value={value}
-        className={`${selected ? classes['selected-option'] : ''} ${
+        className={`${isSelected ? classes['selected-option'] : ''} ${
           disabled ? classes.disabled : ''
         } ${className ?? ''}`}
         onClick={onSelectHandler}
-        onKeyPress={(e) => {
-          e.key === 'Enter' && onSelectHandler(e);
+        onKeyDownCapture={(event) => {
+          if (event.code === 'Enter') {
+            event.stopPropagation();
+            event.preventDefault();
+
+            onSelectHandler();
+          }
         }}
-        aria-selected={selected}
+        aria-selected={isSelected}
         role="option"
         tabIndex={disabled ? -1 : 0}
       >

package/src/Form/Select/Select.module.scss

@@ -37,7 +37,7 @@ $listItemHeight: 2.125rem;
     border-color: var(--default);
   }
 
-  button {
+  .custom-select {
     width: 100%;
     min-height: 4rem;
     background-color: transparent;