@databiosphere/findable-ui 5.0.0 → 6.0.0

package/lib/providers/exploreState.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ExploreActionKind = exports.ExploreStateProvider = exports.ExploreStateContext = exports.ENTITY_VIEW = void 0;
+exports.ExploreActionKind = exports.ExploreStateProvider = exports.ExploreStateContext = void 0;
 const react_1 = __importStar(require("react"));
 const useAuthentication_1 = require("../hooks/useAuthentication/useAuthentication");
 const useCategoryFilter_1 = require("../hooks/useCategoryFilter");
@@ -32,14 +32,6 @@ const useURLFilterParams_1 = require("../hooks/useURLFilterParams");
 const constants_1 = require("./exploreState/initializer/constants");
 const utils_1 = require("./exploreState/initializer/utils");
 const utils_2 = require("./exploreState/utils");
-/**
- * Entity view.
- */
-var ENTITY_VIEW;
-(function (ENTITY_VIEW) {
-    ENTITY_VIEW["EXACT"] = "EXACT";
-    ENTITY_VIEW["RELATED"] = "RELATED";
-})(ENTITY_VIEW = exports.ENTITY_VIEW || (exports.ENTITY_VIEW = {}));
 /**
  * Explore state context for storing and using filter-related and explore state.
  */
@@ -98,15 +90,14 @@ var ExploreActionKind;
     ExploreActionKind["PaginateTable"] = "PAGINATE_TABLE";
     ExploreActionKind["PatchExploreResponse"] = "PATCH_EXPLORE_RESPONSE";
     ExploreActionKind["ProcessExploreResponse"] = "PROCESS_EXPLORE_RESPONSE";
-    ExploreActionKind["ProcessRelatedResponse"] = "PROCESS_RELATED_RESPONSE";
     ExploreActionKind["ResetExploreResponse"] = "RESET_EXPLORE_RESPONSE";
     ExploreActionKind["ResetState"] = "RESET_STATE";
     ExploreActionKind["SelectEntityType"] = "SELECT_ENTITY_TYPE";
-    ExploreActionKind["ToggleEntityView"] = "TOGGLE_ENTITY_VIEW";
     ExploreActionKind["UpdateColumnVisibility"] = "UPDATE_COLUMN_VISIBILITY";
     ExploreActionKind["UpdateEntityFilters"] = "UPDATE_ENTITY_FILTERS";
     ExploreActionKind["UpdateEntityViewAccess"] = "UPDATE_ENTITY_VIEW_ACCESS";
     ExploreActionKind["UpdateFilter"] = "UPDATE_FILTER";
+    ExploreActionKind["UpdateRowPreview"] = "UPDATE_ROW_PREVIEW";
     ExploreActionKind["UpdateRowSelection"] = "UPDATE_ROW_SELECTION";
     ExploreActionKind["UpdateSorting"] = "UPDATE_SORTING";
 })(ExploreActionKind = exports.ExploreActionKind || (exports.ExploreActionKind = {}));
@@ -126,13 +117,16 @@ function exploreReducer(state, action, exploreContext) {
          **/
         case ExploreActionKind.ApplySavedFilter: {
             const filterState = (0, utils_2.buildNextSavedFilterState)(state, payload.selectedValue, payload.selected);
+            const rowPreview = (0, utils_2.closeRowPreview)(state.rowPreview);
+            const rowSelection = {};
             const savedFilterState = (0, utils_2.buildEntityStateSavedFilterState)(payload.categoryKey, payload.selectedValue, payload.selected);
             const savedSorting = (0, utils_2.getEntityStateSavedSorting)(state, payload.selectedValue, payload.selected);
+            const sorting = savedSorting || []; // Reset sorting to default if saved sorting is not available.
             (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
                 filterState,
                 savedFilterState,
             });
-            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageStateSorting)(state, savedSorting), filterCount: (0, utils_2.getFilterCount)(filterState), filterState, paginationState: (0, utils_2.resetPage)(state.paginationState) });
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageStateWithCommonCategoryGroupConfigKey)(state, { rowPreview, rowSelection, sorting }), filterCount: (0, utils_2.getFilterCount)(filterState), filterState, paginationState: (0, utils_2.resetPage)(state.paginationState), rowPreview });
         }
         /**
          * Clear all filters
@@ -140,13 +134,15 @@ function exploreReducer(state, action, exploreContext) {
         case ExploreActionKind.ClearFilters: {
             const filterCount = 0;
             const filterState = [];
+            const rowPreview = (0, utils_2.closeRowPreview)(state.rowPreview);
+            const rowSelection = {};
             const savedFilterState = [];
             (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
                 filterState,
                 savedFilterState,
             });
-            return Object.assign(Object.assign({}, state), { filterCount,
-                filterState, paginationState: (0, utils_2.resetPage)(state.paginationState) });
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageStateWithCommonCategoryGroupConfigKey)(state, { rowPreview, rowSelection }), filterCount,
+                filterState, paginationState: (0, utils_2.resetPage)(state.paginationState), rowPreview });
         }
         /**
          * Paginate table
@@ -161,7 +157,8 @@ function exploreReducer(state, action, exploreContext) {
                 nextPaginationState.currentPage--;
                 nextPaginationState.index = nextPaginationState.previousIndex;
             }
-            return Object.assign(Object.assign({}, state), { paginationState: nextPaginationState });
+            const rowPreview = (0, utils_2.closeRowPreview)(state.rowPreview);
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { rowPreview }), paginationState: nextPaginationState, rowPreview });
         }
         /**
          * Patch explore response
@@ -173,6 +170,7 @@ function exploreReducer(state, action, exploreContext) {
          * Process explore response
          **/
         case ExploreActionKind.ProcessExploreResponse: {
+            const entityPageState = state.entityPageState[state.tabValue];
             const entityState = (0, utils_2.getEntityState)(state);
             const nextCategoryViews = payload.selectCategories
                 ? (0, useCategoryFilter_1.buildCategoryViews)([
@@ -180,16 +178,11 @@ function exploreReducer(state, action, exploreContext) {
                     ...entityState.savedSelectCategories, // "savedFilter" select categories are built from config at reducer initialization.
                 ], entityState.categoryConfigs, [...state.filterState, ...entityState.savedFilterState])
                 : state.categoryViews;
+            const rowPreview = entityPageState.rowPreview;
             (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
                 categoryViews: nextCategoryViews,
             });
-            return Object.assign(Object.assign({}, state), { categoryViews: nextCategoryViews, listItems: payload.loading ? [] : payload.listItems, loading: payload.loading, paginationState: Object.assign(Object.assign({}, state.paginationState), payload.paginationResponse) });
-        }
-        /**
-         * Process related response
-         */
-        case ExploreActionKind.ProcessRelatedResponse: {
-            return Object.assign(Object.assign({}, state), { relatedListItems: payload.relatedListItems });
+            return Object.assign(Object.assign({}, state), { categoryViews: nextCategoryViews, listItems: payload.loading ? [] : payload.listItems, loading: payload.loading, paginationState: Object.assign(Object.assign({}, state.paginationState), payload.paginationResponse), rowPreview });
         }
         /**
          * Reset explore response.
@@ -211,32 +204,38 @@ function exploreReducer(state, action, exploreContext) {
                 return state;
             }
             const entityState = (0, utils_2.getEntityState)(state, (0, utils_2.getEntityCategoryGroupConfigKey)(payload, state.entityPageState));
-            return Object.assign(Object.assign({}, state), { categoryGroups: entityState.categoryGroups, categoryViews: entityState.categoryViews, filterCount: (0, utils_2.getFilterCount)(entityState.filterState), filterState: entityState.filterState, listItems: [], loading: true, paginationState: (0, utils_2.resetPage)(state.paginationState), tabValue: payload });
-        }
-        /**
-         * Toggle entity view
-         */
-        case ExploreActionKind.ToggleEntityView: {
-            return Object.assign(Object.assign({}, state), { isRelatedView: payload === ENTITY_VIEW.RELATED, listView: payload });
+            const rowPreview = (0, utils_2.closeRowPreview)(state.rowPreview); // Close row preview, without updating the entity page state row preview.
+            return Object.assign(Object.assign({}, state), { categoryGroups: entityState.categoryGroups, categoryViews: entityState.categoryViews, filterCount: (0, utils_2.getFilterCount)(entityState.filterState), filterState: entityState.filterState, listItems: [], loading: true, paginationState: Object.assign(Object.assign({}, (0, utils_2.resetPage)(state.paginationState)), { rows: 0 }), rowPreview, tabValue: payload });
         }
         /**
          * Update column visibility
          **/
         case ExploreActionKind.UpdateColumnVisibility: {
-            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { columnsVisibility: payload }) });
+            const columnsVisibility = payload;
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { columnsVisibility }) });
         }
         /**
          * Update entity filters.
+         * Updates state for the given entity and entities with the same category group config key, prior to navigation to the entity.
+         * Actions for the given entity and entities with the same category group config key:
+         * - updates filter state,
+         * - clears saved filter state,
+         * - resets row selection, and
+         * - closes row preview.
+         * Actions for the current entity:
+         * - closes row preview, without updating the entity page state row preview.
          */
         case ExploreActionKind.UpdateEntityFilters: {
             const { entityListType, filters: filterState, sorting } = payload;
             const categoryGroupConfigKey = (0, utils_2.getEntityCategoryGroupConfigKey)(entityListType, state.entityPageState);
+            const rowPreview = (0, utils_2.closeRowPreview)(state.entityPageState[entityListType].rowPreview);
+            const rowSelection = {};
+            const savedFilterState = [];
             (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
                 filterState,
-                savedFilterState: [], // Clear saved filter state.
+                savedFilterState,
             }, categoryGroupConfigKey);
-            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(entityListType, Object.assign({}, (0, utils_2.resetRowSelection)(state, categoryGroupConfigKey)), { sorting } // Update sorting for the entity.
-                ) });
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageStateWithCommonCategoryGroupConfigKey)(state, { rowPreview, rowSelection, sorting }, categoryGroupConfigKey), rowPreview: (0, utils_2.closeRowPreview)(state.rowPreview) });
         }
         /**
          * Update entity view access
@@ -249,24 +248,36 @@ function exploreReducer(state, action, exploreContext) {
          **/
         case ExploreActionKind.UpdateFilter: {
             const filterState = (0, useCategoryFilter_1.buildNextFilterState)(state.filterState, payload.categoryKey, payload.selectedValue, payload.selected);
+            const rowPreview = (0, utils_2.closeRowPreview)(state.rowPreview);
+            const rowSelection = {};
             const savedFilterState = []; // Clear saved filter state.
             (0, utils_2.updateEntityStateByCategoryGroupConfigKey)(state, {
                 filterState,
                 savedFilterState,
             });
-            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.resetRowSelection)(state), filterCount: (0, utils_2.getFilterCount)(filterState), filterState, paginationState: (0, utils_2.resetPage)(state.paginationState) });
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageStateWithCommonCategoryGroupConfigKey)(state, { rowPreview, rowSelection }), filterCount: (0, utils_2.getFilterCount)(filterState), filterState, paginationState: (0, utils_2.resetPage)(state.paginationState), rowPreview });
+        }
+        /**
+         * Update row preview
+         */
+        case ExploreActionKind.UpdateRowPreview: {
+            const rowPreview = payload;
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { rowPreview }), rowPreview });
         }
         /**
          * Update row selection
          */
         case ExploreActionKind.UpdateRowSelection: {
-            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { rowSelection: payload }) });
+            const rowSelection = payload;
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { rowSelection }) });
         }
         /**
          * Update sorting
          **/
         case ExploreActionKind.UpdateSorting: {
-            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { sorting: payload }), paginationState: (0, utils_2.resetPage)(state.paginationState) });
+            const rowPreview = (0, utils_2.closeRowPreview)(state.rowPreview);
+            const sorting = payload;
+            return Object.assign(Object.assign({}, state), { entityPageState: (0, utils_2.updateEntityPageState)(state.tabValue, state.entityPageState, { rowPreview, sorting }), paginationState: (0, utils_2.resetPage)(state.paginationState), rowPreview });
         }
         default:
             return state;

package/lib/styles/common/mixins/colors.d.ts

@@ -1,4 +1,4 @@
-import { CommonColors, PaletteColor } from "@mui/material/styles/createPalette";
+import { CommonColors, PaletteColor } from "@mui/material/styles";
 import { ThemeProps } from "../../../theme/theme";
 export declare const alertLight: ({ theme }: ThemeProps) => PaletteColor["light"];
 export declare const alertLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
@@ -10,6 +10,7 @@ export declare const infoMain: ({ theme }: ThemeProps) => PaletteColor["main"];
 export declare const inkLight: ({ theme }: ThemeProps) => PaletteColor["light"];
 export declare const inkMain: ({ theme }: ThemeProps) => PaletteColor["main"];
 export declare const primaryDark: ({ theme }: ThemeProps) => PaletteColor["dark"];
+export declare const primaryLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
 export declare const primaryMain: ({ theme }: ThemeProps) => PaletteColor["main"];
 export declare const smokeDark: ({ theme }: ThemeProps) => PaletteColor["dark"];
 export declare const smokeLight: ({ theme }: ThemeProps) => PaletteColor["light"];

package/lib/styles/common/mixins/colors.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.white = exports.warningMain = exports.warningLightest = exports.warningLight = exports.successMain = exports.successLightest = exports.successLight = exports.smokeMain = exports.smokeLightest = exports.smokeLight = exports.smokeDark = exports.primaryMain = exports.primaryDark = exports.inkMain = exports.inkLight = exports.infoMain = exports.infoLightest = exports.infoLight = exports.errorMain = exports.alertMain = exports.alertLightest = exports.alertLight = void 0;
+exports.white = exports.warningMain = exports.warningLightest = exports.warningLight = exports.successMain = exports.successLightest = exports.successLight = exports.smokeMain = exports.smokeLightest = exports.smokeLight = exports.smokeDark = exports.primaryMain = exports.primaryLightest = exports.primaryDark = exports.inkMain = exports.inkLight = exports.infoMain = exports.infoLightest = exports.infoLight = exports.errorMain = exports.alertMain = exports.alertLightest = exports.alertLight = void 0;
 // Alert
 const alertLight = ({ theme }) => theme.palette.alert.light;
 exports.alertLight = alertLight;
@@ -26,6 +26,8 @@ exports.inkMain = inkMain;
 // Primary
 const primaryDark = ({ theme }) => theme.palette.primary.dark;
 exports.primaryDark = primaryDark;
+const primaryLightest = ({ theme, }) => theme.palette.primary.lightest;
+exports.primaryLightest = primaryLightest;
 const primaryMain = ({ theme }) => theme.palette.primary.main;
 exports.primaryMain = primaryMain;
 // Smoke

package/lib/theme/common/components.js

@@ -542,11 +542,11 @@ const MuiChip = (theme) => {
             },
             {
                 props: { variant: "ntag" },
-                style: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_400]), { backgroundColor: theme.palette.smoke.main, boxShadow: `0 0 0 2px ${palette_1.white}`, height: 24 }),
+                style: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_400]), { backgroundColor: theme.palette.smoke.main, boxShadow: `0 0 0 2px ${palette_1.white}`, height: 24, justifySelf: FLEX_START, minWidth: 0 }),
             },
             {
                 props: { variant: "status" },
-                style: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_500]), { boxShadow: `0 0 0 2px ${palette_1.white}`, height: 20, maxWidth: "fit-content" }),
+                style: Object.assign(Object.assign({}, theme.typography[typography_1.TEXT_BODY_SMALL_500]), { boxShadow: `0 0 0 2px ${palette_1.white}`, height: 20, maxWidth: "fit-content", minWidth: 0 }),
             },
         ],
     };
@@ -1063,6 +1063,15 @@ const MuiPaper = (theme) => {
                     },
                 },
             },
+            {
+                props: { variant: "table" },
+                style: {
+                    borderColor: theme.palette.smoke.main,
+                    borderStyle: "solid",
+                    borderWidth: 1,
+                    boxShadow: theme.shadows[1], // elevation01
+                },
+            },
         ],
     };
 };

package/lib/theme/common/palette.d.ts

@@ -1,5 +1,5 @@
 import { PaletteColorOptions } from "@mui/material";
-import { CommonColors, TypeBackground, TypeText } from "@mui/material/styles/createPalette";
+import { CommonColors, TypeBackground, TypeText } from "@mui/material/styles";
 /**
  * Palette "Alert"
  */
@@ -35,6 +35,7 @@ declare enum INK {
  */
 declare enum PRIMARY {
     DARK = "#005EA9",
+    LIGHTEST = "#E6EFF6",
     MAIN = "#1C7CC7"
 }
 /**
@@ -106,6 +107,7 @@ export declare const infoMain = INFO.CONTRAST_TEXT;
 export declare const inkLight = INK.LIGHT;
 export declare const inkMain = INK.MAIN;
 export declare const primaryDark = PRIMARY.DARK;
+export declare const primaryLightest = PRIMARY.LIGHTEST;
 export declare const primaryMain = PRIMARY.MAIN;
 export declare const smokeDark = SMOKE.DARK;
 export declare const smokeLight = SMOKE.LIGHT;

package/lib/theme/common/palette.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.warning = exports.text = exports.success = exports.smoke = exports.primary = exports.ink = exports.info = exports.common = exports.background = exports.alert = exports.black08 = exports.black04 = exports.alpha80 = exports.alpha64 = exports.alpha60 = exports.alpha32 = exports.alpha08 = exports.alpha04 = exports.white = exports.black = exports.warningMain = exports.warningLightest = exports.warningLight = exports.warningContrastText = exports.textPrimary = exports.successMain = exports.successLightest = exports.successLight = exports.smokeMain = exports.smokeLightest = exports.smokeLight = exports.smokeDark = exports.primaryMain = exports.primaryDark = exports.inkMain = exports.inkLight = exports.infoMain = exports.infoLightest = exports.infoLight = exports.infoContrastText = exports.backgroundDefault = exports.alertMain = exports.alertLightest = exports.alertLight = void 0;
+exports.warning = exports.text = exports.success = exports.smoke = exports.primary = exports.ink = exports.info = exports.common = exports.background = exports.alert = exports.black08 = exports.black04 = exports.alpha80 = exports.alpha64 = exports.alpha60 = exports.alpha32 = exports.alpha08 = exports.alpha04 = exports.white = exports.black = exports.warningMain = exports.warningLightest = exports.warningLight = exports.warningContrastText = exports.textPrimary = exports.successMain = exports.successLightest = exports.successLight = exports.smokeMain = exports.smokeLightest = exports.smokeLight = exports.smokeDark = exports.primaryMain = exports.primaryLightest = exports.primaryDark = exports.inkMain = exports.inkLight = exports.infoMain = exports.infoLightest = exports.infoLight = exports.infoContrastText = exports.backgroundDefault = exports.alertMain = exports.alertLightest = exports.alertLight = void 0;
 /**
  * Palette "Alert"
  */
@@ -41,6 +41,7 @@ var INK;
 var PRIMARY;
 (function (PRIMARY) {
     PRIMARY["DARK"] = "#005EA9";
+    PRIMARY["LIGHTEST"] = "#E6EFF6";
     PRIMARY["MAIN"] = "#1C7CC7";
 })(PRIMARY || (PRIMARY = {}));
 /**
@@ -119,6 +120,7 @@ exports.infoMain = INFO.MAIN;
 exports.inkLight = INK.LIGHT;
 exports.inkMain = INK.MAIN;
 exports.primaryDark = PRIMARY.DARK;
+exports.primaryLightest = PRIMARY.LIGHTEST;
 exports.primaryMain = PRIMARY.MAIN;
 exports.smokeDark = SMOKE.DARK;
 exports.smokeLight = SMOKE.LIGHT;
@@ -190,6 +192,7 @@ exports.ink = {
  */
 exports.primary = {
     dark: exports.primaryDark,
+    lightest: exports.primaryLightest,
     main: exports.primaryMain,
 };
 /**

package/lib/views/ExploreView/exploreView.js

@@ -42,7 +42,6 @@ const tableCreator_1 = require("../../components/TableCreator/tableCreator");
 const useBreakpointHelper_1 = require("../../hooks/useBreakpointHelper");
 const useConfig_1 = require("../../hooks/useConfig");
 const useEntityList_1 = require("../../hooks/useEntityList");
-const useEntityListRelatedView_1 = require("../../hooks/useEntityListRelatedView");
 const useExploreState_1 = require("../../hooks/useExploreState");
 const useSummary_1 = require("../../hooks/useSummary");
 const exploreState_1 = require("../../providers/exploreState");
@@ -69,12 +68,11 @@ const ExploreView = (props) => {
     const { entities, explorerTitle, summaryConfig, trackingConfig } = config;
     const { listView } = entityConfig;
     const { listHero, subTitleHero } = listView || {};
-    const { categoryGroups, categoryViews, filterCount, isRelatedView, tabValue, } = exploreState;
+    const { categoryGroups, categoryViews, filterCount, tabValue } = exploreState;
     const { push } = (0, router_1.useRouter)();
     const tabs = getTabs(entities);
     const { response: summaryResponse } = (0, useSummary_1.useSummary)(); // Fetch summary.
     (0, useEntityList_1.useEntityList)(props); // Fetch entities.
-    (0, useEntityListRelatedView_1.useEntityListRelatedView)(); // Fetch related entities.
     const { entityListType } = props;
     const categoryFilters = (0, react_1.useMemo)(() => buildCategoryFilters(categoryViews, categoryGroups), [categoryGroups, categoryViews]);
     /**
@@ -156,7 +154,7 @@ const ExploreView = (props) => {
                 react_1.default.createElement(sidebarLabel_1.SidebarLabel, { label: "Filters" }),
                 react_1.default.createElement(clearAllFilters_1.ClearAllFilters, null),
                 react_1.default.createElement(searchAllFilters_1.SearchAllFilters, { categoryViews: categoryViews, drawerOpen: isDrawerOpen, onFilter: onFilterChange.bind(null, true) })),
-            react_1.default.createElement(filters_1.Filters, { categoryFilters: categoryFilters, closeAncestor: onCloseDrawer, disabled: isRelatedView, onFilter: onFilterChange.bind(null, false), trackFilterOpened: trackingConfig === null || trackingConfig === void 0 ? void 0 : trackingConfig.trackFilterOpened }))),
+            react_1.default.createElement(filters_1.Filters, { categoryFilters: categoryFilters, closeAncestor: onCloseDrawer, onFilter: onFilterChange.bind(null, false), trackFilterOpened: trackingConfig === null || trackingConfig === void 0 ? void 0 : trackingConfig.trackFilterOpened }))),
         react_1.default.createElement(index_1.Index, { className: props.className, List: renderList(exploreState, entityConfig, entityListType), ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (react_1.default.createElement(sidebarButton_1.SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: react_1.default.createElement(tabs_1.Tabs, { onTabChange: onTabChange, tabs: tabs, value: tabValue }), title: explorerTitle })));
 };
 exports.ExploreView = ExploreView;
@@ -205,7 +203,7 @@ function renderComponent(componentsConfig, response) {
  * @returns rendered Table component.
  */
 function renderList(exploreState, entityConfig, entityListType) {
-    const { isRelatedView, listItems, loading, paginationState, relatedListItems, tabValue, } = exploreState;
+    const { listItems, loading, tabValue } = exploreState;
     const { getId: getRowId, list, listView } = entityConfig;
     const { columns: columnsConfig, defaultSort } = list;
     if (!exploreState || !tabValue) {
@@ -216,7 +214,7 @@ function renderList(exploreState, entityConfig, entityListType) {
         // loads with the previous tabs data on the first render after switching tabs. (or similar)
         return react_1.default.createElement(react_1.default.Fragment, null);
     }
-    return (react_1.default.createElement(tableCreator_1.TableCreator, { columns: columnsConfig, defaultSort: defaultSort, getRowId: getRowId, items: isRelatedView && relatedListItems ? relatedListItems : listItems !== null && listItems !== void 0 ? listItems : [], listView: listView, loading: loading, pages: paginationState.pages, pageSize: paginationState.pageSize, pagination: undefined, total: paginationState.rows }));
+    return (react_1.default.createElement(tableCreator_1.TableCreator, { columns: columnsConfig, defaultSort: defaultSort, getRowId: getRowId, items: listItems !== null && listItems !== void 0 ? listItems : [], listView: listView, loading: loading }));
 }
 /**
  * Renders Summaries component when all the following requirements are fulfilled:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "",
   "scripts": {
     "test": "jest",
@@ -66,7 +66,7 @@
     "@emotion/styled": "11.11.0",
     "@mui/icons-material": "5.14.1",
     "@mui/material": "5.14.1",
-    "@tanstack/react-table": "8.5.11",
+    "@tanstack/react-table": "^8.17.3",
     "@tanstack/react-virtual": "^3.0.0-beta.59",
     "axios": "^1.6.7",
     "copy-to-clipboard": "3.3.1",

package/src/components/ComponentCreator/ComponentCreator.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentsConfig } from "../../config/entities";
+import { ComponentsConfig, ViewContext } from "../../config/entities";
 import { useAuthentication } from "../../hooks/useAuthentication/useAuthentication";
 import { useConfig } from "../../hooks/useConfig";
 import { useExploreState } from "../../hooks/useExploreState";
@@ -9,6 +9,7 @@ import { useSystemStatus } from "../../hooks/useSystemStatus";
 export interface ComponentCreatorProps<T> {
   components: ComponentsConfig;
   response: T;
+  viewContext?: Partial<ViewContext<T>>;
 }
 
 /**
@@ -18,11 +19,13 @@ export interface ComponentCreatorProps<T> {
  * @param componentCreatorProps - Custom props required for creating component.
  * @param componentCreatorProps.components - Component config to render as React elements.
  * @param componentCreatorProps.response - Response returned from API endpoint, used to populate component props.
+ * @param componentCreatorProps.viewContext - Additional context to pass to the component.
  * @returns A set of React components.
  */
 export const ComponentCreator = <T,>({
   components,
   response,
+  viewContext,
 }: ComponentCreatorProps<T>): JSX.Element => {
   const { authenticationStatus, isAuthenticated } = useAuthentication();
   const { config, entityConfig } = useConfig();
@@ -43,10 +46,12 @@ export const ComponentCreator = <T,>({
             key={k}
             components={c.children}
             response={response}
+            viewContext={viewContext}
           />
         ) : null;
         const props = c.viewBuilder
           ? c.viewBuilder(response, {
+              ...viewContext,
               authState: {
                 authenticationStatus,
                 isAuthenticated,

package/src/components/Detail/components/DetailViewTable/detailViewTable.tsx

@@ -1,4 +1,4 @@
-import { ColumnDef } from "@tanstack/react-table";
+import { ColumnDef, RowData } from "@tanstack/react-table";
 import React, { ReactNode } from "react";
 import {
   FlatPaper,
@@ -10,7 +10,7 @@ import { NoResults } from "../../../NoResults/noResults";
 import { Toolbar } from "../../../Table/components/TableToolbar/tableToolbar.styles";
 import { Table, TableProps } from "../Table/table";
 
-interface DetailViewTableProps<T extends object> extends TableProps<T> {
+interface DetailViewTableProps<T extends RowData> extends TableProps<T> {
   className?: string;
   columns: ColumnDef<T>[];
   gridTemplateColumns: string;
@@ -20,7 +20,7 @@ interface DetailViewTableProps<T extends object> extends TableProps<T> {
   tools?: ReactNode;
 }
 
-export const DetailViewTable = <T extends object>({
+export const DetailViewTable = <T extends RowData>({
   className,
   columns,
   gridTemplateColumns,
@@ -31,7 +31,7 @@ export const DetailViewTable = <T extends object>({
   ...tableProps
 }: DetailViewTableProps<T>): JSX.Element => {
   return items.length > 0 ? (
-    <Paper className={className}>
+    <Paper className={className} variant="table">
       <GridPaper>
         {tools && <Toolbar variant="table">{tools}</Toolbar>}
         <Table

package/src/components/Detail/components/Table/common/utils.ts

@@ -1,11 +1,11 @@
-import { ColumnDef } from "@tanstack/react-table";
+import { ColumnDef, RowData } from "@tanstack/react-table";
 
 /**
  * Generates columns from column definitions with meta associated with the column.
  * @param columns - Column configuration.
  * @returns generated column definitions.
  */
-export function generateColumnDefinitions<T>(
+export function generateColumnDefinitions<T extends RowData>(
   columns: ColumnDef<T>[]
 ): ColumnDef<T>[] {
   return columns.map((column) => {

package/src/components/Detail/components/Table/components/TableBody/tableBody.tsx

@@ -1,18 +1,18 @@
 import { TableBody as MTableBody } from "@mui/material";
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import React from "react";
 import { ROW_DIRECTION } from "../../../../../Table/common/entities";
 import { TableView } from "../../table";
 import { CollapsableRows } from "../TableRows/components/CollapsableRows/collapsableRows";
 import { TableRows } from "../TableRows/tableRows";
 
-export interface TableBodyProps<T> {
+export interface TableBodyProps<T extends RowData> {
   rowDirection: ROW_DIRECTION;
   tableInstance: Table<T>;
   tableView?: TableView;
 }
 
-export const TableBody = <T extends object>({
+export const TableBody = <T extends RowData>({
   rowDirection,
   tableInstance,
   tableView,

package/src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -1,26 +1,24 @@
-import { TableRow } from "@mui/material";
-import { Table } from "@tanstack/react-table";
+import { RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
-import { v4 as uuid4 } from "uuid";
 import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
+import { TableRow } from "../../../../../../../Table/components/TableRow/tableRow.styles";
 
-export interface CollapsableRowsProps<T> {
+export interface CollapsableRowsProps<T extends RowData> {
   tableInstance: Table<T>;
 }
 
-export const CollapsableRows = <T extends object>({
+export const CollapsableRows = <T extends RowData>({
   tableInstance,
 }: CollapsableRowsProps<T>): JSX.Element => {
   const { getRowModel } = tableInstance;
   const { rows } = getRowModel();
-  const uuid = uuid4(); // Generate a unique ID for the collapsable rows.
   return (
     <Fragment>
       {rows.map((row) => {
         if (row.depth > 0) return null; // Hide sub rows.
         return (
-          <TableRow key={`${uuid}${row.id}`}>
+          <TableRow key={row.id} isPreview={row.getIsPreview()}>
             <CollapsableCell
               isDisabled={isCollapsableRowDisabled(tableInstance)}
               row={row}

package/src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -1,11 +1,11 @@
-import { TableCell as MTableCell, TableRow as MTableRow } from "@mui/material";
-import { flexRender, Row, Table } from "@tanstack/react-table";
-import { RowData } from "@tanstack/table-core";
+import { TableCell as MTableCell } from "@mui/material";
+import { flexRender, Row, RowData, Table } 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";
 import { TableView } from "../../table";
 
-export interface TableRowsProps<T> {
+export interface TableRowsProps<T extends RowData> {
   tableInstance: Table<T>;
   tableView?: TableView;
 }
@@ -22,7 +22,11 @@ export const TableRows = <T extends RowData>({
     <Fragment>
       {rows.map((row) => {
         return (
-          <MTableRow id={getRowId(row)} key={row.id}>
+          <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.
@@ -36,7 +40,7 @@ export const TableRows = <T extends RowData>({
                 </MTableCell>
               );
             })}
-          </MTableRow>
+          </TableRow>
         );
       })}
     </Fragment>

package/src/components/Detail/components/Table/table.tsx

@@ -7,9 +7,10 @@ import {
 import {
   ColumnDef,
   getCoreRowModel,
+  RowData,
+  TableOptions,
   useReactTable,
 } from "@tanstack/react-table";
-import { TableOptions } from "@tanstack/table-core";
 import React from "react";
 import {
   BREAKPOINT_FN_NAME,
@@ -18,6 +19,7 @@ import {
 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";
@@ -28,7 +30,7 @@ export interface TableView {
   tableContainer?: Partial<MTableContainerProps>;
 }
 
-export interface TableProps<T extends object> {
+export interface TableProps<T extends RowData> {
   className?: string;
   collapsable?: boolean;
   columns: ColumnDef<T>[];
@@ -38,7 +40,7 @@ export interface TableProps<T extends object> {
   tableView?: TableView;
 }
 
-export const Table = <T extends object>({
+export const Table = <T extends RowData>({
   className,
   collapsable = true,
   columns,
@@ -54,6 +56,7 @@ export const Table = <T extends object>({
   const { stickyHeader = false } = table || {};
   const { sx: tableContainerSx } = tableContainer || {};
   const tableInstance = useReactTable({
+    _features: [ROW_PREVIEW],
     columns: generateColumnDefinitions(columns),
     data: items,
     enableSorting: false,

package/src/components/Filter/components/Filters/filters.tsx

@@ -21,7 +21,7 @@ export interface CategoryFilter {
 export interface FiltersProps {
   categoryFilters: CategoryFilter[];
   closeAncestor?: () => void;
-  disabled: boolean; // Global disabling of filters; typically in "related" entity view.
+  disabled?: boolean; // Global disabling of filters.
   onFilter: OnFilterFn;
   trackFilterOpened?: TrackFilterOpenedFunction;
 }