@stack-spot/portal-layout 0.0.48 → 0.0.50

package/src/LayoutOverlayManager.tsx

@@ -1,273 +1,273 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-
-import { Button } from '@citric/core'
-import { ReactElement, useLayoutEffect, useState } from 'react'
-import { Dialog, DialogOptions } from './components/Dialog'
-import { CLOSE_OVERLAY_ID, OverlayContent, OverlayContentProps } from './components/OverlayContent'
-import { getDictionary } from './dictionary'
-import { LayoutElements, elementIds, getLayoutElements } from './elements'
-import { ElementNotFound, LayoutError } from './errors'
-import { showToaster as showReactToaster } from './toaster'
-import { focusFirstChild, valueOfLayoutVar } from './utils'
-
-interface AlertOptions extends Omit<DialogOptions, 'cancel'> {
-  showButton?: boolean,
-}
-
-type BottomDialogOptions = Omit<DialogOptions, 'title'>
-type OverlaySize = 'small' | 'medium' | 'large'
-type ModalSize = 'fit-content' | OverlaySize
-type SetContentFn = ((content: ReactElement | undefined) => void) | undefined
-
-interface OverlayContentSetter {
-  modal?: SetContentFn,
-  rightPanel?: SetContentFn,
-  bottomDialog?: SetContentFn,
-}
-
-interface CustomModalOptions {
-  size?: ModalSize,
-  onClose?: () => void,
-}
-
-interface CustomRightPanelOptions {
-  size?: OverlaySize,
-  onClose?: () => void,
-}
-
-function multipleCallsWarning(type: 'modal' | 'rightPanel', timeMS: number) {
-  return `
-    Attempted to show a modal or rightPanel while a ${type} was still being closed. Closing a ${type} takes only ${timeMS}ms, so this action
-    is unlikely to have been triggered by the user and may point to errors in your code. Please check.\nTip: showModal and showRightPanel
-    are sideEffects and should never be called during the render of a component. Try to use "useEffect" or link it to an event, like
-    "onClick".
-  `.replace(/\s*\n\s+/g, ' ')
-}
-
-class LayoutOverlayManager {
-  static readonly instance?: LayoutOverlayManager
-  private setContent: OverlayContentSetter = {}
-  private elements?: LayoutElements
-  private onModalClose?: () => void
-
-  private setupElements() {
-    this.elements = getLayoutElements()
-    this.elements.backdrop?.addEventListener('mousedown', (event) => {
-      if (this.isModalOpen()) !this.elements?.modal?.contains?.(event.target as Node) && this.closeModal()
-      else if (this.isRightPanelOpen()) !this.elements?.rightPanel?.contains?.(event.target as Node) && this.closeRightPanel()
-      else this.setMainContentInteractivity(true)
-    })
-    this.elements.backdrop?.addEventListener('keydown', (event) => {
-      if (event.key !== 'Escape') return
-      if (this.isModalOpen()) this.closeModal()
-      if (this.isRightPanelOpen()) this.closeRightPanel()
-      else this.setMainContentInteractivity(true)
-      event.preventDefault()
-    })
-    this.setInteractivity(this.elements?.modal, false)
-    this.setInteractivity(this.elements?.rightPanel, false)
-    this.setInteractivity(this.elements?.bottomDialog, false)
-  }
-
-  // this should actually be like Kotlin's "internal", i.e. private to any user of the lib, but public to the lib itself.
-  // @ts-ignore
-  private useOverlays() {
-    useLayoutEffect(() => {
-      if (!this.elements) this.setupElements()
-    }, [])
-    const [modal, setModal] = useState<ReactElement | undefined>()
-    const [rightPanel, setRightPanel] = useState<ReactElement | undefined>()
-    const [bottomDialog, setBottomDialog] = useState<ReactElement | undefined>()
-    this.setContent.modal = setModal
-    this.setContent.rightPanel = setRightPanel
-    this.setContent.bottomDialog = setBottomDialog
-    return { modal, rightPanel, bottomDialog }
-  }
-
-  private setInteractivity(element: HTMLElement | null | undefined, interactive: boolean) {
-    if (interactive) {
-      element?.removeAttribute('inert')
-      element?.removeAttribute('aria-hidden')
-    } else {
-      element?.setAttribute('aria-hidden', '')
-      element?.setAttribute('inert', '')
-    }
-  }
-
-  private setMainContentInteractivity(interactive: boolean) {
-    this.setInteractivity(this.elements?.page, interactive)
-    this.setInteractivity(this.elements?.header, interactive)
-    this.setInteractivity(this.elements?.menu, interactive)
-    this.elements?.backdrop?.setAttribute('class', interactive ? '' : 'visible')
-  }
-
-  private showOverlay(element: HTMLElement | null | undefined, extraClasses: string[] = [], blockMainContent = true) {
-    element?.classList.add('visible', ...extraClasses)
-    this.setInteractivity(element, true)
-    if (blockMainContent) this.setMainContentInteractivity(false)
-    setTimeout(() => focusFirstChild(
-      element,
-      { priority: [['input', 'textarea', 'select', 'other', 'button']], ignore: `#${CLOSE_OVERLAY_ID}` },
-    ), 50)
-  }
-
-  private hideOverlay(element: HTMLElement | null | undefined) {
-    element?.setAttribute('class', '')
-    this.setInteractivity(element, false)
-    this.setMainContentInteractivity(true)
-  }
-
-  isModalOpen() {
-    return this.elements?.modal?.classList.contains('visible') ?? false
-  }
-
-  isRightPanelOpen() {
-    return this.elements?.rightPanel?.classList.contains('visible') ?? false
-  }
-
-  isBottomDialogOpen() {
-    return this.elements?.bottomDialog?.classList.contains('visible') ?? false
-  }
-
-  showCustomModal(content: React.ReactElement, { size = 'medium', onClose }: CustomModalOptions = {}) {
-    if (!this.elements?.modal) throw new ElementNotFound('modal', elementIds.modal)
-    if (!this.setContent.modal) throw new LayoutError('unable to show modal, because it has not been setup yet.')
-    this.onModalClose = onClose
-    this.setContent.modal(content)
-    this.showOverlay(this.elements.modal, [size])
-  }
-
-  showModal({ size, ...props }: OverlayContentProps & { size?: ModalSize }) {
-    this.showCustomModal(<OverlayContent {...props} onClose={() => this.closeModal()} type="modal" />, { size, onClose: props.onClose })
-  }
-
-  private showDialog(options: DialogOptions): Promise<boolean> {
-    let dialogResult = false
-    return new Promise((resolve, reject) => {
-      try {
-        this.showCustomModal(
-          <Dialog
-            {...options}
-            onCancel={() => this.closeModal()}
-            onConfirm={() => {
-              dialogResult = true
-              this.closeModal()
-            }}
-          />,
-          { size: 'small', onClose: () => resolve(dialogResult) },
-        )
-      } catch (error) {
-        reject(error)
-      }
-    })
-  }
-
-  confirm({ confirm, cancel, ...options }: DialogOptions): Promise<boolean> {
-    const t = getDictionary()
-    return this.showDialog({ ...options, confirm: confirm || t.confirm, cancel: cancel || t.cancel })
-  }
-
-  async alert({ confirm, showButton = true, ...options }: AlertOptions): Promise<void> {
-    const t = getDictionary()
-    await this.showDialog({ ...options, confirm: showButton ? (confirm || t.confirm) : undefined })
-  }
-
-  showBottomDialog({ message, cancel, confirm }: BottomDialogOptions): Promise<boolean> {
-    if (!this.elements?.bottomDialog) throw new ElementNotFound('bottom dialog', elementIds.bottomDialog)
-    if (!this.setContent.bottomDialog) throw new LayoutError('unable to show bottom dialog, because it has not been setup yet.')
-    return new Promise((resolve) => {
-      this.setContent.bottomDialog?.(
-        <>
-          {message}
-          <div className="btn-group">
-            {cancel && <Button onClick={() => resolve(false)} colorScheme="light" appearance="outlined">{cancel}</Button>}
-            {confirm && <Button onClick={() => resolve(true)} colorScheme="light">{confirm}</Button>}
-          </div>
-        </>,
-      )
-      this.showOverlay(this.elements?.bottomDialog, undefined, false)
-    })
-  }
-
-  showCustomRightPanel(content: ReactElement, { size = 'medium', onClose }: CustomRightPanelOptions = {}) {
-    if (!this.elements?.rightPanel) throw new ElementNotFound('right panel overlay', elementIds.rightPanel)
-    if (!this.setContent.rightPanel) throw new LayoutError('unable to show right panel overlay, because it has not been setup yet.')
-    this.onModalClose = onClose
-    this.setContent.rightPanel(content)
-    this.elements?.rightPanel.classList.add(size)
-    setTimeout(() => {
-      this.showOverlay(this.elements?.rightPanel)
-    })
-  }
-
-  showRightPanel({ size, ...props }: OverlayContentProps & { size?: OverlaySize }) {
-    this.showCustomRightPanel(
-      <OverlayContent {...props} onClose={() => this.closeRightPanel()} type="panel" />,
-      { size, onClose: props.onClose },
-    )
-  }
-
-  closeModal(runCloseListener = true) {
-    this.elements?.modal?.classList.remove('visible')
-    this.elements?.backdrop?.setAttribute('class', '')
-    if (runCloseListener && this.onModalClose) {
-      const onClose = this.onModalClose
-      // setting it to undefined before running it prevents nested calls to closeModal from generating infinite loops.
-      this.onModalClose = undefined
-      onClose()
-    }
-    const animationMS = parseFloat(valueOfLayoutVar('--modal-animation-duration')) * 1000
-    setTimeout(
-      () => {
-        if (this.elements?.backdrop?.classList.contains('visible')) {
-          // eslint-disable-next-line no-console
-          console.warn(multipleCallsWarning('modal', animationMS))
-          this.elements?.modal?.classList.remove('visible')
-        }
-        if (this.setContent.modal) this.setContent.modal(undefined)
-        this.hideOverlay(this.elements?.modal)
-      },
-      animationMS,
-    )
-  }
-
-  closeRightPanel(runCloseListener = true) {
-    this.elements?.rightPanel?.classList.remove('visible')
-    this.elements?.backdrop?.setAttribute('class', '')
-    if (runCloseListener && this.onModalClose) {
-      const onClose = this.onModalClose
-      // setting it to undefined before running it prevents nested calls to closeRightPanel from generating infinite loops.
-      this.onModalClose = undefined
-      onClose()
-    }
-    const animationMS = parseFloat(valueOfLayoutVar('--right-panel-animation-duration')) * 1000
-    setTimeout(
-      () => {
-        if (this.elements?.backdrop?.classList.contains('visible')) {
-          // eslint-disable-next-line no-console
-          console.warn(multipleCallsWarning('rightPanel', animationMS))
-          this.elements?.rightPanel?.classList.remove('visible')
-        }
-        if (this.setContent.rightPanel) this.setContent.rightPanel(undefined)
-        this.hideOverlay(this.elements?.rightPanel)
-      },
-      animationMS,
-    )
-  }
-
-  closeBottomDialog() {
-    this.hideOverlay(this.elements?.bottomDialog)
-  }
-
-  isInsideModal(element: HTMLElement) {
-    return !!this.elements?.modal?.contains(element)
-  }
-
-  isInsideRightPanel(element: HTMLElement) {
-    return !!this.elements?.rightPanel?.contains(element)
-  }
-
-  showToaster = showReactToaster
-}
-
-export const overlay = new LayoutOverlayManager()
+/* eslint-disable react-hooks/rules-of-hooks */
+
+import { Button } from '@citric/core'
+import { ReactElement, useLayoutEffect, useState } from 'react'
+import { Dialog, DialogOptions } from './components/Dialog'
+import { CLOSE_OVERLAY_ID, OverlayContent, OverlayContentProps } from './components/OverlayContent'
+import { getDictionary } from './dictionary'
+import { LayoutElements, elementIds, getLayoutElements } from './elements'
+import { ElementNotFound, LayoutError } from './errors'
+import { showToaster as showReactToaster } from './toaster'
+import { focusFirstChild, valueOfLayoutVar } from './utils'
+
+interface AlertOptions extends Omit<DialogOptions, 'cancel'> {
+  showButton?: boolean,
+}
+
+type BottomDialogOptions = Omit<DialogOptions, 'title'>
+type OverlaySize = 'small' | 'medium' | 'large'
+type ModalSize = 'fit-content' | OverlaySize
+type SetContentFn = ((content: ReactElement | undefined) => void) | undefined
+
+interface OverlayContentSetter {
+  modal?: SetContentFn,
+  rightPanel?: SetContentFn,
+  bottomDialog?: SetContentFn,
+}
+
+interface CustomModalOptions {
+  size?: ModalSize,
+  onClose?: () => void,
+}
+
+interface CustomRightPanelOptions {
+  size?: OverlaySize,
+  onClose?: () => void,
+}
+
+function multipleCallsWarning(type: 'modal' | 'rightPanel', timeMS: number) {
+  return `
+    Attempted to show a modal or rightPanel while a ${type} was still being closed. Closing a ${type} takes only ${timeMS}ms, so this action
+    is unlikely to have been triggered by the user and may point to errors in your code. Please check.\nTip: showModal and showRightPanel
+    are sideEffects and should never be called during the render of a component. Try to use "useEffect" or link it to an event, like
+    "onClick".
+  `.replace(/\s*\n\s+/g, ' ')
+}
+
+class LayoutOverlayManager {
+  static readonly instance?: LayoutOverlayManager
+  private setContent: OverlayContentSetter = {}
+  private elements?: LayoutElements
+  private onModalClose?: () => void
+
+  private setupElements() {
+    this.elements = getLayoutElements()
+    this.elements.backdrop?.addEventListener('mousedown', (event) => {
+      if (this.isModalOpen()) !this.elements?.modal?.contains?.(event.target as Node) && this.closeModal()
+      else if (this.isRightPanelOpen()) !this.elements?.rightPanel?.contains?.(event.target as Node) && this.closeRightPanel()
+      else this.setMainContentInteractivity(true)
+    })
+    this.elements.backdrop?.addEventListener('keydown', (event) => {
+      if (event.key !== 'Escape') return
+      if (this.isModalOpen()) this.closeModal()
+      if (this.isRightPanelOpen()) this.closeRightPanel()
+      else this.setMainContentInteractivity(true)
+      event.preventDefault()
+    })
+    this.setInteractivity(this.elements?.modal, false)
+    this.setInteractivity(this.elements?.rightPanel, false)
+    this.setInteractivity(this.elements?.bottomDialog, false)
+  }
+
+  // this should actually be like Kotlin's "internal", i.e. private to any user of the lib, but public to the lib itself.
+  // @ts-ignore
+  private useOverlays() {
+    useLayoutEffect(() => {
+      if (!this.elements) this.setupElements()
+    }, [])
+    const [modal, setModal] = useState<ReactElement | undefined>()
+    const [rightPanel, setRightPanel] = useState<ReactElement | undefined>()
+    const [bottomDialog, setBottomDialog] = useState<ReactElement | undefined>()
+    this.setContent.modal = setModal
+    this.setContent.rightPanel = setRightPanel
+    this.setContent.bottomDialog = setBottomDialog
+    return { modal, rightPanel, bottomDialog }
+  }
+
+  private setInteractivity(element: HTMLElement | null | undefined, interactive: boolean) {
+    if (interactive) {
+      element?.removeAttribute('inert')
+      element?.removeAttribute('aria-hidden')
+    } else {
+      element?.setAttribute('aria-hidden', '')
+      element?.setAttribute('inert', '')
+    }
+  }
+
+  private setMainContentInteractivity(interactive: boolean) {
+    this.setInteractivity(this.elements?.page, interactive)
+    this.setInteractivity(this.elements?.header, interactive)
+    this.setInteractivity(this.elements?.menu, interactive)
+    this.elements?.backdrop?.setAttribute('class', interactive ? '' : 'visible')
+  }
+
+  private showOverlay(element: HTMLElement | null | undefined, extraClasses: string[] = [], blockMainContent = true) {
+    element?.classList.add('visible', ...extraClasses)
+    this.setInteractivity(element, true)
+    if (blockMainContent) this.setMainContentInteractivity(false)
+    setTimeout(() => focusFirstChild(
+      element,
+      { priority: [['input', 'textarea', 'select', 'other', 'button']], ignore: `#${CLOSE_OVERLAY_ID}` },
+    ), 50)
+  }
+
+  private hideOverlay(element: HTMLElement | null | undefined) {
+    element?.setAttribute('class', '')
+    this.setInteractivity(element, false)
+    this.setMainContentInteractivity(true)
+  }
+
+  isModalOpen() {
+    return this.elements?.modal?.classList.contains('visible') ?? false
+  }
+
+  isRightPanelOpen() {
+    return this.elements?.rightPanel?.classList.contains('visible') ?? false
+  }
+
+  isBottomDialogOpen() {
+    return this.elements?.bottomDialog?.classList.contains('visible') ?? false
+  }
+
+  showCustomModal(content: React.ReactElement, { size = 'medium', onClose }: CustomModalOptions = {}) {
+    if (!this.elements?.modal) throw new ElementNotFound('modal', elementIds.modal)
+    if (!this.setContent.modal) throw new LayoutError('unable to show modal, because it has not been setup yet.')
+    this.onModalClose = onClose
+    this.setContent.modal(content)
+    this.showOverlay(this.elements.modal, [size])
+  }
+
+  showModal({ size, ...props }: OverlayContentProps & { size?: ModalSize }) {
+    this.showCustomModal(<OverlayContent {...props} onClose={() => this.closeModal()} type="modal" />, { size, onClose: props.onClose })
+  }
+
+  private showDialog(options: DialogOptions): Promise<boolean> {
+    let dialogResult = false
+    return new Promise((resolve, reject) => {
+      try {
+        this.showCustomModal(
+          <Dialog
+            {...options}
+            onCancel={() => this.closeModal()}
+            onConfirm={() => {
+              dialogResult = true
+              this.closeModal()
+            }}
+          />,
+          { size: 'small', onClose: () => resolve(dialogResult) },
+        )
+      } catch (error) {
+        reject(error)
+      }
+    })
+  }
+
+  confirm({ confirm, cancel, ...options }: DialogOptions): Promise<boolean> {
+    const t = getDictionary()
+    return this.showDialog({ ...options, confirm: confirm || t.confirm, cancel: cancel || t.cancel })
+  }
+
+  async alert({ confirm, showButton = true, ...options }: AlertOptions): Promise<void> {
+    const t = getDictionary()
+    await this.showDialog({ ...options, confirm: showButton ? (confirm || t.confirm) : undefined })
+  }
+
+  showBottomDialog({ message, cancel, confirm }: BottomDialogOptions): Promise<boolean> {
+    if (!this.elements?.bottomDialog) throw new ElementNotFound('bottom dialog', elementIds.bottomDialog)
+    if (!this.setContent.bottomDialog) throw new LayoutError('unable to show bottom dialog, because it has not been setup yet.')
+    return new Promise((resolve) => {
+      this.setContent.bottomDialog?.(
+        <>
+          {message}
+          <div className="btn-group">
+            {cancel && <Button onClick={() => resolve(false)} colorScheme="light" appearance="outlined">{cancel}</Button>}
+            {confirm && <Button onClick={() => resolve(true)} colorScheme="light">{confirm}</Button>}
+          </div>
+        </>,
+      )
+      this.showOverlay(this.elements?.bottomDialog, undefined, false)
+    })
+  }
+
+  showCustomRightPanel(content: ReactElement, { size = 'medium', onClose }: CustomRightPanelOptions = {}) {
+    if (!this.elements?.rightPanel) throw new ElementNotFound('right panel overlay', elementIds.rightPanel)
+    if (!this.setContent.rightPanel) throw new LayoutError('unable to show right panel overlay, because it has not been setup yet.')
+    this.onModalClose = onClose
+    this.setContent.rightPanel(content)
+    this.elements?.rightPanel.classList.add(size)
+    setTimeout(() => {
+      this.showOverlay(this.elements?.rightPanel)
+    })
+  }
+
+  showRightPanel({ size, ...props }: OverlayContentProps & { size?: OverlaySize }) {
+    this.showCustomRightPanel(
+      <OverlayContent {...props} onClose={() => this.closeRightPanel()} type="panel" />,
+      { size, onClose: props.onClose },
+    )
+  }
+
+  closeModal(runCloseListener = true) {
+    this.elements?.modal?.classList.remove('visible')
+    this.elements?.backdrop?.setAttribute('class', '')
+    if (runCloseListener && this.onModalClose) {
+      const onClose = this.onModalClose
+      // setting it to undefined before running it prevents nested calls to closeModal from generating infinite loops.
+      this.onModalClose = undefined
+      onClose()
+    }
+    const animationMS = parseFloat(valueOfLayoutVar('--modal-animation-duration')) * 1000
+    setTimeout(
+      () => {
+        if (this.elements?.backdrop?.classList.contains('visible')) {
+          // eslint-disable-next-line no-console
+          console.warn(multipleCallsWarning('modal', animationMS))
+          this.elements?.modal?.classList.remove('visible')
+        }
+        if (this.setContent.modal) this.setContent.modal(undefined)
+        this.hideOverlay(this.elements?.modal)
+      },
+      animationMS,
+    )
+  }
+
+  closeRightPanel(runCloseListener = true) {
+    this.elements?.rightPanel?.classList.remove('visible')
+    this.elements?.backdrop?.setAttribute('class', '')
+    if (runCloseListener && this.onModalClose) {
+      const onClose = this.onModalClose
+      // setting it to undefined before running it prevents nested calls to closeRightPanel from generating infinite loops.
+      this.onModalClose = undefined
+      onClose()
+    }
+    const animationMS = parseFloat(valueOfLayoutVar('--right-panel-animation-duration')) * 1000
+    setTimeout(
+      () => {
+        if (this.elements?.backdrop?.classList.contains('visible')) {
+          // eslint-disable-next-line no-console
+          console.warn(multipleCallsWarning('rightPanel', animationMS))
+          this.elements?.rightPanel?.classList.remove('visible')
+        }
+        if (this.setContent.rightPanel) this.setContent.rightPanel(undefined)
+        this.hideOverlay(this.elements?.rightPanel)
+      },
+      animationMS,
+    )
+  }
+
+  closeBottomDialog() {
+    this.hideOverlay(this.elements?.bottomDialog)
+  }
+
+  isInsideModal(element: HTMLElement) {
+    return !!this.elements?.modal?.contains(element)
+  }
+
+  isInsideRightPanel(element: HTMLElement) {
+    return !!this.elements?.rightPanel?.contains(element)
+  }
+
+  showToaster = showReactToaster
+}
+
+export const overlay = new LayoutOverlayManager()