@databiosphere/findable-ui 5.0.0 → 7.0.0

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

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

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

@@ -1,15 +1,8 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import { TableBody as MTableBody } from "@mui/material";
+import React from "react";
+import { ROW_DIRECTION } from "../../../../../Table/common/entities";
+import { CollapsableRows } from "../TableRows/components/CollapsableRows/collapsableRows";
+import { TableRows } from "../TableRows/tableRows";
+export const TableBody = ({ rowDirection, tableInstance, tableView, }) => {
+    return (React.createElement(MTableBody, null, rowDirection === ROW_DIRECTION.DEFAULT ? (React.createElement(TableRows, { tableInstance: tableInstance, tableView: tableView })) : (React.createElement(CollapsableRows, { tableInstance: tableInstance }))));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableBody = void 0;
-const material_1 = require("@mui/material");
-const react_1 = __importDefault(require("react"));
-const entities_1 = require("../../../../../Table/common/entities");
-const collapsableRows_1 = require("../TableRows/components/CollapsableRows/collapsableRows");
-const tableRows_1 = require("../TableRows/tableRows");
-const TableBody = ({ rowDirection, tableInstance, tableView, }) => {
-    return (react_1.default.createElement(material_1.TableBody, null, rowDirection === entities_1.ROW_DIRECTION.DEFAULT ? (react_1.default.createElement(tableRows_1.TableRows, { tableInstance: tableInstance, tableView: tableView })) : (react_1.default.createElement(collapsableRows_1.CollapsableRows, { tableInstance: tableInstance }))));
-};
-exports.TableBody = TableBody;

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

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

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

@@ -1,43 +1,14 @@
-"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 material_1 = require("@mui/material");
-const react_1 = __importStar(require("react"));
-const uuid_1 = require("uuid");
-const utils_1 = require("../../../../../../../Table/common/utils");
-const collapsableCell_1 = require("../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell");
-const CollapsableRows = ({ tableInstance, }) => {
+import React, { Fragment } from "react";
+import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
+import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
+import { TableRow } from "../../../../../../../Table/components/TableRow/tableRow.styles";
+export const CollapsableRows = ({ tableInstance, }) => {
     const { getRowModel } = tableInstance;
     const { rows } = getRowModel();
-    const uuid = (0, uuid_1.v4)(); // Generate a unique ID for the collapsable rows.
-    return (react_1.default.createElement(react_1.Fragment, null, rows.map((row) => {
+    return (React.createElement(Fragment, null, rows.map((row) => {
         if (row.depth > 0)
             return null; // Hide sub rows.
-        return (react_1.default.createElement(material_1.TableRow, { key: `${uuid}${row.id}` },
-            react_1.default.createElement(collapsableCell_1.CollapsableCell, { isDisabled: (0, utils_1.isCollapsableRowDisabled)(tableInstance), row: row })));
+        return (React.createElement(TableRow, { key: row.id, isPreview: row.getIsPreview() },
+            React.createElement(CollapsableCell, { isDisabled: isCollapsableRowDisabled(tableInstance), row: row })));
     })));
 };
-exports.CollapsableRows = CollapsableRows;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import { TableView } from "../../table";
-export interface TableRowsProps<T> {
+export interface TableRowsProps<T extends RowData> {
     tableInstance: Table<T>;
     tableView?: TableView;
 }

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

@@ -1,49 +1,23 @@
-"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("../../../../../Table/components/TableCell/common/utils");
-const TableRows = ({ tableInstance, tableView, }) => {
+import { TableCell as MTableCell } from "@mui/material";
+import { flexRender } from "@tanstack/react-table";
+import React, { Fragment } from "react";
+import { getTableCellPadding } from "../../../../../Table/components/TableCell/common/utils";
+import { TableRow } from "../../../../../Table/components/TableRow/tableRow.styles";
+export const TableRows = ({ tableInstance, tableView, }) => {
     const { getRowModel } = tableInstance;
     const { rows } = getRowModel();
     const { tableCell } = tableView || {};
     const { size: tableCellSize = "medium" } = tableCell || {};
-    return (react_1.default.createElement(react_1.Fragment, null, rows.map((row) => {
-        return (react_1.default.createElement(material_1.TableRow, { id: getRowId(row), key: row.id }, row.getVisibleCells().map((cell) => {
+    return (React.createElement(Fragment, null, rows.map((row) => {
+        return (React.createElement(TableRow, { id: getRowId(row), isPreview: row.getIsPreview(), key: row.id }, row.getVisibleCells().map((cell) => {
             if (cell.getIsAggregated())
                 return null; // Display of aggregated cells is currently not supported.
             if (cell.getIsPlaceholder())
                 return null; // Display of placeholder cells is currently not supported.
-            return (react_1.default.createElement(material_1.TableCell, { key: cell.id, padding: (0, utils_1.getTableCellPadding)(cell.column.id), size: tableCellSize }, (0, react_table_1.flexRender)(cell.column.columnDef.cell, cell.getContext())));
+            return (React.createElement(MTableCell, { key: cell.id, padding: getTableCellPadding(cell.column.id), size: tableCellSize }, flexRender(cell.column.columnDef.cell, cell.getContext())));
         })));
     })));
 };
-exports.TableRows = TableRows;
 /**
  * Returns identifier for a row.
  * @param row - Row.

package/lib/components/Detail/components/Table/table.d.ts

@@ -1,13 +1,12 @@
 /// <reference types="react" />
 import { TableCellProps as MTableCellProps, TableContainerProps as MTableContainerProps, TableProps as MTableProps } from "@mui/material";
-import { ColumnDef } from "@tanstack/react-table";
-import { TableOptions } from "@tanstack/table-core";
+import { ColumnDef, RowData, TableOptions } from "@tanstack/react-table";
 export interface TableView {
     table?: Partial<MTableProps>;
     tableCell?: Partial<MTableCellProps>;
     tableContainer?: Partial<MTableContainerProps>;
 }
-export interface TableProps<T extends object> {
+export interface TableProps<T extends RowData> {
     className?: string;
     collapsable?: boolean;
     columns: ColumnDef<T>[];
@@ -16,4 +15,4 @@ export interface TableProps<T extends object> {
     tableOptions?: Partial<TableOptions<T>>;
     tableView?: TableView;
 }
-export declare const Table: <T extends object>({ className, collapsable, columns, gridTemplateColumns, items, tableOptions, tableView, }: TableProps<T>) => JSX.Element;
+export declare const Table: <T extends unknown>({ className, collapsable, columns, gridTemplateColumns, items, tableOptions, tableView, }: TableProps<T>) => JSX.Element;

package/lib/components/Detail/components/Table/table.js

@@ -1,29 +1,30 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Table = void 0;
-const material_1 = require("@mui/material");
-const react_table_1 = require("@tanstack/react-table");
-const react_1 = __importDefault(require("react"));
-const useBreakpointHelper_1 = require("../../../../hooks/useBreakpointHelper");
-const breakpoints_1 = require("../../../../theme/common/breakpoints");
-const entities_1 = require("../../../Table/common/entities");
-const tableHead_1 = require("../../../Table/components/TableHead/tableHead");
-const table_styles_1 = require("../../../Table/table.styles");
-const utils_1 = require("./common/utils");
-const tableBody_1 = require("./components/TableBody/tableBody");
-const Table = ({ className, collapsable = true, columns, gridTemplateColumns, items, tableOptions, tableView, }) => {
-    const tabletDown = (0, useBreakpointHelper_1.useBreakpointHelper)(useBreakpointHelper_1.BREAKPOINT_FN_NAME.DOWN, breakpoints_1.TABLET);
-    const rowDirection = collapsable && tabletDown ? entities_1.ROW_DIRECTION.VERTICAL : entities_1.ROW_DIRECTION.DEFAULT;
+import { TableContainer, } from "@mui/material";
+import { getCoreRowModel, useReactTable, } from "@tanstack/react-table";
+import React from "react";
+import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../../../hooks/useBreakpointHelper";
+import { TABLET } from "../../../../theme/common/breakpoints";
+import { ROW_DIRECTION } from "../../../Table/common/entities";
+import { TableHead } from "../../../Table/components/TableHead/tableHead";
+import { ROW_PREVIEW } from "../../../Table/features/RowPreview/constants";
+import { GridTable } from "../../../Table/table.styles";
+import { generateColumnDefinitions } from "./common/utils";
+import { TableBody } from "./components/TableBody/tableBody";
+export const Table = ({ className, collapsable = true, columns, gridTemplateColumns, items, tableOptions, tableView, }) => {
+    const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, TABLET);
+    const rowDirection = collapsable && tabletDown ? ROW_DIRECTION.VERTICAL : ROW_DIRECTION.DEFAULT;
     const { table, tableContainer } = tableView || {};
     const { stickyHeader = false } = table || {};
     const { sx: tableContainerSx } = tableContainer || {};
-    const tableInstance = (0, react_table_1.useReactTable)(Object.assign({ columns: (0, utils_1.generateColumnDefinitions)(columns), data: items, enableSorting: false, getCoreRowModel: (0, react_table_1.getCoreRowModel)() }, tableOptions));
-    return (react_1.default.createElement(material_1.TableContainer, { className: className, sx: tableContainerSx },
-        react_1.default.createElement(table_styles_1.GridTable, { collapsable: collapsable, gridTemplateColumns: gridTemplateColumns, stickyHeader: rowDirection === entities_1.ROW_DIRECTION.DEFAULT && stickyHeader },
-            react_1.default.createElement(tableHead_1.TableHead, { rowDirection: rowDirection, tableInstance: tableInstance }),
-            react_1.default.createElement(tableBody_1.TableBody, { rowDirection: rowDirection, tableInstance: tableInstance, tableView: tableView }))));
+    const tableInstance = useReactTable({
+        _features: [ROW_PREVIEW],
+        columns: generateColumnDefinitions(columns),
+        data: items,
+        enableSorting: false,
+        getCoreRowModel: getCoreRowModel(),
+        ...tableOptions,
+    });
+    return (React.createElement(TableContainer, { className: className, sx: tableContainerSx },
+        React.createElement(GridTable, { collapsable: collapsable, gridTemplateColumns: gridTemplateColumns, stickyHeader: rowDirection === ROW_DIRECTION.DEFAULT && stickyHeader },
+            React.createElement(TableHead, { rowDirection: rowDirection, tableInstance: tableInstance }),
+            React.createElement(TableBody, { rowDirection: rowDirection, tableInstance: tableInstance, tableView: tableView }))));
 };
-exports.Table = Table;

package/lib/components/Detail/detail.js

@@ -1,12 +1,5 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+import React from "react";
+import { BackPageView } from "../Layout/components/BackPage/backPageView";
+export const Detail = ({ isDetailOverview, mainColumn, sideColumn, Tabs, top, }) => {
+    return (React.createElement(BackPageView, { isDetailOverview: isDetailOverview, mainColumn: mainColumn, sideColumn: sideColumn, Tabs: Tabs, top: top }));
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Detail = void 0;
-const react_1 = __importDefault(require("react"));
-const backPageView_1 = require("../Layout/components/BackPage/backPageView");
-const Detail = ({ isDetailOverview, mainColumn, sideColumn, Tabs, top, }) => {
-    return (react_1.default.createElement(backPageView_1.BackPageView, { isDetailOverview: isDetailOverview, mainColumn: mainColumn, sideColumn: sideColumn, Tabs: Tabs, top: top }));
-};
-exports.Detail = Detail;

package/lib/components/Detail/detail.stories.js

@@ -1,22 +1,15 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-var _a, _b, _c, _d;
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DetailStory = void 0;
-const react_1 = __importDefault(require("react"));
-const collaboratingOrganizations_stories_1 = require("../Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories");
-const contacts_stories_1 = require("../Project/components/Contacts/contacts.stories");
-const contributors_stories_1 = require("../Project/components/Contributors/contributors.stories");
-const dataCurators_stories_1 = require("../Project/components/DataCurators/dataCurators.stories");
-const dataReleasePolicy_stories_1 = require("../Project/components/DataReleasePolicy/dataReleasePolicy.stories");
-const description_stories_1 = require("../Project/components/Description/description.stories");
-const details_stories_1 = require("../Project/components/Details/details.stories");
-const publications_stories_1 = require("../Project/components/Publications/publications.stories");
-const supplementaryLinks_stories_1 = require("../Project/components/SupplementaryLinks/supplementaryLinks.stories");
-const detail_1 = require("./detail");
-exports.default = {
+import React from "react";
+import { CollaboratingOrganizationsStory } from "../Project/components/CollaboratingOrganizations/collaboratingOrganizations.stories";
+import { ContactsStory } from "../Project/components/Contacts/contacts.stories";
+import { ContributorsStory } from "../Project/components/Contributors/contributors.stories";
+import { DataCuratorsStory } from "../Project/components/DataCurators/dataCurators.stories";
+import { DataReleasePolicyStory } from "../Project/components/DataReleasePolicy/dataReleasePolicy.stories";
+import { DescriptionStory } from "../Project/components/Description/description.stories";
+import { DetailsStory } from "../Project/components/Details/details.stories";
+import { PublicationsStory } from "../Project/components/Publications/publications.stories";
+import { SupplementaryLinksStory } from "../Project/components/SupplementaryLinks/supplementaryLinks.stories";
+import { Detail } from "./detail";
+export default {
     argTypes: {
         Tabs: { table: { disable: true } },
         isDetailOverview: { control: "boolean" },
@@ -24,26 +17,26 @@ exports.default = {
         sideColumn: { table: { disable: true } },
         top: { table: { disable: true } },
     },
-    component: detail_1.Detail,
+    component: Detail,
     parameters: {
         layout: "fullscreen",
     },
     title: "Views/EntityDetailView",
 };
-const DetailTemplate = (args) => (react_1.default.createElement(detail_1.Detail, Object.assign({}, args)));
-exports.DetailStory = DetailTemplate.bind({});
-exports.DetailStory.args = {
+const DetailTemplate = (args) => (React.createElement(Detail, { ...args }));
+export const DetailStory = DetailTemplate.bind({});
+DetailStory.args = {
     isDetailOverview: true,
-    mainColumn: (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(description_stories_1.DescriptionStory, { projectDescription: ((_a = description_stories_1.DescriptionStory.args) === null || _a === void 0 ? void 0 : _a.projectDescription) || "None" }),
-        react_1.default.createElement(contacts_stories_1.ContactsStory, Object.assign({}, contacts_stories_1.ContactsStory.args)),
-        react_1.default.createElement(publications_stories_1.PublicationsStory, Object.assign({}, publications_stories_1.PublicationsStory.args)),
-        react_1.default.createElement(contributors_stories_1.ContributorsStory, Object.assign({}, contributors_stories_1.ContributorsStory.args)),
-        react_1.default.createElement(collaboratingOrganizations_stories_1.CollaboratingOrganizationsStory, Object.assign({}, collaboratingOrganizations_stories_1.CollaboratingOrganizationsStory.args)),
-        react_1.default.createElement(dataCurators_stories_1.DataCuratorsStory, Object.assign({}, dataCurators_stories_1.DataCuratorsStory.args)),
-        react_1.default.createElement(supplementaryLinks_stories_1.SupplementaryLinksStory, Object.assign({}, supplementaryLinks_stories_1.SupplementaryLinksStory.args)),
-        react_1.default.createElement(dataReleasePolicy_stories_1.DataReleasePolicyStory, null))),
-    sideColumn: (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(details_stories_1.DetailsStory, { keyValuePairs: (_b = details_stories_1.DetailsStory.args) === null || _b === void 0 ? void 0 : _b.keyValuePairs, title: (_d = (_c = details_stories_1.DetailsStory.args) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : "" }))),
-    top: react_1.default.createElement(react_1.default.Fragment, null),
+    mainColumn: (React.createElement(React.Fragment, null,
+        React.createElement(DescriptionStory, { projectDescription: DescriptionStory.args?.projectDescription || "None" }),
+        React.createElement(ContactsStory, { ...ContactsStory.args }),
+        React.createElement(PublicationsStory, { ...PublicationsStory.args }),
+        React.createElement(ContributorsStory, { ...ContributorsStory.args }),
+        React.createElement(CollaboratingOrganizationsStory, { ...CollaboratingOrganizationsStory.args }),
+        React.createElement(DataCuratorsStory, { ...DataCuratorsStory.args }),
+        React.createElement(SupplementaryLinksStory, { ...SupplementaryLinksStory.args }),
+        React.createElement(DataReleasePolicyStory, null))),
+    sideColumn: (React.createElement(React.Fragment, null,
+        React.createElement(DetailsStory, { keyValuePairs: DetailsStory.args?.keyValuePairs, title: DetailsStory.args?.title ?? "" }))),
+    top: React.createElement(React.Fragment, null),
 };

package/lib/components/Error/error.js

@@ -1,50 +1,43 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Error = void 0;
-const material_1 = require("@mui/material");
-const link_1 = __importDefault(require("next/link"));
-const react_1 = __importDefault(require("react"));
-const useExploreState_1 = require("../../hooks/useExploreState");
-const useLayoutState_1 = require("../../hooks/useLayoutState");
-const exploreState_1 = require("../../providers/exploreState");
-const buttonPrimary_1 = require("../common/Button/components/ButtonPrimary/buttonPrimary");
-const alertIcon_1 = require("../common/CustomIcon/components/AlertIcon/alertIcon");
-const grid_1 = require("../common/Grid/grid");
-const paper_styles_1 = require("../common/Paper/paper.styles");
-const section_styles_1 = require("../common/Section/section.styles");
-const statusIcon_1 = require("../common/StatusIcon/statusIcon");
-const error_styles_1 = require("./error.styles");
-const ErrorMessage = ({ detail, title, }) => (react_1.default.createElement(section_styles_1.SectionContent, null,
-    react_1.default.createElement(material_1.Typography, { component: "h3", variant: "text-body-large-500" }, title),
-    react_1.default.createElement(paper_styles_1.RoundedPaper, null,
-        react_1.default.createElement(error_styles_1.ErrorCode, null, detail))));
-const Error = ({ errorMessage, onReset, requestUrlMessage, rootPath, }) => {
-    const { exploreDispatch } = (0, useExploreState_1.useExploreState)();
-    const { layoutState: { headerHeight }, } = (0, useLayoutState_1.useLayoutState)();
+import { Divider, Typography } from "@mui/material";
+import Link from "next/link";
+import React from "react";
+import { useExploreState } from "../../hooks/useExploreState";
+import { useLayoutState } from "../../hooks/useLayoutState";
+import { ExploreActionKind } from "../../providers/exploreState";
+import { ButtonPrimary } from "../common/Button/components/ButtonPrimary/buttonPrimary";
+import { AlertIcon } from "../common/CustomIcon/components/AlertIcon/alertIcon";
+import { Grid } from "../common/Grid/grid";
+import { RoundedPaper } from "../common/Paper/paper.styles";
+import { SectionActions, SectionContent as Content, } from "../common/Section/section.styles";
+import { PRIORITY, StatusIcon } from "../common/StatusIcon/statusIcon";
+import { Error as CustomError, ErrorCode, ErrorLayout, ErrorSection, SectionContent, } from "./error.styles";
+const ErrorMessage = ({ detail, title, }) => (React.createElement(Content, null,
+    React.createElement(Typography, { component: "h3", variant: "text-body-large-500" }, title),
+    React.createElement(RoundedPaper, null,
+        React.createElement(ErrorCode, null, detail))));
+export const Error = ({ errorMessage, onReset, requestUrlMessage, rootPath, }) => {
+    const { exploreDispatch } = useExploreState();
+    const { layoutState: { headerHeight }, } = useLayoutState();
     const handleToHomePageClicked = () => {
-        onReset === null || onReset === void 0 ? void 0 : onReset();
+        onReset?.();
         exploreDispatch({
             payload: "",
-            type: exploreState_1.ExploreActionKind.ResetState,
+            type: ExploreActionKind.ResetState,
         });
     };
-    return (react_1.default.createElement(error_styles_1.ErrorLayout, { offset: headerHeight },
-        react_1.default.createElement(error_styles_1.Error, null,
-            react_1.default.createElement(error_styles_1.ErrorSection, null,
-                react_1.default.createElement(statusIcon_1.StatusIcon, { priority: statusIcon_1.PRIORITY.HIGH, StatusIcon: alertIcon_1.AlertIcon }),
-                react_1.default.createElement(error_styles_1.SectionContent, null,
-                    react_1.default.createElement(material_1.Typography, { component: "h1", variant: "text-heading-xlarge" }, "Error"),
-                    react_1.default.createElement(material_1.Typography, { variant: "text-body-large-400" }, "An error occurred processing your request")),
-                rootPath && (react_1.default.createElement(section_styles_1.SectionActions, null,
-                    react_1.default.createElement(link_1.default, { href: rootPath, legacyBehavior: true, passHref: true },
-                        react_1.default.createElement(buttonPrimary_1.ButtonPrimary, { onClick: handleToHomePageClicked, href: "passHref" }, "To Homepage"))))),
-            (requestUrlMessage || errorMessage) && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(material_1.Divider, null),
-                react_1.default.createElement(grid_1.Grid, { gridSx: { gap: 6 } },
-                    requestUrlMessage && (react_1.default.createElement(ErrorMessage, { detail: requestUrlMessage, title: "Request URL" })),
-                    errorMessage && (react_1.default.createElement(ErrorMessage, { detail: errorMessage, title: "Error Message" }))))))));
+    return (React.createElement(ErrorLayout, { offset: headerHeight },
+        React.createElement(CustomError, null,
+            React.createElement(ErrorSection, null,
+                React.createElement(StatusIcon, { priority: PRIORITY.HIGH, StatusIcon: AlertIcon }),
+                React.createElement(SectionContent, null,
+                    React.createElement(Typography, { component: "h1", variant: "text-heading-xlarge" }, "Error"),
+                    React.createElement(Typography, { variant: "text-body-large-400" }, "An error occurred processing your request")),
+                rootPath && (React.createElement(SectionActions, null,
+                    React.createElement(Link, { href: rootPath, legacyBehavior: true, passHref: true },
+                        React.createElement(ButtonPrimary, { onClick: handleToHomePageClicked, href: "passHref" }, "To Homepage"))))),
+            (requestUrlMessage || errorMessage) && (React.createElement(React.Fragment, null,
+                React.createElement(Divider, null),
+                React.createElement(Grid, { gridSx: { gap: 6 } },
+                    requestUrlMessage && (React.createElement(ErrorMessage, { detail: requestUrlMessage, title: "Request URL" })),
+                    errorMessage && (React.createElement(ErrorMessage, { detail: errorMessage, title: "Error Message" }))))))));
 };
-exports.Error = Error;

package/lib/components/Error/error.stories.js

@@ -1,25 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ClientSideErrorWithErrorCodeStory = exports.ClientSideErrorStory = void 0;
-const error_1 = require("./error");
-exports.default = {
+import { Error } from "./error";
+export default {
     argTypes: {
         errorMessage: { control: "text" },
         requestUrlMessage: { control: "text" },
         rootPath: { control: "text" },
     },
-    component: error_1.Error,
+    component: Error,
     parameters: {
         layout: "fullscreen",
     },
     title: "Components/Communication",
 };
-exports.ClientSideErrorStory = {
+export const ClientSideErrorStory = {
     args: {
         rootPath: "#",
     },
 };
-exports.ClientSideErrorWithErrorCodeStory = {
+export const ClientSideErrorWithErrorCodeStory = {
     args: {
         errorMessage: "curl --location --fail 'https://service.azul.data.humancellatlas.org/manifest/files?catalog=dcp16&format=curl&filters=%7B%22projectId%22%3A+%7B%22is%22%3A+%5B%22f86f1ab4-1fbb-4510-ae35-3ffd752d4dfc%22%5D%7D%2C+%22fileFormat%22%3A+%7B%22is%22%3A+%5B%22fastq.gz%22%5D%7D%2C+%22genusSpecies%22%3A%7B%22is%22%3A%5B%22Homo+sapiens%22%5D%7D%7D&objectKey=manifests%2Fee705e99-35d3-5ae1-9e31-89d206e4240b.e735a6e0-9914-5b40-8fa2-c4d581644f50.curlrc' | curl --config -",
         requestUrlMessage: "https://service.azul.data.humancellatlas.org/manifest/files?catalog=dcp16&format=compact&filters=%7B%22projectId%22%3A+%7B%22is%22%3A+%5B%2274b6d569-3b11-42ef-b6b1-a0454522b4a0%22%5D%7D%2C+%22genusSpecies%22%3A+%7B%22is%22%",

package/lib/components/Error/error.styles.js

@@ -1,20 +1,14 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorCode = exports.SectionContent = exports.ErrorSection = exports.Error = exports.ErrorLayout = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const fonts_1 = require("../../styles/common/mixins/fonts");
-const breakpoints_1 = require("../../theme/common/breakpoints");
-const section_styles_1 = require("../common/Section/section.styles");
-exports.ErrorLayout = (0, styled_1.default)("div", {
+import styled from "@emotion/styled";
+import { textBody4002Lines } from "../../styles/common/mixins/fonts";
+import { TABLET } from "../../theme/common/breakpoints";
+import { Section, sectionMarginXsm } from "../common/Section/section.styles";
+export const ErrorLayout = styled("div", {
     shouldForwardProp: (prop) => prop !== "offset",
 }) `
   flex: 1;
   margin-top: ${({ offset }) => offset}px;
 `;
-exports.Error = styled_1.default.div `
+export const Error = styled.div `
   margin: 0 auto;
   max-width: 648px;
   padding: 40px 20px;
@@ -24,20 +18,20 @@ exports.Error = styled_1.default.div `
     margin: 32px 0;
   }
 `;
-exports.ErrorSection = (0, styled_1.default)(section_styles_1.Section) `
+export const ErrorSection = styled(Section) `
   align-items: center;
   padding: 0;
 
-  ${({ theme }) => theme.breakpoints.up(breakpoints_1.TABLET)} {
+  ${({ theme }) => theme.breakpoints.up(TABLET)} {
     padding: 0;
   }
 `;
-exports.SectionContent = styled_1.default.div `
+export const SectionContent = styled.div `
   text-align: center;
 `;
-exports.ErrorCode = styled_1.default.div `
-  ${section_styles_1.sectionMarginXsm}
-  ${fonts_1.textBody4002Lines}
+export const ErrorCode = styled.div `
+  ${sectionMarginXsm}
+  ${textBody4002Lines}
   font-family: "Roboto Mono", monospace;
   font-size: 12px;
   overflow-wrap: anywhere;

package/lib/components/ErrorBoundary/errorBoundary.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.ErrorBoundary = void 0;
-const react_1 = __importDefault(require("react"));
-class ErrorBoundary extends react_1.default.Component {
+import React from "react";
+export class ErrorBoundary extends React.Component {
     constructor(props) {
         super(props);
         this.reset = this.reset.bind(this);
@@ -25,4 +19,3 @@ class ErrorBoundary extends react_1.default.Component {
         return this.props.children;
     }
 }
-exports.ErrorBoundary = ErrorBoundary;

package/lib/components/ErrorBoundary/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorBoundary = void 0;
-var errorBoundary_1 = require("./errorBoundary");
-Object.defineProperty(exports, "ErrorBoundary", { enumerable: true, get: function () { return errorBoundary_1.ErrorBoundary; } });
+export { ErrorBoundary } from "./errorBoundary";

package/lib/components/Export/common/entities.js

@@ -1,11 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BULK_DOWNLOAD_EXECUTION_ENVIRONMENT = void 0;
 /**
  * Set of supported shells that bulk download curl can be executed on.
  */
-var BULK_DOWNLOAD_EXECUTION_ENVIRONMENT;
+export var BULK_DOWNLOAD_EXECUTION_ENVIRONMENT;
 (function (BULK_DOWNLOAD_EXECUTION_ENVIRONMENT) {
     BULK_DOWNLOAD_EXECUTION_ENVIRONMENT["BASH"] = "bash";
     BULK_DOWNLOAD_EXECUTION_ENVIRONMENT["CMD_EXE"] = "cmd.exe";
-})(BULK_DOWNLOAD_EXECUTION_ENVIRONMENT = exports.BULK_DOWNLOAD_EXECUTION_ENVIRONMENT || (exports.BULK_DOWNLOAD_EXECUTION_ENVIRONMENT = {}));
+})(BULK_DOWNLOAD_EXECUTION_ENVIRONMENT || (BULK_DOWNLOAD_EXECUTION_ENVIRONMENT = {}));