@startupjs-ui/div 0.2.0 → 0.3.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 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)
+
+
+### Features
+
+* [BREAKING] [0.3] improve accessibility props for E2E tests. Support testID everywhere ([#31](https://github.com/startupjs/startupjs-ui/issues/31)) ([882588c](https://github.com/startupjs/startupjs-ui/commit/882588ca37d5e1fd14b5717b5697cf9ed47042e4))
+
+
+
+
+
 # [0.2.0](https://github.com/startupjs/startupjs-ui/compare/v0.1.23...v0.2.0) (2026-05-04)
 
 

package/README.mdx

@@ -8,7 +8,7 @@ import Icon from '@startupjs-ui/icon'
 
 # Div
 
-Div is a basic building block for layouts. It is a wrapper around `View` with extra features like press handling (`onPress`, `onLongPress`, `onPressIn`, `onPressOut`), layout helpers (`row`, `wrap`, `reverse`, `align`, `vAlign`, `gap`), shadows (`level`), corner shapes (`shape`), spacing (`pushed`, `bleed`), tooltips (`tooltip`, `tooltipStyle`), and built-in animation support. You can pass custom `style`, provide content as `children`, and use `ref` to access the underlying native view. Accessibility is supported via `accessible` and `accessibilityRole`, and `data-testid` can be used for testing.
+Div is a basic building block for layouts. It is a wrapper around `View` with extra features like press handling (`onPress`, `onLongPress`, `onPressIn`, `onPressOut`), layout helpers (`row`, `wrap`, `reverse`, `align`, `vAlign`, `gap`), shadows (`level`), corner shapes (`shape`), spacing (`pushed`, `bleed`), tooltips (`tooltip`, `tooltipStyle`), and built-in animation support. You can pass custom `style`, provide content as `children`, and use `ref` to access the underlying native view. Accessibility and E2E semantics are exposed with `role`, `aria-*`, and `testID`.
 
 ```jsx
 import { Div } from 'startupjs-ui'

package/index.d.ts

@@ -2,13 +2,19 @@
 // DO NOT MODIFY THIS FILE - IT IS AUTOMATICALLY GENERATED ON COMMITS.
 
 import { type ReactNode, type RefObject } from 'react';
-import { type StyleProp, type ViewStyle, type ViewProps, type AccessibilityRole } from 'react-native';
+import { type StyleProp, type ViewStyle, type ViewProps } from 'react-native';
+import { type UIRole } from '@startupjs-ui/core';
+type AriaHasPopup = boolean | 'dialog' | 'grid' | 'listbox' | 'menu' | 'tree';
 declare const _default: import("react").ComponentType<DivProps>;
 export default _default;
 export declare const _PropsJsonSchema: {};
-export interface DivProps extends ViewProps {
+export interface DivProps extends Omit<ViewProps, 'role'> {
     /** Ref to access underlying <View> or <Pressable> */
     ref?: RefObject<any>;
+    /** Accessibility role. Includes RN roles plus web-only ARIA roles used by RNW. */
+    role?: UIRole;
+    /** Web popup type exposed through aria-haspopup */
+    'aria-haspopup'?: AriaHasPopup;
     /** Custom styles applied to the root view */
     style?: StyleProp<ViewStyle>;
     /** Content rendered inside Div */
@@ -59,12 +65,8 @@ export interface DivProps extends ViewProps {
     onPressOut?: (e: any) => void;
     /** Whether view is accessible and focusable (if you can press it it's focusable by default) */
     accessible?: boolean;
-    /** Accessibility role passed to native view (if you can press it it's a 'button') */
-    accessibilityRole?: AccessibilityRole;
     /** Deprecated custom tooltip renderer @deprecated */
     renderTooltip?: any;
     /** Internal: render a native <button> host on web when the resolved role is button */
     _webNativeButton?: boolean;
-    /** Test ID for testing purposes */
-    'data-testid'?: string;
 }

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,
@@ -6,17 +6,24 @@ import {
   StyleSheet,
   type StyleProp,
   type ViewStyle,
-  type ViewProps,
-  type AccessibilityRole
+  type ViewProps
 } from 'react-native'
 import Animated from 'react-native-reanimated'
 import { pug, observer, u, useDidUpdate } from 'startupjs'
-import { colorToRGBA, getCssVariable, themed } from '@startupjs-ui/core'
+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'
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
 
+type AriaHasPopup = boolean | 'dialog' | 'grid' | 'listbox' | 'menu' | 'tree'
+
 const DEPRECATED_PUSHED_VALUES = ['xs', 'xl', 'xxl']
 const PRESSABLE_PROPS = ['onPress', 'onLongPress', 'onPressIn', 'onPressOut']
 const isWeb = Platform.OS === 'web'
@@ -33,9 +40,13 @@ export default observer(themed('Div', Div))
 
 export const _PropsJsonSchema = {/* DivProps */}
 
-export interface DivProps extends ViewProps {
+export interface DivProps extends Omit<ViewProps, 'role'> {
   /** Ref to access underlying <View> or <Pressable> */
   ref?: RefObject<any>
+  /** Accessibility role. Includes RN roles plus web-only ARIA roles used by RNW. */
+  role?: UIRole
+  /** Web popup type exposed through aria-haspopup */
+  'aria-haspopup'?: AriaHasPopup
   /** Custom styles applied to the root view */
   style?: StyleProp<ViewStyle>
   /** Content rendered inside Div */
@@ -86,18 +97,14 @@ export interface DivProps extends ViewProps {
   onPressOut?: (e: any) => void
   /** Whether view is accessible and focusable (if you can press it it's focusable by default) */
   accessible?: boolean
-  /** Accessibility role passed to native view (if you can press it it's a 'button') */
-  accessibilityRole?: AccessibilityRole
   /** Deprecated custom tooltip renderer @deprecated */
   renderTooltip?: any // Deprecated
   /** Internal: render a native <button> host on web when the resolved role is button */
   _webNativeButton?: boolean
-  /** Test ID for testing purposes */
-  'data-testid'?: string
 }
 
 function Div ({
-  style = [],
+  style: rawStyle = [],
   children,
   variant = 'opacity',
   row,
@@ -116,7 +123,6 @@ function Div ({
   bleed,
   full,
   accessible,
-  accessibilityRole,
   tooltip,
   tooltipStyle,
   renderTooltip,
@@ -125,20 +131,29 @@ 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)
   const rootRef = ref ?? fallbackRef
 
   let pressableStyle: StyleProp<ViewStyle> = {}
-  let deferredRole: AccessibilityRole | string | undefined
+  let deferredRole: string | undefined
   ;({
     props,
     pressableStyle,
-    accessibilityRole,
     deferredRole
   } = useDecoratePressableProps({
     props,
@@ -148,22 +163,18 @@ function Div ({
     variant,
     isPressable,
     disabled,
-    accessibilityRole,
     feedback,
     webNativeButton: _webNativeButton
   }))
 
   ;({
     props,
-    accessible,
-    accessibilityRole,
-    deferredRole
+    accessible
   } = useDecorateAccessibilityProps({
     props,
     rootRef,
     disabled,
     accessible,
-    accessibilityRole,
     isPressable,
     deferredRole,
     webNativeButton: _webNativeButton
@@ -193,7 +204,7 @@ function Div ({
   const Component = isPressable
     ? (isAnimated ? AnimatedPressable : Pressable)
     : (isAnimated ? Animated.View : View)
-  const testID = props.testID ?? props['data-testid']
+  const renderProps = props as Omit<typeof props, 'role'> & { role?: ViewProps['role'] }
   const divElement = pug`
     Component.root(
       ref=rootRef
@@ -218,18 +229,26 @@ function Div ({
         levelModifier
       ]
       accessible=accessible
-      accessibilityRole=accessibilityRole
-      testID=testID
-      ...props
+      ...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']> {
+  return role === 'listbox' || role === 'gridcell'
 }
 
 function hasAnimatedProperty (style: any): boolean {
@@ -242,7 +261,6 @@ function useDecorateAccessibilityProps ({
   rootRef,
   disabled,
   accessible,
-  accessibilityRole,
   isPressable,
   deferredRole,
   webNativeButton
@@ -251,19 +269,15 @@ function useDecorateAccessibilityProps ({
   rootRef: RefObject<any>
   disabled?: boolean
   accessible?: boolean
-  accessibilityRole?: AccessibilityRole
   isPressable: boolean
-  deferredRole?: AccessibilityRole | string
+  deferredRole?: string
   webNativeButton?: boolean
 }): {
     props: Record<string, any>
     accessible?: boolean
-    accessibilityRole?: AccessibilityRole
-    deferredRole?: AccessibilityRole | string
   } {
   if (accessible == null && isPressable) accessible = true
   if (accessible === false) {
-    accessibilityRole = undefined
     deferredRole = undefined
     props.role = undefined
   }
@@ -272,6 +286,9 @@ function useDecorateAccessibilityProps ({
     props['aria-disabled'] = disabled
   }
 
+  if (isNative && isWebOnlyRole(props.role)) delete props.role
+  if (isNative) delete props['aria-haspopup']
+
   const roleProp = props.role
   const ariaDisabled = props['aria-disabled']
 
@@ -301,7 +318,7 @@ function useDecorateAccessibilityProps ({
     }
   }, [rootRef, deferredRole, roleProp, ariaDisabled, webNativeButton, disabled])
 
-  return { props, accessible, accessibilityRole, deferredRole }
+  return { props, accessible }
 }
 
 function useDecoratePressableProps ({
@@ -312,7 +329,6 @@ function useDecoratePressableProps ({
   variant,
   isPressable,
   disabled,
-  accessibilityRole,
   feedback,
   webNativeButton
 }: {
@@ -323,17 +339,15 @@ function useDecoratePressableProps ({
   variant: 'opacity' | 'highlight'
   isPressable: boolean
   disabled?: boolean
-  accessibilityRole?: AccessibilityRole
   feedback?: boolean
   webNativeButton?: boolean
 }): {
     props: Record<string, any>
     pressableStyle?: StyleProp<ViewStyle>
-    accessibilityRole?: AccessibilityRole
-    deferredRole?: AccessibilityRole | string
+    deferredRole?: string
   } {
   let pressableStyle: StyleProp<ViewStyle> = {}
-  let deferredRole: AccessibilityRole | string | undefined
+  let deferredRole: string | undefined
   const [hover, setHover] = useState(false)
   const [active, setActive] = useState(false)
 
@@ -350,16 +364,14 @@ function useDecoratePressableProps ({
   // decorate the element state (hover, active) only if it's pressable
   if (!isPressable) return { props }
 
-  const resolvedRole = props.role ?? accessibilityRole ?? 'button'
-  accessibilityRole ??= typeof resolvedRole === 'string' ? resolvedRole as AccessibilityRole : undefined
+  const resolvedRole = props.role ?? 'button'
   props.focusable ??= true
 
   if (isWeb && resolvedRole === 'button' && !webNativeButton) {
     delete props.role
-    accessibilityRole = undefined
     deferredRole = 'button'
   } else {
-    props.role ??= accessibilityRole
+    props.role ??= resolvedRole
   }
 
   // setup hover and active states styles and props
@@ -406,7 +418,7 @@ function useDecoratePressableProps ({
     }
   }
 
-  return { props, pressableStyle, accessibilityRole, deferredRole }
+  return { props, pressableStyle, deferredRole }
 }
 
 function getDefaultStyle (
@@ -446,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
@@ -456,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.2.0",
+  "version": "0.3.1",
   "publishConfig": {
     "access": "public"
   },
@@ -12,9 +12,9 @@
     "./useTooltip": "./useTooltip.tsx"
   },
   "dependencies": {
-    "@startupjs-ui/abstract-popover": "^0.2.0",
-    "@startupjs-ui/core": "^0.2.0",
-    "@startupjs-ui/span": "^0.2.0"
+    "@startupjs-ui/abstract-popover": "^0.3.0",
+    "@startupjs-ui/core": "^0.3.0",
+    "@startupjs-ui/span": "^0.3.1"
   },
   "peerDependencies": {
     "react": "*",
@@ -22,5 +22,5 @@
     "react-native-reanimated": ">=4.0.0",
     "startupjs": "*"
   },
-  "gitHead": "0c586b841cba1c9d820542f6eca07470f5ea2659"
+  "gitHead": "60311773bdc83f354c797a272774304502d28c58"
 }