@seamly/web-ui 20.8.1 → 21.0.0

package/src/javascripts/ui/components/options/{options-frame.js → options-frame.tsx}

@@ -1,60 +1,88 @@
-import { useRef, useEffect } from 'preact/hooks'
+import { VNode } from 'preact'
+import { FC } from 'preact/compat'
+import { MutableRef, useCallback, useEffect } from 'preact/hooks'
 import Icon from 'ui/components/layout/icon'
 import {
   useGeneratedId,
   useOptionButton,
   useSeamlyOptions,
 } from 'ui/hooks/seamly-hooks'
-import { className } from 'lib/css'
+import useClickOutside from 'ui/hooks/use-click-outside'
 import { focusElement } from 'ui/utils/general-utils'
+import { className } from 'lib/css'
+
+export type FramePosition = {
+  vertical: 'top' | 'bottom'
+  horizontal: 'left' | 'right'
+}
 
-const OptionsFrame = ({
+type OptionsFrameProps = {
+  className?: string
+  onCancel?: () => void
+  headingText: string
+  description?: VNode
+  descriptionId?: string
+  cancelButtonText?: string
+  cancelButtonRef?: MutableRef<HTMLElement>
+  disableButtonFocusing?: boolean
+  position: FramePosition
+}
+
+const OptionsFrame: FC<OptionsFrameProps> = ({
   className: givenClassName,
   children,
   onCancel,
   headingText,
+  description,
+  descriptionId,
   cancelButtonText,
-  disableButtonFocusing,
   cancelButtonRef,
-  position = 'right',
+  disableButtonFocusing,
+  position = {
+    horizontal: 'left',
+    vertical: 'top',
+  },
 }) => {
-  const container = useRef(null)
   const mainHeadingId = useGeneratedId()
   // @todo Lift this from the "options frame" into something reusable
   // when you're not using options
   const { hideOption } = useSeamlyOptions()
   const { focusButton } = useOptionButton()
 
-  useEffect(() => {
-    focusElement(container.current)
-  }, [])
-
-  const closePanel = () => {
+  const closePanel = useCallback(() => {
     hideOption()
     if (!disableButtonFocusing) {
       focusButton()
     }
-  }
+  }, [disableButtonFocusing, focusButton, hideOption])
 
-  const onCancelHandler = () => {
+  const onCancelHandler = useCallback(() => {
     if (onCancel) {
       onCancel()
     }
     closePanel()
-  }
+  }, [closePanel, onCancel])
+
+  const container = useClickOutside(onCancelHandler)
+
+  useEffect(() => {
+    focusElement(container.current)
+  }, [container])
 
   return (
     <section
       className={className(
         'options',
         {
-          'options--right': position !== 'left',
-          'options--left': position === 'left',
+          'options--right': position.horizontal === 'right',
+          'options--left': position.horizontal === 'left',
+          'options--top': position.vertical === 'top',
+          'options--bottom': position.vertical === 'bottom',
         },
         givenClassName,
       )}
       aria-labelledby={mainHeadingId}
-      tabIndex="-1"
+      tabIndex={-1}
       ref={container}
     >
       <div className={className('options__body')}>
@@ -72,9 +100,15 @@ const OptionsFrame = ({
             }
           }}
         >
-          <Icon name="close" size="16" />
+          <Icon name="close" size="16" alt="" />
           <span>{cancelButtonText}</span>
         </button>
+
+        {description ? (
+          <p className={className('options__description')} id={descriptionId}>
+            {description}
+          </p>
+        ) : null}
         <div className={className('options__wrapper')}>{children}</div>
       </div>
     </section>

package/src/javascripts/ui/components/options/transcript/index.js

@@ -1,17 +1,16 @@
 import { useCallback, useMemo, useState } from 'preact/hooks'
-import { useI18n } from 'domains/i18n/hooks'
 import OptionsFrame from 'ui/components/options/options-frame'
-import { className } from 'lib/css'
 import {
   useGeneratedId,
   useOptionButton,
   useSeamlyCommands,
   useSeamlyOptions,
 } from 'ui/hooks/seamly-hooks'
-import { actionTypes } from 'ui/utils/seamly-utils'
-import FormProvider from 'domains/forms/provider'
 import { getValidator } from 'ui/utils/form-utils'
+import { actionTypes } from 'ui/utils/seamly-utils'
 import { isEmailString, isNotEmptyString } from 'ui/utils/validations'
+import FormProvider from 'domains/forms/provider'
+import { useI18n } from 'domains/i18n/hooks'
 import TranscriptForm from './transcript-form'
 
 const formId = 'sendTranscript'
@@ -67,13 +66,13 @@ const Transcript = () => {
       className={errorClass}
       headingText={t('options.sendTranscript.title')}
       cancelButtonText={t('options.cancelButtonText')}
+      description={t('options.sendTranscript.description')}
+      descriptionId={transcriptDescriptionId}
+      position={{
+        vertical: 'top',
+        horizontal: 'right',
+      }}
     >
-      <p
-        className={className('options__description')}
-        id={transcriptDescriptionId}
-      >
-        {t('options.sendTranscript.description')}
-      </p>
       <FormProvider
         formId={formId}
         onSubmit={handleSubmit}

package/src/javascripts/ui/components/options/transcript/transcript-form.js

@@ -1,7 +1,7 @@
-import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n/hooks'
 import Form from 'ui/components/form-controls/form'
 import Input from 'ui/components/form-controls/input'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 
 export default function TranscriptForm({ controlName, describedById }) {
   const { t } = useI18n()

package/src/javascripts/ui/components/suggestions/index.js

@@ -1,11 +1,3 @@
-import { useUserHasResponded } from 'domains/app/hooks'
-import { useConfig } from 'domains/config/hooks'
-import { useI18n } from 'domains/i18n/hooks'
-import { useInterrupt } from 'domains/interrupt/hooks'
-import { useTranslatedEventData } from 'domains/translations/hooks'
-import { visibilityStates } from 'domains/visibility/constants'
-import { useVisibility } from 'domains/visibility/hooks'
-import { className } from 'lib/css'
 import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks'
 import SuggestionsList from 'ui/components/suggestions/suggestions-list'
 import InOutTransition, {
@@ -23,6 +15,14 @@ import useSeamlyResumeConversationPrompt from 'ui/hooks/use-seamly-resume-conver
 import { useGeneratedId } from 'ui/hooks/utility-hooks'
 import { runIfElementContainsOrHasFocus } from 'ui/utils/general-utils'
 import { actionTypes } from 'ui/utils/seamly-utils'
+import { useUserHasResponded } from 'domains/app/hooks'
+import { useConfig } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useTranslatedEventData } from 'domains/translations/hooks'
+import { visibilityStates } from 'domains/visibility/constants'
+import { useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
 
 const Suggestions = ({ isAside = false }) => {
   // generic hooks

package/src/javascripts/ui/components/suggestions/suggestions-item.js

@@ -1,4 +1,4 @@
-import { useMemo, useCallback } from 'preact/hooks'
+import { useCallback, useMemo } from 'preact/hooks'
 import { className } from '../../../lib/css'
 import Icon from '../layout/icon'
 

package/src/javascripts/{domains/translations/components/chat-status.js → ui/components/translation-chat-status/index.tsx}

@@ -1,41 +1,40 @@
 import { useCallback } from 'preact/hooks'
 import ChatStatus from 'ui/components/chat-status'
+import { useSkiplinkTargetFocusing } from 'ui/hooks/focus-helper-hooks'
 import { useI18n } from 'domains/i18n/hooks'
-import { useSkiplinkTargetFocusing } from 'ui/hooks/seamly-hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
 import {
-  useTranslationsContainer,
-  useTranslations,
   useLocaleNativeName,
+  useTranslations,
+  useTranslationsContainer,
 } from 'domains/translations/hooks'
-import { useInterrupt } from 'domains/interrupt/hooks'
 
-export default function TranslationsChatStatus() {
+export default function TranslationChatStatus() {
   const { t } = useI18n()
   const { id } = useTranslationsContainer()
   const { hasInterrupt } = useInterrupt()
-
-  const { isActive, disableTranslations, currentLocale } = useTranslations()
+  const { disableTranslations, currentLocale } = useTranslations()
   const localeNativeName = useLocaleNativeName(currentLocale)
-
   const focusSkiplinkTarget = useSkiplinkTargetFocusing()
 
+  const label = t('translations.status.label', { language: localeNativeName })
+
   const handleClickStop = useCallback(() => {
     disableTranslations()
     focusSkiplinkTarget()
   }, [disableTranslations, focusSkiplinkTarget])
 
-  if (!isActive || hasInterrupt) {
+  if (hasInterrupt) {
     return null
   }
 
   return (
     <ChatStatus
-      type="translations"
+      handleClose={handleClickStop}
+      title={label}
       id={id}
-      label={t('translations.status.label', { language: localeNativeName })}
-      onButtonClick={handleClickStop}
-      buttonText={t('translations.status.stopText')}
-      srButtonText={t('translations.status.srStopText')}
+      closeButtonText={t('translations.status.stopText')}
+      srCloseButtonText={t('translations.status.srStopText')}
     />
   )
 }

package/src/javascripts/ui/components/translation-proposal/index.tsx

@@ -0,0 +1,36 @@
+import ChatStatus from 'ui/components/chat-status'
+import ChatStatusAction from 'ui/components/chat-status/chat-status-action'
+import {
+  useTranslationProposal,
+  useTranslationsContainer,
+} from 'domains/translations/hooks'
+
+export default function TranslationProposal() {
+  const {
+    showProposal,
+    translationProposal,
+    dismissTranslationProposal,
+    activateTranslationProposal,
+  } = useTranslationProposal()
+
+  const { id } = useTranslationsContainer()
+
+  if (!showProposal) {
+    return null
+  }
+
+  return (
+    <ChatStatus
+      handleClose={dismissTranslationProposal}
+      srCloseButtonText={translationProposal.srDismissButtonText}
+      id={id}
+      title={translationProposal.titleLabel}
+    >
+      <ChatStatusAction
+        handleClick={activateTranslationProposal}
+        icon="newTranslation"
+        title={translationProposal.buttonLabel}
+      />
+    </ChatStatus>
+  )
+}

package/src/javascripts/ui/components/view/app-view.js

@@ -1,18 +1,13 @@
-import Chat from '../layout/chat'
-import Interrupt from '../layout/interrupt'
 import Conversation from '../conversation/conversation'
-import EntryContainer from '../entry/entry-container'
+import Chat from '../layout/chat'
 import ChatFrame from '../layout/chat-frame'
-import useSeamlyChat from '../../hooks/use-seamly-chat'
+import Interrupt from '../layout/interrupt'
 
 const AppView = () => {
-  useSeamlyChat()
-
   return (
     <Chat>
       <ChatFrame interruptComponent={Interrupt}>
         <Conversation />
-        <EntryContainer />
       </ChatFrame>
     </Chat>
   )

package/src/javascripts/ui/components/view/deprecated-view.js

@@ -1,13 +1,12 @@
-import { useVisibility, useShowInlineView } from 'domains/visibility/hooks'
-import DeprecatedAppFrame from '../layout/deprecated-app-frame'
-import ChatFrame from '../layout/chat-frame'
+import ChatFrame from 'ui/components/layout/deprecated-chat-frame'
+import { useShowInlineView, useVisibility } from 'domains/visibility/hooks'
+import { useSeamlyChat } from '../../hooks/seamly-hooks'
+import Conversation from '../conversation/conversation'
+import DeprecatedToggleButton from '../entry/deprecated-toggle-button'
 import AgentInfo from '../layout/agent-info'
+import DeprecatedAppFrame from '../layout/deprecated-app-frame'
 import Header from '../layout/header'
-import Conversation from '../conversation/conversation'
-import EntryContainer from '../entry/entry-container'
 import Interrupt from '../layout/interrupt'
-import { useSeamlyChat } from '../../hooks/seamly-hooks'
-import DeprecatedToggleButton from '../entry/deprecated-toggle-button'
 
 const ShowInlineView = ({ children }) => {
   const { showInlineView, containerRef } = useShowInlineView()
@@ -16,8 +15,8 @@ const ShowInlineView = ({ children }) => {
 }
 
 const DeprecatedView = () => {
-  const { isVisible } = useVisibility()
-  const { openChat, closeChat } = useSeamlyChat()
+  useSeamlyChat()
+  const { isVisible, openChat, closeChat } = useVisibility()
 
   return (
     isVisible && (
@@ -29,7 +28,6 @@ const DeprecatedView = () => {
           </Header>
           <ChatFrame interruptComponent={Interrupt}>
             <Conversation />
-            <EntryContainer />
           </ChatFrame>
         </DeprecatedAppFrame>
       </ShowInlineView>

package/src/javascripts/ui/components/view/index.js

@@ -1,13 +1,13 @@
-import { useUserHasResponded } from 'domains/app/hooks'
 import { useCallback, useMemo } from 'preact/hooks'
-import { useVisibility } from 'domains/visibility/hooks'
-import { useSeamlyContainerElement } from 'ui/hooks/focus-helper-hooks'
-import { useConfig } from 'domains/config/hooks'
-import { useSeamlyAppContainerClassNames } from 'ui/hooks/component-helper-hooks'
-import { useI18n } from 'domains/i18n/hooks'
 import AppView from 'ui/components/view/app-view'
 import InlineView from 'ui/components/view/inline-view'
 import WindowView from 'ui/components/view/window-view'
+import { useSeamlyAppContainerClassNames } from 'ui/hooks/component-helper-hooks'
+import { useSeamlyContainerElement } from 'ui/hooks/focus-helper-hooks'
+import { useUserHasResponded } from 'domains/app/hooks'
+import { useConfig } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
 
 const ViewComponentsMap = {

package/src/javascripts/ui/components/view/inline-view.js

@@ -1,12 +1,10 @@
-import { className } from 'lib/css'
-import { useVisibility, useShowInlineView } from 'domains/visibility/hooks'
 import { useInterrupt } from 'domains/interrupt/hooks'
-import Chat from '../layout/chat'
-import Interrupt from '../layout/interrupt'
+import { useShowInlineView, useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
 import Conversation from '../conversation/conversation'
-import EntryContainer from '../entry/entry-container'
+import Chat from '../layout/chat'
 import ChatFrame from '../layout/chat-frame'
-import useSeamlyChat from '../../hooks/use-seamly-chat'
+import Interrupt from '../layout/interrupt'
 import PreChatMessages from '../layout/pre-chat-messages'
 import Suggestions from '../suggestions'
 import InOutTransition, {
@@ -14,7 +12,6 @@ import InOutTransition, {
 } from '../widgets/in-out-transition'
 
 const InlineView = () => {
-  useSeamlyChat()
   const { showInlineView, containerRef } = useShowInlineView()
 
   const { isOpen } = useVisibility()
@@ -49,7 +46,6 @@ const InlineView = () => {
           {showInlineView && (
             <ChatFrame interruptComponent={Interrupt}>
               {isOpen && <Conversation />}
-              <EntryContainer />
             </ChatFrame>
           )}
         </Chat>

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

@@ -1,7 +1,7 @@
+import { useCallback } from 'preact/hooks'
+import Icon from 'ui/components/layout/icon'
 import { useI18n } from 'domains/i18n/hooks'
 import { className } from 'lib/css'
-import Icon from 'ui/components/layout/icon'
-import { useCallback } from 'preact/hooks'
 
 const CollapseButton = ({ onClick }) => {
   const { t } = useI18n()

package/src/javascripts/ui/components/view/window-view/index.js

@@ -1,25 +1,21 @@
-import { useUserHasResponded } from 'domains/app/hooks'
 import { useMemo } from 'preact/hooks'
+import Conversation from 'ui/components/conversation/conversation'
+import Text from 'ui/components/conversation/event/text'
+import Chat from 'ui/components/layout/chat'
+import ChatFrame from 'ui/components/layout/chat-frame'
+import Interrupt from 'ui/components/layout/interrupt'
+import PreChatMessages from 'ui/components/layout/pre-chat-messages'
+import InOutTransition, {
+  transitionStartStates,
+} from 'ui/components/widgets/in-out-transition'
+import { useUserHasResponded } from 'domains/app/hooks'
 import { useI18n } from 'domains/i18n/hooks'
 import { useVisibility } from 'domains/visibility/hooks'
 import { className } from 'lib/css'
-import { useSeamlyChat } from '../../../hooks/seamly-hooks'
-import Conversation from '../../conversation/conversation'
-import Text from '../../conversation/event/text'
-import EntryContainer from '../../entry/entry-container'
-import Chat from '../../layout/chat'
-import ChatFrame from '../../layout/chat-frame'
-import Interrupt from '../../layout/interrupt'
-import PreChatMessages from '../../layout/pre-chat-messages'
-import InOutTransition, {
-  transitionStartStates,
-} from '../../widgets/in-out-transition'
-import CollapseButton from './collapse-button'
 import WindowOpenButton from './window-open-button'
 
 const WindowView = () => {
-  const { openChat, closeChat } = useSeamlyChat()
-  const { isOpen } = useVisibility()
+  const { isOpen, openChat } = useVisibility()
   const userHasResponded = useUserHasResponded()
   const { t } = useI18n()
   const continueChatText = t('window.chat.continue')
@@ -68,10 +64,8 @@ const WindowView = () => {
         transitionStartState={transitionStartStates.notRendered}
       >
         <Chat>
-          {isOpen && <CollapseButton onClick={closeChat} />}
           <ChatFrame interruptComponent={Interrupt}>
             <Conversation />
-            <EntryContainer />
           </ChatFrame>
         </Chat>
       </InOutTransition>

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

@@ -1,10 +1,5 @@
-import { useStartChatIcon } from 'domains/config/hooks'
-import { useI18n } from 'domains/i18n/hooks'
-import { useInterrupt } from 'domains/interrupt/hooks'
-import { useVisibility } from 'domains/visibility/hooks'
-import { className } from 'lib/css'
-import Icon from 'ui/components/layout/icon'
 import { useCallback } from 'preact/hooks'
+import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,
 } from 'ui/components/widgets/in-out-transition'
@@ -14,6 +9,11 @@ import {
   useSeamlyCurrentAgent,
   useSeamlyUnreadCount,
 } from 'ui/hooks/seamly-state-hooks'
+import { useStartChatIcon } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { useInterrupt } from 'domains/interrupt/hooks'
+import { useVisibility } from 'domains/visibility/hooks'
+import { className } from 'lib/css'
 
 const ButtonIcon = () => {
   const startChatIcon = useStartChatIcon()

package/src/javascripts/ui/components/warnings/idle-detach-warning.js

@@ -1,9 +1,9 @@
-import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n/hooks'
-import useSeamlyIdleDetachCountdown from 'ui/hooks/use-seamly-idle-detach-countdown'
 import { useSkiplinkTargetFocusing } from 'ui/hooks/focus-helper-hooks'
 import useSeamlyActivityEventHandler from 'ui/hooks/use-seamly-activity-event-handler'
 import useSeamlyCommands from 'ui/hooks/use-seamly-commands'
+import useSeamlyIdleDetachCountdown from 'ui/hooks/use-seamly-idle-detach-countdown'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 import Prompt from './prompt'
 
 const IdleDetachWarning = () => {

package/src/javascripts/ui/components/warnings/prompt.js

@@ -1,5 +1,5 @@
+import { useGeneratedId, useSkiplink } from 'ui/hooks/seamly-hooks'
 import { className } from 'lib/css'
-import { useSkiplink, useGeneratedId } from 'ui/hooks/seamly-hooks'
 
 const Prompt = ({ baseClassName, children, title }) => {
   const skiplinkTargetId = useSkiplink()

package/src/javascripts/ui/components/warnings/resume-conversation-prompt.js

@@ -1,8 +1,8 @@
-import { className } from 'lib/css'
-import { useI18n } from 'domains/i18n/hooks'
-import useSeamlyResumeConversationPrompt from 'ui/hooks/use-seamly-resume-conversation-prompt'
-import useSeamlyActivityEventHandler from 'ui/hooks/use-seamly-activity-event-handler'
 import { useSeamlyCurrentAgent } from 'ui/hooks/seamly-state-hooks'
+import useSeamlyActivityEventHandler from 'ui/hooks/use-seamly-activity-event-handler'
+import useSeamlyResumeConversationPrompt from 'ui/hooks/use-seamly-resume-conversation-prompt'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 import Prompt from './prompt'
 
 const ResumeConversationPrompt = () => {

package/src/javascripts/ui/components/widgets/in-out-transition.js

@@ -1,8 +1,8 @@
-import { toChildArray, cloneElement } from 'preact'
-import { useRef, useState, useEffect } from 'preact/hooks'
+import { cloneElement, toChildArray } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
+import { defaultTransitionTimeMs } from 'config'
 import { useStableCallback } from 'ui/hooks/seamly-hooks'
 import { className } from 'lib/css'
-import { defaultTransitionTimeMs } from 'config'
 
 const transitionClasses = {
   visible: className('transition--visible'),
@@ -21,13 +21,13 @@ export const transitionStartStates = {
 const InOutTransition = ({
   children,
   isActive,
-  timeout,
+  timeout = defaultTransitionTimeMs,
   transitionStartState = transitionStartStates.notRendered,
-  onInTransitionComplete,
-  onOutTransitionComplete,
+  onInTransitionComplete = () => {},
+  onOutTransitionComplete = () => {},
 }) => {
   const prevIsActive = useRef(false)
-  const timeoutVal = timeout ? parseInt(timeout, 10) : defaultTransitionTimeMs
+  const timeoutVal = parseInt(timeout, 10)
 
   const onInTransitionCompleteHandler = useStableCallback(
     onInTransitionComplete,
@@ -98,17 +98,19 @@ const InOutTransition = ({
   ])
 
   return (
-    renderChildren &&
-    toChildArray(children).map((child) => {
-      const { className: childClassName = '' } = child.props
-      const cleanClasses = childClassName
-        .split(' ')
-        .filter((cl) => !transitionClassesArray.includes(cl))
-
-      return cloneElement(child, {
-        className: [...cleanClasses, ...activeTransitionClasses].join(' '),
-      })
-    })
+    <>
+      {renderChildren &&
+        toChildArray(children).map((child) => {
+          const { className: childClassName = '' } = child.props
+          const cleanClasses = childClassName
+            .split(' ')
+            .filter((cl) => !transitionClassesArray.includes(cl))
+
+          return cloneElement(child, {
+            className: [...cleanClasses, ...activeTransitionClasses].join(' '),
+          })
+        })}
+    </>
   )
 }
 

package/src/javascripts/ui/components/widgets/lightbox.js

@@ -1,12 +1,12 @@
 import { useRef } from 'preact/hooks'
-import { useI18n } from 'domains/i18n/hooks'
+import Icon from 'ui/components/layout/icon'
 import {
   useSeamlyActivityEventHandler,
   useSeamlyAppContainerClassNames,
 } from 'ui/hooks/seamly-hooks'
-import { className } from 'lib/css'
-import Icon from 'ui/components/layout/icon'
 import { useConfig } from 'domains/config/hooks'
+import { useI18n } from 'domains/i18n/hooks'
+import { className } from 'lib/css'
 import Modal from './modal'
 
 const Lightbox = ({ url, description, onClose: onCloseHandler }) => {

package/src/javascripts/ui/components/widgets/modal.js

@@ -1,8 +1,8 @@
 import { render, toChildArray } from 'preact'
+import { useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks'
 import { createFocusTrap } from 'focus-trap'
-import { useLayoutEffect, useEffect, useRef, useState } from 'preact/hooks'
-import { createAriaHider } from 'ui/utils/general-utils'
 import { useGeneratedId } from 'ui/hooks/seamly-hooks'
+import { createAriaHider } from 'ui/utils/general-utils'
 
 const Modal = ({
   children,

package/src/javascripts/ui/components/widgets/upload-progress.js

@@ -1,7 +1,7 @@
-import { className } from 'lib/css'
+import Error from 'ui/components/form-controls/error'
 import { useFileUploads } from 'ui/hooks/seamly-hooks'
 import { useI18n } from 'domains/i18n/hooks'
-import Error from 'ui/components/form-controls/error'
+import { className } from 'lib/css'
 
 const UploadProgress = () => {
   const { t } = useI18n()

package/src/javascripts/ui/hooks/file-upload-hooks.js

@@ -1,7 +1,7 @@
-import { clearAllUploads } from 'domains/store/slice'
 import { useCallback, useContext } from 'preact/hooks'
 import { useDispatch } from 'react-redux'
 import SeamlyFileUploadContext from 'ui/components/core/seamly-file-upload-context'
+import { clearAllUploads } from 'domains/store/slice'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 
 const useSeamlyFileUploadContext = () => useContext(SeamlyFileUploadContext)