@teambit/compositions 1.0.629 → 1.0.631

package/compositions.tsx

@@ -88,7 +88,7 @@ export function Compositions({ menuBarWidgets, emptyState, usePreviewSandboxSlot
   useEffect(() => setSidebarOpenness(showSidebar), [showSidebar]);
   return (
     <CompositionContextProvider queryParams={compositionParams} setQueryParams={setCompositionParams}>
-      <SplitPane layout={sidebarOpenness} size="85%" className={styles.compositionsPage}>
+      <SplitPane layout={sidebarOpenness} size="80%" className={styles.compositionsPage}>
         <Pane className={styles.left}>
           <CompositionsMenuBar menuBarWidgets={menuBarWidgets} className={styles.menuBar}>
             <Tooltip content={'Open in new tab'} placement="right">

package/dist/compositions.js

@@ -249,7 +249,7 @@ function Compositions({
     setQueryParams: setCompositionParams
   }, /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane().SplitPane, {
     layout: sidebarOpenness,
-    size: "85%",
+    size: "80%",
     className: _compositionsModule().default.compositionsPage
   }, /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane().Pane, {
     className: _compositionsModule().default.left

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

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

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

@@ -106,8 +106,6 @@ function CompositionsPanel(_ref) {
       className: _compositionsPanelModule().default.panelLink,
       onClick: () => handleSelect(composition)
     }, /*#__PURE__*/_react().default.createElement("span", {
-      className: _compositionsPanelModule().default.box
-    }), /*#__PURE__*/_react().default.createElement("span", {
       className: _compositionsPanelModule().default.name
     }, composition.displayName)), /*#__PURE__*/_react().default.createElement("div", {
       className: _compositionsPanelModule().default.right
@@ -120,7 +118,7 @@ function CompositionsPanel(_ref) {
       content: "Open in new tab",
       placement: "bottom"
     }, /*#__PURE__*/_react().default.createElement("a", {
-      className: _compositionsPanelModule().default.panelLink,
+      className: _compositionsPanelModule().default.iconLink,
       target: "_blank",
       rel: "noopener noreferrer",
       href: href

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

@@ -1 +1 @@
-{"version":3,"names":["_evangelistElements","data","require","_classnames","_interopRequireDefault","_reactRouterDom","_react","_interopRequireWildcard","_uiFoundationUi","_designUi","_baseReactNavigation","_compositionsPanelModule","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","CompositionsPanel","_ref","url","compositions","isScaling","onSelectComposition","onSelect","active","includesEnvTemplate","useNameParam","className","rest","shouldAddNameParam","handleSelect","useCallback","selected","location","useLocation","searchParams","useSearchParams","versionFromQueryParams","navigate","useNavigate","onCompositionCodeClicked","composition","preventDefault","queryParams","URLSearchParams","basePath","pathname","split","filepath","toString","identifier","createElement","classNames","map","href","key","styles","linkWrapper","panelLink","onClick","box","name","displayName","right","MenuWidgetIcon","codeLink","icon","tooltipContent","Tooltip","content","placement","target","rel","Icon","of"],"sources":["compositions-panel.tsx"],"sourcesContent":["import { Icon } from '@teambit/evangelist.elements.icon';\nimport classNames from 'classnames';\nimport { useSearchParams } from 'react-router-dom';\nimport React, { useCallback } from 'react';\nimport { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';\nimport { Tooltip } from '@teambit/design.ui.tooltip';\nimport { useNavigate, useLocation } from '@teambit/base-react.navigation.link';\nimport { Composition } from '../../composition';\nimport styles from './compositions-panel.module.scss';\n\nexport type CompositionsPanelProps = {\n  /**\n   * list of compositions\n   */\n  compositions: Composition[];\n  /**\n   * select composition to display\n   */\n  onSelectComposition: (composition: Composition) => void;\n  /**\n   * the currently active composition\n   */\n  active?: Composition;\n  /**\n   * the url to the base composition. doesntc contain the current composition params\n   */\n  url: string;\n  /**\n   * checks if a component is using the new preview api. if false, doesnt scale to support new preview\n   */\n  isScaling?: boolean;\n\n  includesEnvTemplate?: boolean;\n\n  useNameParam?: boolean;\n} & React.HTMLAttributes<HTMLUListElement>;\n\nexport function CompositionsPanel({\n  url,\n  compositions,\n  isScaling,\n  onSelectComposition: onSelect,\n  active,\n  includesEnvTemplate,\n  useNameParam,\n  className,\n  ...rest\n}: CompositionsPanelProps) {\n  const shouldAddNameParam = useNameParam || (isScaling && includesEnvTemplate === false);\n\n  const handleSelect = useCallback(\n    (selected: Composition) => {\n      onSelect && onSelect(selected);\n    },\n    [onSelect]\n  );\n\n  const location = useLocation();\n  const [searchParams] = useSearchParams();\n  const versionFromQueryParams = searchParams.get('version');\n  const navigate = useNavigate();\n\n  const onCompositionCodeClicked = useCallback(\n    (composition: Composition) => (e: React.MouseEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      const queryParams = new URLSearchParams();\n      if (versionFromQueryParams) {\n        queryParams.set('version', versionFromQueryParams);\n      }\n      const basePath = location?.pathname.split('/~compositions')[0];\n      navigate(`${basePath}/~code/${composition.filepath}?${queryParams.toString()}#search=${composition.identifier}`);\n    },\n    [location?.pathname, versionFromQueryParams]\n  );\n\n  return (\n    <ul {...rest} className={classNames(className)}>\n      {compositions.map((composition) => {\n        const href = shouldAddNameParam ? `${url}&name=${composition.identifier}` : `${url}&${composition.identifier}`;\n        return (\n          <li\n            key={composition.identifier}\n            className={classNames(styles.linkWrapper, composition === active && styles.active)}\n          >\n            <a className={styles.panelLink} onClick={() => handleSelect(composition)}>\n              <span className={styles.box}></span>\n              <span className={styles.name}>{composition.displayName}</span>\n            </a>\n            <div className={styles.right}>\n              <MenuWidgetIcon\n                className={styles.codeLink}\n                icon=\"Code\"\n                tooltipContent=\"Code\"\n                onClick={onCompositionCodeClicked(composition)}\n              />\n              <Tooltip content=\"Open in new tab\" placement=\"bottom\">\n                <a className={styles.panelLink} target=\"_blank\" rel=\"noopener noreferrer\" href={href}>\n                  <Icon className={styles.icon} of=\"open-tab\" />\n                </a>\n              </Tooltip>\n            </div>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_evangelistElements","data","require","_classnames","_interopRequireDefault","_reactRouterDom","_react","_interopRequireWildcard","_uiFoundationUi","_designUi","_baseReactNavigation","_compositionsPanelModule","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","CompositionsPanel","_ref","url","compositions","isScaling","onSelectComposition","onSelect","active","includesEnvTemplate","useNameParam","className","rest","shouldAddNameParam","handleSelect","useCallback","selected","location","useLocation","searchParams","useSearchParams","versionFromQueryParams","navigate","useNavigate","onCompositionCodeClicked","composition","preventDefault","queryParams","URLSearchParams","basePath","pathname","split","filepath","toString","identifier","createElement","classNames","map","href","key","styles","linkWrapper","panelLink","onClick","name","displayName","right","MenuWidgetIcon","codeLink","icon","tooltipContent","Tooltip","content","placement","iconLink","target","rel","Icon","of"],"sources":["compositions-panel.tsx"],"sourcesContent":["import { Icon } from '@teambit/evangelist.elements.icon';\nimport classNames from 'classnames';\nimport { useSearchParams } from 'react-router-dom';\nimport React, { useCallback } from 'react';\nimport { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';\nimport { Tooltip } from '@teambit/design.ui.tooltip';\nimport { useNavigate, useLocation } from '@teambit/base-react.navigation.link';\nimport { Composition } from '../../composition';\nimport styles from './compositions-panel.module.scss';\n\nexport type CompositionsPanelProps = {\n  /**\n   * list of compositions\n   */\n  compositions: Composition[];\n  /**\n   * select composition to display\n   */\n  onSelectComposition: (composition: Composition) => void;\n  /**\n   * the currently active composition\n   */\n  active?: Composition;\n  /**\n   * the url to the base composition. doesntc contain the current composition params\n   */\n  url: string;\n  /**\n   * checks if a component is using the new preview api. if false, doesnt scale to support new preview\n   */\n  isScaling?: boolean;\n\n  includesEnvTemplate?: boolean;\n\n  useNameParam?: boolean;\n} & React.HTMLAttributes<HTMLUListElement>;\n\nexport function CompositionsPanel({\n  url,\n  compositions,\n  isScaling,\n  onSelectComposition: onSelect,\n  active,\n  includesEnvTemplate,\n  useNameParam,\n  className,\n  ...rest\n}: CompositionsPanelProps) {\n  const shouldAddNameParam = useNameParam || (isScaling && includesEnvTemplate === false);\n\n  const handleSelect = useCallback(\n    (selected: Composition) => {\n      onSelect && onSelect(selected);\n    },\n    [onSelect]\n  );\n\n  const location = useLocation();\n  const [searchParams] = useSearchParams();\n  const versionFromQueryParams = searchParams.get('version');\n  const navigate = useNavigate();\n\n  const onCompositionCodeClicked = useCallback(\n    (composition: Composition) => (e: React.MouseEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      const queryParams = new URLSearchParams();\n      if (versionFromQueryParams) {\n        queryParams.set('version', versionFromQueryParams);\n      }\n      const basePath = location?.pathname.split('/~compositions')[0];\n      navigate(`${basePath}/~code/${composition.filepath}?${queryParams.toString()}#search=${composition.identifier}`);\n    },\n    [location?.pathname, versionFromQueryParams]\n  );\n\n  return (\n    <ul {...rest} className={classNames(className)}>\n      {compositions.map((composition) => {\n        const href = shouldAddNameParam ? `${url}&name=${composition.identifier}` : `${url}&${composition.identifier}`;\n        return (\n          <li\n            key={composition.identifier}\n            className={classNames(styles.linkWrapper, composition === active && styles.active)}\n          >\n            <a className={styles.panelLink} onClick={() => handleSelect(composition)}>\n              <span className={styles.name}>{composition.displayName}</span>\n            </a>\n            <div className={styles.right}>\n              <MenuWidgetIcon\n                className={styles.codeLink}\n                icon=\"Code\"\n                tooltipContent=\"Code\"\n                onClick={onCompositionCodeClicked(composition)}\n              />\n              <Tooltip content=\"Open in new tab\" placement=\"bottom\">\n                <a className={styles.iconLink} target=\"_blank\" rel=\"noopener noreferrer\" href={href}>\n                  <Icon className={styles.icon} of=\"open-tab\" />\n                </a>\n              </Tooltip>\n            </div>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui/compositions-panel/compositions-panel.module.scss

@@ -7,19 +7,23 @@
   font-size: var(--bit-p-xs);
   transition: all 300ms ease-in-out;
   color: var(--on-background-color);
+  position: relative;
 
   &:hover {
     background-color: var(--border-medium-color, #ededed);
     // border-radius: 8px;
     transition: background-color 300ms ease-in-out;
+
+    .panelLink {
+      padding-right: 40px;
+    }
+
     .right {
-      visibility: unset;
+      visibility: visible;
       opacity: 1;
       color: var(--bit-text-color-light, #6c707c);
-      //TODO - fix hover effect and timing of icon
-      transition:
-        visibility 200ms,
-        opacity 100ms ease-in-out;
+      transition: opacity 100ms ease-in-out;
+
       .icon {
         &:hover {
           color: var(--bit-text-color-heavy);
@@ -27,6 +31,7 @@
       }
     }
   }
+
   &.active {
     display: flex;
     align-items: center;
@@ -43,9 +48,10 @@
     }
 
     .right {
-      visibility: unset;
+      // visibility: unset;
       opacity: 1;
       color: var(--bit-accent-bg, #eceaff);
+
       .icon {
         &:hover {
           color: var(--bit-bg-color, #ffffff);
@@ -53,7 +59,12 @@
       }
     }
   }
+
   .right {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
     display: flex;
     gap: 12px;
     align-items: center;
@@ -62,9 +73,10 @@
     visibility: hidden;
     font-size: 13px;
     transition:
-      visibility 200ms,
-      opacity 100ms ease-in-out;
+      opacity 100ms ease-in-out,
+      visibility 0s linear 100ms;
   }
+
   .codeLink {
     cursor: pointer;
   }
@@ -78,12 +90,21 @@
   margin-right: 11px;
   border-radius: 1px;
 }
+
 .name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-right: 8px;
 }
+
+.iconLink {
+  display: flex;
+  align-items: center;
+  color: inherit;
+  text-decoration: none;
+}
+
 .panelLink {
   display: flex;
   align-items: center;
@@ -94,6 +115,7 @@
   text-decoration: none;
   color: inherit;
   min-width: 0;
+  transition: padding-right 200ms ease-in-out;
 
   &:active {
     color: inherit;
@@ -104,12 +126,14 @@
   display: flex;
   align-items: center;
   margin-bottom: 17px;
+
   > div {
     position: relative;
     padding: 8px;
     text-transform: uppercase;
     font-size: 12px;
     font-weight: bold;
+
     &:not(:first-child) {
       color: #878c9a;
     }

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/compositions",
-  "version": "1.0.629",
+  "version": "1.0.631",
   "homepage": "https://bit.cloud/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "1.0.629"
+    "version": "1.0.631"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
@@ -34,26 +34,26 @@
     "@teambit/compositions.ui.composition-compare": "0.0.258",
     "@teambit/evangelist.elements.icon": "1.0.2",
     "@teambit/ui-foundation.ui.menu-widget-icon": "0.0.502",
-    "@teambit/component": "1.0.629",
+    "@teambit/component": "1.0.631",
     "@teambit/compositions.model.composition-id": "0.0.505",
-    "@teambit/graphql": "1.0.629",
-    "@teambit/cli": "0.0.1206",
-    "@teambit/component.sources": "0.0.103",
-    "@teambit/dev-files": "1.0.629",
-    "@teambit/envs": "1.0.629",
-    "@teambit/legacy.consumer-component": "0.0.52",
-    "@teambit/preview": "1.0.629",
-    "@teambit/schema": "1.0.629",
-    "@teambit/scope": "1.0.629",
+    "@teambit/graphql": "1.0.631",
+    "@teambit/cli": "0.0.1208",
+    "@teambit/component.sources": "0.0.104",
+    "@teambit/dev-files": "1.0.631",
+    "@teambit/envs": "1.0.631",
+    "@teambit/legacy.consumer-component": "0.0.53",
+    "@teambit/preview": "1.0.631",
+    "@teambit/schema": "1.0.631",
+    "@teambit/scope": "1.0.631",
     "@teambit/toolbox.path.match-patterns": "0.0.19",
-    "@teambit/workspace": "1.0.629",
+    "@teambit/workspace": "1.0.631",
     "@teambit/design.ui.tooltip": "0.0.375",
     "@teambit/docs.ui.queries.get-docs": "0.0.509",
-    "@teambit/panels": "0.0.1208",
+    "@teambit/panels": "0.0.1210",
     "@teambit/preview.ui.component-preview": "1.0.24",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.227",
-    "@teambit/component-compare": "1.0.629",
-    "@teambit/ui": "1.0.629",
+    "@teambit/component-compare": "1.0.631",
+    "@teambit/ui": "1.0.631",
     "@teambit/workspace.ui.use-workspace-mode": "0.0.2"
   },
   "devDependencies": {

package/ui/compositions-panel/compositions-panel.module.scss

@@ -7,19 +7,23 @@
   font-size: var(--bit-p-xs);
   transition: all 300ms ease-in-out;
   color: var(--on-background-color);
+  position: relative;
 
   &:hover {
     background-color: var(--border-medium-color, #ededed);
     // border-radius: 8px;
     transition: background-color 300ms ease-in-out;
+
+    .panelLink {
+      padding-right: 40px;
+    }
+
     .right {
-      visibility: unset;
+      visibility: visible;
       opacity: 1;
       color: var(--bit-text-color-light, #6c707c);
-      //TODO - fix hover effect and timing of icon
-      transition:
-        visibility 200ms,
-        opacity 100ms ease-in-out;
+      transition: opacity 100ms ease-in-out;
+
       .icon {
         &:hover {
           color: var(--bit-text-color-heavy);
@@ -27,6 +31,7 @@
       }
     }
   }
+
   &.active {
     display: flex;
     align-items: center;
@@ -43,9 +48,10 @@
     }
 
     .right {
-      visibility: unset;
+      // visibility: unset;
       opacity: 1;
       color: var(--bit-accent-bg, #eceaff);
+
       .icon {
         &:hover {
           color: var(--bit-bg-color, #ffffff);
@@ -53,7 +59,12 @@
       }
     }
   }
+
   .right {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
     display: flex;
     gap: 12px;
     align-items: center;
@@ -62,9 +73,10 @@
     visibility: hidden;
     font-size: 13px;
     transition:
-      visibility 200ms,
-      opacity 100ms ease-in-out;
+      opacity 100ms ease-in-out,
+      visibility 0s linear 100ms;
   }
+
   .codeLink {
     cursor: pointer;
   }
@@ -78,12 +90,21 @@
   margin-right: 11px;
   border-radius: 1px;
 }
+
 .name {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   margin-right: 8px;
 }
+
+.iconLink {
+  display: flex;
+  align-items: center;
+  color: inherit;
+  text-decoration: none;
+}
+
 .panelLink {
   display: flex;
   align-items: center;
@@ -94,6 +115,7 @@
   text-decoration: none;
   color: inherit;
   min-width: 0;
+  transition: padding-right 200ms ease-in-out;
 
   &:active {
     color: inherit;
@@ -104,12 +126,14 @@
   display: flex;
   align-items: center;
   margin-bottom: 17px;
+
   > div {
     position: relative;
     padding: 8px;
     text-transform: uppercase;
     font-size: 12px;
     font-weight: bold;
+
     &:not(:first-child) {
       color: #878c9a;
     }

package/ui/compositions-panel/compositions-panel.tsx

@@ -83,7 +83,6 @@ export function CompositionsPanel({
             className={classNames(styles.linkWrapper, composition === active && styles.active)}
           >
             <a className={styles.panelLink} onClick={() => handleSelect(composition)}>
-              <span className={styles.box}></span>
               <span className={styles.name}>{composition.displayName}</span>
             </a>
             <div className={styles.right}>
@@ -94,7 +93,7 @@ export function CompositionsPanel({
                 onClick={onCompositionCodeClicked(composition)}
               />
               <Tooltip content="Open in new tab" placement="bottom">
-                <a className={styles.panelLink} target="_blank" rel="noopener noreferrer" href={href}>
+                <a className={styles.iconLink} target="_blank" rel="noopener noreferrer" href={href}>
                   <Icon className={styles.icon} of="open-tab" />
                 </a>
               </Tooltip>