From 76d6739f2a9bad76e78b57ae1e1022d372feff68 Mon Sep 17 00:00:00 2001
From: Chancellor Clark <chancellor.clark@bigcommerce.com>
Date: Fri, 12 Apr 2024 11:39:30 -0400
Subject: [PATCH] fix(components): update styles in Select component for
 scrolling behavior

---
 .changeset/three-hairs-nail.md                   |  5 +++++
 .../components/src/components/select/select.tsx  | 16 ++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/three-hairs-nail.md

diff --git a/.changeset/three-hairs-nail.md b/.changeset/three-hairs-nail.md
new file mode 100644
index 000000000..2aac5bab1
--- /dev/null
+++ b/.changeset/three-hairs-nail.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/components": patch
+---
+
+Update styles to scroll when Select content is long.
diff --git a/packages/components/src/components/select/select.tsx b/packages/components/src/components/select/select.tsx
index 434895a50..d9f2b57db 100644
--- a/packages/components/src/components/select/select.tsx
+++ b/packages/components/src/components/select/select.tsx
@@ -59,19 +59,27 @@ type SelectContentType = typeof SelectPrimitive.Content;
 const SelectContent = forwardRef<
   ElementRef<SelectContentType>,
   ComponentPropsWithRef<SelectContentType>
->(({ children, className, ...props }, ref) => {
+>(({ children, className, position = 'popper', ...props }, ref) => {
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
-        position="popper"
+        position={position}
         {...props}
         className={cn(
-          'max-h-radix-select-content-available-height relative w-full bg-white shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          'max-h-radix-select-content-available-height relative w-full bg-white shadow-md',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           className,
         )}
         ref={ref}
       >
-        <SelectPrimitive.Viewport className="h-radix-select-content-available-height w-full min-w-[var(--radix-select-trigger-width)]">
+        <SelectPrimitive.Viewport
+          className={cn(
+            'w-full',
+            position === 'popper' &&
+              'h-[var(--radix-select-trigger-height)] min-w-[var(--radix-select-trigger-width)]',
+          )}
+        >
           {children}
         </SelectPrimitive.Viewport>
       </SelectPrimitive.Content>