@databiosphere/findable-ui 4.0.0 → 6.0.0

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>
+  );
+};

package/src/components/Table/components/TableCell/components/NTagCell/nTagCell.tsx

@@ -0,0 +1,70 @@
+import {
+  Chip as MChip,
+  ChipProps as MChipProps,
+  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 "./components/NTag/nTag";
+
+// Template constants
+const MAX_DISPLAYABLE_VALUES = 1;
+
+export type MetadataValue = string;
+
+export interface NTagCellProps {
+  label: string;
+  TypographyProps?: TypographyProps;
+  values: MetadataValue[];
+}
+
+/**
+ * String-concatenates the specified list of metadata values to a string value, joined by a comma ",".
+ * @param metadataValues - List of metadata values.
+ * @returns the metadata values in a string, each value joined by a comma.
+ */
+function stringifyMetadataValues(metadataValues: MetadataValue[]): string {
+  return metadataValues.join(", ");
+}
+
+/**
+ * Renders tag for NTag component.
+ * Tooltip children require forward ref.
+ */
+const Tag = forwardRef<HTMLDivElement, MChipProps>(function Tag(props, ref) {
+  return <MChip ref={ref} {...props} />;
+});
+
+export const NTagCell = ({
+  label,
+  TypographyProps,
+  values,
+}: NTagCellProps): JSX.Element => {
+  const metadataCount = values.length;
+  const showNTag = metadataCount > MAX_DISPLAYABLE_VALUES;
+  return (
+    <>
+      {showNTag ? (
+        <NTag
+          Tag={<Tag label={`${metadataCount} ${label}`} variant="ntag" />}
+          TooltipTitle={
+            <Typography display="block" variant={TEXT_BODY_SMALL_400}>
+              {stringifyMetadataValues(values)}
+            </Typography>
+          }
+        />
+      ) : (
+        values.map((value, v) => (
+          <Typography
+            key={`${value}${v}`}
+            variant="inherit"
+            {...TypographyProps}
+          >
+            {value}
+          </Typography>
+        ))
+      )}
+    </>
+  );
+};

package/src/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.tsx

@@ -1,11 +1,10 @@
 import { Checkbox as MCheckbox } from "@mui/material";
-import { Row } from "@tanstack/react-table";
-import { RowData } from "@tanstack/table-core";
+import { Row, RowData } from "@tanstack/react-table";
 import React from "react";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 
-export interface RowSelectionCellProps<T> {
+export interface RowSelectionCellProps<T extends RowData> {
   row: Row<T>;
 }
 

package/src/components/Table/components/TableHead/components/HeadSelectionCell/headSelectionCell.tsx

@@ -1,12 +1,11 @@
 import { Checkbox } from "@mui/material";
-import { Table } from "@tanstack/react-table";
-import { RowData } from "@tanstack/table-core";
+import { RowData, Table } from "@tanstack/react-table";
 import React from "react";
 import { CheckedIcon } from "../../../../../common/CustomIcon/components/CheckedIcon/checkedIcon";
 import { IndeterminateIcon } from "../../../../../common/CustomIcon/components/IndeterminateIcon/indeterminateIcon";
 import { UncheckedIcon } from "../../../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon";
 
-export interface HeadSelectionCellProps<T> {
+export interface HeadSelectionCellProps<T extends RowData> {
   tableInstance: Table<T>;
 }
 

package/src/components/Table/components/TableHead/tableHead.tsx

@@ -4,18 +4,18 @@ import {
   TableRow as MTableRow,
   TableSortLabel,
 } from "@mui/material";
-import { flexRender, Table } from "@tanstack/react-table";
+import { flexRender, RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { ROW_DIRECTION } from "../../common/entities";
 import { getTableSortLabelProps } from "../../common/utils";
 import { getTableCellPadding } from "../TableCell/common/utils";
 
-export interface TableHeadProps<T> {
+export interface TableHeadProps<T extends RowData> {
   rowDirection: ROW_DIRECTION;
   tableInstance: Table<T>;
 }
 
-export const TableHead = <T extends object>({
+export const TableHead = <T extends RowData>({
   rowDirection,
   tableInstance,
 }: TableHeadProps<T>): JSX.Element => {

package/src/components/Table/components/TableRow/tableRow.styles.ts

@@ -0,0 +1,22 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { TableRow as MTableRow } from "@mui/material";
+import { primaryLightest } from "../../../../styles/common/mixins/colors";
+
+interface Props {
+  isPreview?: boolean;
+}
+
+export const TableRow = styled(MTableRow, {
+  shouldForwardProp: (prop) => prop !== "isPreview",
+})<Props>`
+  && {
+    transition: background-color 300ms ease-in;
+
+    ${(props) =>
+      props.isPreview &&
+      css`
+        background-color: ${primaryLightest(props)};
+      `}
+  }
+`;

package/src/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -1,16 +1,16 @@
-import { TableRow as MTableRow } from "@mui/material";
-import { Row, Table } from "@tanstack/react-table";
+import { Row, RowData, Table } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
 import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../common/utils";
 import { CollapsableCell } from "../../../TableCell/components/CollapsableCell/collapsableCell";
+import { TableRow } from "../../../TableRow/tableRow.styles";
 
-export interface CollapsableRowsProps<T> {
+export interface CollapsableRowsProps<T extends RowData> {
   tableInstance: Table<T>;
   virtualizer: Virtualizer<Window, Element>;
 }
 
-export const CollapsableRows = <T extends object>({
+export const CollapsableRows = <T extends RowData>({
   tableInstance,
   virtualizer,
 }: CollapsableRowsProps<T>): JSX.Element => {
@@ -21,17 +21,19 @@ export const CollapsableRows = <T extends object>({
     <Fragment>
       {virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index] as Row<T>;
+        const { getIsPreview } = row;
         return (
-          <MTableRow
+          <TableRow
             key={row.id}
             data-index={virtualRow.index}
+            isPreview={getIsPreview()}
             ref={virtualizer.measureElement}
           >
             <CollapsableCell
               isDisabled={isCollapsableRowDisabled(tableInstance)}
               row={row}
             />
-          </MTableRow>
+          </TableRow>
         );
       })}
     </Fragment>

package/src/components/Table/components/TableRows/tableRows.tsx

@@ -1,15 +1,16 @@
-import { TableCell as MTableCell, TableRow as MTableRow } from "@mui/material";
-import { flexRender, Row, Table } from "@tanstack/react-table";
+import { TableCell as MTableCell } from "@mui/material";
+import { flexRender, Row, RowData, Table } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
 import React, { Fragment } from "react";
 import { getTableCellPadding } from "../TableCell/common/utils";
+import { TableRow } from "../TableRow/tableRow.styles";
 
-export interface TableRowsProps<T> {
+export interface TableRowsProps<T extends RowData> {
   tableInstance: Table<T>;
   virtualizer: Virtualizer<Window, Element>;
 }
 
-export const TableRows = <T extends object>({
+export const TableRows = <T extends RowData>({
   tableInstance,
   virtualizer,
 }: TableRowsProps<T>): JSX.Element => {
@@ -20,10 +21,12 @@ export const TableRows = <T extends object>({
     <Fragment>
       {virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index] as Row<T>;
+        const { getIsPreview } = row;
         return (
-          <MTableRow
+          <TableRow
             key={row.id}
             data-index={virtualRow.index}
+            isPreview={getIsPreview()}
             ref={virtualizer.measureElement}
           >
             {row.getVisibleCells().map((cell) => (
@@ -34,7 +37,7 @@ export const TableRows = <T extends object>({
                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
               </MTableCell>
             ))}
-          </MTableRow>
+          </TableRow>
         );
       })}
     </Fragment>

package/src/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/common/constants.ts

@@ -0,0 +1,11 @@
+import { DrawerProps as MDrawerProps } from "@mui/material";
+
+export const DEFAULT_DRAWER_PROPS: Partial<MDrawerProps> = {
+  PaperProps: {
+    elevation: 2,
+  },
+  anchor: "right",
+  disableEnforceFocus: true,
+  disableScrollLock: true,
+  hideBackdrop: true,
+};

package/src/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/rowDrawer.styles.ts

@@ -0,0 +1,31 @@
+import styled from "@emotion/styled";
+import { mediaTabletUp } from "../../../../../../../../styles/common/mixins/breakpoints";
+import { smokeMain } from "../../../../../../../../styles/common/mixins/colors";
+import { DrawerTitle as DXDrawerTitle } from "../../../../../../../common/Drawer/components/DrawerTitle/drawerTitle";
+import { Drawer as DXDrawer } from "../../../../../../../common/Drawer/drawer";
+
+export const Drawer = styled(DXDrawer)`
+  &.MuiDrawer-modal {
+    pointer-events: none;
+
+    .MuiDrawer-paper {
+      border-left: 1px solid ${smokeMain};
+      box-shadow: -8px 0 8px -4px #10182808, 0 20px 24px -4px #10182814;
+      pointer-events: all;
+      max-width: min(506px, 84vw);
+      width: 100%;
+    }
+
+    ${mediaTabletUp} {
+      .MuiDrawer-paper {
+        max-width: min(506px, 50vw);
+      }
+    }
+  }
+`;
+
+export const DrawerTitle = styled(DXDrawerTitle)`
+  .MuiTypography-text-heading-small {
+    font-size: 20px;
+  }
+`;

package/src/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/rowDrawer.tsx

@@ -0,0 +1,52 @@
+import {
+  Divider,
+  DrawerProps as MDrawerProps,
+  Typography as MTypography,
+} from "@mui/material";
+import { RowData, Table } from "@tanstack/react-table";
+import React, { ReactNode } from "react";
+import { TEXT_HEADING_SMALL } from "../../../../../../../../theme/common/typography";
+import { DrawerContent } from "../../../../../../../common/Drawer/components/drawer.styles";
+import { DEFAULT_DRAWER_PROPS } from "./common/constants";
+import { Drawer, DrawerTitle } from "./rowDrawer.styles";
+
+export interface RowDrawerProps<T extends RowData>
+  extends Omit<MDrawerProps, "content" | "title"> {
+  className?: string;
+  tableInstance: Table<T>;
+  title: ReactNode;
+}
+
+export const RowDrawer = <T extends RowData>({
+  children,
+  className,
+  tableInstance,
+  title,
+  ...props /* Spread props to allow for Mui Drawer specific prop overrides. */
+}: RowDrawerProps<T>): JSX.Element => {
+  const { getIsRowPreview, resetRowPreview, toggleRowPreview } = tableInstance;
+  return (
+    <Drawer
+      {...DEFAULT_DRAWER_PROPS}
+      className={className}
+      onTransitionExited={resetRowPreview}
+      open={getIsRowPreview()}
+      {...props}
+    >
+      <DrawerTitle
+        onClose={(): void => toggleRowPreview?.()}
+        title={
+          typeof title === "string" ? (
+            <MTypography component="div" noWrap variant={TEXT_HEADING_SMALL}>
+              {title}
+            </MTypography>
+          ) : (
+            title
+          )
+        }
+      />
+      <Divider />
+      <DrawerContent>{children}</DrawerContent>
+    </Drawer>
+  );
+};

package/src/components/Table/components/TableToolbar/components/RowPreview/components/Section/components/RowDetail/rowDetail.styles.ts

@@ -0,0 +1,48 @@
+import styled from "@emotion/styled";
+import {
+  mediaDesktopSmallUp,
+  mediaTabletUp,
+} from "../../../../../../../../../../styles/common/mixins/breakpoints";
+import { textBody400 } from "../../../../../../../../../../styles/common/mixins/fonts";
+
+export const Section = styled.div`
+  ${textBody400};
+  display: grid;
+  gap: 16px;
+  grid-auto-rows: minmax(40px, auto);
+  grid-template-columns: minmax(0, 1fr);
+  overflow-wrap: break-word;
+  padding: 16px 24px;
+
+  > .MuiGrid-root {
+    display: grid;
+    gap: 4px;
+    grid-column: 1 / -1;
+    grid-template-columns: inherit;
+  }
+
+  > .MuiButton-textPrimary {
+    grid-column: 1 / -1;
+    justify-self: flex-start;
+    text-align: left;
+    text-transform: none;
+  }
+
+  ${mediaTabletUp} {
+    gap: 0 8px;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    padding: 8px 24px;
+
+    > .MuiGrid-root {
+      display: contents;
+
+      > * {
+        margin: 10px 0;
+      }
+    }
+  }
+
+  ${mediaDesktopSmallUp} {
+    grid-template-columns: 194px minmax(0, 1fr);
+  }
+`;

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

@@ -0,0 +1,53 @@
+import { Grid, Typography } from "@mui/material";
+import { RowData, Table } from "@tanstack/react-table";
+import React from "react";
+import { ListConfig } from "../../../../../../../../../../config/entities";
+import { TEXT_BODY_400 } from "../../../../../../../../../../theme/common/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;
+  tableInstance: Table<T>;
+}
+
+export const RowDetail = <T extends RowData>({
+  className,
+  columns,
+  expanded = true,
+  minColumns = MIN_COLUMNS,
+  tableInstance,
+}: RowDetailProps<T>): JSX.Element | null => {
+  const [showMore, setShowMore] = React.useState<boolean>(expanded);
+  const { getRowPreviewRow } = tableInstance;
+  const { original: rowData } = getRowPreviewRow() || {};
+  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="ink.light"
+            variant={TEXT_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

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