diff --git a/packages/react/src/components/Sidebar/Sidebar.stories.tsx b/packages/react/src/components/Sidebar/Sidebar.stories.tsx index 093d9e046..fafe0ef9b 100644 --- a/packages/react/src/components/Sidebar/Sidebar.stories.tsx +++ b/packages/react/src/components/Sidebar/Sidebar.stories.tsx @@ -13,7 +13,8 @@ import { SidebarToggle } from './SidebarToggle'; import { IconAccountFillW500Lc, IconAtLineW500, IconBellFillW500, IconMagnifyLineW500 } from '../../icons'; import { ListItem, ListItemIcon, ListItemText } from '../ListItem'; -type Args = ComponentProps & { behaviour?: SidebarMenuProps['behaviour']; exclusive?: boolean }; +type Args = ComponentProps & + ComponentProps & { behaviour?: SidebarMenuProps['behaviour']; exclusive?: boolean }; const meta: Meta = { tags: ['autodocs'], @@ -57,6 +58,11 @@ const meta: Meta = { disable: true, }, }, + closePopoverAfterClick: { + control: { + type: 'boolean', + }, + }, }, args: { color: 'default', @@ -72,7 +78,10 @@ export default meta; type Story = StoryObj; export const Demo: Story = { - render: function Render({ color, behaviour, exclusive, minWidth, maxWidth }, { globals: { locale } }) { + render: function Render( + { color, behaviour, exclusive, minWidth, maxWidth, closePopoverAfterClick }, + { globals: { locale } } + ) { const [isOpen, setIsOpen] = useState(false); const [width, setWidth] = useState(280); @@ -120,6 +129,7 @@ export const Demo: Story = { } id="0" @@ -136,7 +146,12 @@ export const Demo: Story = { /> ))} - } id="1" text={locale === 'en' ? 'Files' : 'Файлы'}> + } + id="1" + text={locale === 'en' ? 'Files' : 'Файлы'} + > {[...Array(8)].map((_, i) => ( = (inProps: S icon, iconToggle = , inset, + closePopoverAfterClick, onClick, onKeyDown, onTouchStart, @@ -184,9 +185,15 @@ export const SidebarItem: OverridableComponent = (inProps: S disabled={!onClick} size="100" tabIndex={-1} - onClick={onClick} {...props} selected={false} + onClick={(e: React.MouseEvent) => { + onClick?.(e); + + if (closePopoverAfterClick) { + onTooltipClose(); + } + }} > {text} @@ -195,10 +202,23 @@ export const SidebarItem: OverridableComponent = (inProps: S {!!children && React.Children.map(children, (child: any, idx: number) => { // eslint-disable-next-line @typescript-eslint/no-unused-vars - const { text, inset, ...rest } = child.props; + const { text, inset, onClick, ...rest } = child.props; return ( - + ) => { + onClick?.(e); + + if (closePopoverAfterClick) { + onTooltipClose(); + } + }} + > {text} ); diff --git a/packages/react/src/components/Sidebar/SidebarItem/SidebarItem.types.ts b/packages/react/src/components/Sidebar/SidebarItem/SidebarItem.types.ts index 625b0e8e6..65619f7d6 100644 --- a/packages/react/src/components/Sidebar/SidebarItem/SidebarItem.types.ts +++ b/packages/react/src/components/Sidebar/SidebarItem/SidebarItem.types.ts @@ -22,6 +22,8 @@ export interface SidebarItemTypeMap

{ selected?: boolean; /** If true, the children are indented. This should be used if there is no left avatar or left icon. */ inset?: boolean; + /** If true, the popover will close after an item is clicked. */ + closePopoverAfterClick?: boolean; /** Text for the secondary action aria-label. */ labelOpen?: string; /** Text for the secondary action aria-label. */