feat: DialogContentInner へ focusTrap の props を追加

packages/smarthr-ui/src/components/Dialog/DialogContentInner.tsx

@@ -14,7 +14,7 @@ import { tv } from 'tailwind-variants'
 import { useHandleEscape } from '../../hooks/useHandleEscape'
 
 import { DialogOverlap } from './DialogOverlap'
-import { FocusTrap } from './FocusTrap'
+import { FocusTrap, FocusTrapRef } from './FocusTrap'
 import { useBodyScrollLock } from './useBodyScrollLock'
 
 export type DialogContentInnerProps = PropsWithChildren<{
@@ -51,6 +51,10 @@ export type DialogContentInnerProps = PropsWithChildren<{
    * ダイアログの `aria-labelledby`
    */
   ariaLabelledby?: string
+  /**
+   * ダイアログトップのフォーカストラップへの ref
+   */
+  focusTrapRef?: RefObject<FocusTrapRef>
 }>
 type ElementProps = Omit<ComponentProps<'div'>, keyof DialogContentInnerProps>
 
@@ -79,6 +83,7 @@ export const DialogContentInner: FC<DialogContentInnerProps & ElementProps> = ({
   ariaLabelledby,
   children,
   className,
+  focusTrapRef,
   ...rest
 }) => {
   const { layoutStyleProps, innerStyle, backgroundStyle } = useMemo(() => {
@@ -128,7 +133,9 @@ export const DialogContentInner: FC<DialogContentInnerProps & ElementProps> = ({
           aria-modal="true"
           className={innerStyle}
         >
-          <FocusTrap firstFocusTarget={firstFocusTarget}>{children}</FocusTrap>
+          <FocusTrap firstFocusTarget={firstFocusTarget} ref={focusTrapRef}>
+            {children}
+          </FocusTrap>
         </div>
       </div>
     </DialogOverlap>