@react-native-ohos/elements 2.3.9-rc.1 → 2.4.0-rc.1

package/lib/module/useFrameSize.js

@@ -0,0 +1,174 @@
+"use strict";
+
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import {
+// eslint-disable-next-line no-restricted-imports
+useSafeAreaFrame } from 'react-native-safe-area-context';
+import useLatestCallback from 'use-latest-callback';
+import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
+
+// Load with require to avoid error from webpack due to missing export in older versions
+// eslint-disable-next-line import-x/no-commonjs
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const SafeAreaListener = require('react-native-safe-area-context').SafeAreaListener;
+const FrameContext = /*#__PURE__*/React.createContext(undefined);
+export function useFrameSize(selector, throttle) {
+  const context = React.useContext(FrameContext);
+  if (context == null) {
+    throw new Error('useFrameSize must be used within a FrameSizeProvider');
+  }
+  const value = useSyncExternalStoreWithSelector(throttle ? context.subscribeThrottled : context.subscribe, context.getCurrent, context.getCurrent, selector);
+  return value;
+}
+export function FrameSizeProvider({
+  initialFrame,
+  children
+}) {
+  const context = React.useContext(FrameContext);
+  if (context != null) {
+    // If the context is already present, don't wrap again
+    return children;
+  }
+  return /*#__PURE__*/_jsx(FrameSizeProviderInner, {
+    initialFrame: initialFrame,
+    children: children
+  });
+}
+function FrameSizeProviderInner({
+  initialFrame,
+  children
+}) {
+  const frameRef = React.useRef({
+    width: initialFrame.width,
+    height: initialFrame.height
+  });
+  const listeners = React.useRef(new Set());
+  const getCurrent = useLatestCallback(() => frameRef.current);
+  const subscribe = useLatestCallback(listener => {
+    listeners.current.add(listener);
+    return () => {
+      listeners.current.delete(listener);
+    };
+  });
+  const subscribeThrottled = useLatestCallback(listener => {
+    const delay = 100; // Throttle delay in milliseconds
+
+    let timer;
+    let updated = false;
+    let waiting = false;
+    const throttledListener = () => {
+      clearTimeout(timer);
+      updated = true;
+      if (waiting) {
+        // Schedule a timer to call the listener at the end
+        timer = setTimeout(() => {
+          if (updated) {
+            updated = false;
+            listener();
+          }
+        }, delay);
+      } else {
+        waiting = true;
+        setTimeout(function () {
+          waiting = false;
+        }, delay);
+
+        // Call the listener immediately at start
+        updated = false;
+        listener();
+      }
+    };
+    const unsubscribe = subscribe(throttledListener);
+    return () => {
+      unsubscribe();
+      clearTimeout(timer);
+    };
+  });
+  const context = React.useMemo(() => ({
+    getCurrent,
+    subscribe,
+    subscribeThrottled
+  }), [subscribe, subscribeThrottled, getCurrent]);
+  const onChange = useLatestCallback(frame => {
+    if (frameRef.current.height === frame.height && frameRef.current.width === frame.width) {
+      return;
+    }
+    frameRef.current = {
+      width: frame.width,
+      height: frame.height
+    };
+    listeners.current.forEach(listener => listener());
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [Platform.OS === 'web' ? /*#__PURE__*/_jsx(FrameSizeListenerWeb, {
+      onChange: onChange
+    }) : typeof SafeAreaListener === 'undefined' ? /*#__PURE__*/_jsx(FrameSizeListenerNativeFallback, {
+      onChange: onChange
+    }) : /*#__PURE__*/_jsx(SafeAreaListener, {
+      onChange: ({
+        frame
+      }) => onChange(frame),
+      style: StyleSheet.absoluteFill
+    }), /*#__PURE__*/_jsx(FrameContext.Provider, {
+      value: context,
+      children: children
+    })]
+  });
+}
+
+// SafeAreaListener is available only on newer versions
+// Fallback to an effect-based shim for older versions
+function FrameSizeListenerNativeFallback({
+  onChange
+}) {
+  const frame = useSafeAreaFrame();
+  React.useLayoutEffect(() => {
+    onChange(frame);
+  }, [frame, onChange]);
+  return null;
+}
+
+// FIXME: On the Web, the safe area frame value doesn't update on resize
+// So we workaround this by measuring the frame on resize
+function FrameSizeListenerWeb({
+  onChange
+}) {
+  const elementRef = React.useRef(null);
+  React.useEffect(() => {
+    if (elementRef.current == null) {
+      return;
+    }
+    const rect = elementRef.current.getBoundingClientRect();
+    onChange({
+      width: rect.width,
+      height: rect.height
+    });
+    const observer = new ResizeObserver(entries => {
+      const entry = entries[0];
+      if (entry) {
+        const {
+          width,
+          height
+        } = entry.contentRect;
+        onChange({
+          width,
+          height
+        });
+      }
+    });
+    observer.observe(elementRef.current);
+    return () => {
+      observer.disconnect();
+    };
+  }, [onChange]);
+  return /*#__PURE__*/_jsx("div", {
+    ref: elementRef,
+    style: {
+      ...StyleSheet.absoluteFillObject,
+      pointerEvents: 'none',
+      visibility: 'hidden'
+    }
+  });
+}
+//# sourceMappingURL=useFrameSize.js.map

package/lib/module/useFrameSize.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Platform","StyleSheet","useSafeAreaFrame","useLatestCallback","useSyncExternalStoreWithSelector","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","SafeAreaListener","require","FrameContext","createContext","undefined","useFrameSize","selector","throttle","context","useContext","Error","value","subscribeThrottled","subscribe","getCurrent","FrameSizeProvider","initialFrame","children","FrameSizeProviderInner","frameRef","useRef","width","height","listeners","Set","current","listener","add","delete","delay","timer","updated","waiting","throttledListener","clearTimeout","setTimeout","unsubscribe","useMemo","onChange","frame","forEach","OS","FrameSizeListenerWeb","FrameSizeListenerNativeFallback","style","absoluteFill","Provider","useLayoutEffect","elementRef","useEffect","rect","getBoundingClientRect","observer","ResizeObserver","entries","entry","contentRect","observe","disconnect","ref","absoluteFillObject","pointerEvents","visibility"],"sourceRoot":"..\\..\\src","sources":["useFrameSize.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/Header/Header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/Header/Header.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAatD,KAAK,KAAK,GAAG,aAAa,GAAG;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE;QACL;;WAEG;QACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;QAC1B;;WAEG;QACH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;KAC1B,CAAC;IACF;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAkBF,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,2CA2VlC"}
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/Header/Header.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AActD,KAAK,KAAK,GAAG,aAAa,GAAG;IAC3B;;OAEG;IACH,IAAI,CAAC,EAAE;QACL;;WAEG;QACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;QAC1B;;WAEG;QACH,IAAI,EAAE,MAAM,GAAG,SAAS,CAAC;KAC1B,CAAC;IACF;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAkBF,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,2CA2VlC"}

package/lib/typescript/src/Header/HeaderButton.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type { HeaderButtonProps } from '../types';
-export declare function HeaderButton({ disabled, onPress, pressColor, pressOpacity, accessibilityLabel, testID, style, href, children, }: HeaderButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare const HeaderButton: React.ForwardRefExoticComponent<HeaderButtonProps & React.RefAttributes<import("react-native").View | import("react-native").Animated.LegacyRef<import("react-native").View>>>;
 //# sourceMappingURL=HeaderButton.d.ts.map

package/lib/typescript/src/Header/HeaderButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderButton.d.ts","sourceRoot":"","sources":["../../../../src/Header/HeaderButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAElD,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,OAAO,EACP,UAAU,EACV,YAAY,EACZ,kBAAkB,EAClB,MAAM,EACN,KAAK,EACL,IAAI,EACJ,QAAQ,GACT,EAAE,iBAAiB,2CAoBnB"}
+{"version":3,"file":"HeaderButton.d.ts","sourceRoot":"","sources":["../../../../src/Header/HeaderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAsClD,eAAO,MAAM,YAAY,gLAAyC,CAAC"}

package/lib/typescript/src/Header/HeaderSearchBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderSearchBar.d.ts","sourceRoot":"","sources":["../../../../src/Header/HeaderSearchBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EAGR,KAAK,SAAS,EAId,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,OAAO,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AA+S3E,eAAO,MAAM,eAAe;aA1SjB,OAAO;aACP,MAAM,IAAI;gBACP,MAAM;YACV,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;4CAuSc,CAAC"}
+{"version":3,"file":"HeaderSearchBar.d.ts","sourceRoot":"","sources":["../../../../src/Header/HeaderSearchBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EAGR,KAAK,SAAS,EAId,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,OAAO,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AA8S3E,eAAO,MAAM,eAAe;aAzSjB,OAAO;aACP,MAAM,IAAI;gBACP,MAAM;YACV,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;4CAsSc,CAAC"}

package/lib/typescript/src/PlatformPressable.d.ts

@@ -1,21 +1,27 @@
 import * as React from 'react';
-import { Animated, type PressableProps, type StyleProp, type ViewStyle } from 'react-native';
+import { Animated, type GestureResponderEvent, type PressableProps, type StyleProp, type ViewStyle } from 'react-native';
 type HoverEffectProps = {
     color?: string;
     hoverOpacity?: number;
     activeOpacity?: number;
 };
-export type Props = Omit<PressableProps, 'style'> & {
+export type Props = Omit<PressableProps, 'style' | 'onPress'> & {
+    href?: string;
     pressColor?: string;
     pressOpacity?: number;
     hoverEffect?: HoverEffectProps;
     style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-    href?: string;
+    onPress?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent) => void;
     children: React.ReactNode;
 };
-/**
- * PlatformPressable provides an abstraction on top of Pressable to handle platform differences.
- */
-export declare function PlatformPressable({ disabled, onPress, onPressIn, onPressOut, android_ripple, pressColor, pressOpacity, hoverEffect, style, children, ...rest }: Props): import("react/jsx-runtime").JSX.Element;
+export declare const PlatformPressable: React.ForwardRefExoticComponent<Omit<PressableProps, "style" | "onPress"> & {
+    href?: string;
+    pressColor?: string;
+    pressOpacity?: number;
+    hoverEffect?: HoverEffectProps;
+    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    onPress?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent) => void;
+    children: React.ReactNode;
+} & React.RefAttributes<import("react-native").View | Animated.LegacyRef<import("react-native").View>>>;
 export {};
 //# sourceMappingURL=PlatformPressable.d.ts.map

package/lib/typescript/src/PlatformPressable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PlatformPressable.d.ts","sourceRoot":"","sources":["../../../src/PlatformPressable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EAKR,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,CAAC,GAAG;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACzD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAUF;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,EACR,OAAO,EACP,SAAS,EACT,UAAU,EACV,cAAc,EACd,UAAU,EACV,YAAkB,EAClB,WAAW,EACX,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,KAAK,2CAsFP"}
+{"version":3,"file":"PlatformPressable.d.ts","sourceRoot":"","sources":["../../../src/PlatformPressable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EAER,KAAK,qBAAqB,EAG1B,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAEtB,KAAK,gBAAgB,GAAG;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC,GAAG;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACzD,OAAO,CAAC,EAAE,CACR,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG,qBAAqB,KACvE,IAAI,CAAC;IACV,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAgIF,eAAO,MAAM,iBAAiB;WAzIrB,MAAM;iBACA,MAAM;mBACJ,MAAM;kBACP,gBAAgB;YACtB,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;cAC9C,CACR,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,EAAE,UAAU,CAAC,GAAG,qBAAqB,KACvE,IAAI;cACC,KAAK,CAAC,SAAS;uGAiIiD,CAAC"}

package/lib/typescript/src/SafeAreaProviderCompat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SafeAreaProviderCompat.d.ts","sourceRoot":"","sources":["../../../src/SafeAreaProviderCompat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAOtB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAeF,wBAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,2CAmBhE;yBAnBe,sBAAsB"}
+{"version":3,"file":"SafeAreaProviderCompat.d.ts","sourceRoot":"","sources":["../../../src/SafeAreaProviderCompat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAStB,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAeF,wBAAgB,sBAAsB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,KAAK,2CAqBhE;yBArBe,sBAAsB"}

package/lib/typescript/src/Screen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../src/Screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EACR,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAWtB,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IAC1C,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IAChC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,2CAkElC"}
+{"version":3,"file":"Screen.d.ts","sourceRoot":"","sources":["../../../src/Screen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAEnB,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,QAAQ,EACR,KAAK,SAAS,EAGd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAStB,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,UAAU,EAAE,cAAc,CAAC,aAAa,CAAC,CAAC;IAC1C,KAAK,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IAChC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,KAAK,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC,CAAC;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,wBAAgB,MAAM,CAAC,KAAK,EAAE,KAAK,2CAkElC"}

package/lib/typescript/src/getNamedContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getNamedContext.d.ts","sourceRoot":"","sources":["../../../src/getNamedContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,qCAAqC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;CAC5E;AAMD,wBAAgB,eAAe,CAAC,CAAC,EAC/B,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,CAAC,GACd,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAalB"}
+{"version":3,"file":"getNamedContext.d.ts","sourceRoot":"","sources":["../../../src/getNamedContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,CAAC,MAAM,CAAC;IACb,IAAI,qCAAqC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;CAC5E;AAMD,wBAAgB,eAAe,CAAC,CAAC,EAC/B,IAAI,EAAE,MAAM,EACZ,YAAY,EAAE,CAAC,GACd,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAalB"}

package/lib/typescript/src/index.d.ts

@@ -20,6 +20,7 @@ export { ResourceSavingView } from './ResourceSavingView';
 export { SafeAreaProviderCompat } from './SafeAreaProviderCompat';
 export { Screen } from './Screen';
 export { Text } from './Text';
+export { useFrameSize } from './useFrameSize';
 export declare const Assets: any[];
 export * from './types';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,eAAO,MAAM,MAAM,OAMlB,CAAC;AAEF,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,eAAO,MAAM,MAAM,OAMlB,CAAC;AAEF,cAAc,SAAS,CAAC"}

package/lib/typescript/src/useFrameSize.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+type Frame = {
+    width: number;
+    height: number;
+};
+export declare function useFrameSize<T>(selector: (frame: Frame) => T, throttle?: boolean): T;
+type FrameSizeProviderProps = {
+    initialFrame: Frame;
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+};
+export declare function FrameSizeProvider({ initialFrame, children, }: FrameSizeProviderProps): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export {};
+//# sourceMappingURL=useFrameSize.d.ts.map

package/lib/typescript/src/useFrameSize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFrameSize.d.ts","sourceRoot":"","sources":["../../../src/useFrameSize.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,KAAK,SAAS,EAEd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAmBtB,KAAK,KAAK,GAAG;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAgBF,wBAAgB,YAAY,CAAC,CAAC,EAC5B,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,CAAC,EAC7B,QAAQ,CAAC,EAAE,OAAO,GACjB,CAAC,CAeH;AAED,KAAK,sBAAsB,GAAG;IAC5B,YAAY,EAAE,KAAK,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,QAAQ,GACT,EAAE,sBAAsB,sHAaxB"}

package/package.json

@@ -1,83 +1,85 @@
-{
-  "name": "@react-native-ohos/elements",
-  "description": "UI Components for React Navigation",
-  "version": "2.3.9-rc.1",
-  "harmony": {
-    "alias": "@react-navigation/elements"
-  },
-  "keywords": [
-    "react-native",
-    "react-navigation",
-    "ios",
-    "android"
-  ],
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://gitcode.com/openharmony-sig/rntpc_react-navigation.git",
-    "directory": "packages/elements"
-  },
-  "source": "./src/index.tsx",
-  "main": "./lib/module/index.js",
-  "types": "./lib/typescript/src/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./lib/typescript/src/index.d.ts",
-      "default": "./lib/module/index.js"
-    },
-    "./package.json": "./package.json"
-  },
-  "files": [
-    "src",
-    "lib",
-    "harmony"
-  ],
-  "sideEffects": false,
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "prepack": "bob build",
-    "clean": "del lib"
-  },
-  "dependencies": {
-    "color": "^4.2.3"
-  },
-  "devDependencies": {
-    "@jest/globals": "^29.7.0",
-    "@react-native-oh-tpl/masked-view": "file:./react-native-oh-tpl-masked-view-v0.3.2.tgz",
-    "@react-native-oh-tpl/react-native-safe-area-context": "^4.7.4-0.0.6",
-    "@react-navigation/native": "^7.1.6",
-    "@testing-library/react-native": "^12.8.1",
-    "@types/react": "~18.3.12",
-    "del-cli": "^5.1.0",
-    "react": "18.3.1",
-    "react-native": "0.76.2",
-    "react-native-builder-bob": "^0.40.0",
-    "react-test-renderer": "18.2.0",
-    "typescript": "^5.5.2"
-  },
-  "peerDependencies": {
-    "@react-navigation/native": "^7.1.6",
-    "react": ">= 18.2.0",
-    "react-native": "*"
-  },
-  "react-native-builder-bob": {
-    "source": "src",
-    "output": "lib",
-    "targets": [
-      [
-        "module",
-        {
-          "esm": true
-        }
-      ],
-      [
-        "typescript",
-        {
-          "project": "tsconfig.build.json"
-        }
-      ]
-    ]
-  }
-}
+{
+  "name": "@react-native-ohos/elements",
+  "description": "UI Components for React Navigation",
+  "version": "2.4.0-rc.1",
+  "harmony": {
+    "alias": "@react-navigation/elements"
+  },
+  "keywords": [
+    "react-native",
+    "react-navigation",
+    "ios",
+    "android"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitcode.com/openharmony-sig/rntpc_react-navigation.git",
+    "directory": "packages/elements"
+  },
+  "source": "./src/index.tsx",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "harmony"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepack": "bob build",
+    "clean": "del lib"
+  },
+  "dependencies": {
+    "color": "^4.2.3",
+    "use-sync-external-store": "^1.5.0"
+  },
+  "devDependencies": {
+    "@jest/globals": "^29.7.0",
+    "@react-native-oh-tpl/masked-view": "file:./react-native-oh-tpl-masked-view-v0.3.2.tgz",
+    "@react-native-oh-tpl/react-native-safe-area-context": "^4.7.4-0.0.6",
+    "@react-navigation/native": "^7.1.6",
+    "@testing-library/react-native": "^12.8.1",
+    "@types/react": "~18.3.12",
+    "@types/use-sync-external-store": "^1.5.0",
+    "del-cli": "^5.1.0",
+    "react": "18.3.1",
+    "react-native": "0.76.2",
+    "react-native-builder-bob": "^0.40.0",
+    "react-test-renderer": "18.2.0",
+    "typescript": "^5.5.2"
+  },
+  "peerDependencies": {
+    "@react-navigation/native": "^7.1.6",
+    "react": ">= 18.2.0",
+    "react-native": "*"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/Header/Header.tsx

@@ -9,13 +9,11 @@ import {
   View,
   type ViewStyle,
 } from 'react-native';
-import {
-  useSafeAreaFrame,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import searchIcon from '../assets/search-icon.png';
 import type { HeaderOptions, Layout } from '../types';
+import { useFrameSize } from '../useFrameSize';
 import { getDefaultHeaderHeight } from './getDefaultHeaderHeight';
 import { HeaderBackButton } from './HeaderBackButton';
 import { HeaderBackground } from './HeaderBackground';
@@ -74,7 +72,7 @@ const warnIfHeaderStylesDefined = (styles: Record<string, any>) => {
 
 export function Header(props: Props) {
   const insets = useSafeAreaInsets();
-  const frame = useSafeAreaFrame();
+  const frame = useFrameSize((size) => size, true);
   const { colors } = useTheme();
 
   const navigation = useNavigation();

package/src/Header/HeaderButton.tsx

@@ -1,24 +1,29 @@
+import * as React from 'react';
 import { Platform, StyleSheet } from 'react-native';
 
 import { PlatformPressable } from '../PlatformPressable';
 import type { HeaderButtonProps } from '../types';
 
-export function HeaderButton({
-  disabled,
-  onPress,
-  pressColor,
-  pressOpacity,
-  accessibilityLabel,
-  testID,
-  style,
-  href,
-  children,
-}: HeaderButtonProps) {
+function HeaderButtonInternal(
+  {
+    disabled,
+    onPress,
+    pressColor,
+    pressOpacity,
+    accessibilityLabel,
+    testID,
+    style,
+    href,
+    children,
+  }: HeaderButtonProps,
+  ref: React.Ref<React.ComponentRef<typeof PlatformPressable>>
+) {
   return (
     <PlatformPressable
+      ref={ref}
       disabled={disabled}
       href={href}
-      accessibilityLabel={accessibilityLabel}
+      aria-label={accessibilityLabel}
       testID={testID}
       onPress={onPress}
       pressColor={pressColor}
@@ -35,6 +40,10 @@ export function HeaderButton({
   );
 }
 
+export const HeaderButton = React.forwardRef(HeaderButtonInternal);
+
+HeaderButton.displayName = 'HeaderButton';
+
 const androidRipple = {
   borderless: true,
   foreground: Platform.OS === 'android' && Platform.Version >= 23,

package/src/Header/HeaderSearchBar.tsx

@@ -157,9 +157,8 @@ function HeaderSearchBarInternal(
   return (
     <Animated.View
       pointerEvents={visible ? 'auto' : 'none'}
-      accessibilityLiveRegion="polite"
-      accessibilityElementsHidden={!visible}
-      importantForAccessibility={visible ? 'auto' : 'no-hide-descendants'}
+      aria-live="polite"
+      aria-hidden={!visible}
       style={[styles.container, { opacity: visibleAnim }, style]}
     >
       <View style={styles.searchbarContainer}>

package/src/Header/HeaderTitle.tsx

@@ -19,7 +19,7 @@ export function HeaderTitle({ tintColor, style, ...rest }: Props) {
 
   return (
     <Animated.Text
-      accessibilityRole="header"
+      role="heading"
       aria-level="1"
       numberOfLines={1}
       {...rest}