@databiosphere/findable-ui 6.0.0 → 8.0.0

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;

package/lib/components/Table/components/TableToolbar/tableToolbar.js

@@ -1,48 +1,22 @@
-"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.TableToolbar = void 0;
-const react_1 = __importStar(require("react"));
-const useExploreState_1 = require("../../../../hooks/useExploreState");
-const entities_1 = require("../../common/entities");
-const utils_1 = require("../../common/utils");
-const checkboxMenu_1 = require("../CheckboxMenu/checkboxMenu");
-const downloadEntityResults_1 = require("../DownloadEntityResults/downloadEntityResults");
-const paginationSummary_1 = require("../PaginationSummary/paginationSummary");
-const rowPreview_1 = require("./components/RowPreview/rowPreview");
-const rowSelection_1 = require("./components/RowSelection/rowSelection");
-const tableToolbar_styles_1 = require("./tableToolbar.styles");
-const TableToolbar = ({ listView, rowDirection, tableInstance, }) => {
-    const { exploreState } = (0, useExploreState_1.useExploreState)();
+import React, { Fragment } from "react";
+import { useExploreState } from "../../../../hooks/useExploreState";
+import { ROW_DIRECTION } from "../../common/entities";
+import { getEditColumnOptions, isAnyRowSelected } from "../../common/utils";
+import { CheckboxMenu } from "../CheckboxMenu/checkboxMenu";
+import { DownloadEntityResults } from "../DownloadEntityResults/downloadEntityResults";
+import { PaginationSummary } from "../PaginationSummary/paginationSummary";
+import { RowPreview } from "./components/RowPreview/rowPreview";
+import { RowSelection } from "./components/RowSelection/rowSelection";
+import { Toolbar, ToolbarActions } from "./tableToolbar.styles";
+export const TableToolbar = ({ listView, rowDirection, tableInstance, }) => {
+    const { exploreState } = useExploreState();
     const { paginationState } = exploreState;
     const { currentPage, pages, pageSize, rows } = paginationState;
     const { getSelectedRowModel, resetColumnVisibility } = tableInstance;
     const { enableDownload, rowPreviewView } = listView || {};
     const isLastPage = currentPage === pages;
-    const editColumnOptions = (0, utils_1.getEditColumnOptions)(tableInstance);
-    const showToolbar = rowDirection === entities_1.ROW_DIRECTION.DEFAULT &&
+    const editColumnOptions = getEditColumnOptions(tableInstance);
+    const showToolbar = rowDirection === ROW_DIRECTION.DEFAULT &&
         (editColumnOptions || enableDownload);
     /**
      * Resets column visibility to default state.
@@ -50,12 +24,11 @@ const TableToolbar = ({ listView, rowDirection, tableInstance, }) => {
     const onResetColumnVisibility = () => {
         resetColumnVisibility(false);
     };
-    return (react_1.default.createElement(react_1.Fragment, null,
-        showToolbar && (react_1.default.createElement(tableToolbar_styles_1.Toolbar, { variant: "table" },
-            (0, utils_1.isAnyRowSelected)(tableInstance) ? (react_1.default.createElement(rowSelection_1.RowSelection, { rows: getSelectedRowModel().rows, rowSelectionView: listView === null || listView === void 0 ? void 0 : listView.rowSelectionView })) : (react_1.default.createElement(paginationSummary_1.PaginationSummary, { firstResult: (currentPage - 1) * pageSize + 1, lastResult: isLastPage ? rows : pageSize * currentPage, totalResult: rows })),
-            react_1.default.createElement(tableToolbar_styles_1.ToolbarActions, null,
-                enableDownload && (react_1.default.createElement(downloadEntityResults_1.DownloadEntityResults, { entityName: exploreState.tabValue, rows: tableInstance.getFilteredRowModel().rows })),
-                react_1.default.createElement(checkboxMenu_1.CheckboxMenu, { label: "Edit Columns", onReset: onResetColumnVisibility, options: editColumnOptions })))),
-        react_1.default.createElement(rowPreview_1.RowPreview, { rowPreviewView: rowPreviewView, tableInstance: tableInstance })));
+    return (React.createElement(Fragment, null,
+        showToolbar && (React.createElement(Toolbar, { variant: "table" },
+            isAnyRowSelected(tableInstance) ? (React.createElement(RowSelection, { rows: getSelectedRowModel().rows, rowSelectionView: listView?.rowSelectionView })) : (React.createElement(PaginationSummary, { firstResult: (currentPage - 1) * pageSize + 1, lastResult: isLastPage ? rows : pageSize * currentPage, totalResult: rows })),
+            React.createElement(ToolbarActions, null,
+                enableDownload && (React.createElement(DownloadEntityResults, { entityName: exploreState.tabValue, rows: tableInstance.getFilteredRowModel().rows })),
+                React.createElement(CheckboxMenu, { label: "Edit Columns", onReset: onResetColumnVisibility, options: editColumnOptions })))),
+        React.createElement(RowPreview, { rowPreviewView: rowPreviewView, tableInstance: tableInstance })));
 };
-exports.TableToolbar = TableToolbar;

package/lib/components/Table/components/TableToolbar/tableToolbar.styles.js

@@ -1,23 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToolbarActions = exports.Toolbar = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const material_1 = require("@mui/material");
-const colors_1 = require("../../../../styles/common/mixins/colors");
-const grid_1 = require("../../../common/Grid/grid");
-exports.Toolbar = (0, styled_1.default)(material_1.Toolbar) `
+import styled from "@emotion/styled";
+import { Toolbar as MToolbar } from "@mui/material";
+import { white } from "../../../../styles/common/mixins/colors";
+import { Grid } from "../../../common/Grid/grid";
+export const Toolbar = styled(MToolbar) `
   &.MuiToolbar-table {
     align-items: center;
-    background-color: ${colors_1.white};
+    background-color: ${white};
     display: flex;
     justify-content: space-between;
     padding: 20px;
   }
 `;
-exports.ToolbarActions = (0, styled_1.default)(grid_1.Grid) `
+export const ToolbarActions = styled(Grid) `
   gap: 8px;
   grid-auto-flow: column;
 `;

package/lib/components/Table/features/RowPreview/constants.js

@@ -1,45 +1,44 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ROW_PREVIEW = void 0;
-const react_table_1 = require("@tanstack/react-table");
-const utils_1 = require("./utils");
-exports.ROW_PREVIEW = {
+import { functionalUpdate, makeStateUpdater, } from "@tanstack/react-table";
+import { getIsPreview, getIsRowPreview, getRowPreviewRow, togglePreview, toggleRowPreview, } from "./utils";
+export const ROW_PREVIEW = {
     createRow: (row, table) => {
         row.getIsPreview = () => {
-            return (0, utils_1.getIsPreview)(row, table);
+            return getIsPreview(row, table);
         };
         row.togglePreview = () => {
-            (0, utils_1.togglePreview)(row, table);
+            togglePreview(row, table);
         };
     },
     createTable: (table) => {
         table.getIsRowPreview = () => {
-            return (0, utils_1.getIsRowPreview)(table);
+            return getIsRowPreview(table);
         };
         table.getRowPreviewRow = () => {
-            return (0, utils_1.getRowPreviewRow)(table);
+            return getRowPreviewRow(table);
         };
         table.resetRowPreview = () => {
             table.setRowPreview(undefined);
         };
         table.setRowPreview = (updater) => {
-            var _a, _b;
             const safeUpdater = (old) => {
-                return (0, react_table_1.functionalUpdate)(updater, old);
+                return functionalUpdate(updater, old);
             };
-            return (_b = (_a = table.options).onRowPreviewChange) === null || _b === void 0 ? void 0 : _b.call(_a, safeUpdater);
+            return table.options.onRowPreviewChange?.(safeUpdater);
         };
         table.toggleRowPreview = () => {
-            (0, utils_1.toggleRowPreview)(table);
+            toggleRowPreview(table);
         };
     },
     getDefaultOptions: (table) => {
         return {
             enableRowPreview: true,
-            onRowPreviewChange: (0, react_table_1.makeStateUpdater)("rowPreview", table),
+            onRowPreviewChange: makeStateUpdater("rowPreview", table),
         };
     },
     getInitialState: (initialState) => {
-        return Object.assign(Object.assign({}, initialState), { rowPreview: undefined });
+        return {
+            ...initialState,
+            rowPreview: undefined,
+        };
     },
 };

package/lib/components/Table/features/RowPreview/entities.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/lib/components/Table/features/RowPreview/utils.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toggleRowPreview = exports.togglePreview = exports.getRowPreviewRow = exports.getIsRowPreview = exports.getIsPreview = void 0;
 /**
  * Returns true if the row is selected for preview.
  * @param row - Row.
  * @param table - Table.
  * @returns true if the row is selected for preview.
  */
-function getIsPreview(row, table) {
+export function getIsPreview(row, table) {
     const keyValue = getRowPreviewKeyValue(table);
     if (!keyValue)
         return false;
@@ -16,26 +13,24 @@ function getIsPreview(row, table) {
         return false;
     return key === row.id;
 }
-exports.getIsPreview = getIsPreview;
 /**
  * Returns true if any row is selected for preview.
  * @param table - Table.
  * @returns true if any row is selected for preview.
  */
-function getIsRowPreview(table) {
+export function getIsRowPreview(table) {
     const keyValue = getRowPreviewKeyValue(table);
     if (!keyValue)
         return false;
     const [, value] = keyValue;
     return value;
 }
-exports.getIsRowPreview = getIsRowPreview;
 /**
  * Returns row selected for preview. Row data is returned even if the row is no longer "previewed" i.e. selected for preview.
  * @param table - Table.
  * @returns row selected for preview.
  */
-function getRowPreviewRow(table) {
+export function getRowPreviewRow(table) {
     const keyValue = getRowPreviewKeyValue(table);
     if (!keyValue)
         return;
@@ -45,7 +40,6 @@ function getRowPreviewRow(table) {
     const rowsById = table.getRowModel().rowsById;
     return rowsById[key];
 }
-exports.getRowPreviewRow = getRowPreviewRow;
 /**
  * Returns the key, value tuple of the row selected for preview.
  * @param table - Table.
@@ -66,19 +60,18 @@ function getRowPreviewKeyValue(table) {
  * @param row - Row.
  * @param table - Table.
  */
-function togglePreview(row, table) {
+export function togglePreview(row, table) {
     if (row.getIsPreview()) {
         table.toggleRowPreview();
         return;
     }
     table.setRowPreview({ [row.id]: true });
 }
-exports.togglePreview = togglePreview;
 /**
  * Toggles the preview state of any row selected for preview.
  * @param table - Table.
  */
-function toggleRowPreview(table) {
+export function toggleRowPreview(table) {
     const keyValue = getRowPreviewKeyValue(table);
     if (!keyValue) {
         return;
@@ -86,4 +79,3 @@ function toggleRowPreview(table) {
     const [key, value] = keyValue;
     table.setRowPreview({ [key]: !value });
 }
-exports.toggleRowPreview = toggleRowPreview;

package/lib/components/Table/features/entities.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};