@orfium/ictinus 5.43.7 → 5.43.8

package/src/components/TableV4/components/RenderRowOrNestedRow/RenderRowOrNestedRow.tsx

@@ -1,178 +0,0 @@
-import useToggle from 'hooks/useToggle';
-import * as React from 'react';
-import { isComponentFunctionType } from 'utils/helpers';
-
-import ContentCell from './components/ContentCell';
-import ExpandedButtonCell from './components/ExpandedButtonCell';
-import { borderedRowStyle, expandableRowStyle } from './RenderRowOrNestedRow.style';
-import { CheckBox } from '../../../Controls';
-import { TableRowContext } from '../../TableRowContext';
-import type { Row } from '../../types';
-import { tableStyle } from '../../TableV4.style';
-import TableCell from '../TableCell';
-import TableRow from '../TableRow';
-
-const RenderRowWithCells = React.memo(
-  ({
-    isChecked = false,
-    toggleIsChecked = () => {},
-    dataTestIdPrefix,
-    rowIndex,
-  }: {
-    isChecked?: boolean;
-    toggleIsChecked?: () => void;
-    dataTestIdPrefix?: string;
-    rowIndex?: number;
-  }) => {
-    const {
-      columnsWithWidth,
-      hasOnSelectionChange,
-      isPadded,
-      columns,
-      tChange,
-      row,
-      type,
-      isRowSelected,
-      isBordered,
-      actionWidth,
-    } = React.useContext(TableRowContext);
-    const { expanded } = row;
-    const isExpandedExists = Boolean(expanded);
-    const [lastItem] = (row.cells ?? []).slice(-1);
-
-    return (
-      <TableRow
-        isSelected={isRowSelected}
-        onClick={isExpandedExists ? toggleIsChecked : undefined}
-        css={borderedRowStyle({
-          isBordered,
-          isCustomCell: isExpandedExists || isComponentFunctionType(lastItem.content),
-        })}
-      >
-        {hasOnSelectionChange && (
-          <TableCell
-            component="th"
-            isSticky={false}
-            width={50}
-            isPadded={isPadded}
-            dataTestIdPrefix={dataTestIdPrefix}
-            rowIndex={rowIndex}
-            index={0}
-          >
-            <div onClick={(e) => e.stopPropagation()}>
-              <CheckBox
-                dataTestPrefixId="row-check"
-                isSelected={isRowSelected}
-                onChange={tChange}
-              />
-            </div>
-          </TableCell>
-        )}
-        {row.cells?.map(
-          (
-            { content, tooltipContent, hasTruncatedTooltip = true, colSpan, type: cellType, align },
-            index
-          ) => (
-            <ContentCell
-              key={`${row.id}-${index}`}
-              cellCounter={index}
-              columnWidth={columnsWithWidth[index]}
-              columns={columns}
-              tooltipContent={
-                hasTruncatedTooltip
-                  ? isComponentFunctionType(content)
-                    ? tooltipContent
-                    : tooltipContent ?? content.toString()
-                  : undefined
-              }
-              isPadded={isPadded}
-              colSpan={colSpan}
-              content={content}
-              cellType={cellType}
-              rowType={type}
-              align={align}
-              dataTestIdPrefix={dataTestIdPrefix}
-              rowIndex={rowIndex}
-              index={index + 1}
-            />
-          )
-        )}
-
-        <ExpandedButtonCell
-          isExpandedExists={isExpandedExists}
-          isChecked={isChecked}
-          toggleIsChecked={toggleIsChecked}
-          actionWidth={actionWidth}
-          dataTestIdPrefix={dataTestIdPrefix}
-          rowIndex={rowIndex}
-          index={row.cells?.length + 1}
-        />
-      </TableRow>
-    );
-  }
-);
-RenderRowWithCells.displayName = 'RenderRowWithCells';
-
-const RenderRowOrNestedRow = <T extends { [key: string]: unknown }>({
-  row,
-  dataTestIdPrefix,
-  rowIndex,
-  isInitiallyExpanded,
-}: {
-  row: Row<T>;
-  dataTestIdPrefix?: string;
-  rowIndex?: number;
-  isInitiallyExpanded: boolean;
-}) => {
-  const { isRowSelected, columnCount, hasFixedHeader } = React.useContext(TableRowContext);
-  const { expanded } = row;
-  const [isChecked, toggleIsChecked] = useToggle(isInitiallyExpanded);
-  const ExpandedComponent = expanded
-    ? expanded({ row, isSelected: isRowSelected, isExpanded: isChecked })
-    : null;
-
-  return (
-    <React.Fragment>
-      {!expanded ? (
-        <RenderRowWithCells dataTestIdPrefix={dataTestIdPrefix} rowIndex={rowIndex} />
-      ) : (
-        <TableRow isNested isSelected={isRowSelected}>
-          <TableCell
-            colSpan={columnCount}
-            isPadded={false}
-            dataTestIdPrefix={dataTestIdPrefix}
-            rowIndex={rowIndex}
-          >
-            <div css={expandableRowStyle({ isFirstRow: rowIndex === 1, hasFixedHeader })}>
-              <table css={tableStyle()()}>
-                <tbody>
-                  <RenderRowWithCells
-                    {...{ isChecked, toggleIsChecked }}
-                    dataTestIdPrefix={dataTestIdPrefix}
-                    rowIndex={rowIndex}
-                  />
-                  {isChecked && (
-                    <TableRow isNested>
-                      <TableCell
-                        colSpan={columnCount}
-                        dataTestIdPrefix={dataTestIdPrefix}
-                        rowIndex={rowIndex}
-                        index="expanded"
-                      >
-                        {ExpandedComponent}
-                      </TableCell>
-                    </TableRow>
-                  )}
-                </tbody>
-              </table>
-            </div>
-          </TableCell>
-        </TableRow>
-      )}
-    </React.Fragment>
-  );
-};
-
-RenderRowOrNestedRow.displayName = 'RenderRowOrNestedRow';
-
-export default React.memo(RenderRowOrNestedRow) as typeof RenderRowOrNestedRow;

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

@@ -1,11 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { vars } from '@orfium/tokens';
-
-export const nestedHeaderStyle = (): SerializedStyles =>
-  css({
-    color: vars.color.text.default.primary,
-    fontSize: vars['font-size']['2'],
-    paddingBottom: vars.spacing['3'],
-    fontWeight: vars.weight.bold,
-  });

package/src/components/TableV4/components/RenderRowOrNestedRow/components/ContentCell/ContentCell.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { isComponentFunctionType } from 'utils/helpers';
-
-import { nestedHeaderStyle } from './ContentCell.style';
-import TruncatedContent from '../../../../../TruncatedContent';
-import type { ContentComponent, TableType } from '../../../../types';
-import TableCell from '../../../TableCell';
-
-type ContentCellProps = {
-  columns: string[];
-  isPadded: boolean;
-  tooltipContent?: string;
-  columnWidth?: number;
-  content: number | string | ContentComponent<any>;
-  colSpan?: number;
-  cellType?: 'financial' | 'normal';
-  align?: 'left' | 'right';
-  rowType: TableType;
-  cellCounter: number;
-  dataTestIdPrefix?: string;
-  rowIndex?: number;
-  index?: number;
-};
-
-const ContentCell: React.FCC<ContentCellProps> = ({
-  columns,
-  isPadded,
-  columnWidth,
-  tooltipContent,
-  content,
-  colSpan,
-  rowType,
-  cellType,
-  align,
-  cellCounter,
-  dataTestIdPrefix,
-  rowIndex,
-  index,
-}) => {
-  const isNumeral = !Number.isNaN(Number(content));
-
-  return (
-    <TableCell
-      textAlign={align ? align : isNumeral ? 'right' : 'left'}
-      colSpan={colSpan}
-      type={cellType}
-      isPadded={isPadded}
-      width={columnWidth ? `${columnWidth}%` : 'initial'}
-      dataTestIdPrefix={dataTestIdPrefix}
-      rowIndex={rowIndex}
-      index={index}
-    >
-      {rowType === 'nested-header' && (
-        <div css={nestedHeaderStyle()}>
-          {/* nested header render */}
-          {columns[cellCounter]}
-        </div>
-      )}
-
-      <TruncatedContent placement="bottom" tooltipContent={tooltipContent}>
-        {isComponentFunctionType(content) ? (
-          content({ content, colSpan })
-        ) : (
-          <span data-column={columns[cellCounter]}>{content}</span>
-        )}
-      </TruncatedContent>
-    </TableCell>
-  );
-};
-
-export default React.memo(ContentCell);

package/src/components/TableV4/components/RenderRowOrNestedRow/components/ContentCell/index.ts

@@ -1 +0,0 @@
-export { default } from './ContentCell';

package/src/components/TableV4/components/RenderRowOrNestedRow/components/ExpandedButtonCell/ExpandedButtonCell.tsx

@@ -1,67 +0,0 @@
-import useBreakpoints from 'hooks/useBreakpoints';
-import React from 'react';
-
-import { vars } from '@orfium/tokens';
-import IconButton from 'components/IconButton';
-import TableCell from '../../../TableCell';
-
-type ExpandedButtonCellProps = {
-  isExpandedExists: boolean;
-  isChecked: boolean;
-  toggleIsChecked: () => void;
-  actionWidth?: number;
-  dataTestIdPrefix?: string;
-  rowIndex?: number;
-  index?: number;
-};
-
-const ExpandedButtonCell: React.FCC<ExpandedButtonCellProps> = ({
-  isExpandedExists,
-  isChecked,
-  toggleIsChecked,
-  actionWidth,
-  dataTestIdPrefix,
-  rowIndex,
-  index,
-}) => {
-  const breakpoints = useBreakpoints();
-  const actionCellWidth = actionWidth ? `${actionWidth}%` : breakpoints.des1920 ? '5%' : '7%';
-
-  return isExpandedExists ? (
-    <TableCell
-      width={actionCellWidth}
-      dataTestIdPrefix={dataTestIdPrefix}
-      rowIndex={rowIndex}
-      index={index}
-    >
-      <div>
-        <div
-          css={{
-            display: 'flex',
-            justifyContent: 'center',
-            padding: `${vars.spacing['3']} ${vars.spacing['4']}`,
-          }}
-        >
-          <div
-            css={{
-              transition: '0.3s all ease-in-out',
-              transformOrigin: 'center',
-              width: 'fit-content',
-              transform: `rotate(${isChecked ? '180' : '0'}deg)`,
-            }}
-            onClick={(e) => e.stopPropagation()}
-          >
-            <IconButton
-              type="tertiary"
-              iconName="chevronDown"
-              onClick={toggleIsChecked}
-              dataTestId="expanded-button"
-            />
-          </div>
-        </div>
-      </div>
-    </TableCell>
-  ) : null;
-};
-
-export default React.memo(ExpandedButtonCell);

package/src/components/TableV4/components/RenderRowOrNestedRow/components/ExpandedButtonCell/index.ts

@@ -1 +0,0 @@
-export { default } from './ExpandedButtonCell';

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

@@ -1 +0,0 @@
-export { default } from './RenderRowOrNestedRow';

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

@@ -1,23 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { rem, vars } from '@orfium/tokens';
-
-const activeStateStyles = (): SerializedStyles => css`
-  & > div > span {
-    color: black;
-    font-weight: 700;
-  }
-`;
-
-export const parentStyles = ({ isActive }: { isActive: boolean }): SerializedStyles => css`
-  cursor: pointer;
-  position: relative;
-  height: ${rem(64)};
-
-  ${isActive && activeStateStyles()}
-
-  &:hover {
-    ${activeStateStyles()};
-    background-color: ${vars.color.palette.secondary.muted};
-  }
-`;

package/src/components/TableV4/components/TableCell/TableCell.tsx

@@ -1,89 +0,0 @@
-import useTheme from 'hooks/useTheme';
-import { rem } from 'polished';
-import * as React from 'react';
-
-import { vars } from '@orfium/tokens';
-import { getBorderColor } from 'components/TableV4/utils';
-import { parentStyles } from './TableCell.style';
-import { getTestId } from './utils';
-
-export type TableCellProps = {
-  textAlign?: 'left' | 'right';
-  component?: 'td' | 'th';
-  width?: number | string;
-  isSticky?: boolean;
-  isPaddedSticky?: boolean;
-  colSpan?: number;
-  type?: 'financial' | 'normal';
-  isPadded?: boolean;
-  dataTestIdPrefix?: string;
-  rowIndex?: number;
-  index?: number | string;
-  isSortable?: boolean;
-  isActive?: boolean;
-  onClick?: () => void;
-};
-
-const TableCell: React.FCC<TableCellProps> = React.memo(
-  ({
-    textAlign = 'left',
-    component = 'td',
-    width,
-    isSticky = false,
-    isPaddedSticky = false,
-    colSpan,
-    children,
-    isSortable = false,
-    isActive = false,
-    type = 'normal',
-    isPadded = false,
-    dataTestIdPrefix,
-    rowIndex,
-    onClick,
-    index,
-  }) => {
-    const theme = useTheme();
-    const Component = component;
-    const dataTestId = getTestId(children, component, dataTestIdPrefix, rowIndex, index);
-
-    return (
-      <Component
-        colSpan={colSpan}
-        css={[
-          {
-            position: 'relative',
-            textAlign,
-            padding: `${vars.spacing['3']} ${isPadded ? vars.spacing['4'] : 0}`,
-            width,
-          },
-          component === 'th' && {
-            paddingTop: vars.spacing['4'],
-            paddingBottom: vars.spacing['4'],
-            fontWeight: vars.weight.bold,
-            fontSize: vars['font-size']['3'],
-          },
-          component === 'th' && isSortable && { ...parentStyles({ isActive }) },
-          isSticky && {
-            top: isPaddedSticky ? rem(64) : 0,
-            left: 0,
-            zIndex: 2,
-            position: 'sticky',
-            background: theme.globals.oldColors.white,
-            boxShadow: `inset 0px -1px 0px 0px ${getBorderColor()}`,
-          },
-          type === 'financial' && {
-            borderLeft: `1px solid ${getBorderColor()}`,
-          },
-        ]}
-        onClick={onClick}
-        data-testid={dataTestId}
-      >
-        {children}
-      </Component>
-    );
-  }
-);
-
-TableCell.displayName = 'TableCell';
-
-export default TableCell;

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

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

package/src/components/TableV4/components/TableCell/utils.tsx

@@ -1,27 +0,0 @@
-import type { ReactNode } from 'react';
-
-export const getTestId = (
-  children: ReactNode,
-  component: 'td' | 'th',
-  dataTestIdPrefix?: string,
-  rowIndex?: number,
-  index?: string | number
-) => {
-  if (!children) {
-    return undefined;
-  }
-
-  if (component === 'th' && typeof children === 'string') {
-    return [dataTestIdPrefix, 'table_header', children?.replace(/ /g, '_').toLowerCase()]
-      .filter(value => value)
-      .join('_');
-  } else {
-    return [
-      dataTestIdPrefix,
-      rowIndex !== undefined ? `table_row_${rowIndex}` : '',
-      index !== undefined ? `cell_${index}` : '',
-    ]
-      .filter(value => value)
-      .join('_');
-  }
-};

package/src/components/TableV4/components/TableRow/TableRow.tsx

@@ -1,47 +0,0 @@
-import { vars } from '@orfium/tokens';
-import * as React from 'react';
-
-export type TableRowProps = {
-  isSelected?: boolean;
-  isNested?: boolean;
-  onClick?: () => void;
-};
-
-const TableRow: React.FCC<TableRowProps> = ({
-  isNested,
-  isSelected,
-  children,
-  onClick,
-  ...rest
-}) => {
-  return (
-    <tr
-      onClick={() => {
-        if (onClick) {
-          onClick();
-        }
-      }}
-      css={[
-        {
-          backgroundColor: isSelected ? vars.color.palette.secondary.muted : undefined,
-          paddingTop: vars.spacing['3'],
-          paddingBottom: vars.spacing['3'],
-          cursor: onClick && 'pointer',
-          '&:hover': {
-            backgroundColor: onClick && vars.color.palette.secondary.base,
-          },
-
-          '> td': {
-            paddingTop: isNested ? 0 : undefined,
-            paddingBottom: isNested ? 0 : undefined,
-          },
-        },
-      ]}
-      {...rest}
-    >
-      {children}
-    </tr>
-  );
-};
-
-export default TableRow;

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

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

package/src/components/TableV4/components/TableRowWrapper/TableRowWrapper.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-
-import { TableRowContext } from '../../TableRowContext';
-import type { Row, Selection, TableType } from '../../types';
-import RenderRowOrNestedRow from '../RenderRowOrNestedRow/RenderRowOrNestedRow';
-
-export type TableRowWrapperProps<T> = {
-  row: Row<T>;
-  isRowSelected: boolean;
-  onSelectionAdd: (selection: Selection) => void;
-  columnsWithWidth: number[];
-  isPadded: boolean;
-  hasOnSelectionChange: boolean;
-  columnCount: number;
-  columns: string[];
-  hasFixedHeader: boolean;
-  type: TableType;
-  isExpanded: boolean;
-  actionWidth?: number;
-  isInitiallyExpanded: boolean;
-  dataTestIdPrefix?: string;
-  rowIndex?: number;
-};
-
-const TableRowWrapper = <T extends Record<string, unknown>>(props: TableRowWrapperProps<T>) => {
-  const {
-    row,
-    isRowSelected,
-    onSelectionAdd,
-    isPadded,
-    columns,
-    hasFixedHeader,
-    type,
-    columnsWithWidth,
-    columnCount,
-    hasOnSelectionChange,
-    isExpanded,
-    actionWidth,
-    isInitiallyExpanded,
-    dataTestIdPrefix,
-    rowIndex,
-  } = props;
-
-  const tChange = React.useCallback(() => {
-    onSelectionAdd(row.id);
-  }, [onSelectionAdd, row.id]);
-
-  return (
-    <TableRowContext.Provider
-      value={{
-        row,
-        columnsWithWidth,
-        hasOnSelectionChange,
-        isPadded,
-        columns,
-        hasFixedHeader,
-        tChange,
-        type,
-        columnCount,
-        isRowSelected,
-        isBordered: !isExpanded,
-        actionWidth,
-      }}
-    >
-      <RenderRowOrNestedRow<T>
-        row={row}
-        dataTestIdPrefix={dataTestIdPrefix}
-        rowIndex={rowIndex}
-        isInitiallyExpanded={isInitiallyExpanded}
-      />
-    </TableRowContext.Provider>
-  );
-};
-
-export default React.memo(TableRowWrapper) as typeof TableRowWrapper;

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

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

package/src/components/TableV4/index.ts

@@ -1,3 +0,0 @@
-export * from './TableV4';
-export { default } from './TableV4';
-export type * as TableV4Types from './types';