@seamly/web-ui 25.2.0-beta.1 → 25.2.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "25.2.0-beta.1",
+  "version": "25.2.0-beta.2",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "exports": {

package/src/javascripts/core/ui/components/layout/chat.tsx

@@ -2,9 +2,10 @@ import { useUserHasResponded } from 'domains/app/hooks'
 import { useConfig } from 'domains/config/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
+import { createFocusTrap, FocusTrap } from 'focus-trap'
 import { className } from 'lib/css'
 import { ComponentChildren } from 'preact'
-import { forwardRef } from 'preact/compat'
+import { forwardRef, useEffect, useRef } from 'preact/compat'
 import Suggestions from 'ui/components/suggestions'
 import { useSeamlyAppContainerClassNames } from 'ui/hooks/component-helper-hooks'
 import { useWindowOpenButtonFocusing } from 'ui/hooks/focus-helper-hooks'
@@ -15,11 +16,13 @@ const Chat = forwardRef<
   HTMLElement,
   { children: ComponentChildren; className?: string }
 >(({ children, className: givenClassName = '' }, forwardedRef) => {
+  const focusTrap = useRef<FocusTrap>(null)
   const { closeChat, isOpen, isVisible } = useVisibility()
   const focusWindowOpenButton = useWindowOpenButtonFocusing()
   const { namespace, layoutMode } = useConfig()
   const { isInline } = useSeamlyLayoutMode()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
+  const chatSectionId = useGeneratedId()
   const headingId = useGeneratedId()
   const userHasResponded = useUserHasResponded()
   const { t } = useI18n()
@@ -52,9 +55,26 @@ const Chat = forwardRef<
       }
   }
 
+  useEffect(() => {
+    if (isVisible && layoutMode === 'window') {
+      focusTrap.current = createFocusTrap(`#${chatSectionId}`, {
+        // We set the initialFocus to false, as the `WindowOpenButton` takes care of that
+        initialFocus: false,
+      })
+      focusTrap.current.activate()
+    }
+
+    return () => {
+      if (focusTrap.current) {
+        focusTrap.current.deactivate()
+      }
+    }
+  }, [chatSectionId, isVisible, layoutMode])
+
   return (
     isVisible && (
       <section
+        id={chatSectionId}
         className={className(classNames)}
         onKeyDown={onKeyDownHandler}
         tabIndex={-1}