@ornikar/kitt-universal 25.26.0 → 25.27.0

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.
 
+## [25.27.0](https://github.com/ornikar/kitt/compare/@ornikar/kitt-universal@25.26.0...@ornikar/kitt-universal@25.27.0) (2024-10-22)
+
+
+### Features
+
+* remove react-portal package and use createPortal instead [no issue] ([#2493](https://github.com/ornikar/kitt/issues/2493)) ([539d53a](https://github.com/ornikar/kitt/commit/539d53a3eefda8f40c579d17dc8e303d41a1b807))
+
+
+
 ## [25.26.0](https://github.com/ornikar/kitt/compare/@ornikar/kitt-universal@25.25.0...@ornikar/kitt-universal@25.26.0) (2024-10-22)
 
 

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":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAsB9C,wBAAgB,MAAM,CAAC,CAAC,EAAE,EACxB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,wBAAgC,EAChC,gBAAwB,EACxB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,GACR,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CAqJ5B;yBAnKe,MAAM"}
+{"version":3,"file":"Picker.web.d.ts","sourceRoot":"","sources":["../../../src/Picker/Picker.web.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKrD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAsB9C,wBAAgB,MAAM,CAAC,CAAC,EAAE,EACxB,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,wBAAgC,EAChC,gBAAwB,EACxB,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,OAAO,GACR,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CAsJ5B;yBApKe,MAAM"}

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;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,CA0J7B;yBA1Ke,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;AAGlD,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,CA2J7B;yBA3Ke,OAAO"}

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

@@ -6,7 +6,7 @@ const react = require('react');
 const nativeBase = require('native-base');
 const jsxRuntime = require('react/jsx-runtime');
 const phosphor = require('@ornikar/kitt-icons/phosphor');
-const reactPortal = require('react-portal');
+const reactDom = require('react-dom');
 const reactTransitionGroup = require('react-transition-group');
 const reactNative = require('react-native');
 const parser = require('@twemoji/parser');
@@ -18,7 +18,7 @@ const jsApiLoader = require('@googlemaps/js-api-loader');
 const libphonenumberJs = require('libphonenumber-js');
 const Animated = require('react-native-reanimated');
 const reactNativeSafeAreaContext = require('react-native-safe-area-context');
-const reactDom = require('@floating-ui/react-dom');
+const reactDom$1 = require('@floating-ui/react-dom');
 const usehooksTs = require('usehooks-ts');
 const addons = require('@storybook/addons');
 
@@ -3729,9 +3729,7 @@ function ModalBehaviourPortal({
   isInitialRenderRef.current = false;
 
   // eslint-disable-next-line react/jsx-no-useless-fragment -- Portal propTypes define a required children, preventing a null children value
-  return /*#__PURE__*/jsxRuntime.jsx(reactPortal.Portal, {
-    children: children || /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {})
-  });
+  return children ? /*#__PURE__*/reactDom.createPortal(children, document.body) : /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {});
 }
 
 const OnCloseContext = /*#__PURE__*/react.createContext(() => {});
@@ -10826,11 +10824,11 @@ function Picker({
     y,
     refs,
     strategy
-  } = reactDom.useFloating({
+  } = reactDom$1.useFloating({
     placement: 'bottom-start',
     strategy: 'fixed',
-    whileElementsMounted: reactDom.autoUpdate,
-    middleware: [reactDom.offset(8)]
+    whileElementsMounted: reactDom$1.autoUpdate,
+    middleware: [reactDom$1.offset(8)]
   });
   const tooltipY = Math.round(y ?? 0);
   const tooltipX = Math.round(x ?? 0);
@@ -10851,92 +10849,90 @@ function Picker({
         disabled,
         ...restToggleProps
       })
-    }), /*#__PURE__*/jsxRuntime.jsx(reactPortal.Portal, {
+    }), /*#__PURE__*/reactDom.createPortal( /*#__PURE__*/jsxRuntime.jsx(View, {
+      ref: myRef => {
+        const currentRef = myRef;
+        refs.setFloating(currentRef);
+        menuRef(currentRef);
+      },
+      testID: testID,
+      ...menuProps,
+      position: strategy,
+      top: 0,
+      left: 0,
+      width: itemsWidth,
+      paddingY: isOpen ? 'kitt.2' : undefined,
+      _web: {
+        style: {
+          transform: `translate3d(${tooltipX}px, ${tooltipY}px, 0)`,
+          visibility: isOpen ? 'visible' : 'hidden',
+          transitionDuration: '300ms',
+          transitionProperty: 'opacity, padding',
+          transitionTimingFunction: 'ease-in-out'
+        }
+      },
       children: /*#__PURE__*/jsxRuntime.jsx(View, {
-        ref: myRef => {
-          const currentRef = myRef;
-          refs.setFloating(currentRef);
-          menuRef(currentRef);
-        },
-        testID: testID,
-        ...menuProps,
-        position: strategy,
-        top: 0,
-        left: 0,
-        width: itemsWidth,
-        paddingY: isOpen ? 'kitt.2' : undefined,
+        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: `translate3d(${tooltipX}px, ${tooltipY}px, 0)`,
+            transform: `translateY(${isOpen ? 0 : 8})`,
             visibility: isOpen ? 'visible' : 'hidden',
             transitionDuration: '300ms',
-            transitionProperty: 'opacity, padding',
             transitionTimingFunction: 'ease-in-out'
           }
         },
-        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,
+          timeout: 300,
+          in: isOpen,
+          classNames: {
+            enter,
+            enterActive,
+            exit,
+            exitActive
           },
-          children: /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.CSSTransition, {
-            unmountOnExit: true,
-            timeout: 300,
-            in: isOpen,
-            classNames: {
-              enter,
-              enterActive,
-              exit,
-              exitActive
-            },
-            children: /*#__PURE__*/jsxRuntime.jsx(View, {
-              paddingY: "kitt.2",
-              children: childrenArray.map((child, index) => {
-                const currentValue = items[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
-                    });
-                  }
-                }, itemProps.id);
-              })
+          children: /*#__PURE__*/jsxRuntime.jsx(View, {
+            paddingY: "kitt.2",
+            children: childrenArray.map((child, index) => {
+              const currentValue = items[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
+                  });
+                }
+              }, itemProps.id);
             })
           })
         })
       })
-    })]
+    }), document.body)]
   });
 }
 Picker.Option = PickerOption;
@@ -12182,19 +12178,19 @@ function Tooltip({
     refs,
     middlewareData,
     placement
-  } = reactDom.useFloating({
+  } = reactDom$1.useFloating({
     placement: position,
     strategy: 'fixed',
-    whileElementsMounted: reactDom.autoUpdate,
+    whileElementsMounted: reactDom$1.autoUpdate,
     middleware: [
     // Order matters
-    reactDom.offset(currentFloatingPadding), reactDom.autoPlacement({
+    reactDom$1.offset(currentFloatingPadding), reactDom$1.autoPlacement({
       allowedPlacements: ['top', 'bottom'],
       padding: currentFloatingPadding
-    }), reactDom.shift({
+    }), reactDom$1.shift({
       crossAxis: false,
       padding: currentFloatingPadding
-    }), reactDom.arrow({
+    }), reactDom$1.arrow({
       element: arrowRef
     })]
   });
@@ -12255,67 +12251,65 @@ function Tooltip({
         if (onToggle) onToggle(false);
         setIsVisible(false);
       }
-    }), /*#__PURE__*/jsxRuntime.jsx(reactPortal.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,
+    }), /*#__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,
+      style: {
+        pointerEvents: isVisible || isCursorOnTooltip ? 'auto' : 'none'
+      },
+      position: strategy,
+      zIndex: zIndex,
+      top: 0,
+      left: 0,
+      _web: {
         style: {
-          pointerEvents: isVisible || isCursorOnTooltip ? 'auto' : 'none'
-        },
-        position: strategy,
-        zIndex: zIndex,
-        top: 0,
-        left: 0,
+          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: handleMouseEnter,
+      onTouchEnd: handleMouseLeave,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: /*#__PURE__*/jsxRuntime.jsxs(View, {
         _web: {
           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
+            transform: `scale(${isVisible ? 1 : 0.8})`,
+            transitionDuration: isVisible ? '0' : transitionDuration,
+            transitionProperty: 'all',
+            transitionTimingFunction,
+            transformOrigin
           }
         },
-        onTouchStart: handleMouseEnter,
-        onTouchEnd: handleMouseLeave,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        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]
-        })
+        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;