feat: empty select box content

.changeset/soft-ducks-divide.md

@@ -0,0 +1,5 @@
+---
+'@example/ui-playground': patch
+---
+
+feat: add empty state content for select box

examples/ui-playground/src/app/playground/shadcn/select-section.tsx

@@ -17,6 +17,7 @@ import {
   InputGroupButton,
   InputGroupControl,
   InputGroupText,
+  SelectEmptyContent,
   SelectItemIndicator,
   SelectItemText,
   Typography,
@@ -73,6 +74,62 @@ function BasicSelect() {
     </div>
   )
 }
+// Empty Select
+function EmptySelect() {
+  return (
+    <div className="space-y-4">
+      <Select>
+        <SelectTrigger className="min-w-[300px]">
+          <div className="flex gap-x-2 items-center">
+            <SelectValue placeholder="Select a fruit" />
+          </div>
+        </SelectTrigger>
+        <SelectContent>
+          {[].map((item) => (
+            <SelectItem key={item} value={item}>
+              <SelectItemText>{item}</SelectItemText>
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
+
+// Custom empty Select
+function CustomEmptySelect() {
+  const items: string[] = []
+
+  return (
+    <div className="space-y-4">
+      <Select>
+        <SelectTrigger className="min-w-[300px]">
+          <div className="flex gap-x-2 items-center">
+            <SelectValue placeholder="Select a fruit" />
+          </div>
+        </SelectTrigger>
+        <SelectContent>
+          {items.length > 0 ? (
+            items.map((item) => (
+              <SelectItem key={item} value={item}>
+                <SelectItemText>{item}</SelectItemText>
+              </SelectItem>
+            ))
+          ) : (
+            <SelectEmptyContent className="h-[120px] flex-col space-y-4">
+              <Typography type="caption" className="text-fg">
+                No products
+              </Typography>
+              <Typography type="label" className="">
+                Please create a new product first
+              </Typography>
+            </SelectEmptyContent>
+          )}
+        </SelectContent>
+      </Select>
+    </div>
+  )
+}
 
 // Input group select
 function InputGroupSelect() {
@@ -543,6 +600,22 @@ export function SelectSection() {
           <BasicSelect />
         </div>
       </PlaygroundCard>
+      <PlaygroundCard title="Empty Select" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          An empty select dropdown item, display the place holder value
+        </Typography>
+        <div className="p-4 bg-secondary w-full rounded-lg">
+          <EmptySelect />
+        </div>
+      </PlaygroundCard>
+      <PlaygroundCard title="Custom empty Select" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          A custom empty select
+        </Typography>
+        <div className="p-4 bg-secondary w-full rounded-lg">
+          <CustomEmptySelect />
+        </div>
+      </PlaygroundCard>
       <PlaygroundCard title="Basic Select with input group" categoryTitle="Component">
         <Typography type="body" className="text-muted-foreground mb-4">
           A simple select dropdown with input group.

packages/react/v2/components/primitives/select.tsx

@@ -45,13 +45,25 @@ function SelectTrigger({
   )
 }
 
+function SelectEmptyContent(props: { children?: React.ReactNode; className?: string }) {
+  return (
+    <div
+      className={cn('h-32 flex justify-center items-center text-sm text-muted-fg', props.className)}
+    >
+      {props.children || 'No items'}
+    </div>
+  )
+}
+
 function SelectContent({
   className,
   children,
   position = 'popper',
   align = 'center',
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  const isEmpty = React.Children.count(children) === 0
+
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
@@ -74,7 +86,7 @@ function SelectContent({
               'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-2'
           )}
         >
-          {children}
+          {isEmpty ? <SelectEmptyContent /> : children}
         </SelectPrimitive.Viewport>
         <SelectScrollDownButton />
       </SelectPrimitive.Content>
@@ -173,6 +185,7 @@ const SelectItemText = SelectPrimitive.ItemText
 export {
   Select,
   SelectContent,
+  SelectEmptyContent,
   SelectGroup,
   SelectItem,
   SelectItemIndicator,