@databiosphere/findable-ui 13.0.1 → 15.0.0

package/lib/providers/fileManifestState.js

@@ -3,31 +3,17 @@ import { getFilterParameterValue } from "../apis/azul/common/utils";
 import { useCatalog } from "../hooks/useCatalog";
 import { buildNextFilterState } from "../hooks/useCategoryFilter";
 import { buildFileManifestRequestURL } from "../hooks/useFileManifest/common/buildFileManifestRequestURL";
+import { FILES_FACETS_STATUS, } from "../hooks/useFileManifest/common/entities";
 import { useFetchFilesFacets } from "../hooks/useFileManifest/useFetchFilesFacets";
 import { useFetchSummary } from "../hooks/useFileManifest/useFetchSummary";
 import { useFileManifestURL } from "../hooks/useFileManifest/useFileManifestURL";
-// Default file manifest state.
-export const DEFAULT_FILE_MANIFEST_STATE = {
-    fileManifestFormat: undefined,
-    fileSummary: undefined,
-    fileSummaryFacetName: undefined,
-    fileSummaryFilters: [],
-    filesFacets: [],
-    filters: [],
-    isEnabled: false,
-    isFacetsLoading: false,
-    isFacetsSuccess: false,
-    isFileSummaryLoading: false,
-    isLoading: false,
-    isSummaryLoading: false,
-    requestParams: undefined,
-    requestURL: undefined,
-    summary: undefined,
-};
+import { updateFileManifestAction } from "./fileManifestState/actions";
+import { FILE_MANIFEST_STATE } from "./fileManifestState/constants";
+import { getRequestFilters } from "./fileManifestState/utils";
 export const FileManifestStateContext = createContext({
     // eslint-disable-next-line @typescript-eslint/no-empty-function -- allow dummy function for default state.
     fileManifestDispatch: () => { },
-    fileManifestState: DEFAULT_FILE_MANIFEST_STATE,
+    fileManifestState: FILE_MANIFEST_STATE,
 });
 export function FileManifestStateProvider({ children, }) {
     // Determine catalog.
@@ -35,7 +21,7 @@ export function FileManifestStateProvider({ children, }) {
     // Determine file manifest request data URL.
     const URL = useFileManifestURL();
     // File manifest state.
-    const [fileManifestState, fileManifestDispatch] = useReducer((s, a) => fileManifestReducer(s, a, { URL, catalog }), DEFAULT_FILE_MANIFEST_STATE);
+    const [fileManifestState, fileManifestDispatch] = useReducer((s, a) => fileManifestReducer(s, a, { URL, catalog }), FILE_MANIFEST_STATE);
     const { fileSummaryFacetName, fileSummaryFilters, filters, isEnabled } = fileManifestState;
     // Fetch files facets.
     const { filesFacets, isLoading: isFacetsLoading, isSuccess: isFacetsSuccess, } = useFetchFilesFacets(filters, catalog, { size: "25" }, isEnabled);
@@ -100,6 +86,7 @@ function fileManifestReducer(state, action, fileManifestContext) {
             return {
                 ...state,
                 fileManifestFormat: undefined,
+                filesFacetsStatus: FILES_FACETS_STATUS.NOT_STARTED,
                 isEnabled: false,
                 requestParams: undefined,
                 requestURL: undefined,
@@ -109,28 +96,23 @@ function fileManifestReducer(state, action, fileManifestContext) {
         case FileManifestActionKind.FetchFileManifest: {
             // Get file summary filters.
             const fileSummaryFilters = buildNextFileSummaryFilterState(payload.filters, payload.fileSummaryFacetName);
-            // Build request params and request URL.
-            const { requestParams, requestURL } = buildFileManifestRequestURL(URL, payload.filters, catalog, payload.fileManifestFormat) || {};
             return {
                 ...state,
                 ...payload,
                 fileSummaryFilters,
                 isEnabled: true,
-                requestParams,
-                requestURL,
+                requestParams: undefined,
+                requestURL: undefined,
             };
         }
         // Updates file manifest.
         case FileManifestActionKind.UpdateFileManifest: {
-            return {
-                ...state,
-                ...payload,
-            };
+            return updateFileManifestAction(state, payload, fileManifestContext);
         }
         // Updates file manifest format.
         case FileManifestActionKind.UpdateFileManifestFormat: {
             // Build request params and request URL.
-            const { requestParams, requestURL } = buildFileManifestRequestURL(URL, state.filters, catalog, payload) || {};
+            const { requestParams, requestURL } = buildFileManifestRequestURL(URL, getRequestFilters(state), catalog, payload) || {};
             return {
                 ...state,
                 fileManifestFormat: payload,
@@ -145,14 +127,13 @@ function fileManifestReducer(state, action, fileManifestContext) {
             payload.selected);
             // Get file summary filters.
             const fileSummaryFilters = buildNextFileSummaryFilterState(filters, state.fileSummaryFacetName);
-            // Build request params and request URL.
-            const { requestParams, requestURL } = buildFileManifestRequestURL(URL, filters, catalog, state.fileManifestFormat) || {};
             return {
                 ...state,
                 fileSummaryFilters,
+                filesFacetsStatus: FILES_FACETS_STATUS.NOT_STARTED,
                 filters,
-                requestParams,
-                requestURL,
+                requestParams: undefined,
+                requestURL: undefined,
             };
         }
         // Updates selected file manifest filters by category.
@@ -161,14 +142,13 @@ function fileManifestReducer(state, action, fileManifestContext) {
             const filters = updateCategoryFilterState(state.filters, payload, state.filesFacets);
             // Get file summary filters.
             const fileSummaryFilters = buildNextFileSummaryFilterState(filters, state.fileSummaryFacetName);
-            // Build request params and request URL.
-            const { requestParams, requestURL } = buildFileManifestRequestURL(URL, filters, catalog, state.fileManifestFormat) || {};
             return {
                 ...state,
                 fileSummaryFilters,
+                filesFacetsStatus: FILES_FACETS_STATUS.NOT_STARTED,
                 filters,
-                requestParams,
-                requestURL,
+                requestParams: undefined,
+                requestURL: undefined,
             };
         }
         default:

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

@@ -0,0 +1,5 @@
+export declare enum SIZE {
+    LARGE = "large",
+    MEDIUM = "medium",
+    SMALL = "small"
+}

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

@@ -0,0 +1,6 @@
+export var SIZE;
+(function (SIZE) {
+    SIZE["LARGE"] = "large";
+    SIZE["MEDIUM"] = "medium";
+    SIZE["SMALL"] = "small";
+})(SIZE || (SIZE = {}));

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

@@ -0,0 +1,4 @@
+import { AlertProps } from "@mui/material";
+export declare const COLOR: Record<string, AlertProps["color"]>;
+export declare const SEVERITY: Record<string, AlertProps["severity"]>;
+export declare const VARIANT: Record<string, AlertProps["variant"]>;

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

@@ -0,0 +1,20 @@
+export const COLOR = {
+    ERROR: "error",
+    INFO: "info",
+    INK: "ink",
+    PRIMARY: "primary",
+    SMOKE: "smoke",
+    SUCCESS: "success",
+    WARNING: "warning",
+};
+export const SEVERITY = {
+    ERROR: "error",
+    INFO: "info",
+    SUCCESS: "success",
+    WARNING: "warning",
+};
+export const VARIANT = {
+    FILLED: "filled",
+    OUTLINED: "outlined",
+    STANDARD: "standard",
+};

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

@@ -0,0 +1,11 @@
+import { ChipProps } from "@mui/material";
+type ChipPropsOptions = {
+    COLOR: typeof COLOR;
+    SIZE: typeof SIZE;
+    VARIANT: typeof VARIANT;
+};
+declare const COLOR: Record<string, ChipProps["color"]>;
+declare const SIZE: Record<string, ChipProps["size"]>;
+declare const VARIANT: Record<string, ChipProps["variant"]>;
+export declare const CHIP_PROPS: ChipPropsOptions;
+export {};

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

@@ -0,0 +1,25 @@
+const COLOR = {
+    DEFAULT: "default",
+    ERROR: "error",
+    INFO: "info",
+    PRIMARY: "primary",
+    SECONDARY: "secondary",
+    SUCCESS: "success",
+    WARNING: "warning",
+};
+const SIZE = {
+    MEDIUM: "medium",
+    SMALL: "small",
+};
+const VARIANT = {
+    FILLED: "filled",
+    FILTER_TAG: "filterTag",
+    N_TAG: "ntag",
+    OUTLINED: "outlined",
+    STATUS: "status",
+};
+export const CHIP_PROPS = {
+    COLOR,
+    SIZE,
+    VARIANT,
+};

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

@@ -0,0 +1,2 @@
+import { IconProps } from "@mui/material";
+export declare const FONT_SIZE: Record<string, IconProps["fontSize"]>;

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

@@ -0,0 +1,6 @@
+export const FONT_SIZE = {
+    INHERIT: "inherit",
+    LARGE: "large",
+    MEDIUM: "medium",
+    SMALL: "small",
+};

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

@@ -13,18 +13,6 @@ export declare const MuiAccordionDetails: Components["MuiAccordionDetails"];
  * MuiAccordionSummary Component
  */
 export declare const MuiAccordionSummary: Components["MuiAccordionSummary"];
-/**
- * MuiAlert Component
- * @param theme - Theme.
- * @returns MuiAlert component theme styles.
- */
-export declare const MuiAlert: (theme: Theme) => Components["MuiAlert"];
-/**
- * MuiAlertTitle Component
- * @param theme - Theme.
- * @returns MuiAlertTitle component theme styles.
- */
-export declare const MuiAlertTitle: (theme: Theme) => Components["MuiAlertTitle"];
 /**
  * MuiAppBar Component
  */

package/lib/theme/common/components.js

@@ -1,12 +1,9 @@
-import { ErrorIcon } from "../../components/common/CustomIcon/components/ErrorIcon/errorIcon";
-import { InfoIcon } from "../../components/common/CustomIcon/components/InfoIcon/infoIcon";
-import { SuccessIcon } from "../../components/common/CustomIcon/components/SuccessIcon/successIcon";
-import { WarningIcon } from "../../components/common/CustomIcon/components/WarningIcon/warningIcon";
 import { DropDownIcon } from "../../components/common/Form/components/Select/components/DropDownIcon/dropDownIcon";
+import { CHIP_PROPS } from "../../styles/common/mui/chip";
 import { desktopUp, mobileUp, tabletUp } from "./breakpoints";
 import { alpha32, alpha60, alpha64, alpha80, black04, black08, white, } from "./palette";
 import { strokeBottom, strokeTop } from "./shadows";
-import { TEXT_BODY_400, TEXT_BODY_400_2_LINES, TEXT_BODY_500, TEXT_BODY_LARGE_500, TEXT_BODY_SMALL_400, TEXT_BODY_SMALL_500, TEXT_HEADING, TEXT_HEADING_SMALL, } from "./typography";
+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
 const FLEX_START = "flex-start";
 /**
@@ -62,157 +59,6 @@ export const MuiAccordionSummary = {
         },
     },
 };
-/**
- * MuiAlert Component
- * @param theme - Theme.
- * @returns MuiAlert component theme styles.
- */
-export const MuiAlert = (theme) => {
-    return {
-        defaultProps: {
-            iconMapping: {
-                error: ErrorIcon({ fontSize: "small" }),
-                info: InfoIcon({ fontSize: "small" }),
-                success: SuccessIcon({ fontSize: "small" }),
-                warning: WarningIcon({ fontSize: "small" }),
-            },
-        },
-        styleOverrides: {
-            icon: {
-                opacity: 1,
-                padding: "2px 0",
-            },
-            message: {
-                display: "grid",
-                gap: 4,
-                padding: 0,
-            },
-            root: {
-                ...theme.typography[TEXT_BODY_400_2_LINES],
-                borderRadius: 8,
-                boxShadow: theme.shadows[1], // elevation01
-                color: theme.palette.ink.main,
-            },
-            standard: {
-                alignItems: FLEX_START,
-                padding: 20,
-            },
-            standardError: {
-                backgroundColor: theme.palette.alert.lightest,
-                border: `1px solid ${theme.palette.alert.main}${alpha32}`,
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "& .MuiAlert-icon": {
-                    color: theme.palette.alert.main,
-                },
-            },
-            standardInfo: {
-                backgroundColor: theme.palette.info.lightest,
-                border: `1px solid ${theme.palette.info.main}${alpha32}`,
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "& .MuiAlert-icon": {
-                    color: theme.palette.info.main,
-                },
-            },
-            standardSuccess: {
-                backgroundColor: theme.palette.success.lightest,
-                border: `1px solid ${theme.palette.success.main}${alpha32}`,
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "& .MuiAlert-icon": {
-                    color: theme.palette.success.main,
-                },
-            },
-            standardWarning: {
-                backgroundColor: theme.palette.warning.lightest,
-                border: `1px solid ${theme.palette.warning.main}${alpha32}`,
-                // eslint-disable-next-line sort-keys -- disabling key order for readability
-                "& .MuiAlert-icon": {
-                    color: theme.palette.warning.main,
-                },
-            },
-        },
-        variants: [
-            {
-                props: { severity: "info", variant: "neutral" },
-                style: {
-                    backgroundColor: theme.palette.smoke.light,
-                    padding: 16,
-                },
-            },
-            {
-                props: { variant: "banner" },
-                style: {
-                    padding: 16,
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    "& .MuiAlert-icon": {
-                        padding: 0,
-                    },
-                    "& .MuiAlertTitle-root": {
-                        ...theme.typography[TEXT_BODY_500],
-                    },
-                },
-            },
-            {
-                props: { severity: "error", variant: "banner" },
-                style: {
-                    backgroundColor: theme.palette.alert.lightest,
-                    border: `1px solid ${theme.palette.alert.main}${alpha32}`,
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    "& .MuiAlert-icon": {
-                        color: theme.palette.alert.main,
-                    },
-                },
-            },
-            {
-                props: { severity: "info", variant: "banner" },
-                style: {
-                    backgroundColor: theme.palette.info.lightest,
-                    border: `1px solid ${theme.palette.info.main}${alpha32}`,
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    "& .MuiAlert-icon": {
-                        color: theme.palette.info.main,
-                    },
-                },
-            },
-            {
-                props: { severity: "success", variant: "banner" },
-                style: {
-                    backgroundColor: theme.palette.success.lightest,
-                    border: `1px solid ${theme.palette.success.main}${alpha32}`,
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    "& .MuiAlert-icon": {
-                        color: theme.palette.success.main,
-                    },
-                },
-            },
-            {
-                props: { severity: "warning", variant: "banner" },
-                style: {
-                    backgroundColor: theme.palette.warning.lightest,
-                    border: `1px solid ${theme.palette.warning.main}${alpha32}`,
-                    // eslint-disable-next-line sort-keys -- disabling key order for readability
-                    "& .MuiAlert-icon": {
-                        color: theme.palette.warning.main,
-                    },
-                },
-            },
-        ],
-    };
-};
-/**
- * MuiAlertTitle Component
- * @param theme - Theme.
- * @returns MuiAlertTitle component theme styles.
- */
-export const MuiAlertTitle = (theme) => {
-    return {
-        styleOverrides: {
-            root: {
-                ...theme.typography[TEXT_BODY_LARGE_500],
-                margin: 0,
-            },
-        },
-    };
-};
 /**
  * MuiAppBar Component
  */
@@ -542,8 +388,23 @@ export const MuiChip = (theme) => {
                 color: "inherit",
                 margin: "0 -2px 0 0",
             },
+            label: {
+                ...theme.typography[TEXT_BODY_SMALL_400],
+            },
         },
         variants: [
+            {
+                props: { size: CHIP_PROPS.SIZE.SMALL },
+                style: {
+                    height: 20,
+                },
+            },
+            {
+                props: { size: CHIP_PROPS.SIZE.MEDIUM },
+                style: {
+                    height: 24,
+                },
+            },
             {
                 props: { color: "default" },
                 style: {
@@ -992,11 +853,14 @@ export const MuiInputBase = (theme) => {
  */
 export const MuiLink = {
     defaultProps: {
-        underline: "hover",
+        underline: "always",
     },
     styleOverrides: {
         root: {
             cursor: "pointer",
+            textDecorationColor: "currentColor",
+            textDecorationSkipInk: "none",
+            textUnderlinePosition: "from-font",
         },
     },
 };
@@ -1144,6 +1008,18 @@ export const MuiOutlinedInput = (theme) => {
 export const MuiPaper = (theme) => {
     return {
         variants: [
+            {
+                props: { elevation: 1 },
+                style: {
+                    boxShadow: theme.shadows[1], // elevation01
+                },
+            },
+            {
+                props: { elevation: 2 },
+                style: {
+                    boxShadow: theme.shadows[2], // elevation02
+                },
+            },
             {
                 props: { variant: "footer" },
                 style: {

package/lib/theme/components/index.d.ts

@@ -0,0 +1,2 @@
+export { MuiAlert } from "./muiAlert";
+export { MuiAlertTitle } from "./muiAlertTitle";

package/lib/theme/components/index.js

@@ -0,0 +1,2 @@
+export { MuiAlert } from "./muiAlert";
+export { MuiAlertTitle } from "./muiAlertTitle";

package/lib/theme/components/muiAlert.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from "@mui/material";
+export declare const MuiAlert: (theme: Theme) => Components["MuiAlert"];

package/lib/theme/components/muiAlert.js

@@ -0,0 +1,121 @@
+import { ErrorIcon } from "../../components/common/CustomIcon/components/ErrorIcon/errorIcon";
+import { InfoIcon } from "../../components/common/CustomIcon/components/InfoIcon/infoIcon";
+import { SuccessIcon } from "../../components/common/CustomIcon/components/SuccessIcon/successIcon";
+import { WarningIcon } from "../../components/common/CustomIcon/components/WarningIcon/warningIcon";
+import { SIZE } from "../../styles/common/constants/size";
+import { COLOR, SEVERITY, VARIANT } from "../../styles/common/mui/alert";
+import { FONT_SIZE } from "../../styles/common/mui/icon";
+import { alpha32 } from "../common/palette";
+import { TEXT_BODY_500 } from "../common/typography";
+export const MuiAlert = (theme) => {
+    return {
+        defaultProps: {
+            elevation: 1,
+            iconMapping: {
+                error: ErrorIcon({ fontSize: FONT_SIZE.SMALL }),
+                info: InfoIcon({ fontSize: FONT_SIZE.SMALL }),
+                success: SuccessIcon({ fontSize: FONT_SIZE.SMALL }),
+                warning: WarningIcon({ fontSize: FONT_SIZE.SMALL }),
+            },
+            size: SIZE.MEDIUM,
+        },
+        styleOverrides: {
+            icon: {
+                opacity: 1,
+                padding: 0,
+            },
+            message: {
+                ...theme.typography[TEXT_BODY_500], // default size - "medium"
+                display: "grid",
+                gap: 4,
+                padding: 0,
+            },
+            root: {
+                alignItems: "flex-start",
+                borderRadius: 8,
+                color: theme.palette.ink.main,
+                padding: 16,
+                variants: [
+                    {
+                        props: { severity: SEVERITY.ERROR },
+                        style: {
+                            backgroundColor: theme.palette.alert.lightest,
+                            border: `1px solid ${theme.palette.alert.main}${alpha32}`,
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            "& .MuiAlert-icon": {
+                                color: theme.palette.alert.main,
+                            },
+                        },
+                    },
+                    {
+                        props: { severity: SEVERITY.INFO },
+                        style: {
+                            backgroundColor: theme.palette.info.lightest,
+                            border: `1px solid ${theme.palette.info.main}${alpha32}`,
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            "& .MuiAlert-icon": {
+                                color: theme.palette.info.main,
+                            },
+                        },
+                    },
+                    {
+                        props: { severity: SEVERITY.SUCCESS },
+                        style: {
+                            backgroundColor: theme.palette.success.lightest,
+                            border: `1px solid ${theme.palette.success.main}${alpha32}`,
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            "& .MuiAlert-icon": {
+                                color: theme.palette.success.main,
+                            },
+                        },
+                    },
+                    {
+                        props: { severity: SEVERITY.WARNING },
+                        style: {
+                            backgroundColor: theme.palette.warning.lightest,
+                            border: `1px solid ${theme.palette.warning.main}${alpha32}`,
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            "& .MuiAlert-icon": {
+                                color: theme.palette.warning.main,
+                            },
+                        },
+                    },
+                    {
+                        props: { color: COLOR.INK },
+                        style: {
+                            backgroundColor: theme.palette.ink.main,
+                            color: theme.palette.common.white,
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            ".MuiLink-root": {
+                                color: theme.palette.common.white,
+                            },
+                        },
+                    },
+                    {
+                        props: { color: COLOR.PRIMARY },
+                        style: {
+                            backgroundColor: theme.palette.primary.main,
+                            color: theme.palette.common.white,
+                            // eslint-disable-next-line sort-keys -- disabling key order for readability
+                            ".MuiLink-root": {
+                                color: theme.palette.common.white,
+                            },
+                        },
+                    },
+                    {
+                        props: { color: COLOR.SMOKE },
+                        style: {
+                            backgroundColor: theme.palette.smoke.light,
+                        },
+                    },
+                    {
+                        props: { variant: VARIANT.FILLED },
+                        style: {
+                            border: "none",
+                        },
+                    },
+                ],
+            },
+        },
+    };
+};

package/lib/theme/components/muiAlertTitle.d.ts

@@ -0,0 +1,2 @@
+import { Components } from "@mui/material";
+export declare const MuiAlertTitle: Components["MuiAlertTitle"];

package/lib/theme/components/muiAlertTitle.js

@@ -0,0 +1,12 @@
+import { TEXT_BODY_500 } from "../common/typography";
+export const MuiAlertTitle = {
+    defaultProps: {
+        gutterBottom: false,
+        variant: TEXT_BODY_500,
+    },
+    styleOverrides: {
+        root: {
+            margin: 0,
+        },
+    },
+};

package/lib/theme/theme.js

@@ -4,6 +4,7 @@ import * as C from "./common/components";
 import * as P from "./common/palette";
 import { shadows } from "./common/shadows";
 import * as T from "./common/typography";
+import * as M from "./components";
 /**
  * Returns a generated theme with customization.
  * @param customOptions - Custom theme option overrides.
@@ -59,8 +60,8 @@ export function createAppTheme(customOptions) {
         MuiAccordion: C.MuiAccordion(theme),
         MuiAccordionDetails: C.MuiAccordionDetails,
         MuiAccordionSummary: C.MuiAccordionSummary,
-        MuiAlert: C.MuiAlert(theme),
-        MuiAlertTitle: C.MuiAlertTitle(theme),
+        MuiAlert: M.MuiAlert(theme),
+        MuiAlertTitle: M.MuiAlertTitle,
         MuiAppBar: C.MuiAppBar,
         MuiBackdrop: C.MuiBackdrop(theme),
         MuiBreadcrumbs: C.MuiBreadcrumbs(theme),

package/lib/views/ExportView/exportView.js

@@ -8,7 +8,7 @@ import { useUpdateURLSearchParams } from "../../hooks/useUpdateURLSearchParams";
 export const ExportView = (props) => {
     const { exploreState: { filterState }, } = useExploreState();
     useUpdateURLSearchParams();
-    useRequestFileManifest(undefined, filterState, undefined);
+    useRequestFileManifest(undefined, undefined, filterState, undefined);
     const { tabs, top } = useExportConfig();
     const currentTab = tabs[0];
     const { mainColumn, sideColumn } = currentTab;