@pyreon/elements 0.24.5 → 0.25.0

package/src/Overlay/useOverlay.tsx

@@ -1,461 +0,0 @@
-/**
- * Core hook powering the Overlay component. Manages open/close state, DOM
- * event listeners (click, hover, scroll, resize, ESC key), and dynamic
- * positioning of overlay content relative to its trigger. Supports dropdown,
- * tooltip, popover, and modal types with automatic edge-of-viewport flipping.
- * Event handlers are throttled for performance, and nested overlay blocking
- * is coordinated through the overlay context.
- */
-
-import { signal } from '@pyreon/reactivity'
-import { throttle } from '@pyreon/ui-core'
-import { value } from '@pyreon/unistyle'
-import { IS_DEVELOPMENT } from '../utils'
-import Provider, { useOverlayContext } from './context'
-import {
-  adjustForAncestor,
-  calcDropdownHorizontal,
-  calcDropdownVertical,
-  calcModalPos,
-  type Align,
-  type AlignX,
-  type AlignY,
-  type OverlayPosition,
-} from './positioning'
-
-export type UseOverlayProps = Partial<{
-  isOpen: boolean
-  openOn: 'click' | 'hover' | 'manual'
-  closeOn: 'click' | 'clickOnTrigger' | 'clickOutsideContent' | 'hover' | 'manual'
-  type: 'dropdown' | 'tooltip' | 'popover' | 'modal' | 'custom'
-  position: 'absolute' | 'fixed' | 'relative' | 'static'
-  align: Align
-  alignX: AlignX
-  alignY: AlignY
-  offsetX: number
-  offsetY: number
-  throttleDelay: number
-  parentContainer: HTMLElement | null
-  closeOnEsc: boolean
-  hoverDelay: number
-  disabled: boolean
-  onOpen: () => void
-  onClose: () => void
-}>
-
-// Reference counter for nested modals sharing document.body overflow lock.
-let modalOverflowCount = 0
-
-// Hoisted: closeOn values that count as "click-driven close". Inlined
-// previously, allocating a fresh 3-element array on each click-listener
-// setupListeners re-run. Ported from vitus-labs `804dd0e2`.
-const CLICK_CLOSE_KINDS: ReadonlySet<string> = new Set([
-  'click',
-  'clickOnTrigger',
-  'clickOutsideContent',
-])
-
-const devWarn = (msg: string) => {
-  if (!IS_DEVELOPMENT) return
-  // oxlint-disable-next-line no-console
-  console.warn(msg)
-}
-
-
-type ComputeResult = {
-  pos: OverlayPosition
-  resolvedAlignX?: AlignX
-  resolvedAlignY?: AlignY
-}
-
-const computePosition = (
-  type: string,
-  align: Align,
-  alignX: AlignX,
-  alignY: AlignY,
-  offsetX: number,
-  offsetY: number,
-  triggerEl: HTMLElement | null,
-  contentEl: HTMLElement | null,
-  ancestorOffset: { top: number; left: number },
-): ComputeResult => {
-  const isDropdown = ['dropdown', 'tooltip', 'popover'].includes(type)
-
-  if (isDropdown && (!triggerEl || !contentEl)) {
-    devWarn(
-      `[@pyreon/elements] Overlay (${type}): ` +
-        `${triggerEl ? 'contentRef' : 'triggerRef'} is not attached. ` +
-        'Position cannot be calculated without both refs.',
-    )
-    return { pos: {} }
-  }
-
-  if (isDropdown && triggerEl && contentEl) {
-    const c = contentEl.getBoundingClientRect()
-    const t = triggerEl.getBoundingClientRect()
-    const result =
-      align === 'top' || align === 'bottom'
-        ? calcDropdownVertical(c, t, align, alignX, offsetX, offsetY)
-        : calcDropdownHorizontal(c, t, align as 'left' | 'right', alignY, offsetX, offsetY)
-
-    return {
-      pos: adjustForAncestor(result.pos, ancestorOffset),
-      resolvedAlignX: result.resolvedAlignX,
-      resolvedAlignY: result.resolvedAlignY,
-    }
-  }
-
-  if (type === 'modal') {
-    if (!contentEl) {
-      devWarn(
-        '[@pyreon/elements] Overlay (modal): contentRef is not attached. ' +
-          'Modal position cannot be calculated without a content element.',
-      )
-      return { pos: {} }
-    }
-    const c = contentEl.getBoundingClientRect()
-    return {
-      pos: adjustForAncestor(calcModalPos(c, alignX, alignY, offsetX, offsetY), ancestorOffset),
-    }
-  }
-
-  return { pos: {} }
-}
-
-const processVisibilityEvent = (
-  e: Event,
-  active: boolean,
-  openOn: string,
-  closeOn: string,
-  isTrigger: (evt: Event) => boolean,
-  isContent: (evt: Event) => boolean,
-  showContent: () => void,
-  hideContent: () => void,
-) => {
-  if (!active && openOn === 'click' && e.type === 'click' && isTrigger(e)) {
-    showContent()
-    return
-  }
-
-  if (!active) return
-
-  if (closeOn === 'hover' && e.type === 'scroll') {
-    hideContent()
-    return
-  }
-
-  if (e.type !== 'click') return
-
-  if (closeOn === 'click') {
-    hideContent()
-  } else if (closeOn === 'clickOnTrigger' && isTrigger(e)) {
-    hideContent()
-  } else if (closeOn === 'clickOutsideContent' && !isContent(e)) {
-    hideContent()
-  }
-}
-
-const useOverlay = ({
-  isOpen = false,
-  openOn = 'click',
-  closeOn = 'click',
-  type = 'dropdown',
-  position = 'fixed',
-  align = 'bottom',
-  alignX: propAlignX = 'left',
-  alignY: propAlignY = 'bottom',
-  offsetX = 0,
-  offsetY = 0,
-  throttleDelay = 200,
-  parentContainer,
-  closeOnEsc = true,
-  hoverDelay = 100,
-  disabled,
-  onOpen,
-  onClose,
-}: Partial<UseOverlayProps> = {}) => {
-  const ctx = useOverlayContext()
-
-  // Signal-based state
-  const active = signal(isOpen)
-  const isContentLoaded = signal(false)
-  const innerAlignX = signal(propAlignX)
-  const innerAlignY = signal(propAlignY)
-  const blockedCount = signal(0)
-
-  const blocked = () => blockedCount() > 0
-
-  // DOM refs (plain variables, component runs once)
-  let triggerEl: HTMLElement | null = null
-  let contentEl: HTMLElement | null = null
-  const _prevFocusEl: HTMLElement | null = null
-  let hoverTimeout: ReturnType<typeof setTimeout> | null = null
-
-  const triggerRef = (node: HTMLElement | null) => {
-    triggerEl = node
-  }
-
-  const contentRefCallback = (node: HTMLElement | null) => {
-    contentEl = node
-    isContentLoaded.set(!!node)
-  }
-
-  const setBlocked = () => blockedCount.update((c) => c + 1)
-  const setUnblocked = () => blockedCount.update((c) => Math.max(0, c - 1))
-
-  const showContent = () => {
-    active.set(true)
-    onOpen?.()
-    ctx.setBlocked?.()
-  }
-
-  const hideContent = () => {
-    active.set(false)
-    isContentLoaded.set(false)
-    onClose?.()
-    ctx.setUnblocked?.()
-  }
-
-  // Position calculation helpers
-  const getAncestorOffset = () => {
-    if (typeof document === 'undefined') return { top: 0, left: 0 }
-    if (position !== 'absolute' || !contentEl) {
-      return { top: 0, left: 0 }
-    }
-
-    const offsetParent = contentEl.offsetParent as HTMLElement | null
-    if (!offsetParent || offsetParent === document.body) {
-      return { top: 0, left: 0 }
-    }
-
-    const rect = offsetParent.getBoundingClientRect()
-    return { top: rect.top, left: rect.left }
-  }
-
-  const calculateContentPosition = () => {
-    if (!active() || !isContentLoaded()) return {}
-
-    const result = computePosition(
-      type,
-      align,
-      propAlignX,
-      propAlignY,
-      offsetX,
-      offsetY,
-      triggerEl,
-      contentEl,
-      getAncestorOffset(),
-    )
-
-    if (result.resolvedAlignX) innerAlignX.set(result.resolvedAlignX)
-    if (result.resolvedAlignY) innerAlignY.set(result.resolvedAlignY)
-
-    return result.pos
-  }
-
-  const assignContentPosition = (values: OverlayPosition = {}) => {
-    if (!contentEl) return
-
-    const el = contentEl
-    const setValue = (param?: string | number) => value(param, 16) as string
-
-    el.style.position = position
-
-    el.style.top = values.top != null ? setValue(values.top) : ''
-    el.style.bottom = values.bottom != null ? setValue(values.bottom) : ''
-    el.style.left = values.left != null ? setValue(values.left) : ''
-    el.style.right = values.right != null ? setValue(values.right) : ''
-  }
-
-  const setContentPosition = () => {
-    const currentPosition = calculateContentPosition()
-    assignContentPosition(currentPosition)
-  }
-
-  const isNodeOrChild = (getRef: () => HTMLElement | null) => (e: Event) => {
-    const ref = getRef()
-    if (e?.target && ref) {
-      return ref.contains(e.target as Element) || e.target === ref
-    }
-    return false
-  }
-
-  const handleVisibilityByEventType = (e: Event) => {
-    if (blocked() || disabled) return
-
-    processVisibilityEvent(
-      e,
-      active(),
-      openOn,
-      closeOn,
-      isNodeOrChild(() => triggerEl),
-      isNodeOrChild(() => contentEl),
-      showContent,
-      hideContent,
-    )
-  }
-
-  const handleContentPosition = throttle(() => setContentPosition(), throttleDelay)
-
-  const handleClick = (e: Event) => handleVisibilityByEventType(e)
-
-  const handleVisibility = throttle((e: Event) => handleVisibilityByEventType(e), throttleDelay)
-
-  // --------------------------------------------------------------------------
-  // Set up all event listeners on mount, clean up on unmount
-  // --------------------------------------------------------------------------
-  const setupListeners = () => {
-    if (typeof window === 'undefined') return () => {}
-    const cleanups: (() => void)[] = []
-
-    // Click-based open/close
-    const enabledClick = openOn === 'click' || CLICK_CLOSE_KINDS.has(closeOn)
-
-    if (enabledClick) {
-      window.addEventListener('click', handleClick)
-      cleanups.push(() => window.removeEventListener('click', handleClick))
-    }
-
-    // ESC key
-    if (closeOnEsc) {
-      const handleEscKey = (e: KeyboardEvent) => {
-        if (e.key === 'Escape' && active() && !blocked()) {
-          hideContent()
-        }
-      }
-      window.addEventListener('keydown', handleEscKey)
-      cleanups.push(() => window.removeEventListener('keydown', handleEscKey))
-    }
-
-    // Hover-based open/close
-    const enabledHover = openOn === 'hover' || closeOn === 'hover'
-    if (enabledHover) {
-      const clearHoverTimeout = () => {
-        if (hoverTimeout != null) {
-          clearTimeout(hoverTimeout)
-          hoverTimeout = null
-        }
-      }
-
-      const scheduleHide = () => {
-        clearHoverTimeout()
-        hoverTimeout = setTimeout(hideContent, hoverDelay)
-      }
-
-      const onTriggerEnter = () => {
-        clearHoverTimeout()
-        if (openOn === 'hover' && !active()) showContent()
-      }
-
-      const onTriggerLeave = () => {
-        if (closeOn === 'hover' && active()) scheduleHide()
-      }
-
-      const onContentEnter = () => {
-        clearHoverTimeout()
-      }
-
-      const onContentLeave = () => {
-        if (closeOn === 'hover' && active()) scheduleHide()
-      }
-
-      // We need to defer listener attachment until refs are available
-      const attachHoverListeners = () => {
-        if (triggerEl) {
-          triggerEl.addEventListener('mouseenter', onTriggerEnter)
-          triggerEl.addEventListener('mouseleave', onTriggerLeave)
-        }
-        if (contentEl) {
-          contentEl.addEventListener('mouseenter', onContentEnter)
-          contentEl.addEventListener('mouseleave', onContentLeave)
-        }
-      }
-
-      attachHoverListeners()
-
-      cleanups.push(() => {
-        clearHoverTimeout()
-        if (triggerEl) {
-          triggerEl.removeEventListener('mouseenter', onTriggerEnter)
-          triggerEl.removeEventListener('mouseleave', onTriggerLeave)
-        }
-        if (contentEl) {
-          contentEl.removeEventListener('mouseenter', onContentEnter)
-          contentEl.removeEventListener('mouseleave', onContentLeave)
-        }
-      })
-    }
-
-    // Resize/scroll repositioning
-    const shouldSetOverflow = type === 'modal'
-
-    const onScroll = (e: Event) => {
-      handleContentPosition()
-      handleVisibility(e)
-    }
-
-    if (shouldSetOverflow) {
-      modalOverflowCount++
-      if (modalOverflowCount === 1) document.body.style.overflow = 'hidden'
-    }
-
-    window.addEventListener('resize', handleContentPosition)
-    window.addEventListener('scroll', onScroll, { passive: true })
-    cleanups.push(() => {
-      handleContentPosition.cancel()
-      handleVisibility.cancel()
-      if (shouldSetOverflow) {
-        modalOverflowCount--
-        if (modalOverflowCount === 0) document.body.style.overflow = ''
-      }
-      window.removeEventListener('resize', handleContentPosition)
-      window.removeEventListener('scroll', onScroll)
-    })
-
-    // Parent container scroll
-    if (parentContainer) {
-      if (closeOn !== 'hover') parentContainer.style.overflow = 'hidden'
-
-      const onParentScroll = (e: Event) => {
-        handleContentPosition()
-        handleVisibility(e)
-      }
-
-      parentContainer.addEventListener('scroll', onParentScroll, {
-        passive: true,
-      })
-      cleanups.push(() => {
-        parentContainer.style.overflow = ''
-        parentContainer.removeEventListener('scroll', onParentScroll)
-      })
-    }
-
-    // Cleanup function
-    return () => {
-      for (const cleanup of cleanups) cleanup()
-    }
-  }
-
-  // Handle disabled state
-  if (disabled) {
-    active.set(false)
-  }
-
-  return {
-    triggerRef,
-    contentRef: contentRefCallback,
-    active,
-    align,
-    alignX: innerAlignX,
-    alignY: innerAlignY,
-    showContent,
-    hideContent,
-    blocked,
-    setBlocked,
-    setUnblocked,
-    setupListeners,
-    Provider,
-  }
-}
-
-export default useOverlay

package/src/Portal/component.tsx

@@ -1,54 +0,0 @@
-/**
- * Portal — renders children into a per-instance wrapper element appended to
- * `DOMLocation` (defaults to `document.body`). Mirrors vitus-labs's Portal:
- * a fresh wrapper is created per Portal mount, children render INSIDE it
- * (not directly into DOMLocation), and the wrapper is removed on unmount.
- *
- * Per-instance wrapper isolation matters when multiple Portals share a
- * DOMLocation (e.g. several modals on `document.body`) — without the wrapper
- * their children would intermingle, defeating CSS scoping and making
- * cleanup brittle.
- */
-
-import type { VNodeChild } from '@pyreon/core'
-import { Portal as CorePortal, onUnmount } from '@pyreon/core'
-import { PKG_NAME } from '../constants'
-import type { PyreonComponent } from '../types'
-
-export interface Props {
-  /**
-   * DOM element to mount the wrapper into. Defaults to `document.body`.
-   */
-  DOMLocation?: HTMLElement
-  /**
-   * Children rendered inside the wrapper.
-   */
-  children: VNodeChild
-  /**
-   * HTML tag for the per-instance wrapper element. Defaults to `'div'`.
-   */
-  tag?: string
-}
-
-const Component: PyreonComponent<Props> = (props) => {
-  if (typeof document === 'undefined') return null
-
-  const tag = props.tag ?? 'div'
-  const target = props.DOMLocation ?? document.body
-  const wrapper = document.createElement(tag)
-  target.appendChild(wrapper)
-
-  onUnmount(() => {
-    wrapper.remove()
-  })
-
-  return <CorePortal target={wrapper}>{props.children}</CorePortal>
-}
-
-const name = `${PKG_NAME}/Portal` as const
-
-Component.displayName = name
-Component.pkgName = PKG_NAME
-Component.PYREON__COMPONENT = name
-
-export default Component

package/src/Portal/index.ts

@@ -1,5 +0,0 @@
-import type { Props } from './component'
-import component from './component'
-
-export type { Props as PortalProps }
-export { component as Portal }

package/src/Text/component.tsx

@@ -1,67 +0,0 @@
-/**
- * Text component for rendering inline or block-level text. Supports a
- * `paragraph` shorthand that automatically renders as a `<p>` tag, or
- * a custom `tag` for semantic HTML (h1-h6, span, etc.). Marked with
- * a static `isText` flag so other components can detect text children.
- */
-
-import { splitProps } from '@pyreon/core'
-import type { PyreonHTMLAttributes, VNodeChild } from '@pyreon/core'
-import type { HTMLTextTags } from '@pyreon/ui-core'
-import { PKG_NAME } from '../constants'
-import type { ExtendCss, PyreonComponent } from '../types'
-import Styled from './styled'
-
-export type Props = Partial<{
-  /**
-   * Label can be used instead of children for inline syntax. But **children** prop takes a precedence
-   */
-  label: VNodeChild
-  /**
-   * Children to be rendered within **Text** component.
-   */
-  children: VNodeChild
-  /**
-   * Defines whether should behave as a block text element. Automatically adds **p** HTML tag
-   */
-  paragraph: boolean
-  /**
-   * Defines what kind of HTML tag should be rendered
-   */
-  tag: HTMLTextTags
-  /**
-   * If an additional styling needs to be added, it can be do so via injecting styles using this property.
-   */
-  css: ExtendCss
-}> &
-  PyreonHTMLAttributes
-
-const Component: PyreonComponent<Props> & {
-  isText?: true
-} = (props) => {
-  const [own, rest] = splitProps(props, ['paragraph', 'label', 'children', 'tag', 'css', 'ref'])
-
-  // `paragraph` shorthand maps to <p>; otherwise pass through `tag`. Ternary
-  // form replaces the prior `let finalTag` + if/else block — V8 prefers the
-  // single-assignment shape for inline-cache stability. Ported from
-  // vitus-labs `804dd0e2`.
-  const finalTag = own.paragraph ? 'p' : own.tag
-
-  return (
-    <Styled ref={own.ref} as={finalTag} $text={{ extraStyles: own.css }} {...rest}>
-      {own.children ?? own.label}
-    </Styled>
-  )
-}
-
-// ----------------------------------------------
-// DEFINE STATICS
-// ----------------------------------------------
-const name = `${PKG_NAME}/Text` as const
-
-Component.displayName = name
-Component.pkgName = PKG_NAME
-Component.PYREON__COMPONENT = name
-Component.isText = true
-
-export default Component

package/src/Text/index.ts

@@ -1,5 +0,0 @@
-import type { Props } from './component'
-import component from './component'
-
-export type { Props as TextProps }
-export { component as Text }

package/src/Text/styled.ts

@@ -1,30 +0,0 @@
-/**
- * Styled text primitive that inherits color, font-weight, and line-height
- * from its parent so it blends seamlessly into any context. Additional
- * styles can be injected via the responsive `extraStyles` prop processed
- * through makeItResponsive.
- */
-import { config } from '@pyreon/ui-core'
-import { extendCss, makeItResponsive } from '@pyreon/unistyle'
-import type { ResponsiveStylesCallback } from '../types'
-
-const { styled, css, textComponent } = config
-
-const styles: ResponsiveStylesCallback = ({ css: cssFn, theme: t }) => cssFn`
-  ${t.extraStyles && extendCss(t.extraStyles)};
-`
-
-export default styled(textComponent, { layer: 'elements' })`
-  ${css`
-    color: inherit;
-    font-weight: inherit;
-    line-height: 1;
-  `};
-
-  ${makeItResponsive({
-    key: '$text',
-    styles,
-    css,
-    normalize: false,
-  })};
-`

package/src/Util/component.tsx

@@ -1,43 +0,0 @@
-/**
- * Utility wrapper that injects className and/or style props into its
- * children without adding any DOM nodes of its own. Uses the core `render`
- * helper to clone children with the merged props.
- */
-
-import type { VNode, VNodeChild } from '@pyreon/core'
-import { render } from '@pyreon/ui-core'
-import { PKG_NAME } from '../constants'
-import type { PyreonComponent } from '../types'
-
-export interface Props {
-  /**
-   * Children to be rendered within **Util** component.
-   */
-  children: VNodeChild
-  /**
-   * Class name(s) to be added to children component.
-   */
-  className?: string | string[] | undefined
-  /**
-   * Style property to extend children component inline styles
-   */
-  style?: Record<string, unknown> | undefined
-}
-
-const Component: PyreonComponent<Props> = (({ children, className, style }: Props) => {
-  const mergedClasses = Array.isArray(className) ? className.join(' ') : className
-
-  const finalProps: Record<string, any> = {}
-  if (style) finalProps.style = style
-  if (mergedClasses) finalProps.className = mergedClasses
-
-  return render(children, finalProps) as VNode | null
-}) as PyreonComponent<Props>
-
-const name = `${PKG_NAME}/Util` as const
-
-Component.displayName = name
-Component.pkgName = PKG_NAME
-Component.PYREON__COMPONENT = name
-
-export default Component

package/src/Util/index.ts

@@ -1,5 +0,0 @@
-import type { Props } from './component'
-import component from './component'
-
-export type { Props as UtilProps }
-export { component as Util }