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

package/dist/runtime/slots/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../runtime/slots/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { getAuthenticatedUser } from '../auth';\nimport { getActiveRoles, getSiteConfig } from '../config';\nimport { SlotOperation } from './types';\n\nexport function getSlotOperations(id: string, defaultOperation?: SlotOperation) {\n  const { apps } = getSiteConfig();\n  const ops: SlotOperation[] = [];\n\n  if (defaultOperation) {\n    ops.push(defaultOperation);\n  }\n\n  if (apps) {\n    apps.forEach((app) => {\n      if (Array.isArray(app.slots)) {\n        app.slots.forEach((operation) => {\n          if (operation.slotId === id) {\n            ops.push(operation);\n          }\n        });\n      }\n    });\n  }\n\n  return ops;\n}\n\nexport function isSlotOperationConditionSatisfied(operation: SlotOperation) {\n  const { condition } = operation;\n  if (condition?.authenticated !== undefined) {\n    const isAuthenticated = getAuthenticatedUser() !== null;\n    // If we failed the authenticated condition, return false.\n    if (condition.authenticated !== isAuthenticated) {\n      return false;\n    }\n  }\n\n  if (condition?.active !== undefined || condition?.inactive !== undefined) {\n    const activeRoles: string[] = getActiveRoles();\n\n    if (condition?.active !== undefined) {\n      let activeConditionRoleFound = false;\n      for (const conditionRole of condition.active) {\n        if (activeRoles.includes(conditionRole)) {\n          activeConditionRoleFound = true;\n          break;\n        }\n      }\n\n      // If we couldn't find an active role in our list, then we've failed this condition.\n      if (!activeConditionRoleFound) {\n        return false;\n      }\n    }\n\n    if (condition?.inactive !== undefined) {\n      let inactiveConditionRoleFound = false;\n      for (const conditionRole of condition.inactive) {\n        if (activeRoles.includes(conditionRole)) {\n          inactiveConditionRoleFound = true;\n          break;\n        }\n      }\n\n      // If we find an active role from our inactive list, then we've failed this condition.\n      if (inactiveConditionRoleFound) {\n        return false;\n      }\n    }\n  }\n\n  if (condition?.callback !== undefined && condition.callback() === false) {\n    return false;\n  }\n\n  // If there was no condition, we return true.\n  return true;\n}\n"]}

package/dist/runtime/slots/widget/WidgetContext.d.ts

@@ -0,0 +1,6 @@
+declare const WidgetContext: import("react").Context<{
+    slotId: string;
+    widgetId: string;
+    role?: string;
+}>;
+export default WidgetContext;

package/dist/runtime/slots/widget/WidgetContext.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+const WidgetContext = createContext({
+    slotId: '',
+    widgetId: '',
+    role: undefined,
+});
+export default WidgetContext;
+//# sourceMappingURL=WidgetContext.js.map

package/dist/runtime/slots/widget/WidgetContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetContext.js","sourceRoot":"","sources":["../../../../runtime/slots/widget/WidgetContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,aAAa,GAAG,aAAa,CAAsD;IACvF,MAAM,EAAE,EAAE;IACV,QAAQ,EAAE,EAAE;IACZ,IAAI,EAAE,SAAS;CAChB,CAAC,CAAC;AAEH,eAAe,aAAa,CAAC","sourcesContent":["import { createContext } from 'react';\n\nconst WidgetContext = createContext<{ slotId: string, widgetId: string, role?: string }>({\n  slotId: '',\n  widgetId: '',\n  role: undefined,\n});\n\nexport default WidgetContext;\n"]}

package/dist/runtime/slots/widget/WidgetProvider.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface WidgetProviderProps {
+    children: ReactNode;
+    slotId: string;
+    widgetId: string;
+    role?: string;
+}
+export default function WidgetProvider({ children, slotId, widgetId, role }: WidgetProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/runtime/slots/widget/WidgetProvider.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { addActiveWidgetRole, removeActiveWidgetRole } from '../../config';
+import WidgetContext from './WidgetContext';
+export default function WidgetProvider({ children, slotId, widgetId, role }) {
+    useEffect(() => {
+        if (role !== undefined) {
+            addActiveWidgetRole(role);
+        }
+        return () => {
+            if (role !== undefined) {
+                removeActiveWidgetRole(role);
+            }
+        };
+    }, [role]);
+    return (_jsx(WidgetContext.Provider, { value: { slotId, widgetId, role }, children: children }));
+}
+//# sourceMappingURL=WidgetProvider.js.map

package/dist/runtime/slots/widget/WidgetProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetProvider.js","sourceRoot":"","sources":["../../../../runtime/slots/widget/WidgetProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAC3E,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAS5C,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAuB;IAC9F,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC5B,CAAC;QACD,OAAO,GAAG,EAAE;YACV,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;gBACvB,sBAAsB,CAAC,IAAI,CAAC,CAAC;YAC/B,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,YACtD,QAAQ,GACc,CAC1B,CAAC;AACJ,CAAC","sourcesContent":["import { ReactNode, useEffect } from 'react';\n\nimport { addActiveWidgetRole, removeActiveWidgetRole } from '../../config';\nimport WidgetContext from './WidgetContext';\n\ninterface WidgetProviderProps {\n  children: ReactNode,\n  slotId: string,\n  widgetId: string,\n  role?: string,\n}\n\nexport default function WidgetProvider({ children, slotId, widgetId, role }: WidgetProviderProps) {\n  useEffect(() => {\n    if (role !== undefined) {\n      addActiveWidgetRole(role);\n    }\n    return () => {\n      if (role !== undefined) {\n        removeActiveWidgetRole(role);\n      }\n    };\n  }, [role]);\n\n  return (\n    <WidgetContext.Provider value={{ slotId, widgetId, role }}>\n      {children}\n    </WidgetContext.Provider>\n  );\n}\n"]}

package/dist/runtime/slots/widget/hooks.d.ts

@@ -0,0 +1,13 @@
+import { WidgetOperation } from './types';
+export declare function useWidgets(): import("react").ReactNode[];
+export declare function useWidgetsForId(id: string, componentProps?: Record<string, unknown>): import("react").ReactNode[];
+export declare function useWidgetOperations(id: string): WidgetOperation[];
+export declare function useSortedWidgetOperations(id: string): WidgetOperation[];
+/**
+ * useWidgetOptions iterates through the slot's operations to find any that are "widget options"
+ * operations specific to this widget.  It merges these into a single object and returns them -
+ * operations are merged in declaration order, meaning last one in wins.  useWidgetOptions only
+ * triggers a re-render when the options change.
+ */
+export declare function useWidgetOptions(): Record<string, unknown>;
+export declare function useWidgetOptionsForId(slotId: string, widgetId: string): Record<string, unknown>;

package/dist/runtime/slots/widget/hooks.js

@@ -0,0 +1,104 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useContext, useEffect, useState } from 'react';
+import { useSlotContext, useSlotOperations } from '../hooks';
+import { isSlotOperationConditionSatisfied } from '../utils';
+import { createWidgets, isWidgetAbsoluteOperation, isWidgetOperation, isWidgetOptionsOperation, isWidgetRelativeOperation } from './utils';
+import WidgetContext from './WidgetContext';
+export function useWidgets() {
+    const _a = useSlotContext(), { id } = _a, props = __rest(_a, ["id"]);
+    delete props.children;
+    return useWidgetsForId(id, props);
+}
+export function useWidgetsForId(id, componentProps) {
+    const operations = useSortedWidgetOperations(id);
+    return createWidgets(operations, componentProps);
+}
+export function useWidgetOperations(id) {
+    const operations = useSlotOperations(id);
+    const [widgetOperations, setWidgetOperations] = useState([]);
+    useEffect(() => {
+        const filteredOperations = operations.filter((operation) => {
+            return isWidgetOperation(operation) && isSlotOperationConditionSatisfied(operation);
+        });
+        setWidgetOperations(filteredOperations);
+    }, [operations]);
+    return widgetOperations;
+}
+export function useSortedWidgetOperations(id) {
+    const operations = useWidgetOperations(id);
+    const [sortedOperations, setSortedOperations] = useState([]);
+    useEffect(() => {
+        // This sorts widget operations in an order that guarantees that any 'related' widgets
+        // needed by relatively positioned operations (INSERT_AFTER, INSERT_BEFORE) should already exist
+        // by the time the relative operations are evaluated.  It means the declaration order of
+        // operations in SiteConfig does not prevent an operation from interacting with a widget that was
+        // declared 'later'.
+        const sortedOperations = operations.sort((a, b) => {
+            // If both operations are widget operations, there are special sorting rules.
+            const aAbsolute = isWidgetAbsoluteOperation(a);
+            const bAbsolute = isWidgetAbsoluteOperation(b);
+            if (aAbsolute && bAbsolute) {
+                return 0;
+            }
+            else if (aAbsolute) {
+                return -1;
+            }
+            else if (bAbsolute) {
+                return 1;
+            }
+            else if (isWidgetRelativeOperation(a) && isWidgetRelativeOperation(b)) {
+                if (a.id === b.relatedId) {
+                    return -1;
+                }
+                else if (b.id === a.relatedId) {
+                    return 1;
+                }
+            }
+            return 0;
+        });
+        setSortedOperations(sortedOperations);
+    }, [operations]);
+    return sortedOperations;
+}
+/**
+ * useWidgetOptions iterates through the slot's operations to find any that are "widget options"
+ * operations specific to this widget.  It merges these into a single object and returns them -
+ * operations are merged in declaration order, meaning last one in wins.  useWidgetOptions only
+ * triggers a re-render when the options change.
+ */
+export function useWidgetOptions() {
+    const { slotId, widgetId } = useContext(WidgetContext);
+    return useWidgetOptionsForId(slotId, widgetId);
+}
+export function useWidgetOptionsForId(slotId, widgetId) {
+    const operations = useWidgetOperations(slotId);
+    const [options, setOptions] = useState({});
+    useEffect(() => {
+        const findOptions = () => {
+            let nextOptions = {};
+            for (const operation of operations) {
+                if (isSlotOperationConditionSatisfied(operation)) {
+                    if (isWidgetOptionsOperation(operation)) {
+                        if (operation.relatedId === widgetId) {
+                            nextOptions = Object.assign(Object.assign({}, nextOptions), operation.options);
+                        }
+                    }
+                }
+            }
+            return nextOptions;
+        };
+        setOptions(findOptions());
+    }, [widgetId, operations]);
+    return options;
+}
+//# sourceMappingURL=hooks.js.map

package/dist/runtime/slots/widget/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../../runtime/slots/widget/hooks.ts"],"names":[],"mappings":"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","sourcesContent":["import { useContext, useEffect, useState } from 'react';\nimport { useSlotContext, useSlotOperations } from '../hooks';\nimport { isSlotOperationConditionSatisfied } from '../utils';\nimport { WidgetOperation } from './types';\nimport { createWidgets, isWidgetAbsoluteOperation, isWidgetOperation, isWidgetOptionsOperation, isWidgetRelativeOperation } from './utils';\nimport WidgetContext from './WidgetContext';\n\nexport function useWidgets() {\n  const { id, ...props } = useSlotContext();\n  delete props.children;\n  return useWidgetsForId(id, props);\n}\n\nexport function useWidgetsForId(id: string, componentProps?: Record<string, unknown>) {\n  const operations = useSortedWidgetOperations(id);\n  return createWidgets(operations, componentProps);\n}\n\nexport function useWidgetOperations(id: string) {\n  const operations = useSlotOperations(id);\n  const [widgetOperations, setWidgetOperations] = useState<WidgetOperation[]>([]);\n\n  useEffect(() => {\n    const filteredOperations = operations.filter((operation): operation is WidgetOperation => {\n      return isWidgetOperation(operation) && isSlotOperationConditionSatisfied(operation);\n    });\n\n    setWidgetOperations(filteredOperations);\n  }, [operations]);\n\n  return widgetOperations;\n}\n\nexport function useSortedWidgetOperations(id: string) {\n  const operations = useWidgetOperations(id);\n  const [sortedOperations, setSortedOperations] = useState<WidgetOperation[]>([]);\n\n  useEffect(() => {\n    // This sorts widget operations in an order that guarantees that any 'related' widgets\n    // needed by relatively positioned operations (INSERT_AFTER, INSERT_BEFORE) should already exist\n    // by the time the relative operations are evaluated.  It means the declaration order of\n    // operations in SiteConfig does not prevent an operation from interacting with a widget that was\n    // declared 'later'.\n    const sortedOperations = operations.sort((a: WidgetOperation, b: WidgetOperation) => {\n      // If both operations are widget operations, there are special sorting rules.\n      const aAbsolute = isWidgetAbsoluteOperation(a);\n      const bAbsolute = isWidgetAbsoluteOperation(b);\n      if (aAbsolute && bAbsolute) {\n        return 0;\n      } else if (aAbsolute) {\n        return -1;\n      } else if (bAbsolute) {\n        return 1;\n      } else if (isWidgetRelativeOperation(a) && isWidgetRelativeOperation(b)) {\n        if (a.id === b.relatedId) {\n          return -1;\n        } else if (b.id === a.relatedId) {\n          return 1;\n        }\n      }\n\n      return 0;\n    });\n\n    setSortedOperations(sortedOperations);\n  }, [operations]);\n\n  return sortedOperations;\n}\n\n/**\n * useWidgetOptions iterates through the slot's operations to find any that are \"widget options\"\n * operations specific to this widget.  It merges these into a single object and returns them -\n * operations are merged in declaration order, meaning last one in wins.  useWidgetOptions only\n * triggers a re-render when the options change.\n */\nexport function useWidgetOptions() {\n  const { slotId, widgetId } = useContext(WidgetContext);\n  return useWidgetOptionsForId(slotId, widgetId);\n}\n\nexport function useWidgetOptionsForId(slotId: string, widgetId: string) {\n  const operations = useWidgetOperations(slotId);\n\n  const [options, setOptions] = useState<Record<string, unknown>>({});\n  useEffect(() => {\n    const findOptions = () => {\n      let nextOptions: Record<string, unknown> = {};\n      for (const operation of operations) {\n        if (isSlotOperationConditionSatisfied(operation)) {\n          if (isWidgetOptionsOperation(operation)) {\n            if (operation.relatedId === widgetId) {\n              nextOptions = { ...nextOptions, ...operation.options };\n            }\n          }\n        }\n      }\n      return nextOptions;\n    };\n\n    setOptions(findOptions());\n  }, [widgetId, operations]);\n\n  return options;\n}\n"]}

package/dist/runtime/slots/widget/iframe/IFrameContentWrapper.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent, ReactNode } from 'react';
+interface IFrameContentWrapperProps {
+    children: ReactNode;
+    className?: string;
+    style?: Record<string, string>;
+    ready?: boolean;
+    errorFallbackComponent?: FunctionComponent;
+}
+export default function IFrameContentWrapper({ children, className, style, ready, errorFallbackComponent, }: IFrameContentWrapperProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/runtime/slots/widget/iframe/IFrameContentWrapper.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState, } from 'react';
+import { useIntl } from '../../../i18n';
+import { ErrorBoundary } from '../../../react';
+import { IFRAME_RESIZE } from './constants';
+import { dispatchMountedEvent, dispatchReadyEvent, dispatchUnmountedEvent, useHostEvent } from './hooks';
+import messages from './IFrameContentWrapper.messages';
+const ErrorFallbackDefault = () => {
+    const { formatMessage } = useIntl();
+    return (_jsx("div", { children: _jsx("h2", { children: formatMessage(messages.unexpectedError) }) }));
+};
+export default function IFrameContentWrapper({ children, className, style = {}, ready = true, errorFallbackComponent, }) {
+    const [dimensions, setDimensions] = useState({
+        width: 0,
+        height: 0,
+    });
+    const finalStyle = useMemo(() => (Object.assign(Object.assign({}, dimensions), style)), [dimensions, style]);
+    // Need to confirm: When an error is caught here, the logging will be sent to the child MFE's logging service
+    const ErrorFallback = errorFallbackComponent !== null && errorFallbackComponent !== void 0 ? errorFallbackComponent : ErrorFallbackDefault;
+    useHostEvent(IFRAME_RESIZE, ({ payload }) => {
+        setDimensions({
+            width: payload.width,
+            height: payload.height,
+        });
+    });
+    useEffect(() => {
+        dispatchMountedEvent();
+        return () => {
+            dispatchUnmountedEvent();
+        };
+    }, []);
+    useEffect(() => {
+        // Ready defaults to true, but can be used to defer rendering the Plugin until certain processes
+        // have occurred or conditions have been met
+        if (ready) {
+            dispatchReadyEvent();
+        }
+    }, [ready]);
+    return (_jsx("div", { className: className, style: finalStyle, children: _jsx(ErrorBoundary, { fallbackComponent: _jsx(ErrorFallback, {}), children: children }) }));
+}
+;
+//# sourceMappingURL=IFrameContentWrapper.js.map

package/dist/runtime/slots/widget/iframe/IFrameContentWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IFrameContentWrapper.js","sourceRoot":"","sources":["../../../../../runtime/slots/widget/iframe/IFrameContentWrapper.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,SAAS,EAAE,OAAO,EAAE,QAAQ,GAC7B,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,sBAAsB,EACtB,YAAY,EACb,MAAM,SAAS,CAAC;AACjB,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD,MAAM,oBAAoB,GAAG,GAAG,EAAE;IAChC,MAAM,EAAE,aAAa,EAAE,GAAG,OAAO,EAAE,CAAC;IACpC,OAAO,CACL,wBACE,uBACG,aAAa,CAAC,QAAQ,CAAC,eAAe,CAAC,GACrC,GACD,CACP,CAAC;AACJ,CAAC,CAAC;AAUF,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,EAC3C,QAAQ,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,IAAI,EAAE,sBAAsB,GAC3C;IAC1B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC;QAC3C,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;KACV,CAAC,CAAC;IAEH,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,iCAC5B,UAAU,GACV,KAAK,EACR,EAAE,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,6GAA6G;IAE7G,MAAM,aAAa,GAAG,sBAAsB,aAAtB,sBAAsB,cAAtB,sBAAsB,GAAI,oBAAoB,CAAC;IAErE,YAAY,CAAC,aAAa,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;QAC1C,aAAa,CAAC;YACZ,KAAK,EAAE,OAAO,CAAC,KAAK;YACpB,MAAM,EAAE,OAAO,CAAC,MAAM;SACvB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,oBAAoB,EAAE,CAAC;QAEvB,OAAO,GAAG,EAAE;YACV,sBAAsB,EAAE,CAAC;QAC3B,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,gGAAgG;QAChG,4CAA4C;QAC5C,IAAI,KAAK,EAAE,CAAC;YACV,kBAAkB,EAAE,CAAC;QACvB,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,cAAK,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,UAAU,YAC1C,KAAC,aAAa,IAAC,iBAAiB,EAAE,KAAC,aAAa,KAAG,YAChD,QAAQ,GACK,GACZ,CACP,CAAC;AACJ,CAAC;AAAA,CAAC","sourcesContent":["import {\n  FunctionComponent,\n  ReactNode,\n  useEffect, useMemo, useState,\n} from 'react';\n\nimport { useIntl } from '../../../i18n';\nimport { ErrorBoundary } from '../../../react';\nimport { IFRAME_RESIZE } from './constants';\nimport {\n  dispatchMountedEvent,\n  dispatchReadyEvent,\n  dispatchUnmountedEvent,\n  useHostEvent\n} from './hooks';\nimport messages from './IFrameContentWrapper.messages';\n\nconst ErrorFallbackDefault = () => {\n  const { formatMessage } = useIntl();\n  return (\n    <div>\n      <h2>\n        {formatMessage(messages.unexpectedError)}\n      </h2>\n    </div>\n  );\n};\n\ninterface IFrameContentWrapperProps {\n  children: ReactNode,\n  className?: string,\n  style?: Record<string, string>,\n  ready?: boolean,\n  errorFallbackComponent?: FunctionComponent,\n}\n\nexport default function IFrameContentWrapper({\n  children, className, style = {}, ready = true, errorFallbackComponent,\n}: IFrameContentWrapperProps) {\n  const [dimensions, setDimensions] = useState({\n    width: 0,\n    height: 0,\n  });\n\n  const finalStyle = useMemo(() => ({\n    ...dimensions,\n    ...style,\n  }), [dimensions, style]);\n\n  // Need to confirm: When an error is caught here, the logging will be sent to the child MFE's logging service\n\n  const ErrorFallback = errorFallbackComponent ?? ErrorFallbackDefault;\n\n  useHostEvent(IFRAME_RESIZE, ({ payload }) => {\n    setDimensions({\n      width: payload.width,\n      height: payload.height,\n    });\n  });\n\n  useEffect(() => {\n    dispatchMountedEvent();\n\n    return () => {\n      dispatchUnmountedEvent();\n    };\n  }, []);\n\n  useEffect(() => {\n    // Ready defaults to true, but can be used to defer rendering the Plugin until certain processes\n    // have occurred or conditions have been met\n    if (ready) {\n      dispatchReadyEvent();\n    }\n  }, [ready]);\n\n  return (\n    <div className={className} style={finalStyle}>\n      <ErrorBoundary fallbackComponent={<ErrorFallback />}>\n        {children}\n      </ErrorBoundary>\n    </div>\n  );\n};\n"]}

package/dist/runtime/slots/widget/iframe/IFrameContentWrapper.messages.d.ts

@@ -0,0 +1,13 @@
+declare const messages: {
+    loading: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    unexpectedError: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/runtime/slots/widget/iframe/IFrameContentWrapper.messages.js

@@ -0,0 +1,15 @@
+import { defineMessages } from '../../../i18n';
+const messages = defineMessages({
+    loading: {
+        id: 'loading.message.text',
+        defaultMessage: 'Loading',
+        description: 'the feature is currently loading',
+    },
+    unexpectedError: {
+        id: 'unexpected.error.message.text',
+        defaultMessage: ' Oops! An error occurred. Please refresh the screen to try again.',
+        description: 'error message when an unexpected error occurs',
+    },
+});
+export default messages;
+//# sourceMappingURL=IFrameContentWrapper.messages.js.map

package/dist/runtime/slots/widget/iframe/IFrameContentWrapper.messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IFrameContentWrapper.messages.js","sourceRoot":"","sources":["../../../../../runtime/slots/widget/iframe/IFrameContentWrapper.messages.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,MAAM,QAAQ,GAAG,cAAc,CAAC;IAC9B,OAAO,EAAE;QACP,EAAE,EAAE,sBAAsB;QAC1B,cAAc,EAAE,SAAS;QACzB,WAAW,EAAE,kCAAkC;KAChD;IACD,eAAe,EAAE;QACf,EAAE,EAAE,+BAA+B;QACnC,cAAc,EAAE,mEAAmE;QACnF,WAAW,EAAE,+CAA+C;KAC7D;CACF,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC","sourcesContent":["import { defineMessages } from '../../../i18n';\n\nconst messages = defineMessages({\n  loading: {\n    id: 'loading.message.text',\n    defaultMessage: 'Loading',\n    description: 'the feature is currently loading',\n  },\n  unexpectedError: {\n    id: 'unexpected.error.message.text',\n    defaultMessage: ' Oops! An error occurred. Please refresh the screen to try again.',\n    description: 'error message when an unexpected error occurs',\n  },\n});\n\nexport default messages;\n"]}

package/dist/runtime/slots/widget/iframe/IFrameWidget.d.ts

@@ -0,0 +1,6 @@
+interface IFrameWidgetProps {
+    url: string;
+    title: string;
+}
+export default function IFrameWidget({ url, title }: IFrameWidgetProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/runtime/slots/widget/iframe/IFrameWidget.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spinner } from '@openedx/paragon';
+import { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { dispatchPluginEvent, useElementSize, usePluginEvent } from './hooks';
+import { IFRAME_FEATURE_POLICY, IFRAME_MOUNTED, IFRAME_READY, IFRAME_RESIZE } from './constants';
+export default function IFrameWidget({ url, title }) {
+    const [mounted, setMounted] = useState(false);
+    const [ready, setReady] = useState(false);
+    const { ref: iframeRef, element: iframeElement, width, height } = useElementSize();
+    useEffect(() => {
+        if (mounted) {
+            dispatchPluginEvent(iframeElement, {
+                type: IFRAME_RESIZE,
+                payload: {
+                    width,
+                    height,
+                },
+            }, url);
+        }
+    }, [iframeElement, mounted, width, height, url]);
+    usePluginEvent(iframeElement, IFRAME_MOUNTED, () => {
+        setMounted(true);
+    });
+    usePluginEvent(iframeElement, IFRAME_READY, () => {
+        setReady(true);
+    });
+    const fallback = (_jsx(Spinner, { animation: "border", variant: "light", screenReaderText: "Loading" }));
+    return (_jsxs(_Fragment, { children: [_jsx("iframe", { ref: iframeRef, title: title, src: url, allow: IFRAME_FEATURE_POLICY, referrerPolicy: "origin" // The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
+                , className: classNames('border border-0 w-100', { 'd-none': !ready }) }), !ready && fallback] }));
+}
+//# sourceMappingURL=IFrameWidget.js.map

package/dist/runtime/slots/widget/iframe/IFrameWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IFrameWidget.js","sourceRoot":"","sources":["../../../../../runtime/slots/widget/iframe/IFrameWidget.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9E,OAAO,EAAE,qBAAqB,EAAE,cAAc,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAOjG,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,GAAG,EAAE,KAAK,EAAqB;IACpE,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,cAAc,EAAE,CAAC;IAEnF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,CAAC;YACZ,mBAAmB,CAAC,aAAkC,EAAE;gBACtD,IAAI,EAAE,aAAa;gBACnB,OAAO,EAAE;oBACP,KAAK;oBACL,MAAM;iBACP;aACF,EAAE,GAAG,CAAC,CAAC;QACV,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC,CAAC;IAEjD,cAAc,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,EAAE;QACjD,UAAU,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,CAAC,CAAC;IAEH,cAAc,CAAC,aAAa,EAAE,YAAY,EAAE,GAAG,EAAE;QAC/C,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjB,CAAC,CAAC,CAAC;IAEH,MAAM,QAAQ,GAAG,CACf,KAAC,OAAO,IAAC,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAC,OAAO,EAAC,gBAAgB,EAAC,SAAS,GAAG,CAC1E,CAAC;IAEF,OAAO,CACL,8BACE,iBACE,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,qBAAqB,EAC5B,cAAc,EAAC,QAAQ,CAAC,qGAAqG;kBAC7H,SAAS,EAAE,UAAU,CACnB,uBAAuB,EACvB,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,CACrB,GACD,EACD,CAAC,KAAK,IAAI,QAAQ,IAClB,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { Spinner } from '@openedx/paragon';\nimport { useEffect, useState } from 'react';\n\nimport classNames from 'classnames';\nimport { dispatchPluginEvent, useElementSize, usePluginEvent } from './hooks';\nimport { IFRAME_FEATURE_POLICY, IFRAME_MOUNTED, IFRAME_READY, IFRAME_RESIZE } from './constants';\n\ninterface IFrameWidgetProps {\n  url: string,\n  title: string,\n}\n\nexport default function IFrameWidget({ url, title }: IFrameWidgetProps) {\n  const [mounted, setMounted] = useState(false);\n  const [ready, setReady] = useState(false);\n\n  const { ref: iframeRef, element: iframeElement, width, height } = useElementSize();\n\n  useEffect(() => {\n    if (mounted) {\n      dispatchPluginEvent(iframeElement as HTMLIFrameElement, {\n        type: IFRAME_RESIZE,\n        payload: {\n          width,\n          height,\n        },\n      }, url);\n    }\n  }, [iframeElement, mounted, width, height, url]);\n\n  usePluginEvent(iframeElement, IFRAME_MOUNTED, () => {\n    setMounted(true);\n  });\n\n  usePluginEvent(iframeElement, IFRAME_READY, () => {\n    setReady(true);\n  });\n\n  const fallback = (\n    <Spinner animation=\"border\" variant=\"light\" screenReaderText=\"Loading\" />\n  );\n\n  return (\n    <>\n      <iframe\n        ref={iframeRef}\n        title={title}\n        src={url}\n        allow={IFRAME_FEATURE_POLICY}\n        referrerPolicy=\"origin\" // The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.\n        className={classNames(\n          'border border-0 w-100',\n          { 'd-none': !ready },\n        )}\n      />\n      {!ready && fallback}\n    </>\n  );\n}\n"]}

package/dist/runtime/slots/widget/iframe/constants.d.ts

@@ -0,0 +1,15 @@
+export declare const IFRAME_MOUNTED = "IFRAME_MOUNTED";
+export declare const IFRAME_UNMOUNTED = "IFRAME_UNMOUNTED";
+export declare const IFRAME_READY = "IFRAME_READY";
+export declare const IFRAME_RESIZE = "IFRAME_RESIZE";
+/**
+ * Feature policy for iframe, allowing access to certain courseware-related media.
+ *
+ * We must use the wildcard (*) origin for each feature, as courseware content
+ * may be embedded in external iframes. Notably, xblock-lti-consumer is a popular
+ * block that iframes external course content.
+
+ * This policy was selected in conference with the edX Security Working Group.
+ * Changes to it should be vetted by them (security@edx.org).
+ */
+export declare const IFRAME_FEATURE_POLICY = "fullscreen; microphone *; camera *; midi *; geolocation *; encrypted-media *";

package/{runtime/slots/widget/iframe/constants.ts → dist/runtime/slots/widget/iframe/constants.js}

@@ -3,7 +3,6 @@ export const IFRAME_MOUNTED = 'IFRAME_MOUNTED';
 export const IFRAME_UNMOUNTED = 'IFRAME_UNMOUNTED';
 export const IFRAME_READY = 'IFRAME_READY';
 export const IFRAME_RESIZE = 'IFRAME_RESIZE';
-
 /**
  * Feature policy for iframe, allowing access to certain courseware-related media.
  *
@@ -14,6 +13,5 @@ export const IFRAME_RESIZE = 'IFRAME_RESIZE';
  * This policy was selected in conference with the edX Security Working Group.
  * Changes to it should be vetted by them (security@edx.org).
  */
-export const IFRAME_FEATURE_POLICY = (
-  'fullscreen; microphone *; camera *; midi *; geolocation *; encrypted-media *'
-);
+export const IFRAME_FEATURE_POLICY = ('fullscreen; microphone *; camera *; midi *; geolocation *; encrypted-media *');
+//# sourceMappingURL=constants.js.map

package/dist/runtime/slots/widget/iframe/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../runtime/slots/widget/iframe/constants.ts"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,MAAM,CAAC,MAAM,cAAc,GAAG,gBAAgB,CAAC;AAC/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;AACnD,MAAM,CAAC,MAAM,YAAY,GAAG,cAAc,CAAC;AAC3C,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC;AAE7C;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACnC,8EAA8E,CAC/E,CAAC","sourcesContent":["// IFrame lifecycle events\nexport const IFRAME_MOUNTED = 'IFRAME_MOUNTED';\nexport const IFRAME_UNMOUNTED = 'IFRAME_UNMOUNTED';\nexport const IFRAME_READY = 'IFRAME_READY';\nexport const IFRAME_RESIZE = 'IFRAME_RESIZE';\n\n/**\n * Feature policy for iframe, allowing access to certain courseware-related media.\n *\n * We must use the wildcard (*) origin for each feature, as courseware content\n * may be embedded in external iframes. Notably, xblock-lti-consumer is a popular\n * block that iframes external course content.\n\n * This policy was selected in conference with the edX Security Working Group.\n * Changes to it should be vetted by them (security@edx.org).\n */\nexport const IFRAME_FEATURE_POLICY = (\n  'fullscreen; microphone *; camera *; midi *; geolocation *; encrypted-media *'\n);\n"]}

package/dist/runtime/slots/widget/iframe/hooks.d.ts

@@ -0,0 +1,64 @@
+/**
+ * Hooks file for functions that handle the communication between a Plugin and its Host
+ */
+import { LegacyRef } from 'react';
+import { MessageEventCallback } from './types';
+/**
+ * Dynamically add an event listener to the provided source window.
+ * The source window can be the global parent (ie. the "window" object in the browser)
+ * or it can be the content window of an individual element (ie. iFrame plugin container)
+ */
+export declare function useMessageEvent(srcWindow: Window | null, type: string, callback: MessageEventCallback): void;
+/**
+ * Called by the Plugin component to use events that were listened to (ie. PLUGIN_RESIZE)
+ */
+export declare function useHostEvent(type: string, callback: MessageEventCallback): void;
+/**
+ * Used to listen for events from a wrapped Plugin element (eg. PluginContainerIframe)
+ *
+ * @param element - Plugin element (eg. <iframe>)
+ * @param type - Event type (eg. PLUGIN_RESIZE)
+ * @param callback - Function to call when the event is triggered
+ */
+export declare function usePluginEvent(element: HTMLIFrameElement | undefined, type: string, callback: MessageEventCallback): void;
+/** Dispatching events */
+/**
+ * Base dispatch function called by dispatchHostEvent and dispatchPluginEvent.
+ * Uses the `postMessage` method to enable cross-origin communication between Window objects
+ *
+ * @param targetWindow - Window that the message event is being dispatched to
+ * @param message - Data object for the message
+ * @param targetOrigin - URL for the window that the message event is being dispatched from
+ */
+export declare function dispatchMessageEvent(targetWindow: Window | null, message: any, targetOrigin: string): void;
+/**
+ * Used to dispatch events for a Plugin
+ *
+ * @param element - Plugin element (eg. <iframe>)
+ * @param message - Data object for the message
+ * @param targetOrigin - URL for the window that the message event is being dispatched from
+ */
+export declare function dispatchPluginEvent(element: HTMLIFrameElement, message: any, targetOrigin: string): void;
+/**
+ * Used to dispatch events for the Host
+ *
+ * @param message - Data object for the message
+ */
+export declare function dispatchHostEvent(message: any): void;
+export declare function dispatchReadyEvent(): void;
+export declare function dispatchMountedEvent(): void;
+export declare function dispatchUnmountedEvent(): void;
+/**
+ * Used to determine the size of an element as it is being resized in the browser.
+ * ResizeObserver (https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) is used to maintain a reference to the element's content/border box.
+ *
+ * @returns Memoized value that contains a reference to the Plugin element (eg. iframe)
+ */
+export declare function useElementSize(): {
+    ref: LegacyRef<HTMLIFrameElement>;
+    element: HTMLIFrameElement | undefined;
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+};

package/dist/runtime/slots/widget/iframe/hooks.js

@@ -0,0 +1,144 @@
+/**
+ * Hooks file for functions that handle the communication between a Plugin and its Host
+ */
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { IFRAME_MOUNTED, IFRAME_READY, IFRAME_UNMOUNTED } from './constants';
+/* Listening for events */
+/**
+ * Dynamically add an event listener to the provided source window.
+ * The source window can be the global parent (ie. the "window" object in the browser)
+ * or it can be the content window of an individual element (ie. iFrame plugin container)
+ */
+export function useMessageEvent(srcWindow, type, callback) {
+    // useLayoutEffect is called before the browser repaints the screen
+    useLayoutEffect(() => {
+        // Create a listener callback function
+        const listener = (event) => {
+            // Filter messages to those from our source window.
+            // NOTE: the "srcWindow" is determined by the below useHostEvent and usePluginEvent functions
+            if (event.source === srcWindow) {
+                // Fire callback if the type from the listened event matches the type from the message event
+                if (event.data.type === type) {
+                    callback({ type, payload: event.data.payload });
+                }
+            }
+        };
+        // Add the listener to the global object if the srcWindow is not null
+        if (srcWindow !== null) {
+            global.addEventListener('message', listener);
+        }
+        // useEffect cleanup
+        return () => {
+            global.removeEventListener('message', listener);
+        };
+    }, [srcWindow, type, callback]);
+}
+/**
+ * Called by the Plugin component to use events that were listened to (ie. PLUGIN_RESIZE)
+ */
+export function useHostEvent(type, callback) {
+    useMessageEvent(global.parent, type, callback);
+}
+/**
+ * Used to listen for events from a wrapped Plugin element (eg. PluginContainerIframe)
+ *
+ * @param element - Plugin element (eg. <iframe>)
+ * @param type - Event type (eg. PLUGIN_RESIZE)
+ * @param callback - Function to call when the event is triggered
+ */
+export function usePluginEvent(element, type, callback) {
+    const contentWindow = element ? element.contentWindow : null;
+    useMessageEvent(contentWindow, type, callback);
+}
+/** Dispatching events */
+/**
+ * Base dispatch function called by dispatchHostEvent and dispatchPluginEvent.
+ * Uses the `postMessage` method to enable cross-origin communication between Window objects
+ *
+ * @param targetWindow - Window that the message event is being dispatched to
+ * @param message - Data object for the message
+ * @param targetOrigin - URL for the window that the message event is being dispatched from
+ */
+export function dispatchMessageEvent(targetWindow, message, targetOrigin) {
+    /** Checking targetOrigin falsiness here since '', null or undefined would all be
+     * reasons not to try to post a message to the origin.
+     */
+    if (targetWindow && targetOrigin) {
+        targetWindow.postMessage(message, targetOrigin);
+    }
+}
+/**
+ * Used to dispatch events for a Plugin
+ *
+ * @param element - Plugin element (eg. <iframe>)
+ * @param message - Data object for the message
+ * @param targetOrigin - URL for the window that the message event is being dispatched from
+ */
+export function dispatchPluginEvent(element, message, targetOrigin) {
+    dispatchMessageEvent(element.contentWindow, message, targetOrigin);
+}
+/**
+ * Used to dispatch events for the Host
+ *
+ * @param message - Data object for the message
+ */
+export function dispatchHostEvent(message) {
+    dispatchMessageEvent(global.parent, message, global.document.referrer);
+}
+// Called inside Plugin when 'ready' prop is true
+export function dispatchReadyEvent() {
+    dispatchHostEvent({ type: IFRAME_READY });
+}
+// Below mounted events are called in a useEffect inside Plugin with [] dependencies — https://react.dev/learn/synchronizing-with-effects
+export function dispatchMountedEvent() {
+    dispatchHostEvent({ type: IFRAME_MOUNTED });
+}
+export function dispatchUnmountedEvent() {
+    dispatchHostEvent({ type: IFRAME_UNMOUNTED });
+}
+/**
+ * Used to determine the size of an element as it is being resized in the browser.
+ * ResizeObserver (https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) is used to maintain a reference to the element's content/border box.
+ *
+ * @returns Memoized value that contains a reference to the Plugin element (eg. iframe)
+ */
+export function useElementSize() {
+    // Holds a reference to the ResizeObserver
+    const observerRef = useRef(null);
+    const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+    const [offset, setOffset] = useState({ x: 0, y: 0 });
+    const [element, setElement] = useState();
+    // Sets a reference to the Plugin element when passed to the Plugin element as a "ref" attribute (eg. <iframe>)
+    const measuredRef = useCallback(_element => {
+        setElement(_element);
+    }, []);
+    useEffect(() => {
+        // Create a new ResizeObserver
+        observerRef.current = new ResizeObserver(() => {
+            if (element) {
+                // Set dimensions and any offset
+                setDimensions({
+                    width: element.clientWidth,
+                    height: element.clientHeight,
+                });
+                setOffset({
+                    x: element.offsetLeft,
+                    y: element.offsetTop,
+                });
+            }
+        });
+        if (element) {
+            // Tell the ResizeObserver to start watching the element — this enables the hook to detect resizing
+            observerRef.current.observe(element);
+        }
+    }, [element]);
+    return useMemo(() => ({
+        ref: measuredRef,
+        element: element,
+        width: dimensions.width,
+        height: dimensions.height,
+        x: offset.x,
+        y: offset.y
+    }), [measuredRef, element, dimensions, offset]);
+}
+//# sourceMappingURL=hooks.js.map

package/dist/runtime/slots/widget/iframe/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../../../runtime/slots/widget/iframe/hooks.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Hooks file for functions that handle the communication between a Plugin and its Host\n */\n\nimport {\n  LegacyRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState\n} from 'react';\n\nimport { IFRAME_MOUNTED, IFRAME_READY, IFRAME_UNMOUNTED } from './constants';\nimport { MessageEventCallback } from './types';\n\n/* Listening for events */\n\n/**\n * Dynamically add an event listener to the provided source window.\n * The source window can be the global parent (ie. the \"window\" object in the browser)\n * or it can be the content window of an individual element (ie. iFrame plugin container)\n */\nexport function useMessageEvent(srcWindow: Window | null, type: string, callback: MessageEventCallback) {\n  // useLayoutEffect is called before the browser repaints the screen\n  useLayoutEffect(() => {\n    // Create a listener callback function\n    const listener = (event: MessageEvent<{ type: string, payload: any }>) => {\n      // Filter messages to those from our source window.\n      // NOTE: the \"srcWindow\" is determined by the below useHostEvent and usePluginEvent functions\n      if (event.source === srcWindow) {\n        // Fire callback if the type from the listened event matches the type from the message event\n        if (event.data.type === type) {\n          callback({ type, payload: event.data.payload });\n        }\n      }\n    };\n    // Add the listener to the global object if the srcWindow is not null\n    if (srcWindow !== null) {\n      global.addEventListener('message', listener);\n    }\n    // useEffect cleanup\n    return () => {\n      global.removeEventListener('message', listener);\n    };\n  }, [srcWindow, type, callback]);\n}\n\n/**\n * Called by the Plugin component to use events that were listened to (ie. PLUGIN_RESIZE)\n */\nexport function useHostEvent(type: string, callback: MessageEventCallback) {\n  useMessageEvent(global.parent, type, callback);\n}\n\n/**\n * Used to listen for events from a wrapped Plugin element (eg. PluginContainerIframe)\n *\n * @param element - Plugin element (eg. <iframe>)\n * @param type - Event type (eg. PLUGIN_RESIZE)\n * @param callback - Function to call when the event is triggered\n */\nexport function usePluginEvent(element: HTMLIFrameElement | undefined, type: string, callback: MessageEventCallback) {\n  const contentWindow = element ? element.contentWindow : null;\n  useMessageEvent(contentWindow, type, callback);\n}\n\n/** Dispatching events */\n\n/**\n * Base dispatch function called by dispatchHostEvent and dispatchPluginEvent.\n * Uses the `postMessage` method to enable cross-origin communication between Window objects\n *\n * @param targetWindow - Window that the message event is being dispatched to\n * @param message - Data object for the message\n * @param targetOrigin - URL for the window that the message event is being dispatched from\n */\nexport function dispatchMessageEvent(targetWindow: Window | null, message: any, targetOrigin: string) {\n  /** Checking targetOrigin falsiness here since '', null or undefined would all be\n   * reasons not to try to post a message to the origin.\n   */\n  if (targetWindow && targetOrigin) {\n    targetWindow.postMessage(message, targetOrigin);\n  }\n}\n\n/**\n * Used to dispatch events for a Plugin\n *\n * @param element - Plugin element (eg. <iframe>)\n * @param message - Data object for the message\n * @param targetOrigin - URL for the window that the message event is being dispatched from\n */\nexport function dispatchPluginEvent(element: HTMLIFrameElement, message: any, targetOrigin: string) {\n  dispatchMessageEvent(element.contentWindow, message, targetOrigin);\n}\n\n/**\n * Used to dispatch events for the Host\n *\n * @param message - Data object for the message\n */\nexport function dispatchHostEvent(message: any) {\n  dispatchMessageEvent(global.parent, message, global.document.referrer);\n}\n\n// Called inside Plugin when 'ready' prop is true\nexport function dispatchReadyEvent() {\n  dispatchHostEvent({ type: IFRAME_READY });\n}\n\n// Below mounted events are called in a useEffect inside Plugin with [] dependencies — https://react.dev/learn/synchronizing-with-effects\nexport function dispatchMountedEvent() {\n  dispatchHostEvent({ type: IFRAME_MOUNTED });\n}\n\nexport function dispatchUnmountedEvent() {\n  dispatchHostEvent({ type: IFRAME_UNMOUNTED });\n}\n\n/**\n * Used to determine the size of an element as it is being resized in the browser.\n * ResizeObserver (https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) is used to maintain a reference to the element's content/border box.\n *\n * @returns Memoized value that contains a reference to the Plugin element (eg. iframe)\n */\nexport function useElementSize() {\n  // Holds a reference to the ResizeObserver\n  const observerRef = useRef<ResizeObserver | null>(null);\n\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });\n  const [offset, setOffset] = useState({ x: 0, y: 0 });\n  const [element, setElement] = useState<HTMLIFrameElement | undefined>();\n  // Sets a reference to the Plugin element when passed to the Plugin element as a \"ref\" attribute (eg. <iframe>)\n  const measuredRef: LegacyRef<HTMLIFrameElement> = useCallback(_element => {\n    setElement(_element);\n  }, []);\n\n  useEffect(() => {\n    // Create a new ResizeObserver\n    observerRef.current = new ResizeObserver(() => {\n      if (element) {\n        // Set dimensions and any offset\n        setDimensions({\n          width: element.clientWidth,\n          height: element.clientHeight,\n        });\n        setOffset({\n          x: element.offsetLeft,\n          y: element.offsetTop,\n        });\n      }\n    });\n    if (element) {\n      // Tell the ResizeObserver to start watching the element — this enables the hook to detect resizing\n      observerRef.current.observe(element);\n    }\n  }, [element]);\n\n  return useMemo<{\n    ref: LegacyRef<HTMLIFrameElement>,\n    element: HTMLIFrameElement | undefined,\n    width: number,\n    height: number,\n    x: number,\n    y: number,\n  }>(\n    () => ({\n      ref: measuredRef,\n      element: element,\n      width: dimensions.width,\n      height: dimensions.height,\n      x: offset.x,\n      y: offset.y\n    }),\n    [measuredRef, element, dimensions, offset],\n  );\n}\n"]}