@gen-epix/ui 1.15.0 → 1.15.2

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

@@ -1,81 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,162 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,241 +0,0 @@
-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,
-});