@databiosphere/findable-ui 0.0.0

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.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.CheckboxMenu = void 0;
+const material_1 = require("@mui/material");
+const react_1 = __importStar(require("react"));
+const buttonTextPrimary_1 = require("../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary");
+const dropdownButton_1 = require("../../../common/Button/components/DropdownButton/dropdownButton");
+const checkedIcon_1 = require("../../../common/CustomIcon/components/CheckedIcon/checkedIcon");
+const uncheckedIcon_1 = require("../../../common/CustomIcon/components/UncheckedIcon/uncheckedIcon");
+const checkboxMenu_styles_1 = require("./checkboxMenu.styles");
+const CheckboxMenu = ({ label: buttonLabel, onReset, options, }) => {
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const open = Boolean(anchorEl);
+    const onOpenMenu = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const onCloseMenu = () => {
+        setAnchorEl(null);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(dropdownButton_1.DropdownButton, { onClick: onOpenMenu }, buttonLabel),
+        react_1.default.createElement(checkboxMenu_styles_1.CheckboxMenu, { anchorEl: anchorEl, anchorOrigin: { horizontal: "right", vertical: "bottom" }, onClose: onCloseMenu, open: open, slotProps: { paper: { variant: "menu" } }, transformOrigin: {
+                horizontal: "right",
+                vertical: "top",
+            } },
+            options.map(({ checked, disabled = false, label, onChange, value }) => (react_1.default.createElement(material_1.ListItemButton, { disabled: disabled, key: value, onClick: onChange, role: undefined },
+                react_1.default.createElement(material_1.Checkbox, { checked: checked, checkedIcon: react_1.default.createElement(checkedIcon_1.CheckedIcon, null), disabled: disabled, icon: react_1.default.createElement(uncheckedIcon_1.UncheckedIcon, null) }),
+                react_1.default.createElement(material_1.ListItemText, { disableTypography: true, primary: react_1.default.createElement("span", null, label) })))),
+            react_1.default.createElement(material_1.ListItem, { component: "div" },
+                react_1.default.createElement(buttonTextPrimary_1.ButtonTextPrimary, { onClick: onReset }, "Reset")))));
+};
+exports.CheckboxMenu = CheckboxMenu;

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./checkboxMenu").CheckboxMenuProps>;
+export default _default;
+export declare const CheckboxMenuStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./checkboxMenu").CheckboxMenuProps>;

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.stories.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxMenuStory = void 0;
+const react_1 = __importDefault(require("react"));
+const checkboxMenu_1 = require("./checkboxMenu");
+exports.default = {
+    argTypes: {
+        label: { control: "text" },
+        onReset: { control: { disabled: true } },
+        options: { control: "array" },
+    },
+    component: checkboxMenu_1.CheckboxMenu,
+    title: "Components/Common/Menu/CheckboxMenu",
+};
+const CheckboxMenuTemplate = (args) => (react_1.default.createElement(checkboxMenu_1.CheckboxMenu, Object.assign({}, args)));
+const onChange = () => {
+    // onChange function
+};
+const onReset = () => {
+    // onReset function
+};
+exports.CheckboxMenuStory = CheckboxMenuTemplate.bind({});
+exports.CheckboxMenuStory.args = {
+    label: "Options",
+    onReset: onReset,
+    options: [
+        {
+            checked: true,
+            disabled: true,
+            label: "Item 1",
+            onChange,
+            value: "item_1",
+        },
+        {
+            checked: false,
+            disabled: false,
+            label: "Item 2",
+            onChange,
+            value: "item_2",
+        },
+        {
+            checked: true,
+            disabled: false,
+            label: "Item 3",
+            onChange,
+            value: "item_3",
+        },
+    ],
+};

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const CheckboxMenu: import("@emotion/styled").StyledComponent<import("@mui/material").MenuProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/lib/components/Table/components/CheckboxMenu/checkboxMenu.styles.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckboxMenu = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const material_1 = require("@mui/material");
+exports.CheckboxMenu = (0, styled_1.default)(material_1.Menu) `
+  .MuiPaper-menu {
+    margin: 8px 0;
+  }
+
+  // List item button
+  .MuiListItemButton-root {
+    gap: 8px;
+  }
+
+  // List item
+  .MuiListItem-root {
+    padding: 10px 16px;
+  }
+
+  .MuiListItemButton-root.Mui-disabled {
+    opacity: 1;
+  }
+`;

package/lib/components/Table/components/DownloadEntityResults/downloadEntityResults.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Row } from "@tanstack/react-table";
+export interface DownloadEntityResultsProps<T> {
+    entityName: string;
+    rows: Row<T>[];
+}
+export declare const DownloadEntityResults: <T extends object>({ entityName, rows, }: DownloadEntityResultsProps<T>) => JSX.Element;

package/lib/components/Table/components/DownloadEntityResults/downloadEntityResults.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DownloadEntityResults = void 0;
+const react_1 = __importDefault(require("react"));
+const buttonSecondary_1 = require("../../../common/Button/components/ButtonSecondary/buttonSecondary");
+const fileDownloadButton_1 = require("../../../common/Button/components/FileDownloadButton/fileDownloadButton");
+const downloadIcon_1 = require("../../../common/CustomIcon/components/DownloadIcon/downloadIcon");
+const utils_1 = require("../../common/utils");
+const DownloadEntityResults = ({ entityName, rows, }) => {
+    const [fileUrl, setFileUrl] = react_1.default.useState(undefined);
+    const onDownload = () => {
+        const blob = (0, utils_1.generateDownloadBlob)(rows);
+        if (blob) {
+            setFileUrl(window.URL.createObjectURL(blob));
+        }
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(buttonSecondary_1.ButtonSecondary, { onClick: () => onDownload(), StartIcon: downloadIcon_1.DownloadIcon }, "Download TSV"),
+        react_1.default.createElement(fileDownloadButton_1.FileDownloadButton, { fileName: `${entityName}.tsv`, fileUrl: fileUrl })));
+};
+exports.DownloadEntityResults = DownloadEntityResults;

package/lib/components/Table/components/EntityViewToggle/entityViewToggle.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EntityViewToggle: () => JSX.Element;

package/lib/components/Table/components/EntityViewToggle/entityViewToggle.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EntityViewToggle = void 0;
+const react_1 = __importDefault(require("react"));
+const useExploreState_1 = require("../../../../hooks/useExploreState");
+const exploreState_1 = require("../../../../providers/exploreState");
+const toggleButtonGroup_1 = require("../../../common/ToggleButtonGroup/toggleButtonGroup");
+const EntityViewToggle = () => {
+    const { exploreDispatch } = (0, useExploreState_1.useExploreState)();
+    const toggleButtons = [
+        {
+            label: "Exact Match",
+            onToggle: () => onChange(exploreState_1.ENTITY_VIEW.EXACT),
+            value: exploreState_1.ENTITY_VIEW.EXACT,
+        },
+        {
+            label: "Related Match",
+            onToggle: () => onChange(exploreState_1.ENTITY_VIEW.RELATED),
+            value: exploreState_1.ENTITY_VIEW.RELATED,
+        },
+    ];
+    /**
+     * Callback fired when toggle button value changes.
+     * @param entityView - Entity list view.
+     */
+    const onChange = (entityView) => {
+        exploreDispatch({
+            payload: entityView,
+            type: exploreState_1.ExploreActionKind.ToggleEntityView,
+        });
+    };
+    return react_1.default.createElement(toggleButtonGroup_1.ToggleButtonGroup, { toggleButtons: toggleButtons });
+};
+exports.EntityViewToggle = EntityViewToggle;

package/lib/components/Table/components/Pagination/pagination.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface PaginationProps {
+    canNextPage?: boolean;
+    canPreviousPage?: boolean;
+    currentPage: number;
+    onNextPage: () => void;
+    onPreviousPage: () => void;
+    totalPage: number;
+}
+export declare const Pagination: ({ canNextPage, canPreviousPage, currentPage, onNextPage, onPreviousPage, totalPage, }: PaginationProps) => JSX.Element;

package/lib/components/Table/components/Pagination/pagination.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = void 0;
+const EastRounded_1 = __importDefault(require("@mui/icons-material/EastRounded"));
+const WestRounded_1 = __importDefault(require("@mui/icons-material/WestRounded"));
+const material_1 = require("@mui/material");
+const react_1 = __importDefault(require("react"));
+const iconButton_styles_1 = require("../../../common/IconButton/iconButton.styles");
+const stack_1 = require("../../../common/Stack/stack");
+const pagination_styles_1 = require("./pagination.styles");
+const Pagination = ({ canNextPage = true, canPreviousPage = true, currentPage, onNextPage, onPreviousPage, totalPage, }) => {
+    return (react_1.default.createElement(pagination_styles_1.Pagination, null,
+        react_1.default.createElement("div", null,
+            react_1.default.createElement(material_1.Typography, { variant: "text-body-400" }, "Page "),
+            react_1.default.createElement(material_1.Typography, { variant: "text-body-500" },
+                currentPage,
+                " of ",
+                totalPage)),
+        react_1.default.createElement(stack_1.Stack, { direction: "row", gap: 2 },
+            react_1.default.createElement(iconButton_styles_1.IconButtonSecondary, { disabled: !canPreviousPage, Icon: WestRounded_1.default, onClick: onPreviousPage }),
+            react_1.default.createElement(iconButton_styles_1.IconButtonSecondary, { disabled: !canNextPage, Icon: EastRounded_1.default, onClick: onNextPage }))));
+};
+exports.Pagination = Pagination;

package/lib/components/Table/components/Pagination/pagination.stories.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("./pagination").PaginationProps>;
+export default _default;
+export declare const PaginationStory: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0fc72a6d").R, import("./pagination").PaginationProps>;

package/lib/components/Table/components/Pagination/pagination.stories.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PaginationStory = void 0;
+const react_1 = __importDefault(require("react"));
+const pagination_1 = require("./pagination");
+exports.default = {
+    argTypes: {
+        canNextPage: { control: "boolean" },
+        canPreviousPage: { control: "boolean" },
+        currentPage: { control: "number" },
+        onNextPage: { action: "nextPage" },
+        onPreviousPage: { action: "previousPage" },
+        totalPage: { control: "number" },
+    },
+    component: pagination_1.Pagination,
+    title: "Components/Table",
+};
+const PaginationTemplate = (args) => (react_1.default.createElement(pagination_1.Pagination, Object.assign({}, args)));
+exports.PaginationStory = PaginationTemplate.bind({});
+exports.PaginationStory.args = {
+    currentPage: 1,
+    totalPage: 25,
+};

package/lib/components/Table/components/Pagination/pagination.styles.d.ts

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

package/lib/components/Table/components/Pagination/pagination.styles.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pagination = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const breakpoints_1 = require("../../../../theme/common/breakpoints");
+exports.Pagination = styled_1.default.div `
+  align-items: center;
+  background-color: ${({ theme }) => theme.palette.common.white};
+  color: ${({ theme }) => theme.palette.ink.main};
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  padding: 20px;
+
+  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+    justify-content: flex-start;
+  }
+`;

package/lib/components/Table/components/PaginationSummary/paginationSummary.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface PaginationSummaryProps {
+    firstResult: number;
+    lastResult: number;
+    totalResult: number;
+}
+export declare const PaginationSummary: ({ firstResult, lastResult, totalResult, }: PaginationSummaryProps) => JSX.Element;

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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)));
+};
+exports.PaginationSummary = PaginationSummary;

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

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

package/lib/components/Table/components/TableBody/tableBody.js

@@ -0,0 +1,64 @@
+"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.TableBody = void 0;
+const material_1 = require("@mui/material");
+const react_virtual_1 = require("@tanstack/react-virtual");
+const react_1 = __importStar(require("react"));
+const entities_1 = require("../../common/entities");
+const collapsableRows_1 = require("../TableRows/components/CollapsableRows/collapsableRows");
+const virtualizedRow_1 = require("../TableRows/components/VirtualizedRow/virtualizedRow");
+const tableRows_1 = require("../TableRows/tableRows");
+const OVERSCAN = 20;
+const TableBody = ({ rowDirection, tableInstance, }) => {
+    const { getRowModel } = tableInstance;
+    const { rows } = getRowModel();
+    const estimateSize = (0, react_1.useCallback)(() => 100, []);
+    const count = rows.length;
+    const virtualizer = (0, react_virtual_1.useWindowVirtualizer)({
+        count,
+        estimateSize,
+        measureElement,
+        overscan: OVERSCAN,
+    });
+    return (react_1.default.createElement(material_1.TableBody, null,
+        react_1.default.createElement(virtualizedRow_1.VirtualizedRow, { isUpperRow: true, virtualizer: virtualizer }),
+        rowDirection === entities_1.ROW_DIRECTION.DEFAULT ? (react_1.default.createElement(tableRows_1.TableRows, { tableInstance: tableInstance, virtualizer: virtualizer })) : (react_1.default.createElement(collapsableRows_1.CollapsableRows, { tableInstance: tableInstance, virtualizer: virtualizer })),
+        react_1.default.createElement(virtualizedRow_1.VirtualizedRow, { isUpperRow: false, virtualizer: virtualizer })));
+};
+exports.TableBody = TableBody;
+/**
+ * Measures the height of the element.
+ * @param element - Element to measure.
+ * @returns height of the element.
+ */
+function measureElement(element) {
+    // We select the first child element because the row is not a box element due to the "display: contents" style attribute.
+    const box = element.children[0];
+    if (!box) {
+        return 0;
+    }
+    return box.getBoundingClientRect().height;
+}

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.d.ts

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

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.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.CollapsableCell = void 0;
+const material_1 = require("@mui/material");
+const react_table_1 = require("@tanstack/react-table");
+const react_1 = __importStar(require("react"));
+const typography_1 = require("../../../../../../theme/common/typography");
+const unfoldMoreIcon_1 = require("../../../../../common/CustomIcon/components/UnfoldMoreIcon/unfoldMoreIcon");
+const utils_1 = require("../../../../common/utils");
+const collapsableCell_styles_1 = require("./collapsableCell.styles");
+const CollapsableCell = ({ row, }) => {
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
+    const [pinnedCell, pinnedIndex] = (0, utils_1.getPinnedCellIndex)(row);
+    // Toggles open/close table cell.
+    const onToggleExpanded = () => {
+        setIsExpanded((expanded) => !expanded);
+    };
+    return (react_1.default.createElement(collapsableCell_styles_1.TableCell, { isExpanded: isExpanded },
+        react_1.default.createElement(collapsableCell_styles_1.PinnedCell, null,
+            (0, react_table_1.flexRender)(pinnedCell.column.columnDef.cell, pinnedCell.getContext()),
+            react_1.default.createElement(material_1.IconButton, { color: "ink", edge: "end", onClick: onToggleExpanded, size: "large" },
+                react_1.default.createElement(unfoldMoreIcon_1.UnfoldMoreIcon, { fontSize: "small" }))),
+        react_1.default.createElement(material_1.Collapse, { in: isExpanded },
+            react_1.default.createElement(collapsableCell_styles_1.CollapsedContents, null, row.getVisibleCells().map((cell, i) => {
+                var _a;
+                const header = (_a = cell.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.header;
+                return (i !== pinnedIndex && (react_1.default.createElement(collapsableCell_styles_1.Content, { key: cell.id },
+                    header && (react_1.default.createElement(material_1.Typography, { component: "div", color: "ink.light", variant: typography_1.TEXT_BODY_400_2_LINES }, header)),
+                    (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext()))));
+            })))));
+};
+exports.CollapsableCell = CollapsableCell;

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.styles.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+interface Props {
+    isExpanded: boolean;
+}
+export declare const TableCell: import("@emotion/styled").StyledComponent<import("@mui/material").TableCellProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+} & Props, {}, {}>;
+export declare const PinnedCell: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const CollapsedContents: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Content: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export {};

package/lib/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.styles.js

@@ -0,0 +1,63 @@
+"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.Content = exports.CollapsedContents = exports.PinnedCell = exports.TableCell = 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");
+const fonts_1 = require("../../../../../../styles/common/mixins/fonts");
+exports.TableCell = (0, styled_1.default)(material_1.TableCell, {
+    shouldForwardProp: (prop) => prop !== "isExpanded",
+}) `
+  && {
+    display: block;
+    padding: 0;
+    transition: background-color 300ms ease-in;
+  }
+
+  // Expanded.
+  ${(_a) => {
+    var { isExpanded } = _a, props = __rest(_a, ["isExpanded"]);
+    return isExpanded &&
+        (0, react_1.css) `
+      && {
+        background-color: ${(0, colors_1.smokeLightest)(props)};
+      }
+    `;
+}};
+}
+`;
+exports.PinnedCell = styled_1.default.div `
+  align-items: center;
+  display: flex;
+  gap: 16px;
+  justify-content: space-between;
+  padding: 12px 16px;
+  word-break: break-word;
+`;
+exports.CollapsedContents = styled_1.default.div `
+  ${fonts_1.textBody4002Lines};
+  display: grid;
+  gap: 12px;
+  justify-items: flex-start;
+  padding: 0 16px 12px;
+  word-break: break-word;
+`;
+exports.Content = styled_1.default.div `
+  min-width: 0;
+  width: 100%;
+`;

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

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

package/lib/components/Table/components/TableHead/tableHead.js

@@ -0,0 +1,38 @@
+"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.TableHead = void 0;
+const material_1 = require("@mui/material");
+const react_table_1 = require("@tanstack/react-table");
+const react_1 = __importStar(require("react"));
+const entities_1 = require("../../common/entities");
+const utils_1 = require("../../common/utils");
+const TableHead = ({ rowDirection, tableInstance, }) => {
+    return (react_1.default.createElement(react_1.Fragment, null, rowDirection === entities_1.ROW_DIRECTION.DEFAULT &&
+        tableInstance.getHeaderGroups().map((headerGroup) => (react_1.default.createElement(material_1.TableHead, { key: headerGroup.id },
+            react_1.default.createElement(material_1.TableRow, null, headerGroup.headers.map((header) => (react_1.default.createElement(material_1.TableCell, { key: header.id },
+                react_1.default.createElement(material_1.TableSortLabel, Object.assign({}, (0, utils_1.getTableSortLabelProps)(header.column)), (0, react_table_1.flexRender)(header.column.columnDef.header, header.getContext())))))))))));
+};
+exports.TableHead = TableHead;

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

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