@seamly/web-ui 21.0.1 → 21.0.2-beta.1

package/package.json

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

package/src/javascripts/ui/components/layout/chat-frame.js

@@ -2,7 +2,6 @@ import AppOptions from 'ui/components/app-options'
 import ChatScrollProvider from 'ui/components/conversation/event/chat-scroll/chat-scroll-provider'
 import EntryContainer from 'ui/components/entry/entry-container'
 import CollapseButton from 'ui/components/view/window-view/collapse-button'
-import { useSeamlyLayoutMode } from 'ui/hooks/seamly-state-hooks'
 import { useInterrupt } from 'domains/interrupt/hooks'
 import TranslationStatus from 'domains/translations/components/translation-status'
 import { useVisibility } from 'domains/visibility/hooks'
@@ -10,8 +9,7 @@ import { className } from 'lib/css'
 
 function ChatFrame({ children, interruptComponent: InterruptComponent }) {
   const { hasInterrupt, meta } = useInterrupt()
-  const { isOpen, closeChat } = useVisibility()
-  const { isWindow } = useSeamlyLayoutMode()
+  const { isOpen } = useVisibility()
 
   if (hasInterrupt) {
     if (isOpen) {
@@ -25,7 +23,7 @@ function ChatFrame({ children, interruptComponent: InterruptComponent }) {
       <ChatScrollProvider>
         <div className={className('chat__container__header')}>
           <TranslationStatus />
-          {isOpen && isWindow && <CollapseButton onClick={closeChat} />}
+          <CollapseButton />
         </div>
         {children}
       </ChatScrollProvider>

package/src/javascripts/ui/components/layout/interrupt.js

@@ -1,4 +1,5 @@
 import { useEffect } from 'preact/hooks'
+import CollapseButton from 'ui/components/view/window-view/collapse-button'
 import {
   useGeneratedId,
   useLiveRegion,
@@ -46,6 +47,7 @@ const Interrupt = ({
 
   return !isExpiredError ? (
     <section className={className('interrupt')} aria-labelledby={headingId}>
+      <CollapseButton />
       <div className={className('interrupt__body')}>
         <h2 id={headingId} className={className('interrupt__title')}>
           {title}

package/src/javascripts/ui/components/view/window-view/collapse-button.js

@@ -1,20 +1,22 @@
-import { useCallback } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
+import { useSeamlyLayoutMode } from 'ui/hooks/seamly-state-hooks'
 import { useI18n } from 'domains/i18n/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
 
-const CollapseButton = ({ onClick }) => {
+const CollapseButton = () => {
   const { t } = useI18n()
-  const handleClick = useCallback(() => onClick(), [onClick])
-  return (
+  const { isOpen, closeChat } = useVisibility()
+  const { isWindow } = useSeamlyLayoutMode()
+  return isOpen && isWindow ? (
     <button
       type="button"
       className={className('button', 'collapse-button')}
-      onClick={handleClick}
+      onClick={closeChat}
     >
       <Icon name="chevronDown" size="32" alt={t('window.srCollapseButton')} />
     </button>
-  )
+  ) : null
 }
 
 export default CollapseButton