@databiosphere/findable-ui 50.7.0 → 50.8.0

package/src/components/Table/components/TableToolbar/components/RowPreview/components/Section/components/RowDetail/rowDetail.tsx

@@ -1,51 +0,0 @@
-import { Grid, Typography } from "@mui/material";
-import { RowData } from "@tanstack/react-table";
-import { JSX, useState } from "react";
-import { ListConfig } from "../../../../../../../../../../config/entities";
-import { TYPOGRAPHY_PROPS } from "../../../../../../../../../../styles/common/mui/typography";
-import { ButtonTextPrimary } from "../../../../../../../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary";
-import { ComponentCreator } from "../../../../../../../../../ComponentCreator/ComponentCreator";
-import { Section } from "./rowDetail.styles";
-
-const MIN_COLUMNS = 6;
-
-interface RowDetailProps<T extends RowData> {
-  className?: string;
-  columns: ListConfig<T>["columns"];
-  expanded?: boolean;
-  minColumns?: number;
-  rowData: T;
-}
-
-export const RowDetail = <T extends RowData>({
-  className,
-  columns,
-  expanded = true,
-  minColumns = MIN_COLUMNS,
-  rowData,
-}: RowDetailProps<T>): JSX.Element | null => {
-  const [showMore, setShowMore] = useState<boolean>(expanded);
-  const visibleColumns = showMore ? columns : columns.slice(0, minColumns);
-  const buttonText = showMore ? "Show less" : "Show more";
-  const onToggleShowMore = (): void => setShowMore(!showMore);
-  if (!rowData) return null;
-  return (
-    <Section className={className}>
-      {visibleColumns.map(({ componentConfig, header }, i) => (
-        <Grid key={i}>
-          <Typography
-            color={TYPOGRAPHY_PROPS.COLOR.INK_LIGHT}
-            variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}
-            {...componentConfig.props?.TypographyProps}
-          >
-            {header}
-          </Typography>
-          <ComponentCreator components={[componentConfig]} response={rowData} />
-        </Grid>
-      ))}
-      <ButtonTextPrimary onClick={onToggleShowMore}>
-        {buttonText}
-      </ButtonTextPrimary>
-    </Section>
-  );
-};

package/src/components/Table/components/TableToolbar/components/RowPreview/components/Section/section.styles.ts

@@ -1,12 +0,0 @@
-import styled from "@emotion/styled";
-
-export const Section = styled.div`
-  display: grid;
-  gap: 16px;
-  padding: 16px 24px 24px;
-
-  .MuiTypography-heading-small {
-    font-size: 18px;
-    line-height: 26px;
-  }
-`;

package/src/components/Table/components/TableToolbar/components/RowPreview/components/Section/section.tsx

@@ -1,28 +0,0 @@
-import { Typography } from "@mui/material";
-import { JSX, ReactNode } from "react";
-import { TYPOGRAPHY_PROPS } from "../../../../../../../../styles/common/mui/typography";
-import { Section as PreviewSection } from "./section.styles";
-
-export interface SectionProps {
-  children?: ReactNode | ReactNode[];
-  className?: string;
-  title?: ReactNode;
-}
-
-export const Section = ({
-  children,
-  className,
-  title,
-}: SectionProps): JSX.Element => {
-  return (
-    <PreviewSection className={className}>
-      <Typography
-        component="div"
-        variant={TYPOGRAPHY_PROPS.VARIANT.HEADING_SMALL}
-      >
-        {title}
-      </Typography>
-      {children}
-    </PreviewSection>
-  );
-};

package/src/components/Table/components/TableToolbar/components/RowPreview/rowPreview.tsx

@@ -1,26 +0,0 @@
-import { RowData, Table } from "@tanstack/react-table";
-import { JSX } from "react";
-import { ComponentsConfig } from "../../../../../../config/entities";
-import { ComponentCreator } from "../../../../../ComponentCreator/ComponentCreator";
-
-export interface RowPreviewProps<T extends RowData> {
-  rowPreviewView?: ComponentsConfig;
-  tableInstance: Table<T>;
-}
-
-export const RowPreview = <T extends RowData>({
-  rowPreviewView,
-  tableInstance,
-}: RowPreviewProps<T>): JSX.Element | null => {
-  if (!rowPreviewView) return null;
-  const { getRowPreviewRow } = tableInstance;
-  const { original: response } = getRowPreviewRow() || {};
-  if (!response) return null;
-  return (
-    <ComponentCreator
-      components={rowPreviewView}
-      response={response}
-      viewContext={{ tableInstance }}
-    />
-  );
-};

package/src/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.styles.ts

@@ -1,8 +0,0 @@
-import styled from "@emotion/styled";
-import { DropdownMenu as DXDropdownMenu } from "../../../../../../../common/DropdownMenu/dropdownMenu";
-
-export const DropdownMenu = styled(DXDropdownMenu)`
-  .MuiPaper-menu {
-    min-width: 288px;
-  }
-`;

package/src/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.tsx

@@ -1,37 +0,0 @@
-import { MenuProps as MMenuProps } from "@mui/material";
-import { JSX } from "react";
-import { DropdownButton } from "../../../../../../../common/Button/components/DropdownButton/dropdownButton";
-import { DropdownMenuItemProps } from "../../../../../../../common/DropdownMenu/common/entities";
-import { DropdownMenuProps as DXDropdownMenuProps } from "../../../../../../../common/DropdownMenu/dropdownMenu";
-import { DropdownMenu as RowSelectionDropdownMenu } from "./dropdownMenu.styles";
-
-const DEFAULT_MENU_PROPS: Partial<MMenuProps> = {
-  anchorOrigin: { horizontal: "left", vertical: "bottom" },
-  transformOrigin: { horizontal: "left", vertical: "top" },
-};
-
-export interface DropdownMenuProps {
-  button?: DXDropdownMenuProps["button"];
-  children: ({ closeMenu }: DropdownMenuItemProps) => JSX.Element[];
-  className?: string;
-}
-
-export const DropdownMenu = ({
-  button = (props): JSX.Element => (
-    <DropdownButton {...props}>Edit</DropdownButton>
-  ),
-  children,
-  className,
-  ...props /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */
-}: DropdownMenuProps): JSX.Element => {
-  return (
-    <RowSelectionDropdownMenu
-      {...DEFAULT_MENU_PROPS}
-      className={className}
-      button={button}
-      {...props}
-    >
-      {({ closeMenu }): JSX.Element[] => children({ closeMenu })}
-    </RowSelectionDropdownMenu>
-  );
-};

package/src/components/Table/components/TableToolbar/components/RowSelection/rowSelection.styles.ts

@@ -1,8 +0,0 @@
-import styled from "@emotion/styled";
-
-export const RowSelection = styled.div`
-  align-items: center;
-  display: flex;
-  gap: 16px;
-  justify-content: flex-start;
-`;

package/src/components/Table/components/TableToolbar/components/RowSelection/rowSelection.tsx

@@ -1,30 +0,0 @@
-import { Typography } from "@mui/material";
-import { Row, RowData } from "@tanstack/react-table";
-import { JSX } from "react";
-import { ComponentsConfig } from "../../../../../../config/entities";
-import { TYPOGRAPHY_PROPS } from "../../../../../../styles/common/mui/typography";
-import { ComponentCreator } from "../../../../../ComponentCreator/ComponentCreator";
-import { RowSelection as RowSelectionActions } from "./rowSelection.styles";
-
-export interface RowSelectionProps<T extends RowData> {
-  className?: string;
-  rows: Row<T>[];
-  rowSelectionView?: ComponentsConfig;
-}
-
-export const RowSelection = <T extends RowData>({
-  className,
-  rows,
-  rowSelectionView,
-}: RowSelectionProps<T>): JSX.Element | null => {
-  return (
-    <RowSelectionActions className={className}>
-      <Typography variant={TYPOGRAPHY_PROPS.VARIANT.BODY_400}>
-        {rows.length} items selected:
-      </Typography>
-      {rowSelectionView ? (
-        <ComponentCreator components={rowSelectionView} response={rows} />
-      ) : null}
-    </RowSelectionActions>
-  );
-};

package/src/components/Table/components/TableToolbar/constants.ts

@@ -1,8 +0,0 @@
-import { GridProps } from "@mui/material";
-
-export const GRID_PROPS: GridProps = {
-  alignItems: "center",
-  container: true,
-  direction: "row",
-  gap: 2,
-};

package/src/components/Table/components/TableToolbar/tableToolbar.styles.ts

@@ -1,19 +0,0 @@
-import styled from "@emotion/styled";
-import { Toolbar as MToolbar } from "@mui/material";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-
-export const StyledToolbar = styled(MToolbar)`
-  align-items: center;
-  background-color: ${PALETTE.COMMON_WHITE};
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  justify-content: space-between;
-  padding: 16px;
-
-  .MuiGrid-root {
-    &:empty {
-      display: none;
-    }
-  }
-`;

package/src/components/Table/components/TableToolbar/tableToolbar.tsx

@@ -1,61 +0,0 @@
-import { Grid } from "@mui/material";
-import { RowData, Table } from "@tanstack/react-table";
-import { Fragment, JSX } from "react";
-import { ListViewConfig } from "../../../../config/entities";
-import { useExploreState } from "../../../../hooks/useExploreState";
-import { ViewToggle } from "../../../Index/components/EntityView/components/controls/ViewToggle/viewToggle";
-import { isAnyRowSelected } from "../../common/utils";
-import { PaginationSummary } from "../PaginationSummary/paginationSummary";
-import { TableDownload } from "../TableFeatures/TableDownload/tableDownload";
-import { ColumnGrouping } from "./components/ColumnGrouping/columnGrouping";
-import { ColumnVisibility } from "./components/ColumnVisibility/columnVisibility";
-import { RowPreview } from "./components/RowPreview/rowPreview";
-import { RowSelection } from "./components/RowSelection/rowSelection";
-import { GRID_PROPS } from "./constants";
-import { StyledToolbar } from "./tableToolbar.styles";
-
-export interface TableToolbarProps<T extends RowData> {
-  listView?: ListViewConfig;
-  tableInstance: Table<T>;
-}
-
-export const TableToolbar = <T extends RowData>({
-  listView,
-  tableInstance,
-}: TableToolbarProps<T>): JSX.Element => {
-  const { exploreState } = useExploreState();
-  const { paginationState } = exploreState;
-  const { currentPage, pages, pageSize, rows } = paginationState;
-  const { getSelectedRowModel } = tableInstance;
-  const { rowPreviewView } = listView || {};
-  return (
-    <Fragment>
-      <StyledToolbar>
-        <Grid {...GRID_PROPS} gap={6}>
-          <ViewToggle />
-          {isAnyRowSelected(tableInstance) ? (
-            <RowSelection
-              rows={getSelectedRowModel().rows}
-              rowSelectionView={listView?.rowSelectionView}
-            />
-          ) : (
-            <PaginationSummary
-              firstResult={(currentPage - 1) * pageSize + 1}
-              lastResult={currentPage === pages ? rows : pageSize * currentPage}
-              totalResult={rows}
-            />
-          )}
-        </Grid>
-        <Grid {...GRID_PROPS}>
-          <TableDownload table={tableInstance} />
-          <ColumnGrouping tableInstance={tableInstance} />
-          <ColumnVisibility tableInstance={tableInstance} />
-        </Grid>
-      </StyledToolbar>
-      <RowPreview
-        rowPreviewView={rowPreviewView}
-        tableInstance={tableInstance}
-      />
-    </Fragment>
-  );
-};

package/src/components/Table/components/TableToolbar2/tableToolbar2.styles.ts

@@ -1,18 +0,0 @@
-import styled from "@emotion/styled";
-import { Toolbar as MToolbar, Stack } from "@mui/material";
-import { PALETTE } from "../../../../styles/common/constants/palette";
-
-export const StyledToolbar = styled(MToolbar)`
-  align-items: center;
-  background-color: ${PALETTE.COMMON_WHITE};
-  display: flex;
-  padding: 16px;
-`;
-
-export const StyledStack = styled(Stack)`
-  align-items: center;
-  flex: 1;
-  flex-direction: row;
-  gap: 8px;
-  justify-content: flex-end;
-`;

package/src/components/Table/components/TableToolbar2/tableToolbar2.tsx

@@ -1,17 +0,0 @@
-import { RowData } from "@tanstack/react-table";
-import { JSX } from "react";
-import { TableDownload } from "../TableFeatures/TableDownload/tableDownload";
-import { StyledStack, StyledToolbar } from "./tableToolbar2.styles";
-import { TableToolbar2Props } from "./types";
-
-export const TableToolbar2 = <T extends RowData>({
-  table,
-}: TableToolbar2Props<T>): JSX.Element => {
-  return (
-    <StyledToolbar>
-      <StyledStack>
-        <TableDownload table={table} />
-      </StyledStack>
-    </StyledToolbar>
-  );
-};

package/src/components/Table/components/TableToolbar2/types.ts

@@ -1,5 +0,0 @@
-import { RowData, Table } from "@tanstack/react-table";
-
-export interface TableToolbar2Props<T extends RowData> {
-  table: Table<T>;
-}

package/src/components/Table/coreOptions/state/pagination/constants.ts

@@ -1,8 +0,0 @@
-import { PaginationTableState } from "@tanstack/react-table";
-
-export const PAGINATION_TABLE_STATE: PaginationTableState = {
-  pagination: {
-    pageIndex: 0,
-    pageSize: 10,
-  },
-};

package/src/components/Table/coreOptions/state/pagination/utils.ts

@@ -1,21 +0,0 @@
-import { InitialTableState, PaginationTableState } from "@tanstack/react-table";
-import { PAGINATION_TABLE_STATE } from "./constants";
-
-/**
- * Initializes pagination state by merging default values with initial state.
- * TanStack Table always applies a default pagination of `{ pageIndex: 0, pageSize: 10 }`,
- * so this function ensures custom pagination state is properly initialized from the initial state.
- * @param initialState - The initial state.
- * @returns The initialized pagination state.
- */
-export function initPaginationState(
-  initialState?: InitialTableState,
-): PaginationTableState {
-  if (!initialState?.pagination) return PAGINATION_TABLE_STATE;
-  return {
-    pagination: {
-      ...PAGINATION_TABLE_STATE.pagination,
-      ...initialState.pagination,
-    },
-  };
-}

package/src/components/Table/featureOptions/facetedColumn/getFacetedMinMaxValues.ts

@@ -1,64 +0,0 @@
-import { getMemoOptions, memo, RowData, Table } from "@tanstack/react-table";
-
-/**
- * Returns an array of two numbers, the minimum and maximum values for the column, or undefined if the column does not exist or has no values.
- * Customized version of the default getFacetedMinMaxValues function from tanstack table handling mixed null and possible NaN values.
- * See https://tanstack.com/table/v8/docs/api/features/column-faceting#getfacetedminmaxvalues.
- * @returns An array of two numbers, the minimum and maximum values for the column, or undefined if the column does not exist or has no values.
- */
-export function getFacetedMinMaxValues<TData extends RowData>(): (
-  table: Table<TData>,
-  columnId: string,
-) => () => undefined | [number, number] {
-  return (table, columnId) =>
-    memo(
-      () => [table.getColumn(columnId)?.getFacetedRowModel()],
-      // eslint-disable-next-line sonarjs/cognitive-complexity -- Customized copy of tanstack table function.
-      (facetedRowModel) => {
-        if (!facetedRowModel) return undefined;
-
-        // Initialize with the smallest and largest possible numbers.
-        const facetedMinMaxValues: [number, number] = [Infinity, -Infinity];
-
-        for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
-          const values =
-            facetedRowModel.flatRows[i]!.getUniqueValues<number>(columnId);
-
-          for (let j = 0; j < values.length; j++) {
-            const value = values[j]!;
-            // Convert value to a number.
-            const numericValue = Number(value);
-
-            // Skip null and NaN values.
-            if (value === null || isNaN(numericValue)) continue;
-
-            if (numericValue < facetedMinMaxValues[0]) {
-              facetedMinMaxValues[0] = numericValue;
-            }
-            if (numericValue > facetedMinMaxValues[1]) {
-              facetedMinMaxValues[1] = numericValue;
-            }
-          }
-        }
-
-        // Return undefined if all values are null or NaN.
-        if (
-          facetedMinMaxValues[0] === Infinity &&
-          facetedMinMaxValues[1] === -Infinity
-        ) {
-          return undefined;
-        }
-
-        // Normalize -0 to 0.
-        if (Object.is(facetedMinMaxValues[0], -0)) {
-          facetedMinMaxValues[0] = 0;
-        }
-        if (Object.is(facetedMinMaxValues[1], -0)) {
-          facetedMinMaxValues[1] = 0;
-        }
-
-        return facetedMinMaxValues;
-      },
-      getMemoOptions(table.options, "debugTable", "getFacetedMinMaxValues"),
-    );
-}

package/src/components/Table/featureOptions/facetedColumn/utils.ts

@@ -1,14 +0,0 @@
-import { COLLATOR_CASE_INSENSITIVE } from "../../../../common/constants";
-
-/**
- * Sorts Map entries by key.
- * @param facetedValues - Map of faceted values.
- * @returns Sorted array of [key, value] entries.
- */
-export function getSortedFacetedValues(
-  facetedValues: Map<unknown, number>,
-): [unknown, number][] {
-  return [...facetedValues].sort((a, b) =>
-    COLLATOR_CASE_INSENSITIVE.compare(String(a), String(b)),
-  );
-}

package/src/components/Table/featureOptions/tableDownload/constants.ts

@@ -1,9 +0,0 @@
-import { RowData } from "@tanstack/react-table";
-import { TableDownloadOptions } from "../../features/TableDownload/types";
-
-export const TABLE_DOWNLOAD_OPTIONS: Pick<
-  TableDownloadOptions<RowData>,
-  "enableTableDownload"
-> = {
-  enableTableDownload: false,
-};

package/src/components/Table/features/RowPosition/constants.ts

@@ -1,37 +0,0 @@
-import {
-  Cell,
-  Column,
-  Row,
-  RowData,
-  RowModel,
-  Table,
-  TableFeature,
-  TableOptionsResolved,
-} from "@tanstack/react-table";
-import { getRowModel, getRowPosition } from "./utils";
-
-export const ROW_POSITION: TableFeature = {
-  createCell: <T extends RowData, TValue>(
-    cell: Cell<T, TValue>,
-    column: Column<T>,
-    row: Row<T>,
-    table: Table<T>,
-  ): void => {
-    row.getRowPosition = (): number => {
-      return getRowPosition(row.id, table);
-    };
-  },
-  createTable: <T extends RowData>(table: Table<T>): void => {
-    table.getRowModel = (): RowModel<T> => {
-      const rowModel = table.getPaginationRowModel();
-      return getRowModel(table, rowModel);
-    };
-  },
-  getDefaultOptions: <T extends RowData>(): Partial<
-    TableOptionsResolved<T>
-  > => {
-    return {
-      enableRowPosition: false,
-    };
-  },
-};

package/src/components/Table/features/RowPosition/types.ts

@@ -1,7 +0,0 @@
-export interface RowPositionOptions {
-  enableRowPosition?: boolean;
-}
-
-export interface RowPositionRow {
-  getRowPosition: () => number;
-}

package/src/components/Table/features/RowPosition/utils.ts

@@ -1,56 +0,0 @@
-import { RowData, RowModel, Table } from "@tanstack/react-table";
-
-/**
- * Returns row model, with getter for row position.
- * @param table - Table.
- * @param rowModel - Row model.
- * @returns row model.
- */
-export function getRowModel<T extends RowData>(
-  table: Table<T>,
-  rowModel: RowModel<T>,
-): RowModel<T> {
-  let i = 0;
-  rowModel.flatRows.forEach(({ getIsGrouped, id }) => {
-    const isGroupedRow = getIsGrouped();
-    const index = isGroupedRow ? -1 : i; // Capture the current value of i for this iteration.
-    rowModel.rowsById[id].getRowPosition = (): number =>
-      calculateRowPosition(table, index);
-    if (isGroupedRow) return; // Iterate only for non-grouped rows.
-    i++;
-  });
-  return rowModel;
-}
-
-/**
- * Returns the position of the row in the table.
- * @param rowId - Row ID.
- * @param table - Table.
- * @returns row position.
- */
-export function getRowPosition<T extends RowData>(
-  rowId: string,
-  table: Table<T>,
-): number {
-  const { getRowModel } = table;
-  const { rowsById } = getRowModel();
-  return rowsById[rowId].getRowPosition();
-}
-
-/**
- * Calculates the position of the row in the table.
- * @param table - Table.
- * @param index - Row index.
- * @returns row position.
- */
-function calculateRowPosition<T extends RowData>(
-  table: Table<T>,
-  index: number,
-): number {
-  if (index < 0) return index; // Grouped rows have a position of -1.
-  const { getState } = table;
-  const {
-    pagination: { pageIndex, pageSize },
-  } = getState();
-  return pageIndex * pageSize + (index + 1);
-}

package/src/components/Table/features/RowPreview/constants.ts

@@ -1,65 +0,0 @@
-import {
-  functionalUpdate,
-  InitialTableState,
-  makeStateUpdater,
-  Row,
-  RowData,
-  Table,
-  TableFeature,
-  TableOptionsResolved,
-  TableState,
-  Updater,
-} from "@tanstack/react-table";
-import { RowPreviewState } from "./entities";
-import {
-  getIsPreview,
-  getIsRowPreview,
-  getRowPreviewRow,
-  togglePreview,
-  toggleRowPreview,
-} from "./utils";
-
-export const ROW_PREVIEW: TableFeature = {
-  createRow: <T extends RowData>(row: Row<T>, table: Table<T>): void => {
-    row.getIsPreview = (): boolean => {
-      return getIsPreview(row, table);
-    };
-    row.togglePreview = (): void => {
-      togglePreview(row, table);
-    };
-  },
-  createTable: <T extends RowData>(table: Table<T>): void => {
-    table.getIsRowPreview = (): boolean => {
-      return getIsRowPreview(table);
-    };
-    table.getRowPreviewRow = (): Row<T> | undefined => {
-      return getRowPreviewRow(table);
-    };
-    table.resetRowPreview = (): void => {
-      table.setRowPreview(undefined);
-    };
-    table.setRowPreview = (updater: Updater<RowPreviewState>): void => {
-      const safeUpdater: Updater<RowPreviewState> = (old: RowPreviewState) => {
-        return functionalUpdate(updater, old);
-      };
-      return table.options.onRowPreviewChange?.(safeUpdater);
-    };
-    table.toggleRowPreview = (): void => {
-      toggleRowPreview(table);
-    };
-  },
-  getDefaultOptions: <T extends RowData>(
-    table: Table<T>,
-  ): Partial<TableOptionsResolved<T>> => {
-    return {
-      enableRowPreview: false,
-      onRowPreviewChange: makeStateUpdater("rowPreview", table),
-    };
-  },
-  getInitialState: (initialState?: InitialTableState): Partial<TableState> => {
-    return {
-      ...initialState,
-      rowPreview: undefined,
-    } as Partial<TableState>;
-  },
-};

package/src/components/Table/features/RowPreview/entities.ts

@@ -1,25 +0,0 @@
-import { OnChangeFn, Row, RowData, Updater } from "@tanstack/react-table";
-
-export interface RowPreviewInstance<T extends RowData> {
-  getIsRowPreview: () => boolean /* Is row preview open */;
-  getRowPreviewRow: () => Row<T> | undefined;
-  resetRowPreview: () => void;
-  setRowPreview: (updater: Updater<RowPreviewState>) => void;
-  toggleRowPreview: () => void;
-}
-
-export interface RowPreviewOptions {
-  enableRowPreview?: boolean;
-  onRowPreviewChange?: OnChangeFn<RowPreviewState>;
-}
-
-export interface RowPreviewRow {
-  getIsPreview: () => boolean /* Is row previewed */;
-  togglePreview: () => void;
-}
-
-export type RowPreviewState = { [id: string]: boolean } | undefined;
-
-export interface RowPreviewTableState {
-  rowPreview: RowPreviewState;
-}