@stack-spot/ai-chat-widget 1.37.0-beta.1 → 2.0.0-betacitric.2

package/src/components/Tooltip/TooltipAPI.ts

@@ -1,101 +0,0 @@
-import { delay } from '@stack-spot/portal-components'
-import { animationTimeMS } from './style'
-import { ShowOptions } from './types'
-
-// the maximum amount of pixels a tooltip can get close to the screen edges.
-const MARGIN_TO_CORNERS_PX = 10
-
-function isRelative(element: HTMLElement) {
-  return ['relative', 'absolute', 'fixed'].includes(element.computedStyleMap().get('position')?.toString() ?? '')
-}
-
-/**
- * Allows interaction with the tooltip element.
- * 
- * This places the tooltip element at the correct place, shows it, hides it and manages its contents.
- * 
- * This also takes into account the screen edges, making adjustments to the tooltip position if it would overflow the screen.
- */
-export class TooltipAPI {
-  /**
-   * A reference to the tooltip element in the HTML tree.
-   */
-  tooltipRef: React.RefObject<HTMLDivElement>
-  private setContent: React.Dispatch<React.SetStateAction<React.ReactNode>>
-  private hideTimeoutId: number | undefined
-  private clickListener: ((e: MouseEvent) => void) | undefined
-  private relativeTo: HTMLElement | undefined
-
-  constructor(tooltipRef: React.RefObject<HTMLDivElement>, setContent: React.Dispatch<React.SetStateAction<React.ReactNode>>) {
-    this.tooltipRef = tooltipRef
-    this.setContent = setContent
-  }
-
-  private computeRelativeTo() {
-    if (this.relativeTo) return
-    this.relativeTo = this.tooltipRef.current?.parentElement as HTMLElement
-    while (this.relativeTo && this.relativeTo !== document.body && !isRelative(this.relativeTo)) {
-      this.relativeTo = this.relativeTo.parentElement as HTMLElement
-    }
-  }
-
-  /**
-   * Shows the tooltip with `content`. Its position is based on `position` and the position of the element referred by `anchor`.
-   */
-  async show({ content, anchor, position = 'bottom', hideOnClickOutside }: ShowOptions) {
-    window.clearTimeout(this.hideTimeoutId)
-    this.hideTimeoutId = undefined
-    if (this.clickListener) document.removeEventListener('click', this.clickListener)
-    this.setContent(content)
-    await delay(10)
-    if (!this.tooltipRef.current) return
-    const anchorRect = anchor.getClientRects()[0]
-    this.tooltipRef.current.classList.add('visible')
-    const tooltipWidth = this.tooltipRef.current.clientWidth
-    const tooltipHeight = this.tooltipRef.current.clientHeight
-    let top = 0
-    let left = 0
-    if (position === 'left' || position === 'right') {
-      top = anchorRect.top + anchorRect.height / 2 - tooltipHeight / 2
-      if (position === 'left') left = anchorRect.left - tooltipWidth
-      else left = anchorRect.left + anchorRect.width
-    } else {
-      left = anchorRect.left + anchorRect.width / 2 - tooltipWidth / 2
-      if (position === 'top') top = anchorRect.top - tooltipHeight
-      else top = anchorRect.top + anchorRect.height
-    }
-    // takes the parent the tooltip is positioned relative to into consideration
-    this.computeRelativeTo()
-    const relativeRect = this.relativeTo?.getClientRects()[0] ?? { top: 0, left: 0 }
-    top -= relativeRect.top
-    left -= relativeRect.left
-    // adjusts positions in order to avoid overflowing the window and leaving a margin to the corners
-    if (top <= 0) top += MARGIN_TO_CORNERS_PX
-    else if (top + tooltipHeight >= document.body.clientHeight - MARGIN_TO_CORNERS_PX) {
-      top = document.body.clientHeight - MARGIN_TO_CORNERS_PX + tooltipHeight
-    }
-    if (left <= 0) left += MARGIN_TO_CORNERS_PX
-    else if (left + tooltipWidth >= document.body.clientWidth - MARGIN_TO_CORNERS_PX) {
-      left = document.body.clientWidth - MARGIN_TO_CORNERS_PX - tooltipWidth
-    }
-    this.tooltipRef.current.style.top = `${top}px`
-    this.tooltipRef.current.style.left = `${left}px`
-    if (hideOnClickOutside) {
-      this.clickListener = (e: MouseEvent) => {
-        if (this.tooltipRef.current?.contains(e.target as HTMLElement)) return
-        this.hide()
-      }
-      document.addEventListener('click', this.clickListener)
-    }
-  }
-
-  /**
-   * Hides the tooltip. After the animation, the content is removed.
-   */
-  hide(): void {
-    if (!this.tooltipRef.current) return
-    this.tooltipRef.current.classList.remove('visible')
-    this.hideTimeoutId = window.setTimeout(() => this.setContent(undefined), animationTimeMS)
-    if (this.clickListener) document.removeEventListener('click', this.clickListener)
-  }
-}

package/src/components/Tooltip/context.tsx

@@ -1,24 +0,0 @@
-import { createContext, useContext, useMemo, useRef, useState } from 'react'
-import { WithChildren } from '../../types'
-import { TooltipBox } from './style'
-import { TooltipAPI } from './TooltipAPI'
-
-const Context = createContext<TooltipAPI | undefined>(undefined)
-
-export const TooltipProvider = ({ children }: Required<WithChildren>) => {
-  const ref = useRef<HTMLDivElement>(null)
-  const [content, setContent] = useState<React.ReactNode>()
-  const api = useMemo(() => new TooltipAPI(ref, setContent), [])
-  return (
-    <Context.Provider value={api}>
-      {children}
-      <TooltipBox ref={ref}>{content}</TooltipBox>
-    </Context.Provider>
-  )
-}
-
-export function useTooltip() {
-  const api = useContext(Context)
-  if (!api) throw new Error('In order to use tooltips, you must wrap your content in a <TooltipProvider>.')
-  return api
-}

package/src/components/Tooltip/index.ts

@@ -1,2 +0,0 @@
-export { TooltipProvider } from './context'
-export { Tooltip } from './Tooltip'

package/src/components/Tooltip/style.tsx

@@ -1,24 +0,0 @@
-import { theme } from '@stack-spot/portal-theme'
-import { styled } from 'styled-components'
-
-export const animationTimeMS = 300
-
-export const TooltipBox = styled.div`
-  position: absolute;
-  opacity: 0;
-  transition: opacity ${animationTimeMS/ 1000}s;
-  top: 0;
-  left: 0;
-
-  &.visible {
-    opacity: 1;
-  }
-`
-
-export const DefaultTooltip = styled.div`
-  padding: 4px 8px;
-  background-color: ${theme.color.inverse[500]};
-  color: ${theme.color.inverse.contrastText};
-  border-radius: 6px;
-  margin: 6px;
-`

package/src/components/Tooltip/types.ts

@@ -1,28 +0,0 @@
-export type TooltipPosition = 'left' | 'right' | 'top' | 'bottom'
-
-export interface BoxPosition {
-  x1: number,
-  x2: number,
-  y1: number,
-  y2: number,
-}
-
-export interface ShowOptions {
-  /**
-   * The content of the tooltip. Can be either a string or a React Element.
-   */
-  content: React.ReactNode,
-  /**
-   * The anchor to the tooltip. This is part of what defines the position where the tooltip will appear.
-   */
-  anchor: HTMLElement,
-  /**
-   * The position relative to the element referred by `anchor`.
-   * @default bottom
-   */
-  position?: TooltipPosition,
-  /**
-   * Whether or not to hide the tooltip when a click is detected outside of it.
-   */
-  hideOnClickOutside?: boolean,
-}