@teambit/component 1.0.44 → 1.0.46

package/dist/{preview-1699377714268.js → preview-1699443637127.js}

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

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

@@ -17,5 +17,7 @@ export declare type MenuNavProps = {
      * A className to pass to the secondary nav, i.e dropdown
      */
     secondaryNavClassName?: string;
+    activeTabIndex?: number;
+    alwaysShowActiveTab?: boolean;
 } & React.HTMLAttributes<HTMLElement>;
-export declare function CollapsibleMenuNav({ navigationSlot, widgetSlot, navPlugins, widgetPlugins, className, secondaryNavClassName, children, }: MenuNavProps): React.JSX.Element;
+export declare function CollapsibleMenuNav({ navigationSlot, widgetSlot, navPlugins, widgetPlugins, className, secondaryNavClassName, activeTabIndex, alwaysShowActiveTab, children, }: MenuNavProps): React.JSX.Element;

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

@@ -48,6 +48,19 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function TopBarNavComponent({
+  isInMenu,
+  menuItemProps
+}) {
+  /**
+   * to accommodate for the top level nav which should display the children
+   * in the dropdown secondary menu if there is a displayName set
+   */
+  const widgetDisplayText = menuItemProps !== null && menuItemProps !== void 0 && menuItemProps.displayName && isInMenu ? menuItemProps === null || menuItemProps === void 0 ? void 0 : menuItemProps.displayName : undefined;
+  return /*#__PURE__*/_react().default.createElement(_topBarNav().TopBarNav, _extends({}, menuItemProps, {
+    className: (0, _classnames().default)(menuItemProps === null || menuItemProps === void 0 ? void 0 : menuItemProps.className, _menuModule().default.topBarNav, isInMenu && _menuModule().default.noBorder)
+  }), widgetDisplayText || (menuItemProps === null || menuItemProps === void 0 ? void 0 : menuItemProps.children));
+}
 function CollapsibleMenuNav({
   navigationSlot,
   widgetSlot,
@@ -55,6 +68,8 @@ function CollapsibleMenuNav({
   widgetPlugins = [],
   className,
   secondaryNavClassName,
+  activeTabIndex,
+  alwaysShowActiveTab,
   children
 }) {
   const plugins = (0, _react().useMemo)(() => {
@@ -65,7 +80,7 @@ function CollapsibleMenuNav({
     const _widgetPlugins = widgetPlugins.length > 0 ? widgetPlugins : widgetSlot === null || widgetSlot === void 0 ? void 0 : widgetSlot.toArray();
     return (_widgetPlugins || []).sort(sortFn);
   }, [widgetSlot, widgetPlugins]);
-  const links = [...plugins, ...widgets].map(([id, menuItem], index) => {
+  const links = [...plugins, ...widgets].map(([, menuItem], index) => {
     // these styles keep plugins to the left and widgets to the right.
     const lastPluginStyle = plugins.length - 1 === index ? {
       marginRight: 'auto'
@@ -74,18 +89,9 @@ function CollapsibleMenuNav({
       marginLeft: 'auto'
     } : {};
     return {
-      component: function TopBarNavComponent({
-        isInMenu
-      }) {
-        /**
-         * to accommodate for the top level nav which should display the children
-         * in the dropdown secondary menu if there is a displayName set
-         */
-        const widgetDisplayText = menuItem.props.displayName && isInMenu ? menuItem.props.displayName : undefined;
-        return /*#__PURE__*/_react().default.createElement(_topBarNav().TopBarNav, _extends({}, menuItem.props, {
-          className: (0, _classnames().default)(menuItem.props.className, _menuModule().default.topBarNav, isInMenu && _menuModule().default.noBorder),
-          key: id
-        }), widgetDisplayText || menuItem.props.children);
+      component: TopBarNavComponent,
+      tabProps: {
+        menuItemProps: menuItem.props
       },
       style: _objectSpread(_objectSpread({}, firstWidgetStyle), lastPluginStyle),
       className: menuItem.props.className
@@ -99,7 +105,9 @@ function CollapsibleMenuNav({
       height: '100%'
     },
     priority: "none",
-    tabs: links
+    tabs: links,
+    defaultActiveIndex: activeTabIndex,
+    alwaysShowActiveTab: alwaysShowActiveTab
   }, children);
 }
 function sortFn([, {

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

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_designNavigation","_topBarNav","_menuModule","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","key","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_extends","assign","bind","target","source","CollapsibleMenuNav","navigationSlot","widgetSlot","navPlugins","widgetPlugins","className","secondaryNavClassName","children","plugins","useMemo","_navPlugins","toArray","sort","sortFn","widgets","_widgetPlugins","links","map","id","menuItem","index","lastPluginStyle","marginRight","firstWidgetStyle","marginLeft","component","TopBarNavComponent","isInMenu","widgetDisplayText","props","displayName","createElement","TopBarNav","classnames","styles","topBarNav","noBorder","style","ResponsiveNavbar","navClassName","tab","width","height","priority","tabs","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 { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport { 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} & React.HTMLAttributes<HTMLElement>;\n\nexport function CollapsibleMenuNav({\n  navigationSlot,\n  widgetSlot,\n  navPlugins = [],\n  widgetPlugins = [],\n  className,\n  secondaryNavClassName,\n  children,\n}: MenuNavProps) {\n  const plugins = useMemo(() => {\n    const _navPlugins = navPlugins.length > 0 ? navPlugins : navigationSlot?.toArray();\n    return (_navPlugins || []).sort(sortFn);\n  }, [navigationSlot, navPlugins]);\n  const widgets = useMemo(() => {\n    const _widgetPlugins = widgetPlugins.length > 0 ? widgetPlugins : widgetSlot?.toArray();\n    return (_widgetPlugins || []).sort(sortFn);\n  }, [widgetSlot, widgetPlugins]);\n\n  const links = [...plugins, ...widgets].map(([id, 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: function TopBarNavComponent({ isInMenu }: 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 = menuItem.props.displayName && isInMenu ? menuItem.props.displayName : undefined;\n        return (\n          <TopBarNav\n            {...menuItem.props}\n            className={classnames(menuItem.props.className, styles.topBarNav, isInMenu && styles.noBorder)}\n            key={id}\n          >\n            {widgetDisplayText || menuItem.props.children}\n          </TopBarNav>\n        );\n      },\n      style: { ...firstWidgetStyle, ...lastPluginStyle },\n      className: menuItem.props.className,\n    };\n  });\n\n  return (\n    <ResponsiveNavbar\n      navClassName={classnames(styles.tab, className)}\n      secondaryNavClassName={secondaryNavClassName}\n      style={{ width: '100%', height: '100%' }}\n      priority=\"none\"\n      tabs={links}\n    >\n      {children}\n    </ResponsiveNavbar>\n  );\n}\n\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n  // 0  - equal\n  // <0 - first < second\n  // >0 - first > second\n\n  return (first ?? 0) - (second ?? 0);\n}\n\n// // this is the aspect-oriented and serialize-able way to sort plugins.\n// const pluginOrder = ['teambit.docs/docs', 'teambit.compositions/compositions', 'teambit.docs/docs'];\n// export function toSortedArray<T>(slot: SlotRegistry<T>, order: string[]) {\n//   // sort items according to the order\n//   const sorted = order.map((x) => [x, slot.get(x)]).filter(([, val]) => !!val) as [string, T][];\n//\n//   // add all other items\n//   const unsorted = slot.toArray().filter(([id]) => order.indexOf(id) < 0);\n//\n//   return sorted.concat(unsorted);\n// }\n"],"mappings":"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"}
+{"version":3,"names":["_react","data","_interopRequireWildcard","require","_classnames","_interopRequireDefault","_designNavigation","_topBarNav","_menuModule","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","key","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","_extends","assign","bind","target","source","TopBarNavComponent","isInMenu","menuItemProps","widgetDisplayText","displayName","createElement","TopBarNav","className","classnames","styles","topBarNav","noBorder","children","CollapsibleMenuNav","navigationSlot","widgetSlot","navPlugins","widgetPlugins","secondaryNavClassName","activeTabIndex","alwaysShowActiveTab","plugins","useMemo","_navPlugins","toArray","sort","sortFn","widgets","_widgetPlugins","links","map","menuItem","index","lastPluginStyle","marginRight","firstWidgetStyle","marginLeft","component","tabProps","props","style","ResponsiveNavbar","navClassName","tab","width","height","priority","tabs","defaultActiveIndex","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 { TopBarNav } from '../top-bar-nav';\nimport styles from './menu.module.scss';\nimport { 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 plugins = useMemo(() => {\n    const _navPlugins = navPlugins.length > 0 ? navPlugins : navigationSlot?.toArray();\n    return (_navPlugins || []).sort(sortFn);\n  }, [navigationSlot, navPlugins]);\n  const widgets = useMemo(() => {\n    const _widgetPlugins = widgetPlugins.length > 0 ? widgetPlugins : widgetSlot?.toArray();\n    return (_widgetPlugins || []).sort(sortFn);\n  }, [widgetSlot, widgetPlugins]);\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    <ResponsiveNavbar\n      navClassName={classnames(styles.tab, 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\nfunction sortFn([, { order: first }]: [string, NavPlugin], [, { order: second }]: [string, NavPlugin]) {\n  // 0  - equal\n  // <0 - first < second\n  // >0 - first > second\n\n  return (first ?? 0) - (second ?? 0);\n}\n\n// // this is the aspect-oriented and serialize-able way to sort plugins.\n// const pluginOrder = ['teambit.docs/docs', 'teambit.compositions/compositions', 'teambit.docs/docs'];\n// export function toSortedArray<T>(slot: SlotRegistry<T>, order: string[]) {\n//   // sort items according to the order\n//   const sorted = order.map((x) => [x, slot.get(x)]).filter(([, val]) => !!val) as [string, T][];\n//\n//   // add all other items\n//   const unsorted = slot.toArray().filter(([id]) => order.indexOf(id) < 0);\n//\n//   return sorted.concat(unsorted);\n// }\n"],"mappings":"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"}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/component",
-  "version": "1.0.44",
+  "version": "1.0.46",
   "homepage": "https://bit.cloud/teambit/component/component",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.component",
     "name": "component",
-    "version": "1.0.44"
+    "version": "1.0.46"
   },
   "dependencies": {
     "@teambit/any-fs": "0.0.5",
@@ -38,37 +38,37 @@
     "@teambit/design.ui.empty-box": "0.0.363",
     "@teambit/documenter.ui.heading": "4.1.1",
     "@teambit/documenter.ui.separator": "4.1.1",
-    "@teambit/design.ui.styles.ellipsis": "0.0.357",
-    "@teambit/explorer.ui.command-bar": "2.0.14",
     "@teambit/design.ui.pages.not-found": "0.0.366",
     "@teambit/design.ui.pages.server-error": "0.0.366",
-    "@teambit/design.navigation.responsive-navbar": "0.0.5",
+    "@teambit/design.ui.styles.ellipsis": "0.0.357",
+    "@teambit/explorer.ui.command-bar": "2.0.14",
+    "@teambit/design.navigation.responsive-navbar": "0.0.7",
     "@teambit/base-ui.layout.breakpoints": "1.0.0",
     "@teambit/component.ui.version-dropdown": "0.0.852",
     "@teambit/lanes.hooks.use-lanes": "0.0.254",
     "@teambit/lanes.ui.models.lanes-model": "0.0.207",
     "@teambit/ui-foundation.ui.use-box.dropdown": "0.0.141",
-    "@teambit/aspect-loader": "1.0.44",
-    "@teambit/graph": "1.0.44",
-    "@teambit/toolbox.path.match-patterns": "0.0.12",
-    "@teambit/toolbox.string.capitalize": "0.0.493",
-    "@teambit/cli": "0.0.809",
-    "@teambit/express": "0.0.908",
-    "@teambit/graphql": "1.0.44",
-    "@teambit/command-bar": "1.0.44",
-    "@teambit/component-package-version": "0.0.429",
-    "@teambit/preview": "1.0.44",
-    "@teambit/pubsub": "1.0.44",
-    "@teambit/react-router": "1.0.44",
-    "@teambit/ui": "1.0.44",
-    "@teambit/component-issues": "0.0.105",
-    "@teambit/cli-table": "0.0.44",
-    "@teambit/component-descriptor": "0.0.377",
+    "@teambit/aspect-loader": "1.0.46",
+    "@teambit/graph": "1.0.46",
+    "@teambit/toolbox.path.match-patterns": "0.0.13",
+    "@teambit/toolbox.string.capitalize": "0.0.494",
+    "@teambit/cli": "0.0.810",
+    "@teambit/express": "0.0.909",
+    "@teambit/graphql": "1.0.46",
+    "@teambit/command-bar": "1.0.46",
+    "@teambit/component-package-version": "0.0.430",
+    "@teambit/preview": "1.0.46",
+    "@teambit/pubsub": "1.0.46",
+    "@teambit/react-router": "1.0.46",
+    "@teambit/ui": "1.0.46",
+    "@teambit/component-issues": "0.0.106",
+    "@teambit/cli-table": "0.0.45",
+    "@teambit/component-descriptor": "0.0.378",
     "@teambit/harmony.ui.aspect-box": "0.0.505",
-    "@teambit/envs.ui.env-icon": "0.0.503",
-    "@teambit/compositions": "1.0.44",
-    "@teambit/deprecation": "1.0.44",
-    "@teambit/envs": "1.0.44"
+    "@teambit/compositions": "1.0.46",
+    "@teambit/deprecation": "1.0.46",
+    "@teambit/envs": "1.0.46",
+    "@teambit/envs.ui.env-icon": "0.0.503"
   },
   "devDependencies": {
     "@types/react": "^17.0.8",
@@ -87,7 +87,7 @@
   "peerDependencies": {
     "@apollo/client": "^3.6.0",
     "react-router-dom": "^6.0.0",
-    "@teambit/legacy": "1.0.591",
+    "@teambit/legacy": "1.0.593",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },

package/ui/menu/menu-nav.tsx

@@ -23,8 +23,26 @@ export type MenuNavProps = {
    * A className to pass to the secondary nav, i.e dropdown
    */
   secondaryNavClassName?: string;
+  activeTabIndex?: number;
+  alwaysShowActiveTab?: boolean;
 } & React.HTMLAttributes<HTMLElement>;
 
+function TopBarNavComponent({ isInMenu, menuItemProps }: TabProps) {
+  /**
+   * to accommodate for the top level nav which should display the children
+   * in the dropdown secondary menu if there is a displayName set
+   */
+  const widgetDisplayText = menuItemProps?.displayName && isInMenu ? menuItemProps?.displayName : undefined;
+  return (
+    <TopBarNav
+      {...menuItemProps}
+      className={classnames(menuItemProps?.className, styles.topBarNav, isInMenu && styles.noBorder)}
+    >
+      {widgetDisplayText || menuItemProps?.children}
+    </TopBarNav>
+  );
+}
+
 export function CollapsibleMenuNav({
   navigationSlot,
   widgetSlot,
@@ -32,6 +50,8 @@ export function CollapsibleMenuNav({
   widgetPlugins = [],
   className,
   secondaryNavClassName,
+  activeTabIndex,
+  alwaysShowActiveTab,
   children,
 }: MenuNavProps) {
   const plugins = useMemo(() => {
@@ -43,28 +63,16 @@ export function CollapsibleMenuNav({
     return (_widgetPlugins || []).sort(sortFn);
   }, [widgetSlot, widgetPlugins]);
 
-  const links = [...plugins, ...widgets].map(([id, menuItem], index) => {
+  const links = [...plugins, ...widgets].map(([, menuItem], index) => {
     // these styles keep plugins to the left and widgets to the right.
     const lastPluginStyle = plugins.length - 1 === index ? { marginRight: 'auto' } : {};
 
     const firstWidgetStyle = plugins.length === index ? { marginLeft: 'auto' } : {};
 
     return {
-      component: function TopBarNavComponent({ isInMenu }: TabProps) {
-        /**
-         * to accommodate for the top level nav which should display the children
-         * in the dropdown secondary menu if there is a displayName set
-         */
-        const widgetDisplayText = menuItem.props.displayName && isInMenu ? menuItem.props.displayName : undefined;
-        return (
-          <TopBarNav
-            {...menuItem.props}
-            className={classnames(menuItem.props.className, styles.topBarNav, isInMenu && styles.noBorder)}
-            key={id}
-          >
-            {widgetDisplayText || menuItem.props.children}
-          </TopBarNav>
-        );
+      component: TopBarNavComponent,
+      tabProps: {
+        menuItemProps: menuItem.props,
       },
       style: { ...firstWidgetStyle, ...lastPluginStyle },
       className: menuItem.props.className,
@@ -78,6 +86,8 @@ export function CollapsibleMenuNav({
       style={{ width: '100%', height: '100%' }}
       priority="none"
       tabs={links}
+      defaultActiveIndex={activeTabIndex}
+      alwaysShowActiveTab={alwaysShowActiveTab}
     >
       {children}
     </ResponsiveNavbar>