@pyreon/elements 0.11.1 → 0.11.3

package/src/helpers/Wrapper/constants.ts

@@ -0,0 +1,10 @@
+/**
+ * HTML elements that need a two-layer DOM workaround because browsers do not
+ * fully support flexbox layout on button, fieldset, and legend elements.
+ * @see https://stackoverflow.com/questions/35464067/flexbox-not-working-on-button-or-fieldset-elements
+ */
+export const INLINE_ELEMENTS_FLEX_FIX = {
+  button: true,
+  fieldset: true,
+  legend: true,
+}

package/src/helpers/Wrapper/index.ts

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

package/src/helpers/Wrapper/styled.ts

@@ -0,0 +1,69 @@
+/**
+ * Styled component for the Element wrapper layer. Handles responsive
+ * block/inline-flex display, direction, alignment, and custom CSS injection.
+ * Includes special handling for the `parentFix` / `childFix` flags that
+ * 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"
+
+const { styled, css, component } = config
+
+const childFixCSS = `
+  display: flex;
+  flex: 1;
+  width: 100%;
+  height: 100%;
+`
+
+const parentFixCSS = `
+  flex-direction: column;
+`
+
+const fullHeightCSS = `
+  height: 100%;
+`
+
+const blockCSS = `
+  align-self: stretch;
+  width: 100%;
+`
+
+const childFixPosition = (isBlock?: boolean) => `display: ${isBlock ? "flex" : "inline-flex"};`
+
+const styles: ResponsiveStylesCallback = ({ theme: t, css: cssFn }) => cssFn`
+  ${t.alignY === "block" && fullHeightCSS};
+
+  ${alignContent({
+    direction: t.direction,
+    alignX: t.alignX,
+    alignY: t.alignY,
+  })};
+
+  ${t.block && blockCSS};
+  ${t.alignY === "block" && t.block && fullHeightCSS};
+
+  ${!t.childFix && childFixPosition(t.block)};
+  ${t.parentFix && parentFixCSS};
+
+  ${t.extraStyles && extendCss(t.extraStyles as Parameters<typeof extendCss>[0])};
+`
+
+const platformCSS = `box-sizing: border-box;`
+
+export default styled(component)`
+  position: relative;
+  ${platformCSS};
+
+  ${(({ $childFix }: StyledProps) => $childFix && childFixCSS) as any};
+
+  ${makeItResponsive({
+    key: "$element",
+    styles,
+    css,
+    normalize: true,
+  })};
+`

package/src/helpers/Wrapper/types.ts

@@ -0,0 +1,56 @@
+import type { VNodeChild } from "@pyreon/core"
+import type { HTMLTags } from "@pyreon/ui-core"
+import type {
+  AlignX,
+  AlignY,
+  ContentAlignX,
+  ContentAlignY,
+  ContentBoolean,
+  ContentDirection,
+  Css,
+  Direction,
+  ExtendCss,
+  ResponsiveBoolType,
+} from "../../types"
+
+export type Reference = unknown
+
+export interface Props {
+  children: VNodeChild | VNodeChild[]
+  tag: HTMLTags | undefined
+  block: ResponsiveBoolType | undefined
+  isInline: boolean | undefined
+  direction: Direction | undefined
+  alignX: AlignX | undefined
+  alignY: AlignY | undefined
+  equalCols: ResponsiveBoolType | undefined
+  extendCss: ExtendCss | undefined
+  dangerouslySetInnerHTML: { __html: string } | undefined
+}
+
+export interface StyledProps {
+  $element: {
+    direction: Direction
+    alignX: AlignX
+    alignY: AlignY
+    equalCols: ResponsiveBoolType
+  } & Partial<{
+    block: ResponsiveBoolType
+    extraStyles: ExtendCss
+    childFix: true
+    parentFix: true
+  }>
+  $childFix?: true
+}
+
+export type ThemeProps = {
+  direction: ContentDirection
+  alignX: ContentAlignX
+  alignY: ContentAlignY
+  equalCols: ContentBoolean
+} & Partial<{
+  block: ContentBoolean
+  extraStyles: Css
+  childFix: true
+  parentFix: true
+}>

package/src/helpers/Wrapper/utils.ts

@@ -0,0 +1,7 @@
+import { INLINE_ELEMENTS_FLEX_FIX } from "./constants"
+
+type IsWebFixNeeded = (tag?: string) => boolean
+export const isWebFixNeeded: IsWebFixNeeded = (tag) => {
+  if (tag && tag in INLINE_ELEMENTS_FLEX_FIX) return true
+  return false
+}

package/src/helpers/index.ts

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

package/src/index.ts

@@ -0,0 +1,37 @@
+import { Provider } from "@pyreon/unistyle"
+
+export type { ElementProps, PyreonElement } from "./Element"
+export { Element } from "./Element"
+export type {
+  ElementType,
+  ExtendedProps,
+  ObjectValue,
+  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"
+export type {
+  AlignX,
+  AlignY,
+  Content,
+  ContentBoolean,
+  Direction,
+  ExtendCss,
+  InnerRef,
+  PyreonStatic,
+  Responsive,
+  ResponsiveBoolType,
+} from "./types"
+export type { UtilProps } from "./Util"
+export { Util } from "./Util"
+
+export { Provider }

package/src/types.ts

@@ -0,0 +1,81 @@
+/**
+ * Shared type definitions for the elements package. Provides responsive
+ * 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"
+
+export type ResponsiveStylesCallback = MakeItResponsiveStyles
+
+type ExtractNullableKeys<T> = {
+  [P in keyof T as T[P] extends null | undefined ? never : P]: T[P]
+}
+
+type Id<T> = T extends infer U ? { [K in keyof U]: U[K] } : never
+
+type SpreadTwo<L, R> = Id<Pick<L, Exclude<keyof L, keyof R>> & R>
+
+type Spread<A extends readonly [...any]> = A extends [infer L, ...infer R]
+  ? SpreadTwo<L, Spread<R>>
+  : unknown
+
+export type MergeTypes<A extends readonly [...any]> = ExtractNullableKeys<Spread<A>>
+
+export type InnerRef = HTMLElement | ((el: HTMLElement | null) => void) | null
+
+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 ContentAlignX = "left" | "center" | "right" | "spaceBetween" | "spaceAround" | "block"
+
+export type ContentAlignY = "top" | "center" | "bottom" | "spaceBetween" | "spaceAround" | "block"
+
+export type ContentDirection = "inline" | "rows" | "reverseInline" | "reverseRows"
+
+export type ContentBoolean = boolean
+export type ContentSimpleValue = string | number
+
+export type Ref = HTMLElement
+
+export type AlignY =
+  | ContentAlignY
+  | ContentAlignY[]
+  | Partial<Record<BreakpointKeys, ContentAlignY>>
+
+export type AlignX =
+  | ContentAlignX
+  | ContentAlignX[]
+  | Partial<Record<BreakpointKeys, ContentAlignX>>
+
+export type Direction =
+  | ContentDirection
+  | ContentDirection[]
+  | Partial<Record<BreakpointKeys, ContentDirection>>
+
+export type ResponsiveBoolType =
+  | ContentBoolean
+  | ContentBoolean[]
+  | Partial<Record<BreakpointKeys, ContentBoolean>>
+
+export type Responsive =
+  | ContentSimpleValue
+  | ContentSimpleValue[]
+  | Partial<Record<BreakpointKeys, number | string>>
+
+export type ExtendCss = Css | Css[] | Partial<Record<BreakpointKeys, Css>>
+
+export type ExtractProps<TComponentOrTProps> =
+  TComponentOrTProps extends ComponentFn<infer TProps> ? TProps : TComponentOrTProps
+
+export type PyreonComponent<P extends Record<string, any> = {}> = ComponentFn<P> & PyreonStatic
+
+export interface PyreonStatic {
+  displayName?: string | undefined
+  pkgName?: string
+  PYREON__COMPONENT?: `@pyreon/${string}`
+}

package/src/utils.ts

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