@teambit/compositions 0.0.951 → 0.0.952

package/composition.section.tsx

@@ -17,11 +17,11 @@ export class CompositionsSection implements Section {
 
   navigationLink = {
     href: '~compositions',
-    children: 'Compositions',
+    children: 'Preview',
   };
 
   route = {
-    path: '~compositions',
+    path: '~compositions/*',
     element: <Compositions menuBarWidgets={this.options.menuBarWidgetSlot} emptyState={this.emptyStateSlot} />,
   };
 

package/compositions.module.scss

@@ -60,7 +60,6 @@ $panelBg: #fafafa;
 .tabContent {
   flex: 1 1;
   overflow: auto;
-
   &:empty {
     display: none;
   }

package/compositions.tsx

@@ -1,4 +1,5 @@
 import React, { useContext, useEffect, useState, useMemo, useRef, ReactNode } from 'react';
+import { useParams } from 'react-router-dom';
 import head from 'lodash.head';
 import queryString from 'query-string';
 import { ThemeContext } from '@teambit/documenter.theme.theme-context';
@@ -18,7 +19,7 @@ import { MDXLayout } from '@teambit/mdx.ui.mdx-layout';
 import { Separator } from '@teambit/design.ui.separator';
 import { H1 } from '@teambit/documenter.ui.heading';
 import { AlertCard } from '@teambit/design.ui.alert-card';
-import { Link } from '@teambit/base-react.navigation.link';
+import { Link, useNavigate, useLocation } from '@teambit/base-react.navigation.link';
 import { OptionButton } from '@teambit/design.ui.input.option-button';
 import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';
 import { EmptyStateSlot } from './compositions.ui.runtime';
@@ -36,20 +37,29 @@ export type CompositionsProp = { menuBarWidgets?: CompositionsMenuSlot; emptySta
 
 export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
   const component = useContext(ComponentContext);
-  const [selected, selectComposition] = useState(head(component.compositions));
-  const selectedRef = useRef(selected);
-  selectedRef.current = selected;
+  // const [searchParams, setSearchParams] = useSearchParams();
+  const params = useParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const currentCompositionName = params['*'];
+  // console.log(routes);
+  const currentComposition =
+    component.compositions.find((composition) => composition.identifier.toLowerCase() === currentCompositionName) ||
+    head(component.compositions);
+  // const [selected, selectComposition] = useState(head(component.compositions));
+  const selectedRef = useRef(currentComposition);
+  selectedRef.current = currentComposition;
 
   const properties = useDocs(component.id);
 
   // reset selected composition when component changes.
   // this does trigger renderer, but perf seems to be ok
-  useEffect(() => {
-    const prevId = selectedRef.current?.identifier;
-    const next = component.compositions.find((c) => c.identifier === prevId) || component.compositions[0];
+  // useEffect(() => {
+  //   const prevId = selectedRef.current?.identifier;
+  //   const next = component.compositions.find((c) => c.identifier === prevId) || component.compositions[0];
 
-    selectComposition(next);
-  }, [component]);
+  //   navigate(next.displayName.toLowerCase().replaceAll(' ', '-'));
+  // }, [component]);
   const isMobile = useIsMobile();
   const showSidebar = !isMobile && component.compositions.length > 0;
   const [isSidebarOpen, setSidebarOpenness] = useState(showSidebar);
@@ -58,7 +68,9 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
 
   const compositionUrl = toPreviewUrl(component, 'compositions');
   const isScaling = component?.preview?.isScaling;
-  const compositionIdentifierParam = isScaling ? `name=${selected?.identifier}` : selected?.identifier;
+  const compositionIdentifierParam = isScaling
+    ? `name=${currentComposition?.identifier}`
+    : currentComposition?.identifier;
   const currentCompositionFullUrl = toPreviewUrl(component, 'compositions', compositionIdentifierParam);
 
   const [compositionParams, setCompositionParams] = useState<Record<string, any>>({});
@@ -78,7 +90,7 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
           <CompositionContent
             emptyState={emptyState}
             component={component}
-            selected={selected}
+            selected={currentComposition}
             queryParams={queryParams}
           />
         </Pane>
@@ -102,10 +114,29 @@ export function Compositions({ menuBarWidgets, emptyState }: CompositionsProp) {
               <TabPanel className={styles.tabContent}>
                 <CompositionsPanel
                   isScaling={isScaling}
-                  onSelectComposition={selectComposition}
+                  onSelectComposition={(composition) => {
+                    if (!currentComposition || !location) return;
+                    if (location.pathname.includes(currentComposition.identifier.toLowerCase())) {
+                      navigate(composition.identifier.toLowerCase());
+                      return;
+                    }
+
+                    const path = location.pathname.replace(
+                      currentComposition.identifier.toLowerCase(),
+                      composition.identifier.toLowerCase()
+                    );
+
+                    if (!path) return;
+                    if(!path.includes(composition.identifier.toLowerCase())) {
+                      const nextPath = location.pathname.concat(`/${composition.identifier.toLowerCase()}`)
+                      navigate(nextPath)
+                      return;
+                    }
+                    navigate(path);
+                  }}
                   url={compositionUrl}
                   compositions={component.compositions}
-                  active={selected}
+                  active={currentComposition}
                   className={styles.compost}
                 />
               </TabPanel>

package/compositions.ui.runtime.tsx

@@ -49,10 +49,7 @@ export class CompositionsUI {
     const compositionCompare = new CompositionCompareSection(compositions);
     component.registerRoute(section.route);
     component.registerNavigation(section.navigationLink, section.order);
-    componentCompare.registerNavigation({
-      props: compositionCompare.navigationLink,
-      order: compositionCompare.navigationLink.order,
-    });
+    componentCompare.registerNavigation(compositionCompare);
     componentCompare.registerRoutes([compositionCompare.route]);
     return compositions;
   }

package/dist/composition.section.js

@@ -37,10 +37,10 @@ class CompositionsSection {
     this.emptyStateSlot = emptyStateSlot;
     (0, _defineProperty2().default)(this, "navigationLink", {
       href: '~compositions',
-      children: 'Compositions'
+      children: 'Preview'
     });
     (0, _defineProperty2().default)(this, "route", {
-      path: '~compositions',
+      path: '~compositions/*',
       element: /*#__PURE__*/_react().default.createElement(_compositions().Compositions, {
         menuBarWidgets: this.options.menuBarWidgetSlot,
         emptyState: this.emptyStateSlot

package/dist/composition.section.js.map

@@ -1 +1 @@
-{"version":3,"names":["CompositionsSection","constructor","compositions","options","emptyStateSlot","href","children","path","element","menuBarWidgetSlot"],"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: 'Compositions',\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;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAKO,MAAMA,mBAAmB,CAAoB;EAClDC,WAAW;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;IAAA,wDAGvB;MACfC,IAAI,EAAE,eAAe;MACrBC,QAAQ,EAAE;IACZ,CAAC;IAAA,+CAEO;MACNC,IAAI,EAAE,eAAe;MACrBC,OAAO,eAAE,+BAAC,4BAAY;QAAC,cAAc,EAAE,IAAI,CAACL,OAAO,CAACM,iBAAkB;QAAC,UAAU,EAAE,IAAI,CAACL;MAAe;IACzG,CAAC;IAAA,+CAEO,EAAE;EAZP;AAaL;AAAC"}
+{"version":3,"names":["CompositionsSection","constructor","compositions","options","emptyStateSlot","href","children","path","element","menuBarWidgetSlot"],"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;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAKO,MAAMA,mBAAmB,CAAoB;EAClDC,WAAW;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;IAAA,wDAGvB;MACfC,IAAI,EAAE,eAAe;MACrBC,QAAQ,EAAE;IACZ,CAAC;IAAA,+CAEO;MACNC,IAAI,EAAE,iBAAiB;MACvBC,OAAO,eAAE,+BAAC,4BAAY;QAAC,cAAc,EAAE,IAAI,CAACL,OAAO,CAACM,iBAAkB;QAAC,UAAU,EAAE,IAAI,CAACL;MAAe;IACzG,CAAC;IAAA,+CAEO,EAAE;EAZP;AAaL;AAAC"}

package/dist/compositions.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,6 +16,13 @@ function _react() {
   };
   return data;
 }
+function _reactRouterDom() {
+  const data = require("react-router-dom");
+  _reactRouterDom = function () {
+    return data;
+  };
+  return data;
+}
 function _lodash() {
   const data = _interopRequireDefault(require("lodash.head"));
   _lodash = function () {
@@ -197,26 +206,33 @@ function Compositions({
 }) {
   var _component$preview;
   const component = (0, _react().useContext)(_component().ComponentContext);
-  const [selected, selectComposition] = (0, _react().useState)((0, _lodash().default)(component.compositions));
-  const selectedRef = (0, _react().useRef)(selected);
-  selectedRef.current = selected;
+  // const [searchParams, setSearchParams] = useSearchParams();
+  const params = (0, _reactRouterDom().useParams)();
+  const navigate = (0, _baseReactNavigation().useNavigate)();
+  const location = (0, _baseReactNavigation().useLocation)();
+  const currentCompositionName = params['*'];
+  // console.log(routes);
+  const currentComposition = component.compositions.find(composition => composition.identifier.toLowerCase() === currentCompositionName) || (0, _lodash().default)(component.compositions);
+  // const [selected, selectComposition] = useState(head(component.compositions));
+  const selectedRef = (0, _react().useRef)(currentComposition);
+  selectedRef.current = currentComposition;
   const properties = (0, _docsUiQueries().useDocs)(component.id);
 
   // reset selected composition when component changes.
   // this does trigger renderer, but perf seems to be ok
-  (0, _react().useEffect)(() => {
-    var _selectedRef$current;
-    const prevId = (_selectedRef$current = selectedRef.current) === null || _selectedRef$current === void 0 ? void 0 : _selectedRef$current.identifier;
-    const next = component.compositions.find(c => c.identifier === prevId) || component.compositions[0];
-    selectComposition(next);
-  }, [component]);
+  // useEffect(() => {
+  //   const prevId = selectedRef.current?.identifier;
+  //   const next = component.compositions.find((c) => c.identifier === prevId) || component.compositions[0];
+
+  //   navigate(next.displayName.toLowerCase().replaceAll(' ', '-'));
+  // }, [component]);
   const isMobile = (0, _uiFoundationUiHooks().useIsMobile)();
   const showSidebar = !isMobile && component.compositions.length > 0;
   const [isSidebarOpen, setSidebarOpenness] = (0, _react().useState)(showSidebar);
   const sidebarOpenness = isSidebarOpen ? _baseUiSurfacesSplitPane().Layout.row : _baseUiSurfacesSplitPane().Layout.left;
   const compositionUrl = (0, _previewUi().toPreviewUrl)(component, 'compositions');
   const isScaling = component === null || component === void 0 ? void 0 : (_component$preview = component.preview) === null || _component$preview === void 0 ? void 0 : _component$preview.isScaling;
-  const compositionIdentifierParam = isScaling ? `name=${selected === null || selected === void 0 ? void 0 : selected.identifier}` : selected === null || selected === void 0 ? void 0 : selected.identifier;
+  const compositionIdentifierParam = isScaling ? `name=${currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.identifier}` : currentComposition === null || currentComposition === void 0 ? void 0 : currentComposition.identifier;
   const currentCompositionFullUrl = (0, _previewUi().toPreviewUrl)(component, 'compositions', compositionIdentifierParam);
   const [compositionParams, setCompositionParams] = (0, _react().useState)({});
   const queryParams = (0, _react().useMemo)(() => _queryString().default.stringify(compositionParams), [compositionParams]);
@@ -244,7 +260,7 @@ function Compositions({
   }))), /*#__PURE__*/_react().default.createElement(CompositionContent, {
     emptyState: emptyState,
     component: component,
-    selected: selected,
+    selected: currentComposition,
     queryParams: queryParams
   })), /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane2().HoverSplitter, {
     className: _compositionsModule().default.splitter
@@ -266,10 +282,24 @@ function Compositions({
     className: _compositionsModule().default.tabContent
   }, /*#__PURE__*/_react().default.createElement(_compositionsPanel().CompositionsPanel, {
     isScaling: isScaling,
-    onSelectComposition: selectComposition,
+    onSelectComposition: composition => {
+      if (!currentComposition || !location) return;
+      if (location.pathname.includes(currentComposition.identifier.toLowerCase())) {
+        navigate(composition.identifier.toLowerCase());
+        return;
+      }
+      const path = location.pathname.replace(currentComposition.identifier.toLowerCase(), composition.identifier.toLowerCase());
+      if (!path) return;
+      if (!path.includes(composition.identifier.toLowerCase())) {
+        const nextPath = location.pathname.concat(`/${composition.identifier.toLowerCase()}`);
+        navigate(nextPath);
+        return;
+      }
+      navigate(path);
+    },
     url: compositionUrl,
     compositions: component.compositions,
-    active: selected,
+    active: currentComposition,
     className: _compositionsModule().default.compost
   })), /*#__PURE__*/_react().default.createElement(_panels().TabPanel, {
     className: _compositionsModule().default.tabContent

package/dist/compositions.js.map

@@ -1 +1 @@
-{"version":3,"names":["Compositions","menuBarWidgets","emptyState","component","useContext","ComponentContext","selected","selectComposition","useState","head","compositions","selectedRef","useRef","current","properties","useDocs","id","useEffect","prevId","identifier","next","find","c","isMobile","useIsMobile","showSidebar","length","isSidebarOpen","setSidebarOpenness","sidebarOpenness","Layout","row","left","compositionUrl","toPreviewUrl","isScaling","preview","compositionIdentifierParam","currentCompositionFullUrl","compositionParams","setCompositionParams","queryParams","useMemo","queryString","stringify","styles","compositionsPage","menuBar","openInNewTab","splitter","e","stopPropagation","x","collapser","right","tabsContainer","tabs","tabContent","compost","CompositionContent","env","environment","EmptyStateTemplate","get","host","noCompositionsPage","title","separator","buildStatus","buildStatusMessage","compositionsIframe"],"sources":["compositions.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState, useMemo, useRef, ReactNode } from 'react';\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 } 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 { 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';\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 [selected, selectComposition] = useState(head(component.compositions));\n  const selectedRef = useRef(selected);\n  selectedRef.current = selected;\n\n  const properties = useDocs(component.id);\n\n  // reset selected composition when component changes.\n  // this does trigger renderer, but perf seems to be ok\n  useEffect(() => {\n    const prevId = selectedRef.current?.identifier;\n    const next = component.compositions.find((c) => c.identifier === prevId) || component.compositions[0];\n\n    selectComposition(next);\n  }, [component]);\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 compositionIdentifierParam = isScaling ? `name=${selected?.identifier}` : selected?.identifier;\n  const currentCompositionFullUrl = toPreviewUrl(component, 'compositions', compositionIdentifierParam);\n\n  const [compositionParams, setCompositionParams] = useState<Record<string, any>>({});\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            <Link external href={currentCompositionFullUrl} className={styles.openInNewTab}>\n              <OptionButton icon=\"open-tab\" />\n            </Link>\n          </CompositionsMenuBar>\n          <CompositionContent\n            emptyState={emptyState}\n            component={component}\n            selected={selected}\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                  onSelectComposition={selectComposition}\n                  url={compositionUrl}\n                  compositions={component.compositions}\n                  active={selected}\n                  className={styles.compost}\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};\n\nexport function CompositionContent({ component, selected, queryParams, emptyState }: 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/docs/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    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"names":["Compositions","menuBarWidgets","emptyState","component","useContext","ComponentContext","params","useParams","navigate","useNavigate","location","useLocation","currentCompositionName","currentComposition","compositions","find","composition","identifier","toLowerCase","head","selectedRef","useRef","current","properties","useDocs","id","isMobile","useIsMobile","showSidebar","length","isSidebarOpen","setSidebarOpenness","useState","sidebarOpenness","Layout","row","left","compositionUrl","toPreviewUrl","isScaling","preview","compositionIdentifierParam","currentCompositionFullUrl","compositionParams","setCompositionParams","queryParams","useMemo","queryString","stringify","useEffect","styles","compositionsPage","menuBar","openInNewTab","splitter","e","stopPropagation","x","collapser","right","tabsContainer","tabs","tabContent","pathname","includes","path","replace","nextPath","concat","compost","CompositionContent","selected","env","environment","EmptyStateTemplate","get","host","noCompositionsPage","title","separator","buildStatus","buildStatusMessage","compositionsIframe"],"sources":["compositions.tsx"],"sourcesContent":["import React, { useContext, useEffect, useState, useMemo, useRef, ReactNode } from 'react';\nimport { useParams } 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, 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 { 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';\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, setSearchParams] = useSearchParams();\n  const params = useParams();\n  const navigate = useNavigate();\n  const location = useLocation();\n  const currentCompositionName = params['*'];\n  // console.log(routes);\n  const currentComposition =\n    component.compositions.find((composition) => composition.identifier.toLowerCase() === currentCompositionName) ||\n    head(component.compositions);\n  // const [selected, selectComposition] = useState(head(component.compositions));\n  const selectedRef = useRef(currentComposition);\n  selectedRef.current = currentComposition;\n\n  const properties = useDocs(component.id);\n\n  // reset selected composition when component changes.\n  // this does trigger renderer, but perf seems to be ok\n  // useEffect(() => {\n  //   const prevId = selectedRef.current?.identifier;\n  //   const next = component.compositions.find((c) => c.identifier === prevId) || component.compositions[0];\n\n  //   navigate(next.displayName.toLowerCase().replaceAll(' ', '-'));\n  // }, [component]);\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 compositionIdentifierParam = isScaling\n    ? `name=${currentComposition?.identifier}`\n    : currentComposition?.identifier;\n  const currentCompositionFullUrl = toPreviewUrl(component, 'compositions', compositionIdentifierParam);\n\n  const [compositionParams, setCompositionParams] = useState<Record<string, any>>({});\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            <Link external href={currentCompositionFullUrl} className={styles.openInNewTab}>\n              <OptionButton icon=\"open-tab\" />\n            </Link>\n          </CompositionsMenuBar>\n          <CompositionContent\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                  onSelectComposition={(composition) => {\n                    if (!currentComposition || !location) return;\n                    if (location.pathname.includes(currentComposition.identifier.toLowerCase())) {\n                      navigate(composition.identifier.toLowerCase());\n                      return;\n                    }\n\n                    const path = location.pathname.replace(\n                      currentComposition.identifier.toLowerCase(),\n                      composition.identifier.toLowerCase()\n                    );\n\n                    if (!path) return;\n                    if(!path.includes(composition.identifier.toLowerCase())) {\n                      const nextPath = location.pathname.concat(`/${composition.identifier.toLowerCase()}`)\n                      navigate(nextPath)\n                      return;\n                    }\n                    navigate(path);\n                  }}\n                  url={compositionUrl}\n                  compositions={component.compositions}\n                  active={currentComposition}\n                  className={styles.compost}\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};\n\nexport function CompositionContent({ component, selected, queryParams, emptyState }: 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/docs/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    />\n  );\n}\n"],"mappings":"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"}

package/dist/compositions.module.scss

@@ -60,7 +60,6 @@ $panelBg: #fafafa;
 .tabContent {
   flex: 1 1;
   overflow: auto;
-
   &:empty {
     display: none;
   }

package/dist/compositions.ui.runtime.js

@@ -105,10 +105,7 @@ class CompositionsUI {
     const compositionCompare = new (_compositionsUi().CompositionCompareSection)(compositions);
     component.registerRoute(section.route);
     component.registerNavigation(section.navigationLink, section.order);
-    componentCompare.registerNavigation({
-      props: compositionCompare.navigationLink,
-      order: compositionCompare.navigationLink.order
-    });
+    componentCompare.registerNavigation(compositionCompare);
     componentCompare.registerRoutes([compositionCompare.route]);
     return compositions;
   }

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

@@ -1 +1 @@
-{"version":3,"names":["CompositionsUI","constructor","menuBarWidgetSlot","emptyStateSlot","registerEmptyState","emptyStateComponent","register","registerMenuWidget","widget","provider","component","componentCompare","config","compositionMenuSlot","compositions","section","CompositionsSection","compositionCompare","CompositionCompareSection","registerRoute","route","registerNavigation","navigationLink","order","props","registerRoutes","ComponentAspect","ComponentCompareAspect","UIRuntime","Slot","withType","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 { MenuBarWidget } from './compositions';\n\nexport type CompositionsMenuSlot = SlotRegistry<MenuBarWidget[]>;\nexport type EmptyStateSlot = SlotRegistry<ComponentType>;\n\nexport class CompositionsUI {\n  constructor(private menuBarWidgetSlot: CompositionsMenuSlot, private emptyStateSlot: EmptyStateSlot) {}\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 <CompositionCompare emptyState={this.emptyStateSlot} />;\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({\n      props: compositionCompare.navigationLink,\n      order: compositionCompare.navigationLink.order,\n    });\n    componentCompare.registerRoutes([compositionCompare.route]);\n    return compositions;\n  }\n}\n\nexport default CompositionsUI;\n\nCompositionsAspect.addRuntime(CompositionsUI);\n"],"mappings":";;;;;;;;;;;;;;;;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAMO,MAAMA,cAAc,CAAC;EAC1BC,WAAW,CAASC,iBAAuC,EAAUC,cAA8B,EAAE;IAAA,KAAjFD,iBAAuC,GAAvCA,iBAAuC;IAAA,KAAUC,cAA8B,GAA9BA,cAA8B;IAAA,gEAa1E,MAAM;MAC7B,oBAAO,+BAAC,qCAAkB;QAAC,UAAU,EAAE,IAAI,CAACA;MAAe,EAAG;IAChE,CAAC;EAfqG;EACtG;AACF;AACA;EACEC,kBAAkB,CAACC,mBAAkC,EAAE;IACrD,IAAI,CAACF,cAAc,CAACG,QAAQ,CAACD,mBAAmB,CAAC;IACjD,OAAO,IAAI;EACb;EAEAE,kBAAkB,CAAC,GAAGC,MAAuB,EAAE;IAC7C,IAAI,CAACN,iBAAiB,CAACI,QAAQ,CAACE,MAAM,CAAC;EACzC;EAUA,aAAaC,QAAQ,CACnB,CAACC,SAAS,EAAEC,gBAAgB,CAAoC,EAChEC,MAAU,EACV,CAACC,mBAAmB,EAAEV,cAAc,CAAyC,EAC7E;IACA,MAAMW,YAAY,GAAG,IAAId,cAAc,CAACa,mBAAmB,EAAEV,cAAc,CAAC;IAC5E,MAAMY,OAAO,GAAG,KAAIC,kCAAmB,EACrCF,YAAY,EACZ;MAAEZ,iBAAiB,EAAEY,YAAY,CAACZ;IAAkB,CAAC,EACrDC,cAAc,CACf;IACD,MAAMc,kBAAkB,GAAG,KAAIC,2CAAyB,EAACJ,YAAY,CAAC;IACtEJ,SAAS,CAACS,aAAa,CAACJ,OAAO,CAACK,KAAK,CAAC;IACtCV,SAAS,CAACW,kBAAkB,CAACN,OAAO,CAACO,cAAc,EAAEP,OAAO,CAACQ,KAAK,CAAC;IACnEZ,gBAAgB,CAACU,kBAAkB,CAAC;MAClCG,KAAK,EAAEP,kBAAkB,CAACK,cAAc;MACxCC,KAAK,EAAEN,kBAAkB,CAACK,cAAc,CAACC;IAC3C,CAAC,CAAC;IACFZ,gBAAgB,CAACc,cAAc,CAAC,CAACR,kBAAkB,CAACG,KAAK,CAAC,CAAC;IAC3D,OAAON,YAAY;EACrB;AACF;AAAC;AAAA,gCA3CYd,cAAc,kBAkBH,CAAC0B,4BAAe,EAAEC,0CAAsB,CAAC;AAAA,gCAlBpD3B,cAAc,aAmBR4B,eAAS;AAAA,gCAnBf5B,cAAc,WAoBV,CAAC6B,eAAI,CAACC,QAAQ,EAAa,EAAED,eAAI,CAACC,QAAQ,EAAiB,CAAC;AAAA,eAyB9D9B,cAAc;AAAA;AAE7B+B,kCAAkB,CAACC,UAAU,CAAChC,cAAc,CAAC"}
+{"version":3,"names":["CompositionsUI","constructor","menuBarWidgetSlot","emptyStateSlot","registerEmptyState","emptyStateComponent","register","registerMenuWidget","widget","provider","component","componentCompare","config","compositionMenuSlot","compositions","section","CompositionsSection","compositionCompare","CompositionCompareSection","registerRoute","route","registerNavigation","navigationLink","order","registerRoutes","ComponentAspect","ComponentCompareAspect","UIRuntime","Slot","withType","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 { MenuBarWidget } from './compositions';\n\nexport type CompositionsMenuSlot = SlotRegistry<MenuBarWidget[]>;\nexport type EmptyStateSlot = SlotRegistry<ComponentType>;\n\nexport class CompositionsUI {\n  constructor(private menuBarWidgetSlot: CompositionsMenuSlot, private emptyStateSlot: EmptyStateSlot) {}\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 <CompositionCompare emptyState={this.emptyStateSlot} />;\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":";;;;;;;;;;;;;;;;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AACA;EAAA;EAAA;IAAA;EAAA;EAAA;AAAA;AAMO,MAAMA,cAAc,CAAC;EAC1BC,WAAW,CAASC,iBAAuC,EAAUC,cAA8B,EAAE;IAAA,KAAjFD,iBAAuC,GAAvCA,iBAAuC;IAAA,KAAUC,cAA8B,GAA9BA,cAA8B;IAAA,gEAa1E,MAAM;MAC7B,oBAAO,+BAAC,qCAAkB;QAAC,UAAU,EAAE,IAAI,CAACA;MAAe,EAAG;IAChE,CAAC;EAfqG;EACtG;AACF;AACA;EACEC,kBAAkB,CAACC,mBAAkC,EAAE;IACrD,IAAI,CAACF,cAAc,CAACG,QAAQ,CAACD,mBAAmB,CAAC;IACjD,OAAO,IAAI;EACb;EAEAE,kBAAkB,CAAC,GAAGC,MAAuB,EAAE;IAC7C,IAAI,CAACN,iBAAiB,CAACI,QAAQ,CAACE,MAAM,CAAC;EACzC;EAUA,aAAaC,QAAQ,CACnB,CAACC,SAAS,EAAEC,gBAAgB,CAAoC,EAChEC,MAAU,EACV,CAACC,mBAAmB,EAAEV,cAAc,CAAyC,EAC7E;IACA,MAAMW,YAAY,GAAG,IAAId,cAAc,CAACa,mBAAmB,EAAEV,cAAc,CAAC;IAC5E,MAAMY,OAAO,GAAG,KAAIC,kCAAmB,EACrCF,YAAY,EACZ;MAAEZ,iBAAiB,EAAEY,YAAY,CAACZ;IAAkB,CAAC,EACrDC,cAAc,CACf;IACD,MAAMc,kBAAkB,GAAG,KAAIC,2CAAyB,EAACJ,YAAY,CAAC;IACtEJ,SAAS,CAACS,aAAa,CAACJ,OAAO,CAACK,KAAK,CAAC;IACtCV,SAAS,CAACW,kBAAkB,CAACN,OAAO,CAACO,cAAc,EAAEP,OAAO,CAACQ,KAAK,CAAC;IACnEZ,gBAAgB,CAACU,kBAAkB,CAACJ,kBAAkB,CAAC;IACvDN,gBAAgB,CAACa,cAAc,CAAC,CAACP,kBAAkB,CAACG,KAAK,CAAC,CAAC;IAC3D,OAAON,YAAY;EACrB;AACF;AAAC;AAAA,gCAxCYd,cAAc,kBAkBH,CAACyB,4BAAe,EAAEC,0CAAsB,CAAC;AAAA,gCAlBpD1B,cAAc,aAmBR2B,eAAS;AAAA,gCAnBf3B,cAAc,WAoBV,CAAC4B,eAAI,CAACC,QAAQ,EAAa,EAAED,eAAI,CAACC,QAAQ,EAAiB,CAAC;AAAA,eAsB9D7B,cAAc;AAAA;AAE7B8B,kCAAkB,CAACC,UAAU,CAAC/B,cAAc,CAAC"}

package/dist/{preview-1672802758290.js → preview-1672889151191.js}

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

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "0.0.951",
+  "version": "0.0.952",
   "homepage": "https://bit.dev/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "0.0.951"
+    "version": "0.0.952"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -25,16 +25,16 @@
     "@teambit/documenter.ui.heading": "4.1.1",
     "@teambit/documenter.ui.property-table": "4.1.3",
     "@teambit/evangelist.elements.icon": "1.0.2",
-    "@teambit/component": "0.0.951",
+    "@teambit/component": "0.0.952",
     "@teambit/compositions.model.composition-id": "0.0.496",
-    "@teambit/graphql": "0.0.951",
-    "@teambit/cli": "0.0.637",
-    "@teambit/dev-files": "0.0.951",
-    "@teambit/envs": "0.0.951",
-    "@teambit/preview": "0.0.951",
-    "@teambit/schema": "0.0.951",
+    "@teambit/graphql": "0.0.952",
+    "@teambit/cli": "0.0.638",
+    "@teambit/dev-files": "0.0.952",
+    "@teambit/envs": "0.0.952",
+    "@teambit/preview": "0.0.952",
+    "@teambit/schema": "0.0.952",
     "@teambit/toolbox.path.match-patterns": "0.0.9",
-    "@teambit/workspace": "0.0.951",
+    "@teambit/workspace": "0.0.952",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.498",
     "@teambit/component-id": "0.0.425",
     "@teambit/compositions.ui.compositions-menu-bar": "0.0.172",
@@ -44,14 +44,14 @@
     "@teambit/design.ui.surfaces.status-message-card": "0.0.17",
     "@teambit/docs.ui.queries.get-docs": "0.0.498",
     "@teambit/mdx.ui.mdx-layout": "0.0.512",
-    "@teambit/panels": "0.0.638",
-    "@teambit/preview.ui.component-preview": "0.0.509",
+    "@teambit/panels": "0.0.639",
+    "@teambit/preview.ui.component-preview": "0.0.510",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.206",
     "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.188",
-    "@teambit/component-compare": "0.0.199",
-    "@teambit/compositions.ui.composition-compare-section": "0.0.1",
-    "@teambit/compositions.ui.composition-compare": "0.0.140",
-    "@teambit/ui": "0.0.951"
+    "@teambit/component-compare": "0.0.200",
+    "@teambit/compositions.ui.composition-compare-section": "0.0.2",
+    "@teambit/compositions.ui.composition-compare": "0.0.141",
+    "@teambit/ui": "0.0.952"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -65,7 +65,8 @@
     "@teambit/compositions.aspect-docs.compositions": "0.0.150"
   },
   "peerDependencies": {
-    "@teambit/legacy": "1.0.418",
+    "react-router-dom": "^6.0.0",
+    "@teambit/legacy": "1.0.419",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },