@databiosphere/findable-ui 6.0.0 → 7.0.0

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

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

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

@@ -1,42 +1,15 @@
-"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.CollapsableRows = void 0;
-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, }) => {
+import React, { Fragment } from "react";
+import { isCollapsableRowDisabled } from "../../../../common/utils";
+import { CollapsableCell } from "../../../TableCell/components/CollapsableCell/collapsableCell";
+import { TableRow } from "../../../TableRow/tableRow.styles";
+export 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) => {
+    return (React.createElement(Fragment, null, virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index];
         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 })));
+        return (React.createElement(TableRow, { key: row.id, "data-index": virtualRow.index, isPreview: getIsPreview(), ref: virtualizer.measureElement },
+            React.createElement(CollapsableCell, { isDisabled: isCollapsableRowDisabled(tableInstance), row: row })));
     })));
 };
-exports.CollapsableRows = CollapsableRows;

package/lib/components/Table/components/TableRows/components/VirtualizedRow/virtualizedRow.js

@@ -1,40 +1,13 @@
-"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.VirtualizedRow = void 0;
-const react_1 = __importStar(require("react"));
-const VirtualizedRow = ({ isUpperRow, virtualizer, }) => {
+import React, { useMemo } from "react";
+export const VirtualizedRow = ({ isUpperRow, virtualizer, }) => {
     const virtualItems = virtualizer.getVirtualItems();
     const virtualSize = virtualizer.getTotalSize();
-    const topPadding = (0, react_1.useMemo)(() => calculateTopPadding(virtualItems), [virtualItems]);
-    const bottomPadding = (0, react_1.useMemo)(() => calculateBottomPadding(virtualItems, virtualSize), [virtualItems, virtualSize]);
+    const topPadding = useMemo(() => calculateTopPadding(virtualItems), [virtualItems]);
+    const bottomPadding = useMemo(() => calculateBottomPadding(virtualItems, virtualSize), [virtualItems, virtualSize]);
     const padding = isUpperRow ? topPadding : bottomPadding;
-    return (react_1.default.createElement(react_1.default.Fragment, null, padding > 0 && (react_1.default.createElement("tr", null,
-        react_1.default.createElement("td", { style: { gridColumn: "1 / -1", height: padding } })))));
+    return (React.createElement(React.Fragment, null, padding > 0 && (React.createElement("tr", null,
+        React.createElement("td", { style: { gridColumn: "1 / -1", height: padding } })))));
 };
-exports.VirtualizedRow = VirtualizedRow;
 /**
  * Returns the bottom padding for the virtualized row.
  * @param virtualItems - Virtual items.
@@ -42,11 +15,10 @@ exports.VirtualizedRow = VirtualizedRow;
  * @returns bottom padding.
  */
 function calculateBottomPadding(virtualItems, virtualSize) {
-    var _a;
     if (virtualItems.length === 0) {
         return 0;
     }
-    return virtualSize - ((_a = virtualItems[virtualItems.length - 1]) === null || _a === void 0 ? void 0 : _a.end);
+    return virtualSize - virtualItems[virtualItems.length - 1]?.end;
 }
 /**
  * Returns the top padding for the virtualized row.

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

@@ -1,42 +1,15 @@
-"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.TableRows = void 0;
-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, }) => {
+import { TableCell as MTableCell } from "@mui/material";
+import { flexRender } from "@tanstack/react-table";
+import React, { Fragment } from "react";
+import { getTableCellPadding } from "../TableCell/common/utils";
+import { TableRow } from "../TableRow/tableRow.styles";
+export 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) => {
+    return (React.createElement(Fragment, null, virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index];
         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()))))));
+        return (React.createElement(TableRow, { key: row.id, "data-index": virtualRow.index, isPreview: getIsPreview(), ref: virtualizer.measureElement }, row.getVisibleCells().map((cell) => (React.createElement(MTableCell, { key: cell.id, padding: getTableCellPadding(cell.column.id) }, flexRender(cell.column.columnDef.cell, cell.getContext()))))));
     })));
 };
-exports.TableRows = TableRows;

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

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

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

@@ -3,7 +3,7 @@ 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>;
+    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

@@ -1,32 +1,13 @@
-"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;
+import { Divider, Typography as MTypography, } from "@mui/material";
+import React 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 const RowDrawer = ({ children, className, tableInstance, title, ...props /* Spread props to allow for Mui Drawer specific prop overrides. */ }) => {
+    const { getIsRowPreview, resetRowPreview, toggleRowPreview } = tableInstance || {};
+    return (React.createElement(Drawer, { ...DEFAULT_DRAWER_PROPS, className: className, onTransitionExited: resetRowPreview, open: getIsRowPreview?.(), ...props },
+        React.createElement(DrawerTitle, { onClose: () => toggleRowPreview?.(), title: typeof title === "string" ? (React.createElement(MTypography, { component: "div", noWrap: true, variant: TEXT_HEADING_SMALL }, title)) : (title) }),
+        React.createElement(Divider, null),
+        React.createElement(DrawerContent, null, children)));
 };
-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.js

@@ -1,34 +1,28 @@
-"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) `
+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 ${colors_1.smokeMain};
+      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%;
     }
 
-    ${breakpoints_1.mediaTabletUp} {
+    ${mediaTabletUp} {
       .MuiDrawer-paper {
         max-width: min(506px, 50vw);
       }
     }
   }
 `;
-exports.DrawerTitle = (0, styled_1.default)(drawerTitle_1.DrawerTitle) `
+export const DrawerTitle = styled(DXDrawerTitle) `
   .MuiTypography-text-heading-small {
     font-size: 20px;
   }

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
-import { RowData, Table } from "@tanstack/react-table";
+import { RowData } 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>;
+    rowData: T;
 }
-export declare const RowDetail: <T extends unknown>({ className, columns, expanded, minColumns, tableInstance, }: RowDetailProps<T>) => JSX.Element | null;
+export declare const RowDetail: <T extends unknown>({ className, columns, expanded, minColumns, rowData, }: RowDetailProps<T>) => JSX.Element | null;
 export {};

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/Section/components/RowDetail/rowDetail.js

@@ -1,32 +1,20 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RowDetail = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const typography_1 = require("../../../../../../../../../../theme/common/typography");
-const buttonTextPrimary_1 = require("../../../../../../../../../common/Button/components/ButtonTextPrimary/buttonTextPrimary");
-const ComponentCreator_1 = require("../../../../../../../../../ComponentCreator/ComponentCreator");
-const rowDetail_styles_1 = require("./rowDetail.styles");
+import { Grid, Typography } from "@mui/material";
+import React from "react";
+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;
-const RowDetail = ({ className, columns, expanded = true, minColumns = MIN_COLUMNS, tableInstance, }) => {
-    const [showMore, setShowMore] = react_1.default.useState(expanded);
-    const { getRowPreviewRow } = tableInstance;
-    const { original: rowData } = getRowPreviewRow() || {};
+export const RowDetail = ({ className, columns, expanded = true, minColumns = MIN_COLUMNS, rowData, }) => {
+    const [showMore, setShowMore] = React.useState(expanded);
     const visibleColumns = showMore ? columns : columns.slice(0, minColumns);
     const buttonText = showMore ? "Show less" : "Show more";
     const onToggleShowMore = () => setShowMore(!showMore);
     if (!rowData)
         return null;
-    return (react_1.default.createElement(rowDetail_styles_1.Section, { className: className },
-        visibleColumns.map(({ componentConfig, header }, i) => {
-            var _a;
-            return (react_1.default.createElement(material_1.Grid, { key: i },
-                react_1.default.createElement(material_1.Typography, Object.assign({ color: "ink.light", variant: typography_1.TEXT_BODY_400 }, (_a = componentConfig.props) === null || _a === void 0 ? void 0 : _a.TypographyProps), header),
-                react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: [componentConfig], response: rowData })));
-        }),
-        react_1.default.createElement(buttonTextPrimary_1.ButtonTextPrimary, { onClick: onToggleShowMore }, buttonText)));
+    return (React.createElement(Section, { className: className },
+        visibleColumns.map(({ componentConfig, header }, i) => (React.createElement(Grid, { key: i },
+            React.createElement(Typography, { color: "ink.light", variant: TEXT_BODY_400, ...componentConfig.props?.TypographyProps }, header),
+            React.createElement(ComponentCreator, { components: [componentConfig], response: rowData })))),
+        React.createElement(ButtonTextPrimary, { onClick: onToggleShowMore }, buttonText)));
 };
-exports.RowDetail = RowDetail;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/Section/components/RowDetail/rowDetail.styles.js

@@ -1,14 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Section = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const breakpoints_1 = require("../../../../../../../../../../styles/common/mixins/breakpoints");
-const fonts_1 = require("../../../../../../../../../../styles/common/mixins/fonts");
-exports.Section = styled_1.default.div `
-  ${fonts_1.textBody400};
+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);
@@ -30,7 +24,7 @@ exports.Section = styled_1.default.div `
     text-transform: none;
   }
 
-  ${breakpoints_1.mediaTabletUp} {
+  ${mediaTabletUp} {
     gap: 0 8px;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     padding: 8px 24px;
@@ -44,7 +38,7 @@ exports.Section = styled_1.default.div `
     }
   }
 
-  ${breakpoints_1.mediaDesktopSmallUp} {
+  ${mediaDesktopSmallUp} {
     grid-template-columns: 194px minmax(0, 1fr);
   }
 `;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/Section/section.js

@@ -1,16 +1,9 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Section = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const typography_1 = require("../../../../../../../../theme/common/typography");
-const section_styles_1 = require("./section.styles");
-const Section = ({ children, className, title, }) => {
-    return (react_1.default.createElement(section_styles_1.Section, { className: className },
-        react_1.default.createElement(material_1.Typography, { component: "div", variant: typography_1.TEXT_HEADING_SMALL }, title),
+import { Typography } from "@mui/material";
+import React from "react";
+import { TEXT_HEADING_SMALL } from "../../../../../../../../theme/common/typography";
+import { Section as PreviewSection } from "./section.styles";
+export const Section = ({ children, className, title, }) => {
+    return (React.createElement(PreviewSection, { className: className },
+        React.createElement(Typography, { component: "div", variant: TEXT_HEADING_SMALL }, title),
         children));
 };
-exports.Section = Section;

package/lib/components/Table/components/TableToolbar/components/RowPreview/components/Section/section.styles.js

@@ -1,11 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Section = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.Section = styled_1.default.div `
+import styled from "@emotion/styled";
+export const Section = styled.div `
   display: grid;
   gap: 16px;
   padding: 16px 24px 24px;

package/lib/components/Table/components/TableToolbar/components/RowPreview/rowPreview.js

@@ -1,14 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RowPreview = void 0;
-const react_1 = __importDefault(require("react"));
-const ComponentCreator_1 = require("../../../../../ComponentCreator/ComponentCreator");
-const RowPreview = ({ rowPreviewView, tableInstance, }) => {
+import React from "react";
+import { ComponentCreator } from "../../../../../ComponentCreator/ComponentCreator";
+export const RowPreview = ({ rowPreviewView, tableInstance, }) => {
     if (!rowPreviewView)
         return null;
-    return (react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: rowPreviewView, response: tableInstance }));
+    const { getRowPreviewRow } = tableInstance;
+    const { original: response } = getRowPreviewRow() || {};
+    if (!response)
+        return null;
+    return (React.createElement(ComponentCreator, { components: rowPreviewView, response: response, viewContext: { tableInstance } }));
 };
-exports.RowPreview = RowPreview;

package/lib/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.js

@@ -1,37 +1,18 @@
-"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.DropdownMenu = void 0;
-const react_1 = __importDefault(require("react"));
-const dropdownButton_1 = require("../../../../../../../common/Button/components/DropdownButton/dropdownButton");
-const dropdownMenu_styles_1 = require("./dropdownMenu.styles");
+import React from "react";
+import { DropdownButton as DXDropdownButton } from "../../../../../../../common/Button/components/DropdownButton/dropdownButton";
+import { DropdownMenu as RowSelectionDropdownMenu } from "./dropdownMenu.styles";
 const DEFAULT_MENU_PROPS = {
     anchorOrigin: { horizontal: "left", vertical: "bottom" },
     transformOrigin: { horizontal: "left", vertical: "top" },
 };
-const DropdownMenu = (_a) => {
-    var { Button = (props) => renderButton(Object.assign({ children: buttonLabel }, props)), buttonLabel = "Edit", children, className } = _a, props = __rest(_a, ["Button", "buttonLabel", "children", "className"]) /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */;
-    return (react_1.default.createElement(dropdownMenu_styles_1.DropdownMenu, Object.assign({}, DEFAULT_MENU_PROPS, { className: className, Button: Button }, props), ({ closeMenu }) => children({ closeMenu })));
+export const DropdownMenu = ({ Button = (props) => renderButton({ children: buttonLabel, ...props }), buttonLabel = "Edit", children, className, ...props /* Spread props to allow for Mui Menu specific prop overrides e.g. "anchorOrigin". */ }) => {
+    return (React.createElement(RowSelectionDropdownMenu, { ...DEFAULT_MENU_PROPS, className: className, Button: Button, ...props }, ({ closeMenu }) => children({ closeMenu })));
 };
-exports.DropdownMenu = DropdownMenu;
 /**
  * Return the dropdown button.
  * @param props - Button props e.g. "onClick".
  * @returns button element.
  */
 function renderButton(props) {
-    return react_1.default.createElement(dropdownButton_1.DropdownButton, Object.assign({}, props));
+    return React.createElement(DXDropdownButton, { ...props });
 }

package/lib/components/Table/components/TableToolbar/components/RowSelection/components/DropdownMenu/dropdownMenu.styles.js

@@ -1,12 +1,6 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownMenu = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const dropdownMenu_1 = require("../../../../../../../common/DropdownMenu/dropdownMenu");
-exports.DropdownMenu = (0, styled_1.default)(dropdownMenu_1.DropdownMenu) `
+import styled from "@emotion/styled";
+import { DropdownMenu as DXDropdownMenu } from "../../../../../../../common/DropdownMenu/dropdownMenu";
+export const DropdownMenu = styled(DXDropdownMenu) `
   .MuiPaper-menu {
     min-width: 288px;
   }

package/lib/components/Table/components/TableToolbar/components/RowSelection/rowSelection.js

@@ -1,19 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RowSelection = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const typography_1 = require("../../../../../../theme/common/typography");
-const ComponentCreator_1 = require("../../../../../ComponentCreator/ComponentCreator");
-const rowSelection_styles_1 = require("./rowSelection.styles");
-const RowSelection = ({ className, rows, rowSelectionView, }) => {
-    return (react_1.default.createElement(rowSelection_styles_1.RowSelection, { className: className },
-        react_1.default.createElement(material_1.Typography, { variant: typography_1.TEXT_BODY_400 },
+import { Typography } from "@mui/material";
+import React from "react";
+import { TEXT_BODY_400 } from "../../../../../../theme/common/typography";
+import { ComponentCreator } from "../../../../../ComponentCreator/ComponentCreator";
+import { RowSelection as RowSelectionActions } from "./rowSelection.styles";
+export const RowSelection = ({ className, rows, rowSelectionView, }) => {
+    return (React.createElement(RowSelectionActions, { className: className },
+        React.createElement(Typography, { variant: TEXT_BODY_400 },
             rows.length,
             " items selected:"),
-        rowSelectionView ? (react_1.default.createElement(ComponentCreator_1.ComponentCreator, { components: rowSelectionView, response: rows })) : null));
+        rowSelectionView ? (React.createElement(ComponentCreator, { components: rowSelectionView, response: rows })) : null));
 };
-exports.RowSelection = RowSelection;

package/lib/components/Table/components/TableToolbar/components/RowSelection/rowSelection.styles.js

@@ -1,11 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RowSelection = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-exports.RowSelection = styled_1.default.div `
+import styled from "@emotion/styled";
+export const RowSelection = styled.div `
   align-items: center;
   display: flex;
   gap: 16px;