react-native-unistyles 3.1.1 → 3.2.1

package/src/specs/ShadowRegistry/index.ts

@@ -10,6 +10,7 @@ interface ShadowRegistry extends UnistylesShadowRegistrySpec {
     // JSI
     link(node: ShadowNode, styles?: Array<Unistyle>): void
     unlink(node: ShadowNode): void
+    suspend(node: ShadowNode): void
     flush(): void
     setScopedTheme(themeName?: string): void
     getScopedTheme(): string | undefined
@@ -17,6 +18,33 @@ interface ShadowRegistry extends UnistylesShadowRegistrySpec {
 
 const HybridShadowRegistry = NitroModules.createHybridObject<ShadowRegistry>('UnistylesShadowRegistry')
 
+const SUSPENSE_TAG = 13
+
+const isInsideSuspendedBoundary = (fiber: any): boolean => {
+    let current = fiber?.return
+
+    while (current) {
+        if (current.tag === SUSPENSE_TAG && current.memoizedState !== null) {
+            return true
+        }
+
+        current = current.return
+    }
+
+    return false
+}
+
+const findFiberForHandle = (handle: ViewHandle) => {
+    return (
+        handle?.__internalInstanceHandle ??
+        handle?.getScrollResponder?.()?.getNativeScrollRef?.()?.__internalInstanceHandle ??
+        handle?.getNativeScrollRef?.()?.__internalInstanceHandle ??
+        handle?._viewRef?.__internalInstanceHandle ??
+        handle?.viewRef?.current?.__internalInstanceHandle ??
+        handle?._nativeRef?.__internalInstanceHandle
+    )
+}
+
 const findShadowNodeForHandle = (handle: ViewHandle) => {
     const node =
         handle?.__internalInstanceHandle?.stateNode?.node ??
@@ -71,10 +99,16 @@ HybridShadowRegistry.remove = (handle) => {
     const maybeNode = findShadowNodeForHandle(handle)
 
     if (maybeNode) {
-        HybridShadowRegistry.unlink(maybeNode)
+        const fiber = findFiberForHandle(handle)
+
+        if (fiber && isInsideSuspendedBoundary(fiber)) {
+            HybridShadowRegistry.suspend(maybeNode)
+        } else {
+            HybridShadowRegistry.unlink(maybeNode)
+        }
     }
 }
 
-type PrivateMethods = 'add' | 'remove' | 'link' | 'unlink'
+type PrivateMethods = 'add' | 'remove' | 'link' | 'unlink' | 'suspend'
 
 export const UnistylesShadowRegistry = HybridShadowRegistry as Omit<ShadowRegistry, PrivateMethods>

package/src/web/convert/style.ts

@@ -98,22 +98,22 @@ const convertMap = {
         borderInlineStartWidth: value,
     }),
     end: (value: number) => ({
-        right: value,
+        insetInlineEnd: value,
     }),
     start: (value: number) => ({
-        left: value,
+        insetInlineStart: value,
     }),
     marginEnd: (value: number) => ({
-        marginRight: value,
+        marginInlineEnd: value,
     }),
     marginStart: (value: number) => ({
-        marginLeft: value,
+        marginInlineStart: value,
     }),
     paddingEnd: (value: number) => ({
-        paddingRight: value,
+        paddingInlineEnd: value,
     }),
     paddingStart: (value: number) => ({
-        paddingLeft: value,
+        paddingInlineStart: value,
     }),
     transformMatrix: (value: Array<number>) => ({
         transform: `matrix(${value.join(', ')})`,

package/src/web/listener.ts

@@ -92,6 +92,12 @@ export class UnistylesListener {
 
         window.addEventListener('orientationchange', () => this.emitChange(UnistyleDependency.Orientation))
         window.addEventListener('resize', () => this.emitChange(UnistyleDependency.Dimensions))
+        new MutationObserver(() => {
+            this.emitChange(UnistyleDependency.Rtl)
+        }).observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['dir'],
+        })
     }
 
     addListeners = (dependencies: Array<UnistyleDependency>, listener: Listener) => {

package/src/web/utils/createUnistylesRef.ts

@@ -20,7 +20,7 @@ export const createUnistylesRef = <T>(styles?: Styles, forwardedRef?: React.Forw
         ? undefined
         : (ref: Nullable<T>) => {
               if (!ref) {
-                  unistyles.services.shadowRegistry.remove(storedRef, classNames?.hash)
+                  unistyles.services.shadowRegistry.remove(storedRef.current, classNames?.hash)
               }
 
               storedRef.current = ref