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

package/build/dist/lib/utils.min.js.LICENSE.txt

@@ -0,0 +1,48 @@
+/*!
+* focus-trap 7.1.0
+* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
+*/
+
+/*!
+* tabbable 6.0.1
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

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

package/src/javascripts/domains/translations/components/options-dialog/translation-option.tsx

@@ -5,6 +5,7 @@ import { className } from 'lib/css'
 type TranslationOptionProps = {
   label: string
   checked: boolean
+  description?: string
   onChange: () => void
   id: string
 }
@@ -12,24 +13,28 @@ type TranslationOptionProps = {
 const TranslationOption: FC<TranslationOptionProps> = ({
   label,
   checked,
+  description,
   onChange,
   id,
 }) => (
-  <li className={className('translation-options--item')}>
-    <label>
-      <input
-        id={id}
-        type="checkbox"
-        value={label}
-        checked={checked}
-        className={className('visually-hidden')}
-        onChange={onChange}
-        name="language"
-      />
-      <span className={className('translation-options--icon-container')}>
-        {checked ? <Icon alt={label} name="check" size="16" /> : null}
-      </span>
-      {label}
+  <li
+    className={className('translation-options__item', {
+      'translation-options__item--checked': checked,
+    })}
+  >
+    <input
+      id={id}
+      type="radio"
+      value={label}
+      checked={checked}
+      className={className('visually-hidden')}
+      onChange={onChange}
+      name="language"
+    />
+
+    <label htmlFor={id}>
+      <Icon alt="" name="check" size="16" />
+      {label} {description && <span>({description})</span>}
     </label>
   </li>
 )

package/src/javascripts/domains/translations/components/options-dialog/translation-options.tsx

@@ -60,11 +60,6 @@ const TranslationOptions: FC<TranslationOptionsProps> = ({
       {sortedLanguages.map((language, idx) => {
         const isOriginal = idx === 0
 
-        const originalLabel = isOriginal
-          ? ` (${t('translations.settings.original')})`
-          : ''
-        const label = `${language.nativeName}${originalLabel}`
-
         const checked =
           currentLocale === language.locale || (!currentLocale && isOriginal)
 
@@ -72,8 +67,9 @@ const TranslationOptions: FC<TranslationOptionsProps> = ({
           <TranslationOption
             key={language.locale}
             id={language.locale}
-            label={label}
+            label={language.nativeName}
             checked={checked}
+            description={isOriginal && t('translations.settings.original')}
             onChange={handleChange(language)}
           />
         )

package/src/javascripts/index.ts

@@ -20,8 +20,6 @@ export { visibilityStates } from 'domains/visibility/constants'
 export { useVisibility as useSeamlyVisibility } from 'domains/visibility/hooks'
 export { calculateVisibility } from 'domains/visibility/utils'
 // Used by: StyleGuide
-export { Provider as SeamlyStoreProvider } from 'react-redux'
-// Used by: StyleGuide
 export { default as ComponentFilter } from 'ui/components/conversation/component-filter'
 // Used by: Client
 export { default as Conversation } from 'ui/components/conversation/conversation'

package/src/javascripts/package/components.js

@@ -1,3 +1,17 @@
+import Conversation from 'ui/components/conversation/conversation'
+import EventParticipant from 'ui/components/conversation/event/event-participant'
+import Text from 'ui/components/conversation/event/text'
+import MessageContainer from 'ui/components/conversation/message-container'
+import DeprecatedToggleButton from 'ui/components/entry/deprecated-toggle-button'
+import EntryContainer from 'ui/components/entry/entry-container'
+import AgentInfo from 'ui/components/layout/agent-info'
+import Chat from 'ui/components/layout/chat'
+import ChatFrame from 'ui/components/layout/chat-frame'
+import Header from 'ui/components/layout/header'
+import Icon from 'ui/components/layout/icon'
+import View from 'ui/components/view'
+import DeprecatedView from 'ui/components/view/deprecated-view'
+
 export {
   AgentInfo,
   Chat,
@@ -12,4 +26,4 @@ export {
   DeprecatedToggleButton,
   DeprecatedView,
   View,
-} from '@seamly/web-ui'
+}

package/src/javascripts/package/config.js

@@ -1 +1 @@
-export { visibilityStates } from '@seamly/web-ui'
+export { visibilityStates } from 'domains/visibility/constants'

package/src/javascripts/package/contexts.js

@@ -1,5 +1,7 @@
-export {
+import {
   SeamlyApiContext,
   SeamlyEventBusContext,
-  SeamlyLiveRegionContext,
-} from '@seamly/web-ui'
+} from 'ui/components/core/seamly-api-context'
+import { SeamlyLiveRegionContext } from 'ui/components/core/seamly-live-region-context'
+
+export { SeamlyApiContext, SeamlyEventBusContext, SeamlyLiveRegionContext }

package/src/javascripts/package/hooks.js

@@ -1,3 +1,21 @@
+import { useChoicePrompt } from 'ui/components/conversation/event/choice-prompt'
+import {
+  useSeamlyEventStream,
+  useSeamlyIdleDetachCountdown,
+  useSeamlyMessageContainerClassNames,
+  useSeamlyOptions,
+} from 'ui/hooks/seamly-hooks'
+import { useEvents } from 'ui/hooks/seamly-state-hooks'
+import useSeamlyChat from 'ui/hooks/use-seamly-chat'
+import useSeamlyCommands from 'ui/hooks/use-seamly-commands'
+import { useGeneratedId } from 'ui/hooks/utility-hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import {
+  useTranslatedEventData,
+  useTranslations,
+  useTranslationsContainer,
+} from 'domains/translations/hooks'
+
 export {
   useChoicePrompt,
   useEvents,
@@ -12,4 +30,4 @@ export {
   useTranslatedEventData,
   useTranslations,
   useTranslationsContainer,
-} from '@seamly/web-ui'
+}

package/src/javascripts/package/utils.js

@@ -1,3 +1,15 @@
+import { eventTypes } from 'ui/utils/seamly-utils'
+import { calculateVisibility } from 'domains/visibility/utils'
+import { className } from 'lib/css'
+import Engine from 'lib/engine'
+import ExternalApi from 'lib/external-api'
+import { randomId } from 'lib/id'
+
+export {
+  getSearchParamsByKeys,
+  initResetSearchParams,
+  replaceSearchParams,
+} from 'lib/url-helpers'
 export {
   calculateVisibility,
   className,
@@ -5,9 +17,4 @@ export {
   eventTypes,
   ExternalApi,
   randomId,
-} from '@seamly/web-ui'
-export {
-  getSearchParamsByKeys,
-  initResetSearchParams,
-  replaceSearchParams,
-} from 'lib/url-helpers'
+}

package/src/javascripts/style-guide/components/app.js

@@ -1,5 +1,5 @@
-import { randomId } from '@seamly/web-ui'
 import { useCallback, useEffect, useState } from 'preact/hooks'
+import { randomId } from 'lib/id'
 import { getSearchParamsByKeys, getUrlSearchParams } from 'lib/url-helpers'
 import StyleGuideLinks from 'style-guide/components/links'
 import StyleGuideView from 'style-guide/components/view'

package/src/javascripts/style-guide/components/static-core.js

@@ -1,13 +1,13 @@
 import { configureStore } from '@reduxjs/toolkit'
+import { useMemo, useRef } from 'preact/hooks'
+import { Provider } from 'react-redux'
+import ComponentFilter from 'ui/components/conversation/component-filter'
 import {
-  ComponentFilter,
   SeamlyApiContext,
   SeamlyEventBusContext,
-  SeamlyLiveRegionContext,
-  SeamlyStoreProvider,
-} from '@seamly/web-ui'
-import { useMemo, useRef } from 'preact/hooks'
+} from 'ui/components/core/seamly-api-context'
 import SeamlyChat from 'ui/components/core/seamly-chat'
+import { SeamlyLiveRegionContext } from 'ui/components/core/seamly-live-region-context'
 import appReducer from 'domains/app/slice'
 import configReducer, {
   setConfig,
@@ -39,6 +39,8 @@ const bareApi = {
     },
   },
   hasConversation: () => false,
+  connected: false,
+  ready: false,
 }
 
 const SeamlyStaticCore = ({
@@ -118,7 +120,7 @@ const SeamlyStaticCore = ({
 
   return (
     state && (
-      <SeamlyStoreProvider store={store}>
+      <Provider store={store}>
         <SeamlyEventBusContext.Provider value={eventBusRef.current}>
           <SeamlyLiveRegionContext.Provider value={liveMsgRef.current}>
             <SeamlyApiContext.Provider value={bareApi}>
@@ -128,7 +130,7 @@ const SeamlyStaticCore = ({
             </SeamlyApiContext.Provider>
           </SeamlyLiveRegionContext.Provider>
         </SeamlyEventBusContext.Provider>
-      </SeamlyStoreProvider>
+      </Provider>
     )
   )
 }

package/src/javascripts/style-guide/components/view.js

@@ -1,5 +1,5 @@
-import { View } from '@seamly/web-ui'
 import { useEffect, useState } from 'preact/hooks'
+import View from 'ui/components/view'
 import { timeout } from 'ui/hooks/focus-helper-hooks'
 import StyleGuideStaticCore from './static-core'
 

package/src/javascripts/style-guide/states.js

@@ -1,9 +1,7 @@
-import {
-  SeamlyGeneralError,
-  SeamlyOfflineError,
-  randomId,
-  visibilityStates,
-} from '@seamly/web-ui'
+import SeamlyGeneralError from 'api/errors/seamly-general-error'
+import SeamlyOfflineError from 'api/errors/seamly-offline-error'
+import { visibilityStates } from 'domains/visibility/constants'
+import { randomId } from 'lib/id'
 import { addTranslationData } from './state-helpers'
 
 const baseState = {

package/src/javascripts/style-guide/style-guide-engine.js

@@ -1,5 +1,6 @@
-import { API, Engine } from '@seamly/web-ui'
+import { API } from 'api'
 import { render } from 'preact'
+import Engine from 'lib/engine'
 import StyleGuideApp from './components/app'
 
 class SeamlyStyleGuideInstance extends Engine {

package/src/javascripts/style-guide/style-guide-external-api.js

@@ -1,4 +1,4 @@
-import { ExternalApi } from '@seamly/web-ui'
+import ExternalApi from 'lib/external-api'
 import StyleGuideEngine from './style-guide-engine'
 
 class StyleGuideExternalApi extends ExternalApi {

package/src/javascripts/ui/components/conversation/event/chat-scroll/unread-messages-button.tsx

@@ -3,13 +3,16 @@ import ChatScrollContext from 'ui/components/conversation/event/chat-scroll/chat
 import Icon from 'ui/components/layout/icon'
 import InOutTransition from 'ui/components/widgets/in-out-transition'
 import { useI18n } from 'domains/i18n/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
 
 const UnreadMessagesButton = () => {
   const { scrollToRef, unreadIds } = useContext(ChatScrollContext)
+  const { isMinimized } = useVisibility()
   const { t } = useI18n()
+
   return (
-    <InOutTransition isActive={!!unreadIds.length}>
+    <InOutTransition isActive={!!unreadIds.length && !isMinimized}>
       <div className={className('unread-messages')}>
         <button
           type="button"

package/src/javascripts/ui/hooks/use-seamly-chat.js

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useRef } from 'preact/hooks'
 import { useDispatch, useSelector } from 'react-redux'
+import useSeamlyCommands from 'ui/hooks/use-seamly-commands'
 import { useI18n } from 'domains/i18n/hooks'
 import { setIsLoading } from 'domains/store/slice'
 import { useVisibility } from 'domains/visibility/hooks'
@@ -7,7 +8,6 @@ import { selectShowInlineView } from '../../domains/visibility/selectors'
 import { useLiveRegion } from './live-region-hooks'
 import { useSeamlyHasConversation } from './seamly-api-hooks'
 import { useEvents, useSeamlyLayoutMode } from './seamly-state-hooks'
-import useSeamlyCommands from './use-seamly-commands'
 
 const useSeamlyChat = () => {
   const events = useEvents()

package/src/stylesheets/3-chat/_chat.scss

@@ -112,6 +112,7 @@
   justify-content: center;
 
   &__scroll-area {
+    overscroll-behavior: contain;
     display: flex;
     position: relative;
     flex-direction: column;
@@ -119,7 +120,7 @@
     width: 100%;
     height: 100%;
     overflow-y: auto;
-    will-change: transform;
+    will-change: scroll-position;
   }
 
   &__header {
@@ -137,10 +138,6 @@
   padding: 0;
 }
 
-.#{$n}-chat--layout-window .#{$n}-chat__body {
-  overscroll-behavior: contain;
-}
-
 .#{$n}-chat__entry {
   position: relative;
   flex: 0 0 auto;

package/src/stylesheets/5-components/_options.scss

@@ -214,10 +214,6 @@
   }
 }
 
-.#{$n}-options__body div {
-  width: 100%;
-}
-
 .#{$n}-options__wrapper h3 {
   margin: 0;
   color: $brand2;

package/src/stylesheets/5-components/_translation-options.scss

@@ -6,7 +6,7 @@
   padding: 1px 0 0;
   list-style: none;
 
-  &--item {
+  &__item {
     color: $brand3;
     font-size: $fontsize-small;
 
@@ -25,15 +25,27 @@
       &:focus-within:has(input:focus-visible) {
         outline: -webkit-focus-ring-color auto 1px;
       }
+
+      > span {
+        margin-left: 0.5em;
+      }
+    }
+
+    .#{$n}-icon {
+      opacity: 0;
+    }
+
+    &--checked {
+      .#{$n}-icon {
+        opacity: 1;
+      }
     }
   }
 
-  &--icon-container {
+  .#{$n}-icon {
+    display: flex;
     width: $iconsize-small;
     height: $iconsize-small;
     margin-right: calc($spacer / 2);
-    .#{$n}-icon {
-      height: $iconsize-small;
-    }
   }
 }

package/src/stylesheets/7-deprecated/5-components/_options.scss

@@ -219,10 +219,6 @@
   }
 }
 
-.#{$n}-options__body div {
-  width: 100%;
-}
-
 .#{$n}-options__wrapper h3 {
   margin: 0;
   color: $brand2;

package/src/stylesheets/7-deprecated/5-components/_translation-options.scss

@@ -10,6 +10,16 @@
     color: $brand3;
     font-size: $fontsize-small;
 
+    > input[type='radio'] {
+      + label svg {
+        opacity: 0;
+      }
+
+      &:checked + label svg {
+        opacity: 1;
+      }
+    }
+
     > label {
       display: flex;
       align-items: center;
@@ -25,15 +35,15 @@
       &:focus-within:has(input:focus-visible) {
         outline: -webkit-focus-ring-color auto 1px;
       }
+
+      > span {
+        margin-left: 0.5em;
+      }
     }
   }
 
-  &--icon-container {
-    width: 16px;
-    height: 16px;
+  &--icon {
+    display: flex;
     margin-right: calc($spacer / 2);
-    .#{$n}-icon {
-      height: 16px;
-    }
   }
 }