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

package/dist/runtime/slots/hooks.js

@@ -9,7 +9,7 @@ import { createWidgetAppendOperation } from './widget';
  * config as it changes.
  */
 export function useSlotOperations(id) {
-    const { children } = useSlotContext();
+    const { children, idAliases } = useSlotContext();
     const location = useLocation();
     const [operations, setOperations] = useState([]);
     useEffect(() => {
@@ -17,10 +17,10 @@ export function useSlotOperations(id) {
         // when [children] props change.  This avoids an endless render loop.  After all, the whole
         // point of a slot is to modify its children via slot operations.
         const defaultOperation = createWidgetAppendOperation('defaultContent', id, children);
-        setOperations(getSlotOperations(id, defaultOperation));
+        setOperations(getSlotOperations([id, ...(idAliases !== null && idAliases !== void 0 ? idAliases : [])], defaultOperation));
         // We depend on [location] to force re-renders on navigation.  This guarantees changes in active
         // roles (and thus, changes in what conditional widgets are shown) properly.
-    }, [id, children, location]);
+    }, [id, children, idAliases, location]);
     return operations;
 }
 export function useSlotContext() {

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

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../runtime/slots/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAEvD;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAU;IAC1C,MAAM,EAAE,QAAQ,EAAE,GAAG,cAAc,EAAE,CAAC;IACtC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAC;IAElE,SAAS,CAAC,GAAG,EAAE;QACb,4FAA4F;QAC5F,2FAA2F;QAC3F,iEAAiE;QACjE,MAAM,gBAAgB,GAAG,2BAA2B,CAAC,gBAAgB,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAC;QACrF,aAAa,CAAC,iBAAiB,CAAC,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC;QAEvD,gGAAgG;QAChG,4EAA4E;IAC9E,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,OAAO,UAAU,CAAC,WAAW,CAAC,CAAC;AACjC,CAAC","sourcesContent":["import { useContext, useEffect, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\n\nimport { SlotOperation } from './types';\nimport { getSlotOperations } from './utils';\nimport SlotContext from './SlotContext';\nimport { createWidgetAppendOperation } from './widget';\n\n/**\n * The useSlotOperations hook will trigger re-renders when the slot configuration changes.\n * It is a fundamental hook that is used by many of the others to ensure they're using up-to-date\n * config as it changes.\n */\nexport function useSlotOperations(id: string) {\n  const { children } = useSlotContext();\n  const location = useLocation();\n  const [operations, setOperations] = useState<SlotOperation[]>([]);\n\n  useEffect(() => {\n    // Setting default content has to happen inside `useEffect()` so that re-renders only happen\n    // when [children] props change.  This avoids an endless render loop.  After all, the whole\n    // point of a slot is to modify its children via slot operations.\n    const defaultOperation = createWidgetAppendOperation('defaultContent', id, children);\n    setOperations(getSlotOperations(id, defaultOperation));\n\n    // We depend on [location] to force re-renders on navigation.  This guarantees changes in active\n    // roles (and thus, changes in what conditional widgets are shown) properly.\n  }, [id, children, location]);\n\n  return operations;\n}\n\nexport function useSlotContext() {\n  return useContext(SlotContext);\n}\n"]}
+{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../runtime/slots/hooks.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAG/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,2BAA2B,EAAE,MAAM,UAAU,CAAC;AAEvD;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,EAAU;IAC1C,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAC;IACjD,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAkB,EAAE,CAAC,CAAC;IAElE,SAAS,CAAC,GAAG,EAAE;QACb,4FAA4F;QAC5F,2FAA2F;QAC3F,iEAAiE;QACjE,MAAM,gBAAgB,GAAG,2BAA2B,CAAC,gBAAgB,EAAE,EAAE,EAAE,QAAQ,CAAC,CAAC;QACrF,aAAa,CAAC,iBAAiB,CAAC,CAAC,EAAE,EAAE,GAAG,CAAC,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC;QAE/E,gGAAgG;QAChG,4EAA4E;IAC9E,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC;IAExC,OAAO,UAAU,CAAC;AACpB,CAAC;AAED,MAAM,UAAU,cAAc;IAC5B,OAAO,UAAU,CAAC,WAAW,CAAC,CAAC;AACjC,CAAC","sourcesContent":["import { useContext, useEffect, useState } from 'react';\nimport { useLocation } from 'react-router-dom';\n\nimport { SlotOperation } from './types';\nimport { getSlotOperations } from './utils';\nimport SlotContext from './SlotContext';\nimport { createWidgetAppendOperation } from './widget';\n\n/**\n * The useSlotOperations hook will trigger re-renders when the slot configuration changes.\n * It is a fundamental hook that is used by many of the others to ensure they're using up-to-date\n * config as it changes.\n */\nexport function useSlotOperations(id: string) {\n  const { children, idAliases } = useSlotContext();\n  const location = useLocation();\n  const [operations, setOperations] = useState<SlotOperation[]>([]);\n\n  useEffect(() => {\n    // Setting default content has to happen inside `useEffect()` so that re-renders only happen\n    // when [children] props change.  This avoids an endless render loop.  After all, the whole\n    // point of a slot is to modify its children via slot operations.\n    const defaultOperation = createWidgetAppendOperation('defaultContent', id, children);\n    setOperations(getSlotOperations([id, ...(idAliases ?? [])], defaultOperation));\n\n    // We depend on [location] to force re-renders on navigation.  This guarantees changes in active\n    // roles (and thus, changes in what conditional widgets are shown) properly.\n  }, [id, children, idAliases, location]);\n\n  return operations;\n}\n\nexport function useSlotContext() {\n  return useContext(SlotContext);\n}\n"]}

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

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

package/dist/runtime/slots/utils.js

@@ -1,6 +1,6 @@
 import { getAuthenticatedUser } from '../auth';
 import { getActiveRoles, getSiteConfig } from '../config';
-export function getSlotOperations(id, defaultOperation) {
+export function getSlotOperations(ids, defaultOperation) {
     const { apps } = getSiteConfig();
     const ops = [];
     if (defaultOperation) {
@@ -10,7 +10,7 @@ export function getSlotOperations(id, defaultOperation) {
         apps.forEach((app) => {
             if (Array.isArray(app.slots)) {
                 app.slots.forEach((operation) => {
-                    if (operation.slotId === id) {
+                    if (ids.includes(operation.slotId)) {
                         ops.push(operation);
                     }
                 });

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

@@ -1 +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"]}
+{"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(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/hooks.d.ts

@@ -1,6 +1,6 @@
-import { WidgetOperation } from './types';
-export declare function useWidgets(): import("react").ReactNode[];
-export declare function useWidgetsForId(id: string, componentProps?: Record<string, unknown>): import("react").ReactNode[];
+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[];
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"hooks.js","sourceRoot":"","sources":["../../../../runtime/slots/widget/hooks.ts"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAC7D,OAAO,EAAE,iCAAiC,EAAE,MAAM,UAAU,CAAC;AAE7D,OAAO,EAAE,aAAa,EAAE,yBAAyB,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAC3I,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,MAAM,UAAU,UAAU;IACxB,MAAM,KAAmB,cAAc,EAAE,EAAnC,EAAE,EAAE,OAA+B,EAA1B,KAAK,cAAd,MAAgB,CAAmB,CAAC;IAC1C,OAAO,KAAK,CAAC,QAAQ,CAAC;IACtB,OAAO,eAAe,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;AACpC,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,EAAU,EAAE,cAAwC;IAClF,MAAM,UAAU,GAAG,yBAAyB,CAAC,EAAE,CAAC,CAAC;IACjD,OAAO,aAAa,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AACnD,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,EAAU;IAC5C,MAAM,UAAU,GAAG,iBAAiB,CAAC,EAAE,CAAC,CAAC;IACzC,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAoB,EAAE,CAAC,CAAC;IAEhF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,SAAS,EAAgC,EAAE;YACvF,OAAO,iBAAiB,CAAC,SAAS,CAAC,IAAI,iCAAiC,CAAC,SAAS,CAAC,CAAC;QACtF,CAAC,CAAC,CAAC;QAEH,mBAAmB,CAAC,kBAAkB,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,gBAAgB,CAAC;AAC1B,CAAC;AAED,MAAM,UAAU,yBAAyB,CAAC,EAAU;IAClD,MAAM,UAAU,GAAG,mBAAmB,CAAC,EAAE,CAAC,CAAC;IAC3C,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAoB,EAAE,CAAC,CAAC;IAEhF,SAAS,CAAC,GAAG,EAAE;QACb,sFAAsF;QACtF,gGAAgG;QAChG,wFAAwF;QACxF,iGAAiG;QACjG,oBAAoB;QACpB,MAAM,gBAAgB,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,CAAkB,EAAE,CAAkB,EAAE,EAAE;YAClF,6EAA6E;YAC7E,MAAM,SAAS,GAAG,yBAAyB,CAAC,CAAC,CAAC,CAAC;YAC/C,MAAM,SAAS,GAAG,yBAAyB,CAAC,CAAC,CAAC,CAAC;YAC/C,IAAI,SAAS,IAAI,SAAS,EAAE,CAAC;gBAC3B,OAAO,CAAC,CAAC;YACX,CAAC;iBAAM,IAAI,SAAS,EAAE,CAAC;gBACrB,OAAO,CAAC,CAAC,CAAC;YACZ,CAAC;iBAAM,IAAI,SAAS,EAAE,CAAC;gBACrB,OAAO,CAAC,CAAC;YACX,CAAC;iBAAM,IAAI,yBAAyB,CAAC,CAAC,CAAC,IAAI,yBAAyB,CAAC,CAAC,CAAC,EAAE,CAAC;gBACxE,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC;oBACzB,OAAO,CAAC,CAAC,CAAC;gBACZ,CAAC;qBAAM,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,SAAS,EAAE,CAAC;oBAChC,OAAO,CAAC,CAAC;gBACX,CAAC;YACH,CAAC;YAED,OAAO,CAAC,CAAC;QACX,CAAC,CAAC,CAAC;QAEH,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,OAAO,gBAAgB,CAAC;AAC1B,CAAC;AAED;;;;;GAKG;AACH,MAAM,UAAU,gBAAgB;IAC9B,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IACvD,OAAO,qBAAqB,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AACjD,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,MAAc,EAAE,QAAgB;IACpE,MAAM,UAAU,GAAG,mBAAmB,CAAC,MAAM,CAAC,CAAC;IAE/C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAA0B,EAAE,CAAC,CAAC;IACpE,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,GAAG,EAAE;YACvB,IAAI,WAAW,GAA4B,EAAE,CAAC;YAC9C,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE,CAAC;gBACnC,IAAI,iCAAiC,CAAC,SAAS,CAAC,EAAE,CAAC;oBACjD,IAAI,wBAAwB,CAAC,SAAS,CAAC,EAAE,CAAC;wBACxC,IAAI,SAAS,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC;4BACrC,WAAW,mCAAQ,WAAW,GAAK,SAAS,CAAC,OAAO,CAAE,CAAC;wBACzD,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC;YACD,OAAO,WAAW,CAAC;QACrB,CAAC,CAAC;QAEF,UAAU,CAAC,WAAW,EAAE,CAAC,CAAC;IAC5B,CAAC,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAE3B,OAAO,OAAO,CAAC;AACjB,CAAC","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"]}
+{"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/types.d.ts

@@ -96,5 +96,13 @@ export type WidgetOperation = WidgetAbsoluteOperation | WidgetRelativeOperation;
  */
 export interface IdentifiedWidget {
     id: string;
+    role?: string;
     node: ReactNode;
 }
+export interface WidgetList extends Array<ReactNode> {
+    identified: IdentifiedWidget[];
+    byId(id: string): ReactNode[];
+    withoutId(id: string): ReactNode[];
+    byRole(role: string): ReactNode[];
+    withoutRole(role: string): ReactNode[];
+}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../runtime/slots/widget/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,MAAM,CAAN,IAAY,oBAmCX;AAnCD,WAAY,oBAAoB;IAC9B;;OAEG;IACH,+CAAuB,CAAA;IAEvB;;OAEG;IACH,iDAAyB,CAAA;IAEzB;;OAEG;IACH,0DAAkC,CAAA;IAElC;;OAEG;IACH,4DAAoC,CAAA;IAEpC;;OAEG;IACH,iDAAyB,CAAA;IAEzB;;OAEG;IACH,+CAAuB,CAAA;IAEvB;;OAEG;IACH,iDAAyB,CAAA;AAC3B,CAAC,EAnCW,oBAAoB,KAApB,oBAAoB,QAmC/B","sourcesContent":["/**\n * Base UI Widget Operations\n *\n * \"Widget\" operations are a sub-type of UI operations which allow manipulation of the list of widgets (UI components) loaded into the slot.  Widget operations are divided further into two sub-types: absolute and relative.\n *\n * Absolute widget operations allow simple list operations like appending and prepending which don't depend on any other list elements.\n *\n * Relative widget operations depend on a relationship to some other list element, such as \"insert before\" and \"insert after\".  Some affect those elements, some add something to the list near them.\n */\n\nimport { ReactNode } from 'react';\nimport { BaseSlotOperation } from '../types';\n\nexport enum WidgetOperationTypes {\n  /**\n   * Adds a widget to the end of the slot's list of widgets.\n   */\n  APPEND = 'widgetAppend',\n\n  /**\n   * Adds a widget to the beginning of the slot's list of widgets.\n   */\n  PREPEND = 'widgetPrepend',\n\n  /**\n   * Adds a widget after the specified widget ID.  Multiple \"insert after\" operations on the same widget ID occur in the order they were declared.\n   */\n  INSERT_AFTER = 'widgetInsertAfter',\n\n  /**\n   * Adds a widget before the specified widget ID.  Multiple \"insert after\" operations on the same widget ID occur in the order they were declared.\n   */\n  INSERT_BEFORE = 'widgetInsertBefore',\n\n  /**\n   * Removes the specified widget ID and adds a widget in its place.  Multiple \"replace\" operations on the same widget ID occur in the order they were declared, and only the first will succeed unless the new widget's ID is the same as the one that was removed.\n   */\n  REPLACE = 'widgetReplace',\n\n  /**\n   * Removes the specified widget ID from the slot's list of widgets.  Subsequent relative widget operations on that widget ID will not be applied.\n   */\n  REMOVE = 'widgetRemove',\n\n  /**\n   * Provides options to the specified widget ID.  Multiple \"options\" operations on the same widget ID will merge with and override any duplicate properties in the options object - last one in wins.\n   */\n  OPTIONS = 'widgetOptions',\n}\n\nexport type AbsoluteWidgetOperationTypes = WidgetOperationTypes.APPEND | WidgetOperationTypes.PREPEND;\n\nexport type RelativeWidgetOperationTypes = WidgetOperationTypes.INSERT_AFTER | WidgetOperationTypes.INSERT_BEFORE | WidgetOperationTypes.REPLACE | WidgetOperationTypes.OPTIONS;\n\nexport interface BaseWidgetOperation extends BaseSlotOperation {\n  op: WidgetOperationTypes,\n}\n\n// Widget renderer props\n\nexport interface WidgetComponentProps {\n  component: React.ComponentType,\n}\n\nexport interface WidgetElementProps {\n  element: ReactNode,\n}\n\nexport interface WidgetIFrameProps {\n  url: string,\n  title: string,\n}\n\nexport type WidgetRendererProps = (\n  WidgetComponentProps | WidgetElementProps | WidgetIFrameProps\n);\n\nexport interface WidgetIdentityProps {\n  id: string,\n  role?: string,\n}\n\nexport interface WidgetRelationshipProps {\n  relatedId: string,\n}\n\n// Concrete UI Widget Operations\n\nexport type WidgetAppendOperation = BaseWidgetOperation & WidgetIdentityProps & WidgetRendererProps & {\n  op: WidgetOperationTypes.APPEND,\n};\n\nexport type WidgetPrependOperation = BaseWidgetOperation & WidgetIdentityProps & WidgetRendererProps & {\n  op: WidgetOperationTypes.PREPEND,\n};\n\nexport type WidgetInsertAfterOperation = BaseWidgetOperation & WidgetIdentityProps & WidgetRendererProps & WidgetRelationshipProps & {\n  op: WidgetOperationTypes.INSERT_AFTER,\n};\n\nexport type WidgetInsertBeforeOperation = BaseWidgetOperation & WidgetIdentityProps & WidgetRendererProps & WidgetRelationshipProps & {\n  op: WidgetOperationTypes.INSERT_BEFORE,\n};\n\nexport type WidgetRemoveOperation = BaseWidgetOperation & WidgetRelationshipProps & {\n  op: WidgetOperationTypes.REMOVE,\n};\n\nexport type WidgetOptionsOperation = BaseWidgetOperation & WidgetRelationshipProps & {\n  op: WidgetOperationTypes.OPTIONS,\n  options: Record<string, unknown>,\n};\n\nexport type WidgetReplaceOperation = BaseWidgetOperation & WidgetIdentityProps & WidgetRendererProps & WidgetRelationshipProps & { op: WidgetOperationTypes.REPLACE };\n\nexport type WidgetAbsoluteOperation = WidgetAppendOperation | WidgetPrependOperation;\n\nexport type WidgetRelativeRendererOperation = WidgetInsertAfterOperation | WidgetInsertBeforeOperation | WidgetReplaceOperation;\n\nexport type WidgetRelativeOperation = WidgetRelativeRendererOperation | WidgetRemoveOperation | WidgetOptionsOperation;\n\nexport type WidgetRendererOperation = WidgetAbsoluteOperation | WidgetRelativeRendererOperation;\n\nexport type WidgetOperation = WidgetAbsoluteOperation | WidgetRelativeOperation;\n\n/**\n * An identified widget is a simple data structure to associate an ID with a ReactNode so we can\n * apply widget operations to our list of widgets.  It helps us find a ReactNode with a particular\n * ID for relative widget operations.\n */\nexport interface IdentifiedWidget {\n  id: string,\n  node: ReactNode,\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../runtime/slots/widget/types.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAKH,MAAM,CAAN,IAAY,oBAmCX;AAnCD,WAAY,oBAAoB;IAC9B;;OAEG;IACH,+CAAuB,CAAA;IAEvB;;OAEG;IACH,iDAAyB,CAAA;IAEzB;;OAEG;IACH,0DAAkC,CAAA;IAElC;;OAEG;IACH,4DAAoC,CAAA;IAEpC;;OAEG;IACH,iDAAyB,CAAA;IAEzB;;OAEG;IACH,+CAAuB,CAAA;IAEvB;;OAEG;IACH,iDAAyB,CAAA;AAC3B,CAAC,EAnCW,oBAAoB,KAApB,oBAAoB,QAmC/B","sourcesContent":["/**\n * Base UI Widget Operations\n *\n * \"Widget\" operations are a sub-type of UI operations which allow manipulation of the list of widgets (UI components) loaded into the slot.  Widget operations are divided further into two sub-types: absolute and relative.\n *\n * Absolute widget operations allow simple list operations like appending and prepending which don't depend on any other list elements.\n *\n * Relative widget operations depend on a relationship to some other list element, such as \"insert before\" and \"insert after\".  Some affect those elements, some add something to the list near them.\n */\n\nimport { ReactNode } from 'react';\nimport { BaseSlotOperation } from '../types';\n\nexport enum WidgetOperationTypes {\n  /**\n   * Adds a widget to the end of the slot's list of widgets.\n   */\n  APPEND = 'widgetAppend',\n\n  /**\n   * Adds a widget to the beginning of the slot's list of widgets.\n   */\n  PREPEND = 'widgetPrepend',\n\n  /**\n   * Adds a widget after the specified widget ID.  Multiple \"insert after\" operations on the same widget ID occur in the order they were declared.\n   */\n  INSERT_AFTER = 'widgetInsertAfter',\n\n  /**\n   * Adds a widget before the specified widget ID.  Multiple \"insert after\" operations on the same widget ID occur in the order they were declared.\n   */\n  INSERT_BEFORE = 'widgetInsertBefore',\n\n  /**\n   * Removes the specified widget ID and adds a widget in its place.  Multiple \"replace\" operations on the same widget ID occur in the order they were declared, and only the first will succeed unless the new widget's ID is the same as the one that was removed.\n   */\n  REPLACE = 'widgetReplace',\n\n  /**\n   * Removes the specified widget ID from the slot's list of widgets.  Subsequent relative widget operations on that widget ID will not be applied.\n   */\n  REMOVE = 'widgetRemove',\n\n  /**\n   * Provides options to the specified widget ID.  Multiple \"options\" operations on the same widget ID will merge with and override any duplicate properties in the options object - last one in wins.\n   */\n  OPTIONS = 'widgetOptions',\n}\n\nexport type AbsoluteWidgetOperationTypes = WidgetOperationTypes.APPEND | WidgetOperationTypes.PREPEND;\n\nexport type RelativeWidgetOperationTypes = WidgetOperationTypes.INSERT_AFTER | WidgetOperationTypes.INSERT_BEFORE | WidgetOperationTypes.REPLACE | WidgetOperationTypes.OPTIONS;\n\nexport interface BaseWidgetOperation extends BaseSlotOperation {\n  op: WidgetOperationTypes,\n}\n\n// Widget renderer props\n\nexport interface WidgetComponentProps {\n  component: React.ComponentType,\n}\n\nexport interface WidgetElementProps {\n  element: ReactNode,\n}\n\nexport interface WidgetIFrameProps {\n  url: string,\n  title: string,\n}\n\nexport type WidgetRendererProps = (\n  WidgetComponentProps | WidgetElementProps | WidgetIFrameProps\n);\n\nexport interface WidgetIdentityProps {\n  id: string,\n  role?: string,\n}\n\nexport interface WidgetRelationshipProps {\n  relatedId: string,\n}\n\n// Concrete UI Widget Operations\n\nexport type WidgetAppendOperation = BaseWidgetOperation & WidgetIdentityProps & WidgetRendererProps & {\n  op: WidgetOperationTypes.APPEND,\n};\n\nexport type WidgetPrependOperation = BaseWidgetOperation & WidgetIdentityProps & WidgetRendererProps & {\n  op: WidgetOperationTypes.PREPEND,\n};\n\nexport type WidgetInsertAfterOperation = BaseWidgetOperation & WidgetIdentityProps & WidgetRendererProps & WidgetRelationshipProps & {\n  op: WidgetOperationTypes.INSERT_AFTER,\n};\n\nexport type WidgetInsertBeforeOperation = BaseWidgetOperation & WidgetIdentityProps & WidgetRendererProps & WidgetRelationshipProps & {\n  op: WidgetOperationTypes.INSERT_BEFORE,\n};\n\nexport type WidgetRemoveOperation = BaseWidgetOperation & WidgetRelationshipProps & {\n  op: WidgetOperationTypes.REMOVE,\n};\n\nexport type WidgetOptionsOperation = BaseWidgetOperation & WidgetRelationshipProps & {\n  op: WidgetOperationTypes.OPTIONS,\n  options: Record<string, unknown>,\n};\n\nexport type WidgetReplaceOperation = BaseWidgetOperation & WidgetIdentityProps & WidgetRendererProps & WidgetRelationshipProps & { op: WidgetOperationTypes.REPLACE };\n\nexport type WidgetAbsoluteOperation = WidgetAppendOperation | WidgetPrependOperation;\n\nexport type WidgetRelativeRendererOperation = WidgetInsertAfterOperation | WidgetInsertBeforeOperation | WidgetReplaceOperation;\n\nexport type WidgetRelativeOperation = WidgetRelativeRendererOperation | WidgetRemoveOperation | WidgetOptionsOperation;\n\nexport type WidgetRendererOperation = WidgetAbsoluteOperation | WidgetRelativeRendererOperation;\n\nexport type WidgetOperation = WidgetAbsoluteOperation | WidgetRelativeOperation;\n\n/**\n * An identified widget is a simple data structure to associate an ID with a ReactNode so we can\n * apply widget operations to our list of widgets.  It helps us find a ReactNode with a particular\n * ID for relative widget operations.\n */\nexport interface IdentifiedWidget {\n  id: string,\n  role?: string,\n  node: ReactNode,\n}\n\nexport interface WidgetList extends Array<ReactNode> {\n  identified: IdentifiedWidget[],\n  byId(id: string): ReactNode[],\n  withoutId(id: string): ReactNode[],\n  byRole(role: string): ReactNode[],\n  withoutRole(role: string): ReactNode[],\n}\n"]}

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

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { SlotOperation } from '../types';
-import { WidgetAbsoluteOperation, WidgetAppendOperation, WidgetElementProps, WidgetIdentityProps, WidgetInsertAfterOperation, WidgetInsertBeforeOperation, WidgetOperation, WidgetOperationTypes, WidgetOptionsOperation, WidgetPrependOperation, WidgetRemoveOperation, WidgetRendererOperation, WidgetReplaceOperation } from './types';
+import { WidgetAbsoluteOperation, WidgetAppendOperation, WidgetElementProps, WidgetIdentityProps, WidgetInsertAfterOperation, WidgetInsertBeforeOperation, WidgetList, WidgetOperation, WidgetOperationTypes, WidgetOptionsOperation, WidgetPrependOperation, WidgetRemoveOperation, WidgetRendererOperation, WidgetReplaceOperation } from './types';
 export declare function isWidgetOperation(operation: SlotOperation): operation is WidgetOperation;
 export declare function isWidgetAbsoluteOperation(operation: WidgetOperation): operation is WidgetAbsoluteOperation;
 export declare function isWidgetRelativeOperation(operation: WidgetOperation): operation is (WidgetInsertAfterOperation | WidgetInsertBeforeOperation);
@@ -19,4 +19,4 @@ export declare function isWidgetIdentityRoleOperation(operation: SlotOperation):
 export declare function createWidgetAppendOperation(id: string, slotId: string, element: ReactNode): (import("./types").BaseWidgetOperation & WidgetIdentityProps & WidgetElementProps & {
     op: WidgetOperationTypes.APPEND;
 }) | undefined;
-export declare function createWidgets(operations: WidgetOperation[], componentProps?: Record<string, unknown>): ReactNode[];
+export declare function createWidgets(operations: WidgetOperation[], componentProps?: Record<string, unknown>): WidgetList;

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

@@ -90,6 +90,7 @@ function createIdentifiedWidget(operation, componentProps) {
     }
     return {
         id,
+        role: operation.role,
         node: (_jsx(WidgetProvider, { slotId: operation.slotId, widgetId: operation.id, role: operation.role, children: widget }, id)),
     };
 }
@@ -136,6 +137,24 @@ function removeWidget(operation, widgets) {
         widgets.splice(relatedIndex, 1);
     }
 }
+function createWidgetList(identifiedWidgets) {
+    const nodes = identifiedWidgets.map(widget => widget.node);
+    const widgetList = nodes;
+    widgetList.identified = identifiedWidgets;
+    widgetList.byId = (id) => {
+        return identifiedWidgets.filter(w => w.id === id).map(w => w.node);
+    };
+    widgetList.withoutId = (id) => {
+        return identifiedWidgets.filter(w => w.id !== id).map(w => w.node);
+    };
+    widgetList.byRole = (role) => {
+        return identifiedWidgets.filter(w => w.role === role).map(w => w.node);
+    };
+    widgetList.withoutRole = (role) => {
+        return identifiedWidgets.filter(w => w.role !== role).map(w => w.node);
+    };
+    return widgetList;
+}
 export function createWidgets(operations, componentProps) {
     const identifiedWidgets = [];
     for (const operation of operations) {
@@ -160,7 +179,6 @@ export function createWidgets(operations, componentProps) {
             }
         }
     }
-    // Remove the 'id' metadata and return just the nodes.
-    return identifiedWidgets.map(widget => widget.node);
+    return createWidgetList(identifiedWidgets);
 }
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../runtime/slots/widget/utils.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode } from 'react';\nimport { SlotOperation } from '../types';\nimport { isSlotOperationConditionSatisfied } from '../utils';\nimport { IFrameWidget } from './iframe';\nimport { IdentifiedWidget, WidgetAbsoluteOperation, WidgetAppendOperation, WidgetComponentProps, WidgetElementProps, WidgetIdentityProps, WidgetIFrameProps, WidgetInsertAfterOperation, WidgetInsertBeforeOperation, WidgetOperation, WidgetOperationTypes, WidgetOptionsOperation, WidgetPrependOperation, WidgetRemoveOperation, WidgetRendererOperation, WidgetRendererProps, WidgetReplaceOperation } from './types';\nimport WidgetProvider from './WidgetProvider';\n\nexport function isWidgetOperation(operation: SlotOperation): operation is WidgetOperation {\n  return Object.values(WidgetOperationTypes).includes(operation.op as WidgetOperationTypes);\n}\n\nexport function isWidgetAbsoluteOperation(operation: WidgetOperation): operation is WidgetAbsoluteOperation {\n  return operation.op === WidgetOperationTypes.APPEND || operation.op === WidgetOperationTypes.PREPEND;\n}\n\nexport function isWidgetRelativeOperation(operation: WidgetOperation): operation is (WidgetInsertAfterOperation | WidgetInsertBeforeOperation) {\n  return operation.op === WidgetOperationTypes.INSERT_AFTER || operation.op === WidgetOperationTypes.INSERT_BEFORE;\n}\n\nexport function isWidgetAppendOperation(operation: SlotOperation): operation is WidgetAppendOperation {\n  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.APPEND;\n}\n\nexport function isWidgetInsertAfterOperation(operation: SlotOperation): operation is WidgetInsertAfterOperation {\n  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.INSERT_AFTER;\n}\n\nexport function isWidgetInsertBeforeOperation(operation: SlotOperation): operation is WidgetInsertBeforeOperation {\n  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.INSERT_BEFORE;\n}\n\nexport function isWidgetPrependOperation(operation: SlotOperation): operation is WidgetPrependOperation {\n  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.PREPEND;\n}\n\nexport function isWidgetRemoveOperation(operation: SlotOperation): operation is WidgetRemoveOperation {\n  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.REMOVE;\n}\n\nexport function isWidgetReplaceOperation(operation: SlotOperation): operation is WidgetReplaceOperation {\n  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.REPLACE;\n}\n\nexport function isWidgetOptionsOperation(operation: SlotOperation): operation is WidgetOptionsOperation {\n  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.OPTIONS;\n}\n\nexport function isWidgetRendererOperation(operation: SlotOperation): operation is WidgetRendererOperation {\n  return isWidgetOperation(operation) && hasWidgetRendererProps(operation);\n}\n\nexport function isWidgetIdentityOperation(operation: SlotOperation): operation is (WidgetOperation & WidgetIdentityProps) {\n  return isWidgetOperation(operation) && hasWidgetIdentityProps(operation);\n}\n\nexport function isWidgetIdentityRoleOperation(operation: SlotOperation): operation is (WidgetOperation & WidgetIdentityProps & { role: string }) {\n  return isWidgetIdentityOperation(operation) && hasWidgetIdentityRoleProps(operation);\n}\n\nexport function createWidgetAppendOperation(id: string, slotId: string, element: ReactNode) {\n  let operation: WidgetOperation | undefined = undefined;\n  if (element) {\n    operation = {\n      slotId,\n      id,\n      op: WidgetOperationTypes.APPEND,\n      element\n    };\n  }\n\n  return operation;\n}\n\n// Widget Operation props helpers\n\nfunction hasWidgetComponentProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetComponentProps) {\n  return isWidgetOperation(operation) && 'component' in operation;\n}\n\nfunction hasWidgetElementProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetElementProps) {\n  return isWidgetOperation(operation) && 'element' in operation;\n}\n\nfunction hasWidgetIFrameProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetIFrameProps) {\n  return isWidgetOperation(operation) && 'url' in operation && 'title' in operation;\n}\n\nfunction hasWidgetRendererProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetRendererProps) {\n  return hasWidgetComponentProps(operation) || hasWidgetElementProps(operation) || hasWidgetIFrameProps(operation);\n}\n\nfunction hasWidgetIdentityProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetIdentityProps) {\n  return isWidgetOperation(operation) && 'id' in operation;\n}\n\nfunction hasWidgetIdentityRoleProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetIdentityProps & { role: string }) {\n  return hasWidgetIdentityProps(operation) && 'role' in operation;\n}\n\n/**\n * An 'identified' widget just means a data structure with an ID and a ReactNode.\n */\nfunction createIdentifiedWidget(operation: WidgetRendererOperation, componentProps?: Record<string, unknown>) {\n  let widget: ReactNode = null;\n  const { id } = operation;\n  if (hasWidgetComponentProps(operation)) {\n    widget = (\n      <operation.component {...componentProps} />\n    );\n  } else if (hasWidgetElementProps(operation)) {\n    widget = operation.element;\n  } else if (hasWidgetIFrameProps(operation)) {\n    widget = (\n      <IFrameWidget url={operation.url} title={operation.title} />\n    );\n  }\n\n  return {\n    id,\n    node: (\n      <WidgetProvider key={id} slotId={operation.slotId} widgetId={operation.id} role={operation.role}>\n        {widget}\n      </WidgetProvider>\n    ),\n  };\n}\n\nfunction findRelatedWidgetIndex(id: string, widgets: IdentifiedWidget[]) {\n  for (const candidateRelatedWidget of widgets) {\n    if (candidateRelatedWidget.id === id) {\n      return widgets.indexOf(candidateRelatedWidget);\n    }\n  }\n  return null;\n}\n\nfunction appendWidget(operation: WidgetAppendOperation, widgets: IdentifiedWidget[], componentProps?: Record<string, unknown>) {\n  const widget = createIdentifiedWidget(operation, componentProps);\n  widgets.push(widget);\n}\n\nfunction prependWidget(operation: WidgetPrependOperation, widgets: IdentifiedWidget[], componentProps?: Record<string, unknown>) {\n  const widget = createIdentifiedWidget(operation, componentProps);\n  widgets.unshift(widget);\n}\n\nfunction insertAfterWidget(operation: WidgetInsertAfterOperation, widgets: IdentifiedWidget[], componentProps?: Record<string, unknown>) {\n  const widget = createIdentifiedWidget(operation, componentProps);\n  const relatedIndex = findRelatedWidgetIndex(operation.relatedId, widgets);\n  if (relatedIndex !== null) {\n    widgets.splice(relatedIndex + 1, 0, widget);\n  }\n}\n\nfunction insertBeforeWidget(operation: WidgetInsertBeforeOperation, widgets: IdentifiedWidget[], componentProps?: Record<string, unknown>) {\n  const widget = createIdentifiedWidget(operation, componentProps);\n  const relatedIndex = findRelatedWidgetIndex(operation.relatedId, widgets);\n  if (relatedIndex !== null) {\n    widgets.splice(relatedIndex, 0, widget);\n  }\n}\n\nfunction replaceWidget(operation: WidgetReplaceOperation, widgets: IdentifiedWidget[], componentProps?: Record<string, unknown>) {\n  const widget = createIdentifiedWidget(operation, componentProps);\n  const relatedIndex = findRelatedWidgetIndex(operation.relatedId, widgets);\n  if (relatedIndex !== null) {\n    widgets.splice(relatedIndex, 1, widget);\n  }\n}\n\nfunction removeWidget(operation: WidgetRemoveOperation, widgets: IdentifiedWidget[]) {\n  const relatedIndex = findRelatedWidgetIndex(operation.relatedId, widgets);\n  if (relatedIndex !== null) {\n    widgets.splice(relatedIndex, 1);\n  }\n}\n\nexport function createWidgets(operations: WidgetOperation[], componentProps?: Record<string, unknown>) {\n  const identifiedWidgets: IdentifiedWidget[] = [];\n\n  for (const operation of operations) {\n    if (isSlotOperationConditionSatisfied(operation)) {\n      if (isWidgetAppendOperation(operation)) {\n        appendWidget(operation, identifiedWidgets, componentProps);\n      } else if (isWidgetPrependOperation(operation)) {\n        prependWidget(operation, identifiedWidgets, componentProps);\n      } else if (isWidgetInsertAfterOperation(operation)) {\n        insertAfterWidget(operation, identifiedWidgets, componentProps);\n      } else if (isWidgetInsertBeforeOperation(operation)) {\n        insertBeforeWidget(operation, identifiedWidgets, componentProps);\n      } else if (isWidgetReplaceOperation(operation)) {\n        replaceWidget(operation, identifiedWidgets, componentProps);\n      } else if (isWidgetRemoveOperation(operation)) {\n        removeWidget(operation, identifiedWidgets);\n      }\n    }\n  }\n\n  // Remove the 'id' metadata and return just the nodes.\n  return identifiedWidgets.map(widget => widget.node);\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../runtime/slots/widget/utils.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode } from 'react';\nimport { SlotOperation } from '../types';\nimport { isSlotOperationConditionSatisfied } from '../utils';\nimport { IFrameWidget } from './iframe';\nimport { IdentifiedWidget, WidgetAbsoluteOperation, WidgetAppendOperation, WidgetComponentProps, WidgetElementProps, WidgetIdentityProps, WidgetIFrameProps, WidgetInsertAfterOperation, WidgetInsertBeforeOperation, WidgetList, WidgetOperation, WidgetOperationTypes, WidgetOptionsOperation, WidgetPrependOperation, WidgetRemoveOperation, WidgetRendererOperation, WidgetRendererProps, WidgetReplaceOperation } from './types';\nimport WidgetProvider from './WidgetProvider';\n\nexport function isWidgetOperation(operation: SlotOperation): operation is WidgetOperation {\n  return Object.values(WidgetOperationTypes).includes(operation.op as WidgetOperationTypes);\n}\n\nexport function isWidgetAbsoluteOperation(operation: WidgetOperation): operation is WidgetAbsoluteOperation {\n  return operation.op === WidgetOperationTypes.APPEND || operation.op === WidgetOperationTypes.PREPEND;\n}\n\nexport function isWidgetRelativeOperation(operation: WidgetOperation): operation is (WidgetInsertAfterOperation | WidgetInsertBeforeOperation) {\n  return operation.op === WidgetOperationTypes.INSERT_AFTER || operation.op === WidgetOperationTypes.INSERT_BEFORE;\n}\n\nexport function isWidgetAppendOperation(operation: SlotOperation): operation is WidgetAppendOperation {\n  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.APPEND;\n}\n\nexport function isWidgetInsertAfterOperation(operation: SlotOperation): operation is WidgetInsertAfterOperation {\n  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.INSERT_AFTER;\n}\n\nexport function isWidgetInsertBeforeOperation(operation: SlotOperation): operation is WidgetInsertBeforeOperation {\n  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.INSERT_BEFORE;\n}\n\nexport function isWidgetPrependOperation(operation: SlotOperation): operation is WidgetPrependOperation {\n  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.PREPEND;\n}\n\nexport function isWidgetRemoveOperation(operation: SlotOperation): operation is WidgetRemoveOperation {\n  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.REMOVE;\n}\n\nexport function isWidgetReplaceOperation(operation: SlotOperation): operation is WidgetReplaceOperation {\n  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.REPLACE;\n}\n\nexport function isWidgetOptionsOperation(operation: SlotOperation): operation is WidgetOptionsOperation {\n  return isWidgetOperation(operation) && operation.op === WidgetOperationTypes.OPTIONS;\n}\n\nexport function isWidgetRendererOperation(operation: SlotOperation): operation is WidgetRendererOperation {\n  return isWidgetOperation(operation) && hasWidgetRendererProps(operation);\n}\n\nexport function isWidgetIdentityOperation(operation: SlotOperation): operation is (WidgetOperation & WidgetIdentityProps) {\n  return isWidgetOperation(operation) && hasWidgetIdentityProps(operation);\n}\n\nexport function isWidgetIdentityRoleOperation(operation: SlotOperation): operation is (WidgetOperation & WidgetIdentityProps & { role: string }) {\n  return isWidgetIdentityOperation(operation) && hasWidgetIdentityRoleProps(operation);\n}\n\nexport function createWidgetAppendOperation(id: string, slotId: string, element: ReactNode) {\n  let operation: WidgetOperation | undefined = undefined;\n  if (element) {\n    operation = {\n      slotId,\n      id,\n      op: WidgetOperationTypes.APPEND,\n      element\n    };\n  }\n\n  return operation;\n}\n\n// Widget Operation props helpers\n\nfunction hasWidgetComponentProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetComponentProps) {\n  return isWidgetOperation(operation) && 'component' in operation;\n}\n\nfunction hasWidgetElementProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetElementProps) {\n  return isWidgetOperation(operation) && 'element' in operation;\n}\n\nfunction hasWidgetIFrameProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetIFrameProps) {\n  return isWidgetOperation(operation) && 'url' in operation && 'title' in operation;\n}\n\nfunction hasWidgetRendererProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetRendererProps) {\n  return hasWidgetComponentProps(operation) || hasWidgetElementProps(operation) || hasWidgetIFrameProps(operation);\n}\n\nfunction hasWidgetIdentityProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetIdentityProps) {\n  return isWidgetOperation(operation) && 'id' in operation;\n}\n\nfunction hasWidgetIdentityRoleProps(operation: WidgetOperation): operation is (WidgetOperation & WidgetIdentityProps & { role: string }) {\n  return hasWidgetIdentityProps(operation) && 'role' in operation;\n}\n\n/**\n * An 'identified' widget just means a data structure with an ID and a ReactNode.\n */\nfunction createIdentifiedWidget(operation: WidgetRendererOperation, componentProps?: Record<string, unknown>) {\n  let widget: ReactNode = null;\n  const { id } = operation;\n  if (hasWidgetComponentProps(operation)) {\n    widget = (\n      <operation.component {...componentProps} />\n    );\n  } else if (hasWidgetElementProps(operation)) {\n    widget = operation.element;\n  } else if (hasWidgetIFrameProps(operation)) {\n    widget = (\n      <IFrameWidget url={operation.url} title={operation.title} />\n    );\n  }\n\n  return {\n    id,\n    role: operation.role,\n    node: (\n      <WidgetProvider key={id} slotId={operation.slotId} widgetId={operation.id} role={operation.role}>\n        {widget}\n      </WidgetProvider>\n    ),\n  };\n}\n\nfunction findRelatedWidgetIndex(id: string, widgets: IdentifiedWidget[]) {\n  for (const candidateRelatedWidget of widgets) {\n    if (candidateRelatedWidget.id === id) {\n      return widgets.indexOf(candidateRelatedWidget);\n    }\n  }\n  return null;\n}\n\nfunction appendWidget(operation: WidgetAppendOperation, widgets: IdentifiedWidget[], componentProps?: Record<string, unknown>) {\n  const widget = createIdentifiedWidget(operation, componentProps);\n  widgets.push(widget);\n}\n\nfunction prependWidget(operation: WidgetPrependOperation, widgets: IdentifiedWidget[], componentProps?: Record<string, unknown>) {\n  const widget = createIdentifiedWidget(operation, componentProps);\n  widgets.unshift(widget);\n}\n\nfunction insertAfterWidget(operation: WidgetInsertAfterOperation, widgets: IdentifiedWidget[], componentProps?: Record<string, unknown>) {\n  const widget = createIdentifiedWidget(operation, componentProps);\n  const relatedIndex = findRelatedWidgetIndex(operation.relatedId, widgets);\n  if (relatedIndex !== null) {\n    widgets.splice(relatedIndex + 1, 0, widget);\n  }\n}\n\nfunction insertBeforeWidget(operation: WidgetInsertBeforeOperation, widgets: IdentifiedWidget[], componentProps?: Record<string, unknown>) {\n  const widget = createIdentifiedWidget(operation, componentProps);\n  const relatedIndex = findRelatedWidgetIndex(operation.relatedId, widgets);\n  if (relatedIndex !== null) {\n    widgets.splice(relatedIndex, 0, widget);\n  }\n}\n\nfunction replaceWidget(operation: WidgetReplaceOperation, widgets: IdentifiedWidget[], componentProps?: Record<string, unknown>) {\n  const widget = createIdentifiedWidget(operation, componentProps);\n  const relatedIndex = findRelatedWidgetIndex(operation.relatedId, widgets);\n  if (relatedIndex !== null) {\n    widgets.splice(relatedIndex, 1, widget);\n  }\n}\n\nfunction removeWidget(operation: WidgetRemoveOperation, widgets: IdentifiedWidget[]) {\n  const relatedIndex = findRelatedWidgetIndex(operation.relatedId, widgets);\n  if (relatedIndex !== null) {\n    widgets.splice(relatedIndex, 1);\n  }\n}\n\nfunction createWidgetList(identifiedWidgets: IdentifiedWidget[]): WidgetList {\n  const nodes = identifiedWidgets.map(widget => widget.node);\n  const widgetList = nodes as WidgetList;\n\n  widgetList.identified = identifiedWidgets;\n\n  widgetList.byId = (id: string): ReactNode[] => {\n    return identifiedWidgets.filter(w => w.id === id).map(w => w.node);\n  };\n\n  widgetList.withoutId = (id: string): ReactNode[] => {\n    return identifiedWidgets.filter(w => w.id !== id).map(w => w.node);\n  };\n\n  widgetList.byRole = (role: string): ReactNode[] => {\n    return identifiedWidgets.filter(w => w.role === role).map(w => w.node);\n  };\n\n  widgetList.withoutRole = (role: string): ReactNode[] => {\n    return identifiedWidgets.filter(w => w.role !== role).map(w => w.node);\n  };\n\n  return widgetList;\n}\n\nexport function createWidgets(operations: WidgetOperation[], componentProps?: Record<string, unknown>): WidgetList {\n  const identifiedWidgets: IdentifiedWidget[] = [];\n\n  for (const operation of operations) {\n    if (isSlotOperationConditionSatisfied(operation)) {\n      if (isWidgetAppendOperation(operation)) {\n        appendWidget(operation, identifiedWidgets, componentProps);\n      } else if (isWidgetPrependOperation(operation)) {\n        prependWidget(operation, identifiedWidgets, componentProps);\n      } else if (isWidgetInsertAfterOperation(operation)) {\n        insertAfterWidget(operation, identifiedWidgets, componentProps);\n      } else if (isWidgetInsertBeforeOperation(operation)) {\n        insertBeforeWidget(operation, identifiedWidgets, componentProps);\n      } else if (isWidgetReplaceOperation(operation)) {\n        replaceWidget(operation, identifiedWidgets, componentProps);\n      } else if (isWidgetRemoveOperation(operation)) {\n        removeWidget(operation, identifiedWidgets);\n      }\n    }\n  }\n\n  return createWidgetList(identifiedWidgets);\n}\n"]}

package/dist/shell/Logo.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { IntlProvider } from 'react-intl';
 import { Hyperlink, Image } from '@openedx/paragon';
-export default function Logo({ imageUrl = 'https://edx-cdn.org/v3/default/logo.svg', destinationUrl }) {
+import { getSiteConfig } from '../runtime/config';
+export default function Logo(_a) {
+    var _b;
+    var { imageUrl = (_b = getSiteConfig().headerLogoImageUrl) !== null && _b !== void 0 ? _b : 'https://edx-cdn.org/v3/default/logo.svg', destinationUrl } = _a;
     const image = (_jsx(Image, { src: imageUrl, style: { maxHeight: '2rem' } }));
     if (destinationUrl === undefined) {
         return image;

package/dist/shell/Logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"Logo.js","sourceRoot":"","sources":["../../shell/Logo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAOpD,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,QAAQ,GAAG,yCAAyC,EACpD,cAAc,EACJ;IACV,MAAM,KAAK,GAAG,CACZ,KAAC,KAAK,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,GAAI,CACvD,CAAC;IAEF,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;QACjC,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,KAAC,YAAY,IAAC,MAAM,EAAC,IAAI,YACvB,KAAC,SAAS,IAAC,WAAW,EAAE,cAAc,EAAE,SAAS,EAAC,KAAK,YACpD,KAAK,GACI,GACC,CAChB,CAAC;AACJ,CAAC","sourcesContent":["import { IntlProvider } from 'react-intl';\nimport { Hyperlink, Image } from '@openedx/paragon';\n\ninterface LogoProps {\n  imageUrl?: string,\n  destinationUrl?: string,\n}\n\nexport default function Logo({\n  imageUrl = 'https://edx-cdn.org/v3/default/logo.svg',\n  destinationUrl\n}: LogoProps) {\n  const image = (\n    <Image src={imageUrl} style={{ maxHeight: '2rem' }} />\n  );\n\n  if (destinationUrl === undefined) {\n    return image;\n  }\n\n  return (\n    <IntlProvider locale=\"en\">\n      <Hyperlink destination={destinationUrl} className=\"p-0\">\n        {image}\n      </Hyperlink>\n    </IntlProvider>\n  );\n}\n"]}
+{"version":3,"file":"Logo.js","sourceRoot":"","sources":["../../shell/Logo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAOlD,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAGjB;;QAHiB,EAC3B,QAAQ,GAAG,MAAA,aAAa,EAAE,CAAC,kBAAkB,mCAAI,yCAAyC,EAC1F,cAAc;IAEd,MAAM,KAAK,GAAG,CACZ,KAAC,KAAK,IAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,GAAI,CACvD,CAAC;IAEF,IAAI,cAAc,KAAK,SAAS,EAAE,CAAC;QACjC,OAAO,KAAK,CAAC;IACf,CAAC;IAED,OAAO,CACL,KAAC,YAAY,IAAC,MAAM,EAAC,IAAI,YACvB,KAAC,SAAS,IAAC,WAAW,EAAE,cAAc,EAAE,SAAS,EAAC,KAAK,YACpD,KAAK,GACI,GACC,CAChB,CAAC;AACJ,CAAC","sourcesContent":["import { IntlProvider } from 'react-intl';\nimport { Hyperlink, Image } from '@openedx/paragon';\nimport { getSiteConfig } from '../runtime/config';\n\ninterface LogoProps {\n  imageUrl?: string,\n  destinationUrl?: string,\n}\n\nexport default function Logo({\n  imageUrl = getSiteConfig().headerLogoImageUrl ?? 'https://edx-cdn.org/v3/default/logo.svg',\n  destinationUrl\n}: LogoProps) {\n  const image = (\n    <Image src={imageUrl} style={{ maxHeight: '2rem' }} />\n  );\n\n  if (destinationUrl === undefined) {\n    return image;\n  }\n\n  return (\n    <IntlProvider locale=\"en\">\n      <Hyperlink destination={destinationUrl} className=\"p-0\">\n        {image}\n      </Hyperlink>\n    </IntlProvider>\n  );\n}\n"]}

package/dist/shell/dev/devHome/HomePage.js

@@ -4,9 +4,9 @@ import { useIntl } from '../../../runtime';
 import { getUrlByRouteRole } from '../../../runtime/routing';
 import messages from './messages';
 export default function HomePage() {
-    const coursewareUrl = getUrlByRouteRole('courseware');
-    const dashboardUrl = getUrlByRouteRole('learnerDashboard');
-    const slotShowcaseUrl = getUrlByRouteRole('slotShowcase');
+    const coursewareUrl = getUrlByRouteRole('org.openedx.frontend.role.courseware');
+    const dashboardUrl = getUrlByRouteRole('org.openedx.frontend.role.dashboard');
+    const slotShowcaseUrl = getUrlByRouteRole('org.openedx.frontend.role.slotShowcase');
     const intl = useIntl();
     return (_jsxs("div", { className: "p-3", children: [_jsx("p", { children: intl.formatMessage(messages.homeContent) }), _jsxs("ul", { children: [coursewareUrl !== null && (_jsx("li", { children: _jsx(Link, { to: coursewareUrl, children: "Go to courseware page" }) })), dashboardUrl !== null && (_jsx("li", { children: _jsx(Link, { to: dashboardUrl, children: "Go to dashboard page" }) })), slotShowcaseUrl !== null && (_jsx("li", { children: _jsx(Link, { to: slotShowcaseUrl, children: "Go to slot showcase page" }) }))] })] }));
 }

package/dist/shell/dev/devHome/HomePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"HomePage.js","sourceRoot":"","sources":["../../../../shell/dev/devHome/HomePage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC9B,MAAM,aAAa,GAAG,iBAAiB,CAAC,YAAY,CAAC,CAAC;IACtD,MAAM,YAAY,GAAG,iBAAiB,CAAC,kBAAkB,CAAC,CAAC;IAC3D,MAAM,eAAe,GAAG,iBAAiB,CAAC,cAAc,CAAC,CAAC;IAC1D,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,OAAO,CACL,eAAK,SAAS,EAAC,KAAK,aAClB,sBAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAK,EACjD,yBACG,aAAa,KAAK,IAAI,IAAI,CACzB,uBAAI,KAAC,IAAI,IAAC,EAAE,EAAE,aAAa,sCAA8B,GAAK,CAC/D,EACA,YAAY,KAAK,IAAI,IAAI,CACxB,uBAAI,KAAC,IAAI,IAAC,EAAE,EAAE,YAAY,qCAA6B,GAAK,CAC7D,EACA,eAAe,KAAK,IAAI,IAAI,CAC3B,uBAAI,KAAC,IAAI,IAAC,EAAE,EAAE,eAAe,yCAAiC,GAAK,CACpE,IACE,IACD,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { Link } from 'react-router-dom';\nimport { useIntl } from '../../../runtime';\nimport { getUrlByRouteRole } from '../../../runtime/routing';\nimport messages from './messages';\n\nexport default function HomePage() {\n  const coursewareUrl = getUrlByRouteRole('courseware');\n  const dashboardUrl = getUrlByRouteRole('learnerDashboard');\n  const slotShowcaseUrl = getUrlByRouteRole('slotShowcase');\n  const intl = useIntl();\n\n  return (\n    <div className=\"p-3\">\n      <p>{intl.formatMessage(messages.homeContent)}</p>\n      <ul>\n        {coursewareUrl !== null && (\n          <li><Link to={coursewareUrl}>Go to courseware page</Link></li>\n        )}\n        {dashboardUrl !== null && (\n          <li><Link to={dashboardUrl}>Go to dashboard page</Link></li>\n        )}\n        {slotShowcaseUrl !== null && (\n          <li><Link to={slotShowcaseUrl}>Go to slot showcase page</Link></li>\n        )}\n      </ul>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"HomePage.js","sourceRoot":"","sources":["../../../../shell/dev/devHome/HomePage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,QAAQ,MAAM,YAAY,CAAC;AAElC,MAAM,CAAC,OAAO,UAAU,QAAQ;IAC9B,MAAM,aAAa,GAAG,iBAAiB,CAAC,sCAAsC,CAAC,CAAC;IAChF,MAAM,YAAY,GAAG,iBAAiB,CAAC,qCAAqC,CAAC,CAAC;IAC9E,MAAM,eAAe,GAAG,iBAAiB,CAAC,wCAAwC,CAAC,CAAC;IACpF,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,OAAO,CACL,eAAK,SAAS,EAAC,KAAK,aAClB,sBAAI,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,WAAW,CAAC,GAAK,EACjD,yBACG,aAAa,KAAK,IAAI,IAAI,CACzB,uBAAI,KAAC,IAAI,IAAC,EAAE,EAAE,aAAa,sCAA8B,GAAK,CAC/D,EACA,YAAY,KAAK,IAAI,IAAI,CACxB,uBAAI,KAAC,IAAI,IAAC,EAAE,EAAE,YAAY,qCAA6B,GAAK,CAC7D,EACA,eAAe,KAAK,IAAI,IAAI,CAC3B,uBAAI,KAAC,IAAI,IAAC,EAAE,EAAE,eAAe,yCAAiC,GAAK,CACpE,IACE,IACD,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { Link } from 'react-router-dom';\nimport { useIntl } from '../../../runtime';\nimport { getUrlByRouteRole } from '../../../runtime/routing';\nimport messages from './messages';\n\nexport default function HomePage() {\n  const coursewareUrl = getUrlByRouteRole('org.openedx.frontend.role.courseware');\n  const dashboardUrl = getUrlByRouteRole('org.openedx.frontend.role.dashboard');\n  const slotShowcaseUrl = getUrlByRouteRole('org.openedx.frontend.role.slotShowcase');\n  const intl = useIntl();\n\n  return (\n    <div className=\"p-3\">\n      <p>{intl.formatMessage(messages.homeContent)}</p>\n      <ul>\n        {coursewareUrl !== null && (\n          <li><Link to={coursewareUrl}>Go to courseware page</Link></li>\n        )}\n        {dashboardUrl !== null && (\n          <li><Link to={dashboardUrl}>Go to dashboard page</Link></li>\n        )}\n        {slotShowcaseUrl !== null && (\n          <li><Link to={slotShowcaseUrl}>Go to slot showcase page</Link></li>\n        )}\n      </ul>\n    </div>\n  );\n}\n"]}

package/dist/shell/dev/slotShowcase/HorizontalSlotLayout.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack } from '@openedx/paragon';
 import { useWidgets } from '../../../runtime';
 export default function HorizontalSlotLayout() {
     const widgets = useWidgets();
-    return (_jsx("div", { className: "d-flex gap-3", children: widgets }));
+    return (_jsx(Stack, { direction: "horizontal", gap: 3, children: widgets }));
 }
 //# sourceMappingURL=HorizontalSlotLayout.js.map

package/dist/shell/dev/slotShowcase/HorizontalSlotLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalSlotLayout.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/HorizontalSlotLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC1C,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,OAAO,CACL,cAAK,SAAS,EAAC,cAAc,YAC1B,OAAO,GACJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useWidgets } from '../../../runtime';\n\nexport default function HorizontalSlotLayout() {\n  const widgets = useWidgets();\n\n  return (\n    <div className=\"d-flex gap-3\">\n      {widgets}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"HorizontalSlotLayout.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/HorizontalSlotLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC1C,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,OAAO,CACL,KAAC,KAAK,IAAC,SAAS,EAAC,YAAY,EAAC,GAAG,EAAE,CAAC,YACjC,OAAO,GACF,CACT,CAAC;AACJ,CAAC","sourcesContent":["import { Stack } from '@openedx/paragon';\nimport { useWidgets } from '../../../runtime';\n\nexport default function HorizontalSlotLayout() {\n  const widgets = useWidgets();\n\n  return (\n    <Stack direction=\"horizontal\" gap={3}>\n      {widgets}\n    </Stack>\n  );\n}\n"]}

package/dist/shell/dev/slotShowcase/LayoutWithOptions.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useLayoutOptions, useWidgets } from '../../../runtime';
 export default function LayoutWithOptions() {
     const widgets = useWidgets();
     const options = useLayoutOptions();
     const title = typeof options.title === 'string' ? options.title : 'Foo';
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { children: ["Layout Title: ", _jsx("strong", { children: title })] }), _jsx("div", { children: widgets })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "showcase-layout-title", children: ["Layout Title: ", title] }), _jsx("div", { children: widgets })] }));
 }
 //# sourceMappingURL=LayoutWithOptions.js.map

package/dist/shell/dev/slotShowcase/LayoutWithOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutWithOptions.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/LayoutWithOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEhE,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACvC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IAEnC,MAAM,KAAK,GAAG,OAAO,OAAO,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAExE,OAAO,CACL,8BACE,4CAAmB,2BAAS,KAAK,GAAU,IAAM,EACjD,wBACG,OAAO,GACJ,IACL,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { useLayoutOptions, useWidgets } from '../../../runtime';\n\nexport default function LayoutWithOptions() {\n  const widgets = useWidgets();\n  const options = useLayoutOptions();\n\n  const title = typeof options.title === 'string' ? options.title : 'Foo';\n\n  return (\n    <>\n      <div>Layout Title: <strong>{title}</strong></div>\n      <div>\n        {widgets}\n      </div>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"LayoutWithOptions.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/LayoutWithOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEhE,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACvC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IAEnC,MAAM,KAAK,GAAG,OAAO,OAAO,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAExE,OAAO,CACL,8BACE,eAAK,SAAS,EAAC,uBAAuB,+BAAgB,KAAK,IAAO,EAClE,wBACG,OAAO,GACJ,IACL,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import { useLayoutOptions, useWidgets } from '../../../runtime';\n\nexport default function LayoutWithOptions() {\n  const widgets = useWidgets();\n  const options = useLayoutOptions();\n\n  const title = typeof options.title === 'string' ? options.title : 'Foo';\n\n  return (\n    <>\n      <div className=\"showcase-layout-title\">Layout Title: {title}</div>\n      <div>\n        {widgets}\n      </div>\n    </>\n  );\n}\n"]}

package/dist/shell/dev/slotShowcase/SlotShowcasePage.d.ts

@@ -1 +1,2 @@
+import './SlotShowcase.scss';
 export default function SlotShowcasePage(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/dev/slotShowcase/SlotShowcasePage.js

@@ -1,8 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, Container } from '@openedx/paragon';
 import { Slot } from '../../../runtime';
 import HorizontalSlotLayout from './HorizontalSlotLayout';
 import LayoutWithOptions from './LayoutWithOptions';
+import ToggleByRoleLayout from './ToggleByRoleLayout';
+import './SlotShowcase.scss';
+function SlotContainer({ children }) {
+    return (_jsx(Card, { className: "showcase-slot", children: _jsx(Card.Body, { children: children }) }));
+}
+function Section({ title, children }) {
+    return (_jsxs("div", { children: [_jsx("h3", { className: "text-primary-500", children: title }), children] }));
+}
 export default function SlotShowcasePage() {
-    return (_jsxs("div", { className: "p-3", children: [_jsx("h1", { children: "Slot Showcase" }), _jsxs("p", { children: ["As a best practice, widgets should pass additional props (", _jsx("code", { children: "...props" }), ") to their rendered HTMLElement. This accomplishes two things:"] }), _jsxs("ul", { children: [_jsxs("li", { children: ["It allows custom layouts to add ", _jsx("code", { children: "className" }), " and ", _jsx("code", { children: "style" }), " props as necessary for the layout."] }), _jsx("li", { children: "It allows widgets to be effectively \"wrapped\" by a parent component to alter their behavior." })] }), _jsx("h3", { children: "Simple slot with default layout" }), _jsx("p", { children: "This slot has no opinionated layout, it just renders its children." }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseSimple" }), _jsx("h3", { children: "Simple slot with default content and props" }), _jsx("p", { children: "This slot has default content, and it exposes a slot prop to widgets." }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseSimpleWithDefaultContent", aSlotProp: "hello!", children: _jsx("div", { children: "Look, I'm default content!" }) }), _jsx("h2", { children: "UI Layout Operations" }), _jsx("h3", { children: "Slot with custom layout" }), _jsx("p", { children: "This slot uses a horizontal flexbox layout from a component." }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseCustom", layout: HorizontalSlotLayout }), _jsx("p", { children: "This slot uses a horizontal flexbox layout from a JSX element." }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseCustom", layout: _jsx(HorizontalSlotLayout, {}) }), _jsx("h3", { children: "Slot with override custom layout" }), _jsx("p", { children: "This slot uses a horizontal flexbox layout, but it was added by a layout replace operation." }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseCustomConfig" }), _jsx("h3", { children: "Slot with layout options" }), _jsx("p", { children: "These slots use a custom layout that takes options.  The first shows the default title, the second shows it set to \"Bar\"" }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault", layout: LayoutWithOptions }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions", layout: LayoutWithOptions }), _jsx("h2", { children: "UI Widget Operations" }), _jsx("h3", { children: "Slot with prepended element" }), _jsx("p", { children: "This slot has a prepended element (and two appended elements)." }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcasePrepending" }), _jsx("h3", { children: "Slot with inserted elements" }), _jsxs("p", { children: ["This slot has elements inserted before and after the second element. Also note that the insert operations are declared ", _jsx("em", { children: "before" }), " the related element is declared, but can still insert themselves relative to it."] }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseInserting" }), _jsx("h3", { children: "Slot with replaced element" }), _jsx("p", { children: "This slot has an element replacing element two." }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseReplacing" }), _jsx("h3", { children: "Slot with removed element" }), _jsxs("p", { children: ["This slot has removed element two (", _jsx("code", { children: "WidgetOperationTypes.REMOVE" }), ")."] }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseRemoving" }), _jsx("h3", { children: "Slot with widget with options." }), _jsx("p", { children: "Both widgets accept options.  The first shows the default title, the second shows it set to \"Bar\"" }), _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseWidgetOptions" })] }));
+    return (_jsxs(Container, { size: "xl", className: "showcase-page py-4", children: [_jsxs("div", { className: "showcase-full-width", children: [_jsx("h1", { children: "Slot Showcase" }), _jsxs("p", { children: ["As a best practice, widgets should pass additional props (", _jsx("code", { children: "...props" }), ") to their rendered HTMLElement.  This allows custom layouts to add ", _jsx("code", { children: "className" }), " and ", _jsx("code", { children: "style" }), " props as necessary for the layout."] })] }), _jsxs(Section, { title: "Simple slot with default layout", children: [_jsx("p", { children: "This slot has no opinionated layout, it just renders its children." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseSimple" }) })] }), _jsxs(Section, { title: "Simple slot with default content and props", children: [_jsx("p", { children: "This slot has default content, and it exposes a slot prop to widgets." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseSimpleWithDefaultContent", aSlotProp: "hello!", children: _jsx("div", { className: "showcase-widget", children: "Look, I'm default content!" }) }) })] }), _jsx("h2", { className: "showcase-divider", children: "UI Layout Operations" }), _jsxs(Section, { title: "Slot with custom layout (component)", children: [_jsx("p", { children: "This slot uses a horizontal flexbox layout from a component." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseCustom", layout: HorizontalSlotLayout }) })] }), _jsxs(Section, { title: "Slot with custom layout (element)", children: [_jsx("p", { children: "This slot uses a horizontal flexbox layout from a JSX element." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseCustom", layout: _jsx(HorizontalSlotLayout, {}) }) })] }), _jsxs(Section, { title: "Slot with override custom layout", children: [_jsx("p", { children: "This slot uses a horizontal flexbox layout, but it was added by a layout replace operation." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseCustomConfig" }) })] }), _jsxs(Section, { title: "Slot with layout options (default)", children: [_jsx("p", { children: "This slot uses a custom layout that takes options.  It shows the default title." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault", layout: LayoutWithOptions }) })] }), _jsxs(Section, { title: "Slot with layout options (configured)", children: [_jsx("p", { children: "Same layout, but the title option is set to \"Bar\"." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions", layout: LayoutWithOptions }) })] }), _jsxs(Section, { title: "Slot with widget filtering by role", children: [_jsxs("p", { children: ["This slot has four widgets, two with a \"highlighted\" role.  The layout uses ", _jsx("code", { children: "widgets.byRole()" }), " to toggle between all and highlighted."] }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseFilterByRole", layout: ToggleByRoleLayout }) })] }), _jsx("h2", { className: "showcase-divider", children: "UI Widget Operations" }), _jsxs(Section, { title: "Slot with prepended element", children: [_jsx("p", { children: "This slot has a prepended element (and two appended elements)." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcasePrepending" }) })] }), _jsxs(Section, { title: "Slot with inserted elements", children: [_jsxs("p", { children: ["This slot has elements inserted before and after the second element. The insert operations are declared ", _jsx("em", { children: "before" }), " the related element, but can still insert themselves relative to it."] }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseInserting" }) })] }), _jsxs(Section, { title: "Slot with replaced element", children: [_jsx("p", { children: "This slot has an element replacing element two." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseReplacing" }) })] }), _jsxs(Section, { title: "Slot with removed element", children: [_jsxs("p", { children: ["This slot has removed element two (", _jsx("code", { children: "WidgetOperationTypes.REMOVE" }), ")."] }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseRemoving" }) })] }), _jsxs(Section, { title: "Slot with widget options (default)", children: [_jsx("p", { children: "This widget accepts options.  It shows the default title." }), _jsx(SlotContainer, { children: _jsx(Slot, { id: "org.openedx.frontend.slot.dev.slotShowcaseWidgetOptions" }) })] })] }));
 }
 //# sourceMappingURL=SlotShowcasePage.js.map

package/dist/shell/dev/slotShowcase/SlotShowcasePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlotShowcasePage.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/SlotShowcasePage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,oBAAoB,MAAM,wBAAwB,CAAC;AAC1D,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACtC,OAAO,CACL,eAAK,SAAS,EAAC,KAAK,aAClB,yCAAsB,EAEtB,sFAA6D,sCAAqB,sEAAkE,EACpJ,yBACE,6DAAoC,uCAAsB,WAAK,mCAAkB,2CAAwC,EACzH,0HAA+G,IAC5G,EAEL,2DAAwC,EACxC,6FAAyE,EACzE,KAAC,IAAI,IAAC,EAAE,EAAC,kDAAkD,GAAG,EAE9D,sEAAmD,EACnD,gGAA4E,EAC5E,KAAC,IAAI,IAAC,EAAE,EAAC,oEAAoE,EAAC,SAAS,EAAC,QAAQ,YAC9F,uDAA0C,GACrC,EAEP,gDAA6B,EAE7B,mDAAgC,EAChC,uFAAmE,EACnE,KAAC,IAAI,IAAC,EAAE,EAAC,kDAAkD,EAAC,MAAM,EAAE,oBAAoB,GAAI,EAC5F,yFAAqE,EACrE,KAAC,IAAI,IAAC,EAAE,EAAC,kDAAkD,EAAC,MAAM,EAAE,KAAC,oBAAoB,KAAG,GAAI,EAEhG,4DAAyC,EACzC,sHAAkG,EAClG,KAAC,IAAI,IAAC,EAAE,EAAC,wDAAwD,GAAG,EAEpE,oDAAiC,EACjC,qJAAyI,EACzI,KAAC,IAAI,IAAC,EAAE,EAAC,oEAAoE,EAAC,MAAM,EAAE,iBAAiB,GAAI,EAC3G,KAAC,IAAI,IAAC,EAAE,EAAC,6DAA6D,EAAC,MAAM,EAAE,iBAAiB,GAAI,EAEpG,gDAA6B,EAE7B,uDAAoC,EACpC,yFAAqE,EACrE,KAAC,IAAI,IAAC,EAAE,EAAC,sDAAsD,GAAG,EAElE,uDAAoC,EACpC,mJAA0H,kCAAe,yFAAqF,EAC9N,KAAC,IAAI,IAAC,EAAE,EAAC,qDAAqD,GAAG,EAEjE,sDAAmC,EACnC,0EAAsD,EACtD,KAAC,IAAI,IAAC,EAAE,EAAC,qDAAqD,GAAG,EAEjE,qDAAkC,EAClC,+DAAsC,yDAAwC,UAAM,EACpF,KAAC,IAAI,IAAC,EAAE,EAAC,oDAAoD,GAAG,EAEhE,0DAAuC,EACvC,8HAAkH,EAClH,KAAC,IAAI,IAAC,EAAE,EAAC,yDAAyD,GAAG,IACjE,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { Slot } from '../../../runtime';\nimport HorizontalSlotLayout from './HorizontalSlotLayout';\nimport LayoutWithOptions from './LayoutWithOptions';\n\nexport default function SlotShowcasePage() {\n  return (\n    <div className=\"p-3\">\n      <h1>Slot Showcase</h1>\n\n      <p>As a best practice, widgets should pass additional props (<code>...props</code>) to their rendered HTMLElement. This accomplishes two things:</p>\n      <ul>\n        <li>It allows custom layouts to add <code>className</code> and <code>style</code> props as necessary for the layout.</li>\n        <li>It allows widgets to be effectively &quot;wrapped&quot; by a parent component to alter their behavior.</li>\n      </ul>\n\n      <h3>Simple slot with default layout</h3>\n      <p>This slot has no opinionated layout, it just renders its children.</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseSimple\" />\n\n      <h3>Simple slot with default content and props</h3>\n      <p>This slot has default content, and it exposes a slot prop to widgets.</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseSimpleWithDefaultContent\" aSlotProp=\"hello!\">\n        <div>Look, I&apos;m default content!</div>\n      </Slot>\n\n      <h2>UI Layout Operations</h2>\n\n      <h3>Slot with custom layout</h3>\n      <p>This slot uses a horizontal flexbox layout from a component.</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseCustom\" layout={HorizontalSlotLayout} />\n      <p>This slot uses a horizontal flexbox layout from a JSX element.</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseCustom\" layout={<HorizontalSlotLayout />} />\n\n      <h3>Slot with override custom layout</h3>\n      <p>This slot uses a horizontal flexbox layout, but it was added by a layout replace operation.</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseCustomConfig\" />\n\n      <h3>Slot with layout options</h3>\n      <p>These slots use a custom layout that takes options.  The first shows the default title, the second shows it set to &quot;Bar&quot;</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault\" layout={LayoutWithOptions} />\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions\" layout={LayoutWithOptions} />\n\n      <h2>UI Widget Operations</h2>\n\n      <h3>Slot with prepended element</h3>\n      <p>This slot has a prepended element (and two appended elements).</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcasePrepending\" />\n\n      <h3>Slot with inserted elements</h3>\n      <p>This slot has elements inserted before and after the second element. Also note that the insert operations are declared <em>before</em> the related element is declared, but can still insert themselves relative to it.</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseInserting\" />\n\n      <h3>Slot with replaced element</h3>\n      <p>This slot has an element replacing element two.</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseReplacing\" />\n\n      <h3>Slot with removed element</h3>\n      <p>This slot has removed element two (<code>WidgetOperationTypes.REMOVE</code>).</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseRemoving\" />\n\n      <h3>Slot with widget with options.</h3>\n      <p>Both widgets accept options.  The first shows the default title, the second shows it set to &quot;Bar&quot;</p>\n      <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseWidgetOptions\" />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"SlotShowcasePage.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/SlotShowcasePage.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ReactNode } from 'react';\nimport { Card, Container } from '@openedx/paragon';\nimport { Slot } from '../../../runtime';\nimport HorizontalSlotLayout from './HorizontalSlotLayout';\nimport LayoutWithOptions from './LayoutWithOptions';\nimport ToggleByRoleLayout from './ToggleByRoleLayout';\nimport './SlotShowcase.scss';\n\nfunction SlotContainer({ children }: { children: ReactNode }) {\n  return (\n    <Card className=\"showcase-slot\">\n      <Card.Body>\n        {children}\n      </Card.Body>\n    </Card>\n  );\n}\n\nfunction Section({ title, children }: { title: string, children: ReactNode }) {\n  return (\n    <div>\n      <h3 className=\"text-primary-500\">{title}</h3>\n      {children}\n    </div>\n  );\n}\n\nexport default function SlotShowcasePage() {\n  return (\n    <Container size=\"xl\" className=\"showcase-page py-4\">\n      <div className=\"showcase-full-width\">\n        <h1>Slot Showcase</h1>\n        <p>As a best practice, widgets should pass additional props (<code>...props</code>) to their rendered HTMLElement.  This allows custom layouts to add <code>className</code> and <code>style</code> props as necessary for the layout.</p>\n      </div>\n\n      <Section title=\"Simple slot with default layout\">\n        <p>This slot has no opinionated layout, it just renders its children.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseSimple\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Simple slot with default content and props\">\n        <p>This slot has default content, and it exposes a slot prop to widgets.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseSimpleWithDefaultContent\" aSlotProp=\"hello!\">\n            <div className=\"showcase-widget\">Look, I&apos;m default content!</div>\n          </Slot>\n        </SlotContainer>\n      </Section>\n\n      <h2 className=\"showcase-divider\">UI Layout Operations</h2>\n\n      <Section title=\"Slot with custom layout (component)\">\n        <p>This slot uses a horizontal flexbox layout from a component.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseCustom\" layout={HorizontalSlotLayout} />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with custom layout (element)\">\n        <p>This slot uses a horizontal flexbox layout from a JSX element.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseCustom\" layout={<HorizontalSlotLayout />} />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with override custom layout\">\n        <p>This slot uses a horizontal flexbox layout, but it was added by a layout replace operation.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseCustomConfig\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with layout options (default)\">\n        <p>This slot uses a custom layout that takes options.  It shows the default title.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptionsDefault\" layout={LayoutWithOptions} />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with layout options (configured)\">\n        <p>Same layout, but the title option is set to &quot;Bar&quot;.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseLayoutWithOptions\" layout={LayoutWithOptions} />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with widget filtering by role\">\n        <p>This slot has four widgets, two with a &quot;highlighted&quot; role.  The layout uses <code>widgets.byRole()</code> to toggle between all and highlighted.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseFilterByRole\" layout={ToggleByRoleLayout} />\n        </SlotContainer>\n      </Section>\n\n      <h2 className=\"showcase-divider\">UI Widget Operations</h2>\n\n      <Section title=\"Slot with prepended element\">\n        <p>This slot has a prepended element (and two appended elements).</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcasePrepending\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with inserted elements\">\n        <p>This slot has elements inserted before and after the second element. The insert operations are declared <em>before</em> the related element, but can still insert themselves relative to it.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseInserting\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with replaced element\">\n        <p>This slot has an element replacing element two.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseReplacing\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with removed element\">\n        <p>This slot has removed element two (<code>WidgetOperationTypes.REMOVE</code>).</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseRemoving\" />\n        </SlotContainer>\n      </Section>\n\n      <Section title=\"Slot with widget options (default)\">\n        <p>This widget accepts options.  It shows the default title.</p>\n        <SlotContainer>\n          <Slot id=\"org.openedx.frontend.slot.dev.slotShowcaseWidgetOptions\" />\n        </SlotContainer>\n      </Section>\n\n    </Container>\n  );\n}\n"]}

package/dist/shell/dev/slotShowcase/ToggleByRoleLayout.d.ts

@@ -0,0 +1 @@
+export default function ToggleByRoleLayout(): import("react/jsx-runtime").JSX.Element;

package/dist/shell/dev/slotShowcase/ToggleByRoleLayout.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '@openedx/paragon';
+import { useWidgets } from '../../../runtime';
+const highlitedRole = 'org.openedx.frontend.role.slotShowcase.highlighted';
+export default function ToggleByRoleLayout() {
+    const widgets = useWidgets();
+    const [showHighlighted, setShowHighlighted] = useState(false);
+    return (_jsxs("div", { children: [_jsx(Button, { size: "sm", variant: "outline-primary", className: "mb-2", onClick: () => setShowHighlighted(!showHighlighted), children: showHighlighted ? 'Show all widgets' : 'Show only highlighted widgets' }), _jsx("div", { children: showHighlighted ? widgets.byRole(highlitedRole) : widgets })] }));
+}
+//# sourceMappingURL=ToggleByRoleLayout.js.map

package/dist/shell/dev/slotShowcase/ToggleByRoleLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleByRoleLayout.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/ToggleByRoleLayout.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,aAAa,GAAG,oDAAoD,CAAC;AAE3E,MAAM,CAAC,OAAO,UAAU,kBAAkB;IACxC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,CAAC,eAAe,EAAE,kBAAkB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE9D,OAAO,CACL,0BACE,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,iBAAiB,EAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,CAAC,eAAe,CAAC,YAC7G,eAAe,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,+BAA+B,GAChE,EACT,wBACG,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,GACtD,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useState } from 'react';\nimport { Button } from '@openedx/paragon';\nimport { useWidgets } from '../../../runtime';\n\nconst highlitedRole = 'org.openedx.frontend.role.slotShowcase.highlighted';\n\nexport default function ToggleByRoleLayout() {\n  const widgets = useWidgets();\n  const [showHighlighted, setShowHighlighted] = useState(false);\n\n  return (\n    <div>\n      <Button size=\"sm\" variant=\"outline-primary\" className=\"mb-2\" onClick={() => setShowHighlighted(!showHighlighted)}>\n        {showHighlighted ? 'Show all widgets' : 'Show only highlighted widgets'}\n      </Button>\n      <div>\n        {showHighlighted ? widgets.byRole(highlitedRole) : widgets}\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/shell/dev/slotShowcase/WidgetWithOptions.js

@@ -3,6 +3,6 @@ import { useWidgetOptions } from '../../../runtime';
 export default function WidgetWithOptions() {
     const options = useWidgetOptions();
     const title = typeof options.title === 'string' ? options.title : 'Foo';
-    return (_jsx("div", { children: title }));
+    return (_jsx("div", { className: "showcase-widget", children: title }));
 }
 //# sourceMappingURL=WidgetWithOptions.js.map

package/dist/shell/dev/slotShowcase/WidgetWithOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetWithOptions.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/WidgetWithOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACvC,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IAEnC,MAAM,KAAK,GAAG,OAAO,OAAO,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAExE,OAAO,CACL,wBAAM,KAAK,GAAO,CACnB,CAAC;AACJ,CAAC","sourcesContent":["import { useWidgetOptions } from '../../../runtime';\n\nexport default function WidgetWithOptions() {\n  const options = useWidgetOptions();\n\n  const title = typeof options.title === 'string' ? options.title : 'Foo';\n\n  return (\n    <div>{title}</div>\n  );\n}\n"]}
+{"version":3,"file":"WidgetWithOptions.js","sourceRoot":"","sources":["../../../../shell/dev/slotShowcase/WidgetWithOptions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpD,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACvC,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;IAEnC,MAAM,KAAK,GAAG,OAAO,OAAO,CAAC,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAExE,OAAO,CACL,cAAK,SAAS,EAAC,iBAAiB,YAAE,KAAK,GAAO,CAC/C,CAAC;AACJ,CAAC","sourcesContent":["import { useWidgetOptions } from '../../../runtime';\n\nexport default function WidgetWithOptions() {\n  const options = useWidgetOptions();\n\n  const title = typeof options.title === 'string' ? options.title : 'Foo';\n\n  return (\n    <div className=\"showcase-widget\">{title}</div>\n  );\n}\n"]}