@teambit/component 1.0.1217 → 1.0.1219

package/dist/{preview-1791720556076.js → preview-1791901820893.js}

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

package/dist/ui/menu/menu-nav.js

@@ -109,12 +109,27 @@ function CollapsibleMenuNav({
     }
     return (_widgetPlugins || []).filter(widget => !widget[1].props.hideInMinimalMode).sort(sortFn);
   }, [widgetSlot, widgetPlugins, isMinimal]);
-  const links = [...plugins, ...widgets].map(([, menuItem], index) => {
+
+  // in minimal mode, primary tabs (e.g. Preview) render outside the ResponsiveNavbar, which would
+  // otherwise collapse any tab but the first when space runs out. The first tab is kept with them
+  // to preserve its position (the navbar never collapses it either); all other tabs stay collapsible.
+  const hasPrimary = isMinimal && plugins.some(([, {
+    props
+  }]) => props.primaryInMinimalMode);
+  const fixedPlugins = hasPrimary ? plugins.filter(([, {
+    props
+  }], index) => index === 0 || props.primaryInMinimalMode) : [];
+  const collapsiblePlugins = plugins.filter(plugin => !fixedPlugins.includes(plugin));
+  const responsiveItems = [...collapsiblePlugins, ...widgets];
+
+  // `activeTabIndex` refers to the full list; map it to the responsive list (-1 when a fixed tab is active)
+  const responsiveActiveIndex = activeTabIndex === undefined ? undefined : responsiveItems.indexOf([...plugins, ...widgets][activeTabIndex]);
+  const links = responsiveItems.map(([, menuItem], index) => {
     // these styles keep plugins to the left and widgets to the right.
-    const lastPluginStyle = plugins.length - 1 === index ? {
+    const lastPluginStyle = collapsiblePlugins.length - 1 === index ? {
       marginRight: 'auto'
     } : {};
-    const firstWidgetStyle = plugins.length === index ? {
+    const firstWidgetStyle = collapsiblePlugins.length === index ? {
       marginLeft: 'auto'
     } : {};
     return {
@@ -127,9 +142,17 @@ function CollapsibleMenuNav({
     };
   });
   return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, isMinimal && /*#__PURE__*/_react().default.createElement(MinimalMenuNav, {
-    links: links,
+    navItems: [...plugins, ...widgets],
     secondaryNavClassName: secondaryNavClassName
-  }), /*#__PURE__*/_react().default.createElement(_designNavigation().ResponsiveNavbar, {
+  }), fixedPlugins.length > 0 && /*#__PURE__*/_react().default.createElement("div", {
+    className: _menuModule().default.minimalFixedNav
+  }, fixedPlugins.map(([, {
+    props
+  }], index) => /*#__PURE__*/_react().default.createElement(TopBarNavComponent, {
+    key: `minimal-fixed-${index}`,
+    menuItemProps: props,
+    isInMenu: false
+  }))), /*#__PURE__*/_react().default.createElement(_designNavigation().ResponsiveNavbar, {
     navClassName: (0, _classnames().default)(_menuModule().default.tab, isMinimal && _menuModule().default.hideMinimalMobileNav, className),
     secondaryNavClassName: secondaryNavClassName,
     style: {
@@ -138,18 +161,27 @@ function CollapsibleMenuNav({
     },
     priority: "none",
     tabs: links,
-    defaultActiveIndex: activeTabIndex,
+    defaultActiveIndex: responsiveActiveIndex,
     alwaysShowActiveTab: alwaysShowActiveTab
   }, children));
 }
 function MinimalMenuNav({
-  links,
+  navItems,
   secondaryNavClassName
 }) {
-  if (links.length === 0) return null;
+  if (navItems.length === 0) return null;
+
+  // primary tabs (e.g. Preview) stay pinned on mobile, right after the More menu that holds the
+  // rest (Overview first); they render their compact `minimalMobileChildren` (an icon) when given.
+  const primaryItems = navItems.filter(([, {
+    props
+  }]) => props.primaryInMinimalMode);
+  const moreItems = navItems.filter(([, {
+    props
+  }]) => !props.primaryInMinimalMode);
   return /*#__PURE__*/_react().default.createElement("div", {
     className: _menuModule().default.minimalMoreNav
-  }, /*#__PURE__*/_react().default.createElement(_designInputs().Dropdown, {
+  }, moreItems.length > 0 && /*#__PURE__*/_react().default.createElement(_designInputs().Dropdown, {
     placeholderContent: /*#__PURE__*/_react().default.createElement("div", {
       className: _menuModule().default.minimalMoreButton,
       "aria-label": "More component sections"
@@ -162,13 +194,24 @@ function MinimalMenuNav({
     placeholderBorder: false,
     clickToggles: true,
     margin: 8
-  }, links.map((link, index) => /*#__PURE__*/_react().default.createElement(_designInputsSelectors().MenuItem, {
+  }, moreItems.map(([, {
+    props
+  }], index) => /*#__PURE__*/_react().default.createElement(_designInputsSelectors().MenuItem, {
     className: _menuModule().default.minimalMenuItem,
     key: `minimal-dropdown-${index}`
   }, /*#__PURE__*/_react().default.createElement(TopBarNavComponent, {
-    menuItemProps: link.tabProps?.menuItemProps,
+    menuItemProps: props,
     isInMenu: true
-  })))));
+  })))), primaryItems.map(([, {
+    props
+  }], index) => /*#__PURE__*/_react().default.createElement(TopBarNavComponent, {
+    key: `minimal-primary-${index}`,
+    menuItemProps: _objectSpread(_objectSpread({}, props), {}, {
+      children: props.minimalMobileChildren ?? props.children,
+      className: (0, _classnames().default)(props.className, _menuModule().default.minimalPrimaryTab)
+    }),
+    isInMenu: false
+  })));
 }
 function sortFn([, {
   order: first

package/dist/ui/menu/menu-nav.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_designNavigation","_designInputs","_designInputsSelectors","_workspaceUi","_topBarNav","_menuModule","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","_toPropertyKey","value","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","_extends","assign","bind","TopBarNavComponent","isInMenu","menuItemProps","widgetDisplayText","displayName","undefined","createElement","TopBarNav","className","classnames","styles","topBarNav","noBorder","children","CollapsibleMenuNav","navigationSlot","widgetSlot","navPlugins","widgetPlugins","secondaryNavClassName","activeTabIndex","alwaysShowActiveTab","isMinimal","useWorkspaceMode","plugins","useMemo","_navPlugins","toArray","sort","sortFn","widget","props","hideInMinimalMode","widgets","_widgetPlugins","links","map","menuItem","index","lastPluginStyle","marginRight","firstWidgetStyle","marginLeft","component","tabProps","style","Fragment","MinimalMenuNav","ResponsiveNavbar","navClassName","tab","hideMinimalMobileNav","width","height","priority","tabs","defaultActiveIndex","minimalMoreNav","Dropdown","placeholderContent","minimalMoreButton","src","alt","dropClass","position","placeholderBorder","clickToggles","margin","link","MenuItem","minimalMenuItem","key","order","first","second"],"sources":["menu-nav.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport classnames from 'classnames';\nimport { ResponsiveNavbar } from '@teambit/design.navigation.responsive-navbar';\nimport type { Tab, TabProps } from '@teambit/design.navigation.responsive-navbar';\nimport { Dropdown } from '@teambit/design.inputs.dropdown';\nimport { MenuItem } from '@teambit/design.inputs.selectors.menu-item';\nimport { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport type { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport type MenuNavProps = {\n  /**\n   * @deprecated\n   * use @property navPlugins\n   */\n  navigationSlot?: OrderedNavigationSlot;\n  /**\n   * @deprecated\n   * use @property widgetPlugins\n   */\n  widgetSlot?: OrderedNavigationSlot;\n  navPlugins?: [string, NavPlugin][];\n  widgetPlugins?: [string, NavPlugin][];\n  /**\n   * A className to pass to the secondary nav, i.e dropdown\n   */\n  secondaryNavClassName?: string;\n  activeTabIndex?: number;\n  alwaysShowActiveTab?: boolean;\n} & React.HTMLAttributes<HTMLElement>;\n\nfunction TopBarNavComponent({ isInMenu, menuItemProps }: TabProps) {\n  /**\n   * to accommodate for the top level nav which should display the children\n   * in the dropdown secondary menu if there is a displayName set\n   */\n  const widgetDisplayText = menuItemProps?.displayName && isInMenu ? menuItemProps?.displayName : undefined;\n  return (\n    <TopBarNav\n      {...menuItemProps}\n      className={classnames(menuItemProps?.className, styles.topBarNav, isInMenu && styles.noBorder)}\n    >\n      {widgetDisplayText || menuItemProps?.children}\n    </TopBarNav>\n  );\n}\n\nexport function CollapsibleMenuNav({\n  navigationSlot,\n  widgetSlot,\n  navPlugins = [],\n  widgetPlugins = [],\n  className,\n  secondaryNavClassName,\n  activeTabIndex,\n  alwaysShowActiveTab,\n  children,\n}: MenuNavProps) {\n  const { isMinimal } = useWorkspaceMode();\n  const plugins = useMemo(() => {\n    const _navPlugins = navPlugins.length > 0 ? navPlugins : navigationSlot?.toArray();\n    if (!isMinimal) {\n      return (_navPlugins || []).sort(sortFn);\n    }\n    return (_navPlugins || []).filter((widget) => !widget[1].props.hideInMinimalMode).sort(sortFn);\n  }, [navigationSlot, navPlugins, isMinimal]);\n\n  const widgets = useMemo(() => {\n    const _widgetPlugins = widgetPlugins.length > 0 ? widgetPlugins : widgetSlot?.toArray();\n    if (!isMinimal) {\n      return (_widgetPlugins || []).sort(sortFn);\n    }\n    return (_widgetPlugins || []).filter((widget) => !widget[1].props.hideInMinimalMode).sort(sortFn);\n  }, [widgetSlot, widgetPlugins, isMinimal]);\n\n  const links = [...plugins, ...widgets].map(([, menuItem], index) => {\n    // these styles keep plugins to the left and widgets to the right.\n    const lastPluginStyle = plugins.length - 1 === index ? { marginRight: 'auto' } : {};\n\n    const firstWidgetStyle = plugins.length === index ? { marginLeft: 'auto' } : {};\n\n    return {\n      component: TopBarNavComponent,\n      tabProps: {\n        menuItemProps: menuItem.props,\n      },\n      style: { ...firstWidgetStyle, ...lastPluginStyle },\n      className: menuItem.props.className,\n    };\n  });\n\n  return (\n    <>\n      {isMinimal && <MinimalMenuNav links={links} secondaryNavClassName={secondaryNavClassName} />}\n      <ResponsiveNavbar\n        navClassName={classnames(styles.tab, isMinimal && styles.hideMinimalMobileNav, className)}\n        secondaryNavClassName={secondaryNavClassName}\n        style={{ width: '100%', height: '100%' }}\n        priority=\"none\"\n        tabs={links}\n        defaultActiveIndex={activeTabIndex}\n        alwaysShowActiveTab={alwaysShowActiveTab}\n      >\n        {children}\n      </ResponsiveNavbar>\n    </>\n  );\n}\n\nfunction MinimalMenuNav({ links, secondaryNavClassName }: { links: Tab[]; secondaryNavClassName?: string }) {\n  if (links.length === 0) return null;\n\n  return (\n    <div className={styles.minimalMoreNav}>\n      <Dropdown\n        placeholderContent={\n          <div className={styles.minimalMoreButton} aria-label=\"More component sections\">\n            <img src=\"https://static.bit.dev/bit-icons/more-h.svg\" alt=\"\" />\n          </div>\n        }\n        dropClass={secondaryNavClassName}\n        position=\"bottom-end\"\n        placeholderBorder={false}\n        clickToggles\n        margin={8}\n      >\n        {links.map((link, index) => (\n          <MenuItem className={styles.minimalMenuItem} key={`minimal-dropdown-${index}`}>\n            <TopBarNavComponent menuItemProps={link.tabProps?.menuItemProps} isInMenu />\n          </MenuItem>\n        ))}\n      </Dropdown>\n    </div>\n  );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n  return (first ?? 0) - (second ?? 0);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_designNavigation","_designInputs","_designInputsSelectors","_workspaceUi","_topBarNav","_menuModule","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ownKeys","keys","getOwnPropertySymbols","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","_toPropertyKey","value","configurable","writable","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","_extends","assign","bind","TopBarNavComponent","isInMenu","menuItemProps","widgetDisplayText","displayName","undefined","createElement","TopBarNav","className","classnames","styles","topBarNav","noBorder","children","CollapsibleMenuNav","navigationSlot","widgetSlot","navPlugins","widgetPlugins","secondaryNavClassName","activeTabIndex","alwaysShowActiveTab","isMinimal","useWorkspaceMode","plugins","useMemo","_navPlugins","toArray","sort","sortFn","widget","props","hideInMinimalMode","widgets","_widgetPlugins","hasPrimary","some","primaryInMinimalMode","fixedPlugins","index","collapsiblePlugins","plugin","includes","responsiveItems","responsiveActiveIndex","indexOf","links","map","menuItem","lastPluginStyle","marginRight","firstWidgetStyle","marginLeft","component","tabProps","style","Fragment","MinimalMenuNav","navItems","minimalFixedNav","key","ResponsiveNavbar","navClassName","tab","hideMinimalMobileNav","width","height","priority","tabs","defaultActiveIndex","primaryItems","moreItems","minimalMoreNav","Dropdown","placeholderContent","minimalMoreButton","src","alt","dropClass","position","placeholderBorder","clickToggles","margin","MenuItem","minimalMenuItem","minimalMobileChildren","minimalPrimaryTab","order","first","second"],"sources":["menu-nav.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport classnames from 'classnames';\nimport { ResponsiveNavbar } from '@teambit/design.navigation.responsive-navbar';\nimport type { TabProps } from '@teambit/design.navigation.responsive-navbar';\nimport { Dropdown } from '@teambit/design.inputs.dropdown';\nimport { MenuItem } from '@teambit/design.inputs.selectors.menu-item';\nimport { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';\nimport { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport type { NavPlugin, OrderedNavigationSlot } from './nav-plugin';\n\nexport type MenuNavProps = {\n  /**\n   * @deprecated\n   * use @property navPlugins\n   */\n  navigationSlot?: OrderedNavigationSlot;\n  /**\n   * @deprecated\n   * use @property widgetPlugins\n   */\n  widgetSlot?: OrderedNavigationSlot;\n  navPlugins?: [string, NavPlugin][];\n  widgetPlugins?: [string, NavPlugin][];\n  /**\n   * A className to pass to the secondary nav, i.e dropdown\n   */\n  secondaryNavClassName?: string;\n  activeTabIndex?: number;\n  alwaysShowActiveTab?: boolean;\n} & React.HTMLAttributes<HTMLElement>;\n\nfunction TopBarNavComponent({ isInMenu, menuItemProps }: TabProps) {\n  /**\n   * to accommodate for the top level nav which should display the children\n   * in the dropdown secondary menu if there is a displayName set\n   */\n  const widgetDisplayText = menuItemProps?.displayName && isInMenu ? menuItemProps?.displayName : undefined;\n  return (\n    <TopBarNav\n      {...menuItemProps}\n      className={classnames(menuItemProps?.className, styles.topBarNav, isInMenu && styles.noBorder)}\n    >\n      {widgetDisplayText || menuItemProps?.children}\n    </TopBarNav>\n  );\n}\n\nexport function CollapsibleMenuNav({\n  navigationSlot,\n  widgetSlot,\n  navPlugins = [],\n  widgetPlugins = [],\n  className,\n  secondaryNavClassName,\n  activeTabIndex,\n  alwaysShowActiveTab,\n  children,\n}: MenuNavProps) {\n  const { isMinimal } = useWorkspaceMode();\n  const plugins = useMemo(() => {\n    const _navPlugins = navPlugins.length > 0 ? navPlugins : navigationSlot?.toArray();\n    if (!isMinimal) {\n      return (_navPlugins || []).sort(sortFn);\n    }\n    return (_navPlugins || []).filter((widget) => !widget[1].props.hideInMinimalMode).sort(sortFn);\n  }, [navigationSlot, navPlugins, isMinimal]);\n\n  const widgets = useMemo(() => {\n    const _widgetPlugins = widgetPlugins.length > 0 ? widgetPlugins : widgetSlot?.toArray();\n    if (!isMinimal) {\n      return (_widgetPlugins || []).sort(sortFn);\n    }\n    return (_widgetPlugins || []).filter((widget) => !widget[1].props.hideInMinimalMode).sort(sortFn);\n  }, [widgetSlot, widgetPlugins, isMinimal]);\n\n  // in minimal mode, primary tabs (e.g. Preview) render outside the ResponsiveNavbar, which would\n  // otherwise collapse any tab but the first when space runs out. The first tab is kept with them\n  // to preserve its position (the navbar never collapses it either); all other tabs stay collapsible.\n  const hasPrimary = isMinimal && plugins.some(([, { props }]) => props.primaryInMinimalMode);\n  const fixedPlugins = hasPrimary\n    ? plugins.filter(([, { props }], index) => index === 0 || props.primaryInMinimalMode)\n    : [];\n  const collapsiblePlugins = plugins.filter((plugin) => !fixedPlugins.includes(plugin));\n  const responsiveItems = [...collapsiblePlugins, ...widgets];\n\n  // `activeTabIndex` refers to the full list; map it to the responsive list (-1 when a fixed tab is active)\n  const responsiveActiveIndex =\n    activeTabIndex === undefined ? undefined : responsiveItems.indexOf([...plugins, ...widgets][activeTabIndex]);\n\n  const links = responsiveItems.map(([, menuItem], index) => {\n    // these styles keep plugins to the left and widgets to the right.\n    const lastPluginStyle = collapsiblePlugins.length - 1 === index ? { marginRight: 'auto' } : {};\n\n    const firstWidgetStyle = collapsiblePlugins.length === index ? { marginLeft: 'auto' } : {};\n\n    return {\n      component: TopBarNavComponent,\n      tabProps: {\n        menuItemProps: menuItem.props,\n      },\n      style: { ...firstWidgetStyle, ...lastPluginStyle },\n      className: menuItem.props.className,\n    };\n  });\n\n  return (\n    <>\n      {isMinimal && (\n        <MinimalMenuNav navItems={[...plugins, ...widgets]} secondaryNavClassName={secondaryNavClassName} />\n      )}\n      {fixedPlugins.length > 0 && (\n        <div className={styles.minimalFixedNav}>\n          {fixedPlugins.map(([, { props }], index) => (\n            <TopBarNavComponent key={`minimal-fixed-${index}`} menuItemProps={props} isInMenu={false} />\n          ))}\n        </div>\n      )}\n      <ResponsiveNavbar\n        navClassName={classnames(styles.tab, isMinimal && styles.hideMinimalMobileNav, className)}\n        secondaryNavClassName={secondaryNavClassName}\n        style={{ width: '100%', height: '100%' }}\n        priority=\"none\"\n        tabs={links}\n        defaultActiveIndex={responsiveActiveIndex}\n        alwaysShowActiveTab={alwaysShowActiveTab}\n      >\n        {children}\n      </ResponsiveNavbar>\n    </>\n  );\n}\n\nfunction MinimalMenuNav({\n  navItems,\n  secondaryNavClassName,\n}: {\n  navItems: [string, NavPlugin][];\n  secondaryNavClassName?: string;\n}) {\n  if (navItems.length === 0) return null;\n\n  // primary tabs (e.g. Preview) stay pinned on mobile, right after the More menu that holds the\n  // rest (Overview first); they render their compact `minimalMobileChildren` (an icon) when given.\n  const primaryItems = navItems.filter(([, { props }]) => props.primaryInMinimalMode);\n  const moreItems = navItems.filter(([, { props }]) => !props.primaryInMinimalMode);\n\n  return (\n    <div className={styles.minimalMoreNav}>\n      {moreItems.length > 0 && (\n        <Dropdown\n          placeholderContent={\n            <div className={styles.minimalMoreButton} aria-label=\"More component sections\">\n              <img src=\"https://static.bit.dev/bit-icons/more-h.svg\" alt=\"\" />\n            </div>\n          }\n          dropClass={secondaryNavClassName}\n          position=\"bottom-end\"\n          placeholderBorder={false}\n          clickToggles\n          margin={8}\n        >\n          {moreItems.map(([, { props }], index) => (\n            <MenuItem className={styles.minimalMenuItem} key={`minimal-dropdown-${index}`}>\n              <TopBarNavComponent menuItemProps={props} isInMenu />\n            </MenuItem>\n          ))}\n        </Dropdown>\n      )}\n      {primaryItems.map(([, { props }], index) => (\n        <TopBarNavComponent\n          key={`minimal-primary-${index}`}\n          menuItemProps={{\n            ...props,\n            children: props.minimalMobileChildren ?? props.children,\n            className: classnames(props.className, styles.minimalPrimaryTab),\n          }}\n          isInMenu={false}\n        />\n      ))}\n    </div>\n  );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n  return (first ?? 0) - (second ?? 0);\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui/menu/menu.module.scss

@@ -10,6 +10,10 @@
 }
 
 .topBarMinimal {
+  // Size from content (not 100%) so the breadcrumb beside it only shrinks when space is short.
+  flex: 1 1 auto;
+  width: auto;
+
   @media screen and (max-width: $br-md) {
     // The breadcrumb owns the remaining mobile space, while this menu keeps the intrinsic width
     // of its pinned actions and right-side controls.
@@ -80,6 +84,27 @@
   }
 }
 
+// Desktop minimal mode: Overview + Preview sit outside the ResponsiveNavbar so they can never
+// collapse into its overflow menu. Matches the navbar's tab row (8px gap, 14px, no wrapping).
+.minimalFixedNav {
+  display: flex;
+  flex: none;
+  gap: 8px;
+  height: 100%;
+  margin-right: 8px;
+  font-size: var(--bit-p-xs, 14px);
+  white-space: nowrap;
+  color: var(--on-background-color, #2b2b2b);
+
+  @media screen and (max-width: $br-md) {
+    display: none;
+  }
+}
+
+.minimalPrimaryTab {
+  height: 100%;
+}
+
 .hideMinimalMobileNav {
   @media screen and (max-width: $br-md) {
     display: none;

package/dist/ui/menu/nav-plugin.d.ts

@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { SlotRegistry } from '@teambit/harmony';
 import type { LinkProps } from '@teambit/base-react.navigation.link';
 import type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';
@@ -8,6 +9,16 @@ export type NavPluginProps = {
     displayName?: string;
     ignoreQueryParams?: boolean;
     hideInMinimalMode?: boolean;
+    /**
+     * in minimal mode on mobile, keep this tab visible next to the compact "More" menu instead of
+     * collapsing it into the menu.
+     */
+    primaryInMinimalMode?: boolean;
+    /**
+     * compact content (e.g. an icon) to render instead of `children` for a primary tab in minimal
+     * mode on mobile, where the row is shared with the breadcrumb and menu actions.
+     */
+    minimalMobileChildren?: React.ReactNode;
 } & LinkProps;
 export type NavPlugin = {
     props: NavPluginProps;

package/dist/ui/menu/nav-plugin.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["nav-plugin.tsx"],"sourcesContent":["import type { SlotRegistry } from '@teambit/harmony';\nimport type { LinkProps } from '@teambit/base-react.navigation.link';\nimport type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';\nimport type { LaneModel } from '@teambit/lanes.ui.models.lanes-model';\nimport type { ComponentID } from '@teambit/component-id';\nimport type { ComponentModel } from '../component-model';\n\nexport type NavPluginProps = {\n  displayName?: string;\n  ignoreQueryParams?: boolean;\n  hideInMinimalMode?: boolean;\n} & LinkProps;\n\nexport type NavPlugin = {\n  props: NavPluginProps;\n  order?: number;\n};\n\nexport type OrderedNavigationSlot = SlotRegistry<NavPlugin>;\nexport type ConsumePluginOptions = {\n  viewedLane?: LaneModel;\n  hide?: boolean;\n  disableInstall?: boolean;\n};\n\nexport type ConsumePluginProps = {\n  id: ComponentID;\n  packageName: string;\n  latest?: string;\n  // @deprecated - pass id, packageName and latest instead via props\n  componentModel?: ComponentModel;\n  options?: ConsumePluginOptions;\n  authToken?: string;\n};\n\nexport type ConsumePlugin = (props: ConsumePluginProps) => ConsumeMethod | undefined;\n\nexport type ConsumeMethodSlot = SlotRegistry<ConsumePlugin[]>;\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["nav-plugin.tsx"],"sourcesContent":["import type React from 'react';\nimport type { SlotRegistry } from '@teambit/harmony';\nimport type { LinkProps } from '@teambit/base-react.navigation.link';\nimport type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';\nimport type { LaneModel } from '@teambit/lanes.ui.models.lanes-model';\nimport type { ComponentID } from '@teambit/component-id';\nimport type { ComponentModel } from '../component-model';\n\nexport type NavPluginProps = {\n  displayName?: string;\n  ignoreQueryParams?: boolean;\n  hideInMinimalMode?: boolean;\n  /**\n   * in minimal mode on mobile, keep this tab visible next to the compact \"More\" menu instead of\n   * collapsing it into the menu.\n   */\n  primaryInMinimalMode?: boolean;\n  /**\n   * compact content (e.g. an icon) to render instead of `children` for a primary tab in minimal\n   * mode on mobile, where the row is shared with the breadcrumb and menu actions.\n   */\n  minimalMobileChildren?: React.ReactNode;\n} & LinkProps;\n\nexport type NavPlugin = {\n  props: NavPluginProps;\n  order?: number;\n};\n\nexport type OrderedNavigationSlot = SlotRegistry<NavPlugin>;\nexport type ConsumePluginOptions = {\n  viewedLane?: LaneModel;\n  hide?: boolean;\n  disableInstall?: boolean;\n};\n\nexport type ConsumePluginProps = {\n  id: ComponentID;\n  packageName: string;\n  latest?: string;\n  // @deprecated - pass id, packageName and latest instead via props\n  componentModel?: ComponentModel;\n  options?: ConsumePluginOptions;\n  authToken?: string;\n};\n\nexport type ConsumePlugin = (props: ConsumePluginProps) => ConsumeMethod | undefined;\n\nexport type ConsumeMethodSlot = SlotRegistry<ConsumePlugin[]>;\n"],"mappings":"","ignoreList":[]}

package/dist/ui/top-bar-nav/top-bar-nav.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import type { NavPluginProps } from '../menu/nav-plugin';
-export declare function TopBarNav({ href, className, activeClassName, children, displayName, ignoreQueryParams, ...rest }: NavPluginProps): React.JSX.Element;
+export declare function TopBarNav({ href, className, activeClassName, children, displayName, ignoreQueryParams, hideInMinimalMode: _hideInMinimalMode, primaryInMinimalMode: _primaryInMinimalMode, minimalMobileChildren: _minimalMobileChildren, ...rest }: NavPluginProps): React.JSX.Element;

package/dist/ui/top-bar-nav/top-bar-nav.js

@@ -39,7 +39,7 @@ function _topBarNavModule() {
   };
   return data;
 }
-const _excluded = ["href", "className", "activeClassName", "children", "displayName", "ignoreQueryParams"];
+const _excluded = ["href", "className", "activeClassName", "children", "displayName", "ignoreQueryParams", "hideInMinimalMode", "primaryInMinimalMode", "minimalMobileChildren"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -53,7 +53,11 @@ function TopBarNav(_ref) {
       activeClassName,
       children,
       displayName,
-      ignoreQueryParams
+      ignoreQueryParams,
+      // menu layout flags, not link attributes
+      hideInMinimalMode: _hideInMinimalMode,
+      primaryInMinimalMode: _primaryInMinimalMode,
+      minimalMobileChildren: _minimalMobileChildren
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
   const {

package/dist/ui/top-bar-nav/top-bar-nav.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireDefault","require","_classnames","_reactRouterDom","_baseReactNavigation","_topBarNavModule","_excluded","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","_objectWithoutProperties","o","i","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","Link","BaseLink","TopBarNav","_ref","href","className","activeClassName","children","displayName","ignoreQueryParams","rest","search","useLocation","preventPassingDisplayNameToLink","target","createElement","classnames","styles","topBarLink","active"],"sources":["top-bar-nav.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { useLocation } from 'react-router-dom';\nimport { Link as BaseLink } from '@teambit/base-react.navigation.link';\nimport type { NavPluginProps } from '../menu/nav-plugin';\n\nimport styles from './top-bar-nav.module.scss';\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 function TopBarNav({\n  href,\n  className,\n  activeClassName,\n  children,\n  displayName,\n  ignoreQueryParams,\n  ...rest\n}: NavPluginProps) {\n  const { search } = useLocation(); // sticky query params\n\n  // @hack - this is so that the displayName will not pass to the link and cause a warning in the console.\n  // it is used for component page nav link widgets (code, aspects etc),\n  // but not for regular menu links (overview, compositions, etc).\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const preventPassingDisplayNameToLink = displayName;\n\n  const target = (href && !ignoreQueryParams && `${href}${search}`) || href;\n\n  return (\n    <Link\n      {...rest}\n      className={classnames(className, styles.topBarLink)}\n      activeClassName={classnames(activeClassName, styles.active)}\n      href={target}\n    >\n      <div>{children}</div>\n    </Link>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","data","_interopRequireDefault","require","_classnames","_reactRouterDom","_baseReactNavigation","_topBarNavModule","_excluded","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","_objectWithoutProperties","o","i","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","Link","BaseLink","TopBarNav","_ref","href","className","activeClassName","children","displayName","ignoreQueryParams","hideInMinimalMode","_hideInMinimalMode","primaryInMinimalMode","_primaryInMinimalMode","minimalMobileChildren","_minimalMobileChildren","rest","search","useLocation","preventPassingDisplayNameToLink","target","createElement","classnames","styles","topBarLink","active"],"sources":["top-bar-nav.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { useLocation } from 'react-router-dom';\nimport { Link as BaseLink } from '@teambit/base-react.navigation.link';\nimport type { NavPluginProps } from '../menu/nav-plugin';\n\nimport styles from './top-bar-nav.module.scss';\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 function TopBarNav({\n  href,\n  className,\n  activeClassName,\n  children,\n  displayName,\n  ignoreQueryParams,\n  // menu layout flags, not link attributes\n  hideInMinimalMode: _hideInMinimalMode,\n  primaryInMinimalMode: _primaryInMinimalMode,\n  minimalMobileChildren: _minimalMobileChildren,\n  ...rest\n}: NavPluginProps) {\n  const { search } = useLocation(); // sticky query params\n\n  // @hack - this is so that the displayName will not pass to the link and cause a warning in the console.\n  // it is used for component page nav link widgets (code, aspects etc),\n  // but not for regular menu links (overview, compositions, etc).\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const preventPassingDisplayNameToLink = displayName;\n\n  const target = (href && !ignoreQueryParams && `${href}${search}`) || href;\n\n  return (\n    <Link\n      {...rest}\n      className={classnames(className, styles.topBarLink)}\n      activeClassName={classnames(activeClassName, styles.active)}\n      href={target}\n    >\n      <div>{children}</div>\n    </Link>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "1.0.1217",
+  "version": "1.0.1219",
   "homepage": "https://bit.cloud/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "1.0.1217"
+    "version": "1.0.1219"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -86,8 +86,8 @@
     "@teambit/lanes.hooks.use-lanes": "0.0.300",
     "@teambit/lanes.ui.models.lanes-model": "0.0.239",
     "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.151",
-    "@teambit/aspect-loader": "1.0.1217",
-    "@teambit/dependency-resolver": "1.0.1217"
+    "@teambit/aspect-loader": "1.0.1219",
+    "@teambit/dependency-resolver": "1.0.1219"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",

package/ui/menu/menu-nav.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import classnames from 'classnames';
 import { ResponsiveNavbar } from '@teambit/design.navigation.responsive-navbar';
-import type { Tab, TabProps } from '@teambit/design.navigation.responsive-navbar';
+import type { TabProps } from '@teambit/design.navigation.responsive-navbar';
 import { Dropdown } from '@teambit/design.inputs.dropdown';
 import { MenuItem } from '@teambit/design.inputs.selectors.menu-item';
 import { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';
@@ -74,11 +74,25 @@ export function CollapsibleMenuNav({
     return (_widgetPlugins || []).filter((widget) => !widget[1].props.hideInMinimalMode).sort(sortFn);
   }, [widgetSlot, widgetPlugins, isMinimal]);
 
-  const links = [...plugins, ...widgets].map(([, menuItem], index) => {
+  // in minimal mode, primary tabs (e.g. Preview) render outside the ResponsiveNavbar, which would
+  // otherwise collapse any tab but the first when space runs out. The first tab is kept with them
+  // to preserve its position (the navbar never collapses it either); all other tabs stay collapsible.
+  const hasPrimary = isMinimal && plugins.some(([, { props }]) => props.primaryInMinimalMode);
+  const fixedPlugins = hasPrimary
+    ? plugins.filter(([, { props }], index) => index === 0 || props.primaryInMinimalMode)
+    : [];
+  const collapsiblePlugins = plugins.filter((plugin) => !fixedPlugins.includes(plugin));
+  const responsiveItems = [...collapsiblePlugins, ...widgets];
+
+  // `activeTabIndex` refers to the full list; map it to the responsive list (-1 when a fixed tab is active)
+  const responsiveActiveIndex =
+    activeTabIndex === undefined ? undefined : responsiveItems.indexOf([...plugins, ...widgets][activeTabIndex]);
+
+  const links = responsiveItems.map(([, menuItem], index) => {
     // these styles keep plugins to the left and widgets to the right.
-    const lastPluginStyle = plugins.length - 1 === index ? { marginRight: 'auto' } : {};
+    const lastPluginStyle = collapsiblePlugins.length - 1 === index ? { marginRight: 'auto' } : {};
 
-    const firstWidgetStyle = plugins.length === index ? { marginLeft: 'auto' } : {};
+    const firstWidgetStyle = collapsiblePlugins.length === index ? { marginLeft: 'auto' } : {};
 
     return {
       component: TopBarNavComponent,
@@ -92,14 +106,23 @@ export function CollapsibleMenuNav({
 
   return (
     <>
-      {isMinimal && <MinimalMenuNav links={links} secondaryNavClassName={secondaryNavClassName} />}
+      {isMinimal && (
+        <MinimalMenuNav navItems={[...plugins, ...widgets]} secondaryNavClassName={secondaryNavClassName} />
+      )}
+      {fixedPlugins.length > 0 && (
+        <div className={styles.minimalFixedNav}>
+          {fixedPlugins.map(([, { props }], index) => (
+            <TopBarNavComponent key={`minimal-fixed-${index}`} menuItemProps={props} isInMenu={false} />
+          ))}
+        </div>
+      )}
       <ResponsiveNavbar
         navClassName={classnames(styles.tab, isMinimal && styles.hideMinimalMobileNav, className)}
         secondaryNavClassName={secondaryNavClassName}
         style={{ width: '100%', height: '100%' }}
         priority="none"
         tabs={links}
-        defaultActiveIndex={activeTabIndex}
+        defaultActiveIndex={responsiveActiveIndex}
         alwaysShowActiveTab={alwaysShowActiveTab}
       >
         {children}
@@ -108,29 +131,53 @@ export function CollapsibleMenuNav({
   );
 }
 
-function MinimalMenuNav({ links, secondaryNavClassName }: { links: Tab[]; secondaryNavClassName?: string }) {
-  if (links.length === 0) return null;
+function MinimalMenuNav({
+  navItems,
+  secondaryNavClassName,
+}: {
+  navItems: [string, NavPlugin][];
+  secondaryNavClassName?: string;
+}) {
+  if (navItems.length === 0) return null;
+
+  // primary tabs (e.g. Preview) stay pinned on mobile, right after the More menu that holds the
+  // rest (Overview first); they render their compact `minimalMobileChildren` (an icon) when given.
+  const primaryItems = navItems.filter(([, { props }]) => props.primaryInMinimalMode);
+  const moreItems = navItems.filter(([, { props }]) => !props.primaryInMinimalMode);
 
   return (
     <div className={styles.minimalMoreNav}>
-      <Dropdown
-        placeholderContent={
-          <div className={styles.minimalMoreButton} aria-label="More component sections">
-            <img src="https://static.bit.dev/bit-icons/more-h.svg" alt="" />
-          </div>
-        }
-        dropClass={secondaryNavClassName}
-        position="bottom-end"
-        placeholderBorder={false}
-        clickToggles
-        margin={8}
-      >
-        {links.map((link, index) => (
-          <MenuItem className={styles.minimalMenuItem} key={`minimal-dropdown-${index}`}>
-            <TopBarNavComponent menuItemProps={link.tabProps?.menuItemProps} isInMenu />
-          </MenuItem>
-        ))}
-      </Dropdown>
+      {moreItems.length > 0 && (
+        <Dropdown
+          placeholderContent={
+            <div className={styles.minimalMoreButton} aria-label="More component sections">
+              <img src="https://static.bit.dev/bit-icons/more-h.svg" alt="" />
+            </div>
+          }
+          dropClass={secondaryNavClassName}
+          position="bottom-end"
+          placeholderBorder={false}
+          clickToggles
+          margin={8}
+        >
+          {moreItems.map(([, { props }], index) => (
+            <MenuItem className={styles.minimalMenuItem} key={`minimal-dropdown-${index}`}>
+              <TopBarNavComponent menuItemProps={props} isInMenu />
+            </MenuItem>
+          ))}
+        </Dropdown>
+      )}
+      {primaryItems.map(([, { props }], index) => (
+        <TopBarNavComponent
+          key={`minimal-primary-${index}`}
+          menuItemProps={{
+            ...props,
+            children: props.minimalMobileChildren ?? props.children,
+            className: classnames(props.className, styles.minimalPrimaryTab),
+          }}
+          isInMenu={false}
+        />
+      ))}
     </div>
   );
 }

package/ui/menu/menu.module.scss

@@ -10,6 +10,10 @@
 }
 
 .topBarMinimal {
+  // Size from content (not 100%) so the breadcrumb beside it only shrinks when space is short.
+  flex: 1 1 auto;
+  width: auto;
+
   @media screen and (max-width: $br-md) {
     // The breadcrumb owns the remaining mobile space, while this menu keeps the intrinsic width
     // of its pinned actions and right-side controls.
@@ -80,6 +84,27 @@
   }
 }
 
+// Desktop minimal mode: Overview + Preview sit outside the ResponsiveNavbar so they can never
+// collapse into its overflow menu. Matches the navbar's tab row (8px gap, 14px, no wrapping).
+.minimalFixedNav {
+  display: flex;
+  flex: none;
+  gap: 8px;
+  height: 100%;
+  margin-right: 8px;
+  font-size: var(--bit-p-xs, 14px);
+  white-space: nowrap;
+  color: var(--on-background-color, #2b2b2b);
+
+  @media screen and (max-width: $br-md) {
+    display: none;
+  }
+}
+
+.minimalPrimaryTab {
+  height: 100%;
+}
+
 .hideMinimalMobileNav {
   @media screen and (max-width: $br-md) {
     display: none;

package/ui/menu/nav-plugin.tsx

@@ -1,3 +1,4 @@
+import type React from 'react';
 import type { SlotRegistry } from '@teambit/harmony';
 import type { LinkProps } from '@teambit/base-react.navigation.link';
 import type { ConsumeMethod } from '@teambit/ui-foundation.ui.use-box.menu';
@@ -9,6 +10,16 @@ export type NavPluginProps = {
   displayName?: string;
   ignoreQueryParams?: boolean;
   hideInMinimalMode?: boolean;
+  /**
+   * in minimal mode on mobile, keep this tab visible next to the compact "More" menu instead of
+   * collapsing it into the menu.
+   */
+  primaryInMinimalMode?: boolean;
+  /**
+   * compact content (e.g. an icon) to render instead of `children` for a primary tab in minimal
+   * mode on mobile, where the row is shared with the breadcrumb and menu actions.
+   */
+  minimalMobileChildren?: React.ReactNode;
 } & LinkProps;
 
 export type NavPlugin = {

package/ui/top-bar-nav/top-bar-nav.tsx

@@ -16,6 +16,10 @@ export function TopBarNav({
   children,
   displayName,
   ignoreQueryParams,
+  // menu layout flags, not link attributes
+  hideInMinimalMode: _hideInMinimalMode,
+  primaryInMinimalMode: _primaryInMinimalMode,
+  minimalMobileChildren: _minimalMobileChildren,
   ...rest
 }: NavPluginProps) {
   const { search } = useLocation(); // sticky query params