@ilo-org/react 0.9.0 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @ilo-org/react
 
+## 0.10.0
+
+### Minor Changes
+
+- 4630eea87: Upgrade react storybook to 7.6.6
+
+### Patch Changes
+
+- d20d3c750: Sync tooltip with twig
+- 857b7b57b: Sync profile with twig
+- Updated dependencies [08a2141cc]
+- Updated dependencies [dea2d0a07]
+  - @ilo-org/styles@0.13.1
+
+## 0.9.1
+
+### Patch Changes
+
+- afb53cabb: Sync hero with twig implementation
+- Updated dependencies [df7080c80]
+- Updated dependencies [c5eaabd55]
+- Updated dependencies [720825342]
+- Updated dependencies [6f86e7a94]
+- Updated dependencies [94b03b9be]
+- Updated dependencies [c54ce9923]
+- Updated dependencies [6fe60e0d6]
+- Updated dependencies [9ed7b873d]
+- Updated dependencies [c173ec9f8]
+  - @ilo-org/styles@0.13.0
+
 ## 0.9.0
 
 ### Minor Changes

package/lib/cjs/components/Checkbox/Checkbox.js

@@ -10,7 +10,7 @@ var components_FormControl_FormControl = require('../FormControl/FormControl.js'
 var hooks_usePrevious = require('../../hooks/usePrevious.js');
 require('../../GlobalCtx-97e4b433.js');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 require('nanoid');
 
 const Checkbox = require$$0.forwardRef((props, ref) => {

package/lib/cjs/components/Checkbox/index.js

@@ -9,7 +9,7 @@ require('../../hooks/useGlobalSettings.js');
 require('../../GlobalCtx-97e4b433.js');
 require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 require('../FormControl/FormControl.js');
 require('nanoid');
 require('../../hooks/usePrevious.js');

package/lib/cjs/components/DatePicker/DatePicker.js

@@ -9,7 +9,7 @@ var components_FormControl_FormControl = require('../FormControl/FormControl.js'
 require('../../GlobalCtx-97e4b433.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 const DatePicker = require$$0.forwardRef((props, ref) => {
     const { onChange, onBlur, disabled = false, error, id, name, placeholder, required, max, min, step, } = props;

package/lib/cjs/components/DatePicker/index.js

@@ -10,7 +10,7 @@ require('../../GlobalCtx-97e4b433.js');
 require('../FormControl/FormControl.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 
 

package/lib/cjs/components/Dropdown/Dropdown.js

@@ -9,7 +9,7 @@ var components_FormControl_FormControl = require('../FormControl/FormControl.js'
 require('../../GlobalCtx-97e4b433.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 const Dropdown = require$$0.forwardRef((props, ref) => {
     const { autocomplete, onChange, onBlur, disabled = false, error, id, name, options, required, value, form, multiple, selectSize, } = props;

package/lib/cjs/components/Dropdown/index.js

@@ -10,7 +10,7 @@ require('../../GlobalCtx-97e4b433.js');
 require('../FormControl/FormControl.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 
 

package/lib/cjs/components/Fieldset/Fieldset.js

@@ -9,7 +9,7 @@ var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_Tooltip_Tooltip = require('../Tooltip/Tooltip.js');
 require('../../GlobalCtx-97e4b433.js');
-require('react-dom');
+require('@popperjs/core');
 
 // Create a new context for the error state
 const FieldsetErrorContext = require$$0.createContext({

package/lib/cjs/components/Fieldset/index.js

@@ -8,7 +8,7 @@ require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('../../GlobalCtx-97e4b433.js');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 
 

package/lib/cjs/components/FileUpload/FileUpload.js

@@ -9,7 +9,7 @@ var components_FormControl_FormControl = require('../FormControl/FormControl.js'
 require('../../GlobalCtx-97e4b433.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 function formatBytes(bytes, decimals = 2) {
     if (!+bytes)

package/lib/cjs/components/FileUpload/index.js

@@ -10,7 +10,7 @@ require('../../GlobalCtx-97e4b433.js');
 require('../FormControl/FormControl.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 
 

package/lib/cjs/components/FormControl/FormControl.js

@@ -10,7 +10,7 @@ var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
 var components_Tooltip_Tooltip = require('../Tooltip/Tooltip.js');
 require('tslib');
 require('../../GlobalCtx-97e4b433.js');
-require('react-dom');
+require('@popperjs/core');
 
 // Calculates unique IDs for the internal accessibility elements
 // TODO: When we upgrade to React 8, this should use useId instead

package/lib/cjs/components/FormControl/index.js

@@ -9,7 +9,7 @@ require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('../../GlobalCtx-97e4b433.js');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 
 

package/lib/cjs/components/Hero/Hero.js

@@ -12,7 +12,7 @@ require('../../GlobalCtx-97e4b433.js');
 require('../SocialMedia/SocialMedia.js');
 require('../SocialMedia/index.js');
 require('../ContextMenu/ContextMenu.js');
-require('react-dom');
+require('@popperjs/core');
 
 const HeroImage = ({ url, alt }) => {
     const { prefix } = hooks_useGlobalSettings();
@@ -22,14 +22,16 @@ const HeroImage = ({ url, alt }) => {
     const defaultSrc = sortedUrls[sortedUrls.length - 1].src;
     return (jsxRuntime.jsx("figure", Object.assign({ className: "hero--image" }, { children: jsxRuntime.jsxs("picture", { children: [sortedUrls.map((img) => (jsxRuntime.jsx("source", { srcSet: img.src, media: `(min-width: ${img.breakpoint}px)` }, img.breakpoint))), jsxRuntime.jsx("img", { className: imageClass, src: defaultSrc, alt: alt })] }) })));
 };
-const Hero = ({ justify = "start", align = "baseline", cardSize = "small", posterSize = "large", image, breadcrumb, heroCard, caption, }) => {
+const Hero = ({ justify = "start", align = "baseline", cardSize = "small", posterSize = "large", theme = "dark", image, breadcrumb, heroCard, caption, gap, }) => {
     const baseClass = "hero";
     const justifyClass = `${baseClass}__card-justify__${justify}`;
     const alignClass = `${baseClass}__card-align__${align}`;
     const cardSizeClass = `${baseClass}__card-size__${cardSize}`;
     const posterSizeClass = `${baseClass}__poster-size__${posterSize}`;
-    const heroClasses = classNames(baseClass, justifyClass, alignClass, cardSizeClass, posterSizeClass);
-    return (jsxRuntime.jsxs("div", Object.assign({ className: heroClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: "hero--background" }, { children: image && jsxRuntime.jsx(HeroImage, Object.assign({}, image)) })), breadcrumb && (jsxRuntime.jsx("div", Object.assign({ className: "hero--breadcrumbs" }, { children: jsxRuntime.jsx("div", Object.assign({ className: "hero--breadcrumbs--wrapper" }, { children: jsxRuntime.jsx(components_Breadcrumb_Breadcrumb, Object.assign({}, breadcrumb)) })) }))), jsxRuntime.jsx("div", Object.assign({ className: "hero--card" }, { children: jsxRuntime.jsx(components_Hero_HeroCard, Object.assign({}, heroCard)) })), caption && (jsxRuntime.jsx("div", Object.assign({ className: "hero--caption" }, { children: jsxRuntime.jsx("div", Object.assign({ className: "hero--caption--wrapper" }, { children: jsxRuntime.jsx(components_Tooltip_Tooltip, Object.assign({}, caption)) })) })))] })));
+    const themeClass = `${baseClass}__card-theme__${theme}`;
+    const gapClass = `${baseClass}__gap__${gap}`;
+    const heroClasses = classNames(baseClass, justifyClass, alignClass, cardSizeClass, posterSizeClass, themeClass, { [gapClass]: !!gap });
+    return (jsxRuntime.jsxs("div", Object.assign({ className: heroClasses }, { children: [jsxRuntime.jsx("div", Object.assign({ className: "hero--background" }, { children: image && jsxRuntime.jsx(HeroImage, Object.assign({}, image)) })), breadcrumb && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx("div", Object.assign({ className: "hero--breadcrumbs" }, { children: jsxRuntime.jsx("div", Object.assign({ className: "hero--breadcrumbs--wrapper" }, { children: jsxRuntime.jsx(components_Breadcrumb_Breadcrumb, Object.assign({}, breadcrumb)) })) })) })), jsxRuntime.jsx("div", { className: "hero--card-offset" }), jsxRuntime.jsx("div", Object.assign({ className: "hero--card" }, { children: jsxRuntime.jsx(components_Hero_HeroCard, Object.assign({}, heroCard)) })), caption && (jsxRuntime.jsx("div", Object.assign({ className: "hero--caption" }, { children: jsxRuntime.jsx("div", Object.assign({ className: "hero--caption--wrapper" }, { children: jsxRuntime.jsx(components_Tooltip_Tooltip, Object.assign({}, caption)) })) })))] })));
 };
 
 module.exports = Hero;

package/lib/cjs/components/Hero/index.js

@@ -11,7 +11,7 @@ require('../../GlobalCtx-97e4b433.js');
 require('../Breadcrumb/Breadcrumb.js');
 require('../ContextMenu/ContextMenu.js');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 require('../SocialMedia/SocialMedia.js');
 require('../SocialMedia/index.js');
 

package/lib/cjs/components/Input/Input.js

@@ -9,7 +9,7 @@ require('tslib');
 require('react');
 require('../../GlobalCtx-97e4b433.js');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 const Input = ({ callback, disabled = false, error, helper, id, label, name, placeholder, required, tooltip, type = "text", }) => {
     const { prefix } = hooks_useGlobalSettings();

package/lib/cjs/components/Input/index.js

@@ -9,7 +9,7 @@ require('react');
 require('../../GlobalCtx-97e4b433.js');
 require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 require('../FormElement/FormElement.js');
 
 

package/lib/cjs/components/Navigation/Navigation.js

@@ -11,7 +11,7 @@ require('../../GlobalCtx-97e4b433.js');
 require('../Input/Input.js');
 require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 require('../FormElement/FormElement.js');
 
 const Navigation = ({ logo, mobilelogo, siteurl, tagline, primarynav, subnav, menulabel, menucloselabel, searchlabel, searchfield, languagelabel, languagecontextmenu, }) => {

package/lib/cjs/components/Navigation/index.js

@@ -12,7 +12,7 @@ require('../SearchField/SearchField.js');
 require('../Input/Input.js');
 require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 require('../FormElement/FormElement.js');
 
 

package/lib/cjs/components/NumberPicker/NumberPicker.js

@@ -9,7 +9,7 @@ var components_FormControl_FormControl = require('../FormControl/FormControl.js'
 require('../../GlobalCtx-97e4b433.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 const NumberPicker = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, placeholder, required, max, min, step, }, ref) => {
     const { prefix } = hooks_useGlobalSettings();

package/lib/cjs/components/NumberPicker/index.js

@@ -10,7 +10,7 @@ require('../../GlobalCtx-97e4b433.js');
 require('../FormControl/FormControl.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 
 

package/lib/cjs/components/Profile/Profile.js

@@ -7,13 +7,15 @@ require('tslib');
 require('react');
 require('../../GlobalCtx-97e4b433.js');
 
-const Profile = ({ avatar, className, description, link, name, role, }) => {
+const Profile = ({ avatar, className, description, link, name, role, theme = "light", size = "large", }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--profile`;
     const profileClasses = classNames(className, {
         [baseClass]: true,
+        [`${baseClass}__theme__${theme}`]: theme,
+        [`${baseClass}__size__${size}`]: size,
     });
-    return (jsxRuntime.jsxs("figure", Object.assign({ className: profileClasses }, { children: [jsxRuntime.jsx("img", { className: `${baseClass}--avatar`, src: avatar, alt: `Avatar for ${name}` }), jsxRuntime.jsxs("figcaption", Object.assign({ className: `${baseClass}--contents` }, { children: [jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--name id` }, { children: name })), role && jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--role id` }, { children: role })), description && (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--description info` }, { children: description }))), link && (jsxRuntime.jsx("a", Object.assign({ className: `${baseClass}--link info`, href: link.url }, { children: jsxRuntime.jsx("span", { children: link.label }) })))] }))] })));
+    return (jsxRuntime.jsxs("figure", Object.assign({ className: profileClasses }, { children: [jsxRuntime.jsx("img", { className: `${baseClass}--avatar`, src: avatar, alt: `Avatar for ${name}` }), jsxRuntime.jsx("figcaption", { children: jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--figcaption--content` }, { children: [jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--name` }, { children: name })), role && jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--role` }, { children: role }))] })) }), description && (jsxRuntime.jsx("p", Object.assign({ className: `${baseClass}--description` }, { children: description }))), link && (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--link` }, { children: jsxRuntime.jsx("a", Object.assign({ href: link.url, target: "__blank", rel: "noopener noreferrer" }, { children: jsxRuntime.jsx("span", Object.assign({ className: `${baseClass}--link--label` }, { children: link.label })) })) })))] })));
 };
 
 module.exports = Profile;

package/lib/cjs/components/Radio/Radio.js

@@ -10,7 +10,7 @@ var components_FormControl_FormControl = require('../FormControl/FormControl.js'
 var hooks_usePrevious = require('../../hooks/usePrevious.js');
 require('../../GlobalCtx-97e4b433.js');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 require('nanoid');
 
 const Radio = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, required, checked, defaultChecked = false, value, }, ref) => {

package/lib/cjs/components/Radio/index.js

@@ -9,7 +9,7 @@ require('../../hooks/useGlobalSettings.js');
 require('../../GlobalCtx-97e4b433.js');
 require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 require('../FormControl/FormControl.js');
 require('nanoid');
 require('../../hooks/usePrevious.js');

package/lib/cjs/components/SearchField/SearchField.js

@@ -9,7 +9,7 @@ require('react');
 require('../../GlobalCtx-97e4b433.js');
 require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 require('../FormElement/FormElement.js');
 
 const SearchField = ({ action, callback, className, input, }) => {

package/lib/cjs/components/SearchField/index.js

@@ -10,7 +10,7 @@ require('../../GlobalCtx-97e4b433.js');
 require('../Input/Input.js');
 require('../Fieldset/Fieldset.js');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 require('../FormElement/FormElement.js');
 
 

package/lib/cjs/components/TextInput/TextInput.js

@@ -9,7 +9,7 @@ var components_FormControl_FormControl = require('../FormControl/FormControl.js'
 require('../../GlobalCtx-97e4b433.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 const TextInput = require$$0.forwardRef(({ onChange, onBlur, error, id, name, placeholder, required, pattern, disabled = false, type = "text", }, ref) => {
     const { prefix } = hooks_useGlobalSettings();

package/lib/cjs/components/TextInput/index.js

@@ -10,7 +10,7 @@ require('../../GlobalCtx-97e4b433.js');
 require('../FormControl/FormControl.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 const basic = {
     disabled: false,

package/lib/cjs/components/Textarea/Textarea.js

@@ -9,7 +9,7 @@ var components_FormControl_FormControl = require('../FormControl/FormControl.js'
 require('../../GlobalCtx-97e4b433.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 const Textarea = require$$0.forwardRef((_a, ref) => {
     var { error, className, name, id } = _a, props = tslib.__rest(_a, ["error", "className", "name", "id"]);

package/lib/cjs/components/Textarea/index.js

@@ -10,7 +10,7 @@ require('../../GlobalCtx-97e4b433.js');
 require('../FormControl/FormControl.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 const placeholder = "It was a cold day in April and the clocks were striking thirteen....";
 const basic = {

package/lib/cjs/components/Toggle/Toggle.js

@@ -9,7 +9,7 @@ var components_FormControl_FormControl = require('../FormControl/FormControl.js'
 require('../../GlobalCtx-97e4b433.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 const Toggle = require$$0.forwardRef(({ size = "medium", error = false, disabled = false, defaultChecked = false, required = false, id, name, onChange, onBlur, onClick, checked, className, }, ref) => {
     const { prefix } = hooks_useGlobalSettings();

package/lib/cjs/components/Toggle/index.js

@@ -10,7 +10,7 @@ require('classnames');
 require('../FormControl/FormControl.js');
 require('nanoid');
 require('../Tooltip/Tooltip.js');
-require('react-dom');
+require('@popperjs/core');
 
 const Default = {
     defaultChecked: false,

package/lib/cjs/components/Tooltip/Tooltip.js

@@ -4,100 +4,70 @@ var jsxRuntime = require('react/jsx-runtime');
 var require$$0 = require('react');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var ReactDOM = require('react-dom');
+var core = require('@popperjs/core');
 require('tslib');
 require('../../GlobalCtx-97e4b433.js');
 
-const Tooltip = ({ className, children, icon, label, theme, id, }) => {
+const Tooltip = ({ className, children, icon, label, iconTheme, theme, id, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--tooltip`;
     const [isVisible, setIsVisible] = require$$0.useState(false);
-    const [position, setPosition] = require$$0.useState({
-        x: 0,
-        y: 0,
-    });
-    const [arrowPlacement, setArrowPlacement] = require$$0.useState("center");
-    const [arrowAlignment, setArrowAlignment] = require$$0.useState("left");
     const tooltipRef = require$$0.useRef(null);
+    const popperInstanceRef = require$$0.useRef(null);
+    const isLongTooltip = () => {
+        var _a, _b;
+        const tooltipText = (((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.textContent) ||
+            ((_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.innerText) ||
+            "").trim();
+        return tooltipText.length > 50;
+    };
     const tooltipClasses = classNames(className, {
         [baseClass]: true,
         [`${baseClass}--${theme}`]: theme,
-        [`${baseClass}--alignment-${arrowAlignment}`]: arrowAlignment,
         [`${baseClass}--visible`]: isVisible,
+        [`${baseClass}--long`]: isLongTooltip(),
     });
-    const tooltipArrowClasses = classNames(className, {
-        [`${baseClass}--arrow`]: true,
-        [`${baseClass}--arrow--placement-${arrowPlacement}`]: arrowPlacement,
+    const tooltipArrowClasses = classNames(`${baseClass}--arrow`, `${baseClass}--arrow--placement-negative`);
+    const iconClasses = classNames(className, `${baseClass}--wrapper`, {
+        [`${baseClass}--wrapper__icon ${baseClass}--wrapper__icon__theme__${theme}`]: icon,
+        [`${baseClass}--wrapper__icon__theme__${theme}`]: iconTheme,
     });
     const handleOnMouseOver = (e) => {
-        // get hovered element reference
         const target = e.currentTarget;
-        if (target) {
-            const rect = target.getBoundingClientRect();
+        if (target && tooltipRef.current) {
+            const popperInstance = core.createPopper(target, tooltipRef.current, {
+                placement: "top",
+                modifiers: [
+                    {
+                        name: "offset",
+                        options: {
+                            offset: [0, 12], // Adjust offset as needed
+                        },
+                    },
+                    {
+                        name: "flip",
+                        enabled: true,
+                    },
+                    {
+                        name: "preventOverflow",
+                        enabled: true,
+                    },
+                ],
+            });
+            popperInstanceRef.current = popperInstance;
             setIsVisible(true);
-            postMouseOver(rect);
-        }
-    };
-    const postMouseOver = (hoverRect) => {
-        // position the tooltip after showing it
-        let placement = "center";
-        let alignment = "left";
-        const ttNode = ReactDOM.findDOMNode(tooltipRef.current);
-        if (ttNode != null) {
-            let x = 0, y = 0;
-            const docWidth = document.documentElement.clientWidth, docHeight = document.documentElement.clientHeight;
-            const rx = hoverRect.x + hoverRect.width, // most right x
-            lx = hoverRect.x, // most left x
-            ty = hoverRect.y, // most top y
-            by = hoverRect.y + hoverRect.height; // most bottom y
-            // tool tip rectange
-            const ttRect = ttNode.getBoundingClientRect();
-            const bRight = rx + ttRect.width <= window.scrollX + docWidth &&
-                ty + ttRect.height <= window.scrollY + docHeight;
-            const bLeft = lx - ttRect.width >= 0 &&
-                ty + ttRect.height <= window.scrollY + docHeight;
-            const bAbove = ty - ttRect.height >= 0;
-            const bBellow = by + ttRect.height <= window.scrollY + docHeight;
-            // the tooltip doesn't fit to the left
-            if (bRight) {
-                x = hoverRect.width + 16;
-                y = icon ? -8 : 0;
-                placement = "negative";
-                alignment = "right";
-            }
-            else if (bBellow) {
-                x = icon ? -8 : 0;
-                y = hoverRect.height + 16;
-                placement = "center";
-                alignment = "bottom";
-            }
-            else if (bLeft) {
-                x = -ttRect.width - 16;
-                y = icon ? -8 : 0;
-                placement = "negative";
-                alignment = "left";
-            }
-            else if (bAbove) {
-                x = icon ? -8 : 0;
-                y = -ttRect.height - 16;
-                placement = "center";
-                alignment = "top";
-            }
-            setPosition({ x: x, y: y });
-            setArrowPlacement(placement);
-            setArrowAlignment(alignment);
         }
     };
     const handleOnMouseOut = () => {
+        if (popperInstanceRef.current) {
+            popperInstanceRef.current.destroy();
+        }
         setIsVisible(false);
     };
-    const style = {
-        // left: ((position.x + window.scrollX) + 'px'),
-        // top: ((position.y + window.scrollY) + 'px')
-        left: position.x + "px",
-        top: position.y + "px",
+    const handleOnFocus = (e) => {
+        handleOnMouseOver(e);
     };
-    return (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--wrapper ${icon && "has-icon"}`, onMouseOver: handleOnMouseOver, onFocus: handleOnMouseOver, onMouseOut: handleOnMouseOut, onBlur: handleOnMouseOut, id: id }, { children: [!icon && jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }), jsxRuntime.jsxs("span", Object.assign({ className: tooltipClasses, style: style, ref: tooltipRef }, { children: [jsxRuntime.jsx("span", { className: tooltipArrowClasses, role: "presentation" }), label] }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: iconClasses, onMouseOver: handleOnMouseOver, onFocus: handleOnFocus, onMouseOut: handleOnMouseOut, onBlur: handleOnMouseOut, id: id }, { children: [!icon && jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }), jsxRuntime.jsxs("span", Object.assign({ className: tooltipClasses, ref: tooltipRef, "data-id": id, id: "tooltip", role: "tooltip", "aria-hidden": !isVisible }, { children: [jsxRuntime.jsx("span", { "data-popper-arrow": true, className: tooltipArrowClasses, "data-placement": "negative", role: "presentation" }), label] }))] })));
 };
 
 module.exports = Tooltip;

package/lib/cjs/components/Tooltip/index.js

@@ -7,7 +7,7 @@ require('classnames');
 require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('../../GlobalCtx-97e4b433.js');
-require('react-dom');
+require('@popperjs/core');
 
 
 

package/lib/cjs/components/index.js

@@ -69,6 +69,7 @@ require('../utils/triggerBrowserReflow.js');
 require('./FormControl/FormControl.js');
 require('nanoid');
 require('../hooks/usePrevious.js');
+require('@popperjs/core');
 require('./Hero/HeroCard.js');
 require('./SocialMedia/SocialMedia.js');
 require('./Input/Input.js');

package/lib/cjs/index.js

@@ -68,6 +68,7 @@ require('./utils/transitionEndListener.js');
 require('./utils/triggerBrowserReflow.js');
 require('./components/FormControl/FormControl.js');
 require('nanoid');
+require('@popperjs/core');
 require('./hooks/usePrevious.js');
 require('@ilo-org/icons-react');
 require('./components/Hero/HeroCard.js');

package/lib/esm/components/Checkbox/Checkbox.js

@@ -8,7 +8,7 @@ import FormControl, { useFormControl } from '../FormControl/FormControl.js';
 import { usePrevious } from '../../hooks/usePrevious.js';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 import 'nanoid';
 
 const Checkbox = forwardRef((props, ref) => {

package/lib/esm/components/Checkbox/index.js

@@ -7,7 +7,7 @@ import '../../hooks/useGlobalSettings.js';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 import '../FormControl/FormControl.js';
 import 'nanoid';
 import '../../hooks/usePrevious.js';

package/lib/esm/components/DatePicker/DatePicker.js

@@ -7,7 +7,7 @@ import FormControl, { useFormControl } from '../FormControl/FormControl.js';
 import '../../GlobalCtx-7fb23cfa.js';
 import 'nanoid';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 
 const DatePicker = forwardRef((props, ref) => {
     const { onChange, onBlur, disabled = false, error, id, name, placeholder, required, max, min, step, } = props;

package/lib/esm/components/DatePicker/index.js

@@ -8,4 +8,4 @@ import '../../GlobalCtx-7fb23cfa.js';
 import '../FormControl/FormControl.js';
 import 'nanoid';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';

package/lib/esm/components/Dropdown/Dropdown.js

@@ -7,7 +7,7 @@ import FormControl, { useFormControl } from '../FormControl/FormControl.js';
 import '../../GlobalCtx-7fb23cfa.js';
 import 'nanoid';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 
 const Dropdown = forwardRef((props, ref) => {
     const { autocomplete, onChange, onBlur, disabled = false, error, id, name, options, required, value, form, multiple, selectSize, } = props;

package/lib/esm/components/Dropdown/index.js

@@ -8,4 +8,4 @@ import '../../GlobalCtx-7fb23cfa.js';
 import '../FormControl/FormControl.js';
 import 'nanoid';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';

package/lib/esm/components/Fieldset/Fieldset.js

@@ -5,7 +5,7 @@ import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import Tooltip from '../Tooltip/Tooltip.js';
 import '../../GlobalCtx-7fb23cfa.js';
-import 'react-dom';
+import '@popperjs/core';
 
 // Create a new context for the error state
 const FieldsetErrorContext = createContext({