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

package/build/dist/lib/index.debug.js

@@ -14591,7 +14591,7 @@ class API {
     return {
       clientName: "@seamly/web-ui",
       clientVariant: this.#layoutMode,
-      clientVersion: "25.2.0-beta.1",
+      clientVersion: "25.2.0",
       currentUrl: window.location.toString(),
       screenResolution: `${window.screen.width}x${window.screen.height}`,
       timezone: (0,_utils__WEBPACK_IMPORTED_MODULE_13__.getTimeZone)(),
@@ -24761,15 +24761,16 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! domains/config/hooks */ "./src/javascripts/core/domains/config/hooks.ts");
 /* harmony import */ var domains_i18n_hooks__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! domains/i18n/hooks */ "./src/javascripts/core/domains/i18n/hooks.ts");
 /* harmony import */ var domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! domains/visibility/hooks */ "./src/javascripts/core/domains/visibility/hooks.ts");
-/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! lib/css */ "./src/javascripts/core/lib/css.ts");
-/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! preact/compat */ "preact/compat");
-/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(preact_compat__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var ui_components_suggestions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/components/suggestions */ "./src/javascripts/core/ui/components/suggestions/index.tsx");
-/* harmony import */ var ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/hooks/component-helper-hooks */ "./src/javascripts/core/ui/hooks/component-helper-hooks.ts");
-/* harmony import */ var ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/hooks/focus-helper-hooks */ "./src/javascripts/core/ui/hooks/focus-helper-hooks.ts");
-/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ "./src/javascripts/core/ui/hooks/seamly-state-hooks.ts");
-/* harmony import */ var ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/hooks/utility-hooks */ "./src/javascripts/core/ui/hooks/utility-hooks.ts");
-/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/preact/compat/jsx-runtime.mjs");
+/* harmony import */ var focus_trap__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! focus-trap */ "./node_modules/focus-trap/dist/focus-trap.esm.js");
+/* harmony import */ var lib_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! lib/css */ "./src/javascripts/core/lib/css.ts");
+/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! preact/compat */ "preact/compat");
+/* harmony import */ var preact_compat__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(preact_compat__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var ui_components_suggestions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/components/suggestions */ "./src/javascripts/core/ui/components/suggestions/index.tsx");
+/* harmony import */ var ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/hooks/component-helper-hooks */ "./src/javascripts/core/ui/hooks/component-helper-hooks.ts");
+/* harmony import */ var ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/hooks/focus-helper-hooks */ "./src/javascripts/core/ui/hooks/focus-helper-hooks.ts");
+/* harmony import */ var ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/hooks/seamly-state-hooks */ "./src/javascripts/core/ui/hooks/seamly-state-hooks.ts");
+/* harmony import */ var ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ui/hooks/utility-hooks */ "./src/javascripts/core/ui/hooks/utility-hooks.ts");
+/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! react/jsx-runtime */ "./node_modules/preact/compat/jsx-runtime.mjs");
 
 
 
@@ -24783,25 +24784,28 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-const Chat = (0,preact_compat__WEBPACK_IMPORTED_MODULE_6__.forwardRef)(({
+
+const Chat = (0,preact_compat__WEBPACK_IMPORTED_MODULE_7__.forwardRef)(({
   children,
   className: givenClassName = ''
 }, forwardedRef) => {
+  const focusTrap = (0,preact_compat__WEBPACK_IMPORTED_MODULE_7__.useRef)(null);
   const {
     closeChat,
     isOpen,
     isVisible
   } = (0,domains_visibility_hooks__WEBPACK_IMPORTED_MODULE_4__.useVisibility)();
-  const focusWindowOpenButton = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_9__.useWindowOpenButtonFocusing)();
+  const focusWindowOpenButton = (0,ui_hooks_focus_helper_hooks__WEBPACK_IMPORTED_MODULE_10__.useWindowOpenButtonFocusing)();
   const {
     namespace,
     layoutMode
   } = (0,domains_config_hooks__WEBPACK_IMPORTED_MODULE_2__.useConfig)();
   const {
     isInline
-  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_10__.useSeamlyLayoutMode)();
-  const appContainerClassNames = (0,ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_8__.useSeamlyAppContainerClassNames)();
-  const headingId = (0,ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_11__.useGeneratedId)();
+  } = (0,ui_hooks_seamly_state_hooks__WEBPACK_IMPORTED_MODULE_11__.useSeamlyLayoutMode)();
+  const appContainerClassNames = (0,ui_hooks_component_helper_hooks__WEBPACK_IMPORTED_MODULE_9__.useSeamlyAppContainerClassNames)();
+  const chatSectionId = (0,ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_12__.useGeneratedId)();
+  const headingId = (0,ui_hooks_utility_hooks__WEBPACK_IMPORTED_MODULE_12__.useGeneratedId)();
   const userHasResponded = (0,domains_app_hooks__WEBPACK_IMPORTED_MODULE_1__.useUserHasResponded)();
   const {
     t
@@ -24823,21 +24827,36 @@ const Chat = (0,preact_compat__WEBPACK_IMPORTED_MODULE_6__.forwardRef)(({
       focusWindowOpenButton();
     }
   };
-  return isVisible && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsxs)("section", {
-    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)(classNames),
+  (0,preact_compat__WEBPACK_IMPORTED_MODULE_7__.useEffect)(() => {
+    if (isVisible && layoutMode === 'window') {
+      focusTrap.current = (0,focus_trap__WEBPACK_IMPORTED_MODULE_5__.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 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsxs)("section", {
+    id: chatSectionId,
+    className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)(classNames),
     onKeyDown: onKeyDownHandler,
     tabIndex: -1,
     ref: forwardedRef,
     role: layoutMode === 'window' ? 'dialog' : undefined,
     "aria-labelledby": headingId,
-    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("h2", {
-      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('chat__title', 'visually-hidden'),
+    children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("h2", {
+      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('chat__title', 'visually-hidden'),
       id: headingId,
       children: t('window.srModalLayoutLabel')
-    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)("div", {
-      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_5__.className)('chat-wrapper'),
+    }), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)("div", {
+      className: (0,lib_css__WEBPACK_IMPORTED_MODULE_6__.className)('chat-wrapper'),
       children: children
-    }), layoutMode === 'inline' && isOpen && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_12__.jsx)(ui_components_suggestions__WEBPACK_IMPORTED_MODULE_7__["default"], {
+    }), layoutMode === 'inline' && isOpen && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_13__.jsx)(ui_components_suggestions__WEBPACK_IMPORTED_MODULE_8__["default"], {
       isAside: true
     })]
   });