Fix LinkWrapper on TooltipLinkList stories

code/core/src/components/components/tooltip/TooltipLinkList.stories.tsx

@@ -1,5 +1,4 @@
-import type { FunctionComponent, MouseEvent, PropsWithChildren, ReactElement } from 'react';
-import React, { Children, cloneElement } from 'react';
+import React from 'react';
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 import { LinkIcon, LinuxIcon } from '@storybook/icons';
@@ -9,26 +8,6 @@ import ellipseUrl from './assets/ellipse.png';
 
 const onLinkClick = action('onLinkClick');
 
-interface StoryLinkWrapperProps {
- href: string;
- passHref?: boolean;
-}
-
-const StoryLinkWrapper: FunctionComponent<PropsWithChildren<StoryLinkWrapperProps>> = ({
- href,
- passHref = false,
- children,
-}) => {
- const child = Children.only(children) as ReactElement;
- return cloneElement(child, {
- href: passHref && href,
- onClick: (e: MouseEvent) => {
- e.preventDefault();
- onLinkClick(href);
- },
- });
-};
-
 export default {
  component: TooltipLinkList,
  decorators: [
@@ -57,15 +36,16 @@ export const WithoutIcons = {
  title: 'Link 1',
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  {
  id: '2',
  title: 'Link 2',
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  ],
- LinkWrapper: StoryLinkWrapper,
  },
 } satisfies Story;
 
@@ -78,15 +58,16 @@ export const WithOneIcon = {
  center: 'This is an addition description',
  icon: <LinkIcon />,
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  {
  id: '2',
  title: 'Link 2',
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  ],
- LinkWrapper: StoryLinkWrapper,
  },
 } satisfies Story;
 
@@ -99,15 +80,16 @@ export const ActiveWithoutAnyIcons = {
  active: true,
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  {
  id: '2',
  title: 'Link 2',
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  ],
- LinkWrapper: StoryLinkWrapper,
  },
 } satisfies Story;
 
@@ -120,16 +102,17 @@ export const ActiveWithSeparateIcon = {
  icon: <LinkIcon />,
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  {
  id: '2',
  title: 'Link 2',
  active: true,
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  ],
- LinkWrapper: StoryLinkWrapper,
  },
 } satisfies Story;
 
@@ -143,15 +126,16 @@ export const ActiveAndIcon = {
  icon: <LinkIcon />,
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  {
  id: '2',
  title: 'Link 2',
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  ],
- LinkWrapper: StoryLinkWrapper,
  },
 } satisfies Story;
 
@@ -166,16 +150,17 @@ export const WithIllustration = {
  right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  {
  id: '2',
  title: 'Link 2',
  center: 'This is an addition description',
  right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  ],
- LinkWrapper: StoryLinkWrapper,
  },
 } satisfies Story;
 
@@ -190,15 +175,16 @@ export const WithCustomIcon = {
  right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
  center: 'This is an addition description',
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  {
  id: '2',
  title: 'Link 2',
  center: 'This is an addition description',
  right: <img src={ellipseUrl} width="16" height="16" alt="ellipse" />,
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  ],
- LinkWrapper: StoryLinkWrapper,
  },
 } satisfies Story;

code/core/src/manager/container/Menu.stories.tsx

@@ -1,32 +1,11 @@
-import type { FC, MouseEvent, PropsWithChildren, ReactElement } from 'react';
-import React, { Children, cloneElement } from 'react';
+import React from 'react';
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 import { TooltipLinkList, WithTooltip } from '@storybook/core/components';
 import { Shortcut } from './Menu';
 
 const onLinkClick = action('onLinkClick');
 
-interface StoryLinkWrapperProps {
- href: string;
- passHref?: boolean;
-}
-
-const StoryLinkWrapper: FC<PropsWithChildren<StoryLinkWrapperProps>> = ({
- href,
- passHref = false,
- children,
-}) => {
- const child = Children.only(children) as ReactElement;
- return cloneElement(child, {
- href: passHref && href,
- onClick: (e: MouseEvent) => {
- e.preventDefault();
- onLinkClick(href);
- },
- });
-};
-
 export default {
  component: TooltipLinkList,
  decorators: [
@@ -56,16 +35,17 @@ export const WithShortcuts = {
  center: 'This is an addition description',
  right: <Shortcut keys={['⌘']} />,
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  {
  id: '2',
  title: 'Link 2',
  center: 'This is an addition description',
  right: <Shortcut keys={['⌘', 'K']} />,
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  ],
- LinkWrapper: StoryLinkWrapper,
  },
 } satisfies Story;
 
@@ -79,15 +59,16 @@ export const WithShortcutsActive = {
  active: true,
  right: <Shortcut keys={['⌘']} />,
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  {
  id: '2',
  title: 'Link 2',
  center: 'This is an addition description',
  right: <Shortcut keys={['⌘', 'K']} />,
  href: 'http://google.com',
+ onClick: onLinkClick,
  },
  ],
- LinkWrapper: StoryLinkWrapper,
  },
 } satisfies Story;