@teambit/compositions 1.0.894 → 1.0.896

package/composition.section.tsx

@@ -33,6 +33,7 @@ export class CompositionsSection implements Section {
         menuBarWidgets={this.options.menuBarWidgetSlot}
         emptyState={this.emptyStateSlot}
         usePreviewSandboxSlot={this.usePreviewSandboxSlot}
+        enableLiveControls
       />
     ),
   };

package/compositions.tsx

@@ -31,6 +31,7 @@ import styles from './compositions.module.scss';
 import { ComponentComposition } from './ui';
 import { CompositionsPanel } from './ui/compositions-panel/compositions-panel';
 import type { ComponentCompositionProps } from './ui/composition-preview';
+import { useDefaultControlsSchemaResponder } from './use-default-controls-schema-responder';
 
 // @todo - this will be fixed as part of the @teambit/base-react.navigation.link upgrade to latest
 const Link = BaseLink as any;
@@ -43,10 +44,17 @@ export type CompositionsProp = {
   menuBarWidgets?: CompositionsMenuSlot;
   emptyState?: EmptyStateSlot;
   usePreviewSandboxSlot?: UsePreviewSandboxSlot;
+  enableLiveControls?: boolean;
 };
 
-export function Compositions({ menuBarWidgets, emptyState, usePreviewSandboxSlot }: CompositionsProp) {
+export function Compositions({
+  menuBarWidgets,
+  emptyState,
+  usePreviewSandboxSlot,
+  enableLiveControls = true,
+}: CompositionsProp) {
   const component = useContext(ComponentContext);
+  const componentIdStr = component.id.toString();
   const [searchParams] = useSearchParams();
   const params = useParams();
   const versionFromQueryParams = searchParams.get('version');
@@ -59,6 +67,7 @@ export function Compositions({ menuBarWidgets, emptyState, usePreviewSandboxSlot
   const [sandboxValue, setSandboxValue] = useState('');
   const selectedRef = useRef(currentComposition);
   selectedRef.current = currentComposition;
+  useDefaultControlsSchemaResponder(componentIdStr, enableLiveControls);
 
   const properties = useDocs(component.id);
   const previewSandboxHooks = usePreviewSandboxSlot?.values() ?? [];
@@ -79,15 +88,31 @@ export function Compositions({ menuBarWidgets, emptyState, usePreviewSandboxSlot
 
   const currentCompositionFullUrl = toPreviewUrl(component, 'compositions', compositionIdentifierParam);
 
-  const [compositionParams, setCompositionParams] = useState<Record<string, any>>({
-    fullscreen: true,
-    livecontrols: true,
-  });
+  const [compositionParams, setCompositionParams] = useState<Record<string, any>>(() =>
+    enableLiveControls ? { fullscreen: true, livecontrols: true } : { fullscreen: true }
+  );
 
   const queryParams = useMemo(() => queryString.stringify(compositionParams), [compositionParams]);
 
   // collapse sidebar when empty, reopen when not
   useEffect(() => setSidebarOpenness(showSidebar), [showSidebar]);
+  useEffect(() => {
+    if (enableLiveControls) {
+      setCompositionParams((current) => {
+        if (current.livecontrols === true) return current;
+        return { ...current, livecontrols: true };
+      });
+      return;
+    }
+
+    setCompositionParams((current) => {
+      if (!('livecontrols' in current)) return current;
+      const next = { ...current };
+      delete next.livecontrols;
+      return next;
+    });
+  }, [enableLiveControls]);
+
   return (
     <CompositionContextProvider queryParams={compositionParams} setQueryParams={setCompositionParams}>
       <SplitPane layout={sidebarOpenness} size="80%" className={styles.compositionsPage}>

package/dist/composition.section.js

@@ -41,7 +41,8 @@ class CompositionsSection {
       element: /*#__PURE__*/_react().default.createElement(_compositions().Compositions, {
         menuBarWidgets: this.options.menuBarWidgetSlot,
         emptyState: this.emptyStateSlot,
-        usePreviewSandboxSlot: this.usePreviewSandboxSlot
+        usePreviewSandboxSlot: this.usePreviewSandboxSlot,
+        enableLiveControls: true
       })
     });
     _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","usePreviewSandboxSlot","href","children","path","element","createElement","Compositions","menuBarWidgets","menuBarWidgetSlot","emptyState","exports"],"sources":["composition.section.tsx"],"sourcesContent":["import type { 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":[]}
+{"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","enableLiveControls","exports"],"sources":["composition.section.tsx"],"sourcesContent":["import type { 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        enableLiveControls\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,qBAAsB;QAClDU,kBAAkB;MAAA,CACnB;IAEL,CAAC;IAAAjC,eAAA,gBAEO,EAAE;EAnBP;AAoBL;AAACkC,OAAA,CAAAhB,mBAAA,GAAAA,mBAAA","ignoreList":[]}

package/dist/compositions.d.ts

@@ -11,8 +11,9 @@ export type CompositionsProp = {
     menuBarWidgets?: CompositionsMenuSlot;
     emptyState?: EmptyStateSlot;
     usePreviewSandboxSlot?: UsePreviewSandboxSlot;
+    enableLiveControls?: boolean;
 };
-export declare function Compositions({ menuBarWidgets, emptyState, usePreviewSandboxSlot }: CompositionsProp): import("react/jsx-runtime").JSX.Element;
+export declare function Compositions({ menuBarWidgets, emptyState, usePreviewSandboxSlot, enableLiveControls, }: CompositionsProp): import("react/jsx-runtime").JSX.Element;
 export type CompositionContentProps = {
     component: ComponentModel;
     selected?: Composition;

package/dist/compositions.js

@@ -201,20 +201,34 @@ function _compositionsPanel() {
   };
   return data;
 }
+function _useDefaultControlsSchemaResponder() {
+  const data = require("./use-default-controls-schema-responder");
+  _useDefaultControlsSchemaResponder = function () {
+    return data;
+  };
+  return data;
+}
 const _excluded = ["component", "selected", "queryParams", "emptyState", "sandbox"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 // @todo - this will be fixed as part of the @teambit/base-react.navigation.link upgrade to latest
 const Link = _baseReactNavigation().Link;
 function Compositions({
   menuBarWidgets,
   emptyState,
-  usePreviewSandboxSlot
+  usePreviewSandboxSlot,
+  enableLiveControls = true
 }) {
   const component = (0, _react().useContext)(_component().ComponentContext);
+  const componentIdStr = component.id.toString();
   const [searchParams] = (0, _reactRouterDom().useSearchParams)();
   const params = (0, _reactRouterDom().useParams)();
   const versionFromQueryParams = searchParams.get('version');
@@ -225,6 +239,7 @@ function Compositions({
   const [sandboxValue, setSandboxValue] = (0, _react().useState)('');
   const selectedRef = (0, _react().useRef)(currentComposition);
   selectedRef.current = currentComposition;
+  (0, _useDefaultControlsSchemaResponder().useDefaultControlsSchemaResponder)(componentIdStr, enableLiveControls);
   const properties = (0, _docsUiQueries().useDocs)(component.id);
   const previewSandboxHooks = usePreviewSandboxSlot?.values() ?? [];
   const isMobile = (0, _uiFoundationUiHooks().useIsMobile)();
@@ -237,14 +252,33 @@ function Compositions({
   const useNameParam = component?.preview?.useNameParam;
   const compositionIdentifierParam = useNameParam || isScaling && includesEnvTemplates === false ? `name=${currentComposition?.identifier}` : currentComposition?.identifier;
   const currentCompositionFullUrl = (0, _previewUi().toPreviewUrl)(component, 'compositions', compositionIdentifierParam);
-  const [compositionParams, setCompositionParams] = (0, _react().useState)({
+  const [compositionParams, setCompositionParams] = (0, _react().useState)(() => enableLiveControls ? {
     fullscreen: true,
     livecontrols: true
+  } : {
+    fullscreen: true
   });
   const queryParams = (0, _react().useMemo)(() => _queryString().default.stringify(compositionParams), [compositionParams]);
 
   // collapse sidebar when empty, reopen when not
   (0, _react().useEffect)(() => setSidebarOpenness(showSidebar), [showSidebar]);
+  (0, _react().useEffect)(() => {
+    if (enableLiveControls) {
+      setCompositionParams(current => {
+        if (current.livecontrols === true) return current;
+        return _objectSpread(_objectSpread({}, current), {}, {
+          livecontrols: true
+        });
+      });
+      return;
+    }
+    setCompositionParams(current => {
+      if (!('livecontrols' in current)) return current;
+      const next = _objectSpread({}, current);
+      delete next.livecontrols;
+      return next;
+    });
+  }, [enableLiveControls]);
   return /*#__PURE__*/_react().default.createElement(_compositionsUiHooks().CompositionContextProvider, {
     queryParams: compositionParams,
     setQueryParams: setCompositionParams

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","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","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","livecontrols","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 type { ReactNode } from 'react';\nimport React, { useContext, useEffect, useState, useMemo, useRef } 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 type { ComponentModel } from '@teambit/component';\nimport { ComponentContext } 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 type { EmptyStateSlot, CompositionsMenuSlot, UsePreviewSandboxSlot } from './compositions.ui.runtime';\nimport type { Composition } from './composition';\nimport styles from './compositions.module.scss';\nimport { ComponentComposition } from './ui';\nimport { CompositionsPanel } from './ui/compositions-panel/compositions-panel';\nimport type { 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    livecontrols: 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=\"80%\" 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":[]}
+{"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","_useDefaultControlsSchemaResponder","_excluded","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","ownKeys","keys","filter","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","_toPropertyKey","value","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","Link","BaseLink","Compositions","menuBarWidgets","emptyState","usePreviewSandboxSlot","enableLiveControls","component","useContext","ComponentContext","componentIdStr","id","toString","searchParams","useSearchParams","params","useParams","versionFromQueryParams","navigate","useNavigate","location","useLocation","currentCompositionName","currentComposition","compositions","find","composition","identifier","toLowerCase","head","sandboxValue","setSandboxValue","useState","selectedRef","useRef","current","useDefaultControlsSchemaResponder","properties","useDocs","previewSandboxHooks","values","isMobile","useIsMobile","showSidebar","isSidebarOpen","setSidebarOpenness","sidebarOpenness","Layout","row","left","compositionUrl","toPreviewUrl","isScaling","preview","includesEnvTemplates","includesEnvTemplate","useNameParam","compositionIdentifierParam","currentCompositionFullUrl","compositionParams","setCompositionParams","fullscreen","livecontrols","queryParams","useMemo","queryString","stringify","useEffect","next","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","urlParams","URLSearchParams","newPath","join","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 type { ReactNode } from 'react';\nimport React, { useContext, useEffect, useState, useMemo, useRef } 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 type { ComponentModel } from '@teambit/component';\nimport { ComponentContext } 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 type { EmptyStateSlot, CompositionsMenuSlot, UsePreviewSandboxSlot } from './compositions.ui.runtime';\nimport type { Composition } from './composition';\nimport styles from './compositions.module.scss';\nimport { ComponentComposition } from './ui';\nimport { CompositionsPanel } from './ui/compositions-panel/compositions-panel';\nimport type { ComponentCompositionProps } from './ui/composition-preview';\nimport { useDefaultControlsSchemaResponder } from './use-default-controls-schema-responder';\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  enableLiveControls?: boolean;\n};\n\nexport function Compositions({\n  menuBarWidgets,\n  emptyState,\n  usePreviewSandboxSlot,\n  enableLiveControls = true,\n}: CompositionsProp) {\n  const component = useContext(ComponentContext);\n  const componentIdStr = component.id.toString();\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  useDefaultControlsSchemaResponder(componentIdStr, enableLiveControls);\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    enableLiveControls ? { fullscreen: true, livecontrols: true } : { 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  useEffect(() => {\n    if (enableLiveControls) {\n      setCompositionParams((current) => {\n        if (current.livecontrols === true) return current;\n        return { ...current, livecontrols: true };\n      });\n      return;\n    }\n\n    setCompositionParams((current) => {\n      if (!('livecontrols' in current)) return current;\n      const next = { ...current };\n      delete next.livecontrols;\n      return next;\n    });\n  }, [enableLiveControls]);\n\n  return (\n    <CompositionContextProvider queryParams={compositionParams} setQueryParams={setCompositionParams}>\n      <SplitPane layout={sidebarOpenness} size=\"80%\" 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/index.d.ts

@@ -6,6 +6,7 @@ export type { CompositionProps } from './composition';
 export { Composition } from './composition';
 export type { CompositionContentProps } from './compositions';
 export { CompositionContent } from './compositions';
+export { useDefaultControlsSchemaResponder } from './use-default-controls-schema-responder';
 export type { CompositionsPreview } from './compositions.preview.runtime';
-export { ComponentComposition } from './ui';
+export { ComponentComposition, LiveControls, LiveControlsDiffPanel, LiveControlsRenderer } from './ui';
 export default CompositionsAspect;

package/dist/index.js

@@ -27,7 +27,31 @@ Object.defineProperty(exports, "CompositionsAspect", {
     return _compositions().CompositionsAspect;
   }
 });
+Object.defineProperty(exports, "LiveControls", {
+  enumerable: true,
+  get: function () {
+    return _ui().LiveControls;
+  }
+});
+Object.defineProperty(exports, "LiveControlsDiffPanel", {
+  enumerable: true,
+  get: function () {
+    return _ui().LiveControlsDiffPanel;
+  }
+});
+Object.defineProperty(exports, "LiveControlsRenderer", {
+  enumerable: true,
+  get: function () {
+    return _ui().LiveControlsRenderer;
+  }
+});
 exports.default = void 0;
+Object.defineProperty(exports, "useDefaultControlsSchemaResponder", {
+  enumerable: true,
+  get: function () {
+    return _useDefaultControlsSchemaResponder().useDefaultControlsSchemaResponder;
+  }
+});
 function _compositions() {
   const data = require("./compositions.aspect");
   _compositions = function () {
@@ -49,6 +73,13 @@ function _compositions2() {
   };
   return data;
 }
+function _useDefaultControlsSchemaResponder() {
+  const data = require("./use-default-controls-schema-responder");
+  _useDefaultControlsSchemaResponder = function () {
+    return data;
+  };
+  return data;
+}
 function _ui() {
   const data = require("./ui");
   _ui = function () {

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_compositions","data","require","_composition","_compositions2","_ui","_default","exports","default","CompositionsAspect"],"sources":["index.ts"],"sourcesContent":["import { CompositionsAspect } from './compositions.aspect';\n\nexport { CompositionsAspect };\nexport type { CompositionsMain } from './compositions.main.runtime';\nexport type {\n  CompositionsUI,\n  CompositionsMenuSlot,\n  EmptyStateSlot,\n  UsePreviewSandboxSlot,\n} from './compositions.ui.runtime';\nexport type { CompositionProps } from './composition';\nexport { Composition } from './composition';\nexport type { CompositionContentProps } from './compositions';\nexport { CompositionContent } from './compositions';\nexport type { CompositionsPreview } from './compositions.preview.runtime';\nexport { ComponentComposition } from './ui';\nexport default CompositionsAspect;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAAA,cAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,aAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAWA,SAAAE,aAAA;EAAA,MAAAF,IAAA,GAAAC,OAAA;EAAAC,YAAA,YAAAA,CAAA;IAAA,OAAAF,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAG,eAAA;EAAA,MAAAH,IAAA,GAAAC,OAAA;EAAAE,cAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAI,IAAA;EAAA,MAAAJ,IAAA,GAAAC,OAAA;EAAAG,GAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAA4C,IAAAK,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAC7BC,kCAAkB","ignoreList":[]}
+{"version":3,"names":["_compositions","data","require","_composition","_compositions2","_useDefaultControlsSchemaResponder","_ui","_default","exports","default","CompositionsAspect"],"sources":["index.ts"],"sourcesContent":["import { CompositionsAspect } from './compositions.aspect';\n\nexport { CompositionsAspect };\nexport type { CompositionsMain } from './compositions.main.runtime';\nexport type {\n  CompositionsUI,\n  CompositionsMenuSlot,\n  EmptyStateSlot,\n  UsePreviewSandboxSlot,\n} from './compositions.ui.runtime';\nexport type { CompositionProps } from './composition';\nexport { Composition } from './composition';\nexport type { CompositionContentProps } from './compositions';\nexport { CompositionContent } from './compositions';\nexport { useDefaultControlsSchemaResponder } from './use-default-controls-schema-responder';\nexport type { CompositionsPreview } from './compositions.preview.runtime';\nexport { ComponentComposition, LiveControls, LiveControlsDiffPanel, LiveControlsRenderer } from './ui';\nexport default CompositionsAspect;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAAA,cAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,aAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAWA,SAAAE,aAAA;EAAA,MAAAF,IAAA,GAAAC,OAAA;EAAAC,YAAA,YAAAA,CAAA;IAAA,OAAAF,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAG,eAAA;EAAA,MAAAH,IAAA,GAAAC,OAAA;EAAAE,cAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,mCAAA;EAAA,MAAAJ,IAAA,GAAAC,OAAA;EAAAG,kCAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAK,IAAA;EAAA,MAAAL,IAAA,GAAAC,OAAA;EAAAI,GAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAuG,IAAAM,QAAA,GAAAC,OAAA,CAAAC,OAAA,GACxFC,kCAAkB","ignoreList":[]}

package/dist/{preview-1772229083132.js → preview-1772562380877.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.compositions_compositions@1.0.894/dist/compositions.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.compositions_compositions@1.0.894/dist/compositions.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.compositions_compositions@1.0.896/dist/compositions.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.compositions_compositions@1.0.896/dist/compositions.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

package/dist/ui/compositions-panel/compositions-panel.js

@@ -85,11 +85,6 @@ const _excluded = ["url", "compositions", "isScaling", "onSelectComposition", "a
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function CompositionsPanel(_ref) {
@@ -104,10 +99,15 @@ function CompositionsPanel(_ref) {
       className
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  // setup drawer state
-  // TODO: only for alpha versions of live controls. remove when stable.
-  const [hasLiveControls, setHasLiveControls] = (0, _react().useState)(false);
   const [openDrawerList, onToggleDrawer] = (0, _react().useState)(['COMPOSITIONS', 'LIVE_CONTROLS']);
+  const {
+    hasLiveControls,
+    ready,
+    defs,
+    values,
+    onChange,
+    setTimestamp
+  } = (0, _compositionsUi().useLiveControls)();
   const handleDrawerToggle = id => {
     const isDrawerOpen = openDrawerList.includes(id);
     if (isDrawerOpen) {
@@ -126,68 +126,22 @@ function CompositionsPanel(_ref) {
   const versionFromQueryParams = searchParams.get('version');
   const navigate = (0, _baseReactNavigation().useNavigate)();
 
-  // live control state
-  const [controlsTimestamp, setControlsTimestamp] = (0, _react().useState)(0);
-  const [controlsDefs, setControlsDefs] = (0, _react().useState)(null);
-  const [controlsValues, setControlsValues] = (0, _react().useState)({});
-  const [mounter, setMounter] = (0, _react().useState)();
-
   // composition navigation action
   const handleSelect = (0, _react().useCallback)(selected => {
     onSelect && onSelect(selected);
     if (selected === active) return;
-    setControlsTimestamp(0);
-  }, [onSelect]);
+    setTimestamp(0);
+  }, [onSelect, active, setTimestamp]);
   const onCompositionCodeClicked = (0, _react().useCallback)(composition => e => {
     e.preventDefault();
-    setControlsTimestamp(0);
+    setTimestamp(0);
     const queryParams = new URLSearchParams();
     if (versionFromQueryParams) {
       queryParams.set('version', versionFromQueryParams);
     }
     const basePath = location?.pathname.split('/~compositions')[0];
     navigate(`${basePath}/~code/${composition.filepath}?${queryParams.toString()}#search=${composition.identifier}`);
-  }, [location?.pathname, versionFromQueryParams]);
-
-  // listen to the mounter for live control updates
-  (0, _react().useEffect)(() => {
-    // TODO: remove when stable.
-    window.addEventListener('message', e => {
-      if (e.data.type === 'composition-live-controls:activate') {
-        setHasLiveControls(true);
-      }
-    });
-    function onLiveControlsSetup(e) {
-      (0, _compositionsUi().getReadyListener)(e, ({
-        controls,
-        values,
-        timestamp
-      }) => {
-        const iframeWindow = e.source;
-        setMounter(iframeWindow);
-        setControlsDefs(controls);
-        setControlsValues(values);
-        setControlsTimestamp(timestamp);
-      });
-    }
-    window.addEventListener('message', onLiveControlsSetup);
-    return () => {
-      window.removeEventListener('message', onLiveControlsSetup);
-    };
-  }, []);
-
-  // sync live control updates back to the mounter
-  const onLiveControlsUpdate = (0, _react().useCallback)((key, value) => {
-    if (mounter) {
-      (0, _compositionsUi().broadcastUpdate)(mounter, controlsTimestamp, {
-        key,
-        value
-      });
-    }
-    setControlsValues(prev => _objectSpread(_objectSpread({}, prev), {}, {
-      [key]: value
-    }));
-  }, [mounter, controlsValues, controlsTimestamp]);
+  }, [location?.pathname, navigate, setTimestamp, versionFromQueryParams]);
   return /*#__PURE__*/_react().default.createElement("div", {
     className: (0, _classnames().default)(_compositionsPanelModule().default.container)
   }, /*#__PURE__*/_react().default.createElement(_uiFoundationUiTree().DrawerUI, {
@@ -226,15 +180,15 @@ function CompositionsPanel(_ref) {
       className: _compositionsPanelModule().default.icon,
       of: "open-tab"
     })))));
-  }))), /* TODO: remove when stable */hasLiveControls ? /*#__PURE__*/_react().default.createElement(_uiFoundationUiTree().DrawerUI, {
+  }))), hasLiveControls ? /*#__PURE__*/_react().default.createElement(_uiFoundationUiTree().DrawerUI, {
+    name: "LIVE CONTROLS",
+    className: (0, _classnames().default)(_compositionsPanelModule().default.tab, className),
     isOpen: openDrawerList.includes('LIVE_CONTROLS'),
-    onToggle: () => handleDrawerToggle('LIVE_CONTROLS'),
-    className: (0, _classnames().default)(_compositionsPanelModule().default.tab),
-    name: "LIVE CONTROLS"
-  }, controlsTimestamp ? /*#__PURE__*/_react().default.createElement(_liveControlPanel().LiveControls, {
-    defs: controlsDefs,
-    values: controlsValues,
-    onChange: onLiveControlsUpdate
+    onToggle: () => handleDrawerToggle('LIVE_CONTROLS')
+  }, ready ? /*#__PURE__*/_react().default.createElement(_liveControlPanel().LiveControls, {
+    defs: defs,
+    values: values,
+    onChange: onChange
   }) : /*#__PURE__*/_react().default.createElement("div", {
     className: _compositionsPanelModule().default.noLiveControls
   }, "No live controls available for this composition")) : null);