@orfium/ictinus 5.43.7 → 5.43.8

package/src/components/TableV4/TableV4.test.tsx

@@ -1,232 +0,0 @@
-import { waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { fireEvent, render, screen, within } from 'test';
-import { vi } from 'vitest';
-import TableV4 from './TableV4';
-
-const tooltip = {
-  content: 'Tooltip Content',
-};
-
-describe('TableV4', () => {
-  const data = new Array(50).fill(null).map((item, index) => ({
-    id: index + 1,
-    cells: [
-      { content: 'title', widthPercentage: 40 },
-      { content: 'firstname' },
-      { content: 'lastname' },
-      { content: 4.221 },
-    ],
-    // eslint-disable-next-line react/display-name
-    expanded: () => <div>Hey i am an expandable content</div>,
-  }));
-
-  test('the expandable table that shows the content when clicking', async () => {
-    const { getAllByText, findByText } = render(
-      <TableV4
-        columns={['Title', 'Name', 'Surname', 'Age']}
-        type="nested-header"
-        isPadded
-        data={data}
-      />
-    );
-
-    // check nested table data are rendered by checking row header
-    expect(getAllByText('Title').length).toBe(data.length);
-
-    const row = getAllByText('Title')[0].closest('tr') as HTMLElement;
-    const rowUtils = within(row);
-    const expandedButton = await rowUtils.findByTestId('icon-button-expanded-button');
-
-    fireEvent.click(expandedButton);
-
-    const content = await findByText('Hey i am an expandable content');
-
-    expect(content).toBeTruthy();
-  });
-
-  test('that the onCheck returns the selected rows back when a row is selected', async () => {
-    const onCheck = vi.fn();
-    const { getAllByText } = render(
-      <TableV4
-        columns={['Title', 'Name', 'Surname', 'Age']}
-        type="nested-header"
-        onCheck={onCheck}
-        data={data}
-      />
-    );
-
-    const row = getAllByText('Title')[0].closest('tr') as HTMLElement;
-    const rowUtils = within(row);
-    const checkbox = await rowUtils.findAllByTestId('row-check_checkbox');
-
-    await userEvent.click(checkbox[0]);
-
-    expect(onCheck).toHaveBeenCalledTimes(1);
-    expect(onCheck).toHaveBeenCalledWith([data[0].id]);
-  });
-
-  test('that the onCheck on top of the table returns the selected rows back when all are selected', async () => {
-    const onCheck = vi.fn();
-    const topLeftText = 'topLeftText';
-    const { getByText } = render(
-      <TableV4
-        columns={['Title', 'Name', 'Surname', 'Age']}
-        type="nested-header"
-        onCheck={onCheck}
-        data={data}
-        topLeftText={topLeftText}
-      />
-    );
-
-    const row = getByText(topLeftText).closest('tr') as HTMLElement;
-    const rowUtils = within(row);
-    const checkbox = await rowUtils.findAllByTestId('ictinus_checkbox');
-
-    await userEvent.click(checkbox[0]);
-
-    expect(onCheck).toHaveBeenCalledTimes(1);
-    expect(onCheck).toHaveBeenCalledWith(data.map(({ id }) => id));
-  });
-
-  test('that the header contains sorting and tooltip icons', () => {
-    const onSort = vi.fn();
-
-    render(
-      <TableV4
-        columns={[
-          {
-            content: {
-              label: 'Title',
-              sortingKey: 'title',
-            },
-            isSortable: true,
-          },
-          'Name',
-          {
-            content: {
-              label: 'Surname',
-              sortingKey: 'surname',
-            },
-            tooltip,
-          },
-          'Age',
-        ]}
-        initialSort={{ column: 'title', order: 'asc' }}
-        onSort={onSort}
-        data={data}
-      />
-    );
-
-    const titleHeader = screen.getByTestId('header_title');
-    const surnameHeader = screen.getByTestId('header_surname');
-
-    expect(within(titleHeader).getByTestId('table_icon_sort_title_asc')).toBeInTheDocument();
-
-    expect(within(surnameHeader).getByTestId('table_icon_tooltip_surname')).toBeInTheDocument();
-  });
-
-  test('that onSort is called with correct parameters', async () => {
-    const onSort = vi.fn();
-
-    render(
-      <TableV4
-        columns={[
-          {
-            content: {
-              label: 'Title',
-              sortingKey: 'title',
-            },
-            isSortable: true,
-          },
-          'Name',
-          'Surname',
-          'Age',
-        ]}
-        initialSort={{ column: 'title', order: 'asc' }}
-        onSort={onSort}
-        data={data}
-      />
-    );
-
-    await userEvent.click(screen.getByTestId('header_title'));
-
-    expect(onSort).toHaveBeenLastCalledWith('title', 'desc');
-  });
-
-  test('that the tooltip is showed when hovering over the icon', async () => {
-    render(
-      <TableV4
-        columns={[
-          {
-            content: {
-              label: 'Title',
-              sortingKey: 'title',
-            },
-            tooltip,
-          },
-          'Name',
-          'Surname',
-          'Age',
-        ]}
-        data={data}
-      />
-    );
-
-    const tooltipIcon = screen.getByTestId('table_icon_tooltip_title');
-
-    await userEvent.hover(tooltipIcon);
-
-    await waitFor(() => {
-      expect(screen.getByText(tooltip.content)).toBeInTheDocument();
-    });
-  });
-
-  test('that the order of the icons is correct when column is numerical', async () => {
-    const onSort = vi.fn();
-
-    render(
-      <TableV4
-        columns={[
-          {
-            content: {
-              label: 'Title',
-              sortingKey: 'title',
-            },
-            isSortable: true,
-            tooltip,
-          },
-          'Name',
-          'Surname',
-          {
-            content: {
-              label: 'Age',
-              sortingKey: 'age',
-            },
-            isSortable: true,
-            tooltip,
-          },
-        ]}
-        initialSort={{ column: 'title', order: 'asc' }}
-        onSort={onSort}
-        data={data}
-      />
-    );
-
-    const titleElements = within(screen.getByTestId('header_title')).queryAllByTestId(
-      new RegExp('table_icon')
-    );
-
-    expect(titleElements[0]).toStrictEqual(screen.getByTestId('table_icon_tooltip_title'));
-    expect(titleElements[1]).toStrictEqual(screen.getByTestId('table_icon_sort_title_asc'));
-
-    const headerAge = screen.getByTestId('header_age');
-
-    await userEvent.click(headerAge);
-
-    const ageElements = within(headerAge).queryAllByTestId(new RegExp('table_icon'));
-
-    expect(ageElements[0]).toStrictEqual(screen.getByTestId('table_icon_sort_age_asc'));
-    expect(ageElements[1]).toStrictEqual(screen.getByTestId('table_icon_tooltip_age'));
-  });
-});

package/src/components/TableV4/TableV4.tsx

@@ -1,294 +0,0 @@
-import useBreakpoints from 'hooks/useBreakpoints';
-import { head } from 'lodash-es';
-import pluralize from 'pluralize';
-import React, { memo, useEffect, useState } from 'react';
-import isEqual from 'react-fast-compare';
-
-import ExtendedColumnItem from './components/ExtendedColumnItem';
-import TableCell from './components/TableCell';
-import TableRow from './components/TableRow';
-import TableRowWrapper from './components/TableRowWrapper';
-import { tableCTAStyle, tableRowHeadersStyle, tableStyle } from './TableV4.style';
-import type { ExtendedColumn, Sort, TablePropsV4, Selection } from './types';
-import { isItemString } from './utils';
-import { CheckBox } from '../Controls';
-
-const getColumnCount = (
-  columns: (string | ExtendedColumn)[],
-  onCheck: ((data: Selection[]) => void) | undefined,
-  hasExpandableRows: boolean
-) => {
-  if (!onCheck && !hasExpandableRows) {
-    return columns.length;
-  }
-  if (Boolean(onCheck) && hasExpandableRows) {
-    return columns.length + 2;
-  }
-
-  return columns.length + 1;
-};
-
-function TableV4<T>({
-  data,
-  columns,
-  type = 'normal',
-  hasFixedHeader = false,
-  hasFixedCTA = false,
-  onCheck,
-  isPadded = false,
-  onSort,
-  initialSort = { column: '', order: 'desc' },
-  sortDir,
-  topLeftText,
-  topRightArea,
-  actionWidth,
-  isInitiallyExpanded = false,
-  dataTestIdPrefix,
-}: TablePropsV4<T>) {
-  const breakpoints = useBreakpoints();
-  const actionCellWidth = actionWidth ? `${actionWidth}%` : breakpoints.des1920 ? '5%' : '7%';
-
-  const [selectedIds, setSelectedIds] = useState<Selection[] | undefined>(undefined);
-
-  const [sorting, setSorting] = useState<Sort>(initialSort);
-
-  const hasExpandableRows = data.some((row) => Boolean(row.expanded));
-
-  const columnCount = getColumnCount(columns, onCheck, hasExpandableRows);
-
-  /** when the selection of ids change then inform the user if onCheck callback provided **/
-  useEffect(() => {
-    if (onCheck && selectedIds) {
-      onCheck(selectedIds);
-    }
-  }, [onCheck, selectedIds]);
-
-  useEffect(() => {
-    // when data are fresh initialize the selectedIds state
-    setSelectedIds(undefined);
-  }, [data]);
-
-  const onSelectionAdd = React.useCallback((rowId: Selection) => {
-    setSelectedIds((selectedIds: Selection[] = []) =>
-      selectedIds.indexOf(rowId) === -1
-        ? [...selectedIds, rowId]
-        : selectedIds.filter((item) => item !== rowId)
-    );
-  }, []);
-
-  const columnsHasNumberArr = React.useMemo(
-    () =>
-      head(data)?.cells?.map(({ content }) => {
-        return !Number.isNaN(Number(content));
-      }) || [],
-    [data]
-  );
-
-  const columnsHasCustomAlignment = React.useMemo(
-    () =>
-      head(data)?.cells?.map(({ align }) => {
-        return align;
-      }) || [],
-    [data]
-  );
-
-  const columnsWithWidth = React.useMemo(
-    () =>
-      head(data)?.cells?.map(({ widthPercentage }) => {
-        return widthPercentage;
-      }) || [],
-    [data]
-  );
-
-  const handleSorting = (column: string) => {
-    setSorting((prevState) => {
-      if (sortDir) {
-        onSort?.(column, sortDir);
-
-        return {
-          column,
-          order: sortDir,
-        };
-      }
-
-      if (prevState.column !== column) {
-        onSort?.(column, 'asc');
-
-        return {
-          column,
-          order: 'asc',
-        };
-      }
-
-      onSort?.(column, prevState.order === 'asc' ? 'desc' : 'asc');
-
-      return {
-        column,
-        order: prevState.order === 'asc' ? 'desc' : 'asc',
-      };
-    });
-  };
-
-  return (
-    <React.Fragment>
-      {(onCheck || topRightArea || topLeftText) && (
-        <table css={tableCTAStyle(hasFixedCTA)}>
-          <thead>
-            <TableRow>
-              {onCheck && (
-                <TableCell
-                  component="th"
-                  width={50}
-                  isPadded={isPadded}
-                  dataTestIdPrefix={dataTestIdPrefix}
-                  rowIndex={0}
-                  index={0}
-                >
-                  <CheckBox
-                    isSelected={Boolean(selectedIds && selectedIds.length > 0)}
-                    isIndeterminate={
-                      selectedIds && selectedIds.length > 0 && selectedIds?.length !== data.length
-                    }
-                    onChange={() => {
-                      if (selectedIds?.length === data.length) {
-                        setSelectedIds([]);
-                      } else {
-                        setSelectedIds(data.map(({ id }) => id));
-                      }
-                    }}
-                  />
-                </TableCell>
-              )}
-              <TableCell
-                isPadded={isPadded}
-                dataTestIdPrefix={dataTestIdPrefix}
-                rowIndex={0}
-                index={1}
-              >
-                {selectedIds && selectedIds?.length > 0 ? (
-                  <span>
-                    <b>{selectedIds.length}</b> {pluralize('item', selectedIds.length)} selected
-                  </span>
-                ) : (
-                  topLeftText
-                )}
-              </TableCell>
-              {topRightArea && (
-                <TableCell
-                  textAlign="right"
-                  isPadded={isPadded}
-                  colSpan={columnCount - (onCheck ? 2 : 1)}
-                  dataTestIdPrefix={dataTestIdPrefix}
-                  rowIndex={0}
-                  index={2}
-                >
-                  {topRightArea(data, selectedIds)}
-                </TableCell>
-              )}
-            </TableRow>
-          </thead>
-        </table>
-      )}
-
-      <table css={tableStyle()}>
-        {(onCheck || topRightArea || type === 'normal') && (
-          <thead>
-            {type === 'normal' && (
-              <TableRow
-                css={tableRowHeadersStyle(hasExpandableRows, Boolean(onCheck), hasFixedHeader)}
-              >
-                {onCheck && (
-                  <TableCell
-                    component="th"
-                    isPaddedSticky={hasFixedCTA}
-                    isSticky={hasFixedHeader}
-                    width={50}
-                    isPadded={isPadded}
-                    dataTestIdPrefix={dataTestIdPrefix}
-                  />
-                )}
-                {columns.map((item: string | ExtendedColumn, index: number) => {
-                  return (
-                    <TableCell
-                      textAlign={
-                        columnsHasCustomAlignment && columnsHasCustomAlignment[index]
-                          ? columnsHasCustomAlignment[index]
-                          : columnsHasNumberArr && columnsHasNumberArr[index]
-                          ? 'right'
-                          : 'left'
-                      }
-                      component="th"
-                      key={`${isItemString(item) ? item : item.content.sortingKey}`}
-                      isSticky={hasFixedHeader}
-                      isPaddedSticky={hasFixedCTA}
-                      isPadded={isPadded}
-                      width={columnsWithWidth[index] ? `${columnsWithWidth[index]}%` : 'initial'}
-                      isSortable={!isItemString(item) && item.isSortable}
-                      isActive={!isItemString(item) && item.content.sortingKey === sorting.column}
-                      onClick={() => {
-                        if (!isItemString(item) && item.isSortable) {
-                          handleSorting(item.content.sortingKey);
-                        }
-                      }}
-                      dataTestIdPrefix={`${dataTestIdPrefix}_${
-                        !isItemString(item)
-                          ? item.content.sortingKey.trim().toLowerCase().replace(/ /g, '_')
-                          : item.trim().toLowerCase().replace(/ /g, '_')
-                      }`}
-                    >
-                      {isItemString(item) ? (
-                        <ExtendedColumnItem item={item} />
-                      ) : (
-                        <ExtendedColumnItem
-                          sorting={sorting}
-                          isNumerical={columnsHasNumberArr && columnsHasNumberArr[index]}
-                          item={item}
-                        />
-                      )}
-                    </TableCell>
-                  );
-                })}
-                {hasExpandableRows && (
-                  <TableCell
-                    component="th"
-                    isSticky={hasFixedHeader}
-                    isPaddedSticky={hasFixedCTA}
-                    width={actionCellWidth}
-                    dataTestIdPrefix={dataTestIdPrefix}
-                  />
-                )}
-              </TableRow>
-            )}
-          </thead>
-        )}
-        <tbody>
-          {data.map((row, index) => (
-            // @ts-expect-error - this is a test component
-            <TableRowWrapper<T>
-              key={row.id}
-              {...{
-                row,
-                isRowSelected: selectedIds ? selectedIds.indexOf(row.id) !== -1 : false,
-                onSelectionAdd,
-                isPadded,
-                columns,
-                hasFixedHeader: hasFixedHeader,
-                type,
-                columnCount,
-                columnsWithWidth,
-                hasOnSelectionChange: Boolean(onCheck),
-                isExpanded: Boolean(row.expanded),
-                actionWidth: actionWidth,
-                isInitiallyExpanded,
-              }}
-              dataTestIdPrefix={dataTestIdPrefix}
-              rowIndex={index + 1}
-            />
-          ))}
-        </tbody>
-      </table>
-    </React.Fragment>
-  );
-}
-
-export default memo(TableV4, isEqual);

package/src/components/TableV4/components/ExtendedColumnItem/ExtendedColumnItem.style.tsx

@@ -1,15 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { rem, vars } from '@orfium/tokens';
-import { flexCenterVertical } from 'theme/functions';
-
-export const containerStyles = (gap: string) => (): SerializedStyles => css`
-  ${flexCenterVertical};
-  display: inline-flex;
-  gap: ${rem(`${gap}px`)};
-`;
-
-export const contentStyles = (): SerializedStyles => css`
-  font-weight: ${vars.weight.medium};
-  color: ${vars.color.text.default.secondary};
-`;

package/src/components/TableV4/components/ExtendedColumnItem/ExtendedColumnItem.tsx

@@ -1,99 +0,0 @@
-import React from 'react';
-
-import { vars } from '@orfium/tokens';
-import Icon from 'components/Icon';
-import Tooltip from 'components/Tooltip';
-import type { ExtendedColumn, Sort } from '../../types';
-import { hasTooltipOrSortingKey, isItemString } from '../../utils';
-import { containerStyles, contentStyles } from './ExtendedColumnItem.style';
-
-export type ExtendedColumnItemProps = {
-  item: ExtendedColumn | string;
-  isNumerical?: boolean;
-  sorting?: Sort;
-};
-
-const ExtendedColumnItem: React.FCC<ExtendedColumnItemProps> = ({ item, sorting, isNumerical }) => {
-  const itemContentLowerCase = !isItemString(item)
-    ? item.content.sortingKey.trim().toLowerCase().replace(/ /g, '_')
-    : item.trim().toLowerCase().replace(/ /g, '_');
-
-  const sortingItem = () =>
-    //TODO: Remove type check when backwards-compatibility is removed
-    !isItemString(item) &&
-    item?.isSortable &&
-    (item.content.sortingKey === sorting?.column ? (
-      <div
-        key={`table_icon_sort_${itemContentLowerCase}`}
-        css={{
-          transition: '0.3s all ease-in-out',
-          transformOrigin: 'center',
-          width: 'fit-content',
-          transform: `rotate(${sorting.order === 'asc' ? '180' : '0'}deg)`,
-        }}
-      >
-        <Icon
-          name="triangleDown"
-          dataTestId={`table_icon_sort_${itemContentLowerCase}_${
-            sorting.order === 'desc' ? 'desc' : 'asc'
-          }`}
-          color={vars.color.text.default.secondary}
-        />
-      </div>
-    ) : (
-      <div
-        key={`table_icon_sort_${itemContentLowerCase}`}
-        css={{
-          width: 'fit-content',
-        }}
-      >
-        <Icon
-          name="sort"
-          dataTestId={`table_icon_sort_${itemContentLowerCase}`}
-          color={vars.color.text.default.secondary}
-        />
-      </div>
-    ));
-
-  const tooltipItem = () =>
-    //TODO: Remove type check when backwards-compatibility is removed
-    !isItemString(item) &&
-    item?.tooltip?.content && (
-      <div
-        css={{
-          width: 'fit-content',
-        }}
-        key={`table_icon_tooltip_${itemContentLowerCase}`}
-      >
-        <Tooltip content={item?.tooltip?.content} placement={item?.tooltip.placement}>
-          <Icon
-            name="informational"
-            dataTestId={`table_icon_tooltip_${itemContentLowerCase}`}
-            color={vars.color.text.default.secondary}
-          />
-        </Tooltip>
-      </div>
-    );
-
-  const renderSortingAndTooltip = () =>
-    isNumerical ? [sortingItem(), tooltipItem()] : [tooltipItem(), sortingItem()];
-
-  //TODO: Remove type check when backwards-compatibility is removed
-  if (isItemString(item)) {
-    return <div css={contentStyles()}>{item}</div>;
-  }
-
-  if (!hasTooltipOrSortingKey(item)) {
-    return <div css={contentStyles()}>{item.content.label}</div>;
-  }
-
-  return (
-    <div data-testid={`header_${itemContentLowerCase}`} css={containerStyles('8')}>
-      <span css={contentStyles()}>{item.content.label}</span>
-
-      <div css={containerStyles('4')}>{renderSortingAndTooltip()}</div>
-    </div>
-  );
-};
-
-export default ExtendedColumnItem;

package/src/components/TableV4/components/ExtendedColumnItem/index.ts

@@ -1,2 +0,0 @@
-export { default } from './ExtendedColumnItem';
-export * from './ExtendedColumnItem';

package/src/components/TableV4/components/RenderRowOrNestedRow/RenderRowOrNestedRow.style.ts

@@ -1,41 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { rem } from 'polished';
-
-import { vars } from '@orfium/tokens';
-import { getBorderColor } from 'components/TableV4/utils';
-
-export const borderedRowStyle = ({
-  isBordered,
-  isCustomCell,
-}: {
-  isBordered: boolean;
-  isCustomCell?: boolean;
-}): SerializedStyles =>
-  css({
-    borderBottom: isBordered ? `${rem(1)} solid ${getBorderColor()}` : 'none',
-    'td:first-of-type': {
-      paddingLeft: vars.spacing['6'],
-    },
-
-    'td:last-child': {
-      paddingRight: isCustomCell ? 'inherit' : vars.spacing['6'],
-    },
-  });
-
-export const expandableRowStyle = ({
-  isFirstRow,
-  hasFixedHeader,
-}: {
-  isFirstRow: boolean;
-  hasFixedHeader: boolean;
-}): SerializedStyles =>
-  css({
-    flex: 1,
-    flexDirection: 'row',
-    display: 'flex',
-    borderTop:
-      //Adds border to the first row only if it doesn't have a fixed header
-      isFirstRow && !hasFixedHeader ? `${rem(1)} solid ${getBorderColor()}` : 'none',
-    borderBottom: `${rem(1)} solid ${getBorderColor()}`,
-  });