@pyreon/elements 0.11.4 → 0.11.6

package/src/__tests__/Wrapper.test.tsx

@@ -1,110 +1,110 @@
-import type { VNode } from "@pyreon/core"
-import { describe, expect, it, vi } from "vitest"
+import type { VNode } from '@pyreon/core'
+import { describe, expect, it, vi } from 'vitest'
 
 // ---------------------------------------------------------------------------
 // Mocks
 // ---------------------------------------------------------------------------
-vi.mock("~/utils", () => ({
+vi.mock('~/utils', () => ({
   IS_DEVELOPMENT: true,
 }))
 
-import Wrapper from "../helpers/Wrapper/component"
-import Styled from "../helpers/Wrapper/styled"
+import Wrapper from '../helpers/Wrapper/component'
+import Styled from '../helpers/Wrapper/styled'
 
 const asVNode = (v: unknown) => v as VNode
 
-describe("Wrapper component", () => {
-  describe("normal element (no flex fix needed)", () => {
-    it("returns a VNode whose type is the Styled component", () => {
-      const result = asVNode(Wrapper({ tag: "div" }))
+describe('Wrapper component', () => {
+  describe('normal element (no flex fix needed)', () => {
+    it('returns a VNode whose type is the Styled component', () => {
+      const result = asVNode(Wrapper({ tag: 'div' }))
       expect(result.type).toBe(Styled)
     })
 
-    it("passes normalElement as $element prop with block, direction, alignX, alignY, equalCols, extraStyles", () => {
+    it('passes normalElement as $element prop with block, direction, alignX, alignY, equalCols, extraStyles', () => {
       const result = asVNode(
         Wrapper({
-          tag: "div",
+          tag: 'div',
           block: true,
-          direction: "inline",
-          alignX: "center",
-          alignY: "top",
+          direction: 'inline',
+          alignX: 'center',
+          alignY: 'top',
           equalCols: false,
-          extendCss: "color: red;",
+          extendCss: 'color: red;',
         }),
       )
 
       expect(result.props.$element).toEqual({
         block: true,
-        direction: "inline",
-        alignX: "center",
-        alignY: "top",
+        direction: 'inline',
+        alignX: 'center',
+        alignY: 'top',
         equalCols: false,
-        extraStyles: "color: red;",
+        extraStyles: 'color: red;',
       })
     })
 
     it("passes tag as the 'as' prop", () => {
-      const result = asVNode(Wrapper({ tag: "div" }))
-      expect(result.props.as).toBe("div")
+      const result = asVNode(Wrapper({ tag: 'div' }))
+      expect(result.props.as).toBe('div')
     })
 
-    it("passes ref through", () => {
+    it('passes ref through', () => {
       const ref = () => {}
-      const result = asVNode(Wrapper({ tag: "div", ref }))
+      const result = asVNode(Wrapper({ tag: 'div', ref }))
       expect(result.props.ref).toBe(ref)
     })
 
-    it("passes children through", () => {
-      const result = asVNode(Wrapper({ tag: "div", children: "child content" }))
-      expect(result.props.children).toBe("child content")
+    it('passes children through', () => {
+      const result = asVNode(Wrapper({ tag: 'div', children: 'child content' }))
+      expect(result.props.children).toBe('child content')
     })
 
-    it("adds data-pyr-element in development mode", () => {
-      const result = asVNode(Wrapper({ tag: "div" }))
-      expect(result.props["data-pyr-element"]).toBe("Element")
+    it('adds data-pyr-element in development mode', () => {
+      const result = asVNode(Wrapper({ tag: 'div' }))
+      expect(result.props['data-pyr-element']).toBe('Element')
     })
 
-    it("spreads extra props", () => {
-      const result = asVNode(Wrapper({ tag: "section", id: "wrapper", role: "main" } as any))
-      expect(result.props.id).toBe("wrapper")
-      expect(result.props.role).toBe("main")
+    it('spreads extra props', () => {
+      const result = asVNode(Wrapper({ tag: 'section', id: 'wrapper', role: 'main' } as any))
+      expect(result.props.id).toBe('wrapper')
+      expect(result.props.role).toBe('main')
     })
   })
 
-  describe("flex-fix path (button/fieldset/legend)", () => {
-    it("renders parent Styled with parentFixElement for button", () => {
-      const result = asVNode(Wrapper({ tag: "button", children: "Click me" }))
+  describe('flex-fix path (button/fieldset/legend)', () => {
+    it('renders parent Styled with parentFixElement for button', () => {
+      const result = asVNode(Wrapper({ tag: 'button', children: 'Click me' }))
       expect(result.type).toBe(Styled)
       expect((result.props.$element as any).parentFix).toBe(true)
     })
 
-    it("parent Styled receives parentFixElement props (block + extraStyles only)", () => {
+    it('parent Styled receives parentFixElement props (block + extraStyles only)', () => {
       const result = asVNode(
         Wrapper({
-          tag: "button",
+          tag: 'button',
           block: true,
-          extendCss: "border: none;",
-          direction: "inline",
-          alignX: "center",
-          alignY: "center",
+          extendCss: 'border: none;',
+          direction: 'inline',
+          alignX: 'center',
+          alignY: 'center',
         }),
       )
 
       expect(result.props.$element).toEqual({
         parentFix: true,
         block: true,
-        extraStyles: "border: none;",
+        extraStyles: 'border: none;',
       })
-      expect(result.props.as).toBe("button")
+      expect(result.props.as).toBe('button')
     })
 
-    it("child Styled receives childFixElement props (direction, alignX, alignY, equalCols)", () => {
+    it('child Styled receives childFixElement props (direction, alignX, alignY, equalCols)', () => {
       const result = asVNode(
         Wrapper({
-          tag: "fieldset",
-          direction: "rows",
-          alignX: "left",
-          alignY: "bottom",
+          tag: 'fieldset',
+          direction: 'rows',
+          alignX: 'left',
+          alignY: 'bottom',
           equalCols: true,
         }),
       )
@@ -115,32 +115,32 @@ describe("Wrapper component", () => {
       expect(child.props.$childFix).toBe(true)
       expect(child.props.$element).toEqual({
         childFix: true,
-        direction: "rows",
-        alignX: "left",
-        alignY: "bottom",
+        direction: 'rows',
+        alignX: 'left',
+        alignY: 'bottom',
         equalCols: true,
       })
     })
 
     it("uses 'div' as inner tag by default", () => {
-      const result = asVNode(Wrapper({ tag: "button" }))
+      const result = asVNode(Wrapper({ tag: 'button' }))
       const child = asVNode(result.props.children)
-      expect(child.props.as).toBe("div")
+      expect(child.props.as).toBe('div')
     })
 
     it("uses 'span' as inner tag when isInline is true", () => {
-      const result = asVNode(Wrapper({ tag: "button", isInline: true }))
+      const result = asVNode(Wrapper({ tag: 'button', isInline: true }))
       const child = asVNode(result.props.children)
-      expect(child.props.as).toBe("span")
+      expect(child.props.as).toBe('span')
     })
   })
 
-  describe("dangerouslySetInnerHTML skips fix", () => {
-    it("renders single Styled without parentFix for button when dangerouslySetInnerHTML is set", () => {
+  describe('dangerouslySetInnerHTML skips fix', () => {
+    it('renders single Styled without parentFix for button when dangerouslySetInnerHTML is set', () => {
       const result = asVNode(
         Wrapper({
-          tag: "button",
-          dangerouslySetInnerHTML: { __html: "<b>Bold</b>" },
+          tag: 'button',
+          dangerouslySetInnerHTML: { __html: '<b>Bold</b>' },
         } as any),
       )
 

package/src/__tests__/equalBeforeAfter.test.ts

@@ -1,9 +1,9 @@
-import type { VNode } from "@pyreon/core"
-import { h } from "@pyreon/core"
-import { describe, expect, it } from "vitest"
-import { Element } from "../Element"
-import Content from "../helpers/Content/component"
-import Wrapper from "../helpers/Wrapper/component"
+import type { VNode } from '@pyreon/core'
+import { h } from '@pyreon/core'
+import { describe, expect, it } from 'vitest'
+import { Element } from '../Element'
+import Content from '../helpers/Content/component'
+import Wrapper from '../helpers/Wrapper/component'
 
 const asVNode = (v: unknown) => v as VNode
 
@@ -12,67 +12,67 @@ const getContentSlots = (result: VNode): VNode[] => {
   if (!Array.isArray(children)) return []
   return children.filter(
     (c: unknown) =>
-      c != null && typeof c === "object" && "type" in (c as VNode) && (c as VNode).type === Content,
+      c != null && typeof c === 'object' && 'type' in (c as VNode) && (c as VNode).type === Content,
   ) as VNode[]
 }
 
-describe("Element equalBeforeAfter", () => {
-  it("always passes a ref function to Wrapper", () => {
+describe('Element equalBeforeAfter', () => {
+  it('always passes a ref function to Wrapper', () => {
     const result = asVNode(
       Element({
         equalBeforeAfter: true,
-        direction: "inline",
-        beforeContent: h("span", null, "Before"),
-        afterContent: h("span", null, "After"),
-        children: "Main",
+        direction: 'inline',
+        beforeContent: h('span', null, 'Before'),
+        afterContent: h('span', null, 'After'),
+        children: 'Main',
       }),
     )
     expect(result.type).toBe(Wrapper)
-    expect(typeof result.props.ref).toBe("function")
+    expect(typeof result.props.ref).toBe('function')
   })
 
-  it("does not crash without before/after content", () => {
-    const result = asVNode(Element({ equalBeforeAfter: true, children: "Main only" }))
+  it('does not crash without before/after content', () => {
+    const result = asVNode(Element({ equalBeforeAfter: true, children: 'Main only' }))
     expect(result.type).toBe(Wrapper)
   })
 
-  it("does not crash with only beforeContent", () => {
+  it('does not crash with only beforeContent', () => {
     const result = asVNode(
       Element({
         equalBeforeAfter: true,
-        beforeContent: h("span", null, "Before"),
-        children: "Main",
+        beforeContent: h('span', null, 'Before'),
+        children: 'Main',
       }),
     )
     expect(result.type).toBe(Wrapper)
   })
 
-  it("does not crash with only afterContent", () => {
+  it('does not crash with only afterContent', () => {
     const result = asVNode(
       Element({
         equalBeforeAfter: true,
-        afterContent: h("span", null, "After"),
-        children: "Main",
+        afterContent: h('span', null, 'After'),
+        children: 'Main',
       }),
     )
     expect(result.type).toBe(Wrapper)
   })
 
-  it("renders three slot children when both before and after exist", () => {
+  it('renders three slot children when both before and after exist', () => {
     const result = asVNode(
       Element({
         equalBeforeAfter: true,
-        direction: "inline",
-        beforeContent: h("span", null, "Short"),
-        afterContent: h("span", null, "Longer content"),
-        children: "Center",
+        direction: 'inline',
+        beforeContent: h('span', null, 'Short'),
+        afterContent: h('span', null, 'Longer content'),
+        children: 'Center',
       }),
     )
     const slots = getContentSlots(result)
     expect(slots).toHaveLength(3)
   })
 
-  it("merged ref calls external function ref", () => {
+  it('merged ref calls external function ref', () => {
     let captured: HTMLElement | null = null
     const ref = (node: HTMLElement | null) => {
       captured = node
@@ -81,9 +81,9 @@ describe("Element equalBeforeAfter", () => {
       Element({
         equalBeforeAfter: true,
         ref,
-        beforeContent: h("span", null, "Before"),
-        afterContent: h("span", null, "After"),
-        children: "Main",
+        beforeContent: h('span', null, 'Before'),
+        afterContent: h('span', null, 'After'),
+        children: 'Main',
       }),
     )
     const fakeNode = {} as HTMLElement
@@ -91,15 +91,15 @@ describe("Element equalBeforeAfter", () => {
     expect(captured).toBe(fakeNode)
   })
 
-  it("merged ref sets object ref current", () => {
+  it('merged ref sets object ref current', () => {
     const ref = { current: null as HTMLElement | null }
     const result = asVNode(
       Element({
         equalBeforeAfter: true,
         ref,
-        beforeContent: h("span", null, "Before"),
-        afterContent: h("span", null, "After"),
-        children: "Main",
+        beforeContent: h('span', null, 'Before'),
+        afterContent: h('span', null, 'After'),
+        children: 'Main',
       }),
     )
     const fakeNode = {} as HTMLElement
@@ -107,16 +107,16 @@ describe("Element equalBeforeAfter", () => {
     expect(ref.current).toBe(fakeNode)
   })
 
-  it("uses inline direction for equalBeforeAfter", () => {
+  it('uses inline direction for equalBeforeAfter', () => {
     const result = asVNode(
       Element({
         equalBeforeAfter: true,
-        direction: "inline",
-        beforeContent: h("span", null, "B"),
-        afterContent: h("span", null, "A"),
-        children: "Main",
+        direction: 'inline',
+        beforeContent: h('span', null, 'B'),
+        afterContent: h('span', null, 'A'),
+        children: 'Main',
       }),
     )
-    expect(result.props.direction).toBe("inline")
+    expect(result.props.direction).toBe('inline')
   })
 })

package/src/__tests__/helpers.test.ts

@@ -1,64 +1,64 @@
-import { describe, expect, it } from "vitest"
-import { INLINE_ELEMENTS_FLEX_FIX } from "../helpers/Wrapper/constants"
-import { isWebFixNeeded } from "../helpers/Wrapper/utils"
+import { describe, expect, it } from 'vitest'
+import { INLINE_ELEMENTS_FLEX_FIX } from '../helpers/Wrapper/constants'
+import { isWebFixNeeded } from '../helpers/Wrapper/utils'
 
-describe("Wrapper utils", () => {
-  describe("isWebFixNeeded", () => {
-    it("returns true for button", () => {
-      expect(isWebFixNeeded("button")).toBe(true)
+describe('Wrapper utils', () => {
+  describe('isWebFixNeeded', () => {
+    it('returns true for button', () => {
+      expect(isWebFixNeeded('button')).toBe(true)
     })
 
-    it("returns true for fieldset", () => {
-      expect(isWebFixNeeded("fieldset")).toBe(true)
+    it('returns true for fieldset', () => {
+      expect(isWebFixNeeded('fieldset')).toBe(true)
     })
 
-    it("returns true for legend", () => {
-      expect(isWebFixNeeded("legend")).toBe(true)
+    it('returns true for legend', () => {
+      expect(isWebFixNeeded('legend')).toBe(true)
     })
 
-    it("returns false for div", () => {
-      expect(isWebFixNeeded("div")).toBe(false)
+    it('returns false for div', () => {
+      expect(isWebFixNeeded('div')).toBe(false)
     })
 
-    it("returns false for span", () => {
-      expect(isWebFixNeeded("span")).toBe(false)
+    it('returns false for span', () => {
+      expect(isWebFixNeeded('span')).toBe(false)
     })
 
-    it("returns false for section", () => {
-      expect(isWebFixNeeded("section")).toBe(false)
+    it('returns false for section', () => {
+      expect(isWebFixNeeded('section')).toBe(false)
     })
 
-    it("returns false for undefined", () => {
+    it('returns false for undefined', () => {
       expect(isWebFixNeeded(undefined)).toBe(false)
     })
 
-    it("returns false for empty string", () => {
-      expect(isWebFixNeeded("")).toBe(false)
+    it('returns false for empty string', () => {
+      expect(isWebFixNeeded('')).toBe(false)
     })
 
-    it("returns false for input", () => {
-      expect(isWebFixNeeded("input")).toBe(false)
+    it('returns false for input', () => {
+      expect(isWebFixNeeded('input')).toBe(false)
     })
 
-    it("returns false for form", () => {
-      expect(isWebFixNeeded("form")).toBe(false)
+    it('returns false for form', () => {
+      expect(isWebFixNeeded('form')).toBe(false)
     })
   })
 
-  describe("INLINE_ELEMENTS_FLEX_FIX", () => {
-    it("contains button", () => {
+  describe('INLINE_ELEMENTS_FLEX_FIX', () => {
+    it('contains button', () => {
       expect(INLINE_ELEMENTS_FLEX_FIX.button).toBe(true)
     })
 
-    it("contains fieldset", () => {
+    it('contains fieldset', () => {
       expect(INLINE_ELEMENTS_FLEX_FIX.fieldset).toBe(true)
     })
 
-    it("contains legend", () => {
+    it('contains legend', () => {
       expect(INLINE_ELEMENTS_FLEX_FIX.legend).toBe(true)
     })
 
-    it("only has 3 entries", () => {
+    it('only has 3 entries', () => {
       expect(Object.keys(INLINE_ELEMENTS_FLEX_FIX)).toHaveLength(3)
     })
   })

package/src/__tests__/overlayContext.test.tsx

@@ -1,19 +1,19 @@
-import { popContext } from "@pyreon/core"
-import { afterEach, describe, expect, it, vi } from "vitest"
-import OverlayContextProvider, { useOverlayContext } from "../Overlay/context"
+import { popContext } from '@pyreon/core'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import OverlayContextProvider, { useOverlayContext } from '../Overlay/context'
 
-describe("Overlay context", () => {
-  it("useOverlayContext is a function", () => {
-    expect(typeof useOverlayContext).toBe("function")
+describe('Overlay context', () => {
+  it('useOverlayContext is a function', () => {
+    expect(typeof useOverlayContext).toBe('function')
   })
 
-  it("returns the default context (empty object) when called outside a provider", () => {
+  it('returns the default context (empty object) when called outside a provider', () => {
     const ctx = useOverlayContext()
     expect(ctx).toEqual({})
   })
 })
 
-describe("OverlayContextProvider component", () => {
+describe('OverlayContextProvider component', () => {
   afterEach(() => {
     try {
       popContext()
@@ -22,7 +22,7 @@ describe("OverlayContextProvider component", () => {
     }
   })
 
-  it("provides blocked/setBlocked/setUnblocked via context", () => {
+  it('provides blocked/setBlocked/setUnblocked via context', () => {
     const setBlocked = vi.fn()
     const setUnblocked = vi.fn()
 
@@ -30,7 +30,7 @@ describe("OverlayContextProvider component", () => {
       blocked: true,
       setBlocked,
       setUnblocked,
-      children: "child",
+      children: 'child',
     })
 
     const ctx = useOverlayContext()
@@ -39,18 +39,18 @@ describe("OverlayContextProvider component", () => {
     expect(ctx.setUnblocked).toBe(setUnblocked)
   })
 
-  it("renders children (returns a value)", () => {
+  it('renders children (returns a value)', () => {
     const result = OverlayContextProvider({
       blocked: false,
       setBlocked: vi.fn(),
       setUnblocked: vi.fn(),
-      children: "Hello overlay",
+      children: 'Hello overlay',
     })
 
     expect(result).toBeDefined()
   })
 
-  it("provides blocked as false", () => {
+  it('provides blocked as false', () => {
     OverlayContextProvider({
       blocked: false,
       setBlocked: vi.fn(),
@@ -62,7 +62,7 @@ describe("OverlayContextProvider component", () => {
     expect(ctx.blocked).toBe(false)
   })
 
-  it("provides blocked as a function when passed as a function", () => {
+  it('provides blocked as a function when passed as a function', () => {
     const blockedFn = () => true
 
     OverlayContextProvider({