feat(design-system): add onCloseAutoFocus

Author: markkaylor

.changeset/few-fishes-sip.md

@@ -0,0 +1,5 @@
+---
+'@strapi/design-system': minor
+---
+
+feat: add onCloseAutoFocus to Select

packages/strapi-design-system/src/Select/MultiSelect.tsx

@@ -17,6 +17,7 @@ import { Tag } from '../Tag';
 import { Typography } from '../Typography';
 
 type MultiSelectPropsWithoutLabel = Omit<SelectParts.MultiSelectProps, 'value' | 'multi'> &
+  Pick<SelectParts.ContentProps, 'onCloseAutoFocus'> &
   Pick<SelectParts.TriggerProps, 'clearLabel' | 'onClear' | 'size' | 'startIcon' | 'placeholder'> &
   Pick<FieldProps, 'hint' | 'id' | 'error'> & {
     /**
@@ -55,6 +56,7 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
       labelAction,
       onChange,
       onClear,
+      onCloseAutoFocus,
       onReachEnd,
       placeholder,
       required,
@@ -197,7 +199,7 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
               </SelectParts.Value>
             </SelectParts.Trigger>
             <SelectParts.Portal>
-              <SelectParts.Content position="popper" sideOffset={4}>
+              <SelectParts.Content position="popper" sideOffset={4} onCloseAutoFocus={onCloseAutoFocus}>
                 <SelectParts.Viewport ref={viewportRef}>
                   {children}
                   <Box id={intersectionId} width="100%" height="1px" />

packages/strapi-design-system/src/Select/SingleSelect.tsx

@@ -11,6 +11,7 @@ import { useIntersection } from '../hooks/useIntersection';
 import { Typography } from '../Typography';
 
 type SingleSelectPropsWithoutLabel = Omit<SelectParts.SingleSelectProps, 'value'> &
+  Pick<SelectParts.ContentProps, 'onCloseAutoFocus'> &
   Pick<SelectParts.TriggerProps, 'clearLabel' | 'onClear' | 'size' | 'startIcon' | 'placeholder'> &
   Pick<FieldProps, 'error' | 'hint' | 'id'> & {
     /**
@@ -41,7 +42,6 @@ export const SingleSelect = React.forwardRef<SingleSelectInputElement, SingleSel
     forwardedRef,
   ) => {
     const generatedId = useId(id);
-
     /**
      * Because the trigger needs to be a `div` to allow the clear
      * button & tags to be clickable, we need to manually focus it.
@@ -98,6 +98,7 @@ export const SingleSelectInput = React.forwardRef<SingleSelectInputElement, Sing
       label,
       onChange,
       onClear,
+      onCloseAutoFocus,
       onReachEnd,
       placeholder,
       required,
@@ -194,7 +195,7 @@ export const SingleSelectInput = React.forwardRef<SingleSelectInputElement, Sing
           </SelectParts.Value>
         </SelectParts.Trigger>
         <SelectParts.Portal>
-          <SelectParts.Content position="popper" sideOffset={4}>
+          <SelectParts.Content position="popper" sideOffset={4} onCloseAutoFocus={onCloseAutoFocus}>
             <SelectParts.Viewport ref={viewportRef}>
               {children}
               <Box id={intersectionId} width="100%" height="1px" />