@openedx/frontend-base 1.0.0-alpha.4 → 1.0.0-alpha.40

package/dist/runtime/react/hooks/theme/useTheme.js

@@ -0,0 +1,153 @@
+import { useCallback, useEffect, useReducer, useState, } from 'react';
+import { SELECTED_THEME_VARIANT_KEY } from '../../constants';
+import { logError } from '../../../logging';
+import { themeActions, themeReducer } from '../../reducers';
+import { isEmptyObject } from './utils';
+import useThemeCore from './useThemeCore';
+import useThemeConfig from './useThemeConfig';
+import useThemeVariants from './useThemeVariants';
+/**
+* Finds the default theme variant from the given theme variants object. If no default theme exists, the light theme
+* variant is returned as a fallback.
+*
+* It prioritizes:
+*   1. A persisted theme variant from localStorage.
+*   2. A system preference (`prefers-color-scheme`).
+*   3. The configured default theme variant.
+*
+* Returns the default theme variant, or `undefined` if no valid theme variant is found.
+*/
+export const getDefaultThemeVariant = (themeVariants, themeDefaults = {}) => {
+    var _a, _b, _c, _d;
+    if (!themeVariants) {
+        return undefined;
+    }
+    const themeVariantKeys = Object.keys(themeVariants);
+    // If there is only one theme variant, return it since it's the only one that may be used.
+    if (themeVariantKeys.length === 1) {
+        const themeVariantKey = themeVariantKeys[0];
+        return {
+            name: themeVariantKey,
+            metadata: themeVariants[themeVariantKey],
+        };
+    }
+    // Prioritize persisted localStorage theme variant preference.
+    const persistedSelectedThemeVariant = localStorage.getItem(SELECTED_THEME_VARIANT_KEY);
+    if (persistedSelectedThemeVariant && themeVariants[persistedSelectedThemeVariant]) {
+        return {
+            name: persistedSelectedThemeVariant,
+            metadata: themeVariants[persistedSelectedThemeVariant],
+        };
+    }
+    // Then, detect system preference via `prefers-color-scheme` media query and use
+    // the default dark theme variant, if one exists.
+    const hasDarkSystemPreference = !!((_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-color-scheme: dark)')) === null || _b === void 0 ? void 0 : _b.matches);
+    const defaultDarkThemeVariant = (_c = themeDefaults.dark) !== null && _c !== void 0 ? _c : 'dark';
+    const darkThemeVariantMetadata = themeVariants[defaultDarkThemeVariant];
+    if (hasDarkSystemPreference && defaultDarkThemeVariant && darkThemeVariantMetadata) {
+        return {
+            name: defaultDarkThemeVariant,
+            metadata: darkThemeVariantMetadata,
+        };
+    }
+    const defaultLightThemeVariant = (_d = themeDefaults.light) !== null && _d !== void 0 ? _d : 'light';
+    const lightThemeVariantMetadata = themeVariants[defaultLightThemeVariant];
+    // Handle edge case where the default light theme variant is not configured or provided.
+    if (!lightThemeVariantMetadata) {
+        return undefined;
+    }
+    // Otherwise, fallback to using the default light theme variant as configured.
+    return {
+        name: defaultLightThemeVariant,
+        metadata: lightThemeVariantMetadata,
+    };
+};
+/**
+ * A custom React hook that manages the application's theme state and injects the appropriate CSS for the theme core
+ * and theme variants (e.g., light and dark modes) into the HTML document. It handles dynamically loading the theme
+ * CSS based on the current theme variant, and ensures that the theme variant's CSS is preloaded for runtime theme
+ * switching. This is done using "alternate" stylesheets. That is, the browser will download the CSS for the
+ * non-current theme variants with a lower priority than the current one.
+ *
+ * The hook also responds to system theme preference changes (e.g., via the `prefers-color-scheme` media query),
+ * and can automatically switch the theme based on the system's dark mode or light mode preference.
+ *
+ * * @example
+ * const [themeState, dispatch] = useTheme();
+ * console.log(themeState.isThemeLoaded); // true when the theme has been successfully loaded.
+ *
+ * // Dispatch an action to change the theme variant
+ * dispatch(themeActions.setThemeVariant('dark'));
+ */
+const useTheme = () => {
+    var _a;
+    const themeConfig = useThemeConfig();
+    const { core: themeCore, defaults: themeVariantDefaults, variants: themeVariants, } = themeConfig;
+    const initialThemeState = {
+        isThemeLoaded: false,
+        themeVariant: (_a = getDefaultThemeVariant(themeVariants, themeVariantDefaults)) === null || _a === void 0 ? void 0 : _a.name,
+    };
+    const [themeState, dispatch] = useReducer(themeReducer, initialThemeState);
+    const [isThemeCoreLoaded, setIsThemeCoreLoaded] = useState(false);
+    const onLoadThemeCore = useCallback(() => {
+        setIsThemeCoreLoaded(true);
+    }, []);
+    const [hasLoadedThemeVariants, setHasLoadedThemeVariants] = useState(false);
+    const onLoadThemeVariants = useCallback(() => {
+        setHasLoadedThemeVariants(true);
+    }, []);
+    // load the theme's core CSS
+    useThemeCore({
+        themeCore,
+        onComplete: onLoadThemeCore,
+    });
+    // respond to system preference changes with regard to `prefers-color-scheme: dark`.
+    const handleDarkModeSystemPreferenceChange = useCallback((prefersDarkMode) => {
+        // Ignore system preference change if the theme variant is already set in localStorage.
+        if (localStorage.getItem(SELECTED_THEME_VARIANT_KEY)) {
+            return;
+        }
+        if (prefersDarkMode && (themeVariantDefaults === null || themeVariantDefaults === void 0 ? void 0 : themeVariantDefaults.dark)) {
+            dispatch(themeActions.setThemeVariant(themeVariantDefaults.dark));
+        }
+        else if (!prefersDarkMode && (themeVariantDefaults === null || themeVariantDefaults === void 0 ? void 0 : themeVariantDefaults.light)) {
+            dispatch(themeActions.setThemeVariant(themeVariantDefaults.light));
+        }
+        else {
+            logError(`Could not set theme variant based on system preference (prefers dark mode: ${prefersDarkMode})`);
+        }
+    }, [themeVariantDefaults]);
+    // load the theme variant(s) CSS
+    useThemeVariants({
+        themeVariants,
+        onComplete: onLoadThemeVariants,
+        currentThemeVariant: themeState.themeVariant,
+        onDarkModeSystemPreferenceChange: handleDarkModeSystemPreferenceChange,
+    });
+    useEffect(() => {
+        // theme is already loaded, do nothing
+        if (themeState.isThemeLoaded) {
+            return;
+        }
+        const hasThemeConfig = ((themeCore === null || themeCore === void 0 ? void 0 : themeCore.url) && !isEmptyObject(themeVariants));
+        if (!hasThemeConfig) {
+            // no theme URLs to load, set loading to false.
+            dispatch(themeActions.setThemeLoaded(true));
+        }
+        // Return early if neither the core theme CSS nor any theme variant CSS is loaded.
+        if (!isThemeCoreLoaded || !hasLoadedThemeVariants) {
+            return;
+        }
+        // All application theme URLs are loaded
+        dispatch(themeActions.setThemeLoaded(true));
+    }, [
+        themeState.isThemeLoaded,
+        isThemeCoreLoaded,
+        hasLoadedThemeVariants,
+        themeCore === null || themeCore === void 0 ? void 0 : themeCore.url,
+        themeVariants,
+    ]);
+    return [themeState, dispatch];
+};
+export default useTheme;
+//# sourceMappingURL=useTheme.js.map

package/dist/runtime/react/hooks/theme/useTheme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTheme.js","sourceRoot":"","sources":["../../../../../runtime/react/hooks/theme/useTheme.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  useCallback, useEffect, useReducer, useState,\n} from 'react';\n\nimport { SELECTED_THEME_VARIANT_KEY } from '../../constants';\nimport { logError } from '../../../logging';\nimport { themeActions, themeReducer } from '../../reducers';\nimport { ThemeVariants, ThemeDefaults } from '../../../../types';\nimport { isEmptyObject } from './utils';\n\nimport useThemeCore from './useThemeCore';\nimport useThemeConfig from './useThemeConfig';\nimport useThemeVariants from './useThemeVariants';\n\n/**\n* Finds the default theme variant from the given theme variants object. If no default theme exists, the light theme\n* variant is returned as a fallback.\n*\n* It prioritizes:\n*   1. A persisted theme variant from localStorage.\n*   2. A system preference (`prefers-color-scheme`).\n*   3. The configured default theme variant.\n*\n* Returns the default theme variant, or `undefined` if no valid theme variant is found.\n*/\nexport const getDefaultThemeVariant = (themeVariants: ThemeVariants | undefined, themeDefaults: ThemeDefaults = {}) => {\n  if (!themeVariants) {\n    return undefined;\n  }\n\n  const themeVariantKeys = Object.keys(themeVariants);\n\n  // If there is only one theme variant, return it since it's the only one that may be used.\n  if (themeVariantKeys.length === 1) {\n    const themeVariantKey = themeVariantKeys[0];\n    return {\n      name: themeVariantKey,\n      metadata: themeVariants[themeVariantKey],\n    };\n  }\n\n  // Prioritize persisted localStorage theme variant preference.\n  const persistedSelectedThemeVariant = localStorage.getItem(SELECTED_THEME_VARIANT_KEY);\n  if (persistedSelectedThemeVariant && themeVariants[persistedSelectedThemeVariant]) {\n    return {\n      name: persistedSelectedThemeVariant,\n      metadata: themeVariants[persistedSelectedThemeVariant],\n    };\n  }\n\n  // Then, detect system preference via `prefers-color-scheme` media query and use\n  // the default dark theme variant, if one exists.\n  const hasDarkSystemPreference = !!window.matchMedia?.('(prefers-color-scheme: dark)')?.matches;\n  const defaultDarkThemeVariant = themeDefaults.dark ?? 'dark';\n  const darkThemeVariantMetadata = themeVariants[defaultDarkThemeVariant];\n\n  if (hasDarkSystemPreference && defaultDarkThemeVariant && darkThemeVariantMetadata) {\n    return {\n      name: defaultDarkThemeVariant,\n      metadata: darkThemeVariantMetadata,\n    };\n  }\n\n  const defaultLightThemeVariant = themeDefaults.light ?? 'light';\n  const lightThemeVariantMetadata = themeVariants[defaultLightThemeVariant];\n\n  // Handle edge case where the default light theme variant is not configured or provided.\n  if (!lightThemeVariantMetadata) {\n    return undefined;\n  }\n\n  // Otherwise, fallback to using the default light theme variant as configured.\n  return {\n    name: defaultLightThemeVariant,\n    metadata: lightThemeVariantMetadata,\n  };\n};\n\n/**\n * A custom React hook that manages the application's theme state and injects the appropriate CSS for the theme core\n * and theme variants (e.g., light and dark modes) into the HTML document. It handles dynamically loading the theme\n * CSS based on the current theme variant, and ensures that the theme variant's CSS is preloaded for runtime theme\n * switching. This is done using \"alternate\" stylesheets. That is, the browser will download the CSS for the\n * non-current theme variants with a lower priority than the current one.\n *\n * The hook also responds to system theme preference changes (e.g., via the `prefers-color-scheme` media query),\n * and can automatically switch the theme based on the system's dark mode or light mode preference.\n *\n * * @example\n * const [themeState, dispatch] = useTheme();\n * console.log(themeState.isThemeLoaded); // true when the theme has been successfully loaded.\n *\n * // Dispatch an action to change the theme variant\n * dispatch(themeActions.setThemeVariant('dark'));\n */\nconst useTheme = () => {\n  const themeConfig = useThemeConfig();\n  const {\n    core: themeCore,\n    defaults: themeVariantDefaults,\n    variants: themeVariants,\n  } = themeConfig;\n  const initialThemeState = {\n    isThemeLoaded: false,\n    themeVariant: getDefaultThemeVariant(themeVariants, themeVariantDefaults)?.name,\n  };\n  const [themeState, dispatch] = useReducer(themeReducer, initialThemeState);\n\n  const [isThemeCoreLoaded, setIsThemeCoreLoaded] = useState(false);\n  const onLoadThemeCore = useCallback(() => {\n    setIsThemeCoreLoaded(true);\n  }, []);\n\n  const [hasLoadedThemeVariants, setHasLoadedThemeVariants] = useState(false);\n  const onLoadThemeVariants = useCallback(() => {\n    setHasLoadedThemeVariants(true);\n  }, []);\n\n  // load the theme's core CSS\n  useThemeCore({\n    themeCore,\n    onComplete: onLoadThemeCore,\n  });\n\n  // respond to system preference changes with regard to `prefers-color-scheme: dark`.\n  const handleDarkModeSystemPreferenceChange = useCallback((prefersDarkMode: boolean) => {\n    // Ignore system preference change if the theme variant is already set in localStorage.\n    if (localStorage.getItem(SELECTED_THEME_VARIANT_KEY)) {\n      return;\n    }\n\n    if (prefersDarkMode && themeVariantDefaults?.dark) {\n      dispatch(themeActions.setThemeVariant(themeVariantDefaults.dark));\n    } else if (!prefersDarkMode && themeVariantDefaults?.light) {\n      dispatch(themeActions.setThemeVariant(themeVariantDefaults.light));\n    } else {\n      logError(`Could not set theme variant based on system preference (prefers dark mode: ${prefersDarkMode})`);\n    }\n  }, [themeVariantDefaults]);\n\n  // load the theme variant(s) CSS\n  useThemeVariants({\n    themeVariants,\n    onComplete: onLoadThemeVariants,\n    currentThemeVariant: themeState.themeVariant,\n    onDarkModeSystemPreferenceChange: handleDarkModeSystemPreferenceChange,\n  });\n\n  useEffect(() => {\n    // theme is already loaded, do nothing\n    if (themeState.isThemeLoaded) {\n      return;\n    }\n\n    const hasThemeConfig = (themeCore?.url && !isEmptyObject(themeVariants));\n    if (!hasThemeConfig) {\n      // no theme URLs to load, set loading to false.\n      dispatch(themeActions.setThemeLoaded(true));\n    }\n\n    // Return early if neither the core theme CSS nor any theme variant CSS is loaded.\n    if (!isThemeCoreLoaded || !hasLoadedThemeVariants) {\n      return;\n    }\n\n    // All application theme URLs are loaded\n    dispatch(themeActions.setThemeLoaded(true));\n  }, [\n    themeState.isThemeLoaded,\n    isThemeCoreLoaded,\n    hasLoadedThemeVariants,\n    themeCore?.url,\n    themeVariants,\n  ]);\n\n  return [themeState, dispatch];\n};\n\nexport default useTheme;\n"]}

package/dist/runtime/react/hooks/theme/useThemeConfig.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '../../../../types';
+/**
+ * Custom React hook that retrieves the theme configuration.
+ *
+ * Configuration is considered entirely invalid if it doesn't define at least one variant, including core.
+ *
+ * Example:
+ *
+ * const themeConfig = useThemeConfig();
+ * if (themeConfig) {
+ *   console.log(themeConfig.core.url); // Outputs the URL of theme's core CSS
+ *   console.log(themeConfig.variants['dark'].url); // Outputs the URL of the theme's dark variant CSS
+ * }
+ */
+declare const useThemeConfig: () => Theme;
+export default useThemeConfig;

package/dist/runtime/react/hooks/theme/useThemeConfig.js

@@ -0,0 +1,29 @@
+import { useMemo } from 'react';
+import { getSiteConfig } from '../../../config';
+import { isEmptyObject } from './utils';
+/**
+ * Custom React hook that retrieves the theme configuration.
+ *
+ * Configuration is considered entirely invalid if it doesn't define at least one variant, including core.
+ *
+ * Example:
+ *
+ * const themeConfig = useThemeConfig();
+ * if (themeConfig) {
+ *   console.log(themeConfig.core.url); // Outputs the URL of theme's core CSS
+ *   console.log(themeConfig.variants['dark'].url); // Outputs the URL of the theme's dark variant CSS
+ * }
+ */
+const useThemeConfig = () => useMemo(() => {
+    const { theme } = getSiteConfig();
+    if (!theme || (isEmptyObject(theme.core) && isEmptyObject(theme.variants))) {
+        return {};
+    }
+    return {
+        core: theme.core,
+        defaults: theme.defaults,
+        variants: theme.variants,
+    };
+}, []);
+export default useThemeConfig;
+//# sourceMappingURL=useThemeConfig.js.map

package/dist/runtime/react/hooks/theme/useThemeConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeConfig.js","sourceRoot":"","sources":["../../../../../runtime/react/hooks/theme/useThemeConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGhC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC;;;;;;;;;;;;GAYG;AACH,MAAM,cAAc,GAAG,GAAU,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE;IAC/C,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,EAAE,CAAC;IAElC,IAAI,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC;QAC3E,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,OAAO;QACL,IAAI,EAAE,KAAK,CAAC,IAAI;QAChB,QAAQ,EAAE,KAAK,CAAC,QAAQ;QACxB,QAAQ,EAAE,KAAK,CAAC,QAAQ;KACzB,CAAC;AACJ,CAAC,EAAE,EAAE,CAAC,CAAC;AAEP,eAAe,cAAc,CAAC","sourcesContent":["import { useMemo } from 'react';\n\nimport { Theme } from '../../../../types';\nimport { getSiteConfig } from '../../../config';\nimport { isEmptyObject } from './utils';\n\n/**\n * Custom React hook that retrieves the theme configuration.\n *\n * Configuration is considered entirely invalid if it doesn't define at least one variant, including core.\n *\n * Example:\n *\n * const themeConfig = useThemeConfig();\n * if (themeConfig) {\n *   console.log(themeConfig.core.url); // Outputs the URL of theme's core CSS\n *   console.log(themeConfig.variants['dark'].url); // Outputs the URL of the theme's dark variant CSS\n * }\n */\nconst useThemeConfig = (): Theme => useMemo(() => {\n  const { theme } = getSiteConfig();\n\n  if (!theme || (isEmptyObject(theme.core) && isEmptyObject(theme.variants))) {\n    return {};\n  }\n\n  return {\n    core: theme.core,\n    defaults: theme.defaults,\n    variants: theme.variants,\n  };\n}, []);\n\nexport default useThemeConfig;\n"]}

package/dist/runtime/react/hooks/theme/useThemeCore.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Custom React hook that manages the loading and updating of a theme's core
+ * CSS, ensuring the theme's core CSS is added to the document `<head>` as a
+ * `<link>` element.
+ */
+declare const useThemeCore: ({ themeCore, onComplete, }: {
+    themeCore: any;
+    onComplete: any;
+}) => void;
+export default useThemeCore;

package/dist/runtime/react/hooks/theme/useThemeCore.js

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import { logError } from '../../../logging';
+import { removeExistingLinks } from './utils';
+/**
+ * Custom React hook that manages the loading and updating of a theme's core
+ * CSS, ensuring the theme's core CSS is added to the document `<head>` as a
+ * `<link>` element.
+ */
+const useThemeCore = ({ themeCore, onComplete, }) => {
+    const [isThemeCoreComplete, setIsThemeCoreComplete] = useState(false);
+    useEffect(() => {
+        if (isThemeCoreComplete) {
+            onComplete();
+        }
+    }, [isThemeCoreComplete, onComplete]);
+    useEffect(() => {
+        // If there is no theme core config, do nothing.
+        if (!(themeCore === null || themeCore === void 0 ? void 0 : themeCore.url)) {
+            setIsThemeCoreComplete(true);
+            return;
+        }
+        const themeCoreLink = document.createElement('link');
+        themeCoreLink.href = themeCore.url;
+        themeCoreLink.rel = 'stylesheet';
+        themeCoreLink.dataset.themeCore = 'true';
+        themeCoreLink.onload = () => {
+            setIsThemeCoreComplete(true);
+        };
+        themeCoreLink.onerror = () => {
+            setIsThemeCoreComplete(true);
+            const otherExistingLinks = document.head.querySelectorAll('link[data-theme-core="true"]');
+            removeExistingLinks(otherExistingLinks);
+            logError(`Failed to load core theme CSS from ${themeCore.url}. Aborting.`);
+            return;
+        };
+        document.head.insertAdjacentElement('beforeend', themeCoreLink);
+    }, [themeCore === null || themeCore === void 0 ? void 0 : themeCore.url, onComplete]);
+};
+export default useThemeCore;
+//# sourceMappingURL=useThemeCore.js.map

package/dist/runtime/react/hooks/theme/useThemeCore.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeCore.js","sourceRoot":"","sources":["../../../../../runtime/react/hooks/theme/useThemeCore.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAE9C;;;;GAIG;AACH,MAAM,YAAY,GAAG,CAAC,EACpB,SAAS,EACT,UAAU,GACX,EAAE,EAAE;IACH,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,mBAAmB,EAAE,CAAC;YACxB,UAAU,EAAE,CAAC;QACf,CAAC;IACH,CAAC,EAAE,CAAC,mBAAmB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEtC,SAAS,CAAC,GAAG,EAAE;QACb,gDAAgD;QAChD,IAAI,CAAC,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,CAAA,EAAE,CAAC;YACpB,sBAAsB,CAAC,IAAI,CAAC,CAAC;YAC7B,OAAO;QACT,CAAC;QAED,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QACrD,aAAa,CAAC,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC;QACnC,aAAa,CAAC,GAAG,GAAG,YAAY,CAAC;QACjC,aAAa,CAAC,OAAO,CAAC,SAAS,GAAG,MAAM,CAAC;QACzC,aAAa,CAAC,MAAM,GAAG,GAAG,EAAE;YAC1B,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAC/B,CAAC,CAAC;QACF,aAAa,CAAC,OAAO,GAAG,GAAG,EAAE;YAC3B,sBAAsB,CAAC,IAAI,CAAC,CAAC;YAC7B,MAAM,kBAAkB,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,8BAA8B,CAAC,CAAC;YAC1F,mBAAmB,CAAC,kBAAkB,CAAC,CAAC;YACxC,QAAQ,CAAC,sCAAsC,SAAS,CAAC,GAAG,aAAa,CAAC,CAAC;YAC3E,OAAO;QACT,CAAC,CAAC;QAEF,QAAQ,CAAC,IAAI,CAAC,qBAAqB,CACjC,WAAW,EACX,aAAa,CACd,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;AACnC,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { logError } from '../../../logging';\nimport { removeExistingLinks } from './utils';\n\n/**\n * Custom React hook that manages the loading and updating of a theme's core\n * CSS, ensuring the theme's core CSS is added to the document `<head>` as a\n * `<link>` element.\n */\nconst useThemeCore = ({\n  themeCore,\n  onComplete,\n}) => {\n  const [isThemeCoreComplete, setIsThemeCoreComplete] = useState(false);\n\n  useEffect(() => {\n    if (isThemeCoreComplete) {\n      onComplete();\n    }\n  }, [isThemeCoreComplete, onComplete]);\n\n  useEffect(() => {\n    // If there is no theme core config, do nothing.\n    if (!themeCore?.url) {\n      setIsThemeCoreComplete(true);\n      return;\n    }\n\n    const themeCoreLink = document.createElement('link');\n    themeCoreLink.href = themeCore.url;\n    themeCoreLink.rel = 'stylesheet';\n    themeCoreLink.dataset.themeCore = 'true';\n    themeCoreLink.onload = () => {\n      setIsThemeCoreComplete(true);\n    };\n    themeCoreLink.onerror = () => {\n      setIsThemeCoreComplete(true);\n      const otherExistingLinks = document.head.querySelectorAll('link[data-theme-core=\"true\"]');\n      removeExistingLinks(otherExistingLinks);\n      logError(`Failed to load core theme CSS from ${themeCore.url}. Aborting.`);\n      return;\n    };\n\n    document.head.insertAdjacentElement(\n      'beforeend',\n      themeCoreLink,\n    );\n  }, [themeCore?.url, onComplete]);\n};\n\nexport default useThemeCore;\n"]}

package/dist/runtime/react/hooks/theme/useThemeVariants.d.ts

@@ -0,0 +1,17 @@
+import { ThemeVariants } from '../../../../types';
+/**
+ * A custom React hook that manages the loading of theme variant CSS files dynamically.
+ * Adds/updates a `<link>` element in the HTML document to load each theme variant's CSS, setting the
+ * non-current theme variants as "alternate" stylesheets. That is, the browser will download
+ * the CSS for the non-current theme variants, but at a lower priority than the current one.
+ * This ensures that if the theme variant is changed at runtime, the new theme's CSS will already be loaded.
+ *
+ * The hook also listens for changes in the system's preference and triggers the provided callback accordingly.
+ */
+declare const useThemeVariants: ({ themeVariants, currentThemeVariant, onComplete, onDarkModeSystemPreferenceChange, }: {
+    themeVariants: ThemeVariants | undefined;
+    currentThemeVariant: string;
+    onComplete: () => void;
+    onDarkModeSystemPreferenceChange: (prefersDarkMode: boolean) => void;
+}) => void;
+export default useThemeVariants;

package/dist/runtime/react/hooks/theme/useThemeVariants.js

@@ -0,0 +1,90 @@
+import { useEffect, useState } from 'react';
+import { logError } from '../../../logging';
+/**
+ * A custom React hook that manages the loading of theme variant CSS files dynamically.
+ * Adds/updates a `<link>` element in the HTML document to load each theme variant's CSS, setting the
+ * non-current theme variants as "alternate" stylesheets. That is, the browser will download
+ * the CSS for the non-current theme variants, but at a lower priority than the current one.
+ * This ensures that if the theme variant is changed at runtime, the new theme's CSS will already be loaded.
+ *
+ * The hook also listens for changes in the system's preference and triggers the provided callback accordingly.
+ */
+const useThemeVariants = ({ themeVariants, currentThemeVariant, onComplete, onDarkModeSystemPreferenceChange, }) => {
+    const [isThemeVariantComplete, setIsThemeVariantComplete] = useState(false);
+    // Effect hook that listens for changes in the system's dark mode preference.
+    useEffect(() => {
+        var _a;
+        const changeColorScheme = (colorSchemeQuery) => {
+            onDarkModeSystemPreferenceChange(colorSchemeQuery.matches);
+        };
+        const colorSchemeQuery = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-color-scheme: dark)');
+        if (colorSchemeQuery) {
+            colorSchemeQuery.addEventListener('change', changeColorScheme);
+        }
+        return () => {
+            if (colorSchemeQuery) {
+                colorSchemeQuery.removeEventListener('change', changeColorScheme);
+            }
+        };
+    }, [onDarkModeSystemPreferenceChange]);
+    // Effect hook to set the theme current variant on the HTML element.
+    useEffect(() => {
+        var _a;
+        if (currentThemeVariant && (themeVariants === null || themeVariants === void 0 ? void 0 : themeVariants[currentThemeVariant])) {
+            const htmlDataThemeVariantAttr = 'data-theme-variant';
+            (_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.setAttribute(htmlDataThemeVariantAttr, currentThemeVariant);
+            return () => {
+                var _a;
+                (_a = document.querySelector('html')) === null || _a === void 0 ? void 0 : _a.removeAttribute(htmlDataThemeVariantAttr);
+            };
+        }
+        return () => { }; // Cleanup: no action needed when theme variant is not set
+    }, [themeVariants, currentThemeVariant]);
+    // Effect hook that calls `onComplete` when brand theme variant processing is complete.
+    useEffect(() => {
+        if (isThemeVariantComplete) {
+            onComplete();
+        }
+    }, [isThemeVariantComplete, onComplete]);
+    useEffect(() => {
+        if (!themeVariants) {
+            return;
+        }
+        /**
+         * Determines the value for the `rel` attribute for a given theme variant based
+         * on if its the currently applied variant.
+         */
+        const getActiveOrAlternateRel = (themeVariant) => (currentThemeVariant === themeVariant ? 'stylesheet' : 'alternate stylesheet');
+        // Iterate over each theme variant URLs and inject them into the HTML document, if each doesn't already exist.
+        Object.entries(themeVariants).forEach(([themeVariant, { url }]) => {
+            // If the config for the theme variant does not have a URL, set the variant to complete and continue.
+            if (!url) {
+                setIsThemeVariantComplete(true);
+                return;
+            }
+            const existingThemeVariantLink = document.head.querySelector(`link[href='${url}']`);
+            if (existingThemeVariantLink) {
+                existingThemeVariantLink.rel = getActiveOrAlternateRel(themeVariant);
+                existingThemeVariantLink.dataset.themeVariant = themeVariant;
+                return;
+            }
+            const themeVariantLink = document.createElement('link');
+            themeVariantLink.href = url;
+            themeVariantLink.rel = getActiveOrAlternateRel(themeVariant);
+            themeVariantLink.dataset.themeVariant = themeVariant;
+            themeVariantLink.onload = () => {
+                if (themeVariant === currentThemeVariant) {
+                    setIsThemeVariantComplete(true);
+                }
+            };
+            themeVariantLink.onerror = () => {
+                logError(`Failed to load theme variant (${themeVariant}) CSS from ${url}. Aborting.`);
+                setIsThemeVariantComplete(true);
+            };
+            document.head.insertAdjacentElement('beforeend', themeVariantLink);
+            setIsThemeVariantComplete(true);
+        });
+    }, [themeVariants, currentThemeVariant, onComplete]);
+};
+export default useThemeVariants;
+//# sourceMappingURL=useThemeVariants.js.map

package/dist/runtime/react/hooks/theme/useThemeVariants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeVariants.js","sourceRoot":"","sources":["../../../../../runtime/react/hooks/theme/useThemeVariants.ts"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { logError } from '../../../logging';\n\nimport { ThemeVariants } from '../../../../types';\n\n/**\n * A custom React hook that manages the loading of theme variant CSS files dynamically.\n * Adds/updates a `<link>` element in the HTML document to load each theme variant's CSS, setting the\n * non-current theme variants as \"alternate\" stylesheets. That is, the browser will download\n * the CSS for the non-current theme variants, but at a lower priority than the current one.\n * This ensures that if the theme variant is changed at runtime, the new theme's CSS will already be loaded.\n *\n * The hook also listens for changes in the system's preference and triggers the provided callback accordingly.\n */\nconst useThemeVariants = ({\n  themeVariants,\n  currentThemeVariant,\n  onComplete,\n  onDarkModeSystemPreferenceChange,\n}: {\n  themeVariants: ThemeVariants | undefined,\n  currentThemeVariant: string,\n  onComplete: () => void,\n  onDarkModeSystemPreferenceChange: (prefersDarkMode: boolean) => void,\n}) => {\n  const [isThemeVariantComplete, setIsThemeVariantComplete] = useState(false);\n\n  // Effect hook that listens for changes in the system's dark mode preference.\n  useEffect(() => {\n    const changeColorScheme = (colorSchemeQuery) => {\n      onDarkModeSystemPreferenceChange(colorSchemeQuery.matches);\n    };\n    const colorSchemeQuery = window.matchMedia?.('(prefers-color-scheme: dark)');\n    if (colorSchemeQuery) {\n      colorSchemeQuery.addEventListener('change', changeColorScheme);\n    }\n    return () => {\n      if (colorSchemeQuery) {\n        colorSchemeQuery.removeEventListener('change', changeColorScheme);\n      }\n    };\n  }, [onDarkModeSystemPreferenceChange]);\n\n  // Effect hook to set the theme current variant on the HTML element.\n  useEffect(() => {\n    if (currentThemeVariant && themeVariants?.[currentThemeVariant]) {\n      const htmlDataThemeVariantAttr = 'data-theme-variant';\n      document.querySelector('html')?.setAttribute(htmlDataThemeVariantAttr, currentThemeVariant);\n      return () => {\n        document.querySelector('html')?.removeAttribute(htmlDataThemeVariantAttr);\n      };\n    }\n    return () => { }; // Cleanup: no action needed when theme variant is not set\n  }, [themeVariants, currentThemeVariant]);\n\n  // Effect hook that calls `onComplete` when brand theme variant processing is complete.\n  useEffect(() => {\n    if (isThemeVariantComplete) {\n      onComplete();\n    }\n  }, [isThemeVariantComplete, onComplete]);\n\n  useEffect(() => {\n    if (!themeVariants) {\n      return;\n    }\n\n    /**\n     * Determines the value for the `rel` attribute for a given theme variant based\n     * on if its the currently applied variant.\n     */\n    const getActiveOrAlternateRel = (themeVariant: string): string => (currentThemeVariant === themeVariant ? 'stylesheet' : 'alternate stylesheet');\n\n    // Iterate over each theme variant URLs and inject them into the HTML document, if each doesn't already exist.\n    Object.entries(themeVariants).forEach(([themeVariant, { url }]) => {\n      // If the config for the theme variant does not have a URL, set the variant to complete and continue.\n      if (!url) {\n        setIsThemeVariantComplete(true);\n        return;\n      }\n\n      const existingThemeVariantLink: HTMLAnchorElement | null = document.head.querySelector(`link[href='${url}']`);\n      if (existingThemeVariantLink) {\n        existingThemeVariantLink.rel = getActiveOrAlternateRel(themeVariant);\n        existingThemeVariantLink.dataset.themeVariant = themeVariant;\n        return;\n      }\n\n      const themeVariantLink = document.createElement('link');\n      themeVariantLink.href = url;\n      themeVariantLink.rel = getActiveOrAlternateRel(themeVariant);\n      themeVariantLink.dataset.themeVariant = themeVariant;\n\n      themeVariantLink.onload = () => {\n        if (themeVariant === currentThemeVariant) {\n          setIsThemeVariantComplete(true);\n        }\n      };\n\n      themeVariantLink.onerror = () => {\n        logError(`Failed to load theme variant (${themeVariant}) CSS from ${url}. Aborting.`);\n        setIsThemeVariantComplete(true);\n      };\n\n      document.head.insertAdjacentElement(\n        'beforeend',\n        themeVariantLink,\n      );\n\n      setIsThemeVariantComplete(true);\n    });\n  }, [themeVariants, currentThemeVariant, onComplete]);\n};\n\nexport default useThemeVariants;\n"]}

package/dist/runtime/react/hooks/theme/useTrackColorSchemeChoice.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A React hook that tracks user's preferred color scheme (light or dark) and sends respective
+ * event to the tracking service.
+ *
+ * @memberof module:React
+ */
+declare const useTrackColorSchemeChoice: () => void;
+export default useTrackColorSchemeChoice;

package/dist/runtime/react/hooks/theme/useTrackColorSchemeChoice.js

@@ -0,0 +1,30 @@
+import { useEffect } from 'react';
+import { sendTrackEvent } from '../../../analytics';
+/**
+ * A React hook that tracks user's preferred color scheme (light or dark) and sends respective
+ * event to the tracking service.
+ *
+ * @memberof module:React
+ */
+const useTrackColorSchemeChoice = () => {
+    useEffect(() => {
+        var _a;
+        const trackColorSchemeChoice = ({ matches }) => {
+            const preferredColorScheme = matches ? 'dark' : 'light';
+            sendTrackEvent('openedx.ui.frontend-base.prefers-color-scheme.selected', { preferredColorScheme });
+        };
+        const colorSchemeQuery = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-color-scheme: dark)');
+        if (colorSchemeQuery) {
+            // send user's initial choice
+            trackColorSchemeChoice(colorSchemeQuery);
+            colorSchemeQuery.addEventListener('change', trackColorSchemeChoice);
+        }
+        return () => {
+            if (colorSchemeQuery) {
+                colorSchemeQuery.removeEventListener('change', trackColorSchemeChoice);
+            }
+        };
+    }, []);
+};
+export default useTrackColorSchemeChoice;
+//# sourceMappingURL=useTrackColorSchemeChoice.js.map

package/dist/runtime/react/hooks/theme/useTrackColorSchemeChoice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTrackColorSchemeChoice.js","sourceRoot":"","sources":["../../../../../runtime/react/hooks/theme/useTrackColorSchemeChoice.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD;;;;;GAKG;AACH,MAAM,yBAAyB,GAAG,GAAG,EAAE;IACrC,SAAS,CAAC,GAAG,EAAE;;QACb,MAAM,sBAAsB,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;YAC7C,MAAM,oBAAoB,GAAG,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;YACxD,cAAc,CAAC,wDAAwD,EAAE,EAAE,oBAAoB,EAAE,CAAC,CAAC;QACrG,CAAC,CAAC;QACF,MAAM,gBAAgB,GAAG,MAAA,MAAM,CAAC,UAAU,uDAAG,8BAA8B,CAAC,CAAC;QAC7E,IAAI,gBAAgB,EAAE,CAAC;YACrB,6BAA6B;YAC7B,sBAAsB,CAAC,gBAAgB,CAAC,CAAC;YACzC,gBAAgB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC;QACtE,CAAC;QACD,OAAO,GAAG,EAAE;YACV,IAAI,gBAAgB,EAAE,CAAC;gBACrB,gBAAgB,CAAC,mBAAmB,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC;YACzE,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC,CAAC;AAEF,eAAe,yBAAyB,CAAC","sourcesContent":["import { useEffect } from 'react';\nimport { sendTrackEvent } from '../../../analytics';\n\n/**\n * A React hook that tracks user's preferred color scheme (light or dark) and sends respective\n * event to the tracking service.\n *\n * @memberof module:React\n */\nconst useTrackColorSchemeChoice = () => {\n  useEffect(() => {\n    const trackColorSchemeChoice = ({ matches }) => {\n      const preferredColorScheme = matches ? 'dark' : 'light';\n      sendTrackEvent('openedx.ui.frontend-base.prefers-color-scheme.selected', { preferredColorScheme });\n    };\n    const colorSchemeQuery = window.matchMedia?.('(prefers-color-scheme: dark)');\n    if (colorSchemeQuery) {\n      // send user's initial choice\n      trackColorSchemeChoice(colorSchemeQuery);\n      colorSchemeQuery.addEventListener('change', trackColorSchemeChoice);\n    }\n    return () => {\n      if (colorSchemeQuery) {\n        colorSchemeQuery.removeEventListener('change', trackColorSchemeChoice);\n      }\n    };\n  }, []);\n};\n\nexport default useTrackColorSchemeChoice;\n"]}

package/dist/runtime/react/hooks/theme/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Iterates through each given `<link>` element and removes it from the DOM.
+ * @param {HTMLLinkElement[]} existingLinks
+ */
+export declare const removeExistingLinks: (existingLinks: any) => void;
+export declare const isEmptyObject: (obj: any) => boolean;

package/dist/runtime/react/hooks/theme/utils.js

@@ -0,0 +1,11 @@
+/**
+ * Iterates through each given `<link>` element and removes it from the DOM.
+ * @param {HTMLLinkElement[]} existingLinks
+ */
+export const removeExistingLinks = (existingLinks) => {
+    existingLinks.forEach((link) => {
+        link.remove();
+    });
+};
+export const isEmptyObject = (obj) => !obj || Object.keys(obj).length === 0;
+//# sourceMappingURL=utils.js.map

package/dist/runtime/react/hooks/theme/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../../runtime/react/hooks/theme/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,aAAa,EAAE,EAAE;IACnD,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QAC7B,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC","sourcesContent":["/**\n * Iterates through each given `<link>` element and removes it from the DOM.\n * @param {HTMLLinkElement[]} existingLinks\n */\nexport const removeExistingLinks = (existingLinks) => {\n  existingLinks.forEach((link) => {\n    link.remove();\n  });\n};\n\nexport const isEmptyObject = (obj) => !obj || Object.keys(obj).length === 0;\n"]}

package/dist/runtime/react/hooks/useActiveRoles.d.ts

@@ -0,0 +1,2 @@
+declare const useActiveRoles: () => string[];
+export default useActiveRoles;

package/dist/runtime/react/hooks/useActiveRoles.js

@@ -0,0 +1,13 @@
+import { useState } from 'react';
+import { getActiveRoles } from '../../config';
+import { ACTIVE_ROLES_CHANGED } from '../../constants';
+import useSiteEvent from './useSiteEvent';
+const useActiveRoles = () => {
+    const [roles, setRoles] = useState(getActiveRoles());
+    useSiteEvent(ACTIVE_ROLES_CHANGED, () => {
+        setRoles(getActiveRoles());
+    });
+    return roles;
+};
+export default useActiveRoles;
+//# sourceMappingURL=useActiveRoles.js.map

package/dist/runtime/react/hooks/useActiveRoles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActiveRoles.js","sourceRoot":"","sources":["../../../../runtime/react/hooks/useActiveRoles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAE1C,MAAM,cAAc,GAAG,GAAG,EAAE;IAC1B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAW,cAAc,EAAE,CAAC,CAAC;IAC/D,YAAY,CAAC,oBAAoB,EAAE,GAAG,EAAE;QACtC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;IAC7B,CAAC,CAAC,CAAC;IAEH,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { useState } from 'react';\nimport { getActiveRoles } from '../../config';\nimport { ACTIVE_ROLES_CHANGED } from '../../constants';\nimport useSiteEvent from './useSiteEvent';\n\nconst useActiveRoles = () => {\n  const [roles, setRoles] = useState<string[]>(getActiveRoles());\n  useSiteEvent(ACTIVE_ROLES_CHANGED, () => {\n    setRoles(getActiveRoles());\n  });\n\n  return roles;\n};\n\nexport default useActiveRoles;\n"]}

package/dist/runtime/react/hooks/useActiveRouteRoleWatcher.d.ts

@@ -0,0 +1,2 @@
+declare const useActiveRouteRoleWatcher: () => void;
+export default useActiveRouteRoleWatcher;

package/dist/runtime/react/hooks/useActiveRouteRoleWatcher.js

@@ -0,0 +1,28 @@
+import { useCallback, useEffect } from 'react';
+import { useMatches } from 'react-router';
+import { setActiveRouteRoles } from '../../config';
+import { isRoleRouteObject } from '../../routing';
+const useActiveRouteRoleWatcher = () => {
+    const matches = useMatches();
+    // We create this callback so we can use it right away to populate the default state value.
+    const findActiveRouteRoles = useCallback(() => {
+        // Starts with the widget roles and adds the others in.
+        const roles = [];
+        // Route roles
+        for (const match of matches) {
+            if (isRoleRouteObject(match)) {
+                for (const role of match.handle.roles) {
+                    if (!roles.includes(role)) {
+                        roles.push(role);
+                    }
+                }
+            }
+        }
+        return roles;
+    }, [matches]);
+    useEffect(() => {
+        setActiveRouteRoles(findActiveRouteRoles());
+    }, [matches, findActiveRouteRoles]);
+};
+export default useActiveRouteRoleWatcher;
+//# sourceMappingURL=useActiveRouteRoleWatcher.js.map

package/dist/runtime/react/hooks/useActiveRouteRoleWatcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActiveRouteRoleWatcher.js","sourceRoot":"","sources":["../../../../runtime/react/hooks/useActiveRouteRoleWatcher.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAElD,MAAM,yBAAyB,GAAG,GAAG,EAAE;IACrC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,2FAA2F;IAC3F,MAAM,oBAAoB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC5C,uDAAuD;QACvD,MAAM,KAAK,GAAa,EAAE,CAAC;QAE3B,cAAc;QACd,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;YAC5B,IAAI,iBAAiB,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC7B,KAAK,MAAM,IAAI,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;oBACtC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;wBAC1B,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBACnB,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QAED,OAAO,KAAK,CAAC;IACf,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,SAAS,CAAC,GAAG,EAAE;QACb,mBAAmB,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAC9C,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,CAAC,CAAC,CAAC;AACtC,CAAC,CAAC;AAEF,eAAe,yBAAyB,CAAC","sourcesContent":["import { useCallback, useEffect } from 'react';\nimport { useMatches } from 'react-router';\nimport { setActiveRouteRoles } from '../../config';\nimport { isRoleRouteObject } from '../../routing';\n\nconst useActiveRouteRoleWatcher = () => {\n  const matches = useMatches();\n\n  // We create this callback so we can use it right away to populate the default state value.\n  const findActiveRouteRoles = useCallback(() => {\n    // Starts with the widget roles and adds the others in.\n    const roles: string[] = [];\n\n    // Route roles\n    for (const match of matches) {\n      if (isRoleRouteObject(match)) {\n        for (const role of match.handle.roles) {\n          if (!roles.includes(role)) {\n            roles.push(role);\n          }\n        }\n      }\n    }\n\n    return roles;\n  }, [matches]);\n\n  useEffect(() => {\n    setActiveRouteRoles(findActiveRouteRoles());\n  }, [matches, findActiveRouteRoles]);\n};\n\nexport default useActiveRouteRoleWatcher;\n"]}

package/dist/runtime/react/hooks/useAppConfig.d.ts

@@ -0,0 +1,2 @@
+declare const useAppConfig: () => import("../../..").AppConfig;
+export default useAppConfig;

package/dist/runtime/react/hooks/useAppConfig.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import CurrentAppContext from '../CurrentAppContext';
+const useAppConfig = () => {
+    const { appConfig } = useContext(CurrentAppContext);
+    return appConfig;
+};
+export default useAppConfig;
+//# sourceMappingURL=useAppConfig.js.map

package/dist/runtime/react/hooks/useAppConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAppConfig.js","sourceRoot":"","sources":["../../../../runtime/react/hooks/useAppConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,iBAAiB,MAAM,sBAAsB,CAAC;AAErD,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,EAAE,SAAS,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC;IACpD,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { useContext } from 'react';\nimport CurrentAppContext from '../CurrentAppContext';\n\nconst useAppConfig = () => {\n  const { appConfig } = useContext(CurrentAppContext);\n  return appConfig;\n};\n\nexport default useAppConfig;\n"]}

package/dist/runtime/react/hooks/useAuthenticatedUser.d.ts

@@ -0,0 +1,2 @@
+declare const useAuthenticatedUser: () => import("../../..").User | null;
+export default useAuthenticatedUser;

package/dist/runtime/react/hooks/useAuthenticatedUser.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import SiteContext from '../SiteContext';
+const useAuthenticatedUser = () => {
+    const { authenticatedUser } = useContext(SiteContext);
+    return authenticatedUser;
+};
+export default useAuthenticatedUser;
+//# sourceMappingURL=useAuthenticatedUser.js.map

package/dist/runtime/react/hooks/useAuthenticatedUser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAuthenticatedUser.js","sourceRoot":"","sources":["../../../../runtime/react/hooks/useAuthenticatedUser.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,MAAM,oBAAoB,GAAG,GAAG,EAAE;IAChC,MAAM,EAAE,iBAAiB,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACtD,OAAO,iBAAiB,CAAC;AAC3B,CAAC,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["import { useContext } from 'react';\nimport SiteContext from '../SiteContext';\n\nconst useAuthenticatedUser = () => {\n  const { authenticatedUser } = useContext(SiteContext);\n  return authenticatedUser;\n};\n\nexport default useAuthenticatedUser;\n"]}

package/dist/runtime/react/hooks/useSiteConfig.d.ts

@@ -0,0 +1,2 @@
+declare const useSiteConfig: () => import("../../..").SiteConfig;
+export default useSiteConfig;

package/dist/runtime/react/hooks/useSiteConfig.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import SiteContext from '../SiteContext';
+const useSiteConfig = () => {
+    const { siteConfig } = useContext(SiteContext);
+    return siteConfig;
+};
+export default useSiteConfig;
+//# sourceMappingURL=useSiteConfig.js.map

package/dist/runtime/react/hooks/useSiteConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSiteConfig.js","sourceRoot":"","sources":["../../../../runtime/react/hooks/useSiteConfig.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,WAAW,MAAM,gBAAgB,CAAC;AAEzC,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/C,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { useContext } from 'react';\nimport SiteContext from '../SiteContext';\n\nconst useSiteConfig = () => {\n  const { siteConfig } = useContext(SiteContext);\n  return siteConfig;\n};\n\nexport default useSiteConfig;\n"]}

package/dist/runtime/react/hooks/useSiteEvent.d.ts

@@ -0,0 +1,12 @@
+/**
+ * A React hook that allows functional components to subscribe to application events.  This should
+ * be used sparingly - for the most part, Context should be used higher-up in the application to
+ * provide necessary data to a given component, rather than utilizing a non-React-like Pub/Sub
+ * mechanism.
+ *
+ * @memberof module:React
+ * @param {string} type
+ * @param {function} callback
+ */
+declare const useSiteEvent: (type: any, callback: any) => void;
+export default useSiteEvent;