@databiosphere/findable-ui 37.0.0 → 38.0.0

package/lib/config/entities.d.ts

@@ -1,9 +1,9 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
 import { CellContext, ColumnDef, ColumnMeta, ColumnSort, GroupingState, RowData, Table, TableOptions } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
+import { AzulSummaryResponse } from "../apis/azul/common/entities";
 import { CategoryConfig } from "../common/categories/config/types";
 import { DataDictionaryAnnotation, DataDictionaryConfig, SelectedFilter } from "../common/entities";
-import { HeroTitle } from "../components/common/Title/title";
 import { FooterProps } from "../components/Layout/components/Footer/footer";
 import { HeaderProps } from "../components/Layout/components/Header/header";
 import { ExploreMode } from "../hooks/useExploreMode/types";
@@ -126,7 +126,6 @@ export interface EntityConfig<T = any, I = any> extends TabConfig {
     detail: BackPageConfig;
     entityMapper?: EntityMapper<T, I>;
     exploreMode: ExploreMode;
-    explorerTitle?: SiteConfig["explorerTitle"];
     export?: ExportConfig;
     getId?: GetIdFunction<T>;
     getTitle?: GetTitleFunction<T>;
@@ -137,11 +136,23 @@ export interface EntityConfig<T = any, I = any> extends TabConfig {
     options?: Options;
     overrides?: Override[];
     staticLoadFile?: string;
+    ui?: EntityUIConfig;
 }
 /**
  * Entity mapper function.
  */
 export type EntityMapper<T, I> = (input: I) => T;
+export interface EntityUIConfig {
+    actionButton?: ReactNode;
+    enableExportButton?: boolean;
+    enableSummary?: boolean;
+    enableTabs?: boolean;
+    slots?: {
+        entityListSlot?: ComponentsConfig;
+        entityViewSlot?: ComponentsConfig;
+    };
+    title?: ReactNode;
+}
 /**
  * Interface to define the export configuration for a given site.
  */
@@ -204,11 +215,8 @@ export interface ListConfig<T extends RowData> {
 export interface ListViewConfig {
     disablePagination?: boolean;
     enableDownload?: boolean;
-    enableTab?: boolean;
-    listHero?: ComponentsConfig;
     rowPreviewView?: ComponentsConfig;
     rowSelectionView?: ComponentsConfig;
-    subTitleHero?: ComponentsConfig;
 }
 export interface OAuthProvider<P = any> {
     authorization: {
@@ -294,7 +302,6 @@ export interface SiteConfig {
     dataSource: DataSourceConfig;
     enableEntitiesView?: boolean;
     entities: EntityConfig[];
-    explorerTitle: HeroTitle;
     export?: ExportConfig;
     exportsRequireAuth?: boolean;
     exportToTerraUrl?: string;
@@ -322,7 +329,7 @@ export declare const SORT_DIRECTION: {
  */
 export interface SummaryConfig {
     apiPath: string;
-    components: ComponentsConfig;
+    mapResponse: (response: AzulSummaryResponse) => [string, string][];
 }
 /**
  * System status bind response function.

package/lib/config/utils.js

@@ -12,7 +12,6 @@ export function getDefaultConfig() {
             url: "",
         },
         entities: [],
-        explorerTitle: "",
         layout: {
             footer: {
                 Branding: null,

package/lib/{components/DataDictionary/hooks → hooks}/UseLayoutSpacing/hook.js

@@ -1,4 +1,4 @@
-import { useLayoutDimensions } from "../../../../providers/layoutDimensions/hook";
+import { useLayoutDimensions } from "../../providers/layoutDimensions/hook";
 export const useLayoutSpacing = () => {
     const { dimensions } = useLayoutDimensions();
     return {

package/lib/hooks/UseLayoutSpacing/types.js

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

package/lib/hooks/useSummary.d.ts

@@ -1,11 +1,5 @@
-import { AzulSummaryResponse } from "../apis/azul/common/entities";
 interface UseSummaryResponse {
-    isLoading: boolean;
-    response?: AzulSummaryResponse;
+    summaries: [string, string][];
 }
-/**
- * Hook responsible for handling the load of the summary values displayed on an entity index page.
- * @returns an object with the loaded data and a flag indicating is the data is loading
- */
-export declare const useSummary: () => UseSummaryResponse;
+export declare const useSummary: () => UseSummaryResponse | undefined;
 export {};

package/lib/hooks/useSummary.js

@@ -4,30 +4,29 @@ import { useAsync } from "./useAsync";
 import { useConfig } from "./useConfig";
 import { useEntityService } from "./useEntityService";
 import { useExploreState } from "./useExploreState";
-/**
- * Hook responsible for handling the load of the summary values displayed on an entity index page.
- * @returns an object with the loaded data and a flag indicating is the data is loading
- */
 export const useSummary = () => {
     const { token } = useToken();
-    const { config } = useConfig();
+    const { config, entityConfig } = useConfig();
     const { exploreState } = useExploreState();
     const { filterState } = exploreState;
     const { summaryConfig } = config;
-    const { data: response, isLoading: apiIsLoading, run, } = useAsync();
-    const { catalog, fetchSummary } = useEntityService(); // Determine type of fetch to be executed, either API endpoint or TSV.
+    const { ui } = entityConfig;
+    const { enableSummary } = ui || {};
+    const { data: response, run } = useAsync();
+    const { catalog, fetchSummary } = useEntityService();
+    // Summary is enabled and summary config is defined.
+    const shouldFetch = !!(enableSummary && summaryConfig);
     useEffect(() => {
-        if (summaryConfig) {
-            run(fetchSummary(filterState, catalog, token));
-        }
-    }, [catalog, fetchSummary, filterState, run, summaryConfig, token]);
-    // Return if there's no summary config for this site.
-    if (!summaryConfig) {
-        return { isLoading: false }; //TODO: return a summary placeholder
-    }
-    // Return the fetch status and summary data once fetch is complete.
-    return {
-        isLoading: apiIsLoading,
-        response,
-    };
+        if (!shouldFetch)
+            return;
+        run(fetchSummary(filterState, catalog, token));
+    }, [catalog, fetchSummary, filterState, run, shouldFetch, token]);
+    // Summary is disabled or summary config is not defined.
+    if (!enableSummary || !summaryConfig)
+        return;
+    // Summary response is not defined.
+    if (!response)
+        return;
+    // Map response to summaries.
+    return { summaries: summaryConfig.mapResponse(response) };
 };

package/lib/routes/constants.d.ts

@@ -1,3 +1,4 @@
 export declare const ROUTE: {
+    EXPORT: string;
     LOGIN: string;
 };

package/lib/routes/constants.js

@@ -1,3 +1,4 @@
 export const ROUTE = {
+    EXPORT: "/export",
     LOGIN: "/login",
 };

package/lib/styles/common/constants/colorMixes.d.ts

@@ -3,7 +3,9 @@ export declare const COLOR_MIXES: {
     ALERT_MAIN_32: string;
     ALERT_MAIN_64: string;
     COMMON_BLACK_04: string;
+    COMMON_BLACK_05: string;
     COMMON_BLACK_08: string;
+    COMMON_BLACK_20: string;
     COMMON_WHITE_32: string;
     COMMON_WHITE_64: string;
     COMMON_WHITE_80: string;

package/lib/styles/common/constants/colorMixes.js

@@ -4,7 +4,9 @@ export const COLOR_MIXES = {
     ALERT_MAIN_32: `color-mix(in srgb, ${PALETTE.ALERT_MAIN} 32%, transparent)`,
     ALERT_MAIN_64: `color-mix(in srgb, ${PALETTE.ALERT_MAIN} 64%, transparent)`,
     COMMON_BLACK_04: `color-mix(in srgb, ${PALETTE.COMMON_BLACK} 4%, transparent)`,
+    COMMON_BLACK_05: `color-mix(in srgb, ${PALETTE.COMMON_BLACK} 5%, transparent)`,
     COMMON_BLACK_08: `color-mix(in srgb, ${PALETTE.COMMON_BLACK} 8%, transparent)`,
+    COMMON_BLACK_20: `color-mix(in srgb, ${PALETTE.COMMON_BLACK} 20%, transparent)`,
     COMMON_WHITE_32: `color-mix(in srgb, ${PALETTE.COMMON_WHITE} 32%, transparent)`,
     COMMON_WHITE_64: `color-mix(in srgb, ${PALETTE.COMMON_WHITE} 64%, transparent)`,
     COMMON_WHITE_80: `color-mix(in srgb, ${PALETTE.COMMON_WHITE} 80%, transparent)`,

package/lib/styles/common/mui/paper.js

@@ -5,5 +5,4 @@ export const VARIANT = {
     OUTLINED: "outlined",
     PANEL: "panel",
     SEARCH_BAR: "searchbar",
-    TABLE: "table",
 };

package/lib/styles/common/mui/toggleButton.d.ts

@@ -0,0 +1,9 @@
+import { ToggleButtonProps } from "@mui/material";
+type ToggleButtonPropsOptions = {
+    COLOR: typeof COLOR;
+    SIZE: typeof SIZE;
+};
+declare const COLOR: Record<string, ToggleButtonProps["color"]>;
+declare const SIZE: Record<string, ToggleButtonProps["size"]>;
+export declare const TOGGLE_BUTTON_PROPS: ToggleButtonPropsOptions;
+export {};

package/lib/styles/common/mui/toggleButton.js

@@ -0,0 +1,18 @@
+const COLOR = {
+    ERROR: "error",
+    INFO: "info",
+    PRIMARY: "primary",
+    SECONDARY: "secondary",
+    STANDARD: "standard",
+    SUCCESS: "success",
+    WARNING: "warning",
+};
+const SIZE = {
+    LARGE: "large",
+    MEDIUM: "medium",
+    SMALL: "small",
+};
+export const TOGGLE_BUTTON_PROPS = {
+    COLOR,
+    SIZE,
+};

package/lib/styles/common/mui/typography.js

@@ -11,6 +11,7 @@ const VARIANT = {
     TEXT_BODY_400_2_LINES: "text-body-400-2lines",
     TEXT_BODY_500: "text-body-500",
     TEXT_BODY_SMALL_400: "text-body-small-400",
+    TEXT_BODY_SMALL_500: "text-body-small-500",
     TEXT_HEADING_LARGE: "text-heading-large",
     TEXT_HEADING_SMALL: "text-heading-small",
     TEXT_HEADING_XSMALL: "text-heading-xsmall",

package/lib/tests/testIds.d.ts

@@ -1,6 +1,5 @@
 export declare const TEST_IDS: {
     CLEAR_ALL_FILTERS: string;
-    ENTITIES_VIEW: string;
     EXPORT_BUTTON: string;
     FILTERS: string;
     FILTER_CONTROLS: string;
@@ -16,4 +15,5 @@ export declare const TEST_IDS: {
     TABLE_PAGINATION: string;
     TABLE_PAGINATION_PAGE: string;
     TABLE_PAGINATION_RESULTS: string;
+    VIEW_TOGGLE: string;
 };

package/lib/tests/testIds.js

@@ -1,6 +1,5 @@
 export const TEST_IDS = {
     CLEAR_ALL_FILTERS: "clear-all-filters",
-    ENTITIES_VIEW: "entities-view",
     EXPORT_BUTTON: "export-button",
     FILTERS: "filters",
     FILTER_CONTROLS: "filter-controls",
@@ -16,4 +15,5 @@ export const TEST_IDS = {
     TABLE_PAGINATION: "table-pagination",
     TABLE_PAGINATION_PAGE: "table-pagination-page",
     TABLE_PAGINATION_RESULTS: "table-pagination-results",
+    VIEW_TOGGLE: "view-toggle",
 };

package/lib/theme/common/components.js

@@ -5,6 +5,7 @@ import { SHADOWS } from "../../styles/common/constants/shadows";
 import { BUTTON_PROPS } from "../../styles/common/mui/button";
 import { CHIP_PROPS } from "../../styles/common/mui/chip";
 import { OUTLINED_INPUT_PROPS } from "../../styles/common/mui/outlinedInput";
+import { TOGGLE_BUTTON_PROPS } from "../../styles/common/mui/toggleButton";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import { TEXT_BODY_400, TEXT_BODY_400_2_LINES, TEXT_BODY_500, TEXT_BODY_SMALL_400, TEXT_BODY_SMALL_500, TEXT_HEADING, TEXT_HEADING_SMALL, } from "./typography";
 // Constants
@@ -136,50 +137,50 @@ export const MuiButton = (theme) => {
         },
         styleOverrides: {
             containedPrimary: {
-                backgroundColor: theme.palette.primary.main,
-                boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
-                color: theme.palette.common.white,
+                backgroundColor: PALETTE.PRIMARY_MAIN,
+                boxShadow: `0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}, inset 0 -1px 0 0 ${COLOR_MIXES.COMMON_BLACK_20}`,
+                color: PALETTE.COMMON_WHITE,
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&:hover": {
-                    backgroundColor: theme.palette.primary.dark,
-                    boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
+                    backgroundColor: PALETTE.PRIMARY_DARK,
+                    boxShadow: `0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}, inset 0 -1px 0 0 ${COLOR_MIXES.COMMON_BLACK_20}`,
                 },
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&:active": {
-                    backgroundColor: theme.palette.primary.dark,
-                    boxShadow: "none",
+                    backgroundColor: PALETTE.PRIMARY_DARK,
+                    boxShadow: `0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}, inset 0 -1px 0 0 ${COLOR_MIXES.COMMON_BLACK_20}`,
                 },
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&.Mui-disabled": {
-                    backgroundColor: theme.palette.primary.main,
-                    boxShadow: `0 1px 0 0 ${theme.palette.primary.dark}`,
-                    color: theme.palette.common.white,
+                    backgroundColor: PALETTE.PRIMARY_MAIN,
+                    boxShadow: "none",
+                    color: PALETTE.COMMON_WHITE,
                     opacity: 0.5,
                 },
             },
             containedSecondary: {
-                backgroundColor: theme.palette.common.white,
-                boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
-                color: theme.palette.ink.main,
+                backgroundColor: PALETTE.COMMON_WHITE,
+                boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_05}`,
+                color: PALETTE.INK_MAIN,
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&.Mui-focusVisible": {
-                    backgroundColor: theme.palette.common.white,
-                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
+                    backgroundColor: PALETTE.COMMON_WHITE,
+                    boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_05}`,
                 },
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&:hover": {
-                    backgroundColor: theme.palette.smoke.lightest,
-                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
+                    backgroundColor: PALETTE.SMOKE_LIGHTEST,
+                    boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_05}`,
                 },
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&:active": {
-                    backgroundColor: theme.palette.smoke.lightest,
-                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}`,
+                    backgroundColor: PALETTE.SMOKE_LIGHTEST,
+                    boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_05}`,
                 },
                 "&:disabled": {
-                    backgroundColor: theme.palette.common.white,
-                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
-                    color: theme.palette.ink.main,
+                    backgroundColor: PALETTE.COMMON_WHITE,
+                    boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}`,
+                    color: PALETTE.INK_MAIN,
                     opacity: 0.5,
                 },
             },
@@ -187,18 +188,12 @@ export const MuiButton = (theme) => {
                 margin: 0,
                 variants: [
                     {
-                        props: { size: BUTTON_PROPS.SIZE.MEDIUM },
-                        style: {
-                            marginLeft: -6,
-                            marginRight: -6,
-                        },
+                        props: { size: BUTTON_PROPS.SIZE.LARGE },
+                        style: { marginRight: -4 },
                     },
                     {
-                        props: { size: BUTTON_PROPS.SIZE.SMALL },
-                        style: {
-                            marginLeft: -6,
-                            marginRight: -6,
-                        },
+                        props: { size: BUTTON_PROPS.SIZE.MEDIUM },
+                        style: { marginRight: -4 },
                     },
                 ],
             },
@@ -229,26 +224,39 @@ export const MuiButton = (theme) => {
                 padding: "10px 16px",
                 textTransform: "capitalize",
             },
-            sizeSmall: {
-                padding: "6px 12px",
-            },
             startIcon: {
-                marginRight: 0,
-            },
-            text: {
-                alignSelf: "center",
-                minWidth: 0,
-                padding: 0,
+                margin: 0,
+                variants: [
+                    {
+                        props: { size: BUTTON_PROPS.SIZE.LARGE },
+                        style: { marginLeft: -4 },
+                    },
+                    {
+                        props: { size: BUTTON_PROPS.SIZE.MEDIUM },
+                        style: { marginLeft: -4 },
+                    },
+                ],
             },
         },
         variants: [
+            {
+                props: { size: BUTTON_PROPS.SIZE.LARGE },
+                style: { padding: "10px 16px" },
+            },
+            {
+                props: { size: BUTTON_PROPS.SIZE.MEDIUM },
+                style: { padding: "8px 16px" },
+            },
             {
                 props: {
                     color: BUTTON_PROPS.COLOR.PRIMARY,
                     variant: BUTTON_PROPS.VARIANT.TEXT,
                 },
                 style: {
+                    alignSelf: "center",
                     color: PALETTE.PRIMARY_MAIN,
+                    minWidth: 0,
+                    padding: 0,
                     // eslint-disable-next-line sort-keys -- disabling key order for readability
                     "&:hover": {
                         backgroundColor: "transparent",
@@ -740,22 +748,23 @@ export const MuiIconButton = (theme) => {
                 },
             },
             colorSecondary: {
-                backgroundColor: theme.palette.common.white,
-                boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_08}`,
-                color: theme.palette.ink.main,
+                backgroundColor: PALETTE.COMMON_WHITE,
+                boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}, 0 1px 0 0 ${COLOR_MIXES.COMMON_BLACK_05}`,
+                color: PALETTE.INK_MAIN,
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&.Mui-disabled": {
-                    color: "inherit",
+                    boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}`,
+                    color: PALETTE.INK_LIGHT,
                     opacity: 0.5,
                 },
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&:hover": {
-                    backgroundColor: theme.palette.smoke.lightest,
+                    backgroundColor: PALETTE.SMOKE_LIGHTEST,
                 },
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&:active": {
-                    backgroundColor: theme.palette.smoke.lightest,
-                    boxShadow: `inset 0 0 0 1px ${theme.palette.smoke.dark}`,
+                    backgroundColor: PALETTE.SMOKE_LIGHTEST,
+                    boxShadow: `inset 0 0 0 1px ${PALETTE.SMOKE_DARK}`,
                 },
             },
             root: {
@@ -765,7 +774,7 @@ export const MuiIconButton = (theme) => {
                 padding: 10,
             },
             sizeMedium: {
-                padding: "6px 8px",
+                padding: 8,
             },
             sizeSmall: {
                 padding: 6,
@@ -1170,15 +1179,6 @@ export const MuiPaper = (theme) => {
                     },
                 },
             },
-            {
-                props: { variant: "table" }, // Copy of "panel" variant.
-                style: {
-                    borderColor: theme.palette.smoke.main,
-                    borderStyle: "solid",
-                    borderWidth: 1,
-                    boxShadow: SHADOWS["01"],
-                },
-            },
         ],
     };
 };
@@ -1450,7 +1450,6 @@ export const MuiToggleButton = (theme) => {
                 borderRadius: 4,
                 color: theme.palette.ink.main,
                 flex: 1,
-                padding: "8px 12px",
                 // eslint-disable-next-line sort-keys -- disabling key order for readability
                 "&:hover": {
                     backgroundColor: theme.palette.smoke.lightest,
@@ -1463,6 +1462,12 @@ export const MuiToggleButton = (theme) => {
                         backgroundColor: PALETTE.COMMON_WHITE,
                     },
                 },
+                variants: [
+                    {
+                        props: { size: TOGGLE_BUTTON_PROPS.SIZE.MEDIUM },
+                        style: { padding: "8px 16px" },
+                    },
+                ],
             },
         },
     };

package/lib/views/ExploreView/exploreView.js

@@ -1,40 +1,31 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo } from "react";
 import { track } from "../../common/analytics/analytics";
 import { EVENT_NAME, EVENT_PARAM } from "../../common/analytics/entities";
-import { ComponentCreator } from "../../components/ComponentCreator/ComponentCreator";
+import { DrawerProvider } from "../../components/common/Drawer/provider/provider";
 import { ClearAllFilters } from "../../components/Filter/components/ClearAllFilters/clearAllFilters";
 import { Filters, } from "../../components/Filter/components/Filters/filters";
 import { SearchAllFilters } from "../../components/Filter/components/SearchAllFilters/searchAllFilters";
-import { Tabs } from "../../components/Index/components/Tabs/tabs";
 import { Index as IndexView } from "../../components/Index/index";
-import { SidebarButton } from "../../components/Layout/components/Sidebar/components/SidebarButton/sidebarButton";
 import { SidebarLabel } from "../../components/Layout/components/Sidebar/components/SidebarLabel/sidebarLabel";
 import { SidebarTools } from "../../components/Layout/components/Sidebar/components/SidebarTools/sidebarTools.styles";
 import { Sidebar } from "../../components/Layout/components/Sidebar/sidebar";
 import { useStateSyncManager } from "../../hooks/stateSyncManager/hook";
-import { BREAKPOINT_FN_NAME, useBreakpointHelper, } from "../../hooks/useBreakpointHelper";
 import { useConfig } from "../../hooks/useConfig";
 import { useEntityList } from "../../hooks/useEntityList";
 import { useExploreState } from "../../hooks/useExploreState";
-import { useSummary } from "../../hooks/useSummary";
 import { ExploreActionKind } from "../../providers/exploreState";
 import { clearMeta } from "../../providers/exploreState/actions/clearMeta/dispatch";
 import { stateToUrl } from "../../providers/exploreState/actions/stateToUrl/dispatch";
 import { urlToState } from "../../providers/exploreState/actions/urlToState/dispatch";
 import { SELECT_CATEGORY_KEY } from "../../providers/exploreState/constants";
 import { TEST_IDS } from "../../tests/testIds";
-import { DESKTOP_SM } from "../../theme/common/breakpoints";
 import { buildStateSyncManagerContext } from "./utils";
 export const ExploreView = (props) => {
-    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-    const tabletDown = useBreakpointHelper(BREAKPOINT_FN_NAME.DOWN, DESKTOP_SM);
     const { config, entityConfig } = useConfig(); // Get app level config.
     const { exploreDispatch, exploreState } = useExploreState(); // Get the useReducer state and dispatch for "Explore".
-    const { explorerTitle, summaryConfig, trackingConfig } = config;
-    const { label, listView } = entityConfig;
-    const { listHero, subTitleHero } = listView || {};
-    const { categoryGroups, categoryViews, filterCount, loading } = exploreState;
-    const { response: summaryResponse } = useSummary(); // Fetch summary.
+    const { trackingConfig } = config;
+    const { label } = entityConfig;
+    const { categoryGroups, categoryViews, loading } = exploreState;
     useEntityList(props); // Fetch entities.
     const { entityListType } = props;
     const categoryFilters = useMemo(() => buildCategoryFilters(categoryViews, categoryGroups), [categoryGroups, categoryViews]);
@@ -47,12 +38,6 @@ export const ExploreView = (props) => {
         dispatch: exploreDispatch,
         state: buildStateSyncManagerContext(exploreState, props),
     });
-    /**
-     * Closes filter drawer.
-     */
-    const onCloseDrawer = () => {
-        setIsDrawerOpen(false);
-    };
     /**
      * Callback fired when selected state of a category value is toggled.
      * @param fromSearchAll - Indication if the filter was originated from the search all field.
@@ -92,12 +77,6 @@ export const ExploreView = (props) => {
             });
         }
     };
-    /**
-     * Opens filter drawer.
-     */
-    const onOpenDrawer = () => {
-        setIsDrawerOpen(true);
-    };
     /**
      * Dispatch a SelectedEntityType action when entityListType changes.
      */
@@ -112,14 +91,14 @@ export const ExploreView = (props) => {
             });
         }
     }, [entityListType, exploreDispatch]);
-    return (React.createElement(React.Fragment, null,
-        categoryViews && !!categoryViews.length && (React.createElement(Sidebar, { drawerOpen: isDrawerOpen, onDrawerClose: onCloseDrawer },
+    return (React.createElement(DrawerProvider, null,
+        categoryViews && !!categoryViews.length && (React.createElement(Sidebar, null,
             React.createElement(SidebarTools, { "data-testid": TEST_IDS.FILTER_CONTROLS },
                 React.createElement(SidebarLabel, { label: "Filters" }),
                 React.createElement(ClearAllFilters, null),
-                React.createElement(SearchAllFilters, { categoryViews: categoryViews, drawerOpen: isDrawerOpen, onFilter: onFilterChange.bind(null, true) })),
-            React.createElement(Filters, { categoryFilters: categoryFilters, closeAncestor: onCloseDrawer, onFilter: onFilterChange.bind(null, false), trackFilterOpened: trackingConfig?.trackFilterOpened }))),
-        React.createElement(IndexView, { className: props.className, categoryFilters: categoryFilters, entityListType: entityListType, entityName: label, loading: loading, ListHero: renderComponent(listHero), SideBarButton: tabletDown ? (React.createElement(SidebarButton, { count: filterCount, label: "Filter", onClick: onOpenDrawer })) : undefined, SubTitleHero: renderComponent(subTitleHero), Summaries: renderSummary(summaryConfig, summaryResponse), Tabs: React.createElement(Tabs, null), title: entityConfig.explorerTitle || explorerTitle })));
+                React.createElement(SearchAllFilters, { categoryViews: categoryViews, onFilter: onFilterChange.bind(null, true) })),
+            React.createElement(Filters, { categoryFilters: categoryFilters, onFilter: onFilterChange.bind(null, false), trackFilterOpened: trackingConfig?.trackFilterOpened }))),
+        React.createElement(IndexView, { className: props.className, categoryFilters: categoryFilters, entityListType: entityListType, entityName: label, loading: loading })));
 };
 /**
  * Builds the category views into category views grouped by the given category group configuration.
@@ -146,31 +125,3 @@ function buildCategoryFilters(categoryViews, categoryGroups) {
         return accGroups;
     }, []);
 }
-/**
- * Optionally renders component config.
- * @param componentsConfig - SubHero config.
- * @param response - Response data.
- * @returns components.
- */
-function renderComponent(componentsConfig, response) {
-    if (!componentsConfig) {
-        return;
-    }
-    return React.createElement(ComponentCreator, { components: componentsConfig, response: response });
-}
-/**
- * Renders Summaries component when all the following requirements are fulfilled:
- * - defined summary config,
- * - valid summary response, and
- * - defined summaries transformed from the given summary response.
- * @param summaryConfig - Summary config.
- * @param summaryResponse - Response model return from summary API.
- * @returns rendered Summaries component.
- */
-function renderSummary(summaryConfig, summaryResponse) {
-    if (!summaryConfig || !summaryResponse) {
-        return;
-    }
-    /* Render the Summaries component. */
-    return (React.createElement(ComponentCreator, { components: summaryConfig.components, response: summaryResponse }));
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "37.0.0",
+  "version": "38.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
@@ -74,7 +74,7 @@
     "@observablehq/plot": "^0.6.17",
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.19.2",
-    "@tanstack/react-virtual": "^3.0.0-beta.59",
+    "@tanstack/react-virtual": "^3.13.12",
     "copy-to-clipboard": "3.3.1",
     "isomorphic-dompurify": "^2.22.0",
     "ky": "^1.7.2",

package/src/components/DataDictionary/components/Entities/types.ts

@@ -1,6 +1,6 @@
 import { RowData, Table } from "@tanstack/react-table";
 import { Attribute } from "../../../../common/entities";
-import { LayoutSpacing } from "../../hooks/UseLayoutSpacing/types";
+import { LayoutSpacing } from "../../../../hooks/UseLayoutSpacing/types";
 
 export interface ClassesProps<T extends RowData = Attribute> {
   spacing?: LayoutSpacing;