@databiosphere/findable-ui 5.0.0 → 6.0.0

package/lib/components/Table/components/PaginationSummary/paginationSummary.js

@@ -7,13 +7,14 @@ exports.PaginationSummary = void 0;
 const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const PaginationSummary = ({ firstResult, lastResult, totalResult, }) => {
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement(material_1.Typography, { variant: "text-body-400" }, "Results "),
-        react_1.default.createElement(material_1.Typography, { variant: "text-body-small-500" },
-            firstResult,
-            " - ",
-            lastResult),
-        react_1.default.createElement(material_1.Typography, { variant: "text-body-400" }, " of "),
-        react_1.default.createElement(material_1.Typography, { variant: "text-body-small-500" }, totalResult)));
+    return (react_1.default.createElement(material_1.Fade, { in: totalResult > 0 },
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(material_1.Typography, { variant: "text-body-400" }, "Results "),
+            react_1.default.createElement(material_1.Typography, { variant: "text-body-small-500" },
+                firstResult,
+                " - ",
+                lastResult),
+            react_1.default.createElement(material_1.Typography, { variant: "text-body-400" }, " of "),
+            react_1.default.createElement(material_1.Typography, { variant: "text-body-small-500" }, totalResult))));
 };
 exports.PaginationSummary = PaginationSummary;

package/lib/components/Table/components/TableBody/tableBody.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import { ROW_DIRECTION } from "../../common/entities";
-export interface TableBodyProps<T> {
+export interface TableBodyProps<T extends RowData> {
     rowDirection: ROW_DIRECTION;
     tableInstance: Table<T>;
 }
-export declare const TableBody: <T extends object>({ rowDirection, tableInstance, }: TableBodyProps<T>) => JSX.Element;
+export declare const TableBody: <T extends unknown>({ rowDirection, tableInstance, }: TableBodyProps<T>) => JSX.Element;

package/lib/components/Table/components/TableCell/common/utils.d.ts

@@ -1,8 +1,8 @@
-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";
 /**
  * Returns table cell padding based on the cell ID.
  * @param id - Cell ID.
  * @returns table cell padding.
  */
-export declare function getTableCellPadding<T extends object, TValue>(id: CoreHeader<T, TValue>["id"] | CoreCell<T, TValue>["id"]): MTableCellProps["padding"];
+export declare function getTableCellPadding<T extends RowData, TValue>(id: CoreHeader<T, TValue>["id"] | CoreCell<T, TValue>["id"]): MTableCellProps["padding"];

package/lib/components/Table/components/TableCell/components/BasicCell/basicCell.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import { TypographyProps } from "../../../../../common/Typography/common/entities";
+export interface BasicCellProps {
+    TypographyProps?: TypographyProps;
+    value?: ReactNode;
+}
+export declare const BasicCell: ({ TypographyProps, value, }: BasicCellProps) => JSX.Element | null;

package/lib/components/Table/components/TableCell/components/BasicCell/basicCell.js

@@ -0,0 +1,55 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BasicCell = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+const entities_1 = require("../../../../../../apis/azul/common/entities");
+const BasicCell = ({ TypographyProps, value = entities_1.LABEL.UNSPECIFIED, }) => {
+    if (isValueNumberOrString(value)) {
+        return (react_1.default.createElement(material_1.Typography, Object.assign({ variant: "inherit" }, TypographyProps), value));
+    }
+    if (isValueArray(value)) {
+        return (react_1.default.createElement(react_1.Fragment, null, value.map((v) => (react_1.default.createElement(material_1.Typography, Object.assign({ key: v, variant: "inherit" }, TypographyProps), v)))));
+    }
+    return null;
+};
+exports.BasicCell = BasicCell;
+/**
+ * Returns true if value is an array of strings.
+ * @param value - Value.
+ * @returns value is an array of strings.
+ */
+function isValueArray(value) {
+    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) {
+    return typeof value === "number" || typeof value === "string";
+}

package/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TooltipProps as MTooltipProps } from "@mui/material";
+export interface TooltipProps extends MTooltipProps {
+    className?: string;
+}
+export declare const Tooltip: ({ children, className, title, ...props }: TooltipProps) => JSX.Element;

package/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip.js

@@ -0,0 +1,93 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+const material_1 = require("@mui/material");
+const core_1 = require("@popperjs/core");
+const react_1 = __importStar(require("react"));
+const tooltip_styles_1 = require("./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,
+    },
+};
+const Tooltip = (_a) => {
+    var { children, className, title } = _a, props = __rest(_a, ["children", "className", "title"]) /* Spread props to allow for Mui Tooltip specific prop overrides. */;
+    const [maxHeight, setMaxHeight] = (0, react_1.useState)();
+    const modifiers = (0, react_1.useMemo)(() => [
+        {
+            enabled: true,
+            fn: ({ state }) => setMaxHeight(calculateMaxHeight(state)),
+            name: "maxHeight",
+            phase: "main",
+            requiresIfExists: ["offset"],
+        },
+        DEFAULT_FLIP_MODIFIER,
+        DEFAULT_PREVENT_OVERFLOW_MODIFIER,
+    ], []);
+    return (react_1.default.createElement(material_1.Tooltip, Object.assign({ arrow: true, className: className, onClose: () => setMaxHeight(undefined), slotProps: {
+            popper: { modifiers },
+            tooltip: { style: { display: "flex", maxHeight, padding: 0 } },
+        }, title: react_1.default.createElement(tooltip_styles_1.TooltipContent, null, title) }, props), children));
+};
+exports.Tooltip = Tooltip;
+/**
+ * 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) {
+    const overflow = (0, core_1.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/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const TooltipContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/components/Tooltip/tooltip.styles.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipContent = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.TooltipContent = styled_1.default.span `
+  overflow: scroll;
+  overscroll-behavior: none;
+  padding: 8px 12px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;

package/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag.d.ts

@@ -0,0 +1,7 @@
+import { ReactElement } from "react";
+export interface NTagProps {
+    className?: string;
+    Tag: ReactElement;
+    TooltipTitle: ReactElement;
+}
+export declare const NTag: ({ className, Tag, TooltipTitle, ...props }: NTagProps) => JSX.Element;

package/lib/components/Table/components/TableCell/components/NTagCell/components/NTag/nTag.js

@@ -0,0 +1,24 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NTag = void 0;
+const react_1 = __importDefault(require("react"));
+const tooltip_1 = require("./components/Tooltip/tooltip");
+const NTag = (_a) => {
+    var { className, Tag, TooltipTitle } = _a, props = __rest(_a, ["className", "Tag", "TooltipTitle"]) /* Spread props to allow for Mui Tooltip specific prop overrides. */;
+    return (react_1.default.createElement(tooltip_1.Tooltip, Object.assign({ className: className, title: TooltipTitle }, props), Tag));
+};
+exports.NTag = NTag;

package/lib/components/Table/components/TableCell/components/NTagCell/nTagCell.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TypographyProps } from "../../../../../common/Typography/common/entities";
+export declare type MetadataValue = string;
+export interface NTagCellProps {
+    label: string;
+    TypographyProps?: TypographyProps;
+    values: MetadataValue[];
+}
+export declare const NTagCell: ({ label, TypographyProps, values, }: NTagCellProps) => JSX.Element;

package/lib/components/Table/components/TableCell/components/NTagCell/nTagCell.js

@@ -0,0 +1,53 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NTagCell = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+const typography_1 = require("../../../../../../theme/common/typography");
+const nTag_1 = require("./components/NTag/nTag");
+// Template constants
+const MAX_DISPLAYABLE_VALUES = 1;
+/**
+ * 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) {
+    return metadataValues.join(", ");
+}
+/**
+ * Renders tag for NTag component.
+ * Tooltip children require forward ref.
+ */
+const Tag = (0, react_1.forwardRef)(function Tag(props, ref) {
+    return react_1.default.createElement(material_1.Chip, Object.assign({ ref: ref }, props));
+});
+const NTagCell = ({ label, TypographyProps, values, }) => {
+    const metadataCount = values.length;
+    const showNTag = metadataCount > MAX_DISPLAYABLE_VALUES;
+    return (react_1.default.createElement(react_1.default.Fragment, null, showNTag ? (react_1.default.createElement(nTag_1.NTag, { Tag: react_1.default.createElement(Tag, { label: `${metadataCount} ${label}`, variant: "ntag" }), TooltipTitle: react_1.default.createElement(material_1.Typography, { display: "block", variant: typography_1.TEXT_BODY_SMALL_400 }, stringifyMetadataValues(values)) })) : (values.map((value, v) => (react_1.default.createElement(material_1.Typography, Object.assign({ key: `${value}${v}`, variant: "inherit" }, TypographyProps), value))))));
+};
+exports.NTagCell = NTagCell;

package/lib/components/Table/components/TableCell/components/RowSelectionCell/rowSelectionCell.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { Row } from "@tanstack/react-table";
-export interface RowSelectionCellProps<T> {
+import { Row, RowData } from "@tanstack/react-table";
+export interface RowSelectionCellProps<T extends RowData> {
     row: Row<T>;
 }
 export declare const RowSelectionCell: <T extends unknown>({ row, }: RowSelectionCellProps<T>) => JSX.Element;

package/lib/components/Table/components/TableHead/components/HeadSelectionCell/headSelectionCell.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { Table } from "@tanstack/react-table";
-export interface HeadSelectionCellProps<T> {
+import { RowData, Table } from "@tanstack/react-table";
+export interface HeadSelectionCellProps<T extends RowData> {
     tableInstance: Table<T>;
 }
 export declare const HeadSelectionCell: <T extends unknown>({ tableInstance, }: HeadSelectionCellProps<T>) => JSX.Element;

package/lib/components/Table/components/TableHead/tableHead.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import { ROW_DIRECTION } from "../../common/entities";
-export interface TableHeadProps<T> {
+export interface TableHeadProps<T extends RowData> {
     rowDirection: ROW_DIRECTION;
     tableInstance: Table<T>;
 }
-export declare const TableHead: <T extends object>({ rowDirection, tableInstance, }: TableHeadProps<T>) => JSX.Element;
+export declare const TableHead: <T extends unknown>({ rowDirection, tableInstance, }: TableHeadProps<T>) => JSX.Element;

package/lib/components/Table/components/TableRow/tableRow.styles.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+interface Props {
+    isPreview?: boolean;
+}
+export declare const TableRow: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TableRowClasses> | undefined;
+    hover?: boolean | undefined;
+    selected?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & {
+    ref?: ((instance: HTMLTableRowElement | null) => void) | import("react").RefObject<HTMLTableRowElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "selected" | "hover"> & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Props, {}, {}>;
+export {};

package/lib/components/Table/components/TableRow/tableRow.styles.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableRow = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const material_1 = require("@mui/material");
+const colors_1 = require("../../../../styles/common/mixins/colors");
+exports.TableRow = (0, styled_1.default)(material_1.TableRow, {
+    shouldForwardProp: (prop) => prop !== "isPreview",
+}) `
+  && {
+    transition: background-color 300ms ease-in;
+
+    ${(props) => props.isPreview &&
+    (0, react_1.css) `
+        background-color: ${(0, colors_1.primaryLightest)(props)};
+      `}
+  }
+`;

package/lib/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
-export interface CollapsableRowsProps<T> {
+export interface CollapsableRowsProps<T extends RowData> {
     tableInstance: Table<T>;
     virtualizer: Virtualizer<Window, Element>;
 }
-export declare const CollapsableRows: <T extends object>({ tableInstance, virtualizer, }: CollapsableRowsProps<T>) => JSX.Element;
+export declare const CollapsableRows: <T extends unknown>({ tableInstance, virtualizer, }: CollapsableRowsProps<T>) => JSX.Element;

package/lib/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.js

@@ -24,17 +24,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollapsableRows = void 0;
-const material_1 = require("@mui/material");
 const react_1 = __importStar(require("react"));
 const utils_1 = require("../../../../common/utils");
 const collapsableCell_1 = require("../../../TableCell/components/CollapsableCell/collapsableCell");
+const tableRow_styles_1 = require("../../../TableRow/tableRow.styles");
 const CollapsableRows = ({ tableInstance, virtualizer, }) => {
     const { getRowModel } = tableInstance;
     const { rows } = getRowModel();
     const virtualItems = virtualizer.getVirtualItems();
     return (react_1.default.createElement(react_1.Fragment, null, virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index];
-        return (react_1.default.createElement(material_1.TableRow, { key: row.id, "data-index": virtualRow.index, ref: virtualizer.measureElement },
+        const { getIsPreview } = row;
+        return (react_1.default.createElement(tableRow_styles_1.TableRow, { key: row.id, "data-index": virtualRow.index, isPreview: getIsPreview(), ref: virtualizer.measureElement },
             react_1.default.createElement(collapsableCell_1.CollapsableCell, { isDisabled: (0, utils_1.isCollapsableRowDisabled)(tableInstance), row: row })));
     })));
 };

package/lib/components/Table/components/TableRows/tableRows.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
-export interface TableRowsProps<T> {
+export interface TableRowsProps<T extends RowData> {
     tableInstance: Table<T>;
     virtualizer: Virtualizer<Window, Element>;
 }
-export declare const TableRows: <T extends object>({ tableInstance, virtualizer, }: TableRowsProps<T>) => JSX.Element;
+export declare const TableRows: <T extends unknown>({ tableInstance, virtualizer, }: TableRowsProps<T>) => JSX.Element;

package/lib/components/Table/components/TableRows/tableRows.js

@@ -28,13 +28,15 @@ const material_1 = require("@mui/material");
 const react_table_1 = require("@tanstack/react-table");
 const react_1 = __importStar(require("react"));
 const utils_1 = require("../TableCell/common/utils");
+const tableRow_styles_1 = require("../TableRow/tableRow.styles");
 const TableRows = ({ tableInstance, virtualizer, }) => {
     const { getRowModel } = tableInstance;
     const { rows } = getRowModel();
     const virtualItems = virtualizer.getVirtualItems();
     return (react_1.default.createElement(react_1.Fragment, null, virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index];
-        return (react_1.default.createElement(material_1.TableRow, { key: row.id, "data-index": virtualRow.index, ref: virtualizer.measureElement }, row.getVisibleCells().map((cell) => (react_1.default.createElement(material_1.TableCell, { key: cell.id, padding: (0, utils_1.getTableCellPadding)(cell.column.id) }, (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()))))));
+        const { getIsPreview } = row;
+        return (react_1.default.createElement(tableRow_styles_1.TableRow, { key: row.id, "data-index": virtualRow.index, isPreview: getIsPreview(), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell) => (react_1.default.createElement(material_1.TableCell, { key: cell.id, padding: (0, utils_1.getTableCellPadding)(cell.column.id) }, (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()))))));
     })));
 };
 exports.TableRows = TableRows;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/common/constants.d.ts

@@ -0,0 +1,2 @@
+import { DrawerProps as MDrawerProps } from "@mui/material";
+export declare const DEFAULT_DRAWER_PROPS: Partial<MDrawerProps>;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/common/constants.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_DRAWER_PROPS = void 0;
+exports.DEFAULT_DRAWER_PROPS = {
+    PaperProps: {
+        elevation: 2,
+    },
+    anchor: "right",
+    disableEnforceFocus: true,
+    disableScrollLock: true,
+    hideBackdrop: true,
+};

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/rowDrawer.d.ts

@@ -0,0 +1,9 @@
+import { DrawerProps as MDrawerProps } from "@mui/material";
+import { RowData, Table } from "@tanstack/react-table";
+import { ReactNode } from "react";
+export interface RowDrawerProps<T extends RowData> extends Omit<MDrawerProps, "content" | "title"> {
+    className?: string;
+    tableInstance: Table<T>;
+    title: ReactNode;
+}
+export declare const RowDrawer: <T extends unknown>({ children, className, tableInstance, title, ...props }: RowDrawerProps<T>) => JSX.Element;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/rowDrawer.js

@@ -0,0 +1,32 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowDrawer = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const typography_1 = require("../../../../../../../../theme/common/typography");
+const drawer_styles_1 = require("../../../../../../../common/Drawer/components/drawer.styles");
+const constants_1 = require("./common/constants");
+const rowDrawer_styles_1 = require("./rowDrawer.styles");
+const RowDrawer = (_a) => {
+    var { children, className, tableInstance, title } = _a, props = __rest(_a, ["children", "className", "tableInstance", "title"]) /* Spread props to allow for Mui Drawer specific prop overrides. */;
+    const { getIsRowPreview, resetRowPreview, toggleRowPreview } = tableInstance;
+    return (react_1.default.createElement(rowDrawer_styles_1.Drawer, Object.assign({}, constants_1.DEFAULT_DRAWER_PROPS, { className: className, onTransitionExited: resetRowPreview, open: getIsRowPreview() }, props),
+        react_1.default.createElement(rowDrawer_styles_1.DrawerTitle, { onClose: () => toggleRowPreview === null || toggleRowPreview === void 0 ? void 0 : toggleRowPreview(), title: typeof title === "string" ? (react_1.default.createElement(material_1.Typography, { component: "div", noWrap: true, variant: typography_1.TEXT_HEADING_SMALL }, title)) : (title) }),
+        react_1.default.createElement(material_1.Divider, null),
+        react_1.default.createElement(drawer_styles_1.DrawerContent, null, children)));
+};
+exports.RowDrawer = RowDrawer;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/rowDrawer.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const Drawer: import("@emotion/styled").StyledComponent<import("../../../../../../../common/Drawer/drawer").DrawerProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const DrawerTitle: import("@emotion/styled").StyledComponent<import("../../../../../../../common/Drawer/components/DrawerTitle/drawerTitle").DrawerTitleProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/RowDrawer/rowDrawer.styles.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrawerTitle = exports.Drawer = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const breakpoints_1 = require("../../../../../../../../styles/common/mixins/breakpoints");
+const colors_1 = require("../../../../../../../../styles/common/mixins/colors");
+const drawerTitle_1 = require("../../../../../../../common/Drawer/components/DrawerTitle/drawerTitle");
+const drawer_1 = require("../../../../../../../common/Drawer/drawer");
+exports.Drawer = (0, styled_1.default)(drawer_1.Drawer) `
+  &.MuiDrawer-modal {
+    pointer-events: none;
+
+    .MuiDrawer-paper {
+      border-left: 1px solid ${colors_1.smokeMain};
+      box-shadow: -8px 0 8px -4px #10182808, 0 20px 24px -4px #10182814;
+      pointer-events: all;
+      max-width: min(506px, 84vw);
+      width: 100%;
+    }
+
+    ${breakpoints_1.mediaTabletUp} {
+      .MuiDrawer-paper {
+        max-width: min(506px, 50vw);
+      }
+    }
+  }
+`;
+exports.DrawerTitle = (0, styled_1.default)(drawerTitle_1.DrawerTitle) `
+  .MuiTypography-text-heading-small {
+    font-size: 20px;
+  }
+`;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/Section/components/RowDetail/rowDetail.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { RowData, Table } from "@tanstack/react-table";
+import { ListConfig } from "../../../../../../../../../../config/entities";
+interface RowDetailProps<T extends RowData> {
+    className?: string;
+    columns: ListConfig<T>["columns"];
+    expanded?: boolean;
+    minColumns?: number;
+    tableInstance: Table<T>;
+}
+export declare const RowDetail: <T extends unknown>({ className, columns, expanded, minColumns, tableInstance, }: RowDetailProps<T>) => JSX.Element | null;
+export {};