@seamly/web-ui 21.0.2-beta.3 → 21.0.2-beta.5

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

@@ -1,5 +1,5 @@
 /*!
-* focus-trap 7.0.0
+* focus-trap 7.1.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "21.0.2-beta.3",
+  "version": "21.0.2-beta.5",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "module": "",
@@ -58,22 +58,23 @@
     "babel-loader": "^9.0.1",
     "babel-plugin-react-remove-properties": "^0.3.0",
     "copy-webpack-plugin": "^11.0.0",
+    "cypress": "^10.11.0",
     "cypress-file-upload": "^5.0.8",
+    "cypress-plugin-tab": "^1.0.5",
     "cypress-wait-until": "^1.7.2",
-    "cypress": "^10.11.0",
     "debug": "^4.3.4",
+    "eslint": "^8.27.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^27.1.3",
-    "eslint": "^8.27.0",
     "file-loader": "^6.2.0",
     "glob": "^8.0.3",
     "husky": "^8.0.1",
     "ignore-loader": "^0.1.2",
-    "jest-environment-jsdom": "^27.5.1",
     "jest": "^27.5.1",
+    "jest-environment-jsdom": "^27.5.1",
     "mini-css-extract-plugin": "^2.6.1",
     "postcss": "8",
     "preact": "^10.11.2",
@@ -86,11 +87,11 @@
     "ts-loader": "^9.4.1",
     "typescript": "^4.8.4",
     "url-loader": "^4.1.1",
+    "webpack": "^5.74.0",
     "webpack-bundle-analyzer": "^4.7.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1",
-    "webpack-merge": "^5.8.0",
-    "webpack": "^5.74.0"
+    "webpack-merge": "^5.8.0"
   },
   "peerDependencies": {
     "preact": "^10.11.2"

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

@@ -16,27 +16,28 @@ const TranslationOption: FC<TranslationOptionProps> = ({
   description,
   onChange,
   id,
-}) => (
-  <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"
-    />
+}) => {
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.code === 'Space' || e.code === 'Enter') {
+      e.preventDefault()
+      onChange()
+    }
+  }
 
-    <label htmlFor={id}>
+  return (
+    <li
+      className={className('translation-options__item')}
+      aria-selected={checked}
+      role="option"
+      tabIndex={0}
+      onClick={onChange}
+      onKeyDown={onKeyDown}
+      id={id}
+    >
       <Icon alt="" name="check" size="16" />
       {label} {description && <span>({description})</span>}
-    </label>
-  </li>
-)
+    </li>
+  )
+}
 
 export default TranslationOption

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

@@ -55,6 +55,8 @@ const TranslationOptions: FC<TranslationOptionsProps> = ({
   return (
     <ul
       aria-describedby={describedById}
+      role="listbox"
+      tabIndex={-1}
       className={className('translation-options')}
     >
       {sortedLanguages.map((language, idx) => {

package/src/javascripts/index.ts

@@ -20,6 +20,7 @@ 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'
 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/lib/external-api/index.js

@@ -51,7 +51,20 @@ class ExternalApi {
     })
   }
 
+  instanceInitializing(namespace) {
+    const instances = Object.keys(this._instances)
+
+    return (!namespace && instances.length > 0) || instances.includes(namespace)
+  }
+
   setContext(action, args) {
+    const { instance: namespace } = args
+    // Do not set this action in context if we are already initializing.
+    // If we do, it will not be sent to the server anymore (because it gets marked as 'handled').
+    if (this.instanceInitializing(namespace)) {
+      return false
+    }
+
     switch (action) {
       case 'setTopic':
         const { name } = args
@@ -118,11 +131,11 @@ class ExternalApi {
 
     // results will be an array containing the results of wether an instance has
     // handled the action or not
-    const results = instances.map((instance) => {
-      return !namespace || instance.namespace === namespace
+    const results = instances.map((instance) =>
+      !namespace || instance.namespace === namespace
         ? instance.execFunction(action, ...args)
-        : false
-    })
+        : false,
+    )
 
     // test if any of the instances has handled the action
     return results.some(Boolean)

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

@@ -1,13 +1,12 @@
 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,
-} 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'
+  SeamlyLiveRegionContext,
+  SeamlyStoreProvider,
+} from '@seamly/web-ui'
+import { useMemo, useRef } from 'preact/hooks'
 import appReducer from 'domains/app/slice'
 import configReducer, {
   setConfig,
@@ -120,17 +119,15 @@ const SeamlyStaticCore = ({
 
   return (
     state && (
-      <Provider store={store}>
+      <SeamlyStoreProvider store={store}>
         <SeamlyEventBusContext.Provider value={eventBusRef.current}>
           <SeamlyLiveRegionContext.Provider value={liveMsgRef.current}>
             <SeamlyApiContext.Provider value={bareApi}>
-              <SeamlyChat>
-                <ComponentFilter>{children}</ComponentFilter>
-              </SeamlyChat>
+              <ComponentFilter>{children}</ComponentFilter>
             </SeamlyApiContext.Provider>
           </SeamlyLiveRegionContext.Provider>
         </SeamlyEventBusContext.Provider>
-      </Provider>
+      </SeamlyStoreProvider>
     )
   )
 }

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

@@ -1,7 +1,7 @@
+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'
+import StyleGuideStaticCore from 'style-guide/components/static-core'
 
 const StyleGuideView = ({
   state,

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

@@ -2,44 +2,27 @@
   width: 100%;
   margin: 0;
 
-  // 1px needed for the outline focus ring
-  padding: 1px 0 0;
+  // Top padding needed for the outline focus ring
+  padding: $spacer * 0.05 0 0;
   list-style: none;
+}
 
-  &__item {
-    color: $brand3;
-    font-size: $fontsize-small;
-
-    > label {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding: calc($spacer * 0.25) 0;
-      font-weight: $fontweight-bold;
-
-      &:hover {
-        cursor: pointer;
-      }
-
-      // Only show a ring when we have focused via keyboard
-      &:focus-within:has(input:focus-visible) {
-        outline: -webkit-focus-ring-color auto 1px;
-      }
-
-      > span {
-        margin-left: 0.5em;
-      }
-    }
-
-    .#{$n}-icon {
-      opacity: 0;
-    }
+.#{$n}-translation-options__item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: calc($spacer * 0.25) 0;
+  color: $brand3;
+  font-size: $fontsize-small;
+  font-weight: $fontweight-bold;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: -webkit-focus-ring-color auto 1px;
+  }
 
-    &--checked {
-      .#{$n}-icon {
-        opacity: 1;
-      }
-    }
+  > span {
+    margin-left: 0.5em;
   }
 
   .#{$n}-icon {
@@ -47,5 +30,10 @@
     width: $iconsize-small;
     height: $iconsize-small;
     margin-right: calc($spacer / 2);
+    opacity: 0;
+  }
+
+  &[aria-selected='true'] .#{$n}-icon {
+    opacity: 1;
   }
 }

package/src/stylesheets/6-default-implementation/_hover.scss

@@ -161,5 +161,9 @@
         border-color: $interaction-dark;
       }
     }
+
+    .#{$n}-translation-options__item:hover {
+      color: $interaction-dark;
+    }
   }
 }