@teambit/compositions 1.0.516 → 1.0.518

package/composition.section.tsx

@@ -1,7 +1,12 @@
 import { Section } from '@teambit/component';
 import React from 'react';
 import { Compositions } from './compositions';
-import type { CompositionsUI, CompositionsMenuSlot, EmptyStateSlot } from './compositions.ui.runtime';
+import type {
+  CompositionsUI,
+  CompositionsMenuSlot,
+  EmptyStateSlot,
+  UsePreviewSandboxSlot,
+} from './compositions.ui.runtime';
 
 type Options = { menuBarWidgetSlot: CompositionsMenuSlot };
 
@@ -12,7 +17,8 @@ export class CompositionsSection implements Section {
      */
     private compositions: CompositionsUI,
     private options: Options,
-    private emptyStateSlot: EmptyStateSlot
+    private emptyStateSlot: EmptyStateSlot,
+    private usePreviewSandboxSlot: UsePreviewSandboxSlot
   ) {}
 
   navigationLink = {
@@ -22,7 +28,13 @@ export class CompositionsSection implements Section {
 
   route = {
     path: '~compositions/*',
-    element: <Compositions menuBarWidgets={this.options.menuBarWidgetSlot} emptyState={this.emptyStateSlot} />,
+    element: (
+      <Compositions
+        menuBarWidgets={this.options.menuBarWidgetSlot}
+        emptyState={this.emptyStateSlot}
+        usePreviewSandboxSlot={this.usePreviewSandboxSlot}
+      />
+    ),
   };
 
   order = 20;

package/compositions.tsx

@@ -11,7 +11,7 @@ import { Tab, TabContainer, TabList, TabPanel } from '@teambit/panels';
 import { useDocs } from '@teambit/docs.ui.queries.get-docs';
 import { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';
 import { EmptyBox } from '@teambit/design.ui.empty-box';
-import { toPreviewUrl } from '@teambit/preview.ui.component-preview';
+import { SandboxPermissionsAggregator, toPreviewUrl } from '@teambit/preview.ui.component-preview';
 import { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';
 import { CompositionsMenuBar } from '@teambit/compositions.ui.compositions-menu-bar';
 import { CompositionContextProvider } from '@teambit/compositions.ui.hooks.use-composition';
@@ -28,7 +28,7 @@ import { Composition } from './composition';
 import styles from './compositions.module.scss';
 import { ComponentComposition } from './ui';
 import { CompositionsPanel } from './ui/compositions-panel/compositions-panel';
-import type { CompositionsMenuSlot } from './compositions.ui.runtime';
+import type { CompositionsMenuSlot, UsePreviewSandboxSlot } from './compositions.ui.runtime';
 import { ComponentCompositionProps } from './ui/composition-preview';
 
 // @todo - this will be fixed as part of the @teambit/base-react.navigation.link upgrade to latest
@@ -38,9 +38,13 @@ export type MenuBarWidget = {
   location: 'start' | 'end';
   content: ReactNode;
 };
-export type CompositionsProp = { menuBarWidgets?: CompositionsMenuSlot; emptyState?: EmptyStateSlot };
+export type CompositionsProp = {
+  menuBarWidgets?: CompositionsMenuSlot;
+  emptyState?: EmptyStateSlot;
+  usePreviewSandboxSlot?: UsePreviewSandboxSlot;
+};
 
-export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
+export function Compositions({ menuBarWidgets, emptyState, usePreviewSandboxSlot }: CompositionsProp) {
   const component = useContext(ComponentContext);
   const [searchParams] = useSearchParams();
   const params = useParams();
@@ -51,12 +55,12 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
   const currentComposition =
     component.compositions.find((composition) => composition.identifier.toLowerCase() === currentCompositionName) ||
     head(component.compositions);
-
+  const [sandboxValue, setSandboxValue] = useState('');
   const selectedRef = useRef(currentComposition);
   selectedRef.current = currentComposition;
 
   const properties = useDocs(component.id);
-
+  const previewSandboxHooks = usePreviewSandboxSlot?.values() ?? [];
   const isMobile = useIsMobile();
   const showSidebar = !isMobile && component.compositions.length > 0;
   const [isSidebarOpen, setSidebarOpenness] = useState(showSidebar);
@@ -93,12 +97,18 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
               </Link>
             </Tooltip>
           </CompositionsMenuBar>
+          <SandboxPermissionsAggregator
+            hooks={previewSandboxHooks}
+            onSandboxChange={setSandboxValue}
+            component={component}
+          />
           <CompositionContent
             className={styles.compositionPanel}
             emptyState={emptyState}
             component={component}
             selected={currentComposition}
             queryParams={queryParams}
+            sandbox={sandboxValue}
           />
         </Pane>
         <HoverSplitter className={styles.splitter}>
@@ -170,6 +180,7 @@ export function CompositionContent({
   selected,
   queryParams,
   emptyState,
+  sandbox,
   ...componentCompositionProps
 }: CompositionContentProps) {
   const env = component.environment?.id;
@@ -232,6 +243,7 @@ export function CompositionContent({
       fullContentHeight
       pubsub={true}
       queryParams={queryParams}
+      sandbox={sandbox}
       {...componentCompositionProps}
     />
   );

package/compositions.ui.runtime.tsx

@@ -6,17 +6,20 @@ import { UIRuntime } from '@teambit/ui';
 import { CompositionCompareSection } from '@teambit/compositions.ui.composition-compare-section';
 import { CompositionCompare } from '@teambit/compositions.ui.composition-compare';
 import { ComponentCompareUI, ComponentCompareAspect } from '@teambit/component-compare';
+import { UseSandboxPermission } from '@teambit/preview.ui.component-preview';
 import { CompositionsSection } from './composition.section';
 import { CompositionsAspect } from './compositions.aspect';
 import { CompositionContent, MenuBarWidget } from './compositions';
 
 export type CompositionsMenuSlot = SlotRegistry<MenuBarWidget[]>;
 export type EmptyStateSlot = SlotRegistry<ComponentType>;
+export type UsePreviewSandboxSlot = SlotRegistry<UseSandboxPermission>;
 
 export class CompositionsUI {
   constructor(
     private menuBarWidgetSlot: CompositionsMenuSlot,
-    private emptyStateSlot: EmptyStateSlot
+    private emptyStateSlot: EmptyStateSlot,
+    private usePreviewSandboxSlot: UsePreviewSandboxSlot
   ) {}
   /**
    * register a new tester empty state. this allows to register a different empty state from each environment for example.
@@ -30,6 +33,10 @@ export class CompositionsUI {
     this.menuBarWidgetSlot.register(widget);
   }
 
+  registerPreviewSandbox(useSandboxPermission: UseSandboxPermission) {
+    this.usePreviewSandboxSlot.register(useSandboxPermission);
+  }
+
   getCompositionsCompare = () => {
     return (
       <CompositionCompare
@@ -43,24 +50,35 @@ export class CompositionsUI {
 
   static dependencies = [ComponentAspect, ComponentCompareAspect];
   static runtime = UIRuntime;
-  static slots = [Slot.withType<ReactNode>(), Slot.withType<ComponentType>()];
+  static slots = [Slot.withType<ReactNode>(), Slot.withType<ComponentType>(), Slot.withType<UseSandboxPermission>()];
 
   static async provider(
     [component, componentCompare]: [ComponentUI, ComponentCompareUI],
     config: {},
-    [compositionMenuSlot, emptyStateSlot]: [CompositionsMenuSlot, EmptyStateSlot]
+    [compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot]: [
+      CompositionsMenuSlot,
+      EmptyStateSlot,
+      UsePreviewSandboxSlot,
+    ]
   ) {
-    const compositions = new CompositionsUI(compositionMenuSlot, emptyStateSlot);
+    const compositions = new CompositionsUI(compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot);
     const section = new CompositionsSection(
       compositions,
       { menuBarWidgetSlot: compositions.menuBarWidgetSlot },
-      emptyStateSlot
+      emptyStateSlot,
+      usePreviewSandboxSlot
     );
     const compositionCompare = new CompositionCompareSection(compositions);
     component.registerRoute(section.route);
     component.registerNavigation(section.navigationLink, section.order);
     componentCompare.registerNavigation(compositionCompare);
     componentCompare.registerRoutes([compositionCompare.route]);
+    compositions.registerPreviewSandbox((manager, componentModel) => {
+      if (componentModel?.host === 'teambit.scope/scope') {
+        manager.add('allow-scripts');
+        manager.add('allow-same-origin');
+      }
+    });
     return compositions;
   }
 }

package/dist/composition.section.d.ts

@@ -1,5 +1,5 @@
 import { Section } from '@teambit/component';
-import type { CompositionsUI, CompositionsMenuSlot, EmptyStateSlot } from './compositions.ui.runtime';
+import type { CompositionsUI, CompositionsMenuSlot, EmptyStateSlot, UsePreviewSandboxSlot } from './compositions.ui.runtime';
 type Options = {
     menuBarWidgetSlot: CompositionsMenuSlot;
 };
@@ -10,11 +10,12 @@ export declare class CompositionsSection implements Section {
     private compositions;
     private options;
     private emptyStateSlot;
+    private usePreviewSandboxSlot;
     constructor(
     /**
      * simulations ui extension.
      */
-    compositions: CompositionsUI, options: Options, emptyStateSlot: EmptyStateSlot);
+    compositions: CompositionsUI, options: Options, emptyStateSlot: EmptyStateSlot, usePreviewSandboxSlot: UsePreviewSandboxSlot);
     navigationLink: {
         href: string;
         children: string;

package/dist/composition.section.js

@@ -27,10 +27,11 @@ class CompositionsSection {
   /**
    * simulations ui extension.
    */
-  compositions, options, emptyStateSlot) {
+  compositions, options, emptyStateSlot, usePreviewSandboxSlot) {
     this.compositions = compositions;
     this.options = options;
     this.emptyStateSlot = emptyStateSlot;
+    this.usePreviewSandboxSlot = usePreviewSandboxSlot;
     _defineProperty(this, "navigationLink", {
       href: '~compositions',
       children: 'Preview'
@@ -39,7 +40,8 @@ class CompositionsSection {
       path: '~compositions/*',
       element: /*#__PURE__*/_react().default.createElement(_compositions().Compositions, {
         menuBarWidgets: this.options.menuBarWidgetSlot,
-        emptyState: this.emptyStateSlot
+        emptyState: this.emptyStateSlot,
+        usePreviewSandboxSlot: this.usePreviewSandboxSlot
       })
     });
     _defineProperty(this, "order", 20);

package/dist/composition.section.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireDefault","require","_compositions","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","CompositionsSection","constructor","compositions","options","emptyStateSlot","href","children","path","element","createElement","Compositions","menuBarWidgets","menuBarWidgetSlot","emptyState","exports"],"sources":["composition.section.tsx"],"sourcesContent":["import { Section } from '@teambit/component';\nimport React from 'react';\nimport { Compositions } from './compositions';\nimport type { CompositionsUI, CompositionsMenuSlot, EmptyStateSlot } from './compositions.ui.runtime';\n\ntype Options = { menuBarWidgetSlot: CompositionsMenuSlot };\n\nexport class CompositionsSection implements Section {\n  constructor(\n    /**\n     * simulations ui extension.\n     */\n    private compositions: CompositionsUI,\n    private options: Options,\n    private emptyStateSlot: EmptyStateSlot\n  ) {}\n\n  navigationLink = {\n    href: '~compositions',\n    children: 'Preview',\n  };\n\n  route = {\n    path: '~compositions/*',\n    element: <Compositions menuBarWidgets={this.options.menuBarWidgetSlot} emptyState={this.emptyStateSlot} />,\n  };\n\n  order = 20;\n}\n"],"mappings":";;;;;;AACA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,cAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,aAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAA8C,SAAAC,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,gBAAAH,CAAA,EAAAI,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAE,cAAA,CAAAF,CAAA,MAAAJ,CAAA,GAAAO,MAAA,CAAAC,cAAA,CAAAR,CAAA,EAAAI,CAAA,IAAAK,KAAA,EAAAJ,CAAA,EAAAK,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAZ,CAAA,CAAAI,CAAA,IAAAC,CAAA,EAAAL,CAAA;AAAA,SAAAM,eAAAD,CAAA,QAAAQ,CAAA,GAAAC,YAAA,CAAAT,CAAA,uCAAAQ,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAC,aAAAT,CAAA,EAAAD,CAAA,2BAAAC,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAL,CAAA,GAAAK,CAAA,CAAAU,MAAA,CAAAC,WAAA,kBAAAhB,CAAA,QAAAa,CAAA,GAAAb,CAAA,CAAAiB,IAAA,CAAAZ,CAAA,EAAAD,CAAA,uCAAAS,CAAA,SAAAA,CAAA,YAAAK,SAAA,yEAAAd,CAAA,GAAAe,MAAA,GAAAC,MAAA,EAAAf,CAAA;AAKvC,MAAMgB,mBAAmB,CAAoB;EAClDC,WAAWA;EACT;AACJ;AACA;EACYC,YAA4B,EAC5BC,OAAgB,EAChBC,cAA8B,EACtC;IAAA,KAHQF,YAA4B,GAA5BA,YAA4B;IAAA,KAC5BC,OAAgB,GAAhBA,OAAgB;IAAA,KAChBC,cAA8B,GAA9BA,cAA8B;IAAAtB,eAAA,yBAGvB;MACfuB,IAAI,EAAE,eAAe;MACrBC,QAAQ,EAAE;IACZ,CAAC;IAAAxB,eAAA,gBAEO;MACNyB,IAAI,EAAE,iBAAiB;MACvBC,OAAO,eAAElC,MAAA,GAAAO,OAAA,CAAA4B,aAAA,CAAC/B,aAAA,GAAAgC,YAAY;QAACC,cAAc,EAAE,IAAI,CAACR,OAAO,CAACS,iBAAkB;QAACC,UAAU,EAAE,IAAI,CAACT;MAAe,CAAE;IAC3G,CAAC;IAAAtB,eAAA,gBAEO,EAAE;EAZP;AAaL;AAACgC,OAAA,CAAAd,mBAAA,GAAAA,mBAAA","ignoreList":[]}
+{"version":3,"names":["_react","data","_interopRequireDefault","require","_compositions","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","CompositionsSection","constructor","compositions","options","emptyStateSlot","usePreviewSandboxSlot","href","children","path","element","createElement","Compositions","menuBarWidgets","menuBarWidgetSlot","emptyState","exports"],"sources":["composition.section.tsx"],"sourcesContent":["import { Section } from '@teambit/component';\nimport React from 'react';\nimport { Compositions } from './compositions';\nimport type {\n  CompositionsUI,\n  CompositionsMenuSlot,\n  EmptyStateSlot,\n  UsePreviewSandboxSlot,\n} from './compositions.ui.runtime';\n\ntype Options = { menuBarWidgetSlot: CompositionsMenuSlot };\n\nexport class CompositionsSection implements Section {\n  constructor(\n    /**\n     * simulations ui extension.\n     */\n    private compositions: CompositionsUI,\n    private options: Options,\n    private emptyStateSlot: EmptyStateSlot,\n    private usePreviewSandboxSlot: UsePreviewSandboxSlot\n  ) {}\n\n  navigationLink = {\n    href: '~compositions',\n    children: 'Preview',\n  };\n\n  route = {\n    path: '~compositions/*',\n    element: (\n      <Compositions\n        menuBarWidgets={this.options.menuBarWidgetSlot}\n        emptyState={this.emptyStateSlot}\n        usePreviewSandboxSlot={this.usePreviewSandboxSlot}\n      />\n    ),\n  };\n\n  order = 20;\n}\n"],"mappings":";;;;;;AACA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,cAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,aAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAA8C,SAAAC,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,gBAAAH,CAAA,EAAAI,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAE,cAAA,CAAAF,CAAA,MAAAJ,CAAA,GAAAO,MAAA,CAAAC,cAAA,CAAAR,CAAA,EAAAI,CAAA,IAAAK,KAAA,EAAAJ,CAAA,EAAAK,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAZ,CAAA,CAAAI,CAAA,IAAAC,CAAA,EAAAL,CAAA;AAAA,SAAAM,eAAAD,CAAA,QAAAQ,CAAA,GAAAC,YAAA,CAAAT,CAAA,uCAAAQ,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAC,aAAAT,CAAA,EAAAD,CAAA,2BAAAC,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAL,CAAA,GAAAK,CAAA,CAAAU,MAAA,CAAAC,WAAA,kBAAAhB,CAAA,QAAAa,CAAA,GAAAb,CAAA,CAAAiB,IAAA,CAAAZ,CAAA,EAAAD,CAAA,uCAAAS,CAAA,SAAAA,CAAA,YAAAK,SAAA,yEAAAd,CAAA,GAAAe,MAAA,GAAAC,MAAA,EAAAf,CAAA;AAUvC,MAAMgB,mBAAmB,CAAoB;EAClDC,WAAWA;EACT;AACJ;AACA;EACYC,YAA4B,EAC5BC,OAAgB,EAChBC,cAA8B,EAC9BC,qBAA4C,EACpD;IAAA,KAJQH,YAA4B,GAA5BA,YAA4B;IAAA,KAC5BC,OAAgB,GAAhBA,OAAgB;IAAA,KAChBC,cAA8B,GAA9BA,cAA8B;IAAA,KAC9BC,qBAA4C,GAA5CA,qBAA4C;IAAAvB,eAAA,yBAGrC;MACfwB,IAAI,EAAE,eAAe;MACrBC,QAAQ,EAAE;IACZ,CAAC;IAAAzB,eAAA,gBAEO;MACN0B,IAAI,EAAE,iBAAiB;MACvBC,OAAO,eACLnC,MAAA,GAAAO,OAAA,CAAA6B,aAAA,CAAChC,aAAA,GAAAiC,YAAY;QACXC,cAAc,EAAE,IAAI,CAACT,OAAO,CAACU,iBAAkB;QAC/CC,UAAU,EAAE,IAAI,CAACV,cAAe;QAChCC,qBAAqB,EAAE,IAAI,CAACA;MAAsB,CACnD;IAEL,CAAC;IAAAvB,eAAA,gBAEO,EAAE;EAlBP;AAmBL;AAACiC,OAAA,CAAAf,mBAAA,GAAAA,mBAAA","ignoreList":[]}

package/dist/compositions.d.ts

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import { ComponentModel } from '@teambit/component';
 import { EmptyStateSlot } from './compositions.ui.runtime';
 import { Composition } from './composition';
-import type { CompositionsMenuSlot } from './compositions.ui.runtime';
+import type { CompositionsMenuSlot, UsePreviewSandboxSlot } from './compositions.ui.runtime';
 import { ComponentCompositionProps } from './ui/composition-preview';
 export type MenuBarWidget = {
     location: 'start' | 'end';
@@ -11,12 +11,13 @@ export type MenuBarWidget = {
 export type CompositionsProp = {
     menuBarWidgets?: CompositionsMenuSlot;
     emptyState?: EmptyStateSlot;
+    usePreviewSandboxSlot?: UsePreviewSandboxSlot;
 };
-export declare function Compositions({ menuBarWidgets, emptyState }: CompositionsProp): import("react/jsx-runtime").JSX.Element;
+export declare function Compositions({ menuBarWidgets, emptyState, usePreviewSandboxSlot }: CompositionsProp): import("react/jsx-runtime").JSX.Element;
 export type CompositionContentProps = {
     component: ComponentModel;
     selected?: Composition;
     queryParams?: string | string[];
     emptyState?: EmptyStateSlot;
 } & ComponentCompositionProps;
-export declare function CompositionContent({ component, selected, queryParams, emptyState, ...componentCompositionProps }: CompositionContentProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompositionContent({ component, selected, queryParams, emptyState, sandbox, ...componentCompositionProps }: CompositionContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/compositions.js

@@ -201,7 +201,7 @@ function _compositionsPanel() {
   };
   return data;
 }
-const _excluded = ["component", "selected", "queryParams", "emptyState"];
+const _excluded = ["component", "selected", "queryParams", "emptyState", "sandbox"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -212,7 +212,8 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 const Link = _baseReactNavigation().Link;
 function Compositions({
   menuBarWidgets,
-  emptyState
+  emptyState,
+  usePreviewSandboxSlot
 }) {
   const component = (0, _react().useContext)(_component().ComponentContext);
   const [searchParams] = (0, _reactRouterDom().useSearchParams)();
@@ -222,9 +223,11 @@ function Compositions({
   const location = (0, _baseReactNavigation().useLocation)();
   const currentCompositionName = params['*'];
   const currentComposition = component.compositions.find(composition => composition.identifier.toLowerCase() === currentCompositionName) || (0, _lodash().default)(component.compositions);
+  const [sandboxValue, setSandboxValue] = (0, _react().useState)('');
   const selectedRef = (0, _react().useRef)(currentComposition);
   selectedRef.current = currentComposition;
   const properties = (0, _docsUiQueries().useDocs)(component.id);
+  const previewSandboxHooks = usePreviewSandboxSlot?.values() ?? [];
   const isMobile = (0, _uiFoundationUiHooks().useIsMobile)();
   const showSidebar = !isMobile && component.compositions.length > 0;
   const [isSidebarOpen, setSidebarOpenness] = (0, _react().useState)(showSidebar);
@@ -263,12 +266,17 @@ function Compositions({
     className: _compositionsModule().default.openInNewTab
   }, /*#__PURE__*/_react().default.createElement(_designUiInput().OptionButton, {
     icon: "open-tab"
-  })))), /*#__PURE__*/_react().default.createElement(CompositionContent, {
+  })))), /*#__PURE__*/_react().default.createElement(_previewUi().SandboxPermissionsAggregator, {
+    hooks: previewSandboxHooks,
+    onSandboxChange: setSandboxValue,
+    component: component
+  }), /*#__PURE__*/_react().default.createElement(CompositionContent, {
     className: _compositionsModule().default.compositionPanel,
     emptyState: emptyState,
     component: component,
     selected: currentComposition,
-    queryParams: queryParams
+    queryParams: queryParams,
+    sandbox: sandboxValue
   })), /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane2().HoverSplitter, {
     className: _compositionsModule().default.splitter
   }, /*#__PURE__*/_react().default.createElement(_uiFoundationUiButtons().Collapser, {
@@ -322,7 +330,8 @@ function CompositionContent(_ref) {
       component,
       selected,
       queryParams,
-      emptyState
+      emptyState,
+      sandbox
     } = _ref,
     componentCompositionProps = _objectWithoutProperties(_ref, _excluded);
   const env = component.environment?.id;
@@ -370,7 +379,8 @@ function CompositionContent(_ref) {
     composition: selected,
     fullContentHeight: true,
     pubsub: true,
-    queryParams: queryParams
+    queryParams: queryParams,
+    sandbox: sandbox
   }, componentCompositionProps));
 }
 

package/dist/compositions.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireWildcard","require","_reactRouterDom","_lodash","_interopRequireDefault","_queryString","_documenterTheme","_baseUiSurfacesSplitPane","_baseUiSurfacesSplitPane2","_component","_documenterUi","_panels","_docsUiQueries","_uiFoundationUiButtons","_designUi","_previewUi","_uiFoundationUiHooks","_compositionsUi","_compositionsUiHooks","_mdxUi","_designUi2","_documenterUi2","_designUi3","_baseReactNavigation","_designUiInput","_designUiSurfaces","_designUi4","_compositionsModule","_ui","_compositionsPanel","_excluded","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","o","_objectWithoutPropertiesLoose","getOwnPropertySymbols","s","includes","propertyIsEnumerable","Link","BaseLink","Compositions","menuBarWidgets","emptyState","component","useContext","ComponentContext","searchParams","useSearchParams","params","useParams","versionFromQueryParams","navigate","useNavigate","location","useLocation","currentCompositionName","currentComposition","compositions","find","composition","identifier","toLowerCase","head","selectedRef","useRef","current","properties","useDocs","id","isMobile","useIsMobile","showSidebar","isSidebarOpen","setSidebarOpenness","useState","sidebarOpenness","Layout","row","left","compositionUrl","toPreviewUrl","isScaling","preview","includesEnvTemplates","includesEnvTemplate","useNameParam","compositionIdentifierParam","currentCompositionFullUrl","compositionParams","setCompositionParams","fullscreen","queryParams","useMemo","queryString","stringify","useEffect","createElement","CompositionContextProvider","setQueryParams","SplitPane","layout","size","className","styles","compositionsPage","Pane","CompositionsMenuBar","menuBar","Tooltip","content","placement","external","href","openInNewTab","OptionButton","icon","CompositionContent","compositionPanel","selected","HoverSplitter","splitter","Collapser","isOpen","onMouseDown","stopPropagation","onClick","x","tooltipContent","collapser","right","ThemeContext","TabContainer","tabsContainer","TabList","tabs","Tab","TabPanel","tabContent","CompositionsPanel","onSelectComposition","selectedCompositionFromUrl","pathSegments","pathname","split","filter","push","urlParams","URLSearchParams","newPath","join","toString","url","active","PropTable","rows","showListView","_ref","componentCompositionProps","env","environment","EmptyStateTemplate","host","noCompositionsPage","H1","title","Separator","isPresentational","separator","AlertCard","level","MDXLayout","buildStatus","StatusMessageCard","buildStatusMessage","status","EmptyBox","linkText","link","ComponentComposition","compositionsIframe","viewport","forceHeight","fullContentHeight","pubsub"],"sources":["compositions.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState, useMemo, useRef, ReactNode } from 'react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport head from 'lodash.head';\nimport queryString from 'query-string';\nimport { ThemeContext } from '@teambit/documenter.theme.theme-context';\nimport { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';\nimport { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';\nimport { ComponentContext, ComponentModel } from '@teambit/component';\nimport { PropTable } from '@teambit/documenter.ui.property-table';\nimport { Tab, TabContainer, TabList, TabPanel } from '@teambit/panels';\nimport { useDocs } from '@teambit/docs.ui.queries.get-docs';\nimport { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';\nimport { EmptyBox } from '@teambit/design.ui.empty-box';\nimport { toPreviewUrl } from '@teambit/preview.ui.component-preview';\nimport { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';\nimport { CompositionsMenuBar } from '@teambit/compositions.ui.compositions-menu-bar';\nimport { CompositionContextProvider } from '@teambit/compositions.ui.hooks.use-composition';\nimport { MDXLayout } from '@teambit/mdx.ui.mdx-layout';\nimport { Separator } from '@teambit/design.ui.separator';\nimport { H1 } from '@teambit/documenter.ui.heading';\nimport { AlertCard } from '@teambit/design.ui.alert-card';\nimport { Link as BaseLink, useNavigate, useLocation } from '@teambit/base-react.navigation.link';\nimport { OptionButton } from '@teambit/design.ui.input.option-button';\nimport { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';\nimport { Tooltip } from '@teambit/design.ui.tooltip';\nimport { EmptyStateSlot } from './compositions.ui.runtime';\nimport { Composition } from './composition';\nimport styles from './compositions.module.scss';\nimport { ComponentComposition } from './ui';\nimport { CompositionsPanel } from './ui/compositions-panel/compositions-panel';\nimport type { CompositionsMenuSlot } from './compositions.ui.runtime';\nimport { ComponentCompositionProps } from './ui/composition-preview';\n\n// @todo - this will be fixed as part of the @teambit/base-react.navigation.link upgrade to latest\nconst Link = BaseLink as any;\n\nexport type MenuBarWidget = {\n  location: 'start' | 'end';\n  content: ReactNode;\n};\nexport type CompositionsProp = { menuBarWidgets?: CompositionsMenuSlot; emptyState?: EmptyStateSlot };\n\nexport function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {\n  const component = useContext(ComponentContext);\n  const [searchParams] = useSearchParams();\n  const params = useParams();\n  const versionFromQueryParams = searchParams.get('version');\n  const navigate = useNavigate();\n  const location = useLocation();\n  const currentCompositionName = params['*'];\n  const currentComposition =\n    component.compositions.find((composition) => composition.identifier.toLowerCase() === currentCompositionName) ||\n    head(component.compositions);\n\n  const selectedRef = useRef(currentComposition);\n  selectedRef.current = currentComposition;\n\n  const properties = useDocs(component.id);\n\n  const isMobile = useIsMobile();\n  const showSidebar = !isMobile && component.compositions.length > 0;\n  const [isSidebarOpen, setSidebarOpenness] = useState(showSidebar);\n\n  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.left;\n\n  const compositionUrl = toPreviewUrl(component, 'compositions');\n  const isScaling = component?.preview?.isScaling;\n  const includesEnvTemplates = component?.preview?.includesEnvTemplate;\n  const useNameParam = component?.preview?.useNameParam;\n  const compositionIdentifierParam =\n    useNameParam || (isScaling && includesEnvTemplates === false)\n      ? `name=${currentComposition?.identifier}`\n      : currentComposition?.identifier;\n\n  const currentCompositionFullUrl = toPreviewUrl(component, 'compositions', compositionIdentifierParam);\n\n  const [compositionParams, setCompositionParams] = useState<Record<string, any>>({\n    fullscreen: true,\n  });\n\n  const queryParams = useMemo(() => queryString.stringify(compositionParams), [compositionParams]);\n\n  // collapse sidebar when empty, reopen when not\n  useEffect(() => setSidebarOpenness(showSidebar), [showSidebar]);\n  return (\n    <CompositionContextProvider queryParams={compositionParams} setQueryParams={setCompositionParams}>\n      <SplitPane layout={sidebarOpenness} size=\"85%\" className={styles.compositionsPage}>\n        <Pane className={styles.left}>\n          <CompositionsMenuBar menuBarWidgets={menuBarWidgets} className={styles.menuBar}>\n            <Tooltip content={'Open in new tab'} placement=\"right\">\n              <Link external href={currentCompositionFullUrl} className={styles.openInNewTab}>\n                <OptionButton icon=\"open-tab\" />\n              </Link>\n            </Tooltip>\n          </CompositionsMenuBar>\n          <CompositionContent\n            className={styles.compositionPanel}\n            emptyState={emptyState}\n            component={component}\n            selected={currentComposition}\n            queryParams={queryParams}\n          />\n        </Pane>\n        <HoverSplitter className={styles.splitter}>\n          <Collapser\n            placement=\"left\"\n            isOpen={isSidebarOpen}\n            onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag\n            onClick={() => setSidebarOpenness((x) => !x)}\n            tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side compositions`}\n            className={styles.collapser}\n          />\n        </HoverSplitter>\n        <Pane className={styles.right}>\n          <ThemeContext>\n            <TabContainer className={styles.tabsContainer}>\n              <TabList className={styles.tabs}>\n                <Tab>compositions</Tab>\n                <Tab>properties</Tab>\n              </TabList>\n              <TabPanel className={styles.tabContent}>\n                <CompositionsPanel\n                  isScaling={isScaling}\n                  useNameParam={useNameParam}\n                  includesEnvTemplate={component.preview?.includesEnvTemplate}\n                  onSelectComposition={(composition) => {\n                    if (!currentComposition || !location) return;\n                    const selectedCompositionFromUrl = params['*'];\n\n                    const pathSegments = location.pathname.split('/').filter((x) => x);\n\n                    if (!selectedCompositionFromUrl) {\n                      pathSegments.push(composition.identifier.toLowerCase());\n                    } else {\n                      pathSegments[pathSegments.length - 1] = composition.identifier.toLowerCase();\n                    }\n\n                    const urlParams = new URLSearchParams(searchParams);\n                    if (versionFromQueryParams) {\n                      urlParams.set('version', versionFromQueryParams);\n                    }\n                    const newPath = pathSegments.join('/');\n                    navigate(`/${newPath}?${urlParams.toString()}`);\n                  }}\n                  url={compositionUrl}\n                  compositions={component.compositions}\n                  active={currentComposition}\n                />\n              </TabPanel>\n              <TabPanel className={styles.tabContent}>\n                {properties && properties.length > 0 ? <PropTable rows={properties} showListView /> : <div />}\n              </TabPanel>\n            </TabContainer>\n          </ThemeContext>\n        </Pane>\n      </SplitPane>\n    </CompositionContextProvider>\n  );\n}\n\nexport type CompositionContentProps = {\n  component: ComponentModel;\n  selected?: Composition;\n  queryParams?: string | string[];\n  emptyState?: EmptyStateSlot;\n} & ComponentCompositionProps;\n\nexport function CompositionContent({\n  component,\n  selected,\n  queryParams,\n  emptyState,\n  ...componentCompositionProps\n}: CompositionContentProps) {\n  const env = component.environment?.id;\n  const EmptyStateTemplate = emptyState?.get(env || ''); // || defaultTemplate;\n\n  if (component.compositions.length === 0 && component.host === 'teambit.workspace/workspace' && EmptyStateTemplate) {\n    return (\n      <div className={styles.noCompositionsPage}>\n        <div>\n          <H1 className={styles.title}>Compositions</H1>\n          <Separator isPresentational className={styles.separator} />\n          <AlertCard\n            level=\"info\"\n            title=\"There are no\n              compositions for this Component. Learn how to add compositions:\"\n          >\n            <MDXLayout>\n              <EmptyStateTemplate />\n            </MDXLayout>\n          </AlertCard>\n        </div>\n      </div>\n    );\n  }\n\n  if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard className={styles.buildStatusMessage} status=\"PROCESSING\" title=\"component preview pending\">\n        this might take some time\n      </StatusMessageCard>\n    );\n  if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard\n        className={styles.buildStatusMessage}\n        status=\"FAILURE\"\n        title=\"failed to get component preview \"\n      ></StatusMessageCard>\n    );\n\n  // TODO: get the docs domain from the community aspect and pass it here as a prop\n  if (component.compositions.length === 0) {\n    return (\n      <EmptyBox\n        title=\"There are no compositions for this component.\"\n        linkText=\"Learn how to create compositions\"\n        link={`https://bit.dev/reference/dev-services-overview/compositions/compositions-overview`}\n      />\n    );\n  }\n\n  return (\n    <ComponentComposition\n      className={styles.compositionsIframe}\n      // TODO: Oded to add control for viewport.\n      viewport={null}\n      component={component}\n      forceHeight=\"100%\"\n      composition={selected}\n      fullContentHeight\n      pubsub={true}\n      queryParams={queryParams}\n      {...componentCompositionProps}\n    />\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","data","_interopRequireWildcard","require","_reactRouterDom","_lodash","_interopRequireDefault","_queryString","_documenterTheme","_baseUiSurfacesSplitPane","_baseUiSurfacesSplitPane2","_component","_documenterUi","_panels","_docsUiQueries","_uiFoundationUiButtons","_designUi","_previewUi","_uiFoundationUiHooks","_compositionsUi","_compositionsUiHooks","_mdxUi","_designUi2","_documenterUi2","_designUi3","_baseReactNavigation","_designUiInput","_designUiSurfaces","_designUi4","_compositionsModule","_ui","_compositionsPanel","_excluded","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","o","_objectWithoutPropertiesLoose","getOwnPropertySymbols","s","includes","propertyIsEnumerable","Link","BaseLink","Compositions","menuBarWidgets","emptyState","usePreviewSandboxSlot","component","useContext","ComponentContext","searchParams","useSearchParams","params","useParams","versionFromQueryParams","navigate","useNavigate","location","useLocation","currentCompositionName","currentComposition","compositions","find","composition","identifier","toLowerCase","head","sandboxValue","setSandboxValue","useState","selectedRef","useRef","current","properties","useDocs","id","previewSandboxHooks","values","isMobile","useIsMobile","showSidebar","isSidebarOpen","setSidebarOpenness","sidebarOpenness","Layout","row","left","compositionUrl","toPreviewUrl","isScaling","preview","includesEnvTemplates","includesEnvTemplate","useNameParam","compositionIdentifierParam","currentCompositionFullUrl","compositionParams","setCompositionParams","fullscreen","queryParams","useMemo","queryString","stringify","useEffect","createElement","CompositionContextProvider","setQueryParams","SplitPane","layout","size","className","styles","compositionsPage","Pane","CompositionsMenuBar","menuBar","Tooltip","content","placement","external","href","openInNewTab","OptionButton","icon","SandboxPermissionsAggregator","hooks","onSandboxChange","CompositionContent","compositionPanel","selected","sandbox","HoverSplitter","splitter","Collapser","isOpen","onMouseDown","stopPropagation","onClick","x","tooltipContent","collapser","right","ThemeContext","TabContainer","tabsContainer","TabList","tabs","Tab","TabPanel","tabContent","CompositionsPanel","onSelectComposition","selectedCompositionFromUrl","pathSegments","pathname","split","filter","push","urlParams","URLSearchParams","newPath","join","toString","url","active","PropTable","rows","showListView","_ref","componentCompositionProps","env","environment","EmptyStateTemplate","host","noCompositionsPage","H1","title","Separator","isPresentational","separator","AlertCard","level","MDXLayout","buildStatus","StatusMessageCard","buildStatusMessage","status","EmptyBox","linkText","link","ComponentComposition","compositionsIframe","viewport","forceHeight","fullContentHeight","pubsub"],"sources":["compositions.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState, useMemo, useRef, ReactNode } from 'react';\nimport { useParams, useSearchParams } from 'react-router-dom';\nimport head from 'lodash.head';\nimport queryString from 'query-string';\nimport { ThemeContext } from '@teambit/documenter.theme.theme-context';\nimport { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';\nimport { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';\nimport { ComponentContext, ComponentModel } from '@teambit/component';\nimport { PropTable } from '@teambit/documenter.ui.property-table';\nimport { Tab, TabContainer, TabList, TabPanel } from '@teambit/panels';\nimport { useDocs } from '@teambit/docs.ui.queries.get-docs';\nimport { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';\nimport { EmptyBox } from '@teambit/design.ui.empty-box';\nimport { SandboxPermissionsAggregator, toPreviewUrl } from '@teambit/preview.ui.component-preview';\nimport { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';\nimport { CompositionsMenuBar } from '@teambit/compositions.ui.compositions-menu-bar';\nimport { CompositionContextProvider } from '@teambit/compositions.ui.hooks.use-composition';\nimport { MDXLayout } from '@teambit/mdx.ui.mdx-layout';\nimport { Separator } from '@teambit/design.ui.separator';\nimport { H1 } from '@teambit/documenter.ui.heading';\nimport { AlertCard } from '@teambit/design.ui.alert-card';\nimport { Link as BaseLink, useNavigate, useLocation } from '@teambit/base-react.navigation.link';\nimport { OptionButton } from '@teambit/design.ui.input.option-button';\nimport { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';\nimport { Tooltip } from '@teambit/design.ui.tooltip';\nimport { EmptyStateSlot } from './compositions.ui.runtime';\nimport { Composition } from './composition';\nimport styles from './compositions.module.scss';\nimport { ComponentComposition } from './ui';\nimport { CompositionsPanel } from './ui/compositions-panel/compositions-panel';\nimport type { CompositionsMenuSlot, UsePreviewSandboxSlot } from './compositions.ui.runtime';\nimport { ComponentCompositionProps } from './ui/composition-preview';\n\n// @todo - this will be fixed as part of the @teambit/base-react.navigation.link upgrade to latest\nconst Link = BaseLink as any;\n\nexport type MenuBarWidget = {\n  location: 'start' | 'end';\n  content: ReactNode;\n};\nexport type CompositionsProp = {\n  menuBarWidgets?: CompositionsMenuSlot;\n  emptyState?: EmptyStateSlot;\n  usePreviewSandboxSlot?: UsePreviewSandboxSlot;\n};\n\nexport function Compositions({ menuBarWidgets, emptyState, usePreviewSandboxSlot }: CompositionsProp) {\n  const component = useContext(ComponentContext);\n  const [searchParams] = useSearchParams();\n  const params = useParams();\n  const versionFromQueryParams = searchParams.get('version');\n  const navigate = useNavigate();\n  const location = useLocation();\n  const currentCompositionName = params['*'];\n  const currentComposition =\n    component.compositions.find((composition) => composition.identifier.toLowerCase() === currentCompositionName) ||\n    head(component.compositions);\n  const [sandboxValue, setSandboxValue] = useState('');\n  const selectedRef = useRef(currentComposition);\n  selectedRef.current = currentComposition;\n\n  const properties = useDocs(component.id);\n  const previewSandboxHooks = usePreviewSandboxSlot?.values() ?? [];\n  const isMobile = useIsMobile();\n  const showSidebar = !isMobile && component.compositions.length > 0;\n  const [isSidebarOpen, setSidebarOpenness] = useState(showSidebar);\n\n  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.left;\n\n  const compositionUrl = toPreviewUrl(component, 'compositions');\n  const isScaling = component?.preview?.isScaling;\n  const includesEnvTemplates = component?.preview?.includesEnvTemplate;\n  const useNameParam = component?.preview?.useNameParam;\n  const compositionIdentifierParam =\n    useNameParam || (isScaling && includesEnvTemplates === false)\n      ? `name=${currentComposition?.identifier}`\n      : currentComposition?.identifier;\n\n  const currentCompositionFullUrl = toPreviewUrl(component, 'compositions', compositionIdentifierParam);\n\n  const [compositionParams, setCompositionParams] = useState<Record<string, any>>({\n    fullscreen: true,\n  });\n\n  const queryParams = useMemo(() => queryString.stringify(compositionParams), [compositionParams]);\n\n  // collapse sidebar when empty, reopen when not\n  useEffect(() => setSidebarOpenness(showSidebar), [showSidebar]);\n  return (\n    <CompositionContextProvider queryParams={compositionParams} setQueryParams={setCompositionParams}>\n      <SplitPane layout={sidebarOpenness} size=\"85%\" className={styles.compositionsPage}>\n        <Pane className={styles.left}>\n          <CompositionsMenuBar menuBarWidgets={menuBarWidgets} className={styles.menuBar}>\n            <Tooltip content={'Open in new tab'} placement=\"right\">\n              <Link external href={currentCompositionFullUrl} className={styles.openInNewTab}>\n                <OptionButton icon=\"open-tab\" />\n              </Link>\n            </Tooltip>\n          </CompositionsMenuBar>\n          <SandboxPermissionsAggregator\n            hooks={previewSandboxHooks}\n            onSandboxChange={setSandboxValue}\n            component={component}\n          />\n          <CompositionContent\n            className={styles.compositionPanel}\n            emptyState={emptyState}\n            component={component}\n            selected={currentComposition}\n            queryParams={queryParams}\n            sandbox={sandboxValue}\n          />\n        </Pane>\n        <HoverSplitter className={styles.splitter}>\n          <Collapser\n            placement=\"left\"\n            isOpen={isSidebarOpen}\n            onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag\n            onClick={() => setSidebarOpenness((x) => !x)}\n            tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side compositions`}\n            className={styles.collapser}\n          />\n        </HoverSplitter>\n        <Pane className={styles.right}>\n          <ThemeContext>\n            <TabContainer className={styles.tabsContainer}>\n              <TabList className={styles.tabs}>\n                <Tab>compositions</Tab>\n                <Tab>properties</Tab>\n              </TabList>\n              <TabPanel className={styles.tabContent}>\n                <CompositionsPanel\n                  isScaling={isScaling}\n                  useNameParam={useNameParam}\n                  includesEnvTemplate={component.preview?.includesEnvTemplate}\n                  onSelectComposition={(composition) => {\n                    if (!currentComposition || !location) return;\n                    const selectedCompositionFromUrl = params['*'];\n\n                    const pathSegments = location.pathname.split('/').filter((x) => x);\n\n                    if (!selectedCompositionFromUrl) {\n                      pathSegments.push(composition.identifier.toLowerCase());\n                    } else {\n                      pathSegments[pathSegments.length - 1] = composition.identifier.toLowerCase();\n                    }\n\n                    const urlParams = new URLSearchParams(searchParams);\n                    if (versionFromQueryParams) {\n                      urlParams.set('version', versionFromQueryParams);\n                    }\n                    const newPath = pathSegments.join('/');\n                    navigate(`/${newPath}?${urlParams.toString()}`);\n                  }}\n                  url={compositionUrl}\n                  compositions={component.compositions}\n                  active={currentComposition}\n                />\n              </TabPanel>\n              <TabPanel className={styles.tabContent}>\n                {properties && properties.length > 0 ? <PropTable rows={properties} showListView /> : <div />}\n              </TabPanel>\n            </TabContainer>\n          </ThemeContext>\n        </Pane>\n      </SplitPane>\n    </CompositionContextProvider>\n  );\n}\n\nexport type CompositionContentProps = {\n  component: ComponentModel;\n  selected?: Composition;\n  queryParams?: string | string[];\n  emptyState?: EmptyStateSlot;\n} & ComponentCompositionProps;\n\nexport function CompositionContent({\n  component,\n  selected,\n  queryParams,\n  emptyState,\n  sandbox,\n  ...componentCompositionProps\n}: CompositionContentProps) {\n  const env = component.environment?.id;\n  const EmptyStateTemplate = emptyState?.get(env || ''); // || defaultTemplate;\n\n  if (component.compositions.length === 0 && component.host === 'teambit.workspace/workspace' && EmptyStateTemplate) {\n    return (\n      <div className={styles.noCompositionsPage}>\n        <div>\n          <H1 className={styles.title}>Compositions</H1>\n          <Separator isPresentational className={styles.separator} />\n          <AlertCard\n            level=\"info\"\n            title=\"There are no\n              compositions for this Component. Learn how to add compositions:\"\n          >\n            <MDXLayout>\n              <EmptyStateTemplate />\n            </MDXLayout>\n          </AlertCard>\n        </div>\n      </div>\n    );\n  }\n\n  if (component?.buildStatus === 'pending' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard className={styles.buildStatusMessage} status=\"PROCESSING\" title=\"component preview pending\">\n        this might take some time\n      </StatusMessageCard>\n    );\n  if (component?.buildStatus === 'failed' && component?.host === 'teambit.scope/scope')\n    return (\n      <StatusMessageCard\n        className={styles.buildStatusMessage}\n        status=\"FAILURE\"\n        title=\"failed to get component preview \"\n      ></StatusMessageCard>\n    );\n\n  // TODO: get the docs domain from the community aspect and pass it here as a prop\n  if (component.compositions.length === 0) {\n    return (\n      <EmptyBox\n        title=\"There are no compositions for this component.\"\n        linkText=\"Learn how to create compositions\"\n        link={`https://bit.dev/reference/dev-services-overview/compositions/compositions-overview`}\n      />\n    );\n  }\n\n  return (\n    <ComponentComposition\n      className={styles.compositionsIframe}\n      // TODO: Oded to add control for viewport.\n      viewport={null}\n      component={component}\n      forceHeight=\"100%\"\n      composition={selected}\n      fullContentHeight\n      pubsub={true}\n      queryParams={queryParams}\n      sandbox={sandbox}\n      {...componentCompositionProps}\n    />\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/compositions.ui.runtime.d.ts

@@ -3,22 +3,30 @@ import { ComponentType } from 'react';
 import { SlotRegistry } from '@teambit/harmony';
 import { ComponentUI } from '@teambit/component';
 import { ComponentCompareUI } from '@teambit/component-compare';
+import { UseSandboxPermission } from '@teambit/preview.ui.component-preview';
 import { MenuBarWidget } from './compositions';
 export type CompositionsMenuSlot = SlotRegistry<MenuBarWidget[]>;
 export type EmptyStateSlot = SlotRegistry<ComponentType>;
+export type UsePreviewSandboxSlot = SlotRegistry<UseSandboxPermission>;
 export declare class CompositionsUI {
     private menuBarWidgetSlot;
     private emptyStateSlot;
-    constructor(menuBarWidgetSlot: CompositionsMenuSlot, emptyStateSlot: EmptyStateSlot);
+    private usePreviewSandboxSlot;
+    constructor(menuBarWidgetSlot: CompositionsMenuSlot, emptyStateSlot: EmptyStateSlot, usePreviewSandboxSlot: UsePreviewSandboxSlot);
     /**
      * register a new tester empty state. this allows to register a different empty state from each environment for example.
      */
     registerEmptyState(emptyStateComponent: ComponentType): this;
     registerMenuWidget(...widget: MenuBarWidget[]): void;
+    registerPreviewSandbox(useSandboxPermission: UseSandboxPermission): void;
     getCompositionsCompare: () => import("react/jsx-runtime").JSX.Element;
     static dependencies: import("@teambit/harmony").Aspect[];
     static runtime: import("@teambit/harmony").RuntimeDefinition;
     static slots: ((registerFn: () => string) => SlotRegistry<ReactNode>)[];
-    static provider([component, componentCompare]: [ComponentUI, ComponentCompareUI], config: {}, [compositionMenuSlot, emptyStateSlot]: [CompositionsMenuSlot, EmptyStateSlot]): Promise<CompositionsUI>;
+    static provider([component, componentCompare]: [ComponentUI, ComponentCompareUI], config: {}, [compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot]: [
+        CompositionsMenuSlot,
+        EmptyStateSlot,
+        UsePreviewSandboxSlot
+    ]): Promise<CompositionsUI>;
 }
 export default CompositionsUI;

package/dist/compositions.ui.runtime.js

@@ -80,9 +80,10 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 class CompositionsUI {
-  constructor(menuBarWidgetSlot, emptyStateSlot) {
+  constructor(menuBarWidgetSlot, emptyStateSlot, usePreviewSandboxSlot) {
     this.menuBarWidgetSlot = menuBarWidgetSlot;
     this.emptyStateSlot = emptyStateSlot;
+    this.usePreviewSandboxSlot = usePreviewSandboxSlot;
     _defineProperty(this, "getCompositionsCompare", () => {
       return /*#__PURE__*/_react().default.createElement(_compositionsUi2().CompositionCompare, {
         emptyState: this.emptyStateSlot,
@@ -105,23 +106,32 @@ class CompositionsUI {
   registerMenuWidget(...widget) {
     this.menuBarWidgetSlot.register(widget);
   }
-  static async provider([component, componentCompare], config, [compositionMenuSlot, emptyStateSlot]) {
-    const compositions = new CompositionsUI(compositionMenuSlot, emptyStateSlot);
+  registerPreviewSandbox(useSandboxPermission) {
+    this.usePreviewSandboxSlot.register(useSandboxPermission);
+  }
+  static async provider([component, componentCompare], config, [compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot]) {
+    const compositions = new CompositionsUI(compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot);
     const section = new (_composition().CompositionsSection)(compositions, {
       menuBarWidgetSlot: compositions.menuBarWidgetSlot
-    }, emptyStateSlot);
+    }, emptyStateSlot, usePreviewSandboxSlot);
     const compositionCompare = new (_compositionsUi().CompositionCompareSection)(compositions);
     component.registerRoute(section.route);
     component.registerNavigation(section.navigationLink, section.order);
     componentCompare.registerNavigation(compositionCompare);
     componentCompare.registerRoutes([compositionCompare.route]);
+    compositions.registerPreviewSandbox((manager, componentModel) => {
+      if (componentModel?.host === 'teambit.scope/scope') {
+        manager.add('allow-scripts');
+        manager.add('allow-same-origin');
+      }
+    });
     return compositions;
   }
 }
 exports.CompositionsUI = CompositionsUI;
 _defineProperty(CompositionsUI, "dependencies", [_component().ComponentAspect, _componentCompare().ComponentCompareAspect]);
 _defineProperty(CompositionsUI, "runtime", _ui().UIRuntime);
-_defineProperty(CompositionsUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType()]);
+_defineProperty(CompositionsUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType()]);
 var _default = exports.default = CompositionsUI;
 _compositions().CompositionsAspect.addRuntime(CompositionsUI);
 

package/dist/compositions.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireDefault","require","_harmony","_component","_ui","_compositionsUi","_compositionsUi2","_componentCompare","_composition","_compositions","_compositions2","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","_defineProperty","_toPropertyKey","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","CompositionsUI","constructor","menuBarWidgetSlot","emptyStateSlot","createElement","CompositionCompare","emptyState","PreviewView","compositionProps","CompositionContent","fullContentHeight","forceHeight","registerEmptyState","emptyStateComponent","register","registerMenuWidget","widget","provider","component","componentCompare","config","compositionMenuSlot","compositions","section","CompositionsSection","compositionCompare","CompositionCompareSection","registerRoute","route","registerNavigation","navigationLink","order","registerRoutes","exports","ComponentAspect","ComponentCompareAspect","UIRuntime","Slot","withType","_default","CompositionsAspect","addRuntime"],"sources":["compositions.ui.runtime.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { ComponentType } from 'react';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { ComponentAspect, ComponentUI } from '@teambit/component';\nimport { UIRuntime } from '@teambit/ui';\nimport { CompositionCompareSection } from '@teambit/compositions.ui.composition-compare-section';\nimport { CompositionCompare } from '@teambit/compositions.ui.composition-compare';\nimport { ComponentCompareUI, ComponentCompareAspect } from '@teambit/component-compare';\nimport { CompositionsSection } from './composition.section';\nimport { CompositionsAspect } from './compositions.aspect';\nimport { CompositionContent, MenuBarWidget } from './compositions';\n\nexport type CompositionsMenuSlot = SlotRegistry<MenuBarWidget[]>;\nexport type EmptyStateSlot = SlotRegistry<ComponentType>;\n\nexport class CompositionsUI {\n  constructor(\n    private menuBarWidgetSlot: CompositionsMenuSlot,\n    private emptyStateSlot: EmptyStateSlot\n  ) {}\n  /**\n   * register a new tester empty state. this allows to register a different empty state from each environment for example.\n   */\n  registerEmptyState(emptyStateComponent: ComponentType) {\n    this.emptyStateSlot.register(emptyStateComponent);\n    return this;\n  }\n\n  registerMenuWidget(...widget: MenuBarWidget[]) {\n    this.menuBarWidgetSlot.register(widget);\n  }\n\n  getCompositionsCompare = () => {\n    return (\n      <CompositionCompare\n        emptyState={this.emptyStateSlot}\n        PreviewView={(compositionProps) => {\n          return <CompositionContent {...compositionProps} fullContentHeight forceHeight={'100%'} />;\n        }}\n      />\n    );\n  };\n\n  static dependencies = [ComponentAspect, ComponentCompareAspect];\n  static runtime = UIRuntime;\n  static slots = [Slot.withType<ReactNode>(), Slot.withType<ComponentType>()];\n\n  static async provider(\n    [component, componentCompare]: [ComponentUI, ComponentCompareUI],\n    config: {},\n    [compositionMenuSlot, emptyStateSlot]: [CompositionsMenuSlot, EmptyStateSlot]\n  ) {\n    const compositions = new CompositionsUI(compositionMenuSlot, emptyStateSlot);\n    const section = new CompositionsSection(\n      compositions,\n      { menuBarWidgetSlot: compositions.menuBarWidgetSlot },\n      emptyStateSlot\n    );\n    const compositionCompare = new CompositionCompareSection(compositions);\n    component.registerRoute(section.route);\n    component.registerNavigation(section.navigationLink, section.order);\n    componentCompare.registerNavigation(compositionCompare);\n    componentCompare.registerRoutes([compositionCompare.route]);\n    return compositions;\n  }\n}\n\nexport default CompositionsUI;\n\nCompositionsAspect.addRuntime(CompositionsUI);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","data","_interopRequireDefault","require","_harmony","_component","_ui","_compositionsUi","_compositionsUi2","_componentCompare","_composition","_compositions","_compositions2","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","_defineProperty","_toPropertyKey","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","CompositionsUI","constructor","menuBarWidgetSlot","emptyStateSlot","usePreviewSandboxSlot","createElement","CompositionCompare","emptyState","PreviewView","compositionProps","CompositionContent","fullContentHeight","forceHeight","registerEmptyState","emptyStateComponent","register","registerMenuWidget","widget","registerPreviewSandbox","useSandboxPermission","provider","component","componentCompare","config","compositionMenuSlot","compositions","section","CompositionsSection","compositionCompare","CompositionCompareSection","registerRoute","route","registerNavigation","navigationLink","order","registerRoutes","manager","componentModel","host","add","exports","ComponentAspect","ComponentCompareAspect","UIRuntime","Slot","withType","_default","CompositionsAspect","addRuntime"],"sources":["compositions.ui.runtime.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport React, { ComponentType } from 'react';\nimport { Slot, SlotRegistry } from '@teambit/harmony';\nimport { ComponentAspect, ComponentUI } from '@teambit/component';\nimport { UIRuntime } from '@teambit/ui';\nimport { CompositionCompareSection } from '@teambit/compositions.ui.composition-compare-section';\nimport { CompositionCompare } from '@teambit/compositions.ui.composition-compare';\nimport { ComponentCompareUI, ComponentCompareAspect } from '@teambit/component-compare';\nimport { UseSandboxPermission } from '@teambit/preview.ui.component-preview';\nimport { CompositionsSection } from './composition.section';\nimport { CompositionsAspect } from './compositions.aspect';\nimport { CompositionContent, MenuBarWidget } from './compositions';\n\nexport type CompositionsMenuSlot = SlotRegistry<MenuBarWidget[]>;\nexport type EmptyStateSlot = SlotRegistry<ComponentType>;\nexport type UsePreviewSandboxSlot = SlotRegistry<UseSandboxPermission>;\n\nexport class CompositionsUI {\n  constructor(\n    private menuBarWidgetSlot: CompositionsMenuSlot,\n    private emptyStateSlot: EmptyStateSlot,\n    private usePreviewSandboxSlot: UsePreviewSandboxSlot\n  ) {}\n  /**\n   * register a new tester empty state. this allows to register a different empty state from each environment for example.\n   */\n  registerEmptyState(emptyStateComponent: ComponentType) {\n    this.emptyStateSlot.register(emptyStateComponent);\n    return this;\n  }\n\n  registerMenuWidget(...widget: MenuBarWidget[]) {\n    this.menuBarWidgetSlot.register(widget);\n  }\n\n  registerPreviewSandbox(useSandboxPermission: UseSandboxPermission) {\n    this.usePreviewSandboxSlot.register(useSandboxPermission);\n  }\n\n  getCompositionsCompare = () => {\n    return (\n      <CompositionCompare\n        emptyState={this.emptyStateSlot}\n        PreviewView={(compositionProps) => {\n          return <CompositionContent {...compositionProps} fullContentHeight forceHeight={'100%'} />;\n        }}\n      />\n    );\n  };\n\n  static dependencies = [ComponentAspect, ComponentCompareAspect];\n  static runtime = UIRuntime;\n  static slots = [Slot.withType<ReactNode>(), Slot.withType<ComponentType>(), Slot.withType<UseSandboxPermission>()];\n\n  static async provider(\n    [component, componentCompare]: [ComponentUI, ComponentCompareUI],\n    config: {},\n    [compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot]: [\n      CompositionsMenuSlot,\n      EmptyStateSlot,\n      UsePreviewSandboxSlot,\n    ]\n  ) {\n    const compositions = new CompositionsUI(compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot);\n    const section = new CompositionsSection(\n      compositions,\n      { menuBarWidgetSlot: compositions.menuBarWidgetSlot },\n      emptyStateSlot,\n      usePreviewSandboxSlot\n    );\n    const compositionCompare = new CompositionCompareSection(compositions);\n    component.registerRoute(section.route);\n    component.registerNavigation(section.navigationLink, section.order);\n    componentCompare.registerNavigation(compositionCompare);\n    componentCompare.registerRoutes([compositionCompare.route]);\n    compositions.registerPreviewSandbox((manager, componentModel) => {\n      if (componentModel?.host === 'teambit.scope/scope') {\n        manager.add('allow-scripts');\n        manager.add('allow-same-origin');\n      }\n    });\n    return compositions;\n  }\n}\n\nexport default CompositionsUI;\n\nCompositionsAspect.addRuntime(CompositionsUI);\n"],"mappings":"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","ignoreList":[]}