Repository: storybookjs/storybook
File: code/core/src/manager/components/sidebar/ContextMenu.tsx (TypeScript)

Code before:
        <svg key="icon" viewBox="0 0 14 14" width="14" height="14">
          <UseSymbol type="warning" />
        </svg>
      );
    }
    if (itemStatus === 'status-value:success') {
      return (
        <svg key="icon" viewBox="0 0 14 14" width="14" height="14">
          <UseSymbol type="success" />
        </svg>
      );
    }
    return <EllipsisIcon />;
  }, [itemStatus, context.type]);

  return useMemo(() => {
    // Never show the SidebarContextMenu in production
    if (globalThis.CONFIG_TYPE !== 'DEVELOPMENT') {
      return empty;
    }

    return {
      onMouseEnter: handlers.onMouseEnter,
      node: shouldRender ? (
        <PopoverProvider
          ariaLabel="Story actions"
          placement="bottom-end"
          defaultVisible={false}
          visible={isOpen}
          onVisibleChange={setIsOpen}
          popover={<LiveContextMenu context={context} links={[...topLinks, ...links]} />}
          hasChrome={true}
          padding={0}
        >
          <FloatingStatusButton
            data-displayed={isOpen ? 'on' : 'off'}
            data-testid="context-menu"
            ariaLabel="Open context menu"
            type="button"
            status={itemStatus}
            onClick={handlers.onOpen}
          >
            {MenuIcon}
          </FloatingStatusButton>
        </PopoverProvider>
      ) : null,
    };
  }, [context, handlers, isOpen, shouldRender, links, topLinks, itemStatus, MenuIcon]);
};

/**

Review comment (suggestion):
```suggestion
          ariaLabel="Context menu"
```

We'll figure out a better name when we rewrite the sidebar. This menu is also used by components and docs so it can't mention stories.

Code after:
        <svg key="icon" viewBox="0 0 14 14" width="14" height="14">
          <UseSymbol type="warning" />
        </svg>
      );
    }
    if (itemStatus === 'status-value:success') {
      return (
        <svg key="icon" viewBox="0 0 14 14" width="14" height="14">
          <UseSymbol type="success" />
        </svg>
      );
    }
    return <EllipsisIcon />;
  }, [itemStatus, context.type]);

  return useMemo(() => {
    // Never show the SidebarContextMenu in production
    if (globalThis.CONFIG_TYPE !== 'DEVELOPMENT') {
      return empty;
    }

    return {
      onMouseEnter: handlers.onMouseEnter,
      node: shouldRender ? (
        <PopoverProvider
          ariaLabel="Context menu"
          placement="bottom-end"
          defaultVisible={false}
          visible={isOpen}
          onVisibleChange={setIsOpen}
          popover={<LiveContextMenu context={context} links={[...topLinks, ...links]} />}
          hasChrome={true}
          padding={0}
        >
          <FloatingStatusButton
            data-displayed={isOpen ? 'on' : 'off'}
            data-testid="context-menu"
            ariaLabel="Open context menu"
            type="button"
            status={itemStatus}
            onClick={handlers.onOpen}
          >
            {MenuIcon}
          </FloatingStatusButton>
        </PopoverProvider>
      ) : null,
    };
  }, [context, handlers, isOpen, shouldRender, links, topLinks, itemStatus, MenuIcon]);
};

/**