@pyreon/elements 0.11.4 → 0.11.6

package/src/__tests__/utils.test.ts

@@ -1,69 +1,69 @@
-import { describe, expect, it } from "vitest"
-import { getShouldBeEmpty, isInlineElement } from "../Element/utils"
-import { isWebFixNeeded } from "../helpers/Wrapper/utils"
+import { describe, expect, it } from 'vitest'
+import { getShouldBeEmpty, isInlineElement } from '../Element/utils'
+import { isWebFixNeeded } from '../helpers/Wrapper/utils'
 
-describe("isInlineElement", () => {
-  it("returns true for inline elements", () => {
-    expect(isInlineElement("span")).toBe(true)
-    expect(isInlineElement("a")).toBe(true)
-    expect(isInlineElement("button")).toBe(true)
-    expect(isInlineElement("input")).toBe(true)
-    expect(isInlineElement("label")).toBe(true)
-    expect(isInlineElement("strong")).toBe(true)
-    expect(isInlineElement("em")).toBe(true)
-    expect(isInlineElement("img")).toBe(true)
+describe('isInlineElement', () => {
+  it('returns true for inline elements', () => {
+    expect(isInlineElement('span')).toBe(true)
+    expect(isInlineElement('a')).toBe(true)
+    expect(isInlineElement('button')).toBe(true)
+    expect(isInlineElement('input')).toBe(true)
+    expect(isInlineElement('label')).toBe(true)
+    expect(isInlineElement('strong')).toBe(true)
+    expect(isInlineElement('em')).toBe(true)
+    expect(isInlineElement('img')).toBe(true)
   })
 
-  it("returns false for block elements", () => {
-    expect(isInlineElement("div")).toBe(false)
-    expect(isInlineElement("p")).toBe(false)
-    expect(isInlineElement("section")).toBe(false)
-    expect(isInlineElement("header")).toBe(false)
+  it('returns false for block elements', () => {
+    expect(isInlineElement('div')).toBe(false)
+    expect(isInlineElement('p')).toBe(false)
+    expect(isInlineElement('section')).toBe(false)
+    expect(isInlineElement('header')).toBe(false)
   })
 
-  it("returns false for undefined", () => {
+  it('returns false for undefined', () => {
     expect(isInlineElement(undefined)).toBe(false)
   })
 
-  it("returns false for empty string", () => {
-    expect(isInlineElement("")).toBe(false)
+  it('returns false for empty string', () => {
+    expect(isInlineElement('')).toBe(false)
   })
 })
 
-describe("getShouldBeEmpty", () => {
-  it("returns true for void elements", () => {
-    expect(getShouldBeEmpty("br")).toBe(true)
-    expect(getShouldBeEmpty("img")).toBe(true)
-    expect(getShouldBeEmpty("input")).toBe(true)
-    expect(getShouldBeEmpty("hr")).toBe(true)
-    expect(getShouldBeEmpty("embed")).toBe(true)
+describe('getShouldBeEmpty', () => {
+  it('returns true for void elements', () => {
+    expect(getShouldBeEmpty('br')).toBe(true)
+    expect(getShouldBeEmpty('img')).toBe(true)
+    expect(getShouldBeEmpty('input')).toBe(true)
+    expect(getShouldBeEmpty('hr')).toBe(true)
+    expect(getShouldBeEmpty('embed')).toBe(true)
   })
 
-  it("returns false for non-void elements", () => {
-    expect(getShouldBeEmpty("div")).toBe(false)
-    expect(getShouldBeEmpty("span")).toBe(false)
-    expect(getShouldBeEmpty("p")).toBe(false)
+  it('returns false for non-void elements', () => {
+    expect(getShouldBeEmpty('div')).toBe(false)
+    expect(getShouldBeEmpty('span')).toBe(false)
+    expect(getShouldBeEmpty('p')).toBe(false)
   })
 
-  it("returns false for undefined", () => {
+  it('returns false for undefined', () => {
     expect(getShouldBeEmpty(undefined)).toBe(false)
   })
 })
 
-describe("isWebFixNeeded", () => {
-  it("returns true for button, fieldset, legend", () => {
-    expect(isWebFixNeeded("button")).toBe(true)
-    expect(isWebFixNeeded("fieldset")).toBe(true)
-    expect(isWebFixNeeded("legend")).toBe(true)
+describe('isWebFixNeeded', () => {
+  it('returns true for button, fieldset, legend', () => {
+    expect(isWebFixNeeded('button')).toBe(true)
+    expect(isWebFixNeeded('fieldset')).toBe(true)
+    expect(isWebFixNeeded('legend')).toBe(true)
   })
 
-  it("returns false for other elements", () => {
-    expect(isWebFixNeeded("div")).toBe(false)
-    expect(isWebFixNeeded("span")).toBe(false)
-    expect(isWebFixNeeded("input")).toBe(false)
+  it('returns false for other elements', () => {
+    expect(isWebFixNeeded('div')).toBe(false)
+    expect(isWebFixNeeded('span')).toBe(false)
+    expect(isWebFixNeeded('input')).toBe(false)
   })
 
-  it("returns false for undefined", () => {
+  it('returns false for undefined', () => {
     expect(isWebFixNeeded(undefined)).toBe(false)
   })
 })

package/src/constants.ts

@@ -1 +1 @@
-export const PKG_NAME = "@pyreon/elements" as const
+export const PKG_NAME = '@pyreon/elements' as const

package/src/helpers/Content/component.tsx

@@ -6,10 +6,10 @@
  *
  * Children are rendered via core `render()`.
  */
-import { render } from "@pyreon/ui-core"
-import { IS_DEVELOPMENT } from "../../utils"
-import Styled from "./styled"
-import type { Props } from "./types"
+import { render } from '@pyreon/ui-core'
+import { IS_DEVELOPMENT } from '../../utils'
+import Styled from './styled'
+import type { Props } from './types'
 
 const Component = ({
   contentType,
@@ -26,7 +26,7 @@ const Component = ({
 }: Partial<Props>) => {
   const debugProps = IS_DEVELOPMENT
     ? {
-        "data-pyr-element": contentType,
+        'data-pyr-element': contentType,
       }
     : {}
 

package/src/helpers/Content/index.ts

@@ -1,3 +1,3 @@
-import component from "./component"
+import component from './component'
 
 export default component

package/src/helpers/Content/styled.ts

@@ -5,10 +5,10 @@
  * equalCols flex distribution. The "content" slot gets `flex: 1` to
  * fill remaining space between before and after.
  */
-import { config } from "@pyreon/ui-core"
-import { alignContent, extendCss, makeItResponsive, value } from "@pyreon/unistyle"
-import type { ResponsiveStylesCallback } from "../../types"
-import type { StyledProps, ThemeProps } from "./types"
+import { config } from '@pyreon/ui-core'
+import { alignContent, extendCss, makeItResponsive, value } from '@pyreon/unistyle'
+import type { ResponsiveStylesCallback } from '../../types'
+import type { StyledProps, ThemeProps } from './types'
 
 const { styled, css, component } = config
 
@@ -25,20 +25,20 @@ const typeContentCSS = `
 // --------------------------------------------------------
 const gapDimensions = {
   inline: {
-    before: "margin-right",
-    after: "margin-left",
+    before: 'margin-right',
+    after: 'margin-left',
   },
   reverseInline: {
-    before: "margin-right",
-    after: "margin-left",
+    before: 'margin-right',
+    after: 'margin-left',
   },
   rows: {
-    before: "margin-bottom",
-    after: "margin-top",
+    before: 'margin-bottom',
+    after: 'margin-top',
   },
   reverseRows: {
-    before: "margin-bottom",
-    after: "margin-top",
+    before: 'margin-bottom',
+    after: 'margin-top',
   },
 } as const
 
@@ -48,10 +48,10 @@ const calculateGap = ({
   value: gapValue,
 }: {
   direction: keyof typeof gapDimensions
-  type: ThemeProps["contentType"]
+  type: ThemeProps['contentType']
   value: string | number | null | undefined
 }) => {
-  if (!direction || !type || type === "content") return undefined
+  if (!direction || !type || type === 'content') return undefined
 
   const finalStyles = `${gapDimensions[direction][type]}: ${gapValue};`
 
@@ -92,10 +92,10 @@ const StyledComponent = styled(component)`
   align-self: stretch;
   flex-wrap: wrap;
 
-  ${(({ $contentType }: StyledProps) => $contentType === "content" && typeContentCSS) as any};
+  ${(({ $contentType }: StyledProps) => $contentType === 'content' && typeContentCSS) as any};
 
   ${makeItResponsive({
-    key: "$element",
+    key: '$element',
     styles,
     css,
     normalize: true,

package/src/helpers/Content/types.ts

@@ -1,4 +1,4 @@
-import type { HTMLTags } from "@pyreon/ui-core"
+import type { HTMLTags } from '@pyreon/ui-core'
 import type {
   AlignX,
   AlignY,
@@ -13,12 +13,12 @@ import type {
   ExtendCss,
   Responsive,
   ResponsiveBoolType,
-} from "../../types"
+} from '../../types'
 
 export interface Props {
   parentDirection: Direction | undefined
   gap: Responsive | undefined
-  contentType: "before" | "content" | "after" | undefined
+  contentType: 'before' | 'content' | 'after' | undefined
   children: Content
   tag: HTMLTags | undefined
   direction: Direction | undefined
@@ -31,14 +31,14 @@ export interface Props {
 export interface StyledProps {
   $element: Pick<
     Props,
-    "contentType" | "parentDirection" | "direction" | "alignX" | "alignY" | "equalCols" | "gap"
+    'contentType' | 'parentDirection' | 'direction' | 'alignX' | 'alignY' | 'equalCols' | 'gap'
   > & {
-    extraStyles: Props["extendCss"]
+    extraStyles: Props['extendCss']
   }
-  $contentType: Props["contentType"]
+  $contentType: Props['contentType']
 }
 
-export type ThemeProps = Pick<Props, "contentType"> & {
+export type ThemeProps = Pick<Props, 'contentType'> & {
   parentDirection: ContentDirection
   direction: ContentDirection
   alignX: ContentAlignX

package/src/helpers/Iterator/component.tsx

@@ -7,20 +7,20 @@
  * component+data prop pattern.
  */
 
-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 { 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'
 
 type ClassifiedData =
-  | { type: "simple"; data: SimpleValue[] }
-  | { type: "complex"; data: ObjectValue[] }
+  | { type: 'simple'; data: SimpleValue[] }
+  | { type: 'complex'; data: ObjectValue[] }
   | null
 
 const classifyData = (data: unknown[]): ClassifiedData => {
   const items = data.filter(
     (item) =>
-      item != null && !(typeof item === "object" && isEmpty(item as Record<string, unknown>)),
+      item != null && !(typeof item === 'object' && isEmpty(item as Record<string, unknown>)),
   )
 
   if (items.length === 0) return null
@@ -29,9 +29,9 @@ const classifyData = (data: unknown[]): ClassifiedData => {
   let isComplex = true
 
   for (const item of items) {
-    if (typeof item === "string" || typeof item === "number") {
+    if (typeof item === 'string' || typeof item === 'number') {
       isComplex = false
-    } else if (typeof item === "object") {
+    } else if (typeof item === 'object') {
       isSimple = false
     } else {
       isSimple = false
@@ -39,20 +39,20 @@ const classifyData = (data: unknown[]): ClassifiedData => {
     }
   }
 
-  if (isSimple) return { type: "simple", data: items as SimpleValue[] }
-  if (isComplex) return { type: "complex", data: items as ObjectValue[] }
+  if (isSimple) return { type: 'simple', data: items as SimpleValue[] }
+  if (isComplex) return { type: 'complex', data: items as ObjectValue[] }
   return null
 }
 
 const RESERVED_PROPS = [
-  "children",
-  "component",
-  "wrapComponent",
-  "data",
-  "itemKey",
-  "valueName",
-  "itemProps",
-  "wrapProps",
+  'children',
+  'component',
+  'wrapComponent',
+  'data',
+  'itemKey',
+  'valueName',
+  'itemProps',
+  'wrapProps',
 ] as const
 
 type AttachItemProps = ({ i, length }: { i: number; length: number }) => ExtendedProps
@@ -82,12 +82,12 @@ const Component = (props: Props) => {
     itemProps,
   } = props
 
-  const injectItemProps = typeof itemProps === "function" ? itemProps : () => itemProps
+  const injectItemProps = typeof itemProps === 'function' ? itemProps : () => itemProps
 
-  const injectWrapItemProps = typeof wrapProps === "function" ? wrapProps : () => wrapProps
+  const injectWrapItemProps = typeof wrapProps === 'function' ? wrapProps : () => wrapProps
 
   const getKey = (item: string | number, index: number) => {
-    if (typeof itemKey === "function") return itemKey(item, index)
+    if (typeof itemKey === 'function') return itemKey(item, index)
     return index
   }
 
@@ -130,8 +130,8 @@ const Component = (props: Props) => {
 
     // if children is Fragment — check VNode type
     if (
-      typeof children === "object" &&
-      "type" in (children as VNode) &&
+      typeof children === 'object' &&
+      'type' in (children as VNode) &&
       (children as VNode).type === Fragment
     ) {
       const fragmentChildren = (children as VNode).children as VNodeChild[]
@@ -154,7 +154,7 @@ const Component = (props: Props) => {
 
     return simpleData.map((item, i) => {
       const key = getKey(item, i)
-      const keyName = valueName ?? "children"
+      const keyName = valueName ?? 'children'
       const extendedProps = attachItemProps({
         i,
         length,
@@ -186,8 +186,8 @@ const Component = (props: Props) => {
   // --------------------------------------------------------
   const getObjectKey = (item: ObjectValue, index: number) => {
     if (!itemKey) return item.key ?? item.id ?? item.itemId ?? index
-    if (typeof itemKey === "function") return itemKey(item, index)
-    if (typeof itemKey === "string") return item[itemKey]
+    if (typeof itemKey === 'function') return itemKey(item, index)
+    if (typeof itemKey === 'string') return item[itemKey]
 
     return index
   }
@@ -236,7 +236,7 @@ const Component = (props: Props) => {
     if (component && Array.isArray(data)) {
       const classified = classifyData(data)
       if (!classified) return null
-      if (classified.type === "simple") return renderSimpleArray(classified.data) as VNodeChild
+      if (classified.type === 'simple') return renderSimpleArray(classified.data) as VNodeChild
       return renderComplexArray(classified.data) as VNodeChild
     }
 

package/src/helpers/Iterator/index.ts

@@ -1,4 +1,4 @@
-import component from "./component"
+import component from './component'
 import type {
   ElementType,
   ExtendedProps,
@@ -6,7 +6,7 @@ import type {
   Props,
   PropsCallback,
   SimpleValue,
-} from "./types"
+} from './types'
 
 export type { ElementType, ExtendedProps, ObjectValue, Props, PropsCallback, SimpleValue }
 

package/src/helpers/Iterator/types.ts

@@ -1,5 +1,5 @@
-import type { ComponentFn, VNodeChild } from "@pyreon/core"
-import type { HTMLTags } from "@pyreon/ui-core"
+import type { ComponentFn, VNodeChild } from '@pyreon/core'
+import type { HTMLTags } from '@pyreon/ui-core'
 
 export type MaybeNull = undefined | null
 export type TObj = Record<string, unknown>
@@ -75,5 +75,5 @@ export type Props = Partial<{
    */
   itemKey?:
     | keyof ObjectValue
-    | ((item: SimpleValue | Omit<ObjectValue, "component">, index: number) => SimpleValue)
+    | ((item: SimpleValue | Omit<ObjectValue, 'component'>, index: number) => SimpleValue)
 }>

package/src/helpers/Wrapper/component.tsx

@@ -4,12 +4,12 @@
  * fix (parent + child Styled) because these HTML elements do not natively
  * support `display: flex` consistently across browsers.
  */
-import { IS_DEVELOPMENT } from "../../utils"
-import Styled from "./styled"
-import type { Props } from "./types"
-import { isWebFixNeeded } from "./utils"
+import { IS_DEVELOPMENT } from '../../utils'
+import Styled from './styled'
+import type { Props } from './types'
+import { isWebFixNeeded } from './utils'
 
-const DEV_PROPS: Record<string, string> = IS_DEVELOPMENT ? { "data-pyr-element": "Element" } : {}
+const DEV_PROPS: Record<string, string> = IS_DEVELOPMENT ? { 'data-pyr-element': 'Element' } : {}
 
 const Component = ({
   children,
@@ -64,7 +64,7 @@ const Component = ({
     )
   }
 
-  const asTag = isInline ? "span" : "div"
+  const asTag = isInline ? 'span' : 'div'
 
   return (
     <Styled {...COMMON_PROPS} $element={parentFixElement}>

package/src/helpers/Wrapper/index.ts

@@ -1,3 +1,3 @@
-import component from "./component"
+import component from './component'
 
 export default component

package/src/helpers/Wrapper/styled.ts

@@ -5,10 +5,10 @@
  * split flex behavior across two DOM nodes for button/fieldset/legend
  * elements where a single flex container is insufficient.
  */
-import { config } from "@pyreon/ui-core"
-import { alignContent, extendCss, makeItResponsive } from "@pyreon/unistyle"
-import type { ResponsiveStylesCallback } from "../../types"
-import type { StyledProps } from "./types"
+import { config } from '@pyreon/ui-core'
+import { alignContent, extendCss, makeItResponsive } from '@pyreon/unistyle'
+import type { ResponsiveStylesCallback } from '../../types'
+import type { StyledProps } from './types'
 
 const { styled, css, component } = config
 
@@ -32,10 +32,10 @@ const blockCSS = `
   width: 100%;
 `
 
-const childFixPosition = (isBlock?: boolean) => `display: ${isBlock ? "flex" : "inline-flex"};`
+const childFixPosition = (isBlock?: boolean) => `display: ${isBlock ? 'flex' : 'inline-flex'};`
 
 const styles: ResponsiveStylesCallback = ({ theme: t, css: cssFn }) => cssFn`
-  ${t.alignY === "block" && fullHeightCSS};
+  ${t.alignY === 'block' && fullHeightCSS};
 
   ${alignContent({
     direction: t.direction,
@@ -44,7 +44,7 @@ const styles: ResponsiveStylesCallback = ({ theme: t, css: cssFn }) => cssFn`
   })};
 
   ${t.block && blockCSS};
-  ${t.alignY === "block" && t.block && fullHeightCSS};
+  ${t.alignY === 'block' && t.block && fullHeightCSS};
 
   ${!t.childFix && childFixPosition(t.block)};
   ${t.parentFix && parentFixCSS};
@@ -61,7 +61,7 @@ export default styled(component)`
   ${(({ $childFix }: StyledProps) => $childFix && childFixCSS) as any};
 
   ${makeItResponsive({
-    key: "$element",
+    key: '$element',
     styles,
     css,
     normalize: true,

package/src/helpers/Wrapper/types.ts

@@ -1,5 +1,5 @@
-import type { VNodeChild } from "@pyreon/core"
-import type { HTMLTags } from "@pyreon/ui-core"
+import type { VNodeChild } from '@pyreon/core'
+import type { HTMLTags } from '@pyreon/ui-core'
 import type {
   AlignX,
   AlignY,
@@ -11,7 +11,7 @@ import type {
   Direction,
   ExtendCss,
   ResponsiveBoolType,
-} from "../../types"
+} from '../../types'
 
 export type Reference = unknown
 

package/src/helpers/Wrapper/utils.ts

@@ -1,4 +1,4 @@
-import { INLINE_ELEMENTS_FLEX_FIX } from "./constants"
+import { INLINE_ELEMENTS_FLEX_FIX } from './constants'
 
 type IsWebFixNeeded = (tag?: string) => boolean
 export const isWebFixNeeded: IsWebFixNeeded = (tag) => {

package/src/helpers/index.ts

@@ -1,4 +1,4 @@
-import Content from "./Content"
-import Wrapper from "./Wrapper"
+import Content from './Content'
+import Wrapper from './Wrapper'
 
 export { Content, Wrapper }

package/src/index.ts

@@ -1,7 +1,7 @@
-import { Provider } from "@pyreon/unistyle"
+import { Provider } from '@pyreon/unistyle'
 
-export type { ElementProps, PyreonElement } from "./Element"
-export { Element } from "./Element"
+export type { ElementProps, PyreonElement } from './Element'
+export { Element } from './Element'
 export type {
   ElementType,
   ExtendedProps,
@@ -9,16 +9,16 @@ export type {
   Props as IteratorProps,
   PropsCallback,
   SimpleValue,
-} from "./helpers/Iterator"
-export { default as Iterator } from "./helpers/Iterator"
-export type { ListProps } from "./List"
-export { List } from "./List"
-export type { OverlayProps, UseOverlayProps } from "./Overlay"
-export { Overlay, OverlayProvider, useOverlay } from "./Overlay"
-export type { PortalProps } from "./Portal"
-export { Portal } from "./Portal"
-export type { TextProps } from "./Text"
-export { Text } from "./Text"
+} from './helpers/Iterator'
+export { default as Iterator } from './helpers/Iterator'
+export type { ListProps } from './List'
+export { List } from './List'
+export type { OverlayProps, UseOverlayProps } from './Overlay'
+export { Overlay, OverlayProvider, useOverlay } from './Overlay'
+export type { PortalProps } from './Portal'
+export { Portal } from './Portal'
+export type { TextProps } from './Text'
+export { Text } from './Text'
 export type {
   AlignX,
   AlignY,
@@ -30,8 +30,8 @@ export type {
   PyreonStatic,
   Responsive,
   ResponsiveBoolType,
-} from "./types"
-export type { UtilProps } from "./Util"
-export { Util } from "./Util"
+} from './types'
+export type { UtilProps } from './Util'
+export { Util } from './Util'
 
 export { Provider }

package/src/types.ts

@@ -3,9 +3,9 @@
  * value types (single | array | breakpoint-map) for layout props like
  * alignment and direction, plus utility types for merging prop objects.
  */
-import type { ComponentFn } from "@pyreon/core"
-import type { BreakpointKeys, config, render } from "@pyreon/ui-core"
-import type { MakeItResponsiveStyles } from "@pyreon/unistyle"
+import type { ComponentFn } from '@pyreon/core'
+import type { BreakpointKeys, config, render } from '@pyreon/ui-core'
+import type { MakeItResponsiveStyles } from '@pyreon/unistyle'
 
 export type ResponsiveStylesCallback = MakeItResponsiveStyles
 
@@ -29,13 +29,13 @@ export type CssCallback = (css: typeof config.css) => ReturnType<typeof css>
 
 export type Css = CssCallback | ReturnType<typeof config.css> | string
 
-export type Content = Parameters<typeof render>["0"]
+export type Content = Parameters<typeof render>['0']
 
-export type ContentAlignX = "left" | "center" | "right" | "spaceBetween" | "spaceAround" | "block"
+export type ContentAlignX = 'left' | 'center' | 'right' | 'spaceBetween' | 'spaceAround' | 'block'
 
-export type ContentAlignY = "top" | "center" | "bottom" | "spaceBetween" | "spaceAround" | "block"
+export type ContentAlignY = 'top' | 'center' | 'bottom' | 'spaceBetween' | 'spaceAround' | 'block'
 
-export type ContentDirection = "inline" | "rows" | "reverseInline" | "reverseRows"
+export type ContentDirection = 'inline' | 'rows' | 'reverseInline' | 'reverseRows'
 
 export type ContentBoolean = boolean
 export type ContentSimpleValue = string | number

package/src/utils.ts

@@ -1 +1 @@
-export const IS_DEVELOPMENT = process.env.NODE_ENV !== "production"
+export const IS_DEVELOPMENT = process.env.NODE_ENV !== 'production'