@databiosphere/findable-ui 5.0.0 → 7.0.0

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.d.ts

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

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

@@ -1,47 +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 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 } = listView || {};
+    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.
@@ -49,10 +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 }))))));
+    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.d.ts

@@ -0,0 +1,2 @@
+import { TableFeature } from "@tanstack/react-table";
+export declare const ROW_PREVIEW: TableFeature;

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

@@ -0,0 +1,44 @@
+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 getIsPreview(row, table);
+        };
+        row.togglePreview = () => {
+            togglePreview(row, table);
+        };
+    },
+    createTable: (table) => {
+        table.getIsRowPreview = () => {
+            return getIsRowPreview(table);
+        };
+        table.getRowPreviewRow = () => {
+            return getRowPreviewRow(table);
+        };
+        table.resetRowPreview = () => {
+            table.setRowPreview(undefined);
+        };
+        table.setRowPreview = (updater) => {
+            const safeUpdater = (old) => {
+                return functionalUpdate(updater, old);
+            };
+            return table.options.onRowPreviewChange?.(safeUpdater);
+        };
+        table.toggleRowPreview = () => {
+            toggleRowPreview(table);
+        };
+    },
+    getDefaultOptions: (table) => {
+        return {
+            enableRowPreview: true,
+            onRowPreviewChange: makeStateUpdater("rowPreview", table),
+        };
+    },
+    getInitialState: (initialState) => {
+        return {
+            ...initialState,
+            rowPreview: undefined,
+        };
+    },
+};

package/lib/components/Table/features/RowPreview/entities.d.ts

@@ -0,0 +1,22 @@
+import { OnChangeFn, Row, RowData, Updater } from "@tanstack/react-table";
+export interface RowPreviewInstance<T extends RowData> {
+    getIsRowPreview: () => boolean;
+    getRowPreviewRow: () => Row<T> | undefined;
+    resetRowPreview: () => void;
+    setRowPreview: (updater: Updater<RowPreviewState>) => void;
+    toggleRowPreview: () => void;
+}
+export interface RowPreviewOptions {
+    enableRowPreview?: boolean;
+    onRowPreviewChange?: OnChangeFn<RowPreviewState>;
+}
+export interface RowPreviewRow {
+    getIsPreview: () => boolean;
+    togglePreview: () => void;
+}
+export declare type RowPreviewState = {
+    [id: string]: boolean;
+} | undefined;
+export interface RowPreviewTableState {
+    rowPreview: RowPreviewState;
+}

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

@@ -0,0 +1 @@
+export {};

package/lib/components/Table/features/RowPreview/utils.d.ts

@@ -0,0 +1,33 @@
+import { Row, RowData, Table } from "@tanstack/react-table";
+/**
+ * Returns true if the row is selected for preview.
+ * @param row - Row.
+ * @param table - Table.
+ * @returns true if the row is selected for preview.
+ */
+export declare function getIsPreview<T extends RowData>(row: Row<T>, table: Table<T>): boolean;
+/**
+ * Returns true if any row is selected for preview.
+ * @param table - Table.
+ * @returns true if any row is selected for preview.
+ */
+export declare function getIsRowPreview<T extends RowData>(table: Table<T>): boolean;
+/**
+ * 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.
+ */
+export declare function getRowPreviewRow<T extends RowData>(table: Table<T>): Row<T> | undefined;
+/**
+ * Toggles the preview state of the row.
+ * If the row is already selected for preview, the preview state is toggled off.
+ * If the row is not selected for preview, the preview state is updated.
+ * @param row - Row.
+ * @param table - Table.
+ */
+export declare function togglePreview<T extends RowData>(row: Row<T>, table: Table<T>): void;
+/**
+ * Toggles the preview state of any row selected for preview.
+ * @param table - Table.
+ */
+export declare function toggleRowPreview<T extends RowData>(table: Table<T>): void;

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

@@ -0,0 +1,81 @@
+/**
+ * Returns true if the row is selected for preview.
+ * @param row - Row.
+ * @param table - Table.
+ * @returns true if the row is selected for preview.
+ */
+export function getIsPreview(row, table) {
+    const keyValue = getRowPreviewKeyValue(table);
+    if (!keyValue)
+        return false;
+    const [key, value] = keyValue;
+    if (!value)
+        return false;
+    return key === row.id;
+}
+/**
+ * Returns true if any row is selected for preview.
+ * @param table - Table.
+ * @returns true if any row is selected for preview.
+ */
+export function getIsRowPreview(table) {
+    const keyValue = getRowPreviewKeyValue(table);
+    if (!keyValue)
+        return false;
+    const [, value] = keyValue;
+    return value;
+}
+/**
+ * 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.
+ */
+export function getRowPreviewRow(table) {
+    const keyValue = getRowPreviewKeyValue(table);
+    if (!keyValue)
+        return;
+    const [key] = keyValue;
+    // We return the original row data, even if the row is no longer "previewed" i.e. selected for preview.
+    // This is to ensure any drawer or modal that is still open can display the row data, until the modal or drawer is closed.
+    const rowsById = table.getRowModel().rowsById;
+    return rowsById[key];
+}
+/**
+ * Returns the key, value tuple of the row selected for preview.
+ * @param table - Table.
+ * @returns row preview key, value tuple.
+ */
+function getRowPreviewKeyValue(table) {
+    const { getState } = table;
+    const { rowPreview } = getState();
+    if (!rowPreview)
+        return;
+    const [[key, value]] = Object.entries(rowPreview);
+    return [key, value];
+}
+/**
+ * Toggles the preview state of the row.
+ * If the row is already selected for preview, the preview state is toggled off.
+ * If the row is not selected for preview, the preview state is updated.
+ * @param row - Row.
+ * @param table - Table.
+ */
+export function togglePreview(row, table) {
+    if (row.getIsPreview()) {
+        table.toggleRowPreview();
+        return;
+    }
+    table.setRowPreview({ [row.id]: true });
+}
+/**
+ * Toggles the preview state of any row selected for preview.
+ * @param table - Table.
+ */
+export function toggleRowPreview(table) {
+    const keyValue = getRowPreviewKeyValue(table);
+    if (!keyValue) {
+        return;
+    }
+    const [key, value] = keyValue;
+    table.setRowPreview({ [key]: !value });
+}

package/lib/components/Table/features/entities.d.ts

@@ -0,0 +1,7 @@
+import { RowData } from "@tanstack/react-table";
+import { RowPreviewInstance, RowPreviewOptions, RowPreviewRow, RowPreviewTableState } from "./RowPreview/entities";
+export declare type CustomFeatureInitialTableState = Partial<RowPreviewTableState>;
+export declare type CustomFeatureInstance<T extends RowData> = RowPreviewInstance<T>;
+export declare type CustomFeatureOptions = RowPreviewOptions;
+export declare type CustomFeatureRow = RowPreviewRow;
+export declare type CustomFeatureTableState = RowPreviewTableState;

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,20 +1,13 @@
 /// <reference types="react" />
-import { ColumnDef, InitialTableState } from "@tanstack/react-table";
-import { CoreOptions } from "@tanstack/table-core";
-import { Pagination } from "../../common/entities";
+import { ColumnDef, CoreOptions, InitialTableState, RowData } from "@tanstack/react-table";
 import { ListViewConfig } from "../../config/entities";
-export interface TableProps<T extends object> {
+export interface TableProps<T extends RowData> {
     columns: ColumnDef<T>[];
-    count?: number;
     getRowId?: CoreOptions<T>["getRowId"];
     initialState: InitialTableState;
     items: T[];
     listView?: ListViewConfig;
     loading?: boolean;
-    pages?: number;
-    pageSize: number;
-    pagination?: Pagination;
-    total?: number;
 }
 /**
  * This table can be Controlled or Uncontrolled based on the set of props passed to it.
@@ -26,8 +19,7 @@ export interface TableProps<T extends object> {
  * @param tableProps.initialState - Initial table state.
  * @param tableProps.items - Row data to display.
  * @param tableProps.listView - List view configuration.
- * @param tableProps.total - Total number of rows in the result set.
  * @returns Configured table element for display.
  */
-export declare const TableComponent: <T extends object>({ columns, getRowId, initialState, items, listView, total, }: TableProps<T>) => JSX.Element;
-export declare const Table: <T extends object>({ columns, getRowId, initialState, items, listView, total, }: TableProps<T>) => JSX.Element;
+export declare const TableComponent: <T extends unknown>({ columns, getRowId, initialState, items, listView, }: TableProps<T>) => JSX.Element;
+export declare const Table: <T extends unknown>({ columns, getRowId, initialState, items, listView, }: TableProps<T>) => JSX.Element;