@gen-epix/ui 1.15.0 → 1.15.2

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

@@ -1,434 +0,0 @@
-import {
-  Tooltip,
-  Box,
-  styled,
-  Paper,
-  useTheme,
-  IconButton,
-  Popover,
-} from '@mui/material';
-import { visuallyHidden } from '@mui/utils';
-import { useTranslation } from 'react-i18next';
-import { useStore } from 'zustand';
-import type {
-  MouseEvent as ReactMouseEvent,
-  KeyboardEvent as ReactKeyboardEvent,
-} from 'react';
-import {
-  useCallback,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
-import clsx from 'clsx';
-import FilterAltIcon from '@mui/icons-material/FilterAlt';
-import sum from 'lodash/sum';
-
-import type {
-  TableColumn,
-  TableDragEvent,
-} from '../../../models/table';
-import { useTableStoreContext } from '../../../stores/tableStore';
-
-import { TableHeaderFilter } from './TableHeaderFilter';
-import type {
-  TableCellProps,
-  TableCellRef,
-} from './TableCell';
-import { TableCell } from './TableCell';
-import { tableHeaderCellClassNames } from './classNames';
-
-export interface TableHeaderCellProps<TRowData> extends TableCellProps<TRowData> {
-  readonly onColumnDividerMouseDown: (event: ReactMouseEvent<HTMLDivElement>, column: TableColumn<TRowData>) => void;
-  readonly onColumnDividerKeyDown: (event: ReactKeyboardEvent<HTMLDivElement>, column: TableColumn<TRowData>) => void;
-  readonly dividerColor: string;
-}
-
-type TableSortLabelIconProps = {
-  ownerState: {
-    readonly direction: 'asc' | 'desc';
-  };
-};
-
-const iconSize = 18;
-
-const tableHeaderCellClassNamesFocus = `${tableHeaderCellClassNames.root}--focus`;
-
-const TableSortLabelIconButton = styled(IconButton, {
-  name: 'GENEPIX-TableSortLabelIcon',
-})<TableSortLabelIconProps>(({ theme, ownerState }) => {
-  return {
-    padding: 0,
-    fontSize: iconSize,
-    width: `${iconSize}px`,
-    height: `${iconSize}px`,
-    display: 'none',
-    opacity: 0,
-    userSelect: 'none',
-    color: theme.palette.text.primary,
-    '&:hover': {
-      opacity: '1 !important',
-      color: theme.palette.primary.main,
-    },
-    '& svg': {
-      ...(ownerState.direction === 'desc' && {
-        transform: 'rotate(0deg)',
-      }),
-      ...(ownerState.direction === 'asc' && {
-        transform: 'rotate(180deg)',
-      }),
-    },
-  };
-});
-
-const TableFilterLabelIconButton = styled(IconButton, {
-  name: 'GENEPIX-TableFilterLabelIcon',
-})(({ theme }) => {
-  return {
-    fontSize: iconSize,
-    width: `${iconSize}px`,
-    height: `${iconSize}px`,
-    padding: 0,
-    display: 'none',
-    opacity: 0,
-    userSelect: 'none',
-    '&:hover': {
-      opacity: '1 !important',
-      color: theme.palette.primary.main,
-    },
-  };
-});
-
-export const TableHeaderCell = <TRowData,>(props: TableHeaderCellProps<TRowData>) => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const tableStore = useTableStoreContext<TRowData>();
-  const sortByField = useStore(tableStore, (state) => state.sortByField);
-  const sortDirection = useStore(tableStore, (state) => state.sortDirection);
-  const setSorting = useStore(tableStore, (state) => state.setSorting);
-  const filters = useStore(tableStore, (state) => state.filters);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const popperId = useId();
-  const [filterAnchorElement, setFilterAnchorElement] = useState<HTMLDivElement>();
-  const tableCellRef = useRef<TableCellRef>(null);
-  const filterLabelIconButtonRef = useRef<HTMLButtonElement>(null);
-
-  const {
-    column,
-    columnIndex,
-    dividerColor,
-    height,
-    onColumnDividerMouseDown: onColumnDividerMouseDownProp,
-    onColumnDividerKeyDown: onColumnDividerKeyDownProp,
-    onCustomDrag,
-    order,
-    width,
-    xOffset,
-  } = props;
-
-  const ignoreNextClick = useRef(false);
-
-  const canDrag = useCallback((event: ReactMouseEvent<HTMLDivElement>) => {
-    if (column.frozen || column.isStatic) {
-      return false;
-    }
-    if (event.button !== 0) {
-      return false;
-    }
-    return (event.nativeEvent.target as HTMLDivElement).classList.contains(tableHeaderCellClassNames.content);
-  }, [column.frozen, column.isStatic]);
-
-  const onCustomDragTableHeaderCell = useCallback((event: TableDragEvent, tableColumn: TableColumn<TRowData>) => {
-    if (onCustomDrag) {
-      if (event.type === 'start') {
-        ignoreNextClick.current = true;
-      }
-      onCustomDrag(event, tableColumn);
-    }
-  }, [onCustomDrag]);
-
-  const updateSorting = useCallback(async () => {
-    if (sortByField === column.id) {
-
-      await setSorting(column.id, sortDirection === 'asc' ? 'desc' : 'asc');
-      return;
-    }
-
-    await setSorting(column.id, 'asc');
-  }, [column.id, setSorting, sortByField, sortDirection]);
-
-  const onContentClick = useCallback(async (event: ReactMouseEvent<HTMLDivElement>) => {
-    if (ignoreNextClick.current) {
-      event.preventDefault();
-      event.stopPropagation();
-      ignoreNextClick.current = false;
-      return;
-    }
-
-    if (column.comparatorFactory) {
-      await updateSorting();
-    }
-  }, [column.comparatorFactory, updateSorting]);
-
-  const onTableSortClick = useCallback(async (_event: ReactMouseEvent<HTMLButtonElement>) => {
-    await updateSorting();
-  }, [updateSorting]);
-
-  const onFilterIconClick = useCallback(() => {
-    setFilterAnchorElement(el => el ? null : tableCellRef.current);
-  }, []);
-
-  const onFilterChange = useCallback(() => {
-    setFilterAnchorElement(null);
-  }, []);
-
-  const onColumnDividerMouseDown = useCallback((event: ReactMouseEvent<HTMLDivElement>) => {
-    if (event.button !== 0) {
-      return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-    onColumnDividerMouseDownProp(event, column);
-  }, [column, onColumnDividerMouseDownProp]);
-
-  const onColumnDividerKeyDown = useCallback((event: ReactKeyboardEvent<HTMLDivElement>) => {
-    onColumnDividerKeyDownProp(event, column);
-  }, [column, onColumnDividerKeyDownProp]);
-
-  const filter = useMemo(() => {
-    return filters.find((f) => f.id === column.id);
-  }, [column.id, filters]);
-
-  const hasActiveFilter = useMemo(() => {
-    return !!filter && !filter.isInitialFilterValue();
-  }, [filter]);
-
-  const onFilterPopOverClose = useCallback(() => {
-    setFilterAnchorElement(null);
-    // Focus back to the header cell and filter icon button after closing the popover. This must be done in a setTimeout to ensure the popover has closed before focusing.
-    setTimeout(() => {
-      tableCellRef.current.classList.add(tableHeaderCellClassNamesFocus);
-      tableCellRef.current?.focus();
-      filterLabelIconButtonRef.current?.focus();
-    });
-  }, []);
-
-  const hasActiveSorting = sortByField === column.id;
-
-  const tableSortLabelIconProps: TableSortLabelIconProps['ownerState'] = {
-    direction: sortByField === column.id ? sortDirection : 'asc',
-  };
-
-  const tableSortLabelClassNames = clsx(tableHeaderCellClassNames.sortLabelIcon, {
-    [`${tableHeaderCellClassNames.sortLabelIcon}--active`]: hasActiveSorting,
-  });
-
-  const tableFilterLabelClassNames = clsx(tableHeaderCellClassNames.filterLabelIcon, {
-    [`${tableHeaderCellClassNames.filterLabelIcon}--active`]: hasActiveFilter,
-  });
-
-  const shouldShowSortIcon = !!column.comparatorFactory;
-  const shouldShowFilterIcon = !!filter;
-  const tabIndex = shouldShowSortIcon || shouldShowFilterIcon ? 0 : -1;
-
-  const iconSpacing = +theme.spacing(2).replace('px', '');
-
-  const ariaSortLabel = useMemo((): TableCellProps<TRowData>['ariaSort'] => {
-    if (sortByField !== column.id) {
-      return undefined;
-    }
-    return sortDirection === 'asc' ? 'ascending' : 'descending';
-  }, [column.id, sortByField, sortDirection]);
-
-  return (
-    <TableCell
-      key={column.id}
-      ref={tableCellRef}
-      ariaSort={ariaSortLabel}
-      className={clsx(tableHeaderCellClassNames.root, {
-        [tableHeaderCellClassNamesFocus]: !!filterAnchorElement,
-      })}
-      column={column}
-      columnIndex={columnIndex}
-      canDrag={canDrag}
-      height={height}
-      order={order}
-      role={'columnheader'}
-      tabIndex={tabIndex}
-      sx={{
-        textAlign: 'left',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-        backgroundColor: theme.palette.background.paper,
-        [`&:hover, &:focus-visible, &:focus, &:focus-within, &.${tableHeaderCellClassNamesFocus}`]: {
-          [`.${tableHeaderCellClassNames.sortLabelIcon}, .${tableHeaderCellClassNames.filterLabelIcon}`]: {
-            display: 'inline-block',
-            opacity: 0.5,
-          },
-          [`.${tableHeaderCellClassNames.columnDivider}`]: {
-            opacity: 1,
-          },
-        },
-        [`.${tableHeaderCellClassNames.sortLabelIcon}--active, .${tableHeaderCellClassNames.filterLabelIcon}--active`]: {
-          display: 'inline-block',
-          opacity: '1 !important',
-        },
-        [`.${tableHeaderCellClassNames.sortLabelIcon}--active`]: {
-          color: theme.palette.text.secondary,
-        },
-        [`.${tableHeaderCellClassNames.filterLabelIcon}--active`]: {
-          color: theme.palette.secondary.main,
-        },
-      }}
-      width={width}
-      xOffset={xOffset}
-      onCustomDrag={onCustomDragTableHeaderCell}
-    >
-      {column.type === 'actions' && (
-        <Box
-          className={tableHeaderCellClassNames.content}
-          sx={visuallyHidden}
-        >
-          {t`Actions`}
-        </Box>
-      )}
-      {column.type !== 'actions' && (
-        <Box
-          sx={{
-            display: 'inline-flex',
-            alignItems: 'center',
-            [`&:hover .${tableHeaderCellClassNames.content}`]: {
-              maxWidth: `calc(100% + 16px - ${sum([shouldShowFilterIcon ? iconSpacing : 0, shouldShowSortIcon ? iconSpacing : 0, iconSpacing])}px)`,
-            },
-            width: '100%',
-          }}
-        >
-          {column.renderHeader ? (
-            <>
-              {column.renderHeader({
-                columnIndex,
-                column,
-              })}
-            </>
-          ) : (
-            <Tooltip
-              arrow
-              placement={'top'}
-              title={column.headerTooltipContent}
-            >
-
-              <Box
-                ref={contentRef}
-                className={tableHeaderCellClassNames.content}
-                sx={{
-                  cursor: 'pointer',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                  maxWidth: `calc(100% + 16px - ${sum([hasActiveSorting ? iconSpacing : 0, hasActiveFilter ? iconSpacing : 0, iconSpacing])}px)`,
-                  flexGrow: 1,
-                }}
-                onClick={onContentClick}
-              >
-                {column.renderHeaderContent
-                  ? column.renderHeaderContent({
-                    columnIndex,
-                    column,
-                  })
-                  : column.headerName ?? ''}
-              </Box>
-            </Tooltip>
-          )}
-          {shouldShowFilterIcon && (
-            <>
-              <TableFilterLabelIconButton
-                ref={filterLabelIconButtonRef}
-                className={tableFilterLabelClassNames}
-                tabIndex={0}
-                title={t('Show filter for {{name}}', { name: column.headerName || t('unknown') })}
-                onClick={onFilterIconClick}
-              >
-                <FilterAltIcon fontSize={'inherit'} />
-              </TableFilterLabelIconButton>
-              <Popover
-                anchorEl={filterAnchorElement}
-                id={popperId}
-                open={!!filterAnchorElement}
-                anchorOrigin={{
-                  vertical: 'bottom',
-                  horizontal: 'center',
-                }}
-                transformOrigin={{
-                  vertical: 'top',
-                  horizontal: 'center',
-                }}
-                sx={{
-                  zIndex: theme.zIndex.appBar + 1,
-                }}
-                onClose={onFilterPopOverClose}
-              >
-                <Paper
-                  square
-                  elevation={4}
-                  sx={{
-                    padding: theme.spacing(3),
-                  }}
-                >
-                  <TableHeaderFilter
-                    filter={filter}
-                    onFilterChange={onFilterChange}
-                  />
-                </Paper>
-              </Popover>
-            </>
-          )}
-          {shouldShowSortIcon && (
-            <>
-              <TableSortLabelIconButton
-                tabIndex={0}
-                title={t('Toggle sorting for {{name}}', { name: column.headerName || t('unknown') })}
-                className={tableSortLabelClassNames}
-                ownerState={tableSortLabelIconProps}
-                onClick={onTableSortClick}
-              >
-                <ArrowDownwardIcon fontSize={'inherit'} />
-              </TableSortLabelIconButton>
-            </>
-          )}
-          {column.resizable !== false && (
-            <Box
-              className={tableHeaderCellClassNames.columnDivider}
-              aria-label={t('Resize column {{name}}, use arrow keys to adjust the size.', { name: column.headerName || t('unknown') })}
-              role={'separator'}
-              tabIndex={0}
-              sx={{
-                width: '7px',
-                height: '18px',
-                position: 'absolute',
-                right: 0,
-                cursor: 'col-resize',
-                borderRight: `1px solid ${dividerColor}`,
-                boxSizing: 'border-box',
-                opacity: 0,
-
-                '&:focus-visible, &:focus, &:focus-within': {
-                  opacity: 1,
-                  borderColor: theme.palette.primary.main,
-                },
-                '&:hover': {
-                  opacity: 1,
-                  borderColor: theme.palette.primary.main,
-                },
-              }}
-              onMouseDown={onColumnDividerMouseDown}
-              onKeyDown={onColumnDividerKeyDown}
-            />
-          )}
-        </Box>
-      )}
-    </TableCell>
-  );
-};

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

@@ -1,104 +0,0 @@
-import {
-  FormProvider,
-  useForm,
-} from 'react-hook-form';
-import {
-  Box,
-  Button,
-} from '@mui/material';
-import {
-  useCallback,
-  useMemo,
-} from 'react';
-import { useStore } from 'zustand';
-import { useTranslation } from 'react-i18next';
-
-import type {
-  Filters,
-  FilterValues,
-} from '../../../models/filter';
-import type { UnwrapArray } from '../../../models/generic';
-import { useTableStoreContext } from '../../../stores/tableStore';
-
-import { TableFilter } from './TableFilter';
-
-export type TableHeaderFilterProps = {
-  readonly filter: UnwrapArray<Filters>;
-  readonly onFilterChange: () => void;
-};
-
-export const TableHeaderFilter = <TRowData,>({ filter, onFilterChange }: TableHeaderFilterProps) => {
-  const tableStore = useTableStoreContext<TRowData>();
-  const { t } = useTranslation();
-  const setFilterValue = useStore(tableStore, (state) => state.setFilterValue);
-
-  const initialDefaultValues = useMemo<FilterValues>(() => {
-    return {
-      [filter.id]: filter.initialFilterValue,
-    };
-  }, [filter.id, filter.initialFilterValue]);
-
-  const initialValues = useMemo<FilterValues>(() => {
-    return {
-      [filter.id]: filter.filterValue ?? filter.initialFilterValue,
-    };
-  }, [filter.id, filter.filterValue, filter.initialFilterValue]);
-
-  const formMethods = useForm<FilterValues>({
-    defaultValues: initialDefaultValues,
-    values: initialValues,
-  });
-
-  const { handleSubmit, formState: { isDirty } } = formMethods;
-
-  const onFormSubmit = useCallback(async (formFields: FilterValues) => {
-
-    await setFilterValue(filter.id, formFields[filter.id]);
-    onFilterChange();
-  }, [filter.id, onFilterChange, setFilterValue]);
-
-  const onResetButtonClick = useCallback(async () => {
-
-    await setFilterValue(filter.id, filter.initialFilterValue);
-    onFilterChange();
-  }, [filter.id, filter.initialFilterValue, onFilterChange, setFilterValue]);
-
-  return (
-    <FormProvider {...formMethods}>
-      <Box
-        autoComplete={'off'}
-        component={'form'}
-        id={'Filters'}
-        sx={{
-          minWidth: '400px',
-        }}
-        onSubmit={handleSubmit(onFormSubmit)}
-      >
-        <TableFilter filter={filter} />
-        <Box
-          sx={{
-            display: 'flex',
-            gap: 1,
-            justifyContent: 'flex-end',
-          }}
-        >
-          <Button
-            disabled={filter.isInitialFilterValue()}
-            variant={'outlined'}
-            onClick={onResetButtonClick}
-          >
-            {t`Remove filter`}
-          </Button>
-          <Button
-            disabled={!isDirty}
-            type={'submit'}
-            variant={'contained'}
-          >
-            {t`Apply`}
-          </Button>
-
-        </Box>
-      </Box>
-    </FormProvider>
-  );
-};

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

@@ -1,26 +0,0 @@
-import type { BoxProps } from '@mui/material';
-
-import { UseColumnsMenu } from '../../../hooks/useColumnsMenu';
-import { NestedDropdown } from '../NestedMenu';
-
-export type TableMenuProps = {
-  // eslint-disable-next-line @typescript-eslint/naming-convention
-  readonly ContainerProps?: Partial<BoxProps>;
-};
-
-export const TableMenu = ({ ContainerProps }: TableMenuProps) => {
-  const columnsMenu = UseColumnsMenu({});
-
-  return (
-    <NestedDropdown
-      ButtonProps={{
-        variant: 'text',
-        size: 'small',
-        color: 'primary',
-      }}
-      ContainerProps={ContainerProps}
-      MenuProps={{ elevation: 3 }}
-      menuItemsData={columnsMenu}
-    />
-  );
-};

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

@@ -1,65 +0,0 @@
-import { Button } from '@mui/material';
-import {
-  useCallback,
-  type MouseEvent as ReactMouseEvent,
-} from 'react';
-
-import type {
-  TableColumnReadableIndex,
-  TableRowParams,
-} from '../../../models/table';
-import { ConfigManager } from '../../../classes/managers/ConfigManager';
-import { PageEventBusManager } from '../../../classes/managers/PageEventBusManager';
-
-export type TableReadableIndexCellProps<TRowData> = {
-  readonly tableColumn: TableColumnReadableIndex<TRowData>;
-  readonly cell: TableRowParams<TRowData>;
-  readonly onReadableIndexClick: (row: TRowData) => void;
-  readonly getRowName?: (row: TRowData) => string;
-};
-
-export const TableReadableIndexCell = <TRowData, >({
-  tableColumn,
-  cell,
-  onReadableIndexClick,
-  getRowName,
-}: TableReadableIndexCellProps<TRowData>) => {
-  const onClick = useCallback((event: ReactMouseEvent) => {
-    if (onReadableIndexClick) {
-      if (!getRowName) {
-        throw new Error('getRowName is required when onReadableIndexClick is provided');
-      }
-      if (ConfigManager.instance.config.enablePageEvents) {
-        PageEventBusManager.instance.emit('click', {
-          label: getRowName(cell.row),
-          type: 'table-row-index',
-        });
-      }
-      event.preventDefault();
-      event.stopPropagation();
-      onReadableIndexClick(cell.row);
-    }
-  }, [getRowName, onReadableIndexClick, cell.row]);
-
-  if (!onReadableIndexClick) {
-    return cell.rowIndex + 1;
-  }
-
-  return (
-    <Button
-      variant={'text'}
-      size={'small'}
-      aria-label={tableColumn.getAriaLabel(cell)}
-      color={'primary'}
-      sx={{
-        width: '100%',
-        height: '100%',
-        minWidth: 'unset',
-        padding: 0,
-      }}
-      onClick={onClick}
-    >
-      {cell.rowIndex + 1}
-    </Button>
-  );
-};

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

@@ -1,59 +0,0 @@
-import { t } from 'i18next';
-import type { ReactNode } from 'react';
-import {
-  useCallback,
-  useState,
-} from 'react';
-import { useStore } from 'zustand';
-
-import {
-  SidebarMenu,
-  SidebarMenuItem,
-} from '../Sidebar';
-import { useTableStoreContext } from '../../../stores/tableStore';
-
-import {
-  TableFiltersSidebarItem,
-  TableFiltersSidebarItemIcon,
-} from './TableFiltersSidebarItem';
-
-export type TableSidebarMenuProps = {
-  readonly extraSidebarMenuItems?: ReactNode;
-};
-
-export const TableSidebarMenu = <TRowData, >({ extraSidebarMenuItems }: TableSidebarMenuProps) => {
-  const tableStore = useTableStoreContext<TRowData>();
-
-  const activeFiltersCount = useStore(tableStore, (state) => state.filters.filter(f => !f.isInitialFilterValue()).length);
-
-  const [isTableFiltersSidebarItemOpen, setIsTableFiltersSidebarItemOpen] = useState(false);
-
-  const onEpiDashboardFilterSidebarClose = useCallback(() => {
-    setIsTableFiltersSidebarItemOpen(false);
-  }, []);
-
-  const onEpiDashboardOpenFilterSidebarButtonClick = useCallback(() => {
-    setIsTableFiltersSidebarItemOpen(true);
-  }, []);
-
-  return (
-    <>
-      <SidebarMenu>
-        <SidebarMenuItem
-          first
-          badgeColor={'secondary'}
-          badgeContent={activeFiltersCount}
-          icon={<TableFiltersSidebarItemIcon />}
-          testIdAttributes={{ name: 'filters' }}
-          title={t`Open filters`}
-          onClick={onEpiDashboardOpenFilterSidebarButtonClick}
-        />
-        {extraSidebarMenuItems}
-      </SidebarMenu>
-      <TableFiltersSidebarItem
-        open={isTableFiltersSidebarItemOpen}
-        onClose={onEpiDashboardFilterSidebarClose}
-      />
-    </>
-  );
-};

package/src/components/ui/Table/classNames.ts

@@ -1,7 +0,0 @@
-export const tableHeaderCellClassNames = {
-  root: 'GENEPIX-TableHeaderCell',
-  content: 'GENEPIX-TableHeaderCell-content',
-  columnDivider: 'GENEPIX-TableHeaderCell-columnDivider',
-  sortLabelIcon: 'GENEPIX-TableHeaderCell-sortLabelIcon',
-  filterLabelIcon: 'GENEPIX-TableHeaderCell-filterLabelIcon',
-};