@botonic/react 0.31.0-alpha.4 → 0.31.0-alpha.6

package/src/webchat/{hooks → context}/use-webchat.ts

@@ -1,12 +1,14 @@
-import { Input, Session } from '@botonic/core'
+import { Session } from '@botonic/core'
 import { useReducer, useRef } from 'react'
 
-import { ThemeProps, Webview } from '../../components/index-types'
+import { Reply } from '../../components'
+import { Webview } from '../../components/index-types'
 import { COLORS, WEBCHAT } from '../../constants'
-import { ClientInput, WebchatMessage } from '../../index-types'
-import { WebchatAction } from '../actions'
-import { DevSettings, ErrorMessage, WebchatState } from '../index-types'
-import { webchatReducer } from '../webchat-reducer'
+import { WebchatMessage } from '../../index-types'
+import { ThemeProps } from '../theme/types'
+import { WebchatAction } from './actions'
+import { ClientInput, DevSettings, ErrorMessage, WebchatState } from './types'
+import { webchatReducer } from './webchat-reducer'
 
 export const webchatInitialState: WebchatState = {
   width: WEBCHAT.DEFAULTS.WIDTH,
@@ -19,8 +21,9 @@ export const webchatInitialState: WebchatState = {
   webview: null,
   webviewParams: null,
   session: { user: undefined },
-  lastRoutePath: null,
+  lastRoutePath: undefined,
   handoff: false,
+  // TODO: type create a defaultTheme using ThemeProps, and put this in initialState
   theme: {
     headerTitle: WEBCHAT.DEFAULTS.TITLE,
     brandColor: COLORS.BOTONIC_BLUE,
@@ -47,7 +50,44 @@ export const webchatInitialState: WebchatState = {
   isInputFocused: false,
 }
 
-export function useWebchat() {
+export interface UseWebchat {
+  addMessage: (message: WebchatMessage) => void
+  addMessageComponent: (message: { props: WebchatMessage }) => void
+  clearMessages: () => void
+  doRenderCustomComponent: (toggle: boolean) => void
+  resetUnreadMessages: () => void
+  setCurrentAttachment: (attachment?: File) => void
+  setError: (error?: ErrorMessage) => void
+  setIsInputFocused: (isInputFocused: boolean) => void
+  setLastMessageVisible: (isLastMessageVisible: boolean) => void
+  setOnline: (online: boolean) => void
+  toggleCoverComponent: (toggle: boolean) => void
+  toggleEmojiPicker: (toggle: boolean) => void
+  togglePersistentMenu: (toggle: boolean) => void
+  toggleWebchat: (toggle: boolean) => void
+  updateDevSettings: (settings: DevSettings) => void
+  updateHandoff: (handoff: boolean) => void
+  updateLastMessageDate: (date: string) => void
+  updateLastRoutePath: (path: string) => void
+  updateLatestInput: (input: ClientInput) => void
+  updateMessage: (message: WebchatMessage) => void
+  updateReplies: (replies: (typeof Reply)[]) => void
+  updateSession: (session: Partial<Session>) => void
+  updateTheme: (theme: ThemeProps, themeUpdates?: ThemeProps) => void
+  updateTyping: (typing: boolean) => void
+  updateWebview: (webview: Webview, params: Record<string, string>) => void
+  removeReplies: () => void
+  removeWebview: () => void
+  webchatState: WebchatState
+  webchatRef: React.MutableRefObject<HTMLDivElement | null> // TODO: Change name, already exists WebchatRef for useImperativeHandle
+  headerRef: React.MutableRefObject<HTMLDivElement | null>
+  chatAreaRef: React.MutableRefObject<HTMLDivElement | null>
+  scrollableMessagesListRef: React.MutableRefObject<HTMLDivElement | null>
+  repliesRef: React.MutableRefObject<HTMLDivElement | null>
+  inputPanelRef: React.MutableRefObject<HTMLDivElement | null>
+}
+
+export function useWebchat(): UseWebchat {
   const [webchatState, webchatDispatch] = useReducer(
     webchatReducer,
     webchatInitialState
@@ -72,9 +112,12 @@ export function useWebchat() {
   const updateMessage = (message: WebchatMessage) =>
     webchatDispatch({ type: WebchatAction.UPDATE_MESSAGE, payload: message })
 
-  const updateReplies = replies =>
+  const updateReplies = (replies: (typeof Reply)[]) =>
     webchatDispatch({ type: WebchatAction.UPDATE_REPLIES, payload: replies })
 
+  const removeReplies = () =>
+    webchatDispatch({ type: WebchatAction.REMOVE_REPLIES, payload: [] })
+
   const updateLatestInput = (input: ClientInput) =>
     webchatDispatch({ type: WebchatAction.UPDATE_LATEST_INPUT, payload: input })
 
@@ -87,7 +130,12 @@ export function useWebchat() {
       payload: { webview, webviewParams: params },
     })
 
-  const updateSession = (session: Session) => {
+  const removeWebview = () =>
+    webchatDispatch({
+      type: WebchatAction.REMOVE_WEBVIEW,
+    })
+
+  const updateSession = (session: Partial<Session>) => {
     webchatDispatch({
       type: WebchatAction.UPDATE_SESSION,
       payload: session,
@@ -152,7 +200,7 @@ export function useWebchat() {
       payload: toggle,
     })
 
-  const setError = (error: ErrorMessage) =>
+  const setError = (error?: ErrorMessage) =>
     webchatDispatch({
       type: WebchatAction.SET_ERROR,
       payload: error,
@@ -177,7 +225,7 @@ export function useWebchat() {
     })
   }
 
-  const setCurrentAttachment = (attachment: File) => {
+  const setCurrentAttachment = (attachment?: File) => {
     webchatDispatch({
       type: WebchatAction.SET_CURRENT_ATTACHMENT,
       payload: attachment,
@@ -230,7 +278,8 @@ export function useWebchat() {
     updateTheme,
     updateTyping,
     updateWebview,
-    webchatDispatch,
+    removeReplies,
+    removeWebview,
     webchatState,
     webchatRef,
     headerRef,

package/src/webchat/{webchat-reducer.ts → context/webchat-reducer.ts}

@@ -1,6 +1,6 @@
 import { WebchatAction } from './actions'
-import { WebchatState } from './index-types'
 import { messagesReducer } from './messages-reducer'
+import { WebchatState } from './types'
 
 // eslint-disable-next-line complexity
 export function webchatReducer(
@@ -10,6 +10,8 @@ export function webchatReducer(
   switch (action.type) {
     case WebchatAction.UPDATE_WEBVIEW:
       return { ...state, ...action.payload }
+    case WebchatAction.REMOVE_WEBVIEW:
+      return { ...state, webview: null, webviewParams: null }
     case WebchatAction.UPDATE_SESSION:
       return { ...state, session: { ...action.payload } }
     case WebchatAction.UPDATE_TYPING:

package/src/webchat/cover-component/index.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../context'
 
 interface Props {
   component: any

package/src/webchat/global.d.ts

@@ -0,0 +1,3 @@
+interface Window {
+  _botonicInsertStyles?: HTMLStyleElement[]
+}

package/src/webchat/header/default-header.tsx

@@ -0,0 +1,75 @@
+import React, { useContext } from 'react'
+
+import { COLORS, ROLES, WEBCHAT } from '../../constants'
+import { Scale } from '../../shared/styles'
+import { resolveImage } from '../../util/environment'
+import { ConditionalWrapper } from '../../util/react'
+import { WebchatContext } from '../../webchat/context'
+import {
+  CloseHeader,
+  HeaderContainer,
+  ImageContainer,
+  Subtitle,
+  TextContainer,
+  Title,
+} from './styles'
+
+export const DefaultHeader = () => {
+  const { getThemeProperty, toggleWebchat } = useContext(WebchatContext)
+
+  const animationsEnabled = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,
+    true
+  )
+
+  const headerImage = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.headerImage,
+    getThemeProperty(
+      WEBCHAT.CUSTOM_PROPERTIES.brandImage,
+      WEBCHAT.DEFAULTS.LOGO
+    )
+  )
+
+  const headerTitle = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.headerTitle,
+    WEBCHAT.DEFAULTS.TITLE
+  )
+
+  const headerSubtitle = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle,
+    ''
+  )
+
+  const handleCloseWebchat = () => {
+    toggleWebchat(false)
+  }
+
+  const color = getThemeProperty(
+    WEBCHAT.CUSTOM_PROPERTIES.brandColor,
+    COLORS.BOTONIC_BLUE
+  )
+
+  return (
+    <HeaderContainer
+      role={ROLES.HEADER}
+      color={color}
+      style={{ ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerStyle) }}
+    >
+      {headerImage && (
+        <ImageContainer>
+          <img src={resolveImage(headerImage)} />
+        </ImageContainer>
+      )}
+      <TextContainer>
+        <Title>{headerTitle}</Title>
+        {headerSubtitle ? <Subtitle>{headerSubtitle}</Subtitle> : null}
+      </TextContainer>
+      <ConditionalWrapper
+        condition={animationsEnabled}
+        wrapper={children => <Scale>{children}</Scale>}
+      >
+        <CloseHeader onClick={handleCloseWebchat}>⨯</CloseHeader>
+      </ConditionalWrapper>
+    </HeaderContainer>
+  )
+}

package/src/webchat/header/index.tsx

@@ -0,0 +1,37 @@
+import React, { ForwardedRef, forwardRef, useContext } from 'react'
+
+import { WEBCHAT } from '../../constants'
+import { WebchatContext } from '../../webchat/context'
+import { BotonicContainerId } from '../constants'
+import { DefaultHeader } from './default-header'
+import { StyledWebchatHeader } from './styles'
+
+export const WebchatHeader = forwardRef(
+  (_, ref: ForwardedRef<HTMLDivElement>) => {
+    const { getThemeProperty, toggleWebchat } = useContext(WebchatContext)
+
+    const handleCloseWebchat = () => {
+      toggleWebchat(false)
+    }
+
+    const CustomHeader = getThemeProperty(
+      WEBCHAT.CUSTOM_PROPERTIES.customHeader
+    )
+
+    if (CustomHeader) {
+      return (
+        <div id={BotonicContainerId.Header} ref={ref}>
+          <CustomHeader onCloseClick={handleCloseWebchat} />
+        </div>
+      )
+    }
+
+    return (
+      <StyledWebchatHeader id={BotonicContainerId.Header} ref={ref}>
+        <DefaultHeader />
+      </StyledWebchatHeader>
+    )
+  }
+)
+
+WebchatHeader.displayName = 'WebchatHeader'

package/src/webchat/header/styles.ts

@@ -0,0 +1,62 @@
+import styled from 'styled-components'
+
+import { COLORS, WEBCHAT } from '../../constants'
+
+export const HeaderContainer = styled.div`
+  display: flex;
+  background: linear-gradient(
+    90deg,
+    ${COLORS.BLEACHED_CEDAR_PURPLE} 0%,
+    ${props => props.color} 100%
+  );
+  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
+  z-index: 2;
+  height: inherit;
+`
+
+export const ImageContainer = styled.div`
+  padding: 10px;
+  align-items: center;
+
+  img {
+    width: 32px;
+    border-radius: 50%;
+  }
+`
+
+export const TextContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  flex: 1 1 auto;
+`
+
+export const Title = styled.div`
+  display: flex;
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: bold;
+  color: ${COLORS.SOLID_WHITE};
+`
+
+export const Subtitle = styled.div`
+  display: flex;
+  font-family: inherit;
+  font-size: 11px;
+  color: ${COLORS.SOLID_WHITE};
+`
+
+export const CloseHeader = styled.div`
+  padding: 0px 16px;
+  cursor: pointer;
+  color: ${COLORS.SOLID_WHITE};
+  font-family: inherit;
+  font-size: 36px;
+`
+
+export const StyledWebchatHeader = styled.div`
+  border-radius: 8px 8px 0px 0px;
+  box-shadow: ${COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;
+  height: 55px;
+  flex: none;
+`

package/src/webchat/hooks/index.ts

@@ -6,6 +6,5 @@ export { useScrollToBottom } from './use-scroll-to-bottom'
 export { useScrollbarController } from './use-scrollbar-controller'
 export { useTyping } from './use-typing'
 export { useVirtualKeyboardDetection } from './use-virtual-keyboard-detection'
-export { useWebchat, webchatInitialState } from './use-webchat'
 export { useWebchatDimensions } from './use-webchat-dimensions'
 export { useWebchatResizer } from './use-webchat-resizer'

package/src/webchat/hooks/use-previous.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react'
 
-export function usePrevious(value) {
+export function usePrevious(value: any): any {
   const ref = useRef()
   useEffect(() => {
     ref.current = value

package/src/webchat/hooks/use-scrollbar-controller.ts

@@ -1,6 +1,6 @@
 import { useContext, useEffect } from 'react'
 
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 import { DEVICES, isMobileDevice } from '../devices'
 
 // TODO: Investigate why when we have some messages, scroll actions are not disabled properly
@@ -30,7 +30,7 @@ export const useScrollbarController = (currentDevice, host) => {
 
   const hasScrollbar = () => {
     if (chatAreaRef.current && scrollableMessagesListRef.current) {
-      if (!repliesRef) {
+      if (!repliesRef?.current) {
         return (
           scrollableMessagesListRef.current?.scrollHeight >
           chatAreaRef.current?.clientHeight

package/src/webchat/hooks/use-typing.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react'
 
 import { WebchatMessage } from '../../index-types'
-import { WebchatState } from '../index-types'
+import { WebchatState } from '../context'
 
 interface UseTyping {
   webchatState: WebchatState

package/src/webchat/hooks/use-webchat-dimensions.ts

@@ -1,6 +1,6 @@
 import { useCallback, useContext } from 'react'
 
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 
 export const useWebchatDimensions = () => {
   const {

package/src/webchat/hooks/use-webchat-resizer.ts

@@ -1,6 +1,6 @@
 import { useContext } from 'react'
 
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 import { useWebchatDimensions } from './use-webchat-dimensions'
 
 export const useWebchatResizer = () => {

package/src/webchat/index-types.ts

@@ -1,7 +1,4 @@
-import type { Input as CoreInput, Session as CoreSession } from '@botonic/core'
-import { RefObject } from 'react'
-
-import { Webview } from '../components/index-types'
+import { WebchatArgs } from '../index-types'
 
 export interface WebchatStateTheme {
   headerTitle: string
@@ -11,60 +8,13 @@ export interface WebchatStateTheme {
   textPlaceholder: string
   style: {
     fontFamily: string
+    borderRadius?: string
   }
 }
 
-export interface ErrorMessage {
-  message?: string
-}
-export interface DevSettings {
-  keepSessionOnReload?: boolean
-  showSessionView?: boolean
-}
-
-export interface WebchatState {
-  width: number
-  height: number
-  messagesJSON: any[]
-  messagesComponents: any[]
-  replies: any[]
-  latestInput: Partial<CoreInput>
-  typing: boolean
-  webview: Webview | null
-  webviewParams: null
-  session: Partial<CoreSession>
-  lastRoutePath: string | null
-  handoff: boolean
-  theme: WebchatStateTheme
-  themeUpdates: Partial<WebchatStateTheme>
-  error: ErrorMessage
-  online: boolean
-  devSettings: DevSettings
-  isWebchatOpen: boolean
-  isEmojiPickerOpen: boolean
-  isPersistentMenuOpen: boolean
-  isCoverComponentOpen: boolean
-  isCustomComponentRendered: boolean
-  lastMessageUpdate?: string
-  currentAttachment?: File
-  numUnreadMessages: number
-  isLastMessageVisible: boolean
-  isInputFocused: boolean
-}
-
-// export interface WebchatProps extends WebchatArgs {
-export interface WebchatProps {
-  ref: RefObject<any>
-  onConnectionRegained?: () => Promise<void>
-}
-
-export interface WebchatDevProps extends WebchatProps {
+export interface WebchatDevProps extends WebchatArgs {
   initialDevSettings?: {
     keepSessionOnReload?: boolean
     showSessionView?: boolean
   }
 }
-
-export interface CoverComponentProps {
-  closeComponent: () => void
-}

package/src/webchat/index.ts

@@ -1,4 +1,5 @@
 // @ts-nocheck
+export { WebchatContext } from './context'
 export { Webchat } from './webchat'
 export { WebchatDev } from './webchat-dev'
 

package/src/webchat/input-panel/attachment.tsx

@@ -2,13 +2,13 @@ import React, { useContext, useRef } from 'react'
 
 import AttachmentIcon from '../../assets/attachment-icon.svg'
 import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 import { Icon } from '../components/common'
 import { ConditionalAnimation } from '../components/conditional-animation'
 
 interface AttachmentProps {
   accept: string
-  enableAttachments: boolean
+  enableAttachments?: boolean
   onChange: (event: any) => void
 }
 

package/src/webchat/input-panel/emoji-picker.tsx

@@ -2,12 +2,12 @@ import React, { useContext } from 'react'
 
 import LogoEmoji from '../../assets/emojiButton.svg'
 import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 import { Icon } from '../components/common'
 import { ConditionalAnimation } from '../components/conditional-animation'
 
 interface EmojiPickerProps {
-  enableEmojiPicker: boolean
+  enableEmojiPicker?: boolean
   onClick: () => void
 }
 

package/src/webchat/input-panel/index.tsx

@@ -3,8 +3,8 @@ import React, { useContext } from 'react'
 import { v7 as uuidv7 } from 'uuid'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { getFullMimeWhitelist } from '../../message-utils'
+import { WebchatContext } from '../../webchat/context'
 import { BotonicContainerId } from '../constants'
 import { Attachment } from './attachment'
 import { EmojiPicker } from './emoji-picker'
@@ -16,10 +16,10 @@ import { Textarea } from './textarea'
 
 interface InputPanelProps {
   persistentMenu: any
-  enableEmojiPicker: boolean
-  enableAttachments: boolean
+  enableEmojiPicker?: boolean
+  enableAttachments?: boolean
   handleAttachment: (event: any) => void
-  textareaRef: React.MutableRefObject<HTMLTextAreaElement>
+  textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>
   host: HTMLElement
   onUserInput?: (event: any) => Promise<void>
 }
@@ -43,6 +43,8 @@ export const InputPanel = ({
   } = useContext(WebchatContext)
 
   const handleSelectedEmoji = event => {
+    if (!textareaRef.current) return
+
     textareaRef.current.value += event.emoji
     textareaRef.current.focus()
   }
@@ -56,7 +58,9 @@ export const InputPanel = ({
   }
 
   const sendTextAreaText = async () => {
-    await sendText(textareaRef.current.value)
+    if (!textareaRef.current) return
+
+    await sendText(textareaRef.current?.value)
     textareaRef.current.value = ''
   }
 

package/src/webchat/input-panel/persistent-menu.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 
 import LogoMenu from '../../assets/menuButton.svg'
 import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 import { Icon } from '../components/common'
 import { ConditionalAnimation } from '../components/conditional-animation'
 

package/src/webchat/input-panel/send-button.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 
 import SendButtonIcon from '../../assets/send-button.svg'
 import { ROLES, WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 import { Icon } from '../components/common'
 import { ConditionalAnimation } from '../components/conditional-animation'
 

package/src/webchat/input-panel/textarea.tsx

@@ -1,17 +1,17 @@
 import React, { useContext } from 'react'
 import TextareaAutosize from 'react-textarea-autosize'
 
-import { PersistentMenuTheme } from '../../components/index-types'
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { Typing } from '../../index-types'
+import { WebchatContext } from '../../webchat/context'
 import { useDeviceAdapter } from '../hooks'
+import { PersistentMenuOptionsTheme } from '../theme/types'
 import { TextAreaContainer } from './styles'
 
 interface TextareaProps {
   host: HTMLElement
-  persistentMenu: PersistentMenuTheme
-  textareaRef: React.MutableRefObject<HTMLTextAreaElement>
+  persistentMenu: PersistentMenuOptionsTheme
+  textareaRef: React.MutableRefObject<HTMLTextAreaElement | undefined>
   sendChatEvent: (event: string) => Promise<void>
   sendTextAreaText: () => Promise<void>
 }
@@ -45,6 +45,8 @@ export const Textarea = ({
   }
 
   const onKeyUp = () => {
+    if (!textareaRef.current) return
+
     if (textareaRef.current.value === '') {
       stopTyping()
       return

package/src/webchat/message-list/index.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useRef, useState } from 'react'
 
 import { ROLES } from '../../constants'
-import { WebchatContext } from '../../contexts'
+import { WebchatContext } from '../../webchat/context'
 import { BotonicContainerId } from '../constants'
 import TypingIndicator from '../typing-indicator'
 import { IntroMessage } from './intro-message'
@@ -12,11 +12,9 @@ import { useNotifications } from './use-notifications'
 
 const SCROLL_TIMEOUT = 200
 const scrollOptionsEnd: ScrollIntoViewOptions = {
-  behavior: 'smooth',
   block: 'end',
 }
 const scrollOptionsCenter: ScrollIntoViewOptions = {
-  behavior: 'smooth',
   block: 'center',
 }
 
@@ -136,8 +134,8 @@ export const WebchatMessageList = () => {
         <IntroMessage />
         {webchatState.messagesComponents.map((messageComponent, index) => {
           return (
-            <>
-              <ContainerMessage role={ROLES.MESSAGE} key={index}>
+            <React.Fragment key={messageComponent.props.id}>
+              <ContainerMessage role={ROLES.MESSAGE}>
                 {showUnreadMessagesBanner(messageComponent.props.id) && (
                   <UnreadMessagesBanner
                     unreadMessagesBannerRef={unreadMessagesBannerRef}
@@ -153,7 +151,7 @@ export const WebchatMessageList = () => {
                   }}
                 ></div>
               )}
-            </>
+            </React.Fragment>
           )
         })}
         {webchatState.typing && <TypingIndicator ref={typingRef} />}

package/src/webchat/message-list/intro-message.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react'
 
 import { WEBCHAT } from '../../constants'
-import { WebchatContext } from '../../contexts'
 import { Fade } from '../../shared/styles'
 import { resolveImage } from '../../util/environment'
 import { ConditionalWrapper } from '../../util/react'
+import { WebchatContext } from '../../webchat/context'
 import { DefaultIntroImage } from './styles'
 
 export const IntroMessage = () => {

package/src/webchat/message-list/styles.ts

@@ -55,5 +55,6 @@ export const ScrollableMessageList = styled.div`
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior: contain; // https://css-tricks.com/almanac/properties/o/overscroll-behavior/
+  scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
 `