@databiosphere/findable-ui 46.1.2 → 47.0.2

package/lib/providers/authentication.d.ts

@@ -0,0 +1,51 @@
+import React, { ReactNode } from "react";
+import { AUTHENTICATION_STATUS, LoginStatus } from "../hooks/useAuthentication/common/entities";
+import { UserProfile } from "../hooks/useAuthentication/useFetchGoogleProfile";
+import { TerraNIHResponse } from "../hooks/useAuthentication/useFetchTerraNIHProfile";
+import { TerraResponse } from "../hooks/useAuthentication/useFetchTerraProfile";
+import { TerraTermsOfServiceResponse } from "../hooks/useAuthentication/useFetchTerraTermsOfService";
+export declare const ROUTE_LOGIN = "/login";
+type AuthenticateUserFn = () => void;
+type RequestAuthenticationFn = () => void;
+/**
+ * Model of authentication context.
+ */
+export interface AuthContextProps {
+    authenticateUser: AuthenticateUserFn;
+    authenticationStatus: AUTHENTICATION_STATUS;
+    isAuthenticated: boolean;
+    isEnabled: boolean;
+    requestAuthentication: RequestAuthenticationFn;
+    terraNIHProfileLoginStatus: LoginStatus<TerraNIHResponse>;
+    terraProfileLoginStatus: LoginStatus<TerraResponse>;
+    terraTOSLoginStatus: LoginStatus<TerraTermsOfServiceResponse>;
+    token?: string;
+    userProfile?: UserProfile;
+}
+/**
+ * Auth context for storing and using auth-related state.
+ */
+export declare const AuthContext: React.Context<AuthContextProps>;
+interface Props {
+    children: ReactNode | ReactNode[];
+    sessionTimeout?: number;
+}
+/**
+ * Auth provider for consuming components to subscribe to changes in auth-related state.
+ * @param props - Component inputs.
+ * @param props.children - Set of children components that can possibly consume the query provider.
+ * @param props.sessionTimeout - If provided, will set the value for a session timeout (in milliseconds).
+ * @returns Provider element to be used by consumers to both update authentication state and subscribe to changes in authentication state.
+ */
+export declare function AuthProvider({ children, sessionTimeout }: Props): JSX.Element;
+/**
+ * Token is released for the following conditions:
+ * - Terra endpoint is configured and the terms of service response is successful, or
+ * - Terra endpoint is not configured and the user profile response is successful.
+ * @param userProfileLoginStatus - User profile login status.
+ * @param terraProfileLoginStatus - Terra profile login status.
+ * @param terraTOSLoginStatus - Terra terms of service login status.
+ * @returns true if the token should be released.
+ */
+export declare function shouldReleaseToken(userProfileLoginStatus: LoginStatus<UserProfile>, terraProfileLoginStatus: LoginStatus<TerraResponse>, terraTOSLoginStatus: LoginStatus<TerraTermsOfServiceResponse>): boolean;
+export {};

package/lib/providers/authentication.js

@@ -0,0 +1,110 @@
+import Router, { useRouter } from "next/router";
+import React, { createContext, useCallback } from "react";
+import { useIdleTimer } from "react-idle-timer";
+import { LOGIN_STATUS_NOT_STARTED } from "../hooks/useAuthentication/common/constants";
+import { AUTHENTICATION_STATUS, } from "../hooks/useAuthentication/common/entities";
+import { useAuthenticationComplete } from "../hooks/useAuthentication/useAuthenticationComplete";
+import { useAuthenticationStatus } from "../hooks/useAuthentication/useAuthenticationStatus";
+import { useFetchGoogleProfile, } from "../hooks/useAuthentication/useFetchGoogleProfile";
+import { useFetchTerraNIHProfile, } from "../hooks/useAuthentication/useFetchTerraNIHProfile";
+import { useFetchTerraProfile, } from "../hooks/useAuthentication/useFetchTerraProfile";
+import { useFetchTerraTermsOfService, } from "../hooks/useAuthentication/useFetchTerraTermsOfService";
+import { useTokenClient } from "../hooks/useAuthentication/useTokenClient";
+import { useConfig } from "../hooks/useConfig";
+import { INACTIVITY_PARAM } from "../hooks/useSessionTimeout";
+// Template constants
+export const ROUTE_LOGIN = "/login";
+/**
+ * Auth context for storing and using auth-related state.
+ */
+export const AuthContext = createContext({
+    // eslint-disable-next-line @typescript-eslint/no-empty-function -- allow dummy function for default state.
+    authenticateUser: () => { },
+    authenticationStatus: AUTHENTICATION_STATUS.INCOMPLETE,
+    isAuthenticated: false,
+    isEnabled: false,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function -- allow dummy function for default state.
+    requestAuthentication: () => { },
+    terraNIHProfileLoginStatus: LOGIN_STATUS_NOT_STARTED,
+    terraProfileLoginStatus: LOGIN_STATUS_NOT_STARTED,
+    terraTOSLoginStatus: LOGIN_STATUS_NOT_STARTED,
+    token: undefined,
+    userProfile: undefined,
+});
+/**
+ * Auth provider for consuming components to subscribe to changes in auth-related state.
+ * @param props - Component inputs.
+ * @param props.children - Set of children components that can possibly consume the query provider.
+ * @param props.sessionTimeout - If provided, will set the value for a session timeout (in milliseconds).
+ * @returns Provider element to be used by consumers to both update authentication state and subscribe to changes in authentication state.
+ */
+export function AuthProvider({ children, sessionTimeout }) {
+    const { config } = useConfig();
+    const { authentication, redirectRootToPath } = config;
+    const { basePath } = useRouter();
+    const { token, tokenClient } = useTokenClient();
+    const terraNIHProfileLoginStatus = useFetchTerraNIHProfile(token);
+    const terraProfileLoginStatus = useFetchTerraProfile(token);
+    const terraTOSLoginStatus = useFetchTerraTermsOfService(token);
+    const userProfileLoginStatus = useFetchGoogleProfile(token);
+    const isEnabled = Boolean(authentication);
+    const isAuthenticated = userProfileLoginStatus.isSuccess;
+    const releaseToken = shouldReleaseToken(userProfileLoginStatus, terraProfileLoginStatus, terraTOSLoginStatus);
+    const authenticationStatus = useAuthenticationStatus(userProfileLoginStatus, terraProfileLoginStatus, terraTOSLoginStatus, terraNIHProfileLoginStatus);
+    // Handle completion of authentication process.
+    useAuthenticationComplete(authenticationStatus);
+    /**
+     * If sessionTimeout is set and user is authenticated, the app will reload and redirect to
+     * origin, including base path, root path, and query param.
+     */
+    useIdleTimer({
+        onIdle: () => isAuthenticated &&
+            sessionTimeout &&
+            (window.location.href =
+                window.location.origin +
+                    basePath +
+                    redirectRootToPath +
+                    "?" +
+                    `${INACTIVITY_PARAM}=true`),
+        timeout: sessionTimeout,
+    });
+    /**
+     * Requests access token and authenticates user.
+     */
+    const authenticateUser = useCallback(() => {
+        tokenClient.requestAccessToken();
+    }, [tokenClient]);
+    /**
+     * Navigates to login page.
+     */
+    const requestAuthentication = useCallback(() => {
+        Router.push(ROUTE_LOGIN);
+    }, []);
+    return (React.createElement(AuthContext.Provider, { value: {
+            authenticateUser,
+            authenticationStatus,
+            isAuthenticated,
+            isEnabled,
+            requestAuthentication,
+            terraNIHProfileLoginStatus,
+            terraProfileLoginStatus,
+            terraTOSLoginStatus,
+            token: releaseToken ? token : undefined,
+            userProfile: userProfileLoginStatus.response,
+        } }, children));
+}
+/**
+ * Token is released for the following conditions:
+ * - Terra endpoint is configured and the terms of service response is successful, or
+ * - Terra endpoint is not configured and the user profile response is successful.
+ * @param userProfileLoginStatus - User profile login status.
+ * @param terraProfileLoginStatus - Terra profile login status.
+ * @param terraTOSLoginStatus - Terra terms of service login status.
+ * @returns true if the token should be released.
+ */
+export function shouldReleaseToken(userProfileLoginStatus, terraProfileLoginStatus, terraTOSLoginStatus) {
+    if (terraProfileLoginStatus.isSupported) {
+        return terraTOSLoginStatus.isSuccess;
+    }
+    return userProfileLoginStatus.isSuccess;
+}

package/lib/providers/layoutState.d.ts

@@ -0,0 +1,40 @@
+import React, { Dispatch, ReactNode } from "react";
+export declare const DEFAULT_LAYOUT_STATE: {
+    headerHeight: number;
+};
+/**
+ * Layout state.
+ */
+export type LayoutState = {
+    headerHeight: number;
+};
+/**
+ * Model of layout state context.
+ */
+export type LayoutStateContextProps = {
+    layoutDispatch: Dispatch<LayoutAction>;
+    layoutState: LayoutState;
+};
+export declare const LayoutStateContext: React.Context<LayoutStateContextProps>;
+export interface LayoutStateProps {
+    children: ReactNode | ReactNode[];
+}
+export declare function LayoutStateProvider({ children, }: LayoutStateProps): JSX.Element;
+/**
+ * Layout action kind.
+ */
+export declare enum LayoutActionKind {
+    UpdateHeaderHeight = "UPDATE_HEADER_HEIGHT"
+}
+/**
+ * Layout action.
+ */
+export type LayoutAction = UpdateHeaderHeightAction;
+/**
+ * Update header height action.
+ */
+type UpdateHeaderHeightAction = {
+    payload?: number;
+    type: LayoutActionKind.UpdateHeaderHeight;
+};
+export {};

package/lib/providers/layoutState.js

@@ -0,0 +1,47 @@
+import React, { createContext, useReducer } from "react";
+import { HEADER_HEIGHT } from "../components/Layout/components/Header/common/constants";
+// Default layout state.
+export const DEFAULT_LAYOUT_STATE = {
+    headerHeight: HEADER_HEIGHT + 1, // 1px for bottom border.
+};
+export const LayoutStateContext = createContext({
+    // eslint-disable-next-line @typescript-eslint/no-empty-function -- allow dummy function for default state.
+    layoutDispatch: () => { },
+    layoutState: DEFAULT_LAYOUT_STATE,
+});
+export function LayoutStateProvider({ children, }) {
+    // Layout state.
+    const [layoutState, layoutDispatch] = useReducer((s, a) => layoutReducer(s, a), DEFAULT_LAYOUT_STATE);
+    return (React.createElement(LayoutStateContext.Provider, { value: {
+            layoutDispatch,
+            layoutState,
+        } }, children));
+}
+/**
+ * Layout action kind.
+ */
+export var LayoutActionKind;
+(function (LayoutActionKind) {
+    LayoutActionKind["UpdateHeaderHeight"] = "UPDATE_HEADER_HEIGHT";
+})(LayoutActionKind || (LayoutActionKind = {}));
+/**
+ * Layout reducer.
+ * @param state - Layout state.
+ * @param action - Layout action.
+ * @returns layout state.
+ */
+function layoutReducer(state, action) {
+    const { payload, type } = action;
+    // eslint-disable-next-line sonarjs/no-small-switch -- allow small switch.
+    switch (type) {
+        // Updates header height.
+        case LayoutActionKind.UpdateHeaderHeight: {
+            return {
+                ...state,
+                headerHeight: payload ?? state.headerHeight,
+            };
+        }
+        default:
+            return state;
+    }
+}

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

@@ -0,0 +1,25 @@
+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"];
+export declare const alertMain: ({ theme }: ThemeProps) => PaletteColor["main"];
+export declare const errorMain: ({ theme }: ThemeProps) => PaletteColor["main"];
+export declare const infoLight: ({ theme }: ThemeProps) => PaletteColor["light"];
+export declare const infoLightest: ({ theme }: ThemeProps) => PaletteColor["lightest"];
+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"];
+export declare const smokeLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
+export declare const smokeMain: ({ theme }: ThemeProps) => PaletteColor["main"];
+export declare const successLight: ({ theme }: ThemeProps) => PaletteColor["light"];
+export declare const successLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
+export declare const successMain: ({ theme }: ThemeProps) => PaletteColor["main"];
+export declare const warningLight: ({ theme }: ThemeProps) => PaletteColor["light"];
+export declare const warningLightest: ({ theme, }: ThemeProps) => PaletteColor["lightest"];
+export declare const warningMain: ({ theme }: ThemeProps) => PaletteColor["main"];
+export declare const white: ({ theme }: ThemeProps) => CommonColors["white"];

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

@@ -0,0 +1,32 @@
+// Alert
+export const alertLight = ({ theme }) => theme.palette.alert.light;
+export const alertLightest = ({ theme, }) => theme.palette.alert.lightest;
+export const alertMain = ({ theme }) => theme.palette.alert.main;
+// Error
+export const errorMain = ({ theme }) => theme.palette.error.main;
+// Info
+export const infoLight = ({ theme }) => theme.palette.info.light;
+export const infoLightest = ({ theme }) => theme.palette.info.lightest;
+export const infoMain = ({ theme }) => theme.palette.info.main;
+// Ink
+export const inkLight = ({ theme }) => theme.palette.ink.light;
+export const inkMain = ({ theme }) => theme.palette.ink.main;
+// Primary
+export const primaryDark = ({ theme }) => theme.palette.primary.dark;
+export const primaryLightest = ({ theme, }) => theme.palette.primary.lightest;
+export const primaryMain = ({ theme }) => theme.palette.primary.main;
+// Smoke
+export const smokeDark = ({ theme }) => theme.palette.smoke.dark;
+export const smokeLight = ({ theme }) => theme.palette.smoke.light;
+export const smokeLightest = ({ theme, }) => theme.palette.smoke.lightest;
+export const smokeMain = ({ theme }) => theme.palette.smoke.main;
+// Success
+export const successLight = ({ theme }) => theme.palette.success.light;
+export const successLightest = ({ theme, }) => theme.palette.success.lightest;
+export const successMain = ({ theme }) => theme.palette.success.main;
+// Warning
+export const warningLight = ({ theme }) => theme.palette.warning.light;
+export const warningLightest = ({ theme, }) => theme.palette.warning.lightest;
+export const warningMain = ({ theme }) => theme.palette.warning.main;
+// White
+export const white = ({ theme }) => theme.palette.common.white;

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

@@ -0,0 +1,16 @@
+import { SerializedStyles } from "@emotion/react";
+export declare const textBody400: (props: any) => SerializedStyles;
+export declare const textBody4002Lines: (props: any) => SerializedStyles;
+export declare const textBody500: (props: any) => SerializedStyles;
+export declare const textBody5002Lines: (props: any) => SerializedStyles;
+export declare const textBodyLarge400: (props: any) => SerializedStyles;
+export declare const textBodyLarge4002Lines: (props: any) => SerializedStyles;
+export declare const textBodyLarge500: (props: any) => SerializedStyles;
+export declare const textBodySmall400: (props: any) => SerializedStyles;
+export declare const textBodySmall4002Lines: (props: any) => SerializedStyles;
+export declare const textBodySmall500: (props: any) => SerializedStyles;
+export declare const textHeading: (props: any) => SerializedStyles;
+export declare const textHeadingLarge: (props: any) => SerializedStyles;
+export declare const textHeadingSmall: (props: any) => SerializedStyles;
+export declare const textHeadingXLarge: (props: any) => SerializedStyles;
+export declare const textUppercase500: (props: any) => SerializedStyles;

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

@@ -0,0 +1,30 @@
+import { css } from "@emotion/react";
+import { TEXT_BODY_400, TEXT_BODY_400_2_LINES, TEXT_BODY_500, TEXT_BODY_500_2_LINES, TEXT_BODY_LARGE_400, TEXT_BODY_LARGE_400_2_LINES, TEXT_BODY_LARGE_500, TEXT_BODY_SMALL_400, TEXT_BODY_SMALL_400_2_LINES, TEXT_BODY_SMALL_500, TEXT_HEADING, TEXT_HEADING_LARGE, TEXT_HEADING_SMALL, TEXT_HEADING_XLARGE, TEXT_UPPERCASE_500, } from "../../../theme/common/typography";
+/**
+ * Returns typography style for the specified typography variant.
+ * @param TYPOGRAPHY - Typography variant name.
+ * @returns typography styles for the variant.
+ */
+function typographyToCSS(TYPOGRAPHY) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- TODO revisit any.
+    return (props) => {
+        return css `
+      ${props.theme.typography[TYPOGRAPHY]}
+    `;
+    };
+}
+export const textBody400 = typographyToCSS(TEXT_BODY_400);
+export const textBody4002Lines = typographyToCSS(TEXT_BODY_400_2_LINES);
+export const textBody500 = typographyToCSS(TEXT_BODY_500);
+export const textBody5002Lines = typographyToCSS(TEXT_BODY_500_2_LINES);
+export const textBodyLarge400 = typographyToCSS(TEXT_BODY_LARGE_400);
+export const textBodyLarge4002Lines = typographyToCSS(TEXT_BODY_LARGE_400_2_LINES);
+export const textBodyLarge500 = typographyToCSS(TEXT_BODY_LARGE_500);
+export const textBodySmall400 = typographyToCSS(TEXT_BODY_SMALL_400);
+export const textBodySmall4002Lines = typographyToCSS(TEXT_BODY_SMALL_400_2_LINES);
+export const textBodySmall500 = typographyToCSS(TEXT_BODY_SMALL_500);
+export const textHeading = typographyToCSS(TEXT_HEADING);
+export const textHeadingLarge = typographyToCSS(TEXT_HEADING_LARGE);
+export const textHeadingSmall = typographyToCSS(TEXT_HEADING_SMALL);
+export const textHeadingXLarge = typographyToCSS(TEXT_HEADING_XLARGE);
+export const textUppercase500 = typographyToCSS(TEXT_UPPERCASE_500);

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

@@ -0,0 +1,3 @@
+import { ThemeProps } from "../../../theme/theme";
+export declare const shadows01: ({ theme }: ThemeProps) => string;
+export declare const shadows02: ({ theme }: ThemeProps) => string;

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

@@ -0,0 +1,4 @@
+// Elevation 01
+export const shadows01 = ({ theme }) => theme.shadows[1];
+// Elevation 02
+export const shadows02 = ({ theme }) => theme.shadows[2];

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

@@ -0,0 +1,47 @@
+export declare const PALETTE: {
+    readonly ALERT_LIGHT: "var(--mui-palette-alert-light)";
+    readonly ALERT_LIGHTEST: "var(--mui-palette-alert-lightest)";
+    readonly ALERT_MAIN: "var(--mui-palette-alert-main)";
+    readonly BACKGROUND_DEFAULT: "var(--mui-palette-background-default)";
+    readonly BACKGROUND_PAPER: "var(--mui-palette-background-paper)";
+    readonly COMMON_BACKGROUND: "var(--mui-palette-common-background)";
+    readonly COMMON_BLACK: "var(--mui-palette-common-black)";
+    readonly COMMON_WHITE: "var(--mui-palette-common-white)";
+    readonly ERROR_CONTRAST_TEXT: "var(--mui-palette-error-contrastText)";
+    readonly ERROR_DARK: "var(--mui-palette-error-dark)";
+    readonly ERROR_LIGHT: "var(--mui-palette-error-light)";
+    readonly ERROR_MAIN: "var(--mui-palette-error-main)";
+    readonly INFO_CONTRAST_TEXT: "var(--mui-palette-info-contrastText)";
+    readonly INFO_DARK: "var(--mui-palette-info-dark)";
+    readonly INFO_LIGHT: "var(--mui-palette-info-light)";
+    readonly INFO_LIGHTEST: "var(--mui-palette-info-lightest)";
+    readonly INFO_MAIN: "var(--mui-palette-info-main)";
+    readonly INK_LIGHT: "var(--mui-palette-ink-light)";
+    readonly INK_MAIN: "var(--mui-palette-ink-main)";
+    readonly PRIMARY_CONTRAST_TEXT: "var(--mui-palette-primary-contrastText)";
+    readonly PRIMARY_DARK: "var(--mui-palette-primary-dark)";
+    readonly PRIMARY_LIGHT: "var(--mui-palette-primary-light)";
+    readonly PRIMARY_LIGHTEST: "var(--mui-palette-primary-lightest)";
+    readonly PRIMARY_MAIN: "var(--mui-palette-primary-main)";
+    readonly SECONDARY_CONTRAST_TEXT: "var(--mui-palette-secondary-contrastText)";
+    readonly SECONDARY_DARK: "var(--mui-palette-secondary-dark)";
+    readonly SECONDARY_LIGHT: "var(--mui-palette-secondary-light)";
+    readonly SECONDARY_MAIN: "var(--mui-palette-secondary-main)";
+    readonly SMOKE_DARK: "var(--mui-palette-smoke-dark)";
+    readonly SMOKE_LIGHT: "var(--mui-palette-smoke-light)";
+    readonly SMOKE_LIGHTEST: "var(--mui-palette-smoke-lightest)";
+    readonly SMOKE_MAIN: "var(--mui-palette-smoke-main)";
+    readonly SUCCESS_CONTRAST_TEXT: "var(--mui-palette-success-contrastText)";
+    readonly SUCCESS_DARK: "var(--mui-palette-success-dark)";
+    readonly SUCCESS_LIGHT: "var(--mui-palette-success-light)";
+    readonly SUCCESS_LIGHTEST: "var(--mui-palette-success-lightest)";
+    readonly SUCCESS_MAIN: "var(--mui-palette-success-main)";
+    readonly TEXT_DISABLED: "var(--mui-palette-text-disabled)";
+    readonly TEXT_PRIMARY: "var(--mui-palette-text-primary)";
+    readonly TEXT_SECONDARY: "var(--mui-palette-text-secondary)";
+    readonly WARNING_CONTRAST_TEXT: "var(--mui-palette-warning-contrastText)";
+    readonly WARNING_DARK: "var(--mui-palette-warning-dark)";
+    readonly WARNING_LIGHT: "var(--mui-palette-warning-light)";
+    readonly WARNING_LIGHTEST: "var(--mui-palette-warning-lightest)";
+    readonly WARNING_MAIN: "var(--mui-palette-warning-main)";
+};

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

@@ -0,0 +1,47 @@
+export const PALETTE = {
+    ALERT_LIGHT: `var(--mui-palette-alert-light)`,
+    ALERT_LIGHTEST: `var(--mui-palette-alert-lightest)`,
+    ALERT_MAIN: `var(--mui-palette-alert-main)`,
+    BACKGROUND_DEFAULT: `var(--mui-palette-background-default)`,
+    BACKGROUND_PAPER: `var(--mui-palette-background-paper)`,
+    COMMON_BACKGROUND: `var(--mui-palette-common-background)`,
+    COMMON_BLACK: `var(--mui-palette-common-black)`,
+    COMMON_WHITE: `var(--mui-palette-common-white)`,
+    ERROR_CONTRAST_TEXT: `var(--mui-palette-error-contrastText)`,
+    ERROR_DARK: `var(--mui-palette-error-dark)`,
+    ERROR_LIGHT: `var(--mui-palette-error-light)`,
+    ERROR_MAIN: `var(--mui-palette-error-main)`,
+    INFO_CONTRAST_TEXT: `var(--mui-palette-info-contrastText)`,
+    INFO_DARK: `var(--mui-palette-info-dark)`,
+    INFO_LIGHT: `var(--mui-palette-info-light)`,
+    INFO_LIGHTEST: `var(--mui-palette-info-lightest)`,
+    INFO_MAIN: `var(--mui-palette-info-main)`,
+    INK_LIGHT: `var(--mui-palette-ink-light)`,
+    INK_MAIN: `var(--mui-palette-ink-main)`,
+    PRIMARY_CONTRAST_TEXT: `var(--mui-palette-primary-contrastText)`,
+    PRIMARY_DARK: `var(--mui-palette-primary-dark)`,
+    PRIMARY_LIGHT: `var(--mui-palette-primary-light)`,
+    PRIMARY_LIGHTEST: `var(--mui-palette-primary-lightest)`,
+    PRIMARY_MAIN: `var(--mui-palette-primary-main)`,
+    SECONDARY_CONTRAST_TEXT: `var(--mui-palette-secondary-contrastText)`,
+    SECONDARY_DARK: `var(--mui-palette-secondary-dark)`,
+    SECONDARY_LIGHT: `var(--mui-palette-secondary-light)`,
+    SECONDARY_MAIN: `var(--mui-palette-secondary-main)`,
+    SMOKE_DARK: `var(--mui-palette-smoke-dark)`,
+    SMOKE_LIGHT: `var(--mui-palette-smoke-light)`,
+    SMOKE_LIGHTEST: `var(--mui-palette-smoke-lightest)`,
+    SMOKE_MAIN: `var(--mui-palette-smoke-main)`,
+    SUCCESS_CONTRAST_TEXT: `var(--mui-palette-success-contrastText)`,
+    SUCCESS_DARK: `var(--mui-palette-success-dark)`,
+    SUCCESS_LIGHT: `var(--mui-palette-success-light)`,
+    SUCCESS_LIGHTEST: `var(--mui-palette-success-lightest)`,
+    SUCCESS_MAIN: `var(--mui-palette-success-main)`,
+    TEXT_DISABLED: `var(--mui-palette-text-disabled)`,
+    TEXT_PRIMARY: `var(--mui-palette-text-primary)`,
+    TEXT_SECONDARY: `var(--mui-palette-text-secondary)`,
+    WARNING_CONTRAST_TEXT: `var(--mui-palette-warning-contrastText)`,
+    WARNING_DARK: `var(--mui-palette-warning-dark)`,
+    WARNING_LIGHT: `var(--mui-palette-warning-light)`,
+    WARNING_LIGHTEST: `var(--mui-palette-warning-lightest)`,
+    WARNING_MAIN: `var(--mui-palette-warning-main)`,
+};

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

@@ -0,0 +1,6 @@
+export interface BaseComponentProps {
+    className?: string;
+}
+export interface TrackingComponentProps {
+    trackingId?: string;
+}

package/lib/theme/common/entities.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "46.1.2",
+  "version": "47.0.2",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",
@@ -25,8 +25,7 @@
     "@commitlint/cli": "^17.4.2",
     "@commitlint/config-conventional": "^17.4.2",
     "@emotion/jest": "^11.13.0",
-    "@mui/types": "^7.4.0",
-    "@next/eslint-plugin-next": "^14.2.32",
+    "@next/eslint-plugin-next": "^14.2.33",
     "@storybook/addon-actions": "^8.6.4",
     "@storybook/addon-essentials": "^8.6.4",
     "@storybook/addon-interactions": "^8.6.4",
@@ -43,10 +42,10 @@
     "@types/react-dom": "^18.3.0",
     "@types/react-gtm-module": "^2.0.1",
     "@types/react-window": "^1.8.5",
-    "@types/uuid": "8.3.4",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@types/uuid": "^8.3.4",
+    "@typescript-eslint/eslint-plugin": "^8.49.0",
     "eslint": "^8.33.0",
-    "eslint-config-next": "^14.2.32",
+    "eslint-config-next": "^14.2.33",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-jsdoc": "^48.1.0",
@@ -75,19 +74,19 @@
     "@tanstack/match-sorter-utils": "^8.19.4",
     "@tanstack/react-table": "^8.19.2",
     "@tanstack/react-virtual": "^3.13.12",
-    "copy-to-clipboard": "3.3.1",
+    "copy-to-clipboard": "^3.3.1",
     "gray-matter": "^4.0.3",
     "isomorphic-dompurify": "^2.22.0",
     "ky": "^1.7.2",
-    "next": "^14.2.32",
-    "next-auth": "4.24.11",
+    "next": "^14.2.33",
+    "next-auth": "^4.24.13",
     "next-mdx-remote": "^4.4.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
-    "react-gtm-module": "2.0.11",
+    "react-gtm-module": "^2.0.11",
     "react-idle-timer": "^5.7.2",
-    "react-window": "1.8.9",
+    "react-window": "^1.8.9",
     "rehype-raw": "^7.0.0",
     "rehype-react": "^7.2.0",
     "rehype-sanitize": "^5.0.1",
@@ -96,10 +95,13 @@
     "remark-rehype": "^10.1.0",
     "slugify": "^1.6.6",
     "unified": "^10.1.2",
-    "uuid": "8.3.2",
+    "uuid": "^8.3.2",
     "yup": "^1.6.1"
   },
+  "overrides": {
+    "glob": "^11.0.4"
+  },
   "engines": {
-    "node": "20.10.0"
+    "node": "22.12.0"
   }
 }

package/src/common/utils.ts

@@ -6,7 +6,7 @@
 export function isValidUrl(testUrl: string): boolean {
   try {
     return Boolean(new URL(testUrl));
-  } catch (e) {
+  } catch {
     return false;
   }
 }

package/src/components/Links/components/Link/components/ExploreViewLink/exploreViewLink.tsx

@@ -132,7 +132,7 @@ function isValidJsonString(query: string): boolean {
   try {
     JSON.parse(query);
     return true;
-  } catch (e) {
+  } catch {
     return false;
   }
 }

package/src/components/Redirect/redirect.tsx

@@ -13,7 +13,11 @@ export const Redirect = ({
   const router = useRouter();
 
   useEffect(() => {
-    replace ? router.replace(destination) : router.push(destination);
+    if (replace) {
+      router.replace(destination);
+    } else {
+      router.push(destination);
+    }
   }, [destination, replace, router]);
 
   return <></>;

package/src/components/common/ToggleButtonGroup/toggleButtonGroup.tsx

@@ -60,7 +60,7 @@ export const ToggleButtonGroup = ({
   ): void => {
     if (newToggleValue) {
       setToggleValue(newToggleValue);
-      onToggleFn && onToggleFn();
+      if (onToggleFn) onToggleFn();
     }
   };
 

package/src/hooks/useFileLocation.ts

@@ -31,7 +31,7 @@ export function buildFetchFileUrl(url?: string): string | undefined {
       "/fetch/"
     );
     return urlObj.href;
-  } catch (e) {
+  } catch {
     throw new Error(`Invalid file URL: ${url}`);
   }
 }

package/types/data-explorer-ui.d.ts

@@ -245,7 +245,7 @@ declare module "@emotion/react" {
 }
 
 declare module "@tanstack/react-table" {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TData and TValue are unused variables.
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/no-unused-vars -- TData and TValue are unused generic parameters for interface extension.
   interface Column<TData extends RowData, TValue> extends CustomFeatureColumn {}
 
   // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TData and TValue are unused variables.
@@ -263,13 +263,13 @@ declare module "@tanstack/react-table" {
     width?: GridTrackSize;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface -- empty interface is needed for extending.
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type -- empty interface is needed for extending.
   interface InitialTableState extends CustomFeatureInitialTableState {}
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface, @typescript-eslint/no-unused-vars -- empty interface is needed for extending, TData is an unused variable.
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type, @typescript-eslint/no-unused-vars -- empty interface is needed for extending, TData is an unused variable.
   interface Row<TData extends RowData> extends CustomFeatureRow {}
 
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TData is an unused variables.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- TData is an unused variable.
   interface SortingOptions<TData extends RowData> {
     /**
      * When false, sorting can still be applied programmatically (e.g., `getSortedRowModel`),
@@ -278,13 +278,14 @@ declare module "@tanstack/react-table" {
     enableSortingInteraction?: boolean;
   }
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface -- empty interface is needed for extending.
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type -- empty interface is needed for extending.
   interface Table<TData extends RowData> extends CustomFeatureInstance<TData> {}
 
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type -- empty interface is needed for extending.
   interface TableOptionsResolved<TData extends RowData>
     extends CustomFeatureOptions<TData> {}
 
-  // eslint-disable-next-line @typescript-eslint/no-empty-interface -- empty interface is needed for extending.
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type -- empty interface is needed for extending.
   interface TableState extends CustomFeatureTableState {}
 }