@edx/frontend-platform 8.2.0 → 8.3.0

package/react/hooks/paragon/useParagonThemeVariants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useParagonThemeVariants.js","names":["useEffect","useState","logError","logInfo","fallbackThemeUrl","removeExistingLinks","useParagonThemeVariants","_ref","themeVariants","currentThemeVariant","onComplete","onDarkModeSystemPreferenceChange","_useState","_useState2","_slicedToArray","isParagonThemeVariantComplete","setIsParagonThemeVariantComplete","_useState3","_useState4","isBrandThemeVariantComplete","setIsBrandThemeVariantComplete","_window$matchMedia","_window","changeColorScheme","colorSchemeQuery","matches","window","matchMedia","call","addEventListener","removeEventListener","htmlDataThemeVariantAttr","document","querySelector","setAttribute","removeAttribute","generateStylesheetRelAttr","themeVariant","Object","entries","forEach","_ref2","_ref3","value","urls","getParagonThemeVariantLink","head","concat","existingThemeVariantLink","existingThemeVariantBrandLink","brandOverride","getExistingThemeVariantLinks","isBrandOverride","themeVariantLinkSelector","querySelectorAll","createThemeVariantLink","url","_ref4","arguments","length","undefined","_ref4$isFallbackTheme","isFallbackThemeUrl","_ref4$isBrandOverride","themeVariantLink","createElement","href","rel","dataset","brandThemeVariant","paragonThemeVariant","onload","onerror","_PARAGON_THEME$parago","_PARAGON_THEME","paragonThemeAccessor","otherExistingLinks","variants","PARAGON_THEME","themeUrls","themeVariantFallbackUrl","fileName","foundParagonThemeVariantLink","insertAdjacentElement","insertBrandThemeVariantLink","updatedStylesheetRel","brandThemeVariantLink","paragonThemeVariantLink"],"sources":["../../../../src/react/hooks/paragon/useParagonThemeVariants.js"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nimport { logError, logInfo } from '../../../logging';\n\nimport { fallbackThemeUrl, removeExistingLinks } from './utils';\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 *\n * @memberof module:React\n * @param {object} args Configuration object for theme variants and related settings.\n * @param {object} [args.themeVariants] An object containing the URLs for each supported theme variant,\n * e.g.: `{ light: { url: 'https://path/to/light.css' } }`.\n * @param {string} [args.currentThemeVariant] The currently applied theme variant, e.g.: `light`.\n * @param {function} args.onComplete A callback function called when the theme variant(s) CSS is (are) complete.\n * @param {function} [args.onDarkModeSystemPreferenceChange] A callback function that is triggered\n * when the system's preference changes.\n */\nconst useParagonThemeVariants = ({\n  themeVariants,\n  currentThemeVariant,\n  onComplete,\n  onDarkModeSystemPreferenceChange,\n}) => {\n  const [isParagonThemeVariantComplete, setIsParagonThemeVariantComplete] = useState(false);\n  const [isBrandThemeVariantComplete, setIsBrandThemeVariantComplete] = 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-paragon-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 both paragon and brand theme variants are completed the processing.\n  useEffect(() => {\n    if (isParagonThemeVariantComplete && isBrandThemeVariantComplete) {\n      onComplete();\n    }\n  }, [isParagonThemeVariantComplete, isBrandThemeVariantComplete, 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     * @param {string} themeVariant The key representing a theme variant (e.g., `light`, `dark`).\n     * @returns {string} The value for the `rel` attribute, either 'stylesheet' or 'alternate stylesheet'.\n     */\n    const generateStylesheetRelAttr = (themeVariant) => (currentThemeVariant === themeVariant ? 'stylesheet' : 'alternate stylesheet');\n\n    // Iterate over each theme variant URL and inject it into the HTML document, if it doesn't already exist.\n    Object.entries(themeVariants).forEach(([themeVariant, value]) => {\n      // If there is no config for the theme variant URL, set the theme variant to complete and continue.\n      if (!value.urls) {\n        setIsParagonThemeVariantComplete(true);\n        setIsBrandThemeVariantComplete(true);\n        return;\n      }\n      const getParagonThemeVariantLink = () => document.head.querySelector(`link[data-paragon-theme-variant='${themeVariant}']`);\n      const existingThemeVariantLink = document.head.querySelector(`link[href='${value.urls.default}']`);\n      const existingThemeVariantBrandLink = document.head.querySelector(`link[href='${value.urls.brandOverride}']`);\n\n      const getExistingThemeVariantLinks = (isBrandOverride) => {\n        const themeVariantLinkSelector = `link[data-${isBrandOverride ? 'brand' : 'paragon'}-theme-variant='${themeVariant}']`;\n        return document.head.querySelectorAll(themeVariantLinkSelector);\n      };\n\n      const createThemeVariantLink = (\n        url,\n        {\n          isFallbackThemeUrl = false,\n          isBrandOverride = false,\n        } = {},\n      ) => {\n        let themeVariantLink = document.createElement('link');\n        themeVariantLink.href = url;\n        themeVariantLink.rel = generateStylesheetRelAttr(themeVariant);\n        if (isBrandOverride) {\n          themeVariantLink.dataset.brandThemeVariant = themeVariant;\n        } else {\n          themeVariantLink.dataset.paragonThemeVariant = themeVariant;\n        }\n\n        themeVariantLink.onload = () => {\n          if (themeVariant === currentThemeVariant) {\n            if (isBrandOverride) {\n              setIsBrandThemeVariantComplete(true);\n            } else {\n              setIsParagonThemeVariantComplete(true);\n            }\n          }\n        };\n\n        themeVariantLink.onerror = () => {\n          const paragonThemeAccessor = isBrandOverride ? 'brand' : 'paragon';\n          if (isFallbackThemeUrl) {\n            logError(`Could not load theme variant (${paragonThemeAccessor} - ${themeVariant}) CSS from fallback URL. Aborting.`);\n            if (isBrandOverride) {\n              setIsBrandThemeVariantComplete(true);\n            } else {\n              setIsParagonThemeVariantComplete(true);\n            }\n            const otherExistingLinks = getExistingThemeVariantLinks(isBrandOverride);\n            removeExistingLinks(otherExistingLinks);\n            return;\n          }\n          const variants = PARAGON_THEME?.[paragonThemeAccessor]?.themeUrls?.variants ?? {};\n          if (variants[themeVariant]) {\n            const themeVariantFallbackUrl = fallbackThemeUrl(variants[themeVariant].fileName);\n            logInfo(`Failed to load theme variant (${themeVariant}) CSS from ${isBrandOverride ? value.urls.brandOverride : value.urls.default}. Falling back to locally installed theme variant: ${themeVariantFallbackUrl}`);\n            themeVariantLink = createThemeVariantLink(themeVariantFallbackUrl, {\n              isFallbackThemeUrl: true,\n              isBrandOverride,\n            });\n            const otherExistingLinks = getExistingThemeVariantLinks(isBrandOverride);\n            removeExistingLinks(otherExistingLinks);\n            const foundParagonThemeVariantLink = getParagonThemeVariantLink();\n            if (foundParagonThemeVariantLink) {\n              foundParagonThemeVariantLink.insertAdjacentElement(\n                'afterend',\n                themeVariantLink,\n              );\n            } else {\n              document.head.insertAdjacentElement(\n                'afterbegin',\n                themeVariantLink,\n              );\n            }\n          } else {\n            logError(`Failed to load theme variant (${themeVariant}) CSS from ${url} and locally installed fallback URL is not available. Aborting.`);\n            if (isBrandOverride) {\n              setIsBrandThemeVariantComplete(true);\n            } else {\n              setIsParagonThemeVariantComplete(true);\n            }\n          }\n        };\n        return themeVariantLink;\n      };\n\n      const insertBrandThemeVariantLink = () => {\n        const updatedStylesheetRel = generateStylesheetRelAttr(themeVariant);\n\n        if (existingThemeVariantBrandLink) {\n          existingThemeVariantBrandLink.rel = updatedStylesheetRel;\n          existingThemeVariantBrandLink.removeAttribute('as');\n          existingThemeVariantBrandLink.dataset.brandThemeVariant = themeVariant;\n          return;\n        }\n\n        if (value.urls.brandOverride) {\n          const brandThemeVariantLink = createThemeVariantLink(value.urls.brandOverride, { isBrandOverride: true });\n          const foundParagonThemeVariantLink = getParagonThemeVariantLink();\n          if (foundParagonThemeVariantLink) {\n            foundParagonThemeVariantLink.insertAdjacentElement(\n              'afterend',\n              brandThemeVariantLink,\n            );\n          } else {\n            document.head.insertAdjacentElement(\n              'afterbegin',\n              brandThemeVariantLink,\n            );\n          }\n        }\n        setIsBrandThemeVariantComplete(true);\n      };\n\n      if (!existingThemeVariantLink) {\n        const paragonThemeVariantLink = createThemeVariantLink(value.urls.default);\n        document.head.insertAdjacentElement(\n          'afterbegin',\n          paragonThemeVariantLink,\n        );\n        insertBrandThemeVariantLink(existingThemeVariantBrandLink);\n      } else {\n        const updatedStylesheetRel = generateStylesheetRelAttr(themeVariant);\n        existingThemeVariantLink.rel = updatedStylesheetRel;\n        existingThemeVariantLink.removeAttribute('as');\n        existingThemeVariantLink.dataset.paragonThemeVariant = themeVariant;\n        insertBrandThemeVariantLink(existingThemeVariantBrandLink);\n      }\n      setIsParagonThemeVariantComplete(true);\n      setIsBrandThemeVariantComplete(true);\n    });\n  }, [themeVariants, currentThemeVariant, onComplete]);\n};\n\nexport default useParagonThemeVariants;\n"],"mappings":"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","ignoreList":[]}

package/react/hooks/paragon/useTrackColorSchemeChoice.js

@@ -0,0 +1,36 @@
+import { useEffect } from 'react';
+import { sendTrackEvent } from '../../../analytics';
+
+/**
+ * A custom React hook that listens for changes in the system's color scheme preference (via `matchMedia`)
+ * and sends an event with the chosen color scheme (either `light` or `dark`) to the provided tracking service.
+ * It sends an event both when the hook is first initialized (to capture the user's initial preference)
+ * and when the system's color scheme preference changes.
+ *
+ * @memberof module:React
+ */
+var useTrackColorSchemeChoice = function useTrackColorSchemeChoice() {
+  useEffect(function () {
+    var _window$matchMedia, _window;
+    var trackColorSchemeChoice = function trackColorSchemeChoice(_ref) {
+      var matches = _ref.matches;
+      var preferredColorScheme = matches ? 'dark' : 'light';
+      sendTrackEvent('openedx.ui.frontend-platform.prefers-color-scheme.selected', {
+        preferredColorScheme: preferredColorScheme
+      });
+    };
+    var colorSchemeQuery = (_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, '(prefers-color-scheme: dark)');
+    if (colorSchemeQuery) {
+      // send user's initial choice
+      trackColorSchemeChoice(colorSchemeQuery);
+      colorSchemeQuery.addEventListener('change', trackColorSchemeChoice);
+    }
+    return function () {
+      if (colorSchemeQuery) {
+        colorSchemeQuery.removeEventListener('change', trackColorSchemeChoice);
+      }
+    };
+  }, []);
+};
+export default useTrackColorSchemeChoice;
+//# sourceMappingURL=useTrackColorSchemeChoice.js.map

package/react/hooks/paragon/useTrackColorSchemeChoice.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTrackColorSchemeChoice.js","names":["useEffect","sendTrackEvent","useTrackColorSchemeChoice","_window$matchMedia","_window","trackColorSchemeChoice","_ref","matches","preferredColorScheme","colorSchemeQuery","window","matchMedia","call","addEventListener","removeEventListener"],"sources":["../../../../src/react/hooks/paragon/useTrackColorSchemeChoice.js"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { sendTrackEvent } from '../../../analytics';\n\n/**\n * A custom React hook that listens for changes in the system's color scheme preference (via `matchMedia`)\n * and sends an event with the chosen color scheme (either `light` or `dark`) to the provided tracking service.\n * It sends an event both when the hook is first initialized (to capture the user's initial preference)\n * and when the system's color scheme preference changes.\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-platform.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"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AAEjC,SAASC,cAAc,QAAQ,oBAAoB;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,yBAAyB,GAAG,SAA5BA,yBAAyBA,CAAA,EAAS;EACtCF,SAAS,CAAC,YAAM;IAAA,IAAAG,kBAAA,EAAAC,OAAA;IACd,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,EAAoB;MAAA,IAAdC,OAAO,GAAAD,IAAA,CAAPC,OAAO;MACvC,IAAMC,oBAAoB,GAAGD,OAAO,GAAG,MAAM,GAAG,OAAO;MACvDN,cAAc,CAAC,4DAA4D,EAAE;QAAEO,oBAAoB,EAApBA;MAAqB,CAAC,CAAC;IACxG,CAAC;IACD,IAAMC,gBAAgB,IAAAN,kBAAA,GAAG,CAAAC,OAAA,GAAAM,MAAM,EAACC,UAAU,cAAAR,kBAAA,uBAAjBA,kBAAA,CAAAS,IAAA,CAAAR,OAAA,EAAoB,8BAA8B,CAAC;IAC5E,IAAIK,gBAAgB,EAAE;MACpB;MACAJ,sBAAsB,CAACI,gBAAgB,CAAC;MACxCA,gBAAgB,CAACI,gBAAgB,CAAC,QAAQ,EAAER,sBAAsB,CAAC;IACrE;IACA,OAAO,YAAM;MACX,IAAII,gBAAgB,EAAE;QACpBA,gBAAgB,CAACK,mBAAmB,CAAC,QAAQ,EAAET,sBAAsB,CAAC;MACxE;IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;AACR,CAAC;AAED,eAAeH,yBAAyB","ignoreList":[]}

package/react/hooks/paragon/utils.js

@@ -0,0 +1,27 @@
+import { getConfig } from '../../../config';
+import { basename } from '../../../initialize';
+
+/**
+ * Iterates through each given `<link>` element and removes it from the DOM.
+ * @param {HTMLLinkElement[]} existingLinks
+ */
+export var removeExistingLinks = function removeExistingLinks(existingLinks) {
+  existingLinks.forEach(function (link) {
+    link.remove();
+  });
+};
+
+/**
+* Creates the fallback URL for the given theme file.
+* @param {string} url The theme file path.
+* @returns {string} The default theme url.
+*/
+export var fallbackThemeUrl = function fallbackThemeUrl(url) {
+  var _window$location;
+  var baseUrl = getConfig().BASE_URL || ((_window$location = window.location) === null || _window$location === void 0 ? void 0 : _window$location.origin);
+  return "".concat(baseUrl).concat(basename).concat(url);
+};
+export var isEmptyObject = function isEmptyObject(obj) {
+  return !obj || Object.keys(obj).length === 0;
+};
+//# sourceMappingURL=utils.js.map

package/react/hooks/paragon/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["getConfig","basename","removeExistingLinks","existingLinks","forEach","link","remove","fallbackThemeUrl","url","_window$location","baseUrl","BASE_URL","window","location","origin","concat","isEmptyObject","obj","Object","keys","length"],"sources":["../../../../src/react/hooks/paragon/utils.js"],"sourcesContent":["import { getConfig } from '../../../config';\nimport { basename } from '../../../initialize';\n\n/**\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\n/**\n* Creates the fallback URL for the given theme file.\n* @param {string} url The theme file path.\n* @returns {string} The default theme url.\n*/\nexport const fallbackThemeUrl = (url) => {\n  const baseUrl = getConfig().BASE_URL || window.location?.origin;\n  return `${baseUrl}${basename}${url}`;\n};\n\nexport const isEmptyObject = (obj) => !obj || Object.keys(obj).length === 0;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,QAAQ,QAAQ,qBAAqB;;AAE9C;AACA;AACA;AACA;AACA,OAAO,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIC,aAAa,EAAK;EACpDA,aAAa,CAACC,OAAO,CAAC,UAACC,IAAI,EAAK;IAC9BA,IAAI,CAACC,MAAM,CAAC,CAAC;EACf,CAAC,CAAC;AACJ,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAIC,GAAG,EAAK;EAAA,IAAAC,gBAAA;EACvC,IAAMC,OAAO,GAAGV,SAAS,CAAC,CAAC,CAACW,QAAQ,MAAAF,gBAAA,GAAIG,MAAM,CAACC,QAAQ,cAAAJ,gBAAA,uBAAfA,gBAAA,CAAiBK,MAAM;EAC/D,UAAAC,MAAA,CAAUL,OAAO,EAAAK,MAAA,CAAGd,QAAQ,EAAAc,MAAA,CAAGP,GAAG;AACpC,CAAC;AAED,OAAO,IAAMQ,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,GAAG;EAAA,OAAK,CAACA,GAAG,IAAIC,MAAM,CAACC,IAAI,CAACF,GAAG,CAAC,CAACG,MAAM,KAAK,CAAC;AAAA","ignoreList":[]}

package/react/hooks/useAppEvent.js

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { subscribe, unsubscribe } from '../../pubSub';
+
+/**
+ * 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
+ */
+var useAppEvent = function useAppEvent(type, callback) {
+  useEffect(function () {
+    var subscriptionToken = subscribe(type, callback);
+    return function () {
+      return unsubscribe(subscriptionToken);
+    };
+  }, [callback, type]);
+};
+export default useAppEvent;
+//# sourceMappingURL=useAppEvent.js.map

package/react/hooks/useAppEvent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAppEvent.js","names":["useEffect","subscribe","unsubscribe","useAppEvent","type","callback","subscriptionToken"],"sources":["../../../src/react/hooks/useAppEvent.js"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { subscribe, unsubscribe } from '../../pubSub';\n\n/**\n * A React hook that allows functional components to subscribe to application events.  This should\n * be used sparingly - for the most part, Context should be used higher-up in the application to\n * provide necessary data to a given component, rather than utilizing a non-React-like Pub/Sub\n * mechanism.\n *\n * @memberof module:React\n *\n * @param {string} type\n * @param {function} callback\n */\nconst useAppEvent = (type, callback) => {\n  useEffect(() => {\n    const subscriptionToken = subscribe(type, callback);\n\n    return () => unsubscribe(subscriptionToken);\n  }, [callback, type]);\n};\n\nexport default useAppEvent;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,OAAO;AAEjC,SAASC,SAAS,EAAEC,WAAW,QAAQ,cAAc;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIC,IAAI,EAAEC,QAAQ,EAAK;EACtCL,SAAS,CAAC,YAAM;IACd,IAAMM,iBAAiB,GAAGL,SAAS,CAACG,IAAI,EAAEC,QAAQ,CAAC;IAEnD,OAAO;MAAA,OAAMH,WAAW,CAACI,iBAAiB,CAAC;IAAA;EAC7C,CAAC,EAAE,CAACD,QAAQ,EAAED,IAAI,CAAC,CAAC;AACtB,CAAC;AAED,eAAeD,WAAW","ignoreList":[]}

package/react/reducers.js

@@ -0,0 +1,44 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { SET_THEME_VARIANT, SET_IS_THEME_LOADED } from './constants';
+export function paragonThemeReducer(state, action) {
+  switch (action.type) {
+    case SET_THEME_VARIANT:
+      {
+        var requestedThemeVariant = action.payload;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          themeVariant: requestedThemeVariant
+        });
+      }
+    case SET_IS_THEME_LOADED:
+      {
+        var requestedIsThemeLoaded = action.payload;
+        return _objectSpread(_objectSpread({}, state), {}, {
+          isThemeLoaded: requestedIsThemeLoaded
+        });
+      }
+    default:
+      return state;
+  }
+}
+var setParagonThemeVariant = function setParagonThemeVariant(payload) {
+  return {
+    type: SET_THEME_VARIANT,
+    payload: payload
+  };
+};
+var setParagonThemeLoaded = function setParagonThemeLoaded(payload) {
+  return {
+    type: SET_IS_THEME_LOADED,
+    payload: payload
+  };
+};
+export var paragonThemeActions = {
+  setParagonThemeVariant: setParagonThemeVariant,
+  setParagonThemeLoaded: setParagonThemeLoaded
+};
+//# sourceMappingURL=reducers.js.map

package/react/reducers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reducers.js","names":["SET_THEME_VARIANT","SET_IS_THEME_LOADED","paragonThemeReducer","state","action","type","requestedThemeVariant","payload","_objectSpread","themeVariant","requestedIsThemeLoaded","isThemeLoaded","setParagonThemeVariant","setParagonThemeLoaded","paragonThemeActions"],"sources":["../../src/react/reducers.js"],"sourcesContent":["import {\n  SET_THEME_VARIANT,\n  SET_IS_THEME_LOADED,\n} from './constants';\n\nexport function paragonThemeReducer(state, action) {\n  switch (action.type) {\n    case SET_THEME_VARIANT: {\n      const requestedThemeVariant = action.payload;\n      return {\n        ...state,\n        themeVariant: requestedThemeVariant,\n      };\n    }\n    case SET_IS_THEME_LOADED: {\n      const requestedIsThemeLoaded = action.payload;\n      return {\n        ...state,\n        isThemeLoaded: requestedIsThemeLoaded,\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nconst setParagonThemeVariant = (payload) => ({\n  type: SET_THEME_VARIANT,\n  payload,\n});\n\nconst setParagonThemeLoaded = (payload) => ({\n  type: SET_IS_THEME_LOADED,\n  payload,\n});\n\nexport const paragonThemeActions = {\n  setParagonThemeVariant,\n  setParagonThemeLoaded,\n};\n"],"mappings":";;;;;;AAAA,SACEA,iBAAiB,EACjBC,mBAAmB,QACd,aAAa;AAEpB,OAAO,SAASC,mBAAmBA,CAACC,KAAK,EAAEC,MAAM,EAAE;EACjD,QAAQA,MAAM,CAACC,IAAI;IACjB,KAAKL,iBAAiB;MAAE;QACtB,IAAMM,qBAAqB,GAAGF,MAAM,CAACG,OAAO;QAC5C,OAAAC,aAAA,CAAAA,aAAA,KACKL,KAAK;UACRM,YAAY,EAAEH;QAAqB;MAEvC;IACA,KAAKL,mBAAmB;MAAE;QACxB,IAAMS,sBAAsB,GAAGN,MAAM,CAACG,OAAO;QAC7C,OAAAC,aAAA,CAAAA,aAAA,KACKL,KAAK;UACRQ,aAAa,EAAED;QAAsB;MAEzC;IACA;MACE,OAAOP,KAAK;EAChB;AACF;AAEA,IAAMS,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAIL,OAAO;EAAA,OAAM;IAC3CF,IAAI,EAAEL,iBAAiB;IACvBO,OAAO,EAAPA;EACF,CAAC;AAAA,CAAC;AAEF,IAAMM,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAIN,OAAO;EAAA,OAAM;IAC1CF,IAAI,EAAEJ,mBAAmB;IACzBM,OAAO,EAAPA;EACF,CAAC;AAAA,CAAC;AAEF,OAAO,IAAMO,mBAAmB,GAAG;EACjCF,sBAAsB,EAAtBA,sBAAsB;EACtBC,qBAAqB,EAArBA;AACF,CAAC","ignoreList":[]}

package/react/hooks.js

@@ -1,54 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-import { useEffect } from 'react';
-import { subscribe, unsubscribe } from '../pubSub';
-import { sendTrackEvent } from '../analytics';
-
-/**
- * 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
- */
-export var useAppEvent = function useAppEvent(type, callback) {
-  useEffect(function () {
-    var subscriptionToken = subscribe(type, callback);
-    return function cleanup() {
-      unsubscribe(subscriptionToken);
-    };
-  }, [callback, type]);
-};
-
-/**
- * A React hook that tracks user's preferred color scheme (light or dark) and sends respective
- * event to the tracking service.
- *
- * @memberof module:React
- */
-export var useTrackColorSchemeChoice = function useTrackColorSchemeChoice() {
-  useEffect(function () {
-    var _window$matchMedia, _window;
-    var trackColorSchemeChoice = function trackColorSchemeChoice(_ref) {
-      var matches = _ref.matches;
-      var preferredColorScheme = matches ? 'dark' : 'light';
-      sendTrackEvent('openedx.ui.frontend-platform.prefers-color-scheme.selected', {
-        preferredColorScheme: preferredColorScheme
-      });
-    };
-    var colorSchemeQuery = (_window$matchMedia = (_window = window).matchMedia) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.call(_window, '(prefers-color-scheme: dark)');
-    if (colorSchemeQuery) {
-      // send user's initial choice
-      trackColorSchemeChoice(colorSchemeQuery);
-      colorSchemeQuery.addEventListener('change', trackColorSchemeChoice);
-    }
-    return function () {
-      if (colorSchemeQuery) {
-        colorSchemeQuery.removeEventListener('change', trackColorSchemeChoice);
-      }
-    };
-  }, []);
-};
-//# sourceMappingURL=hooks.js.map

package/react/hooks.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"hooks.js","names":["useEffect","subscribe","unsubscribe","sendTrackEvent","useAppEvent","type","callback","subscriptionToken","cleanup","useTrackColorSchemeChoice","_window$matchMedia","_window","trackColorSchemeChoice","_ref","matches","preferredColorScheme","colorSchemeQuery","window","matchMedia","call","addEventListener","removeEventListener"],"sources":["../../src/react/hooks.js"],"sourcesContent":["/* eslint-disable import/prefer-default-export */\nimport { useEffect } from 'react';\nimport { subscribe, unsubscribe } from '../pubSub';\nimport { sendTrackEvent } from '../analytics';\n\n/**\n * A React hook that allows functional components to subscribe to application events.  This should\n * be used sparingly - for the most part, Context should be used higher-up in the application to\n * provide necessary data to a given component, rather than utilizing a non-React-like Pub/Sub\n * mechanism.\n *\n * @memberof module:React\n * @param {string} type\n * @param {function} callback\n */\nexport const useAppEvent = (type, callback) => {\n  useEffect(() => {\n    const subscriptionToken = subscribe(type, callback);\n\n    return function cleanup() {\n      unsubscribe(subscriptionToken);\n    };\n  }, [callback, type]);\n};\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 */\nexport const useTrackColorSchemeChoice = () => {\n  useEffect(() => {\n    const trackColorSchemeChoice = ({ matches }) => {\n      const preferredColorScheme = matches ? 'dark' : 'light';\n      sendTrackEvent('openedx.ui.frontend-platform.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"],"mappings":"AAAA;AACA,SAASA,SAAS,QAAQ,OAAO;AACjC,SAASC,SAAS,EAAEC,WAAW,QAAQ,WAAW;AAClD,SAASC,cAAc,QAAQ,cAAc;;AAE7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIC,IAAI,EAAEC,QAAQ,EAAK;EAC7CN,SAAS,CAAC,YAAM;IACd,IAAMO,iBAAiB,GAAGN,SAAS,CAACI,IAAI,EAAEC,QAAQ,CAAC;IAEnD,OAAO,SAASE,OAAOA,CAAA,EAAG;MACxBN,WAAW,CAACK,iBAAiB,CAAC;IAChC,CAAC;EACH,CAAC,EAAE,CAACD,QAAQ,EAAED,IAAI,CAAC,CAAC;AACtB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMI,yBAAyB,GAAG,SAA5BA,yBAAyBA,CAAA,EAAS;EAC7CT,SAAS,CAAC,YAAM;IAAA,IAAAU,kBAAA,EAAAC,OAAA;IACd,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAsBA,CAAAC,IAAA,EAAoB;MAAA,IAAdC,OAAO,GAAAD,IAAA,CAAPC,OAAO;MACvC,IAAMC,oBAAoB,GAAGD,OAAO,GAAG,MAAM,GAAG,OAAO;MACvDX,cAAc,CAAC,4DAA4D,EAAE;QAAEY,oBAAoB,EAApBA;MAAqB,CAAC,CAAC;IACxG,CAAC;IACD,IAAMC,gBAAgB,IAAAN,kBAAA,GAAG,CAAAC,OAAA,GAAAM,MAAM,EAACC,UAAU,cAAAR,kBAAA,uBAAjBA,kBAAA,CAAAS,IAAA,CAAAR,OAAA,EAAoB,8BAA8B,CAAC;IAC5E,IAAIK,gBAAgB,EAAE;MACpB;MACAJ,sBAAsB,CAACI,gBAAgB,CAAC;MACxCA,gBAAgB,CAACI,gBAAgB,CAAC,QAAQ,EAAER,sBAAsB,CAAC;IACrE;IACA,OAAO,YAAM;MACX,IAAII,gBAAgB,EAAE;QACpBA,gBAAgB,CAACK,mBAAmB,CAAC,QAAQ,EAAET,sBAAsB,CAAC;MACxE;IACF,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;AACR,CAAC","ignoreList":[]}