fix(core): make Select scrollable with popper positioning (#942)

bigcommerce · May 23, 2024 · c7c65e0 · c7c65e0
1 parent 8f1915e
commit c7c65e0
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 9 deletions.
diff --git a/.changeset/cuddly-dolphins-sparkle.md b/.changeset/cuddly-dolphins-sparkle.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Make select scrollable with popover functionality.
diff --git a/core/app/[locale]/(default)/cart/_components/shipping-info/index.tsx b/core/app/[locale]/(default)/cart/_components/shipping-info/index.tsx
@@ -157,7 +157,7 @@ export const ShippingInfo = ({
               placeholder={t('countryPlaceholder')}
               value={formValues.country}
             >
-              <SelectContent position="item-aligned">
+              <SelectContent>
                 {shippingCountries.map(({ id, countryCode, name }) => {
                   return (
                     <SelectItem key={id} value={`${countryCode}-${id}`}>
@@ -180,7 +180,7 @@ export const ShippingInfo = ({
                 placeholder={t('statePlaceholder')}
                 value={formValues.state}
               >
-                <SelectContent position="item-aligned">
+                <SelectContent>
                   {formValues.states.map(({ id, state }) => {
                     return (
                       <SelectItem key={id} value={state}>

diff --git a/...t)/login/register-customer/_components/register-customer-form/fields/picklist-or-text.tsx b/...t)/login/register-customer/_components/register-customer-form/fields/picklist-or-text.tsx
@@ -42,7 +42,7 @@ export const PicklistOrText = ({ defaultValue, field, name, options }: PicklistO
             placeholder={t('stateProvincePrefix')}
             required={field.isRequired}
           >
-            <SelectContent position="item-aligned">
+            <SelectContent>
               {options.map(({ entityId, label }) => {
                 return (
                   <SelectItem key={entityId} value={entityId.toString()}>

diff --git a/.../(default)/login/register-customer/_components/register-customer-form/fields/picklist.tsx b/.../(default)/login/register-customer/_components/register-customer-form/fields/picklist.tsx
@@ -33,7 +33,7 @@ export const Picklist = ({ defaultValue, field, name, onChange, options }: Pickl
           placeholder={field.choosePrefix}
           required={field.isRequired}
         >
-          <SelectContent position="item-aligned">
+          <SelectContent>
             {options.map(({ entityId, label }) => (
               <SelectItem key={entityId} value={entityId.toString()}>
                 {label}

diff --git a/core/components/ui/select/select.tsx b/core/components/ui/select/select.tsx
@@ -1,6 +1,6 @@
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { cva } from 'class-variance-authority';
-import { Check, ChevronDown } from 'lucide-react';
+import { Check, ChevronDown, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
 import { ComponentPropsWithRef, ElementRef, forwardRef } from 'react';
 
 import { cn } from '~/lib/utils';
@@ -30,7 +30,6 @@ interface SelectProps extends ComponentPropsWithRef<SelectType> {
   id?: string;
 }
 
-// We need to pass the ref to the Trigger component so, we need to type it as such.
 const Select = forwardRef<ElementRef<SelectTriggerType>, SelectProps>(
   ({ children, placeholder, className, variant, 'aria-label': ariaLabel, id, ...props }, ref) => {
     return (
@@ -42,7 +41,6 @@ const Select = forwardRef<ElementRef<SelectTriggerType>, SelectProps>(
           ref={ref}
         >
           <SelectPrimitive.Value placeholder={placeholder} />
-          {/* TODO: For the sake of moving fast we are leaving this in, but in the future we need to figure out how enable custom icons */}
           <SelectPrimitive.Icon>
             <ChevronDown className="inline group-focus-visible:text-primary group-enabled:group-hover:text-primary" />
           </SelectPrimitive.Icon>
@@ -58,6 +56,36 @@ Select.displayName = SelectPrimitive.Root.displayName;
 
 type SelectContentType = typeof SelectPrimitive.Content;
 
+const SelectScrollUpButton = forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    ref={ref}
+    {...props}
+  >
+    <ChevronUpIcon />
+  </SelectPrimitive.ScrollUpButton>
+));
+
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    className={cn('flex cursor-default items-center justify-center py-1', className)}
+    ref={ref}
+    {...props}
+  >
+    <ChevronDownIcon />
+  </SelectPrimitive.ScrollDownButton>
+));
+
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
 const SelectContent = forwardRef<
   ElementRef<SelectContentType>,
   ComponentPropsWithRef<SelectContentType>
@@ -68,13 +96,14 @@ const SelectContent = forwardRef<
         position={position}
         {...props}
         className={cn(
-          'max-h-radix-select-content-available-height relative w-full bg-white shadow-md',
+          'max-h-radix-select-content-available-height relative z-50 max-h-96 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}
       >
+        <SelectScrollUpButton />
         <SelectPrimitive.Viewport
           className={cn(
             'w-full',
@@ -84,6 +113,7 @@ const SelectContent = forwardRef<
         >
           {children}
         </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
       </SelectPrimitive.Content>
     </SelectPrimitive.Portal>
   );
@@ -105,7 +135,6 @@ const SelectItem = forwardRef<ElementRef<SelectItemType>, ComponentPropsWithRef<
         ref={ref}
       >
         <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-        {/* TODO: For the sake of moving fast we are leaving this in, but in the future we need to figure out how enable custom indicators */}
         <SelectPrimitive.ItemIndicator>
           <Check />
         </SelectPrimitive.ItemIndicator>