@ornikar/kitt-universal 32.5.2 → 32.5.3

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [32.5.3](https://github.com/ornikar/kitt/compare/@ornikar/kitt-universal@32.5.2...@ornikar/kitt-universal@32.5.3) (2025-12-18)
+
+
+### Bug Fixes
+
+* **kitt-u/portal:** Target container is not a DOM element OSE-21791 ([#2816](https://github.com/ornikar/kitt/issues/2816)) ([12dbc00](https://github.com/ornikar/kitt/commit/12dbc00ac3a6ae6b6f1caf104c844a3bd815a589))
+
+
+
 ## [32.5.2](https://github.com/ornikar/kitt/compare/@ornikar/kitt-universal@32.5.1...@ornikar/kitt-universal@32.5.2) (2025-12-18)
 
 

package/dist/definitions/Picker/Picker.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.web.d.ts","sourceRoot":"","sources":["../../../src/Picker/Picker.web.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAU9C,wBAAgB,MAAM,CAAC,CAAC,EAAE,EACxB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,cAA+B,EAC/B,WAAW,EACX,wBAAgC,EAChC,gBAAwB,EACxB,MAAM,EACN,QAAQ,EACR,iBAAiB,EACjB,QAAQ,EACR,OAAO,GACR,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CA6J5B;yBA7Ke,MAAM"}
+{"version":3,"file":"Picker.web.d.ts","sourceRoot":"","sources":["../../../src/Picker/Picker.web.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAU9C,wBAAgB,MAAM,CAAC,CAAC,EAAE,EACxB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,cAA+B,EAC/B,WAAW,EACX,wBAAgC,EAChC,gBAAwB,EACxB,MAAM,EACN,QAAQ,EACR,iBAAiB,EACjB,QAAQ,EACR,OAAO,GACR,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CA4J5B;yBA5Ke,MAAM"}

package/dist/definitions/Portal/Portal.d.ts

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from 'react';
+export interface PortalProps extends PropsWithChildren {
+}
+/**
+ * @description Should only be used on web. Renders nothing on native platforms.
+ */
+export declare function Portal({ children }: PortalProps): null;
+//# sourceMappingURL=Portal.d.ts.map

package/dist/definitions/Portal/Portal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.d.ts","sourceRoot":"","sources":["../../../src/Portal/Portal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE/C,MAAM,WAAW,WAAY,SAAQ,iBAAiB;CAAG;AAEzD;;GAEG;AACH,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE,WAAW,GAAG,IAAI,CAEtD"}

package/dist/definitions/Portal/Portal.web.d.ts

@@ -0,0 +1,4 @@
+import type { ReactPortal } from 'react';
+import type { PortalProps } from './Portal';
+export declare function Portal({ children }: PortalProps): ReactPortal | null;
+//# sourceMappingURL=Portal.web.d.ts.map

package/dist/definitions/Portal/Portal.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.web.d.ts","sourceRoot":"","sources":["../../../src/Portal/Portal.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE,WAAW,GAAG,WAAW,GAAG,IAAI,CAMpE"}

package/dist/definitions/Portal/utils/getDocumentBodyIfExists.web.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns document.body if it exists, or null otherwise.
+ * This is useful when document.body might not be available, such as when document.write() is called
+ * which destroys the DOM and causes React portals to fail with "Target container is not a DOM element" error.
+ */
+export declare function getDocumentBodyIfExists(): HTMLBodyElement | null;
+//# sourceMappingURL=getDocumentBodyIfExists.web.d.ts.map

package/dist/definitions/Portal/utils/getDocumentBodyIfExists.web.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getDocumentBodyIfExists.web.d.ts","sourceRoot":"","sources":["../../../../src/Portal/utils/getDocumentBodyIfExists.web.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,uBAAuB,IAAI,eAAe,GAAG,IAAI,CAIhE"}

package/dist/definitions/Tooltip/Tooltip.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.web.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAKxC,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlD,UAAU,uBAAwB,SAAQ,OAAO,CAAC,oBAAoB,EAAE,gBAAgB,CAAC;IACvF,cAAc,EAAE,cAAc,CAAC;IAC/B,IAAI,EAAE;QACJ,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;QAC1B,QAAQ,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;KAC1B,CAAC;CACH;AAGD,KAAK,eAAe,GAAG,MAAM,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG;IACxD,QAAQ,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,IAAI,CAAC;CACrD,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,cAAc,EACd,QAAgB,EAChB,OAAO,EACP,eAAe,EACf,SAAS,EACT,QAAQ,EACR,eAIC,EACD,QAAQ,EACR,MAAM,GACP,EAAE,eAAe,GAAG,SAAS,CA2I7B;yBA3Je,OAAO"}
+{"version":3,"file":"Tooltip.web.d.ts","sourceRoot":"","sources":["../../../src/Tooltip/Tooltip.web.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAMxC,OAAO,KAAK,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,WAAW,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlD,UAAU,uBAAwB,SAAQ,OAAO,CAAC,oBAAoB,EAAE,gBAAgB,CAAC;IACvF,cAAc,EAAE,cAAc,CAAC;IAC/B,IAAI,EAAE;QACJ,SAAS,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;QAC1B,QAAQ,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;KAC1B,CAAC;CACH;AAGD,KAAK,eAAe,GAAG,MAAM,CAAC,YAAY,EAAE,UAAU,CAAC,GAAG;IACxD,QAAQ,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,IAAI,CAAC;CACrD,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,cAAc,EACd,QAAgB,EAChB,OAAO,EACP,eAAe,EACf,SAAS,EACT,QAAQ,EACR,eAIC,EACD,QAAQ,EACR,MAAM,GACP,EAAE,eAAe,GAAG,SAAS,CA0I7B;yBA1Je,OAAO"}

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

@@ -4238,6 +4238,29 @@ function useStaticBottomSheet(Content) {
   };
 }
 
+function isDocumentBodyAvailable(body) {
+  return !!body;
+}
+
+/**
+ * Returns document.body if it exists, or null otherwise.
+ * This is useful when document.body might not be available, such as when document.write() is called
+ * which destroys the DOM and causes React portals to fail with "Target container is not a DOM element" error.
+ */
+function getDocumentBodyIfExists() {
+  // document.body can be null when document.write() is called
+  const body = typeof document !== 'undefined' ? document.body : null;
+  return isDocumentBodyAvailable(body) ? body : null;
+}
+
+function Portal({
+  children
+}) {
+  const container = getDocumentBodyIfExists();
+  if (!container) return null;
+  return /*#__PURE__*/reactDom.createPortal(children, container);
+}
+
 function useBlockBodyScroll(shouldBlockScroll, isInitialRender) {
   react.useEffect(() => {
     if (shouldBlockScroll) {
@@ -4260,7 +4283,9 @@ function ModalBehaviourPortal({
   const isInitialRenderRef = react.useRef(true);
   useBlockBodyScroll(!!visible, isInitialRenderRef.current);
   isInitialRenderRef.current = false;
-  return children ? /*#__PURE__*/reactDom.createPortal(children, document.body) : null;
+  return children ? /*#__PURE__*/jsxRuntime.jsx(Portal, {
+    children: children
+  }) : null;
 }
 
 const OnCloseContext = /*#__PURE__*/react.createContext(() => {});
@@ -11756,87 +11781,89 @@ function Picker({
         disabled,
         ...restToggleProps
       })
-    }), /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx(View, {
-      ref: refMemo,
-      testID: testID,
-      ...menuProps,
-      position: strategy,
-      top: 0,
-      left: 0,
-      width: isItemsWidthFixed ? '100%' : itemsWidth,
-      maxWidth: isItemsWidthFixed ? 'kitt.picker.maxWidthFixed' : undefined,
-      zIndex: 1,
-      _web: {
-        style: {
-          transform: `translate3d(${tooltipX}px, ${tooltipY}px, 0)`,
-          visibility: isOpen ? 'visible' : 'hidden',
-          transitionDuration: '300ms',
-          transitionProperty: 'opacity, padding',
-          transitionTimingFunction: 'ease-in-out'
-        }
-      },
+    }), /*#__PURE__*/jsxRuntime.jsx(Portal, {
       children: /*#__PURE__*/jsxRuntime.jsx(View, {
-        opacity: isOpen ? 1 : 0,
-        backgroundColor: "kitt.picker.web.optionsContainer.backgroundColor",
-        borderRadius: "kitt.picker.web.optionsContainer.borderRadius",
-        shadow: "kitt.picker.web.optionsContainer.shadow",
+        ref: refMemo,
+        testID: testID,
+        ...menuProps,
+        position: strategy,
+        top: 0,
+        left: 0,
+        width: isItemsWidthFixed ? '100%' : itemsWidth,
+        maxWidth: isItemsWidthFixed ? 'kitt.picker.maxWidthFixed' : undefined,
+        zIndex: 1,
         _web: {
           style: {
-            transform: `translateY(${isOpen ? 0 : 8})`,
+            transform: `translate3d(${tooltipX}px, ${tooltipY}px, 0)`,
             visibility: isOpen ? 'visible' : 'hidden',
             transitionDuration: '300ms',
+            transitionProperty: 'opacity, padding',
             transitionTimingFunction: 'ease-in-out'
           }
         },
-        children: /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
-          unmountOnExit: true,
-          nodeRef: nodeRef,
-          timeout: 300,
-          in: isOpen,
-          classNames: pickerClassNames,
-          children: /*#__PURE__*/jsxRuntime.jsx(View, {
-            ref: nodeRef,
-            paddingY: "kitt.2",
-            children: childrenArray.map((child, index) => {
-              const currentValue = items[index];
-              if (currentValue === undefined) {
-                throw new Error(`Picker: No value found for item at index ${index}`);
-              }
-              const {
-                onClick,
-                'aria-selected': ariaSelected,
-                ...itemProps
-              } = getItemProps({
-                item: currentValue,
-                index,
-                disabled
-              });
-              return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
-                ...itemProps,
-                accessibilityState: {
-                  selected: ariaSelected
-                },
-                onPress: onClick,
-                children: ({
-                  isHovered,
-                  isFocused,
-                  isPressed
-                }) => {
-                  return /*#__PURE__*/jsxRuntime.jsx(PickerItem, {
-                    isSelected: checkSelectedItem(selectedItem || undefined, currentValue),
-                    isHighlighted: highlightedIndex === index,
-                    isHovered: isHovered,
-                    isFocused: isFocused,
-                    isPressed: isPressed,
-                    children: child
-                  });
+        children: /*#__PURE__*/jsxRuntime.jsx(View, {
+          opacity: isOpen ? 1 : 0,
+          backgroundColor: "kitt.picker.web.optionsContainer.backgroundColor",
+          borderRadius: "kitt.picker.web.optionsContainer.borderRadius",
+          shadow: "kitt.picker.web.optionsContainer.shadow",
+          _web: {
+            style: {
+              transform: `translateY(${isOpen ? 0 : 8})`,
+              visibility: isOpen ? 'visible' : 'hidden',
+              transitionDuration: '300ms',
+              transitionTimingFunction: 'ease-in-out'
+            }
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
+            unmountOnExit: true,
+            nodeRef: nodeRef,
+            timeout: 300,
+            in: isOpen,
+            classNames: pickerClassNames,
+            children: /*#__PURE__*/jsxRuntime.jsx(View, {
+              ref: nodeRef,
+              paddingY: "kitt.2",
+              children: childrenArray.map((child, index) => {
+                const currentValue = items[index];
+                if (currentValue === undefined) {
+                  throw new Error(`Picker: No value found for item at index ${index}`);
                 }
-              }, itemProps.id);
+                const {
+                  onClick,
+                  'aria-selected': ariaSelected,
+                  ...itemProps
+                } = getItemProps({
+                  item: currentValue,
+                  index,
+                  disabled
+                });
+                return /*#__PURE__*/jsxRuntime.jsx(Pressable, {
+                  ...itemProps,
+                  accessibilityState: {
+                    selected: ariaSelected
+                  },
+                  onPress: onClick,
+                  children: ({
+                    isHovered,
+                    isFocused,
+                    isPressed
+                  }) => {
+                    return /*#__PURE__*/jsxRuntime.jsx(PickerItem, {
+                      isSelected: checkSelectedItem(selectedItem || undefined, currentValue),
+                      isHighlighted: highlightedIndex === index,
+                      isHovered: isHovered,
+                      isFocused: isFocused,
+                      isPressed: isPressed,
+                      children: child
+                    });
+                  }
+                }, itemProps.id);
+              })
             })
           })
         })
       })
-    }), document.body)]
+    })]
   });
 }
 Picker.Option = PickerOption;
@@ -13300,67 +13327,69 @@ function Tooltip({
       onFocus: handleToggleTooltip,
       onBlur: handleToggleTooltip,
       width: '100%'
-    }), /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx(View, {
-      ref: refs.setFloating,
-      "aria-hidden": !isVisible,
-      paddingX: {
-        base: 'kitt.4',
-        small: 0
-      },
-      width: {
-        base: '100%',
-        small: 'max-content'
-      },
-      maxWidth: {
-        base: '100%',
-        small: 'kitt.tooltip.maxWidth'
-      },
-      opacity: isVisible ? 'kitt.tooltip.opacity' : 0,
-      paddingTop: placement === 'bottom' ? currentFloatingPadding : undefined,
-      paddingBottom: placement === 'top' ? currentFloatingPadding : undefined,
-      style: {
-        pointerEvents: isVisible ? 'auto' : 'none'
-      },
-      position: strategy,
-      zIndex: zIndex,
-      top: 0,
-      left: 0,
-      _web: {
+    }), /*#__PURE__*/jsxRuntime.jsx(Portal, {
+      children: /*#__PURE__*/jsxRuntime.jsx(View, {
+        ref: refs.setFloating,
+        "aria-hidden": !isVisible,
+        paddingX: {
+          base: 'kitt.4',
+          small: 0
+        },
+        width: {
+          base: '100%',
+          small: 'max-content'
+        },
+        maxWidth: {
+          base: '100%',
+          small: 'kitt.tooltip.maxWidth'
+        },
+        opacity: isVisible ? 'kitt.tooltip.opacity' : 0,
+        paddingTop: placement === 'bottom' ? currentFloatingPadding : undefined,
+        paddingBottom: placement === 'top' ? currentFloatingPadding : undefined,
         style: {
-          transform: `translate3d(${isBase && !fullWidth ? `0, ${tooltipY}px, 0` : `${tooltipX}px, ${tooltipY}px, 0`})`,
-          visibility: isVisible ? 'visible' : 'hidden',
-          transitionDuration,
-          transitionProperty: theme.kitt.tooltip.transition[themePart].property,
-          transitionTimingFunction
-        }
-      },
-      onTouchStart: handleToggleTooltip,
-      onTouchEnd: handleToggleTooltip,
-      onMouseEnter: handleToggleTooltip,
-      onMouseLeave: handleToggleTooltip,
-      children: /*#__PURE__*/jsxRuntime.jsxs(View, {
+          pointerEvents: isVisible ? 'auto' : 'none'
+        },
+        position: strategy,
+        zIndex: zIndex,
+        top: 0,
+        left: 0,
         _web: {
           style: {
-            transform: `scale(${isVisible ? 1 : 0.8})`,
-            transitionDuration: isVisible ? '0' : transitionDuration,
-            transitionProperty: 'all',
-            transitionTimingFunction,
-            transformOrigin
+            transform: `translate3d(${isBase && !fullWidth ? `0, ${tooltipY}px, 0` : `${tooltipX}px, ${tooltipY}px, 0`})`,
+            visibility: isVisible ? 'visible' : 'hidden',
+            transitionDuration,
+            transitionProperty: theme.kitt.tooltip.transition[themePart].property,
+            transitionTimingFunction
           }
         },
-        children: [shouldRenderArrow && placement === 'bottom' ? /*#__PURE__*/jsxRuntime.jsx(Arrow, {
-          ref: arrowRef,
-          position: "bottom",
-          ...sharedArrowProps
-        }) : null, /*#__PURE__*/jsxRuntime.jsx(TooltipContent, {
-          children: content
-        }), shouldRenderArrow && placement === 'top' ? /*#__PURE__*/jsxRuntime.jsx(Arrow, {
-          ref: arrowRef,
-          position: "top",
-          ...sharedArrowProps
-        }) : null]
+        onTouchStart: handleToggleTooltip,
+        onTouchEnd: handleToggleTooltip,
+        onMouseEnter: handleToggleTooltip,
+        onMouseLeave: handleToggleTooltip,
+        children: /*#__PURE__*/jsxRuntime.jsxs(View, {
+          _web: {
+            style: {
+              transform: `scale(${isVisible ? 1 : 0.8})`,
+              transitionDuration: isVisible ? '0' : transitionDuration,
+              transitionProperty: 'all',
+              transitionTimingFunction,
+              transformOrigin
+            }
+          },
+          children: [shouldRenderArrow && placement === 'bottom' ? /*#__PURE__*/jsxRuntime.jsx(Arrow, {
+            ref: arrowRef,
+            position: "bottom",
+            ...sharedArrowProps
+          }) : null, /*#__PURE__*/jsxRuntime.jsx(TooltipContent, {
+            children: content
+          }), shouldRenderArrow && placement === 'top' ? /*#__PURE__*/jsxRuntime.jsx(Arrow, {
+            ref: arrowRef,
+            position: "top",
+            ...sharedArrowProps
+          }) : null]
+        })
       })
-    }), document.body)]
+    })]
   });
 }
 Tooltip.Arrow = Arrow;