@seamly/web-ui 24.4.1 → 24.5.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "24.4.1",
+  "version": "24.5.0-beta.1",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "exports": {
@@ -21,9 +21,9 @@
     "webpack/*"
   ],
   "dependencies": {
-    "@reduxjs/toolkit": "^2.6.1",
+    "@reduxjs/toolkit": "^2.8.1",
     "@ultraq/icu-message-formatter": "^0.14.3",
-    "core-js": "^3.41.0",
+    "core-js": "^3.42.0",
     "focus-trap": "^7.6.4",
     "include-media": "^2.0.0",
     "js-cookie": "^3.0.5",
@@ -32,11 +32,11 @@
     "reconnecting-websocket": "^4.4.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.27.0",
-    "@playwright/test": "^1.51.1",
+    "@babel/core": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@playwright/test": "1.51.1",
     "@seamly/doc-site": "^4.0.0",
     "@seamly/eslint-config": "^3.1.0",
     "@seamly/prettier-config": "^3.1.0",
@@ -45,22 +45,22 @@
     "@testing-library/preact": "^3.2.4",
     "@types/core-js": "^2.5.8",
     "@types/jest": "^29.5.12",
-    "@typescript-eslint/eslint-plugin": "^8.29.0",
-    "@typescript-eslint/parser": "^8.29.0",
+    "@typescript-eslint/eslint-plugin": "^8.32.0",
+    "@typescript-eslint/parser": "^8.32.0",
     "babel-jest": "^29.7.0",
     "babel-loader": "^10.0.0",
     "copy-webpack-plugin": "^13.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.9.1",
+    "eslint-import-resolver-typescript": "^3.10.1",
     "eslint-plugin-filenames": "^1.3.2",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^28.11.0",
-    "eslint-plugin-prettier": "^5.2.6",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-prettier": "^5.4.0",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.2",
     "file-loader": "^6.2.0",
-    "fork-ts-checker-webpack-plugin": "^9.0.3",
+    "fork-ts-checker-webpack-plugin": "^9.1.0",
     "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -69,23 +69,24 @@
     "openapi-typescript": "^6.7",
     "playwright-test-coverage": "^1.2.12",
     "postcss": "^8.5.3",
-    "preact": "^10.26.4",
+    "preact": "^10.26.6",
     "prettier": "^3.5.3",
     "rimraf": "^6.0.1",
     "style-loader": "^4.0.0",
-    "stylelint": "^16.17.0",
-    "typescript": "^5.8.2",
-    "webpack": "^5.98.0",
+    "stylelint": "^16.19.1",
+    "typescript": "^5.8.3",
+    "webpack": "^5.99.8",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^6.0.1",
     "webpack-dev-server": "^5.2.1",
     "webpack-merge": "^6.0.1"
   },
   "resolutions": {
+    "sass": "1.79.6",
     "string-width": "^4.2.3"
   },
   "peerDependencies": {
-    "preact": "^10.25.1"
+    "preact": "^10.26.6"
   },
   "scripts": {
     "build:clean": "rimraf build; mkdir -p build",

package/src/javascripts/core/config.types.ts

@@ -104,6 +104,7 @@ export type Config = Partial<Omit<ChannelConfig, 'preChat'>> & {
   connectWhenInView: boolean
   visibilityCallback?: VisibilityCallback
   errorCallback?: ErrorCallback
+  alwaysShowEntryLabel?: boolean
   api: ApiConfig
   appContainerClassNames?: string[] | ((_config: Config) => string[])
   zIndex?: number

package/src/javascripts/core/domains/config/slice.ts

@@ -7,6 +7,7 @@ import type { ChannelEvent } from 'domains/store/store.types'
 
 export const initialConfigState: Config = {
   ...defaultConfig,
+  alwaysShowEntryLabel: false,
   api: {
     domain: '',
     key: '',
@@ -37,6 +38,7 @@ export const initialConfigState: Config = {
 }
 
 const configKeys: (keyof Config)[] = [
+  'alwaysShowEntryLabel',
   'hideOnNoUserResponse',
   'connectWhenInView',
   'showDisclaimer',

package/src/javascripts/core/domains/store/slice.ts

@@ -141,7 +141,6 @@ export const calculateNewEntryMeta = (
     ...entryMeta,
     active: newActive,
     optionsOverride: {
-      ...(entryMeta.optionsOverride || {}),
       ...(type ? { [type]: options } : {}),
     },
     actions,

package/src/javascripts/core/ui/components/conversation/conversation.tsx

@@ -79,7 +79,11 @@ const Conversation = () => {
       <div className={className('chat__body')}>
         <div className={className('conversation__container')}>
           <PrivacyDisclaimer />
-          <ol className={className('conversation')}>
+          <ol
+            className={className('conversation')}
+            role="log"
+            aria-label={t('chat.srLabel')}
+          >
             <ComponentFilter>
               <Events />
             </ComponentFilter>

package/src/javascripts/core/ui/components/core/seamly-new-notifications.ts

@@ -1,58 +1,11 @@
-import { useEffect, useMemo, useRef } from 'preact/hooks'
-import { newMessageScreenReaderWait } from 'config'
+import { useEffect } from 'preact/hooks'
 import { useI18n } from 'domains/i18n/hooks'
-import { useVisibility } from 'domains/visibility/hooks'
-import {
-  useEvents,
-  useLiveRegion,
-  useSeamlyIsHistoryLoaded,
-} from 'ui/hooks/seamly-hooks'
-import { debounce } from 'ui/utils/general-utils'
+import { useLiveRegion, useSeamlyIsHistoryLoaded } from 'ui/hooks/seamly-hooks'
 
 const SeamlyNewNotifications = () => {
   const { t } = useI18n()
-  const events = useEvents()
-  const previousEventCount = useRef(0)
-  const previousServerEventCount = useRef(0)
   const isHistoryLoaded = useSeamlyIsHistoryLoaded()
   const { sendPolite } = useLiveRegion()
-  const { isOpen } = useVisibility()
-  const prevIsOpen = useRef(null)
-  const debounceFunc = useRef<
-    ((_runInstant?: boolean | undefined) => void) | null
-  >(null)
-
-  const notifyUnread = useMemo(() => {
-    return debounce((eventArray) => {
-      const serverEventCount = eventArray.filter(
-        ({ payload }) => !payload.fromClient && !payload.fromHistory,
-      ).length
-      if (serverEventCount > previousServerEventCount.current) {
-        sendPolite(
-          t('message.srNewEventCount', {
-            newCount: serverEventCount - previousServerEventCount.current,
-          }),
-        )
-        previousServerEventCount.current = serverEventCount
-      }
-    }, newMessageScreenReaderWait)
-  }, [sendPolite, t])
-
-  useEffect(() => {
-    if (events.length > previousEventCount.current) {
-      if (isOpen) {
-        debounceFunc.current = notifyUnread(events)
-      }
-      previousEventCount.current = events.length
-    }
-  }, [events, notifyUnread, isOpen])
-
-  useEffect(() => {
-    if (prevIsOpen.current && !isOpen && debounceFunc.current) {
-      debounceFunc.current(true)
-      debounceFunc.current = null
-    }
-  }, [isOpen])
 
   useEffect(() => {
     if (isHistoryLoaded) {

package/src/javascripts/core/ui/components/entry/text-entry/hooks.ts

@@ -1,5 +1,6 @@
 import { useEffect, useMemo } from 'preact/hooks'
 import { maxCharacterSrDebounceDelay, maxCharacterWarningLimit } from 'config'
+import { useConfig } from 'domains/config/hooks'
 import { useFormControl } from 'domains/forms/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useAppDispatch } from 'domains/store'
@@ -62,6 +63,7 @@ export const useEntryTextTranslation = (controlName: 'textMessageEntry') => {
     entryMeta: { optionsOverride },
   } = useSeamlyStateContext()
 
+  const { alwaysShowEntryLabel } = useConfig()
   const { t } = useI18n()
 
   const placeholder: string = useMemo(
@@ -89,8 +91,11 @@ export const useEntryTextTranslation = (controlName: 'textMessageEntry') => {
   )
 
   const labelClass = useMemo(
-    () => (optionsOverride?.text?.label ? 'label' : 'visually-hidden'),
-    [optionsOverride?.text?.label],
+    () =>
+      alwaysShowEntryLabel === true || optionsOverride?.text?.label
+        ? 'label'
+        : 'visually-hidden',
+    [alwaysShowEntryLabel, optionsOverride?.text?.label],
   )
 
   return { placeholder, label, labelClass }

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

@@ -9,6 +9,7 @@ import { className } from 'lib/css'
 import Suggestions from 'ui/components/suggestions'
 import { useSeamlyAppContainerClassNames } from 'ui/hooks/component-helper-hooks'
 import { useSeamlyLayoutMode } from 'ui/hooks/seamly-state-hooks'
+import { useGeneratedId } from 'ui/hooks/utility-hooks'
 
 const Chat = forwardRef<
   HTMLElement,
@@ -18,6 +19,7 @@ const Chat = forwardRef<
   const { namespace, layoutMode } = useConfig()
   const { isInline } = useSeamlyLayoutMode()
   const appContainerClassNames = useSeamlyAppContainerClassNames()
+  const headingId = useGeneratedId()
   const userHasResponded = useUserHasResponded()
   const { t } = useI18n()
 
@@ -55,8 +57,15 @@ const Chat = forwardRef<
         onKeyDown={onKeyDownHandler}
         tabIndex={-1}
         ref={forwardedRef}
-        aria-label={t('chat.srLabel')}
+        role={layoutMode === 'window' ? 'dialog' : undefined}
+        aria-labelledby={headingId}
       >
+        <h2
+          className={className('chat__title', 'visually-hidden')}
+          id={headingId}
+        >
+          {t('chat.srLabel')}
+        </h2>
         <div className={className('chat-wrapper')}>{children}</div>
         {layoutMode === 'inline' && isOpen && <Suggestions isAside={true} />}
       </section>

package/src/javascripts/core/ui/components/options/transcript/transcript-form.tsx

@@ -11,6 +11,7 @@ export default function TranscriptForm({ controlName, describedById }) {
         id="email-id"
         name={controlName}
         type="email"
+        autocomplete="email"
         className={className('transcript__input')}
         aria-describedby={describedById}
         labelClass={className('label')}

package/src/stylesheets/2-tools/_functions.scss

@@ -2,7 +2,7 @@
 
 /** SET TEXT COLOR */
 @function set-text-color($color) {
-  @if color.lightness($color) > 66.66 {
+  @if color.channel($color, 'lightness', $space: hsl) > 66.66 {
     @return $grey-e;
   } @else {
     @return $white;
@@ -11,7 +11,7 @@
 
 /** SET BORDER COLOR */
 @function set-border-color($color) {
-  @if color.lightness($color) > 66.66 {
+  @if color.channel($color, 'lightness', $space: hsl) > 66.66 {
     @return $grey-c;
   } @else {
     @return $white;