@openedx/frontend-base 1.0.0-alpha.12 → 1.0.0-alpha.13

package/dist/runtime/react/ErrorBoundary.d.ts

@@ -0,0 +1,32 @@
+export default ErrorBoundary;
+/**
+ * Error boundary component used to log caught errors and display the error page.
+ *
+ * @memberof module:React
+ * @extends {Component}
+ */
+declare class ErrorBoundary extends React.Component<any, any, any> {
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+    };
+    constructor(props: any);
+    state: {
+        hasError: boolean;
+    };
+    componentDidCatch(error: any, info: any): void;
+    render(): any;
+}
+declare namespace ErrorBoundary {
+    namespace propTypes {
+        let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let fallbackComponent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    }
+    namespace defaultProps {
+        let children_1: null;
+        export { children_1 as children };
+        let fallbackComponent_1: undefined;
+        export { fallbackComponent_1 as fallbackComponent };
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';

package/dist/runtime/react/ErrorBoundary.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { logError } from '../logging';
+import ErrorPage from './ErrorPage';
+/**
+ * Error boundary component used to log caught errors and display the error page.
+ *
+ * @memberof module:React
+ * @extends {Component}
+ */
+class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError() {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true };
+    }
+    componentDidCatch(error, info) {
+        logError(error, { stack: info.componentStack });
+    }
+    render() {
+        if (this.state.hasError) {
+            return this.props.fallbackComponent || _jsx(ErrorPage, {});
+        }
+        return this.props.children;
+    }
+}
+ErrorBoundary.propTypes = {
+    children: PropTypes.node,
+    fallbackComponent: PropTypes.node,
+};
+ErrorBoundary.defaultProps = {
+    children: null,
+    fallbackComponent: undefined,
+};
+export default ErrorBoundary;
+//# sourceMappingURL=ErrorBoundary.js.map

package/dist/runtime/react/ErrorBoundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorBoundary.js","sourceRoot":"","sources":["../../../runtime/react/ErrorBoundary.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,SAAS,MAAM,aAAa,CAAC;AAEpC;;;;;GAKG;AACH,MAAM,aAAc,SAAQ,SAAS;IACnC,YAAY,KAAK;QACf,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC;IACnC,CAAC;IAED,MAAM,CAAC,wBAAwB;QAC7B,6DAA6D;QAC7D,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;IAC5B,CAAC;IAED,iBAAiB,CAAC,KAAK,EAAE,IAAI;QAC3B,QAAQ,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxB,OAAO,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,KAAC,SAAS,KAAG,CAAC;QACvD,CAAC;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;IAC7B,CAAC;CACF;AAED,aAAa,CAAC,SAAS,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,iBAAiB,EAAE,SAAS,CAAC,IAAI;CAClC,CAAC;AAEF,aAAa,CAAC,YAAY,GAAG;IAC3B,QAAQ,EAAE,IAAI;IACd,iBAAiB,EAAE,SAAS;CAC7B,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { logError } from '../logging';\n\nimport ErrorPage from './ErrorPage';\n\n/**\n * Error boundary component used to log caught errors and display the error page.\n *\n * @memberof module:React\n * @extends {Component}\n */\nclass ErrorBoundary extends Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false };\n  }\n\n  static getDerivedStateFromError() {\n    // Update state so the next render will show the fallback UI.\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, info) {\n    logError(error, { stack: info.componentStack });\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return this.props.fallbackComponent || <ErrorPage />;\n    }\n    return this.props.children;\n  }\n}\n\nErrorBoundary.propTypes = {\n  children: PropTypes.node,\n  fallbackComponent: PropTypes.node,\n};\n\nErrorBoundary.defaultProps = {\n  children: null,\n  fallbackComponent: undefined,\n};\n\nexport default ErrorBoundary;\n"]}

package/dist/runtime/react/ErrorPage.d.ts

@@ -0,0 +1,17 @@
+export default ErrorPage;
+/**
+ * An error page that displays a generic message for unexpected errors.  Also contains a "Try
+ * Again" button to refresh the page.
+ *
+ * @memberof module:React
+ * @extends {Component}
+ */
+declare function ErrorPage({ message, }: {
+    message?: null | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace ErrorPage {
+    namespace propTypes {
+        let message: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from 'prop-types';

package/dist/runtime/react/ErrorPage.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Container, Row, Col, } from '@openedx/paragon';
+import { useSiteEvent } from './hooks';
+import { FormattedMessage, IntlProvider, getMessages, getLocale, LOCALE_CHANGED, } from '../i18n';
+/**
+ * An error page that displays a generic message for unexpected errors.  Also contains a "Try
+ * Again" button to refresh the page.
+ *
+ * @memberof module:React
+ * @extends {Component}
+ */
+function ErrorPage({ message = null, }) {
+    const [locale, setLocale] = useState(getLocale());
+    useSiteEvent(LOCALE_CHANGED, () => {
+        setLocale(getLocale());
+    });
+    /* istanbul ignore next */
+    const reload = () => {
+        global.location.reload();
+    };
+    return (_jsx(IntlProvider, { locale: locale, messages: getMessages(), children: _jsx(Container, { fluid: true, className: "py-5 justify-content-center align-items-start text-center", "data-testid": "error-page", children: _jsx(Row, { children: _jsxs(Col, { children: [_jsx("p", { className: "text-muted", children: _jsx(FormattedMessage, { id: "unexpected.error.message.text", defaultMessage: "An unexpected error occurred. Please click the button below to refresh the page.", description: "error message when an unexpected error occurs" }) }), message && (_jsx("div", { role: "alert", className: "my-4", children: _jsx("p", { children: message }) })), _jsx(Button, { onClick: reload, children: _jsx(FormattedMessage, { id: "unexpected.error.button.text", defaultMessage: "Try again", description: "text for button that tries to reload the app by refreshing the page" }) })] }) }) }) }));
+}
+ErrorPage.propTypes = {
+    message: PropTypes.string,
+};
+export default ErrorPage;
+//# sourceMappingURL=ErrorPage.js.map

package/dist/runtime/react/ErrorPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorPage.js","sourceRoot":"","sources":["../../../runtime/react/ErrorPage.jsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,EACL,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,GAC5B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,WAAW,EACX,SAAS,EACT,cAAc,GACf,MAAM,SAAS,CAAC;AAEjB;;;;;;GAMG;AACH,SAAS,SAAS,CAAC,EACjB,OAAO,GAAG,IAAI,GACf;IACC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;IAElD,YAAY,CAAC,cAAc,EAAE,GAAG,EAAE;QAChC,SAAS,CAAC,SAAS,EAAE,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,0BAA0B;IAC1B,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;IAC3B,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,IAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,YACnD,KAAC,SAAS,IAAC,KAAK,QAAC,SAAS,EAAC,2DAA2D,iBAAa,YAAY,YAC7G,KAAC,GAAG,cACF,MAAC,GAAG,eACF,YAAG,SAAS,EAAC,YAAY,YACvB,KAAC,gBAAgB,IACf,EAAE,EAAC,+BAA+B,EAClC,cAAc,EAAC,kFAAkF,EACjG,WAAW,EAAC,+CAA+C,GAC3D,GACA,EACH,OAAO,IAAI,CACV,cAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,MAAM,YAChC,sBAAI,OAAO,GAAK,GACZ,CACP,EACD,KAAC,MAAM,IAAC,OAAO,EAAE,MAAM,YACrB,KAAC,gBAAgB,IACf,EAAE,EAAC,8BAA8B,EACjC,cAAc,EAAC,WAAW,EAC1B,WAAW,EAAC,qEAAqE,GACjF,GACK,IACL,GACF,GACI,GACC,CAChB,CAAC;AACJ,CAAC;AAED,SAAS,CAAC,SAAS,GAAG;IACpB,OAAO,EAAE,SAAS,CAAC,MAAM;CAC1B,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport {\n  Button, Container, Row, Col,\n} from '@openedx/paragon';\n\nimport { useSiteEvent } from './hooks';\nimport {\n  FormattedMessage,\n  IntlProvider,\n  getMessages,\n  getLocale,\n  LOCALE_CHANGED,\n} from '../i18n';\n\n/**\n * An error page that displays a generic message for unexpected errors.  Also contains a \"Try\n * Again\" button to refresh the page.\n *\n * @memberof module:React\n * @extends {Component}\n */\nfunction ErrorPage({\n  message = null,\n}) {\n  const [locale, setLocale] = useState(getLocale());\n\n  useSiteEvent(LOCALE_CHANGED, () => {\n    setLocale(getLocale());\n  });\n\n  /* istanbul ignore next */\n  const reload = () => {\n    global.location.reload();\n  };\n\n  return (\n    <IntlProvider locale={locale} messages={getMessages()}>\n      <Container fluid className=\"py-5 justify-content-center align-items-start text-center\" data-testid=\"error-page\">\n        <Row>\n          <Col>\n            <p className=\"text-muted\">\n              <FormattedMessage\n                id=\"unexpected.error.message.text\"\n                defaultMessage=\"An unexpected error occurred. Please click the button below to refresh the page.\"\n                description=\"error message when an unexpected error occurs\"\n              />\n            </p>\n            {message && (\n              <div role=\"alert\" className=\"my-4\">\n                <p>{message}</p>\n              </div>\n            )}\n            <Button onClick={reload}>\n              <FormattedMessage\n                id=\"unexpected.error.button.text\"\n                defaultMessage=\"Try again\"\n                description=\"text for button that tries to reload the app by refreshing the page\"\n              />\n            </Button>\n          </Col>\n        </Row>\n      </Container>\n    </IntlProvider>\n  );\n}\n\nErrorPage.propTypes = {\n  message: PropTypes.string,\n};\n\nexport default ErrorPage;\n"]}

package/dist/runtime/react/LoginRedirect.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A React component that, when rendered, redirects to the login page as a side effect.  Uses
+ * `redirectToLogin` to perform the redirect.
+ *
+ * @see {@link module:frontend-base~redirectToLogin}
+ * @memberof module:React
+ */
+export default function LoginRedirect(): null;

package/{runtime/react/LoginRedirect.jsx → dist/runtime/react/LoginRedirect.js}

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 import { redirectToLogin } from '../auth';
-
 /**
  * A React component that, when rendered, redirects to the login page as a side effect.  Uses
  * `redirectToLogin` to perform the redirect.
@@ -9,8 +8,9 @@ import { redirectToLogin } from '../auth';
  * @memberof module:React
  */
 export default function LoginRedirect() {
-  useEffect(() => {
-    redirectToLogin(global.location.href);
-  }, []);
-  return null;
+    useEffect(() => {
+        redirectToLogin(global.location.href);
+    }, []);
+    return null;
 }
+//# sourceMappingURL=LoginRedirect.js.map

package/dist/runtime/react/LoginRedirect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoginRedirect.js","sourceRoot":"","sources":["../../../runtime/react/LoginRedirect.jsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE1C;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa;IACnC,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;IACxC,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["import { useEffect } from 'react';\nimport { redirectToLogin } from '../auth';\n\n/**\n * A React component that, when rendered, redirects to the login page as a side effect.  Uses\n * `redirectToLogin` to perform the redirect.\n *\n * @see {@link module:frontend-base~redirectToLogin}\n * @memberof module:React\n */\nexport default function LoginRedirect() {\n  useEffect(() => {\n    redirectToLogin(global.location.href);\n  }, []);\n  return null;\n}\n"]}

package/dist/runtime/react/PageWrap.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A Wrapper component that calls `sendPageEvent` when it becomes active.
+ *
+ * @see {@link module:frontend-base~sendPageEvent}
+ * @memberof module:React
+ * @param {Object} props
+ */
+export default function PageWrap({ children }: any): any;

package/{runtime/react/PageWrap.jsx → dist/runtime/react/PageWrap.js}

@@ -2,9 +2,7 @@
 // eslint-disable-next-line no-unused-vars
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-
 import { sendPageEvent } from '../analytics';
-
 /**
  * A Wrapper component that calls `sendPageEvent` when it becomes active.
  *
@@ -13,12 +11,11 @@ import { sendPageEvent } from '../analytics';
  * @param {Object} props
  */
 export default function PageWrap({ children }) {
-  const location = useLocation();
-
-  useEffect(() => {
-    sendPageEvent();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [location.pathname]);
-
-  return children;
+    const location = useLocation();
+    useEffect(() => {
+        sendPageEvent();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [location.pathname]);
+    return children;
 }
+//# sourceMappingURL=PageWrap.js.map

package/dist/runtime/react/PageWrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageWrap.js","sourceRoot":"","sources":["../../../runtime/react/PageWrap.jsx"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,0CAA0C;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,QAAQ,EAAE;IAC3C,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,SAAS,CAAC,GAAG,EAAE;QACb,aAAa,EAAE,CAAC;QAClB,uDAAuD;IACvD,CAAC,EAAE,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC;IAExB,OAAO,QAAQ,CAAC;AAClB,CAAC","sourcesContent":["/* eslint-disable react/prop-types */\n// eslint-disable-next-line no-unused-vars\nimport { useEffect } from 'react';\nimport { useLocation } from 'react-router-dom';\n\nimport { sendPageEvent } from '../analytics';\n\n/**\n * A Wrapper component that calls `sendPageEvent` when it becomes active.\n *\n * @see {@link module:frontend-base~sendPageEvent}\n * @memberof module:React\n * @param {Object} props\n */\nexport default function PageWrap({ children }) {\n  const location = useLocation();\n\n  useEffect(() => {\n    sendPageEvent();\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [location.pathname]);\n\n  return children;\n}\n"]}

package/dist/runtime/react/SiteContext.d.ts

@@ -0,0 +1,24 @@
+import { SiteConfig, User } from '../../types';
+/**
+ * `SiteContext` provides data from `App` in a way that React components can readily consume, even
+ * if it's mutable data. `SiteContext` contains the following data structure:
+ *
+ * ```
+ * {
+ *   authenticatedUser
+ *   siteConfig
+ *   locale
+ * }
+ * ```
+ * If `authenticatedUser`, `siteConfig`, or `locale` data changes, `SiteContext` will be updated
+ * accordingly and pass those changes onto React components using the context.
+ *
+ * `SiteContext` is used in a React application like any other `[React Context](https://reactjs.org/docs/context.html)
+ * @memberof module:React
+ */
+declare const SiteContext: import("react").Context<{
+    authenticatedUser: User | null;
+    siteConfig: SiteConfig;
+    locale: string;
+}>;
+export default SiteContext;

package/{runtime/react/SiteContext.tsx → dist/runtime/react/SiteContext.js}

@@ -1,7 +1,5 @@
 import { createContext } from 'react';
-import { SiteConfig, User } from '../../types';
 import { getSiteConfig } from '../config';
-
 /**
  * `SiteContext` provides data from `App` in a way that React components can readily consume, even
  * if it's mutable data. `SiteContext` contains the following data structure:
@@ -19,14 +17,10 @@ import { getSiteConfig } from '../config';
  * `SiteContext` is used in a React application like any other `[React Context](https://reactjs.org/docs/context.html)
  * @memberof module:React
  */
-const SiteContext = createContext<{
-  authenticatedUser: User | null,
-  siteConfig: SiteConfig,
-  locale: string,
-}>({
-  authenticatedUser: null,
-  siteConfig: getSiteConfig(),
-  locale: 'en',
+const SiteContext = createContext({
+    authenticatedUser: null,
+    siteConfig: getSiteConfig(),
+    locale: 'en',
 });
-
 export default SiteContext;
+//# sourceMappingURL=SiteContext.js.map

package/dist/runtime/react/SiteContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SiteContext.js","sourceRoot":"","sources":["../../../runtime/react/SiteContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE1C;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,GAAG,aAAa,CAI9B;IACD,iBAAiB,EAAE,IAAI;IACvB,UAAU,EAAE,aAAa,EAAE;IAC3B,MAAM,EAAE,IAAI;CACb,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC","sourcesContent":["import { createContext } from 'react';\nimport { SiteConfig, User } from '../../types';\nimport { getSiteConfig } from '../config';\n\n/**\n * `SiteContext` provides data from `App` in a way that React components can readily consume, even\n * if it's mutable data. `SiteContext` contains the following data structure:\n *\n * ```\n * {\n *   authenticatedUser\n *   siteConfig\n *   locale\n * }\n * ```\n * If `authenticatedUser`, `siteConfig`, or `locale` data changes, `SiteContext` will be updated\n * accordingly and pass those changes onto React components using the context.\n *\n * `SiteContext` is used in a React application like any other `[React Context](https://reactjs.org/docs/context.html)\n * @memberof module:React\n */\nconst SiteContext = createContext<{\n  authenticatedUser: User | null,\n  siteConfig: SiteConfig,\n  locale: string,\n}>({\n  authenticatedUser: null,\n  siteConfig: getSiteConfig(),\n  locale: 'en',\n});\n\nexport default SiteContext;\n"]}

package/dist/runtime/react/SiteProvider.d.ts

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+interface SiteProviderProps {
+    children: ReactNode;
+}
+/**
+ * A wrapper component for React-based micro-frontends to initialize a number of common data/
+ * context providers.
+ *
+ * ```
+ * subscribe(SITE_READY, () => {
+ *   ReactDOM.render(
+ *     <SiteProvider>
+ *       <HelloWorld />
+ *     </SiteProvider>
+ *   )
+ * });
+ * ```
+ *
+ * This will provide the following to HelloWorld:
+ * - An error boundary as described above.
+ * - An `SiteContext` provider for React context data.
+ * - IntlProvider for @edx/frontend-i18n internationalization
+ * - A theme manager for Paragon.
+ *
+ * @param {Object} props
+ * @memberof module:React
+ */
+export default function SiteProvider({ children }: SiteProviderProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/runtime/react/SiteProvider.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { AUTHENTICATED_USER_CHANGED, getAuthenticatedUser } from '../auth';
+import { getSiteConfig } from '../config';
+import { CONFIG_CHANGED } from '../constants';
+import { getLocale, getMessages, IntlProvider, LOCALE_CHANGED, } from '../i18n';
+import CombinedAppProvider from './CombinedAppProvider';
+import ErrorBoundary from './ErrorBoundary';
+import SiteContext from './SiteContext';
+import { SELECTED_THEME_VARIANT_KEY } from './constants';
+import { useTheme, useSiteEvent, useTrackColorSchemeChoice } from './hooks';
+import { themeActions } from './reducers';
+/**
+ * A wrapper component for React-based micro-frontends to initialize a number of common data/
+ * context providers.
+ *
+ * ```
+ * subscribe(SITE_READY, () => {
+ *   ReactDOM.render(
+ *     <SiteProvider>
+ *       <HelloWorld />
+ *     </SiteProvider>
+ *   )
+ * });
+ * ```
+ *
+ * This will provide the following to HelloWorld:
+ * - An error boundary as described above.
+ * - An `SiteContext` provider for React context data.
+ * - IntlProvider for @edx/frontend-i18n internationalization
+ * - A theme manager for Paragon.
+ *
+ * @param {Object} props
+ * @memberof module:React
+ */
+export default function SiteProvider({ children }) {
+    const [siteConfig, setSiteConfig] = useState(getSiteConfig());
+    const [authenticatedUser, setAuthenticatedUser] = useState(getAuthenticatedUser());
+    const [locale, setLocale] = useState(getLocale());
+    useSiteEvent(AUTHENTICATED_USER_CHANGED, () => {
+        setAuthenticatedUser(getAuthenticatedUser());
+    });
+    useSiteEvent(CONFIG_CHANGED, () => {
+        setSiteConfig(getSiteConfig());
+    });
+    useSiteEvent(LOCALE_CHANGED, () => {
+        setLocale(getLocale());
+    });
+    useTrackColorSchemeChoice();
+    const [themeState, themeDispatch] = useTheme();
+    const siteContextValue = useMemo(() => ({
+        authenticatedUser,
+        siteConfig,
+        locale,
+        theme: {
+            state: themeState,
+            setThemeVariant: (themeVariant) => {
+                themeDispatch(themeActions.setThemeVariant(themeVariant));
+                // Persist selected theme variant to localStorage.
+                window.localStorage.setItem(SELECTED_THEME_VARIANT_KEY, themeVariant);
+            },
+        },
+    }), [authenticatedUser, siteConfig, locale, themeState, themeDispatch]);
+    if (!(themeState === null || themeState === void 0 ? void 0 : themeState.isThemeLoaded)) {
+        return null;
+    }
+    return (_jsx(IntlProvider, { locale: locale, messages: getMessages(), children: _jsx(ErrorBoundary, { children: _jsx(SiteContext.Provider, { value: siteContextValue, children: _jsx(CombinedAppProvider, { children: children }) }) }) }));
+}
+//# sourceMappingURL=SiteProvider.js.map

package/dist/runtime/react/SiteProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SiteProvider.js","sourceRoot":"","sources":["../../../runtime/react/SiteProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC3E,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9C,OAAO,EACL,SAAS,EACT,WAAW,EACX,YAAY,EACZ,cAAc,GACf,MAAM,SAAS,CAAC;AAEjB,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,aAAa,CAAC;AACzD,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAM1C;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,QAAQ,EAAqB;IAClE,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;IAC9D,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;IACnF,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC,CAAC;IAElD,YAAY,CAAC,0BAA0B,EAAE,GAAG,EAAE;QAC5C,oBAAoB,CAAC,oBAAoB,EAAE,CAAC,CAAC;IAC/C,CAAC,CAAC,CAAC;IAEH,YAAY,CAAC,cAAc,EAAE,GAAG,EAAE;QAChC,aAAa,CAAC,aAAa,EAAE,CAAC,CAAC;IACjC,CAAC,CAAC,CAAC;IAEH,YAAY,CAAC,cAAc,EAAE,GAAG,EAAE;QAChC,SAAS,CAAC,SAAS,EAAE,CAAC,CAAC;IACzB,CAAC,CAAC,CAAC;IAEH,yBAAyB,EAAE,CAAC;IAC5B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,EAAE,CAAC;IAE/C,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QACtC,iBAAiB;QACjB,UAAU;QACV,MAAM;QACN,KAAK,EAAE;YACL,KAAK,EAAE,UAAU;YACjB,eAAe,EAAE,CAAC,YAAoB,EAAE,EAAE;gBACxC,aAAa,CAAC,YAAY,CAAC,eAAe,CAAC,YAAY,CAAC,CAAC,CAAC;gBAE1D,kDAAkD;gBAClD,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,0BAA0B,EAAE,YAAY,CAAC,CAAC;YACxE,CAAC;SACF;KACF,CAAC,EAAE,CAAC,iBAAiB,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IAExE,IAAI,CAAC,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,CAAA,EAAE,CAAC;QAC/B,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,YAAY,IAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,YACnD,KAAC,aAAa,cACZ,KAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,gBAAgB,YAC3C,KAAC,mBAAmB,cACjB,QAAQ,GACW,GACD,GACT,GACH,CAChB,CAAC;AACJ,CAAC","sourcesContent":["import { ReactNode, useMemo, useState } from 'react';\n\nimport { AUTHENTICATED_USER_CHANGED, getAuthenticatedUser } from '../auth';\nimport { getSiteConfig } from '../config';\nimport { CONFIG_CHANGED } from '../constants';\nimport {\n  getLocale,\n  getMessages,\n  IntlProvider,\n  LOCALE_CHANGED,\n} from '../i18n';\n\nimport CombinedAppProvider from './CombinedAppProvider';\nimport ErrorBoundary from './ErrorBoundary';\nimport SiteContext from './SiteContext';\nimport { SELECTED_THEME_VARIANT_KEY } from './constants';\nimport {\n  useTheme,\n  useSiteEvent,\n  useTrackColorSchemeChoice\n} from './hooks';\nimport { themeActions } from './reducers';\n\ninterface SiteProviderProps {\n  children: ReactNode,\n}\n\n/**\n * A wrapper component for React-based micro-frontends to initialize a number of common data/\n * context providers.\n *\n * ```\n * subscribe(SITE_READY, () => {\n *   ReactDOM.render(\n *     <SiteProvider>\n *       <HelloWorld />\n *     </SiteProvider>\n *   )\n * });\n * ```\n *\n * This will provide the following to HelloWorld:\n * - An error boundary as described above.\n * - An `SiteContext` provider for React context data.\n * - IntlProvider for @edx/frontend-i18n internationalization\n * - A theme manager for Paragon.\n *\n * @param {Object} props\n * @memberof module:React\n */\nexport default function SiteProvider({ children }: SiteProviderProps) {\n  const [siteConfig, setSiteConfig] = useState(getSiteConfig());\n  const [authenticatedUser, setAuthenticatedUser] = useState(getAuthenticatedUser());\n  const [locale, setLocale] = useState(getLocale());\n\n  useSiteEvent(AUTHENTICATED_USER_CHANGED, () => {\n    setAuthenticatedUser(getAuthenticatedUser());\n  });\n\n  useSiteEvent(CONFIG_CHANGED, () => {\n    setSiteConfig(getSiteConfig());\n  });\n\n  useSiteEvent(LOCALE_CHANGED, () => {\n    setLocale(getLocale());\n  });\n\n  useTrackColorSchemeChoice();\n  const [themeState, themeDispatch] = useTheme();\n\n  const siteContextValue = useMemo(() => ({\n    authenticatedUser,\n    siteConfig,\n    locale,\n    theme: {\n      state: themeState,\n      setThemeVariant: (themeVariant: string) => {\n        themeDispatch(themeActions.setThemeVariant(themeVariant));\n\n        // Persist selected theme variant to localStorage.\n        window.localStorage.setItem(SELECTED_THEME_VARIANT_KEY, themeVariant);\n      },\n    },\n  }), [authenticatedUser, siteConfig, locale, themeState, themeDispatch]);\n\n  if (!themeState?.isThemeLoaded) {\n    return null;\n  }\n\n  return (\n    <IntlProvider locale={locale} messages={getMessages()}>\n      <ErrorBoundary>\n        <SiteContext.Provider value={siteContextValue}>\n          <CombinedAppProvider>\n            {children}\n          </CombinedAppProvider>\n        </SiteContext.Provider>\n      </ErrorBoundary>\n    </IntlProvider>\n  );\n}\n"]}

package/dist/runtime/react/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const SET_THEME_VARIANT = "SET_THEME_VARIANT";
+export declare const SET_IS_THEME_LOADED = "SET_IS_THEME_LOADED";
+export declare const SELECTED_THEME_VARIANT_KEY = "selected-theme-variant";

package/{runtime/react/constants.ts → dist/runtime/react/constants.js}

@@ -1,3 +1,4 @@
 export const SET_THEME_VARIANT = 'SET_THEME_VARIANT';
 export const SET_IS_THEME_LOADED = 'SET_IS_THEME_LOADED';
 export const SELECTED_THEME_VARIANT_KEY = 'selected-theme-variant';
+//# sourceMappingURL=constants.js.map

package/dist/runtime/react/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../runtime/react/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,iBAAiB,GAAG,mBAAmB,CAAC;AACrD,MAAM,CAAC,MAAM,mBAAmB,GAAG,qBAAqB,CAAC;AACzD,MAAM,CAAC,MAAM,0BAA0B,GAAG,wBAAwB,CAAC","sourcesContent":["export const SET_THEME_VARIANT = 'SET_THEME_VARIANT';\nexport const SET_IS_THEME_LOADED = 'SET_IS_THEME_LOADED';\nexport const SELECTED_THEME_VARIANT_KEY = 'selected-theme-variant';\n"]}

package/{runtime/react/hooks/index.ts → dist/runtime/react/hooks/index.d.ts}

@@ -4,5 +4,4 @@ export { default as useActiveRouteRoleWatcher } from './useActiveRouteRoleWatche
 export { default as useActiveRoles } from './useActiveRoles';
 export { default as useSiteConfig } from './useSiteConfig';
 export { default as useSiteEvent } from './useSiteEvent';
-
 export * from './theme';

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

@@ -0,0 +1,8 @@
+export { default as useAppConfig } from './useAppConfig';
+export { default as useAuthenticatedUser } from './useAuthenticatedUser';
+export { default as useActiveRouteRoleWatcher } from './useActiveRouteRoleWatcher';
+export { default as useActiveRoles } from './useActiveRoles';
+export { default as useSiteConfig } from './useSiteConfig';
+export { default as useSiteEvent } from './useSiteEvent';
+export * from './theme';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../runtime/react/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAEzD,cAAc,SAAS,CAAC","sourcesContent":["export { default as useAppConfig } from './useAppConfig';\nexport { default as useAuthenticatedUser } from './useAuthenticatedUser';\nexport { default as useActiveRouteRoleWatcher } from './useActiveRouteRoleWatcher';\nexport { default as useActiveRoles } from './useActiveRoles';\nexport { default as useSiteConfig } from './useSiteConfig';\nexport { default as useSiteEvent } from './useSiteEvent';\n\nexport * from './theme';\n"]}

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

@@ -0,0 +1,3 @@
+export { default as useTrackColorSchemeChoice } from './useTrackColorSchemeChoice';
+export { default as useTheme } from './useTheme';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../runtime/react/hooks/theme/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC","sourcesContent":["export { default as useTrackColorSchemeChoice } from './useTrackColorSchemeChoice';\nexport { default as useTheme } from './useTheme';\n"]}

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

@@ -0,0 +1,35 @@
+import { ThemeVariants, ThemeDefaults } from '../../../../types';
+/**
+* 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 declare const getDefaultThemeVariant: (themeVariants: ThemeVariants | undefined, themeDefaults?: ThemeDefaults) => {
+    name: string;
+    metadata: import("../../../..").ThemeVariant;
+} | undefined;
+/**
+ * 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'));
+ */
+declare const useTheme: () => any[];
+export default useTheme;

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