feat(react,SidebarItem): add closePopoverAfterClick prop

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<typeof Sidebar> & { behaviour?: SidebarMenuProps['behaviour']; exclusive?: boolean };
+type Args = ComponentProps<typeof Sidebar> &
+  ComponentProps<typeof SidebarItem> & { behaviour?: SidebarMenuProps['behaviour']; exclusive?: boolean };
 
 const meta: Meta<Args> = {
   tags: ['autodocs'],
@@ -57,6 +58,11 @@ const meta: Meta<Args> = {
         disable: true,
       },
     },
+    closePopoverAfterClick: {
+      control: {
+        type: 'boolean',
+      },
+    },
   },
   args: {
     color: 'default',
@@ -72,7 +78,10 @@ export default meta;
 type Story = StoryObj<Args>;
 
 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 = {
             <SidebarMenu behaviour={behaviour} exclusive={exclusive}>
               <SidebarItem
                 selected
+                closePopoverAfterClick={closePopoverAfterClick}
                 component="button"
                 icon={<IconAtLineW500 />}
                 id="0"
@@ -136,7 +146,12 @@ export const Demo: Story = {
                   />
                 ))}
               </SidebarItem>
-              <SidebarItem icon={<IconAtLineW500 />} id="1" text={locale === 'en' ? 'Files' : 'Файлы'}>
+              <SidebarItem
+                closePopoverAfterClick={closePopoverAfterClick}
+                icon={<IconAtLineW500 />}
+                id="1"
+                text={locale === 'en' ? 'Files' : 'Файлы'}
+              >
                 {[...Array(8)].map((_, i) => (
                   <SidebarItem
                     key={i}

packages/react/src/components/Sidebar/SidebarItem/SidebarItem.tsx

@@ -27,6 +27,7 @@ export const SidebarItem: OverridableComponent<SidebarItemTypeMap> = (inProps: S
     icon,
     iconToggle = <IconChevronLeftLineW200 container containerSize="20px" />,
     inset,
+    closePopoverAfterClick,
     onClick,
     onKeyDown,
     onTouchStart,
@@ -184,9 +185,15 @@ export const SidebarItem: OverridableComponent<SidebarItemTypeMap> = (inProps: S
             disabled={!onClick}
             size="100"
             tabIndex={-1}
-            onClick={onClick}
             {...props}
             selected={false}
+            onClick={(e: React.MouseEvent<HTMLLIElement>) => {
+              onClick?.(e);
+
+              if (closePopoverAfterClick) {
+                onTooltipClose();
+              }
+            }}
           >
             <span className="body100">{text}</span>
           </MenuItem>
@@ -195,10 +202,23 @@ export const SidebarItem: OverridableComponent<SidebarItemTypeMap> = (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 (
-                <MenuItem key={idx} className="es-sidebar-item__tooltip-item" size="100" tabIndex={idx} {...rest}>
+                <MenuItem
+                  key={idx}
+                  className="es-sidebar-item__tooltip-item"
+                  size="100"
+                  tabIndex={idx}
+                  {...rest}
+                  onClick={(e: React.MouseEvent<HTMLLIElement>) => {
+                    onClick?.(e);
+
+                    if (closePopoverAfterClick) {
+                      onTooltipClose();
+                    }
+                  }}
+                >
                   <span className="body100">{text}</span>
                 </MenuItem>
               );

packages/react/src/components/Sidebar/SidebarItem/SidebarItem.types.ts

@@ -22,6 +22,8 @@ export interface SidebarItemTypeMap<P = {}, D extends ElementType = `li`> {
     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. */