feat(select): add SelectValueClipper for clipping SelectValue cor…

…rectly
ducompsoc · Sep 30, 2024 · e9ea928 · e9ea928
1 parent c897ce2
commit e9ea928
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
@@ -16,6 +16,21 @@ const SelectGroup = SelectPrimitive.Group
 
 const SelectValue = SelectPrimitive.Value
 
+const SelectValueClipper = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "flex items-end gap-2 overflow-hidden [&>span]:truncate",
+      className
+    )}
+    {...props}
+  />
+))
+SelectValueClipper.displayName = "SelectValueClipper"
+
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>