@startupjs-ui/div 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.3.1](https://github.com/startupjs/startupjs-ui/compare/v0.3.0...v0.3.1) (2026-06-08)
+
+
+### Features
+
+* support inherited text styles from Div, support relative lineHeight ([#32](https://github.com/startupjs/startupjs-ui/issues/32)) ([47b56ab](https://github.com/startupjs/startupjs-ui/commit/47b56abca03b1d3ef1d977309deffd95a2de709d))
+
+
+
+
+
 # [0.3.0](https://github.com/startupjs/startupjs-ui/compare/v0.2.3...v0.3.0) (2026-05-27)
 
 

package/index.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useState, useRef, type ReactNode, type RefObject } from 'react'
+import { useContext, useLayoutEffect, useMemo, useState, useRef, type ReactNode, type RefObject } from 'react'
 import {
   View,
   Pressable,
@@ -11,6 +11,12 @@ import {
 import Animated from 'react-native-reanimated'
 import { pug, observer, u, useDidUpdate } from 'startupjs'
 import { colorToRGBA, getCssVariable, themed, type UIRole } from '@startupjs-ui/core'
+import {
+  TextStyleContext,
+  getInheritedTextStyle,
+  mergeInheritedTextStyles,
+  omitInheritedTextStyle
+} from '@startupjs-ui/span/textStyleContext'
 import { useDecorateTooltipProps } from './useTooltip'
 import STYLES from './index.cssx.styl'
 
@@ -98,7 +104,7 @@ export interface DivProps extends Omit<ViewProps, 'role'> {
 }
 
 function Div ({
-  style = [],
+  style: rawStyle = [],
   children,
   variant = 'opacity',
   row,
@@ -125,9 +131,19 @@ function Div ({
   ...props
 }: DivProps): ReactNode {
   assertDeprecatedValues({ pushed, renderTooltip })
-  style = StyleSheet.flatten(style)
+  let style = StyleSheet.flatten(rawStyle) as ViewStyle | undefined
   // on RN row-reverse switches margins and paddings sides, so we switch them back
   if (isNative && reverse) style = reverseMarginPaddingSides(style)
+
+  const inheritedTextStyle = useContext(TextStyleContext)
+  const ownTextStyle = getInheritedTextStyle(style)
+  const nextInheritedTextStyleKey = simpleNumericHash(JSON.stringify([inheritedTextStyle, ownTextStyle]))
+  const nextInheritedTextStyle = useMemo(() => {
+    if (!ownTextStyle) return undefined
+    return mergeInheritedTextStyles(inheritedTextStyle, ownTextStyle)
+  }, [nextInheritedTextStyleKey]) // eslint-disable-line react-hooks/exhaustive-deps
+  omitInheritedTextStyle(style)
+
   if (gap === true) gap = 2
   const isPressable = hasPressHandler(props)
   const fallbackRef = useRef<any>(null)
@@ -216,13 +232,19 @@ function Div ({
       ...renderProps
     )= children
   `
+  const styledDivElement = nextInheritedTextStyle
+    ? pug`
+      TextStyleContext.Provider(value=nextInheritedTextStyle)
+        = divElement
+    `
+    : divElement
 
   if (tooltipElement) {
     return pug`
-      = divElement
+      = styledDivElement
       = tooltipElement
     `
-  } else return divElement
+  } else return styledDivElement
 }
 
 function isWebOnlyRole (role: unknown): role is Exclude<UIRole, ViewProps['role']> {
@@ -436,8 +458,8 @@ function hasPressHandler (props: Record<string, any>): boolean {
   return PRESSABLE_PROPS.some(prop => props[prop])
 }
 
-function reverseMarginPaddingSides (style: StyleProp<ViewStyle>) {
-  style = StyleSheet.flatten(style)
+function reverseMarginPaddingSides (style: ViewStyle | undefined): ViewStyle | undefined {
+  if (!style) return style
   const { paddingLeft, paddingRight, marginLeft, marginRight } = style
   style.marginLeft = marginRight
   style.marginRight = marginLeft
@@ -446,6 +468,12 @@ function reverseMarginPaddingSides (style: StyleProp<ViewStyle>) {
   return style
 }
 
+function simpleNumericHash (s: string): number {
+  let h = 0
+  for (let i = 0; i < s.length; i++) h = Math.imul(31, h) + s.charCodeAt(i) | 0
+  return h
+}
+
 function assertDeprecatedValues ({ pushed, renderTooltip }: { pushed?: any, renderTooltip?: any }) {
   if (DEPRECATED_PUSHED_VALUES.includes(pushed)) console.warn(ERRORS.DEPRECATED_PUSHED(pushed))
   if (renderTooltip) console.warn(ERRORS.DEPRECATED_RENDER_TOOLTIP)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/div",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "publishConfig": {
     "access": "public"
   },
@@ -14,7 +14,7 @@
   "dependencies": {
     "@startupjs-ui/abstract-popover": "^0.3.0",
     "@startupjs-ui/core": "^0.3.0",
-    "@startupjs-ui/span": "^0.3.0"
+    "@startupjs-ui/span": "^0.3.1"
   },
   "peerDependencies": {
     "react": "*",
@@ -22,5 +22,5 @@
     "react-native-reanimated": ">=4.0.0",
     "startupjs": "*"
   },
-  "gitHead": "8d212b47680af1dfe582f9759b38724b46488e25"
+  "gitHead": "60311773bdc83f354c797a272774304502d28c58"
 }