@pyreon/elements 0.15.0 → 0.18.0

package/src/__tests__/Portal.test.ts

@@ -1,68 +1,142 @@
-import type { VNode } from '@pyreon/core'
-import { Portal as CorePortal, h } from '@pyreon/core'
+import { h } from '@pyreon/core'
+import { mount } from '@pyreon/runtime-dom'
 import { describe, expect, it } from 'vitest'
 import { Portal } from '../Portal'
 
-const asVNode = (v: unknown) => v as VNode
-
 describe('Portal', () => {
-  describe('rendering', () => {
-    it('returns a VNode whose type is CorePortal', () => {
-      const child = h('div', null, 'modal content')
-      const result = asVNode(Portal({ children: child }))
-      expect(result.type).toBe(CorePortal)
-    })
+  describe('wrapper element creation', () => {
+    it('creates a per-instance wrapper appended to document.body by default', () => {
+      const before = document.body.children.length
+      const root = document.createElement('div')
+      document.body.appendChild(root)
+
+      const unmount = mount(h(Portal, { children: h('span', { id: 'pchild' }, 'modal') }), root)
+
+      // Wrapper appended directly to document.body (not inside `root`).
+      expect(document.body.children.length).toBe(before + 2) // root + portal wrapper
+      const wrapper = document.body.querySelector('#pchild')!.parentElement!
+      expect(wrapper).not.toBe(document.body)
+      expect(wrapper.tagName).toBe('DIV')
+      expect(wrapper.parentElement).toBe(document.body)
 
-    it('defaults target to document.body when DOMLocation is not provided', () => {
-      const child = h('div', null, 'content')
-      const result = asVNode(Portal({ children: child }))
-      const props = result.props as Record<string, unknown>
-      expect(props.target).toBe(document.body)
+      unmount()
+      root.remove()
     })
 
-    it('uses DOMLocation as target when provided', () => {
-      const customTarget = document.createElement('div')
-      const child = h('span', null, 'inside')
-      const result = asVNode(Portal({ DOMLocation: customTarget, children: child }))
-      const props = result.props as Record<string, unknown>
-      expect(props.target).toBe(customTarget)
+    it('uses the supplied tag for the wrapper element', () => {
+      const root = document.createElement('div')
+      document.body.appendChild(root)
+
+      const unmount = mount(
+        h(Portal, { tag: 'section', children: h('span', { id: 'tagchild' }, 'x') }),
+        root,
+      )
+
+      const wrapper = document.body.querySelector('#tagchild')!.parentElement!
+      expect(wrapper.tagName).toBe('SECTION')
+
+      unmount()
+      root.remove()
     })
 
-    it('passes children through to the CorePortal VNode', () => {
-      const child = h('div', { class: 'modal' }, 'Modal content')
-      const result = asVNode(Portal({ children: child }))
-      const props = result.props as Record<string, unknown>
-      expect(props.children).toBe(child)
+    it('appends the wrapper to DOMLocation when provided', () => {
+      const root = document.createElement('div')
+      const customTarget = document.createElement('article')
+      customTarget.id = 'custom-target'
+      document.body.appendChild(root)
+      document.body.appendChild(customTarget)
+
+      const unmount = mount(
+        h(Portal, { DOMLocation: customTarget, children: h('span', { id: 'cchild' }, 'inside') }),
+        root,
+      )
+
+      const wrapper = customTarget.querySelector('#cchild')!.parentElement!
+      expect(wrapper.parentElement).toBe(customTarget)
+
+      unmount()
+      root.remove()
+      customTarget.remove()
     })
 
-    it('passes string children', () => {
-      const result = asVNode(Portal({ children: 'text content' }))
-      const props = result.props as Record<string, unknown>
-      expect(props.children).toBe('text content')
+    it('renders children inside the wrapper', () => {
+      const root = document.createElement('div')
+      document.body.appendChild(root)
+
+      const unmount = mount(
+        h(Portal, { children: h('span', { id: 'inside-wrapper', class: 'modal' }, 'Modal') }),
+        root,
+      )
+
+      const child = document.body.querySelector('#inside-wrapper')!
+      expect(child.textContent).toBe('Modal')
+      const wrapper = child.parentElement!
+      expect(wrapper.parentElement).toBe(document.body)
+
+      unmount()
+      root.remove()
     })
 
-    it('passes number children', () => {
-      const result = asVNode(Portal({ children: 42 }))
-      const props = result.props as Record<string, unknown>
-      expect(props.children).toBe(42)
+    it('removes the wrapper from the DOM on unmount', () => {
+      const root = document.createElement('div')
+      document.body.appendChild(root)
+
+      const before = document.body.children.length
+      const unmount = mount(
+        h(Portal, { children: h('span', { id: 'cleanup-child' }, 'x') }),
+        root,
+      )
+      expect(document.body.children.length).toBe(before + 1) // wrapper added
+      const wrapper = document.body.querySelector('#cleanup-child')!.parentElement!
+      expect(wrapper.isConnected).toBe(true)
+
+      unmount()
+      expect(wrapper.isConnected).toBe(false)
+      expect(document.body.contains(wrapper)).toBe(false)
+
+      root.remove()
     })
 
-    it('passes nested VNode children', () => {
-      const nested = h('div', null, h('span', null, 'level 1'), h('span', null, 'level 2'))
-      const result = asVNode(Portal({ children: nested }))
-      const props = result.props as Record<string, unknown>
-      const childVNode = asVNode(props.children)
-      expect(childVNode.type).toBe('div')
-      expect(childVNode.children).toHaveLength(2)
+    it('removes the wrapper from a custom DOMLocation on unmount', () => {
+      const root = document.createElement('div')
+      const customTarget = document.createElement('div')
+      document.body.appendChild(root)
+      document.body.appendChild(customTarget)
+
+      const unmount = mount(
+        h(Portal, { DOMLocation: customTarget, children: h('span', { id: 'cu' }, 'x') }),
+        root,
+      )
+      expect(customTarget.children.length).toBe(1)
+
+      unmount()
+      expect(customTarget.children.length).toBe(0)
+
+      root.remove()
+      customTarget.remove()
     })
-  })
 
-  describe('tag prop', () => {
-    it('accepts tag prop without affecting output type', () => {
-      const child = h('div', null, 'content')
-      const result = asVNode(Portal({ tag: 'section', children: child }))
-      // tag is accepted but not used — output is still a Portal VNode
-      expect(result.type).toBe(CorePortal)
+    it('isolates per-instance wrappers when multiple Portals share a DOMLocation', () => {
+      const root = document.createElement('div')
+      document.body.appendChild(root)
+
+      const u1 = mount(h(Portal, { children: h('span', { id: 'p1' }, 'A') }), root)
+      const u2 = mount(h(Portal, { children: h('span', { id: 'p2' }, 'B') }), root)
+
+      const w1 = document.body.querySelector('#p1')!.parentElement!
+      const w2 = document.body.querySelector('#p2')!.parentElement!
+      expect(w1).not.toBe(w2)
+      expect(w1.parentElement).toBe(document.body)
+      expect(w2.parentElement).toBe(document.body)
+
+      u1()
+      // unmounting one Portal removes only its wrapper, not the sibling's
+      expect(w1.isConnected).toBe(false)
+      expect(w2.isConnected).toBe(true)
+
+      u2()
+      expect(w2.isConnected).toBe(false)
+      root.remove()
     })
   })
 

package/src/__tests__/Wrapper-innerhtml.test.tsx

@@ -0,0 +1,178 @@
+/**
+ * Regression: Wrapper used to silently drop `dangerouslySetInnerHTML`.
+ *
+ * Bug shape: `OWN_KEYS` listed `'dangerouslySetInnerHTML'`, so `splitProps`
+ * moved it into `own`. The Styled JSX call only spread `...commonProps`
+ * (built from `rest`) and never re-attached `own.dangerouslySetInnerHTML`.
+ * Both runtimes (`runtime-server` and `runtime-dom`) support the prop —
+ * the data was lost between Wrapper and the renderer.
+ *
+ * Two test layers:
+ *
+ * 1. **Mock-vnode tests** (this file's first describe block) — fast
+ *    structural assertions against the vnode tree Wrapper returns. Catches
+ *    the prop drop at the API surface where it originally happened.
+ *
+ * 2. **Real-h() mount tests** (second describe block) — uses real `h()` +
+ *    `mount()` to exercise the full Element → Wrapper → Styled → DOM
+ *    pipeline. Catches the prop drop wherever it might occur along the
+ *    chain (Wrapper, Element, rocketstyle attrs HOC, runtime-dom prop
+ *    application). This is the "safety net" pattern from
+ *    .claude/rules/test-environment-parity.md — mock-vnode tests bypass
+ *    the HOC + mount pipeline and CAN miss bugs that surface only when
+ *    the real `h()` + mount path runs, exactly like PR #197's silent
+ *    metadata drop. Always have both.
+ */
+import { h, type VNode } from '@pyreon/core'
+import { mount } from '@pyreon/runtime-dom'
+import { describe, expect, it, vi } from 'vitest'
+
+vi.mock('~/utils', () => ({
+  IS_DEVELOPMENT: false,
+}))
+
+import Wrapper from '../helpers/Wrapper/component'
+import { Element } from '../Element'
+
+const asVNode = (v: unknown) => v as VNode
+
+describe('Wrapper — dangerouslySetInnerHTML forwarding (mock-vnode)', () => {
+  it('forwards dangerouslySetInnerHTML to the rendered Styled vnode (non-needsFix path)', () => {
+    const html = { __html: '<svg>x</svg>' }
+    const result = asVNode(
+      Wrapper({
+        tag: 'div',
+        dangerouslySetInnerHTML: html,
+      }),
+    )
+
+    // Bug-shape assertion: the prop must reach the rendered vnode.
+    // Pre-fix this is `undefined` → SVG is silently dropped.
+    expect(result.props.dangerouslySetInnerHTML).toBe(html)
+  })
+
+  it('drops children when dangerouslySetInnerHTML is present (mutually exclusive)', () => {
+    const html = { __html: '<svg>x</svg>' }
+    const result = asVNode(
+      Wrapper({
+        tag: 'div',
+        dangerouslySetInnerHTML: html,
+        // children would conflict — innerHTML wins.
+        children: 'should be dropped',
+      }),
+    )
+
+    // children slot must not coexist with innerHTML — runtime-server's
+    // and runtime-dom's prop pipeline both treat them as inner-content
+    // sources, and emitting both would result in either a malformed
+    // tree or innerHTML being overwritten by the children mount.
+    expect(result.children).toEqual([])
+  })
+
+  it('forwards dangerouslySetInnerHTML on the needsFix path (button/fieldset/legend)', () => {
+    // button/fieldset/legend take the two-layer flex fix path. innerHTML
+    // belongs on the inner styled node (where the actual content goes),
+    // NOT on the outer wrapper.
+    const html = { __html: '<span>label</span>' }
+    const result = asVNode(
+      Wrapper({
+        tag: 'button',
+        dangerouslySetInnerHTML: html,
+      }),
+    )
+
+    // The `needsFix` branch should NOT trigger when innerHTML is set
+    // (innerHTML replaces all children, including the inner flex-fix
+    // layer). The simplest correct behavior: bypass needsFix when
+    // innerHTML is present and forward the prop on the single Styled.
+    expect(result.props.dangerouslySetInnerHTML).toBe(html)
+  })
+})
+
+// Real-h() mount tests — parallel coverage that runs the full pipeline.
+// Element uses Wrapper internally; mounting Element with
+// `dangerouslySetInnerHTML` exercises every layer the bug could surface
+// at: Element's split → Wrapper → Styled → runtime-dom's prop application.
+// happy-dom is the test environment; `dangerouslySetInnerHTML` translates
+// to `el.innerHTML = ...` which happy-dom handles natively.
+describe('Wrapper — dangerouslySetInnerHTML forwarding (real h() + mount)', () => {
+  it('Element with dangerouslySetInnerHTML actually injects HTML into the DOM (non-needsFix tag)', () => {
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+
+    const unmount = mount(
+      h(Element, {
+        tag: 'div',
+        'data-testid': 'innerhtml-host',
+        dangerouslySetInnerHTML: { __html: '<svg data-marker="real-h-svg">x</svg>' },
+      }),
+      root,
+    )
+
+    // The structural assertion: SVG element exists in the rendered DOM.
+    // Pre-fix Wrapper dropped the prop → no SVG → null query result.
+    const svg = root.querySelector('[data-marker="real-h-svg"]')
+    expect(svg).not.toBeNull()
+    expect(svg?.tagName.toLowerCase()).toBe('svg')
+
+    unmount()
+    root.remove()
+  })
+
+  it('Element with dangerouslySetInnerHTML on a needsFix tag (button) still injects HTML', () => {
+    // button is a needsFix tag (two-layer flex fix). The Wrapper branch
+    // must bypass the two-layer fix when innerHTML is present, OR forward
+    // innerHTML to the right layer. Either way the rendered DOM must
+    // contain the user-supplied HTML.
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+
+    const unmount = mount(
+      h(Element, {
+        tag: 'button',
+        'data-testid': 'innerhtml-button',
+        dangerouslySetInnerHTML: { __html: '<span data-marker="real-h-button-label">click me</span>' },
+      }),
+      root,
+    )
+
+    const span = root.querySelector('[data-marker="real-h-button-label"]')
+    expect(span).not.toBeNull()
+    expect(span?.textContent).toBe('click me')
+
+    unmount()
+    root.remove()
+  })
+
+  it('children passed alongside dangerouslySetInnerHTML are dropped (innerHTML wins)', () => {
+    // Bug shape: if Wrapper's `own.children` leaks into the rendered vnode
+    // alongside `dangerouslySetInnerHTML`, runtime-dom would either mount
+    // children INTO the innerHTML-populated element (overwriting), or land
+    // both side-by-side. The contract is that innerHTML wins and children
+    // are dropped. Verifying at the DOM level catches both failure shapes.
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+
+    const unmount = mount(
+      h(
+        Element,
+        {
+          tag: 'div',
+          'data-testid': 'innerhtml-with-children',
+          dangerouslySetInnerHTML: { __html: '<i data-marker="real-h-winner">html wins</i>' },
+        },
+        'this child text should NOT appear',
+      ),
+      root,
+    )
+
+    const host = root.querySelector('[data-testid="innerhtml-with-children"]')!
+    expect(host.querySelector('[data-marker="real-h-winner"]')).not.toBeNull()
+    // The child string must not appear anywhere in the rendered host.
+    expect(host.textContent).not.toContain('this child text should NOT appear')
+    expect(host.textContent).toContain('html wins')
+
+    unmount()
+    root.remove()
+  })
+})

package/src/__tests__/elements.browser.test.tsx

@@ -82,4 +82,51 @@ describe('@pyreon/elements browser smoke', () => {
       })
     }
   })
+
+  // Regression: Wrapper used to silently drop dangerouslySetInnerHTML.
+  // The unit test asserts Wrapper forwards the prop on the rendered
+  // vnode; this real-Chromium test asserts the SVG actually appears in
+  // the DOM after mount — the user-visible bug shape was "renders empty
+  // <div></div> instead of inlined SVG".
+  describe('dangerouslySetInnerHTML — real-Chromium DOM proof', () => {
+    it('inlines an SVG via Element + dangerouslySetInnerHTML', () => {
+      const { container, unmount } = mountInBrowser(
+        <Element
+          tag="div"
+          data-id="logo"
+          dangerouslySetInnerHTML={{
+            __html: '<svg viewBox="0 0 10 10"><rect width="10" height="10" /></svg>',
+          }}
+        />,
+      )
+      const root = container.querySelector('[data-id="logo"]')
+      expect(root).toBeTruthy()
+      // The SVG must actually be in the DOM, not lost between Wrapper and
+      // the renderer. Pre-fix this assertion failed: container had
+      // <div data-id="logo"></div> with no children.
+      const svg = root?.querySelector('svg')
+      expect(svg).toBeTruthy()
+      expect(svg?.tagName.toLowerCase()).toBe('svg')
+      expect(svg?.querySelector('rect')).toBeTruthy()
+      unmount()
+    })
+
+    it('inlines markup on a button (needsFix path)', () => {
+      const { container, unmount } = mountInBrowser(
+        <Element
+          tag="button"
+          data-id="btn"
+          dangerouslySetInnerHTML={{ __html: '<strong>Save</strong>' }}
+        />,
+      )
+      const btn = container.querySelector('[data-id="btn"]')
+      expect(btn).toBeTruthy()
+      // The bold text must reach the DOM. The needsFix gate's existing
+      // `!own.dangerouslySetInnerHTML` clause skips the two-layer fix,
+      // so this falls into the !needsFix branch and the fix's
+      // `if (innerHTML)` path takes over.
+      expect(btn?.querySelector('strong')?.textContent).toBe('Save')
+      unmount()
+    })
+  })
 })

package/src/__tests__/wrapper-block-cascade.test.ts

@@ -0,0 +1,121 @@
+import { describe, expect, it } from 'vitest'
+import { styles } from '../helpers/Wrapper/styled'
+
+/**
+ * Regression test for the responsive `block` cascade bug (mirrors vitus-labs's
+ * "couple of fixes" PR #121).
+ *
+ * Scenario: a responsive theme like `block: [true, false, true]` runs the
+ * styles callback once per breakpoint with a single-value `t.block`. The bug
+ * was that `align-self`, `flex`/`width` etc. were emitted ONLY when
+ * `t.block` was truthy — so the breakpoint where `t.block` is false emitted
+ * nothing, leaving the previous breakpoint's `align-self: stretch` cascading
+ * through the mobile-first @media query.
+ *
+ * Fix: always emit a value for these properties (truthy → stretch/100%,
+ * falsy → auto/auto). The mobile-first @media cascade then resets cleanly
+ * when `block` flips false at a later breakpoint.
+ *
+ * The styles callback is called per-breakpoint with the per-breakpoint theme
+ * already resolved to a single value — so testing it directly with two
+ * scalar themes is enough to lock in the always-emit contract.
+ */
+
+const identityCss = (strings: TemplateStringsArray, ...vals: unknown[]) => {
+  let r = ''
+  for (let i = 0; i < strings.length; i++) {
+    r += strings[i]
+    if (i < vals.length) {
+      const v = vals[i]
+      // Mirror styled-components / styler interpolation: drop falsy
+      // interpolations, stringify the rest. CSSResult instances (from the
+      // alignContent / extendCss helpers) coerce via their toString.
+      if (v === false || v == null) continue
+      r += String(v)
+    }
+  }
+  return r
+}
+
+const renderAt = (theme: Record<string, unknown>): string =>
+  String(styles({ theme, css: identityCss }))
+
+describe('Wrapper styles — responsive block cascade reset', () => {
+  it('emits stretch/100%/flex when block is true', () => {
+    const out = renderAt({
+      block: true,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'center',
+    })
+    expect(out).toContain('align-self: stretch')
+    expect(out).toContain('width: 100%')
+    expect(out).toContain('display: flex')
+  })
+
+  it('emits auto/auto/inline-flex reset when block is false (key fix)', () => {
+    const out = renderAt({
+      block: false,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'center',
+    })
+    // The fix: these properties MUST be emitted with reset values so the
+    // mobile-first @media cascade doesn't leak `align-self: stretch` from a
+    // smaller breakpoint where block was true.
+    expect(out).toContain('align-self: auto')
+    expect(out).toContain('width: auto')
+    expect(out).toContain('display: inline-flex')
+  })
+
+  it('emits height: 100% when alignY is "block", auto otherwise', () => {
+    const blockY = renderAt({
+      block: false,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'block',
+    })
+    expect(blockY).toContain('height: 100%')
+
+    const nonBlockY = renderAt({
+      block: false,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'center',
+    })
+    expect(nonBlockY).toContain('height: auto')
+  })
+
+  it('does not emit display when childFix is set (parent split)', () => {
+    const out = renderAt({
+      block: true,
+      childFix: true,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'center',
+    })
+    // childFix branch handles its own display rules outside the responsive
+    // styles callback.
+    expect(out).not.toContain('display: flex;')
+    expect(out).not.toContain('display: inline-flex;')
+  })
+
+  it('emits parentFix flex-direction: column only when parentFix is set', () => {
+    const withParentFix = renderAt({
+      block: true,
+      parentFix: true,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'center',
+    })
+    expect(withParentFix).toContain('flex-direction: column')
+
+    const withoutParentFix = renderAt({
+      block: true,
+      direction: 'inline',
+      alignX: 'left',
+      alignY: 'center',
+    })
+    expect(withoutParentFix).not.toContain('flex-direction: column')
+  })
+})

package/src/helpers/Iterator/component.tsx

@@ -10,7 +10,15 @@
 import type { VNode, VNodeChild } from '@pyreon/core'
 import { Fragment } from '@pyreon/core'
 import { isEmpty, render } from '@pyreon/ui-core'
-import type { ExtendedProps, ObjectValue, Props, SimpleValue } from './types'
+import type {
+  ChildrenProps,
+  ExtendedProps,
+  LooseProps,
+  ObjectProps,
+  ObjectValue,
+  SimpleProps,
+  SimpleValue,
+} from './types'
 
 type ClassifiedData =
   | { type: 'simple'; data: SimpleValue[] }
@@ -70,7 +78,7 @@ const attachItemProps: AttachItemProps = ({ i, length }: { i: number; length: nu
   }
 }
 
-const Component = (props: Props) => {
+const Component = (props: LooseProps) => {
   const {
     itemKey,
     valueName,
@@ -246,7 +254,50 @@ const Component = (props: Props) => {
   return renderItems()
 }
 
-export default Object.assign(Component, {
+// ---------------------------------------------------------------------------
+// Public callable type — overloads expose the generic `<T>` API at the JSX
+// boundary while the impl stays loose-typed. TS picks the matching overload
+// based on the props object passed:
+//
+//   <Iterator data={['a','b']} valueName="text" component={Item} />
+//   ^ T inferred as string → SimpleProps<string> overload selected
+//
+//   <Iterator data={users} component={UserCard} />
+//   ^ T inferred as User → ObjectProps<User> overload selected
+//
+//   <Iterator>{...}</Iterator>            → ChildrenProps overload selected
+// ---------------------------------------------------------------------------
+export interface IteratorComponent {
+  // T is inferred from the `data` prop at the JSX site — no explicit
+  // generic argument needed. Order matters: SimpleProps first (matches
+  // `data: SimpleValue[]`), then ObjectProps (object[]), then ChildrenProps,
+  // then a LooseProps fallback.
+  //
+  // The narrow overloads (Simple / Object / Children) drive per-mode T
+  // inference and stricter compile-time errors for direct callers (e.g.
+  // `valueName` required for primitive arrays, forbidden for object arrays).
+  // The LooseProps fallback exists for forwarding patterns where the props
+  // type is a wide union that doesn't bind to any single narrow overload —
+  // notably `Partial<(typeof Wrapper)['$$types']>` spread back into the JSX
+  // site after `@pyreon/rocketstyle`'s 4-overload-aware `ExtractProps`
+  // distributes the union across all of Iterator's call signatures. Without
+  // the loose binding home, the wide union has nowhere to land and TS
+  // reports "no overload matches this call" at every forwarding site.
+  //
+  // Direct callers still see the strict per-mode errors — the loose fallback
+  // only fires when none of the three narrow overloads match.
+  <T extends SimpleValue>(props: SimpleProps<T>): VNodeChild
+  <T extends ObjectValue>(props: ObjectProps<T>): VNodeChild
+  (props: ChildrenProps): VNodeChild
+  (props: LooseProps): VNodeChild
+  isIterator: true
+  RESERVED_PROPS: typeof RESERVED_PROPS
+  displayName?: string
+}
+
+const Iterator = Object.assign(Component, {
   isIterator: true as const,
   RESERVED_PROPS,
-})
+}) as unknown as IteratorComponent
+
+export default Iterator

package/src/helpers/Iterator/index.ts

@@ -1,14 +1,30 @@
 import component from './component'
 import type {
+  ChildrenProps,
   ElementType,
   ExtendedProps,
+  LooseProps,
   MaybeNull,
+  ObjectProps,
   ObjectValue,
   Props,
   PropsCallback,
+  SimpleProps,
   SimpleValue,
 } from './types'
 
-export type { ElementType, ExtendedProps, MaybeNull, ObjectValue, Props, PropsCallback, SimpleValue }
+export type {
+  ChildrenProps,
+  ElementType,
+  ExtendedProps,
+  LooseProps,
+  MaybeNull,
+  ObjectProps,
+  ObjectValue,
+  Props,
+  PropsCallback,
+  SimpleProps,
+  SimpleValue,
+}
 
 export default component