@databiosphere/findable-ui 5.0.0 → 6.0.0

package/src/components/Index/components/Cell/cell.tsx

@@ -4,6 +4,10 @@ export interface CellProps {
   value?: number | string | string[];
 }
 
+/**
+ * @deprecated - use BasicCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/BasicCell/basicCell"
+ */
+
 export const Cell = ({ value = "Unspecified" }: CellProps): JSX.Element => {
   if (typeof value === "string" || typeof value === "number") {
     return <div>{value}</div>;

package/src/components/Index/components/NTag/components/Tooltip/tooltip.tsx

@@ -28,6 +28,10 @@ export interface TooltipProps extends MTooltipProps {
   className?: string;
 }
 
+/**
+ * @deprecated - use Tooltip from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip"
+ */
+
 export const Tooltip = ({
   children,
   className,

package/src/components/Index/components/NTag/nTag.tsx

@@ -7,6 +7,10 @@ export interface NTagProps {
   TooltipTitle: ReactElement;
 }
 
+/**
+ * @deprecated - use NTag from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag"
+ */
+
 export const NTag = ({
   className,
   Tag,

package/src/components/Index/components/NTagCell/nTagCell.tsx

@@ -4,6 +4,8 @@ import {
   Typography,
 } from "@mui/material";
 import React, { forwardRef } from "react";
+import { TEXT_BODY_SMALL_400 } from "../../../../theme/common/typography";
+import { TypographyProps } from "../../../common/Typography/common/entities";
 import { NTag } from "../NTag/nTag";
 
 // Template constants
@@ -13,6 +15,7 @@ export type MetadataValue = string;
 
 export interface NTagCellProps {
   label: string;
+  TypographyProps?: TypographyProps;
   values: MetadataValue[];
 }
 
@@ -33,7 +36,15 @@ const Tag = forwardRef<HTMLDivElement, MChipProps>(function Tag(props, ref) {
   return <MChip ref={ref} {...props} />;
 });
 
-export const NTagCell = ({ label, values }: NTagCellProps): JSX.Element => {
+/**
+ * @deprecated - use NTagCell from "@databiosphere/findable-ui/lib/components/Table/components/TableCell/components/NTagCell/nTagCell"
+ */
+
+export const NTagCell = ({
+  label,
+  TypographyProps,
+  values,
+}: NTagCellProps): JSX.Element => {
   const metadataCount = values.length;
   const showNTag = metadataCount > MAX_DISPLAYABLE_VALUES;
   return (
@@ -42,13 +53,21 @@ export const NTagCell = ({ label, values }: NTagCellProps): JSX.Element => {
         <NTag
           Tag={<Tag label={`${metadataCount} ${label}`} variant="ntag" />}
           TooltipTitle={
-            <Typography display="block" variant="text-body-small-400">
+            <Typography display="block" variant={TEXT_BODY_SMALL_400}>
               {stringifyMetadataValues(values)}
             </Typography>
           }
         />
       ) : (
-        values.map((value, v) => <div key={`${value}${v}`}>{value}</div>)
+        values.map((value, v) => (
+          <Typography
+            key={`${value}${v}`}
+            variant="inherit"
+            {...TypographyProps}
+          >
+            {value}
+          </Typography>
+        ))
       )}
     </>
   );

package/src/components/Layout/components/Outline/common/constants.ts

@@ -1,3 +1,3 @@
-import { TabProps as MTabProps } from "@mui/material/Tab/Tab";
+import { TabProps as MTabProps } from "@mui/material";
 
 export const DEFAULT_TAB_VALUE: MTabProps["value"] = "";

package/src/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.tsx

@@ -18,7 +18,7 @@ const PARAM_FILTER = "filter";
 const PARAM_SORTING = "sorting";
 
 export interface ExploreViewLinkProps
-  extends Omit<LinkProps, "copyable" | "noWrap" | "url"> {
+  extends Omit<LinkProps, "copyable" | "noWrap" | "TypographyProps" | "url"> {
   url: UrlObjectWithHrefAndQuery;
 }
 

package/src/components/Links/components/Link/link.tsx

@@ -1,8 +1,13 @@
-import { Link as MLink, LinkProps as MLinkProps } from "@mui/material";
+import {
+  Link as MLink,
+  LinkProps as MLinkProps,
+  Typography as MTypography,
+} from "@mui/material";
 import NLink from "next/link";
 import React, { ReactNode } from "react";
 import { isValidUrl } from "../../../../common/utils";
 import { CopyToClipboard } from "../../../common/CopyToClipboard/copyToClipboard";
+import { TypographyProps } from "../../../common/Typography/common/entities";
 import { ANCHOR_TARGET, Url } from "../../common/entities";
 import {
   isClientSideNavigation,
@@ -18,6 +23,7 @@ export interface LinkProps {
   noWrap?: MLinkProps["noWrap"];
   onClick?: () => void;
   target?: ANCHOR_TARGET;
+  TypographyProps?: TypographyProps;
   url: Url /* url specified as UrlObject with href and query defined, and is currently only used for internal links */;
 }
 
@@ -28,6 +34,7 @@ export const Link = ({
   noWrap = false,
   onClick,
   target,
+  TypographyProps,
   url,
 }: LinkProps): JSX.Element => {
   if (isURLObjectWithHrefAndQuery(url)) {
@@ -54,6 +61,7 @@ export const Link = ({
               noWrap={noWrap}
               target={target || ANCHOR_TARGET.SELF}
               onClick={onClick}
+              {...TypographyProps}
             >
               {label}
             </MLink>
@@ -73,6 +81,7 @@ export const Link = ({
             onClick={onClick}
             rel="noopener noreferrer"
             target={target || ANCHOR_TARGET.BLANK}
+            {...TypographyProps}
           >
             {label}
           </MLink>
@@ -82,5 +91,9 @@ export const Link = ({
     }
   }
   /* Invalid URL */
-  return <>{label}</>;
+  return (
+    <MTypography component="span" variant="inherit" {...TypographyProps}>
+      {label}
+    </MTypography>
+  );
 };

package/src/components/Table/common/gridTable.styles.ts

@@ -20,9 +20,13 @@ export const GridTable = styled(MTable, {
     display: contents; /* required; allows grandchildren of grid template to appear as though direct child */
   }
 
+  tr {
+    background-color: ${white};
+  }
+
   td,
   th {
-    background-color: ${white};
+    background-color: inherit;
   }
 
   td,
@@ -38,8 +42,10 @@ export const GridTable = styled(MTable, {
   }
 
   [id^="grouped-row"] {
+    background-color: ${smokeLightest};
+
     td {
-      background-color: ${smokeLightest};
+      background-color: inherit;
       grid-column: 1 / -1;
     }
   }

package/src/components/Table/common/utils.ts

@@ -1,19 +1,20 @@
 import SouthRoundedIcon from "@mui/icons-material/SouthRounded";
-import { TableSortLabelProps } from "@mui/material/TableSortLabel/TableSortLabel";
+import { TableSortLabelProps } from "@mui/material";
 import {
   Cell,
+  Column,
   ColumnFiltersState,
   ColumnSort,
   InitialTableState,
   memo,
+  PaginationState,
   Row,
   RowData,
   SortDirection,
   sortingFns,
   Table,
+  VisibilityState,
 } from "@tanstack/react-table";
-import { Column } from "@tanstack/table-core";
-import { VisibilityState } from "@tanstack/table-core/src/features/Visibility";
 import { SelectCategory } from "../../../common/entities";
 import {
   ColumnConfig,
@@ -32,7 +33,7 @@ type CountByTerms = Map<any, number>;
 /**
  * Pinned cell and pinned cell index tuple.
  */
-type PinnedCell<T> = [Cell<T, unknown>, number];
+type PinnedCell<T extends RowData> = [Cell<T, unknown>, number];
 
 /**
  * Model of possible table data values.
@@ -50,7 +51,7 @@ type TableData = number | string | string[];
  * @param filterValue - Filter value or values.
  * @returns True if the row should be included in the filtered rows.
  */
-export function arrIncludesSome<T>(
+export function arrIncludesSome<T extends RowData>(
   row: Row<T>,
   columnId: string,
   filterValue: unknown[]
@@ -71,7 +72,7 @@ export function arrIncludesSome<T>(
  * @param columnFilters - Column filters state.
  * @returns Array of category views objects.
  */
-export function buildCategoryViews<T>(
+export function buildCategoryViews<T extends RowData>(
   columns: Column<T>[],
   columnFilters: ColumnFiltersState
 ): SelectCategory[] {
@@ -139,7 +140,9 @@ export function getColumnSortDirection(
  * @param rows - Table rows.
  * @returns filtered entity results as a blob.
  */
-export function generateDownloadBlob<T>(rows: Row<T>[]): Blob | undefined {
+export function generateDownloadBlob<T extends RowData>(
+  rows: Row<T>[]
+): Blob | undefined {
   if (rows.length === 0) {
     return;
   }
@@ -154,7 +157,7 @@ export function generateDownloadBlob<T>(rows: Row<T>[]): Blob | undefined {
  * @param table - Table.
  * @returns a list of edit column options.
  */
-export function getEditColumnOptions<T>(
+export function getEditColumnOptions<T extends RowData>(
   table: Table<T>
 ): CheckboxMenuListItem[] {
   const { getAllColumns, initialState } = table;
@@ -200,18 +203,20 @@ export function getFacetedUniqueValuesWithArrayValues<T extends RowData>(): (
 ) => () => CountByTerms {
   return (table, columnId) =>
     memo(
-      () => [table.getColumn(columnId).getFacetedRowModel()],
+      () => [table.getColumn(columnId)?.getFacetedRowModel()],
       (facetedRowModel) => {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any -- This type matches react table getFacetedUniqueValues return type.
         const facetedUniqueValues = new Map<any, number>();
-        for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
-          const value = facetedRowModel.flatRows[i]?.getValue(columnId);
-          if (Array.isArray(value)) {
-            value.map((val) => {
-              updateCountByTerms(facetedUniqueValues, val);
-            });
-          } else {
-            updateCountByTerms(facetedUniqueValues, value);
+        if (facetedRowModel) {
+          for (let i = 0; i < facetedRowModel.flatRows.length; i++) {
+            const value = facetedRowModel?.flatRows[i]?.getValue(columnId);
+            if (Array.isArray(value)) {
+              value.map((val) => {
+                updateCountByTerms(facetedUniqueValues, val);
+              });
+            } else {
+              updateCountByTerms(facetedUniqueValues, value);
+            }
           }
         }
         return facetedUniqueValues;
@@ -233,7 +238,9 @@ export function getFacetedUniqueValuesWithArrayValues<T extends RowData>(): (
  * @param columns - Table columns.
  * @returns string value for the css property grid-template-columns.
  */
-export function getGridTemplateColumns<T>(columns: Column<T>[]): string {
+export function getGridTemplateColumns<T extends RowData>(
+  columns: Column<T>[]
+): string {
   return columns
     .map(({ columnDef: { meta } }) => {
       const width = meta?.width;
@@ -282,7 +289,9 @@ export function getInitialTableStateSorting(
  * @param row - Row.
  * @returns pinned cell and index tuple.
  */
-export function getPinnedCellIndex<T>(row: Row<T>): PinnedCell<T> {
+export function getPinnedCellIndex<T extends RowData>(
+  row: Row<T>
+): PinnedCell<T> {
   const visibleCells = row.getVisibleCells();
   let pinnedIndex = 0;
   for (let i = 0; i < visibleCells.length; i++) {
@@ -299,7 +308,7 @@ export function getPinnedCellIndex<T>(row: Row<T>): PinnedCell<T> {
  * @param column - Table column.
  * @returns table sort label props.
  */
-export function getTableSortLabelProps<T>(
+export function getTableSortLabelProps<T extends RowData>(
   column: Column<T>
 ): TableSortLabelProps {
   const { getCanSort, getIsSorted, getToggleSortingHandler } = column;
@@ -312,12 +321,30 @@ export function getTableSortLabelProps<T>(
   };
 }
 
+/**
+ * Returns table state pagination.
+ * @param pageIndex - Explore state page index.
+ * @param pageSize - Explore state page size.
+ * @returns table state pagination.
+ */
+export function getTableStatePagination(
+  pageIndex = 0,
+  pageSize: number
+): PaginationState {
+  return {
+    pageIndex,
+    pageSize,
+  };
+}
+
 /**
  * Returns the list of visible table headers.
  * @param rows - Table rows.
  * @returns list of visible headers.
  */
-function getVisibleHeadersTableData<T>(rows: Row<T>[]): TableData[] {
+function getVisibleHeadersTableData<T extends RowData>(
+  rows: Row<T>[]
+): TableData[] {
   return rows[0]
     .getVisibleCells()
     .map((cell) => cell.column.columnDef.header as TableData);
@@ -328,7 +355,9 @@ function getVisibleHeadersTableData<T>(rows: Row<T>[]): TableData[] {
  * @param rows - Table rows.
  * @returns list of visible data.
  */
-function getVisibleRowsTableData<T>(rows: Row<T>[]): TableData[][] {
+function getVisibleRowsTableData<T extends RowData>(
+  rows: Row<T>[]
+): TableData[][] {
   return rows.map((row) =>
     row.getVisibleCells().map((cell) => cell.getValue() as TableData)
   );
@@ -339,7 +368,7 @@ function getVisibleRowsTableData<T>(rows: Row<T>[]): TableData[][] {
  * @param table - Table.
  * @returns true if a row is selected.
  */
-export function isAnyRowSelected<T>(table: Table<T>): boolean {
+export function isAnyRowSelected<T extends RowData>(table: Table<T>): boolean {
   const {
     getIsAllPageRowsSelected,
     getIsSomePageRowsSelected,
@@ -368,7 +397,9 @@ export function isClientFilteringEnabled(exploreMode: ExploreMode): boolean {
  * @param tableInstance - Table instance.
  * @returns true if the collapsable row is disabled.
  */
-export function isCollapsableRowDisabled<T>(tableInstance: Table<T>): boolean {
+export function isCollapsableRowDisabled<T extends RowData>(
+  tableInstance: Table<T>
+): boolean {
   return tableInstance.getVisibleLeafColumns().length === 1;
 }
 

package/src/components/Table/components/DownloadEntityResults/downloadEntityResults.tsx

@@ -1,16 +1,16 @@
-import { Row } from "@tanstack/react-table";
+import { Row, RowData } from "@tanstack/react-table";
 import React from "react";
 import { ButtonSecondary } from "../../../common/Button/components/ButtonSecondary/buttonSecondary";
 import { FileDownloadButton } from "../../../common/Button/components/FileDownloadButton/fileDownloadButton";
 import { DownloadIcon } from "../../../common/CustomIcon/components/DownloadIcon/downloadIcon";
 import { generateDownloadBlob } from "../../common/utils";
 
-export interface DownloadEntityResultsProps<T> {
+export interface DownloadEntityResultsProps<T extends RowData> {
   entityName: string;
   rows: Row<T>[];
 }
 
-export const DownloadEntityResults = <T extends object>({
+export const DownloadEntityResults = <T extends RowData>({
   entityName,
   rows,
 }: DownloadEntityResultsProps<T>): JSX.Element => {

package/src/components/Table/components/PaginationSummary/paginationSummary.tsx

@@ -1,4 +1,4 @@
-import { Typography } from "@mui/material";
+import { Fade, Typography } from "@mui/material";
 import React from "react";
 
 export interface PaginationSummaryProps {
@@ -13,13 +13,15 @@ export const PaginationSummary = ({
   totalResult,
 }: PaginationSummaryProps): JSX.Element => {
   return (
-    <div>
-      <Typography variant="text-body-400">Results </Typography>
-      <Typography variant="text-body-small-500">
-        {firstResult} - {lastResult}
-      </Typography>
-      <Typography variant="text-body-400"> of </Typography>
-      <Typography variant="text-body-small-500">{totalResult}</Typography>
-    </div>
+    <Fade in={totalResult > 0}>
+      <div>
+        <Typography variant="text-body-400">Results </Typography>
+        <Typography variant="text-body-small-500">
+          {firstResult} - {lastResult}
+        </Typography>
+        <Typography variant="text-body-400"> of </Typography>
+        <Typography variant="text-body-small-500">{totalResult}</Typography>
+      </div>
+    </Fade>
   );
 };

package/src/components/Table/components/TableBody/tableBody.tsx

@@ -1,5 +1,5 @@
 import { TableBody as MTableBody } from "@mui/material";
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import { useWindowVirtualizer } from "@tanstack/react-virtual";
 import React, { useCallback } from "react";
 import { ROW_DIRECTION } from "../../common/entities";
@@ -9,12 +9,12 @@ import { TableRows } from "../TableRows/tableRows";
 
 const OVERSCAN = 20;
 
-export interface TableBodyProps<T> {
+export interface TableBodyProps<T extends RowData> {
   rowDirection: ROW_DIRECTION;
   tableInstance: Table<T>;
 }
 
-export const TableBody = <T extends object>({
+export const TableBody = <T extends RowData>({
   rowDirection,
   tableInstance,
 }: TableBodyProps<T>): JSX.Element => {

package/src/components/Table/components/TableCell/common/utils.ts

@@ -1,5 +1,5 @@
-import { TableCellProps as MTableCellProps } from "@mui/material/TableCell/TableCell";
-import { CoreCell, CoreHeader } from "@tanstack/table-core";
+import { TableCellProps as MTableCellProps } from "@mui/material";
+import { CoreCell, CoreHeader, RowData } from "@tanstack/react-table";
 import { ACCESSOR_KEYS } from "../../../../TableCreator/common/constants";
 
 /**
@@ -7,7 +7,7 @@ import { ACCESSOR_KEYS } from "../../../../TableCreator/common/constants";
  * @param id - Cell ID.
  * @returns table cell padding.
  */
-export function getTableCellPadding<T extends object, TValue>(
+export function getTableCellPadding<T extends RowData, TValue>(
   id: CoreHeader<T, TValue>["id"] | CoreCell<T, TValue>["id"]
 ): MTableCellProps["padding"] {
   if (id === ACCESSOR_KEYS.SELECT) {

package/src/components/Table/components/TableCell/components/BasicCell/basicCell.tsx

@@ -0,0 +1,52 @@
+import { Typography } from "@mui/material";
+import React, { Fragment, ReactNode } from "react";
+import { LABEL } from "../../../../../../apis/azul/common/entities";
+import { TypographyProps } from "../../../../../common/Typography/common/entities";
+
+export interface BasicCellProps {
+  TypographyProps?: TypographyProps;
+  value?: ReactNode;
+}
+
+export const BasicCell = ({
+  TypographyProps,
+  value = LABEL.UNSPECIFIED,
+}: BasicCellProps): JSX.Element | null => {
+  if (isValueNumberOrString(value)) {
+    return (
+      <Typography variant="inherit" {...TypographyProps}>
+        {value}
+      </Typography>
+    );
+  }
+  if (isValueArray(value)) {
+    return (
+      <Fragment>
+        {value.map((v: number | string) => (
+          <Typography key={v} variant="inherit" {...TypographyProps}>
+            {v}
+          </Typography>
+        ))}
+      </Fragment>
+    );
+  }
+  return null;
+};
+
+/**
+ * Returns true if value is an array of strings.
+ * @param value - Value.
+ * @returns value is an array of strings.
+ */
+function isValueArray(value: ReactNode): value is (number | string)[] {
+  return Array.isArray(value) && value.every(isValueNumberOrString);
+}
+
+/**
+ * Returns true if value is a number or a string.
+ * @param value - Value.
+ * @returns true if value is a number or a string.
+ */
+function isValueNumberOrString(value: ReactNode): value is number | string {
+  return typeof value === "number" || typeof value === "string";
+}

package/src/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip.styles.ts

@@ -0,0 +1,11 @@
+import styled from "@emotion/styled";
+
+export const TooltipContent = styled.span`
+  overflow: scroll;
+  overscroll-behavior: none;
+  padding: 8px 12px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;

package/src/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip.tsx

@@ -0,0 +1,86 @@
+import {
+  PopperProps,
+  Tooltip as MTooltip,
+  TooltipProps as MTooltipProps,
+} from "@mui/material";
+import { detectOverflow } from "@popperjs/core";
+import { State } from "@popperjs/core/lib/types";
+import React, { useMemo, useState } from "react";
+import { TooltipContent } from "./tooltip.styles";
+
+const DEFAULT_FLIP_MODIFIER = {
+  enabled: true,
+  name: "flip",
+  options: {
+    fallbackPlacements: ["bottom", "right", "left"],
+  },
+};
+
+const DEFAULT_PREVENT_OVERFLOW_MODIFIER = {
+  enabled: true,
+  name: "preventOverflow",
+  options: {
+    padding: 16,
+  },
+};
+
+export interface TooltipProps extends MTooltipProps {
+  className?: string;
+}
+
+export const Tooltip = ({
+  children,
+  className,
+  title,
+  ...props /* Spread props to allow for Mui Tooltip specific prop overrides. */
+}: TooltipProps): JSX.Element => {
+  const [maxHeight, setMaxHeight] = useState<number>();
+  const modifiers: PopperProps["modifiers"] = useMemo(
+    () => [
+      {
+        enabled: true,
+        fn: ({ state }): void => setMaxHeight(calculateMaxHeight(state)),
+        name: "maxHeight",
+        phase: "main",
+        requiresIfExists: ["offset"],
+      },
+      DEFAULT_FLIP_MODIFIER,
+      DEFAULT_PREVENT_OVERFLOW_MODIFIER,
+    ],
+    []
+  );
+  return (
+    <MTooltip
+      arrow
+      className={className}
+      onClose={(): void => setMaxHeight(undefined)}
+      slotProps={{
+        popper: { modifiers },
+        tooltip: { style: { display: "flex", maxHeight, padding: 0 } },
+      }}
+      title={<TooltipContent>{title}</TooltipContent>}
+      {...props}
+    >
+      {children}
+    </MTooltip>
+  );
+};
+
+/**
+ * Calculate the max height of the tooltip based on the current popper modifier state.
+ * @param state - Popper modifier state.
+ * @returns tooltip maximum height.
+ */
+function calculateMaxHeight(state: State): number | undefined {
+  const overflow = detectOverflow(state);
+  const { placement } = state;
+  if (placement === "left" || placement === "right") {
+    return window.innerHeight - 32;
+  }
+  if (placement === "top") {
+    return state.rects.popper.height - overflow.top - 24;
+  }
+  if (placement === "bottom") {
+    return state.rects.popper.height - overflow.bottom - 24;
+  }
+}

package/src/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag.tsx

@@ -0,0 +1,21 @@
+import React, { ReactElement } from "react";
+import { Tooltip } from "./components/Tooltip/tooltip";
+
+export interface NTagProps {
+  className?: string;
+  Tag: ReactElement;
+  TooltipTitle: ReactElement;
+}
+
+export const NTag = ({
+  className,
+  Tag,
+  TooltipTitle,
+  ...props /* Spread props to allow for Mui Tooltip specific prop overrides. */
+}: NTagProps): JSX.Element => {
+  return (
+    <Tooltip className={className} title={TooltipTitle} {...props}>
+      {Tag}
+    </Tooltip>
+  );
+};