@botonic/react 0.22.0-alpha.1 → 0.22.0-alpha.2

package/src/webchat/hooks.js

@@ -247,7 +247,8 @@ export function useComponentVisible(initialIsVisible, onClickOutside) {
   const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible)
   const ref = useRef(null)
   const handleClickOutside = event => {
-    if (ref.current && !ref.current.contains(event.path[0])) {
+    const target = event.path ? event.path[0] : event.target
+    if (ref.current && !ref.current.contains(target)) {
       setIsComponentVisible(false)
       onClickOutside()
     }

package/src/webchat/use-storage-state-hook.js

@@ -1,9 +1,20 @@
 import { useCallback, useEffect, useState } from 'react'
 
-//Code taken from https://github.com/leny/react-use-storage
-const evtTarget = new EventTarget()
+// Code taken from https://github.com/leny/react-use-storage/blob/master/src/index.js
+const IS_BROWSER =
+  typeof window !== 'undefined' &&
+  typeof navigator !== 'undefined' &&
+  typeof document !== 'undefined'
 
 export function useStorageState(storage, key, defaultValue) {
+  let evtTarget
+
+  try {
+    evtTarget = new EventTarget()
+  } catch {
+    evtTarget = (IS_BROWSER ? document : {})?.createElement?.('phony')
+  }
+
   const raw = storage?.getItem(key)
 
   const [value, setValue] = useState(raw ? JSON.parse(raw) : defaultValue)

package/src/webchat/webchat.jsx

@@ -1,5 +1,4 @@
 import { INPUT, isMobile, params2queryString } from '@botonic/core'
-import { motion } from 'framer-motion'
 import merge from 'lodash.merge'
 import React, {
   forwardRef,
@@ -161,7 +160,7 @@ const DarkBackgroundMenu = styled.div`
   height: 100%;
 `
 
-// eslint-disable-next-line complexity
+// eslint-disable-next-line complexity, react/display-name
 export const Webchat = forwardRef((props, ref) => {
   const {
     webchatState,
@@ -372,8 +371,8 @@ export const Webchat = forwardRef((props, ref) => {
   const openWebview = (webviewComponent, params) =>
     updateWebview(webviewComponent, params)
 
-  const handleSelectedEmoji = (event, emojiObject) => {
-    textArea.current.value += emojiObject.emoji
+  const handleSelectedEmoji = event => {
+    textArea.current.value += event.emoji
     textArea.current.focus()
   }
 
@@ -712,8 +711,6 @@ export const Webchat = forwardRef((props, ref) => {
     }
   }, [webchatState.isWebchatOpen])
 
-  const textArea = useRef()
-
   const getTriggerImage = () => {
     const triggerImage = getThemeProperty(
       WEBCHAT.CUSTOM_PROPERTIES.triggerButtonImage,
@@ -768,6 +765,7 @@ export const Webchat = forwardRef((props, ref) => {
 
   const userInputEnabled = isUserInputEnabled()
 
+  const textArea = useRef(null)
   const userInputArea = () => {
     return (
       userInputEnabled && (
@@ -792,6 +790,7 @@ export const Webchat = forwardRef((props, ref) => {
 
           <TextAreaContainer>
             <Textarea
+              inputRef={textArea}
               name='text'
               onFocus={() => deviceAdapter.onFocus(host)}
               onBlur={() => deviceAdapter.onBlur()}
@@ -803,7 +802,6 @@ export const Webchat = forwardRef((props, ref) => {
                 WEBCHAT.DEFAULTS.PLACEHOLDER
               )}
               autoFocus={true}
-              inputRef={textArea}
               onKeyDown={e => onKeyDown(e)}
               onKeyUp={onKeyUp}
               style={{

package/src/webview-app.tsx

@@ -1,6 +1,6 @@
 // @ts-nocheck
-import type { PROVIDER } from '@botonic/core'
 import { getString } from '@botonic/core/lib/esm/i18n'
+import { PROVIDER } from '@botonic/core/lib/esm/models/legacy-types'
 import { params2queryString } from '@botonic/core/lib/esm/utils'
 import axios from 'axios'
 import React from 'react'