@pyreon/elements 0.24.4 → 0.24.6

package/src/List/component.tsx

@@ -1,105 +0,0 @@
-/**
- * List component that combines Iterator (data-driven rendering) with an
- * optional Element root wrapper. When `rootElement` is false (default),
- * it renders a bare Iterator as a fragment. When true, the Iterator output
- * is wrapped in an Element that receives all non-iterator props (e.g.,
- * layout, alignment, css), allowing the list to be styled as a single block.
- */
-import type { VNodeChild } from '@pyreon/core'
-import { splitProps } from '@pyreon/core'
-import { omit, pick } from '@pyreon/ui-core'
-import { PKG_NAME } from '../constants'
-import type { ElementProps } from '../Element'
-import { Element } from '../Element'
-import type {
-  ChildrenProps as IteratorChildrenProps,
-  LooseProps as IteratorLooseProps,
-  ObjectProps as IteratorObjectProps,
-  Props as IteratorProps,
-  SimpleProps as IteratorSimpleProps,
-  ObjectValue,
-  SimpleValue,
-} from '../helpers/Iterator'
-import Iterator from '../helpers/Iterator'
-import type { MergeTypes } from '../types'
-
-type ListOnly = {
-  /**
-   * A boolean value. When set to `false`, component returns fragment.
-   * When set to `true`, component returns as the **root** element `Element`
-   * component.
-   */
-  rootElement?: boolean
-  /**
-   * Label prop from `Element` component is being ignored.
-   */
-  label?: never
-  /**
-   * Content prop from `Element` component is being ignored.
-   */
-  content?: never
-}
-
-/**
- * Props that List accepts on top of the Iterator branch — the Element prop
- * surface (so `tag`, `direction`, `alignX`, etc. forward when
- * `rootElement` is true) plus the List-only toggle.
- */
-type ListExtras = Partial<Omit<ElementProps, 'children' | 'content' | 'label'>> & ListOnly
-
-/**
- * Public Props — generic over the data element type so callers get the same
- * inference Iterator does, plus the List-specific `rootElement` toggle and
- * Element prop forwarding.
- *
- *   Props<string>          → SimpleProps & ListExtras  (valueName REQUIRED)
- *   Props<{ id; name }>    → ObjectProps & ListExtras  (valueName FORBIDDEN)
- *   Props<unknown> / Props → LooseProps & ListExtras   (today's behavior)
- */
-export type Props<T = unknown> = MergeTypes<[IteratorProps<T>, ListExtras]>
-
-// Internal spread — runtime is correct, but the picked subset can't satisfy
-// any specific Iterator overload statically (which is good — the public
-// overloads enforce constraints). Cast Iterator to a loose callable for
-// the internal forwarding only; public consumers still see the strict
-// overloaded interface.
-const LooseIterator = Iterator as unknown as (props: IteratorLooseProps) => VNodeChild
-
-const Component = (allProps: IteratorLooseProps & ListExtras) => {
-  const [own, props] = splitProps(allProps as Record<string, unknown>, ['rootElement', 'ref'])
-  const renderedList = <LooseIterator {...pick(props, Iterator.RESERVED_PROPS)} />
-
-  if (!own.rootElement) return renderedList
-
-  return (
-    <Element ref={own.ref as ElementProps['ref']} {...omit(props, Iterator.RESERVED_PROPS)}>
-      {renderedList}
-    </Element>
-  )
-}
-
-const name = `${PKG_NAME}/List` as const
-
-;(Component as { displayName?: string }).displayName = name
-;(Component as { pkgName?: string }).pkgName = PKG_NAME
-;(Component as { PYREON__COMPONENT?: string }).PYREON__COMPONENT = name
-
-// ---------------------------------------------------------------------------
-// Public callable type — same overload pattern as Iterator so JSX-site
-// inference flows through without callers having to spell out `<T>`.
-// ---------------------------------------------------------------------------
-export interface ListComponent {
-  // T inferred from `data`. Order: SimpleProps, ObjectProps, ChildrenProps,
-  // then a LooseProps fallback for forwarding patterns where derived
-  // `$$types['data']` is a wide union that doesn't bind to any narrow
-  // overload. See Iterator's IteratorComponent for the full rationale.
-  <T extends SimpleValue>(props: IteratorSimpleProps<T> & ListExtras): VNodeChild
-  <T extends ObjectValue>(props: IteratorObjectProps<T> & ListExtras): VNodeChild
-  (props: IteratorChildrenProps & ListExtras): VNodeChild
-  (props: IteratorLooseProps & ListExtras): VNodeChild
-  displayName?: string
-  pkgName?: string
-  PYREON__COMPONENT?: string
-}
-
-export default Component as unknown as ListComponent

package/src/List/index.ts

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

package/src/Overlay/component.tsx

@@ -1,140 +0,0 @@
-/**
- * Overlay component that renders a trigger element and conditionally shows
- * content via a Portal. The trigger receives a ref and optional show/hide
- * callbacks; the content is positioned and managed by the useOverlay hook.
- * A context Provider wraps the content to support nested overlays (e.g.,
- * a dropdown inside another dropdown) via blocked-state propagation.
- */
-
-import type { VNodeChild } from '@pyreon/core'
-import { nativeCompat, onMount, Portal, splitProps } from '@pyreon/core'
-import { render } from '@pyreon/ui-core'
-import { PKG_NAME } from '../constants'
-import type { Content, PyreonComponent } from '../types'
-import useOverlay, { type UseOverlayProps } from './useOverlay'
-
-const IS_BROWSER = typeof window !== 'undefined'
-
-type Align = 'bottom' | 'top' | 'left' | 'right'
-type AlignX = 'left' | 'center' | 'right'
-type AlignY = 'bottom' | 'top' | 'center'
-
-type TriggerRenderer = (
-  props: Partial<{
-    active: boolean
-    showContent: () => void
-    hideContent: () => void
-  }>,
-) => VNodeChild
-
-type ContentRenderer = (
-  props: Partial<{
-    active: boolean
-    showContent: () => void
-    hideContent: () => void
-    align: Align
-    alignX: AlignX
-    alignY: AlignY
-  }>,
-) => VNodeChild
-
-export type Props = {
-  children: ContentRenderer | Content
-  trigger: TriggerRenderer | Content
-  DOMLocation?: HTMLElement
-  triggerRefName?: string
-  contentRefName?: string
-} & UseOverlayProps
-
-const Component: PyreonComponent<Props> = (props) => {
-  const [own, overlayProps] = splitProps(props, [
-    'children',
-    'trigger',
-    'DOMLocation',
-    'triggerRefName',
-    'contentRefName',
-  ])
-
-  const triggerRefName = own.triggerRefName ?? 'ref'
-  const contentRefName = own.contentRefName ?? 'ref'
-
-  const {
-    active,
-    triggerRef,
-    contentRef,
-    showContent,
-    hideContent,
-    align,
-    alignX,
-    alignY,
-    setupListeners,
-    Provider,
-    ...ctx
-  } = useOverlay(overlayProps)
-
-  const { openOn, closeOn, type } = overlayProps
-
-  const passHandlers =
-    openOn === 'manual' || closeOn === 'manual' || closeOn === 'clickOutsideContent'
-
-  const ariaHasPopup = (() => {
-    switch (type) {
-      case 'modal':
-        return 'dialog' as const
-      case 'tooltip':
-        return 'true' as const
-      default:
-        return 'menu' as const
-    }
-  })()
-
-  // Set up event listeners on mount
-  onMount(() => {
-    const cleanup = setupListeners()
-    return cleanup
-  })
-
-  return (
-    <>
-      {render(own.trigger, {
-        [triggerRefName]: triggerRef,
-        active: active(),
-        'aria-expanded': active(),
-        'aria-haspopup': ariaHasPopup,
-        ...(passHandlers ? { showContent, hideContent } : {}),
-      })}
-
-      {() =>
-        IS_BROWSER && active() ? (
-          <Portal target={own.DOMLocation ?? document.body}>
-            <Provider {...ctx}>
-              {render(own.children, {
-                [contentRefName]: contentRef,
-                role: type === 'modal' ? 'dialog' : undefined,
-                'aria-modal': type === 'modal' ? true : undefined,
-                active: active(),
-                align,
-                alignX: alignX(),
-                alignY: alignY(),
-                ...(passHandlers ? { showContent, hideContent } : {}),
-              })}
-            </Provider>
-          </Portal>
-        ) : null
-      }
-    </>
-  )
-}
-
-const name = `${PKG_NAME}/Overlay` as const
-
-Component.displayName = name
-Component.pkgName = PKG_NAME
-Component.PYREON__COMPONENT = name
-
-// Mark as native — compat-mode jsx() runtimes skip wrapCompatComponent so
-// Overlay's onMount + Portal + useOverlay hook setup run inside Pyreon's
-// setup frame.
-nativeCompat(Component)
-
-export default Component

package/src/Overlay/context.tsx

@@ -1,36 +0,0 @@
-/**
- * Context for nested overlay coordination. When a child overlay opens, it
- * sets the parent's blocked state to true, preventing the parent from
- * closing in response to click/hover events that belong to the child.
- */
-
-import type { VNodeChild } from '@pyreon/core'
-import { createContext, nativeCompat, provide, useContext } from '@pyreon/core'
-
-export interface OverlayContext {
-  blocked: boolean | (() => boolean)
-  setBlocked: () => void
-  setUnblocked: () => void
-}
-
-const context = createContext<OverlayContext>({} as OverlayContext)
-
-export const useOverlayContext = () => useContext(context)
-
-const Component = (props: OverlayContext & { children: VNodeChild }) => {
-  const ctx = {
-    blocked: props.blocked,
-    setBlocked: props.setBlocked,
-    setUnblocked: props.setUnblocked,
-  }
-
-  provide(context, ctx)
-
-  return <>{props.children}</>
-}
-
-// Mark as native — invoked by Overlay internally; needs Pyreon's setup
-// frame for provide(context, ...) to reach descendant overlays.
-nativeCompat(Component)
-
-export default Component

package/src/Overlay/index.ts

@@ -1,7 +0,0 @@
-import component, { type Props } from './component'
-import OverlayProvider from './context'
-import useOverlay, { type UseOverlayProps } from './useOverlay'
-
-export type { Props as OverlayProps, UseOverlayProps }
-
-export { component as Overlay, OverlayProvider, useOverlay }

package/src/Overlay/positioning.ts

@@ -1,191 +0,0 @@
-/**
- * Pure positioning helpers for the Overlay component. Split out from
- * `useOverlay.tsx` so the SSR-fallback branches (`typeof window === 'undefined'`)
- * can be exercised directly by tests that stub `globalThis.window` — the
- * `useOverlay` hook itself runs these via event handlers registered inside
- * `onMount`, which are unreachable during module-level test imports in
- * happy-dom (where `window` is always defined).
- */
-
-export type OverlayPosition = Partial<{
-  top: number | string
-  bottom: number | string
-  left: number | string
-  right: number | string
-}>
-
-export type Align = 'bottom' | 'top' | 'left' | 'right'
-export type AlignX = 'left' | 'center' | 'right'
-export type AlignY = 'bottom' | 'top' | 'center'
-
-export type PositionResult = {
-  pos: OverlayPosition
-  resolvedAlignX: AlignX
-  resolvedAlignY: AlignY
-}
-
-const sel = <T,>(cond: boolean, a: T, b: T): T => (cond ? a : b)
-
-export const calcDropdownVertical = (
-  c: DOMRect,
-  t: DOMRect,
-  align: 'top' | 'bottom',
-  alignX: AlignX,
-  offsetX: number,
-  offsetY: number,
-): PositionResult => {
-  // SSR-fallback: positioning only runs in the mounted browser context, but
-  // the explicit guard documents the SSR-safety contract at the callsite
-  // and lets `no-window-in-ssr` prove it locally. Return shape mirrors the
-  // "no element" path below (empty `pos`, alignment preserved).
-  if (typeof window === 'undefined') return { pos: {}, resolvedAlignX: alignX, resolvedAlignY: align }
-  const pos: OverlayPosition = {}
-
-  const topPos = t.top - offsetY - c.height
-  const bottomPos = t.bottom + offsetY
-  const leftPos = t.left + offsetX
-  const rightPos = t.right - offsetX - c.width
-
-  const fitsTop = topPos >= 0
-  const fitsBottom = bottomPos + c.height <= window.innerHeight
-  const fitsLeft = leftPos + c.width <= window.innerWidth
-  const fitsRight = rightPos >= 0
-
-  const useTop = sel(align === 'top', fitsTop, !fitsBottom)
-  pos.top = sel(useTop, topPos, bottomPos)
-  const resolvedAlignY: AlignY = sel(useTop, 'top', 'bottom')
-
-  let resolvedAlignX: AlignX = alignX
-  if (alignX === 'left') {
-    pos.left = sel(fitsLeft, leftPos, rightPos)
-    resolvedAlignX = sel(fitsLeft, 'left', 'right')
-  } else if (alignX === 'right') {
-    pos.left = sel(fitsRight, rightPos, leftPos)
-    resolvedAlignX = sel(fitsRight, 'right', 'left')
-  } else {
-    const center = t.left + (t.right - t.left) / 2 - c.width / 2
-    const fitsCL = center >= 0
-    const fitsCR = center + c.width <= window.innerWidth
-
-    if (fitsCL && fitsCR) {
-      resolvedAlignX = 'center'
-      pos.left = center
-    } else if (fitsCL) {
-      resolvedAlignX = 'left'
-      pos.left = leftPos
-    } else if (fitsCR) {
-      resolvedAlignX = 'right'
-      pos.left = rightPos
-    }
-  }
-
-  return { pos, resolvedAlignX, resolvedAlignY }
-}
-
-export const calcDropdownHorizontal = (
-  c: DOMRect,
-  t: DOMRect,
-  align: 'left' | 'right',
-  alignY: AlignY,
-  offsetX: number,
-  offsetY: number,
-): PositionResult => {
-  if (typeof window === 'undefined') return { pos: {}, resolvedAlignX: align, resolvedAlignY: alignY }
-  const pos: OverlayPosition = {}
-
-  const leftPos = t.left - offsetX - c.width
-  const rightPos = t.right + offsetX
-  const topPos = t.top + offsetY
-  const bottomPos = t.bottom - offsetY - c.height
-
-  const fitsLeft = leftPos >= 0
-  const fitsRight = rightPos + c.width <= window.innerWidth
-  const fitsTop = topPos + c.height <= window.innerHeight
-  const fitsBottom = bottomPos >= 0
-
-  const useLeft = sel(align === 'left', fitsLeft, !fitsRight)
-  pos.left = sel(useLeft, leftPos, rightPos)
-  const resolvedAlignX: AlignX = sel(useLeft, 'left', 'right')
-
-  let resolvedAlignY: AlignY = alignY
-  if (alignY === 'top') {
-    pos.top = sel(fitsTop, topPos, bottomPos)
-    resolvedAlignY = sel(fitsTop, 'top', 'bottom')
-  } else if (alignY === 'bottom') {
-    pos.top = sel(fitsBottom, bottomPos, topPos)
-    resolvedAlignY = sel(fitsBottom, 'bottom', 'top')
-  } else {
-    const center = t.top + (t.bottom - t.top) / 2 - c.height / 2
-    const fitsCT = center >= 0
-    const fitsCB = center + c.height <= window.innerHeight
-
-    if (fitsCT && fitsCB) {
-      resolvedAlignY = 'center'
-      pos.top = center
-    } else if (fitsCT) {
-      resolvedAlignY = 'top'
-      pos.top = topPos
-    } else if (fitsCB) {
-      resolvedAlignY = 'bottom'
-      pos.top = bottomPos
-    }
-  }
-
-  return { pos, resolvedAlignX, resolvedAlignY }
-}
-
-export const calcModalPos = (
-  c: DOMRect,
-  alignX: AlignX,
-  alignY: AlignY,
-  offsetX: number,
-  offsetY: number,
-): OverlayPosition => {
-  if (typeof window === 'undefined') return {}
-  const pos: OverlayPosition = {}
-
-  switch (alignX) {
-    case 'right':
-      pos.right = offsetX
-      break
-    case 'left':
-      pos.left = offsetX
-      break
-    case 'center':
-      pos.left = window.innerWidth / 2 - c.width / 2
-      break
-    default:
-      pos.right = offsetX
-  }
-
-  switch (alignY) {
-    case 'top':
-      pos.top = offsetY
-      break
-    case 'center':
-      pos.top = window.innerHeight / 2 - c.height / 2
-      break
-    case 'bottom':
-      pos.bottom = offsetY
-      break
-    default:
-      pos.top = offsetY
-  }
-
-  return pos
-}
-
-export const adjustForAncestor = (
-  pos: OverlayPosition,
-  ancestor: { top: number; left: number },
-): OverlayPosition => {
-  if (ancestor.top === 0 && ancestor.left === 0) return pos
-
-  const result = { ...pos }
-  if (typeof result.top === 'number') result.top -= ancestor.top
-  if (typeof result.bottom === 'number') result.bottom += ancestor.top
-  if (typeof result.left === 'number') result.left -= ancestor.left
-  if (typeof result.right === 'number') result.right += ancestor.left
-
-  return result
-}