@gen-epix/ui 1.14.5 → 1.15.0

package/src/components/ui/Table/TableActionsCell.tsx

@@ -0,0 +1,81 @@
+import {
+  IconButton,
+  Menu,
+} from '@mui/material';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import type { MouseEvent } from 'react';
+import {
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import noop from 'lodash/noop';
+
+import type { TableColumnActions } from '../../../models/table';
+
+import {
+  TableCell,
+  type TableCellProps,
+} from './TableCell';
+
+export interface TableActionsCellProps<TRowData> extends TableCellProps<TRowData> {
+  readonly column: TableColumnActions<TRowData>;
+}
+
+export const TableActionsCell = <TRowData,>(props: TableActionsCellProps<TRowData>) => {
+  const [anchorElement, setAnchorElement] = useState<HTMLButtonElement>(null);
+  const { t } = useTranslation();
+  const open = !!anchorElement;
+
+  const onIconButtonClick = useCallback((event: MouseEvent<HTMLButtonElement>) => {
+    setAnchorElement(event.currentTarget);
+  }, []);
+
+  const onMenuClose = useCallback(() => {
+    setAnchorElement(null);
+  }, []);
+
+  const actions = useMemo(() => {
+    return props.column.getActions({ row: props.row, id: props.column.id, rowIndex: props.rowIndex });
+  }, [props.column, props.row, props.rowIndex]);
+
+  return (
+    <TableCell
+      key={props.column.id}
+      {...props}
+      onClick={noop}
+    >
+      {actions.length > 0 && (
+        <>
+          <IconButton
+            aria-label={t`Row actions`}
+            sx={{
+              position: 'absolute',
+              marginTop: '-2px',
+              '& svg': {
+                fontSize: 18,
+              },
+            }}
+            onClick={onIconButtonClick}
+          >
+            <MoreVertIcon />
+          </IconButton>
+          <Menu
+            anchorEl={anchorElement}
+            id={'basic-menu'}
+            open={open}
+            slotProps={{
+              list: {
+                'aria-labelledby': 'basic-button',
+              },
+            }}
+            onClose={onMenuClose}
+          >
+            {actions}
+          </Menu>
+        </>
+      )}
+    </TableCell>
+  );
+};

package/src/components/ui/Table/TableCaption.tsx

@@ -0,0 +1,33 @@
+import type { TypographyProps } from '@mui/material';
+import { Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { useStore } from 'zustand';
+import { useShallow } from 'zustand/shallow';
+
+import { useTableStoreContext } from '../../../stores/tableStore';
+
+export type TableCaptionProps = {
+  readonly caption: string;
+  readonly variant: TypographyProps['variant'];
+  readonly component?: TypographyProps['component'];
+};
+
+export const TableCaption = <TRowData,>({ caption, variant = 'h2', component = 'h2' }: TableCaptionProps) => {
+  const { t } = useTranslation();
+  const tableStore = useTableStoreContext<TRowData>();
+  const baseDataLength = useStore(tableStore, (state) => state.baseData.length);
+  const sortedDataLength = useStore(tableStore, useShallow((state) => state.sortedData.length));
+
+  return (
+    <Typography
+      component={component}
+      variant={variant}
+    >
+      <>
+        {sortedDataLength === 0 && (caption ?? t('Items'))}
+        {sortedDataLength > 0 && sortedDataLength === baseDataLength && t('{{items}} ({{count}})', { items: caption ?? t('Items'), count: sortedDataLength, totalCount: baseDataLength })}
+        {sortedDataLength > 0 && sortedDataLength !== baseDataLength && t('{{items}} ({{count}} of {{totalCount}})', { items: caption ?? t('Items'), count: sortedDataLength, totalCount: baseDataLength })}
+      </>
+    </Typography>
+  );
+};

package/src/components/ui/Table/TableCell.tsx

@@ -0,0 +1,162 @@
+import {
+  useTheme,
+  Box,
+} from '@mui/material';
+import type {
+  ForwardedRef,
+  MouseEvent as ReactMouseEvent,
+  AriaRole,
+  PropsWithChildren,
+} from 'react';
+import {
+  useCallback,
+  useRef,
+} from 'react';
+import type {
+  SxProps,
+  Theme,
+} from '@mui/material';
+
+import type {
+  TableColumn,
+  TableDragEvent,
+  TableRowParams,
+} from '../../../models/table';
+
+export type TableCellProps<TRowData> = PropsWithChildren<{
+  readonly className?: string;
+  readonly column: TableColumn<TRowData>;
+  readonly columnIndex: number;
+  readonly enabled?: boolean;
+  readonly height: string;
+  readonly onClick?: (row: TableRowParams<TRowData>, event?: MouseEvent) => void;
+  readonly canDrag?: (event: ReactMouseEvent<HTMLDivElement>) => boolean;
+  readonly role?: AriaRole;
+  readonly row?: TRowData;
+  readonly rowIndex?: number;
+  readonly sx?: SxProps<Theme>;
+  readonly title?: string;
+  readonly width: number;
+  readonly xOffset?: number;
+  readonly onCustomDrag?: (event: TableDragEvent, column: TableColumn<TRowData>) => void;
+  readonly order: number;
+  readonly ref?: ForwardedRef<TableCellRef>;
+  readonly tabIndex?: number;
+  readonly ariaSort?: 'ascending' | 'descending' | 'other';
+}>;
+
+export type TableCellRef = HTMLDivElement;
+
+export const TableCell = <TRowData, >({
+  children,
+  className,
+  column,
+  columnIndex,
+  enabled,
+  height,
+  onClick,
+  onCustomDrag,
+  order,
+  ref,
+  role,
+  row,
+  rowIndex,
+  canDrag,
+  sx,
+  title,
+  width,
+  xOffset,
+  tabIndex,
+  ariaSort,
+}: TableCellProps<TRowData>) => {
+  const theme = useTheme();
+  const onTableCellClick = useCallback((event: ReactMouseEvent) => {
+    onClick({ row, id: column.id, rowIndex }, event.nativeEvent);
+  }, [column.id, onClick, row, rowIndex]);
+  const dragPosition = useRef<{ x: number; y: number; target: HTMLDivElement } | null>(null);
+
+  const onMouseDown = useCallback((mouseDownEvent: ReactMouseEvent<HTMLDivElement>) => {
+    if (!onCustomDrag || (canDrag && !canDrag(mouseDownEvent))) {
+      return;
+    }
+
+    const target = mouseDownEvent.currentTarget as HTMLDivElement;
+    const elementWidth = target.getBoundingClientRect().width;
+    const elementOffsetX = mouseDownEvent.clientX - target.getBoundingClientRect().left;
+
+    const eventBase = {
+      target, elementOffsetX, elementWidth,
+    };
+
+    const onMouseMove = (moveEvent: MouseEvent) => {
+      if (!dragPosition.current) {
+        dragPosition.current = { x: mouseDownEvent.clientX, y: mouseDownEvent.clientY, target };
+        onCustomDrag({ deltaX: 0, deltaY: 0, clientX: mouseDownEvent.clientX, clientY: mouseDownEvent.clientY, type: 'start', ...eventBase }, column);
+      }
+
+      const deltaX = moveEvent.clientX - dragPosition.current.x;
+      const deltaY = moveEvent.clientY - dragPosition.current.y;
+      onCustomDrag({ deltaX, deltaY, clientX: moveEvent.clientX, clientY: moveEvent.clientY, type: 'move', ...eventBase }, column);
+    };
+
+    const onMouseUp = (upEvent: MouseEvent) => {
+      upEvent.preventDefault();
+      if (dragPosition.current) {
+        const deltaX = upEvent.clientX - dragPosition.current.x;
+        const deltaY = upEvent.clientY - dragPosition.current.y;
+        onCustomDrag({ deltaX, deltaY, clientX: upEvent.clientX, clientY: upEvent.clientY, type: 'end', ...eventBase }, column);
+      }
+      dragPosition.current = null;
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+
+    document.addEventListener('mouseup', onMouseUp, {
+      once: true,
+    });
+    document.addEventListener('mousemove', onMouseMove);
+  }, [onCustomDrag, canDrag, column]);
+
+
+  const isMovable = column.isStatic !== true && column.frozen !== true;
+
+  const getCellStyles = useCallback((): SxProps<Theme> => {
+    return {
+      overflow: 'hidden',
+      whiteSpace: column.disableEllipsis ? undefined : 'nowrap',
+      textOverflow: column.disableEllipsis ? undefined : 'ellipsis',
+      width: `${width}px`,
+      textAlign: column.textAlign ?? 'left',
+      lineHeight: height,
+      position: column.frozen ? 'sticky' : 'relative',
+      background: column.frozen ? theme.palette.background.paper : undefined,
+      zIndex: column.frozen ? 1 : 0,
+      left: column.frozen ? `${xOffset || '0'}px` : undefined,
+      paddingRight: '8px',
+      paddingLeft: '8px',
+      boxSizing: 'border-box',
+      order,
+      ...sx,
+    };
+  }, [column.disableEllipsis, column.frozen, column.textAlign, height, order, sx, theme.palette.background.paper, width, xOffset]);
+
+  return (
+    <Box
+      ref={ref}
+      aria-sort={ariaSort}
+      tabIndex={tabIndex}
+      className={className}
+      data-column-index={columnIndex}
+      data-frozen={column.frozen ? 1 : 0}
+      data-id={column.id}
+      data-row-index={rowIndex ?? ''}
+      role={role ?? 'cell'}
+      sx={getCellStyles()}
+      title={title}
+      onClick={onClick && enabled ? onTableCellClick : undefined}
+      onMouseDown={isMovable && onCustomDrag ? onMouseDown : undefined}
+    >
+      {children}
+    </Box>
+  );
+};

package/src/components/ui/Table/TableCellAsyncContent.tsx

@@ -0,0 +1,28 @@
+import {
+  useEffect,
+  useState,
+} from 'react';
+
+export type TableCellAsyncContentProps = {
+  readonly content: string | Promise<string>;
+};
+
+export const TableCellAsyncContent = ({ content }: TableCellAsyncContentProps) => {
+  const [text, setText] = useState<string>(null);
+  useEffect(() => {
+    const perform = async () => {
+      if (content instanceof Promise) {
+        setText(await content);
+      } else {
+        setText(content);
+      }
+    };
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    perform();
+  }, [content]);
+  return (
+    <>
+      {text}
+    </>
+  );
+};

package/src/components/ui/Table/TableCheckboxCell.tsx

@@ -0,0 +1,65 @@
+import {
+  useCallback,
+  type MouseEvent as ReactMouseEvent,
+  type ChangeEvent,
+} from 'react';
+import { Checkbox } from '@mui/material';
+import { useStore } from 'zustand';
+import { useShallow } from 'zustand/shallow';
+import { useTranslation } from 'react-i18next';
+
+import { useTableStoreContext } from '../../../stores/tableStore';
+import type {
+  TableColumnSelectable,
+  TableRowParams,
+} from '../../../models/table';
+
+
+export type TableCheckboxCellProps<TRowData> = {
+  readonly cell: TableRowParams<TRowData>;
+  readonly tableColumn: TableColumnSelectable<TRowData>;
+};
+
+export const TableCheckboxCell = <TRowData, >({
+  cell,
+  tableColumn,
+}: TableCheckboxCellProps<TRowData>) => {
+  const { t } = useTranslation();
+  const tableStore = useTableStoreContext<TRowData>();
+  const idSelectorCallback = useStore(tableStore, useShallow((state) => state.idSelectorCallback));
+  const selectedIds = useStore(tableStore, useShallow((state) => state.selectedIds));
+  const setSelectedIds = useStore(tableStore, useShallow((state) => state.setSelectedIds));
+
+  const id = idSelectorCallback(cell.row);
+  const onClick = useCallback((event: ReactMouseEvent) => {
+    event.stopPropagation();
+  }, []);
+
+  const onChange = useCallback((event: ChangeEvent<HTMLInputElement>, checked: boolean) => {
+    const rowId = event.target.getAttribute('name');
+    if (checked && !selectedIds.includes(rowId)) {
+      setSelectedIds([...selectedIds, rowId]);
+    } else if (!checked) {
+      setSelectedIds([...selectedIds].filter(x => x !== rowId));
+    }
+  }, [selectedIds, setSelectedIds]);
+
+  return (
+    <Checkbox
+      checked={selectedIds.includes(id)}
+      name={idSelectorCallback(cell.row)}
+      slotProps={{
+        input: {
+          'aria-label': t`Select row`,
+        },
+      }}
+      sx={{
+        padding: 0,
+        marginTop: '-2px',
+      }}
+      disabled={tableColumn.isDisabled ? tableColumn.isDisabled(cell) : false}
+      onClick={onClick}
+      onChange={onChange}
+    />
+  );
+};

package/src/components/ui/Table/TableCheckboxHeader.tsx

@@ -0,0 +1,72 @@
+import IndeterminateCheckBoxIcon from '@mui/icons-material/IndeterminateCheckBox';
+import { Checkbox } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import uniq from 'lodash/uniq';
+import {
+  useCallback,
+  type ChangeEvent,
+} from 'react';
+import { useStore } from 'zustand';
+import { useShallow } from 'zustand/shallow';
+
+import type {
+  TableColumnParams,
+  TableColumnSelectable,
+} from '../../../models/table';
+import { useTableStoreContext } from '../../../stores/tableStore';
+
+
+export type TableCheckboxHeaderProps<TRowData> = {
+  readonly tableColumnParams: TableColumnParams<TRowData>;
+};
+
+export const TableCheckboxHeader = <TRowData, >({ tableColumnParams }: TableCheckboxHeaderProps<TRowData>) => {
+  const { t } = useTranslation();
+
+  const column = tableColumnParams.column as TableColumnSelectable<TRowData>;
+
+  const tableStore = useTableStoreContext<TRowData>();
+  const idSelectorCallback = useStore(tableStore, useShallow((state) => state.idSelectorCallback));
+  const selectedIds = useStore(tableStore, useShallow((state) => state.selectedIds));
+  const sortedData = useStore(tableStore, useShallow((state) => state.sortedData));
+  const setSelectedIds = useStore(tableStore, useShallow((state) => state.setSelectedIds));
+
+
+  const enabledRows = column.isDisabled ? sortedData.filter(row => column.isDisabled({
+    id: idSelectorCallback(row),
+    row,
+    rowIndex: sortedData.indexOf(row),
+  }) === false) : sortedData;
+
+  const isAllChecked = enabledRows.every(row => selectedIds.includes(idSelectorCallback(row)));
+  const isSomeChecked = enabledRows.some(row => selectedIds.includes(idSelectorCallback(row)));
+
+  const onChange = useCallback((_event: ChangeEvent<HTMLInputElement>) => {
+    const visibleRowIds = enabledRows.map(r => idSelectorCallback(r));
+    if (isAllChecked) {
+      // all visible rows are selected, unselect all visible rows
+      setSelectedIds(selectedIds.filter(s => !visibleRowIds.includes(s)));
+    } else {
+      // not all visible rows are selected, select them
+      setSelectedIds(uniq([...selectedIds, ...visibleRowIds]));
+    }
+  }, [enabledRows, idSelectorCallback, isAllChecked, selectedIds, setSelectedIds]);
+
+  return (
+    <Checkbox
+      checked={isSomeChecked}
+      slotProps={{
+        input: {
+          'aria-label': t`Select all`,
+        },
+      }}
+      checkedIcon={isAllChecked ? undefined : <IndeterminateCheckBoxIcon />}
+      name={'select-all'}
+      sx={{
+        padding: 0,
+        marginTop: '-2px',
+      }}
+      onChange={onChange}
+    />
+  );
+};

package/src/components/ui/Table/TableColumnsEditorDialog.tsx

@@ -0,0 +1,241 @@
+import { useTranslation } from 'react-i18next';
+import { Box } from '@mui/material';
+import type { ReactElement } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import { useStore } from 'zustand';
+import { useShallow } from 'zustand/shallow';
+import type { UniqueIdentifier } from '@dnd-kit/core';
+
+import { TestIdUtil } from '../../../utils/TestIdUtil';
+import { withDialog } from '../../../hoc/withDialog';
+import type {
+  WithDialogRenderProps,
+  WithDialogRefMethods,
+} from '../../../hoc/withDialog';
+import type {
+  HasCellDataFn,
+  TableColumn,
+  TableColumnSettings,
+} from '../../../models/table';
+import { SortableList } from '../SortableList/SortableList';
+import { useTableStoreContext } from '../../../stores/tableStore';
+import { TableUtil } from '../../../utils/TableUtil';
+
+
+export interface TableColumnsEditorDialogOpenProps {
+  readonly hasCellData: HasCellDataFn<unknown>;
+}
+
+export interface TableColumnsEditorDialogProps extends WithDialogRenderProps<TableColumnsEditorDialogOpenProps> {
+  //
+}
+
+export type TableColumnsEditorDialogRefMethods = WithDialogRefMethods<TableColumnsEditorDialogProps, TableColumnsEditorDialogOpenProps>;
+
+
+type Item = {
+  id: UniqueIdentifier;
+  label: string;
+  isSelected: boolean;
+};
+
+export const TableColumnsEditorDialog = withDialog<TableColumnsEditorDialogProps, TableColumnsEditorDialogOpenProps>((
+  {
+    onTitleChange,
+    onActionsChange,
+    onClose,
+    openProps: { hasCellData },
+  }: TableColumnsEditorDialogProps,
+): ReactElement => {
+  const { t } = useTranslation();
+  const [items, setItems] = useState<Item[]>([]);
+
+  const tableStore = useTableStoreContext<unknown>();
+  const emitTableEvent = useStore(tableStore, useShallow((state) => state.emitEvent));
+  const tableColumnSettings = useStore(tableStore, useShallow((state) => state.columnSettings));
+  const tableColumns = useStore(tableStore, useShallow((state) => state.columns));
+  const sortedData = useStore(tableStore, useShallow((state) => state.sortedData));
+
+  const columnsMap = useMemo(() => {
+    const map = new Map<string, TableColumn<unknown>>();
+    tableColumns.forEach((column) => {
+      map.set(column.id, column);
+    });
+    return map;
+  }, [tableColumns]);
+
+  const updateItems = useCallback((columnSettings: TableColumnSettings[]) => {
+    const newItems: Item[] = [];
+    columnSettings.forEach(columnSetting => {
+      const column = columnsMap.get(columnSetting.id);
+      if (column && !column.isStatic && !column.frozen) {
+        newItems.push({
+          id: column.id,
+          label: column.headerName,
+          isSelected: columnSetting.isVisible,
+        });
+      }
+    });
+    setItems(newItems);
+  }, [columnsMap]);
+
+  useEffect(() => {
+    updateItems(tableColumnSettings);
+  }, [tableColumnSettings, updateItems]);
+
+  const onResetButtonClick = useCallback(() => {
+    updateItems(TableUtil.createInitialColumnSettings(tableColumns));
+  }, [tableColumns, updateItems]);
+
+
+  useEffect(() => {
+    onTitleChange(t`Change column order and visibility`);
+  }, [onTitleChange, t]);
+
+  const onSaveButtonClick = useCallback(() => {
+    emitTableEvent('columnVisibilityChange', [...tableColumns.filter(c => c.isStatic || c.frozen).map(c => c.id), ...items.filter((item) => item.isSelected).map((item) => item.id.toString())]);
+
+    const firstMovableColumnIndex = tableColumns.findIndex(c => !c.isStatic && !c.frozen);
+    const leadingStaticColumns = tableColumns.slice(0, firstMovableColumnIndex);
+    const trailingStaticColumns = tableColumns.slice(firstMovableColumnIndex + items.length);
+
+    emitTableEvent('columnOrderChange', [...leadingStaticColumns.map(c => c.id), ...items.map((item) => item.id.toString()), ...trailingStaticColumns.map(c => c.id)]);
+    onClose();
+  }, [tableColumns, emitTableEvent, items, onClose]);
+
+  const filterColumnsWithPredicate = useCallback((predicate: (item: Item) => boolean) => {
+    const newVisibleColumnIds = TableUtil.getColumnIdsWithData({
+      visibleColumnIds: items.filter(predicate).map(c => c.id.toString()),
+      tableColumns,
+      sortedData,
+      hasCellData,
+    });
+    setItems((prevItems) => {
+      return prevItems.map((item) => ({
+        ...item,
+        isSelected: newVisibleColumnIds.includes(item.id.toString()),
+      }));
+    });
+  }, [hasCellData, items, sortedData, tableColumns]);
+
+
+  const onEnableOnlyColumnsWithDataClick = useCallback(() => {
+    filterColumnsWithPredicate(() => true);
+  }, [filterColumnsWithPredicate]);
+
+  const onDisableColumnsWithoutDataClick = useCallback(() => {
+    filterColumnsWithPredicate((item) => item.isSelected);
+  }, [filterColumnsWithPredicate]);
+
+  const onEnableAllButtonClick = useCallback(() => {
+    setItems((prevItems) => {
+      return prevItems.map((item) => ({
+        ...item,
+        isSelected: true,
+      }));
+    });
+  }, []);
+
+  const onDisableAllButtonClick = useCallback(() => {
+    setItems((prevItems) => {
+      return prevItems.map((item) => ({
+        ...item,
+        isSelected: false,
+      }));
+    });
+  }, []);
+
+  useEffect(() => {
+    onActionsChange(
+      [
+        {
+          ...TestIdUtil.createAttributes('TableColumnOrderDialog-enable-all'),
+          color: 'secondary',
+          autoFocus: true,
+          onClick: onEnableAllButtonClick,
+          variant: 'outlined',
+          label: t`Enable all`,
+        },
+        {
+          ...TestIdUtil.createAttributes('TableColumnOrderDialog-enable-all-with-data'),
+          color: 'secondary',
+          autoFocus: true,
+          onClick: onEnableOnlyColumnsWithDataClick,
+          variant: 'outlined',
+          label: t`Enable all with data`,
+        },
+        {
+          ...TestIdUtil.createAttributes('TableColumnOrderDialog-disable-all'),
+          color: 'secondary',
+          autoFocus: true,
+          onClick: onDisableAllButtonClick,
+          variant: 'outlined',
+          label: t`Disable all`,
+        },
+        {
+          ...TestIdUtil.createAttributes('TableColumnOrderDialog-disable-all-without-data'),
+          color: 'secondary',
+          autoFocus: true,
+          onClick: onDisableColumnsWithoutDataClick,
+          variant: 'outlined',
+          label: t`Disable all without data`,
+        },
+        {
+          ...TestIdUtil.createAttributes('TableColumnOrderDialog-reset'),
+          color: 'secondary',
+          autoFocus: true,
+          onClick: onResetButtonClick,
+          variant: 'outlined',
+          label: t`Reset to default`,
+        },
+        {
+          ...TestIdUtil.createAttributes('TableColumnOrderDialog-close'),
+          color: 'primary',
+          autoFocus: true,
+          onClick: onClose,
+          variant: 'outlined',
+          label: t`Close`,
+        },
+        {
+          ...TestIdUtil.createAttributes('TableColumnOrderDialog-save'),
+          color: 'secondary',
+          autoFocus: true,
+          onClick: onSaveButtonClick,
+          variant: 'contained',
+          label: t`Apply`,
+        },
+      ],
+    );
+  }, [onActionsChange, onClose, onDisableAllButtonClick, onEnableOnlyColumnsWithDataClick, onResetButtonClick, onSaveButtonClick, onEnableAllButtonClick, t, onDisableColumnsWithoutDataClick]);
+
+  const onSortableListChange = useCallback((newItems: Item[]) => {
+    setItems(newItems);
+  }, []);
+
+  const renderItemContent = useCallback((item: Item) => item.label, []);
+
+  return (
+    <Box
+      sx={{
+      }}
+    >
+      <SortableList<Item>
+        items={items}
+        renderItemContent={renderItemContent}
+        onChange={onSortableListChange}
+      />
+    </Box>
+  );
+}, {
+  testId: 'TableColumnOrderDialog',
+  maxWidth: 'md',
+  fullWidth: true,
+  defaultTitle: '',
+  noCloseButton: false,
+  disableBackdropClick: false,
+});