@openedx/frontend-base 1.0.0-alpha.3 → 1.0.0-alpha.31

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

@@ -0,0 +1,11 @@
+import { LayoutOperationTypes } from './types';
+export function isLayoutOperation(operation) {
+    return Object.values(LayoutOperationTypes).includes(operation.op);
+}
+export function isLayoutOptionsOperation(operation) {
+    return isLayoutOperation(operation) && operation.op === LayoutOperationTypes.OPTIONS;
+}
+export function isLayoutReplaceOperation(operation) {
+    return isLayoutOperation(operation) && operation.op === LayoutOperationTypes.REPLACE;
+}
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../runtime/slots/layout/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,oBAAoB,EAAkD,MAAM,SAAS,CAAC;AAEhH,MAAM,UAAU,iBAAiB,CAAC,SAAwB;IACxD,OAAO,MAAM,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,EAA0B,CAAC,CAAC;AAC5F,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,SAAwB;IAC/D,OAAO,iBAAiB,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC,EAAE,KAAK,oBAAoB,CAAC,OAAO,CAAC;AACvF,CAAC;AAED,MAAM,UAAU,wBAAwB,CAAC,SAAwB;IAC/D,OAAO,iBAAiB,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC,EAAE,KAAK,oBAAoB,CAAC,OAAO,CAAC;AACvF,CAAC","sourcesContent":["import { SlotOperation } from '../types';\nimport { LayoutOperation, LayoutOperationTypes, LayoutOptionsOperation, LayoutReplaceOperation } from './types';\n\nexport function isLayoutOperation(operation: SlotOperation): operation is LayoutOperation {\n  return Object.values(LayoutOperationTypes).includes(operation.op as LayoutOperationTypes);\n}\n\nexport function isLayoutOptionsOperation(operation: SlotOperation): operation is LayoutOptionsOperation {\n  return isLayoutOperation(operation) && operation.op === LayoutOperationTypes.OPTIONS;\n}\n\nexport function isLayoutReplaceOperation(operation: SlotOperation): operation is LayoutReplaceOperation {\n  return isLayoutOperation(operation) && operation.op === LayoutOperationTypes.REPLACE;\n}\n"]}

package/{runtime/slots/types.ts → dist/runtime/slots/types.d.ts}

@@ -3,22 +3,16 @@
  *
  * These are properties shared by all slot operations defined below.
  */
-
 import { LayoutOperation } from './layout/types';
 import { WidgetOperation } from './widget/types';
-
 export interface SlotOperationCondition {
-  active?: string[],
-  inactive?: string[],
-  authenticated?: boolean,
-  callback?: () => boolean,
+    active?: string[];
+    inactive?: string[];
+    authenticated?: boolean;
+    callback?: () => boolean;
 }
-
 export interface BaseSlotOperation {
-  slotId: string,
-  condition?: SlotOperationCondition,
+    slotId: string;
+    condition?: SlotOperationCondition;
 }
-
-// Aggregate Slot Operations
-
 export type SlotOperation = WidgetOperation | LayoutOperation;

package/dist/runtime/slots/types.js

@@ -0,0 +1,7 @@
+/**
+ * Base Slot Operations
+ *
+ * These are properties shared by all slot operations defined below.
+ */
+export {};
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../runtime/slots/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * Base Slot Operations\n *\n * These are properties shared by all slot operations defined below.\n */\n\nimport { LayoutOperation } from './layout/types';\nimport { WidgetOperation } from './widget/types';\n\nexport interface SlotOperationCondition {\n  active?: string[],\n  inactive?: string[],\n  authenticated?: boolean,\n  callback?: () => boolean,\n}\n\nexport interface BaseSlotOperation {\n  slotId: string,\n  condition?: SlotOperationCondition,\n}\n\n// Aggregate Slot Operations\n\nexport type SlotOperation = WidgetOperation | LayoutOperation;\n"]}

package/dist/runtime/slots/utils.d.ts

@@ -0,0 +1,3 @@
+import { SlotOperation } from './types';
+export declare function getSlotOperations(ids: string[], defaultOperation?: SlotOperation): SlotOperation[];
+export declare function isSlotOperationConditionSatisfied(operation: SlotOperation): boolean;

package/dist/runtime/slots/utils.js

@@ -0,0 +1,66 @@
+import { getAuthenticatedUser } from '../auth';
+import { getActiveRoles, getSiteConfig } from '../config';
+export function getSlotOperations(ids, defaultOperation) {
+    const { apps } = getSiteConfig();
+    const ops = [];
+    if (defaultOperation) {
+        ops.push(defaultOperation);
+    }
+    if (apps) {
+        apps.forEach((app) => {
+            if (Array.isArray(app.slots)) {
+                app.slots.forEach((operation) => {
+                    if (ids.includes(operation.slotId)) {
+                        ops.push(operation);
+                    }
+                });
+            }
+        });
+    }
+    return ops;
+}
+export function isSlotOperationConditionSatisfied(operation) {
+    const { condition } = operation;
+    if ((condition === null || condition === void 0 ? void 0 : condition.authenticated) !== undefined) {
+        const isAuthenticated = getAuthenticatedUser() !== null;
+        // If we failed the authenticated condition, return false.
+        if (condition.authenticated !== isAuthenticated) {
+            return false;
+        }
+    }
+    if ((condition === null || condition === void 0 ? void 0 : condition.active) !== undefined || (condition === null || condition === void 0 ? void 0 : condition.inactive) !== undefined) {
+        const activeRoles = getActiveRoles();
+        if ((condition === null || condition === void 0 ? void 0 : condition.active) !== undefined) {
+            let activeConditionRoleFound = false;
+            for (const conditionRole of condition.active) {
+                if (activeRoles.includes(conditionRole)) {
+                    activeConditionRoleFound = true;
+                    break;
+                }
+            }
+            // If we couldn't find an active role in our list, then we've failed this condition.
+            if (!activeConditionRoleFound) {
+                return false;
+            }
+        }
+        if ((condition === null || condition === void 0 ? void 0 : condition.inactive) !== undefined) {
+            let inactiveConditionRoleFound = false;
+            for (const conditionRole of condition.inactive) {
+                if (activeRoles.includes(conditionRole)) {
+                    inactiveConditionRoleFound = true;
+                    break;
+                }
+            }
+            // If we find an active role from our inactive list, then we've failed this condition.
+            if (inactiveConditionRoleFound) {
+                return false;
+            }
+        }
+    }
+    if ((condition === null || condition === void 0 ? void 0 : condition.callback) !== undefined && condition.callback() === false) {
+        return false;
+    }
+    // If there was no condition, we return true.
+    return true;
+}
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../runtime/slots/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAG1D,MAAM,UAAU,iBAAiB,CAAC,GAAa,EAAE,gBAAgC;IAC/E,MAAM,EAAE,IAAI,EAAE,GAAG,aAAa,EAAE,CAAC;IACjC,MAAM,GAAG,GAAoB,EAAE,CAAC;IAEhC,IAAI,gBAAgB,EAAE,CAAC;QACrB,GAAG,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAC7B,CAAC;IAED,IAAI,IAAI,EAAE,CAAC;QACT,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;YACnB,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;gBAC7B,GAAG,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,SAAS,EAAE,EAAE;oBAC9B,IAAI,GAAG,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;wBACnC,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;oBACtB,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,iCAAiC,CAAC,SAAwB;IACxE,MAAM,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC;IAChC,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,aAAa,MAAK,SAAS,EAAE,CAAC;QAC3C,MAAM,eAAe,GAAG,oBAAoB,EAAE,KAAK,IAAI,CAAC;QACxD,0DAA0D;QAC1D,IAAI,SAAS,CAAC,aAAa,KAAK,eAAe,EAAE,CAAC;YAChD,OAAO,KAAK,CAAC;QACf,CAAC;IACH,CAAC;IAED,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,MAAK,SAAS,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,MAAK,SAAS,EAAE,CAAC;QACzE,MAAM,WAAW,GAAa,cAAc,EAAE,CAAC;QAE/C,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,MAAK,SAAS,EAAE,CAAC;YACpC,IAAI,wBAAwB,GAAG,KAAK,CAAC;YACrC,KAAK,MAAM,aAAa,IAAI,SAAS,CAAC,MAAM,EAAE,CAAC;gBAC7C,IAAI,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;oBACxC,wBAAwB,GAAG,IAAI,CAAC;oBAChC,MAAM;gBACR,CAAC;YACH,CAAC;YAED,oFAAoF;YACpF,IAAI,CAAC,wBAAwB,EAAE,CAAC;gBAC9B,OAAO,KAAK,CAAC;YACf,CAAC;QACH,CAAC;QAED,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,MAAK,SAAS,EAAE,CAAC;YACtC,IAAI,0BAA0B,GAAG,KAAK,CAAC;YACvC,KAAK,MAAM,aAAa,IAAI,SAAS,CAAC,QAAQ,EAAE,CAAC;gBAC/C,IAAI,WAAW,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;oBACxC,0BAA0B,GAAG,IAAI,CAAC;oBAClC,MAAM;gBACR,CAAC;YACH,CAAC;YAED,sFAAsF;YACtF,IAAI,0BAA0B,EAAE,CAAC;gBAC/B,OAAO,KAAK,CAAC;YACf,CAAC;QACH,CAAC;IACH,CAAC;IAED,IAAI,CAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,MAAK,SAAS,IAAI,SAAS,CAAC,QAAQ,EAAE,KAAK,KAAK,EAAE,CAAC;QACxE,OAAO,KAAK,CAAC;IACf,CAAC;IAED,6CAA6C;IAC7C,OAAO,IAAI,CAAC;AACd,CAAC","sourcesContent":["import { getAuthenticatedUser } from '../auth';\nimport { getActiveRoles, getSiteConfig } from '../config';\nimport { SlotOperation } from './types';\n\nexport function getSlotOperations(ids: 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 (ids.includes(operation.slotId)) {\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 { WidgetList, WidgetOperation } from './types';
+export declare function useWidgets(): WidgetList;
+export declare function useWidgetsForId(id: string, componentProps?: Record<string, unknown>): WidgetList;
+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 { WidgetList, WidgetOperation } from './types';\nimport { createWidgets, isWidgetAbsoluteOperation, isWidgetOperation, isWidgetOptionsOperation, isWidgetRelativeOperation } from './utils';\nimport WidgetContext from './WidgetContext';\n\nexport function useWidgets(): WidgetList {\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>): WidgetList {\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;
+};