From 47056034ad7fe0196517c684a18f2ae3afd62d8f Mon Sep 17 00:00:00 2001
From: Matthias <mprost@scaleway.com>
Date: Fri, 14 Mar 2025 16:52:28 +0100
Subject: [PATCH] feat(MenuV2): add empty state on groups

---
 .changeset/every-pianos-hide.md               |  5 ++
 .../MenuV2/__stories__/Searchable.stories.tsx |  2 +-
 .../components/MenuV2/components/Group.tsx    | 51 ++++++++++++-------
 3 files changed, 38 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/every-pianos-hide.md

diff --git a/.changeset/every-pianos-hide.md b/.changeset/every-pianos-hide.md
new file mode 100644
index 0000000000..cbdb912e37
--- /dev/null
+++ b/.changeset/every-pianos-hide.md
@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+Add prop `emptyState` on `<MenuV2.Group />` that can be usefull when searching
diff --git a/packages/ui/src/components/MenuV2/__stories__/Searchable.stories.tsx b/packages/ui/src/components/MenuV2/__stories__/Searchable.stories.tsx
index fd1b2b1358..5ca97032c3 100644
--- a/packages/ui/src/components/MenuV2/__stories__/Searchable.stories.tsx
+++ b/packages/ui/src/components/MenuV2/__stories__/Searchable.stories.tsx
@@ -18,7 +18,7 @@ export const Searchable: StoryFn<typeof MenuV2> = () => (
       />
     }
   >
-    <MenuV2.Group label="Projects">
+    <MenuV2.Group label="Projects" emptyState="No project">
       <MenuV2.Item sentiment="primary" active>
         <Stack direction="row" gap={1} alignItems="center">
           <AvatarV2
diff --git a/packages/ui/src/components/MenuV2/components/Group.tsx b/packages/ui/src/components/MenuV2/components/Group.tsx
index 113fcae00b..8667dd6fde 100644
--- a/packages/ui/src/components/MenuV2/components/Group.tsx
+++ b/packages/ui/src/components/MenuV2/components/Group.tsx
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import type { ReactNode } from 'react'
+import { Children, type ReactNode } from 'react'
 import { Stack } from '../../Stack'
 import { Text } from '../../Text'
 
@@ -12,23 +12,36 @@ type GroupProps = {
   label: string
   children: ReactNode
   labelDescription?: ReactNode
+  /**
+   * Empty state will be shown when there are no children
+   */
+  emptyState?: ReactNode
 }
 
-export const Group = ({ label, children, labelDescription }: GroupProps) => (
-  <>
-    <Container>
-      <Stack gap={1} alignItems="center" direction="row">
-        <Text
-          variant="captionStrong"
-          as="span"
-          prominence="weak"
-          sentiment="neutral"
-        >
-          {label}
-        </Text>
-        {labelDescription || null}
-      </Stack>
-    </Container>
-    {children}
-  </>
-)
+export const Group = ({
+  label,
+  children,
+  labelDescription,
+  emptyState,
+}: GroupProps) => {
+  const isChildrenEmpty = Children.count(children) === 0
+
+  return (
+    <>
+      <Container>
+        <Stack gap={1} alignItems="center" direction="row">
+          <Text
+            variant="captionStrong"
+            as="span"
+            prominence="weak"
+            sentiment="neutral"
+          >
+            {label}
+          </Text>
+          {labelDescription || null}
+        </Stack>
+      </Container>
+      {isChildrenEmpty && emptyState ? emptyState : children}
+    </>
+  )
+}