Update titles for addons, controls, and panel tabs to support JSX.Ele…

…ments

code/addons/actions/src/manager.tsx

@@ -1,27 +1,40 @@
-import React, { useState, useEffect } from 'react';
-import { addons, types } from '@storybook/manager-api';
+import React, { useState } from 'react';
+import { addons, types, useChannel } from '@storybook/manager-api';
 import { STORY_CHANGED } from '@storybook/core-events';
 import ActionLogger from './containers/ActionLogger';
 import { ADDON_ID, EVENT_ID, PANEL_ID, PARAM_KEY } from './constants';
 
-addons.register(ADDON_ID, (api) => {
-  addons.addPanel(PANEL_ID, {
-    title() {
-      const [actionsCount, setActionsCount] = useState(0);
-      const onEvent = () => setActionsCount((previous) => previous + 1);
-      const onChange = () => setActionsCount(0);
+function Title({ count }: { count: { current: number } }) {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  const [_, setRerender] = useState(false);
 
-      useEffect(() => {
-        api.on(EVENT_ID, onEvent);
-        api.on(STORY_CHANGED, onChange);
-        return () => {
-          api.off(EVENT_ID, onEvent);
-          api.off(STORY_CHANGED, onChange);
-        };
-      });
-      const suffix = actionsCount === 0 ? '' : ` (${actionsCount})`;
-      return `Actions${suffix}`;
+  // Reactivity hack - force re-render on STORY_CHANGED and EVENT_ID events
+  useChannel({
+    [EVENT_ID]: () => {
+      setRerender((r) => !r);
     },
+    [STORY_CHANGED]: () => {
+      setRerender((r) => !r);
+    },
+  });
+
+  const suffix = count.current === 0 ? '' : ` (${count.current})`;
+  return <>Actions{suffix}</>;
+}
+
+addons.register(ADDON_ID, (api) => {
+  const countRef = { current: 0 };
+
+  api.on(STORY_CHANGED, (id) => {
+    countRef.current = 0;
+  });
+
+  api.on(EVENT_ID, () => {
+    countRef.current += 1;
+  });
+
+  addons.addPanel(PANEL_ID, {
+    title: <Title count={countRef} />,
     type: types.PANEL,
     render: ({ active, key }) => <ActionLogger key={key} api={api} active={!!active} />,
     paramKey: PARAM_KEY,

code/addons/controls/src/manager.tsx

@@ -4,16 +4,19 @@ import { AddonPanel } from '@storybook/components';
 import { ControlsPanel } from './ControlsPanel';
 import { ADDON_ID, PARAM_KEY } from './constants';
 
+function Title() {
+  const rows = useArgTypes();
+  const controlsCount = Object.values(rows).filter(
+    (argType) => argType?.control && !argType?.table?.disable
+  ).length;
+  const suffix = controlsCount === 0 ? '' : ` (${controlsCount})`;
+
+  return <>Controls{suffix}</>;
+}
+
 addons.register(ADDON_ID, (api: API) => {
   addons.addPanel(ADDON_ID, {
-    title() {
-      const rows = useArgTypes();
-      const controlsCount = Object.values(rows).filter(
-        (argType) => argType?.control && !argType?.table?.disable
-      ).length;
-      const suffix = controlsCount === 0 ? '' : ` (${controlsCount})`;
-      return `Controls${suffix}`;
-    },
+    title: <Title />,
     type: types.PANEL,
     paramKey: PARAM_KEY,
     render: ({ key, active }) => {

code/lib/types/src/modules/addons.ts

@@ -295,8 +295,14 @@ export interface Addon_RenderOptions {
   key?: string;
 }
 
+export type ReactJSXElement = {
+  type: any;
+  props: any;
+  key: any;
+};
+
 export interface Addon_Type {
-  title: (() => string) | string;
+  title: (() => string) | string | ReactJSXElement;
   type?: Addon_Types;
   id?: string;
   route?: (routeOptions: RouterData) => string;

code/lib/types/src/modules/api.ts

@@ -7,7 +7,7 @@ import type { ViewMode } from './csf';
 import type { DocsOptions } from './core-common';
 import type { API_HashEntry, API_IndexHash } from './api-stories';
 import type { SetStoriesStory, SetStoriesStoryData } from './channelApi';
-import type { Addon_Types } from './addons';
+import type { Addon_Type } from './addons';
 import type { StoryIndex } from './storyIndex';
 
 export type API_ViewMode = 'story' | 'info' | 'settings' | 'page' | undefined | string;
@@ -30,17 +30,8 @@ export interface API_MatchOptions {
   path: string;
 }
 
-export interface API_Addon {
-  title: string;
-  type?: Addon_Types;
-  id?: string;
-  route?: (routeOptions: API_RouteOptions) => string;
-  match?: (matchOptions: API_MatchOptions) => boolean;
-  render: (renderOptions: API_RenderOptions) => any;
-  paramKey?: string;
-  disabled?: boolean;
-  hidden?: boolean;
-}
+export type API_Addon = Addon_Type;
+
 export interface API_Collection<T = API_Addon> {
   [key: string]: T;
 }

code/ui/components/src/tabs/tabs.hooks.tsx

@@ -98,10 +98,11 @@ export function useList(list: ChildrenList) {
               />
             </AddonButton>
           </WithTooltip>
-          {invisibleList.map(({ title, id, color }) => {
+          {invisibleList.map(({ title, id, color }, index) => {
+            const indexId = `index-${index}`;
             return (
               <TabButton
-                id={`tabbutton-${sanitize(title)}`}
+                id={`tabbutton-${sanitize(id) ?? indexId}`}
                 style={{ visibility: 'hidden' }}
                 aria-hidden
                 tabIndex={-1}

code/ui/components/src/tabs/tabs.tsx

@@ -146,10 +146,12 @@ export const Tabs: FC<TabsProps> = memo(
       <Wrapper absolute={absolute} bordered={bordered} id={htmlId}>
         <FlexBar scrollable={false} border backgroundColor={backgroundColor}>
           <TabBar style={{ whiteSpace: 'normal' }} ref={tabBarRef} role="tablist">
-            {visibleList.map(({ title, id, active, color }) => {
+            {visibleList.map(({ title, id, active, color }, index) => {
+              const indexId = `index-${index}`;
+
               return (
                 <TabButton
-                  id={`tabbutton-${sanitize(title)}`}
+                  id={`tabbutton-${sanitize(id) ?? indexId}`}
                   ref={(ref: HTMLButtonElement) => {
                     tabRefs.current.set(id, ref);
                   }}