@ornikar/kitt-universal 29.4.1 → 29.4.2-canary.0e4f130cb45a177a7fdd9a15817918e986eb8cd4.0

package/dist/index-node-22.17.cjs.web.js

@@ -4121,10 +4121,11 @@ function ModalBehaviour({
 }
 ModalBehaviour.CloseButton = CloseButton$1;
 
-function Overlay({
+const Overlay = /*#__PURE__*/react.forwardRef(({
   onPress
-}) {
+}, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
+    ref: ref,
     accessibilityRole: "none",
     position: "absolute",
     top: "0",
@@ -4134,9 +4135,9 @@ function Overlay({
     backgroundColor: "kitt.overlay.dark",
     onPress: onPress
   });
-}
+});
 
-function CardModalRotationContainer(props) {
+const CardModalRotationContainer = /*#__PURE__*/react.forwardRef((props, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(View, {
     paddingX: "kitt.cardModal.overlayPadding.horizontal",
     paddingY: "kitt.cardModal.overlayPadding.vertical",
@@ -4146,9 +4147,10 @@ function CardModalRotationContainer(props) {
     _web: {
       maxHeight: '100svh'
     },
-    ...props
+    ...props,
+    ref: ref
   });
-}
+});
 
 const contentAnimationEnter$1 = "kitt-u_contentAnimationEnter_c11xxy4r";
 const contentAnimatioEnterActive$1 = "kitt-u_contentAnimatioEnterActive_cl52117";
@@ -4187,6 +4189,10 @@ function CardModalAnimation({
   onClose,
   ...props
 }) {
+  // React 19 has removed the ReactDOM.findDOMNode method. We need to use refs to access DOM nodes in CSSTransition.
+  // See https://github.com/reactjs/react-transition-group/issues/918
+  const overlayRef = react.useRef(null);
+  const contentRef = react.useRef(null);
   const theme = useTheme();
   const {
     animation
@@ -4202,13 +4208,16 @@ function CardModalAnimation({
     justifyContent: "center",
     children: [/*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
       ...sharedProps,
+      nodeRef: overlayRef,
       timeout: isAnimationEnabled ? animation.overlay.duration : 0,
       classNames: opacityClassNames$2,
       children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
+        ref: overlayRef,
         onPress: onClose
       })
     }), /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
       ...sharedProps,
+      nodeRef: contentRef,
       timeout: isAnimationEnabled ? animation.content.duration : 0,
       classNames: contentAnimationClassNames$1,
       onEnter: onEnter,
@@ -4216,6 +4225,7 @@ function CardModalAnimation({
       onExit: onExit,
       onExited: onExited,
       children: /*#__PURE__*/jsxRuntime.jsx(CardModalRotationContainer, {
+        ref: contentRef,
         alignItems: "center",
         margin: "auto",
         children: children
@@ -4785,6 +4795,10 @@ function DialogModalAnimation({
   onClose,
   ...props
 }) {
+  // React 19 has removed the ReactDOM.findDOMNode method. We need to use refs to access DOM nodes in CSSTransition.
+  // See https://github.com/reactjs/react-transition-group/issues/918
+  const overlayRef = react.useRef(null);
+  const contentRef = react.useRef(null);
   const theme = useTheme();
   const {
     animation
@@ -4800,13 +4814,16 @@ function DialogModalAnimation({
     justifyContent: "center",
     children: [/*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
       ...sharedProps,
+      nodeRef: overlayRef,
       timeout: isAnimationEnabled ? animation.overlay.duration : 0,
       classNames: opacityClassNames$1,
       children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
+        ref: overlayRef,
         onPress: onClose
       })
     }), /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
       ...sharedProps,
+      nodeRef: contentRef,
       timeout: isAnimationEnabled ? animation.content.duration : 0,
       classNames: contentAnimationClassNames,
       onEnter: onEnter,
@@ -4814,6 +4831,7 @@ function DialogModalAnimation({
       onExit: onExit,
       onExited: onExited,
       children: /*#__PURE__*/jsxRuntime.jsx(View, {
+        ref: contentRef,
         alignItems: "center",
         paddingX: "kitt.dialogModal.overlayPadding.horizontal",
         paddingY: "kitt.dialogModal.overlayPadding.vertical",
@@ -7412,6 +7430,10 @@ function FullscreenModalAnimation({
   onClose,
   ...props
 }) {
+  // React 19 has removed the ReactDOM.findDOMNode method. We need to use refs to access DOM nodes in CSSTransition.
+  // See https://github.com/reactjs/react-transition-group/issues/918
+  const overlayRef = react.useRef(null);
+  const contentRef = react.useRef(null);
   const theme = useTheme();
   const {
     animation
@@ -7425,20 +7447,26 @@ function FullscreenModalAnimation({
     ...props,
     children: [/*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
       ...sharedProps,
+      nodeRef: overlayRef,
       timeout: isAnimationEnabled ? animation.overlay.duration : 0,
       classNames: opacityClassNames,
       children: /*#__PURE__*/jsxRuntime.jsx(Overlay, {
+        ref: overlayRef,
         onPress: onClose
       })
     }), /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
       ...sharedProps,
+      nodeRef: contentRef,
       timeout: isAnimationEnabled ? animation.content.duration : 0,
       classNames: slideInClassNames,
       onEnter: onEnter,
       onEntered: onEntered,
       onExit: onExit,
       onExited: onExited,
-      children: children
+      children: /*#__PURE__*/jsxRuntime.jsx(View, {
+        ref: contentRef,
+        children: children
+      })
     })]
   });
 }
@@ -8189,16 +8217,17 @@ const getIconButtonColor = messageType => {
   }
 };
 
-function BaseMessage({
+const BaseMessage = /*#__PURE__*/react.forwardRef(({
   type = 'info',
   children,
   hasNoRadius,
   centeredText,
   insets,
   onDismiss
-}) {
+}, ref) => {
   const color = getColorByType(type);
   return /*#__PURE__*/jsxRuntime.jsxs(HStack, {
+    ref: ref,
     alignItems: "flex-start",
     justifyContent: "space-between",
     minHeight: "kitt.feedbackMessage.minHeight",
@@ -8240,7 +8269,7 @@ function BaseMessage({
       })
     }) : null]
   });
-}
+});
 
 function Message({
   type = 'info',
@@ -10989,14 +11018,15 @@ NavigationBottomSheet.Header = NavigationBottomSheetHeader;
 NavigationBottomSheet.Body = NavigationBottomSheetBody;
 NavigationBottomSheet.Footer = NavigationBottomSheetFooter;
 
-function Notification({
+const Notification = /*#__PURE__*/react.forwardRef(({
   type,
   children,
   centeredText,
   insets,
   onDismiss
-}) {
+}, ref) => {
   return /*#__PURE__*/jsxRuntime.jsx(BaseMessage, {
+    ref: ref,
     hasNoRadius: true,
     type: type,
     centeredText: centeredText,
@@ -11004,7 +11034,7 @@ function Notification({
     onDismiss: onDismiss,
     children: children
   });
-}
+});
 
 const AnimatedCircle = Animated__default.createAnimatedComponent(Svg.Circle);
 function AnimatedLoaderCircle({
@@ -11265,6 +11295,9 @@ function Picker({
   onChange,
   onClose
 }) {
+  // React 19 has removed the ReactDOM.findDOMNode method. We need to use refs to access DOM nodes in CSSTransition.
+  // See https://github.com/reactjs/react-transition-group/issues/918
+  const nodeRef = react.useRef(null);
   if ((process.env.NODE_ENV !== "production") && sourceValue !== undefined && !syncStateWithSourceValue) {
     throw new Error('Picker: sourceValue prop should only be used with syncStateWithSourceValue prop');
   }
@@ -11376,6 +11409,7 @@ function Picker({
         },
         children: /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
           unmountOnExit: true,
+          nodeRef: nodeRef,
           timeout: 300,
           in: isOpen,
           classNames: {
@@ -11385,6 +11419,7 @@ function Picker({
             exitActive
           },
           children: /*#__PURE__*/jsxRuntime.jsx(View, {
+            ref: nodeRef,
             paddingY: "kitt.2",
             children: childrenArray.map((child, index) => {
               const currentValue = items[index];