@ilo-org/react 0.9.1 → 0.10.1

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

@@ -13,10 +13,19 @@ const primary = {
     type: "primary",
     label: "Primary",
     size: "medium",
+    name: "primary",
 };
-const secondary = { type: "secondary", label: "Secondary" };
-const tertiary = { type: "tertiary", label: "Tertiary" };
-const alert = { type: "alert", label: "Alert" };
+const secondary = {
+    type: "secondary",
+    label: "Secondary",
+    name: "secondary",
+};
+const tertiary = {
+    type: "tertiary",
+    label: "Tertiary",
+    name: "tertiary",
+};
+const alert = { type: "alert", label: "Alert", name: "alert" };
 const icon = { type: "primary", label: "Icon", icon: "close" };
 const disabled = {
     type: "primary",

package/lib/esm/components/Card/Card.js

@@ -26,7 +26,7 @@ const Card = ({ isvideo, eyebrow, title, color, theme, variant, size, cornercut,
     return (jsxs("div", Object.assign({ className: cardClasses }, { children: [link &&
                 variant != "data" &&
                 variant != "factlist" &&
-                variant != "stat" && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h5", Object.assign({ className: `${baseClass}--title` }, { children: title })), (variant == "multilink" || (variant == "data" && image)) && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date &&
+                variant != "stat" && (jsx("a", Object.assign({ className: `${baseClass}--link`, href: link, title: title }, { children: jsx("span", Object.assign({ className: `${baseClass}--link--text` }, { children: title })) }))), jsxs("div", Object.assign({ className: `${baseClass}--wrap` }, { children: [image && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), jsxs("div", Object.assign({ className: `${baseClass}--content` }, { children: [eyebrow && jsx("p", Object.assign({ className: `${baseClass}--eyebrow` }, { children: eyebrow })), title && jsx("h3", Object.assign({ className: `${baseClass}--title` }, { children: title })), (variant == "multilink" || (variant == "data" && image)) && (jsx("div", Object.assign({ className: `${baseClass}--image--wrapper` }, { children: jsx("picture", { children: jsx("img", { className: `${baseClass}--image`, src: image, alt: title }) }) }))), intro && jsx("p", Object.assign({ className: `${baseClass}--intro` }, { children: intro })), date &&
                                 variant != "stat" &&
                                 variant != "data" &&
                                 variant != "graphicpromo" &&

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;
@@ -26,7 +26,7 @@ const Dropdown = forwardRef((props, ref) => {
         }
     };
     return (jsx("div", Object.assign({ className: `${baseClass}--wrapper` }, { children: jsx("select", Object.assign({ ref: ref, id: id ? id : name, autoComplete: autocomplete, name: name, required: required, onChange: handleChange, onBlur: onBlur, disabled: disabled, className: dropdownClasses, value: currentvalue, form: form, multiple: multiple, size: selectSize, "aria-describedby": ariaDescribedBy }, { children: options &&
-                options.map((option, i) => (jsx("option", { disabled: option.disabled, label: option.label, value: option.value }, `${baseClass}--option--${i}`))) })) })));
+                options.map((option, i) => (jsx("option", Object.assign({ disabled: option.disabled, label: option.label, value: option.value }, { children: option.label }), `${baseClass}--option--${i}`))) })) })));
 });
 const LabelledDropdown = forwardRef((props, ref) => {
     const { style, inputStyle, className } = props, rest = __rest(props, ["style", "inputStyle", "className"]);

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({

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

@@ -6,4 +6,4 @@ import 'classnames';
 import '../../hooks/useGlobalSettings.js';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';

package/lib/esm/components/FileUpload/FileUpload.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';
 
 function formatBytes(bytes, decimals = 2) {
     if (!+bytes)

package/lib/esm/components/FileUpload/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/FormControl/FormControl.js

@@ -6,7 +6,7 @@ import useGlobalSettings from '../../hooks/useGlobalSettings.js';
 import Tooltip from '../Tooltip/Tooltip.js';
 import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
-import 'react-dom';
+import '@popperjs/core';
 
 // Calculates unique IDs for the internal accessibility elements
 // TODO: When we upgrade to React 8, this should use useId instead

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

@@ -7,4 +7,4 @@ import '../../hooks/useGlobalSettings.js';
 import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';

package/lib/esm/components/Hero/Hero.js

@@ -10,7 +10,7 @@ import '../../GlobalCtx-7fb23cfa.js';
 import '../SocialMedia/SocialMedia.js';
 import '../SocialMedia/index.js';
 import '../ContextMenu/ContextMenu.js';
-import 'react-dom';
+import '@popperjs/core';
 
 const HeroImage = ({ url, alt }) => {
     const { prefix } = useGlobalSettings();

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

@@ -9,6 +9,6 @@ import '../../GlobalCtx-7fb23cfa.js';
 import '../Breadcrumb/Breadcrumb.js';
 import '../ContextMenu/ContextMenu.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 import '../SocialMedia/SocialMedia.js';
 import '../SocialMedia/index.js';

package/lib/esm/components/Input/Input.js

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

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

@@ -7,5 +7,5 @@ import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 import '../FormElement/FormElement.js';

package/lib/esm/components/Navigation/Navigation.js

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

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

@@ -10,5 +10,5 @@ import '../SearchField/SearchField.js';
 import '../Input/Input.js';
 import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 import '../FormElement/FormElement.js';

package/lib/esm/components/NumberPicker/NumberPicker.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 NumberPicker = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, placeholder, required, max, min, step, }, ref) => {
     const { prefix } = useGlobalSettings();

package/lib/esm/components/NumberPicker/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/Profile/Profile.js

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

package/lib/esm/components/Radio/Radio.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 Radio = require$$0.forwardRef(({ onChange, onBlur, disabled = false, error, id, name, required, checked, defaultChecked = false, value, }, ref) => {

package/lib/esm/components/Radio/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/SearchField/SearchField.js

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

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

@@ -8,5 +8,5 @@ import '../../GlobalCtx-7fb23cfa.js';
 import '../Input/Input.js';
 import '../Fieldset/Fieldset.js';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 import '../FormElement/FormElement.js';

package/lib/esm/components/TextInput/TextInput.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 TextInput = require$$0.forwardRef(({ onChange, onBlur, error, id, name, placeholder, required, pattern, disabled = false, type = "text", }, ref) => {
     const { prefix } = useGlobalSettings();

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

@@ -8,7 +8,7 @@ import '../../GlobalCtx-7fb23cfa.js';
 import '../FormControl/FormControl.js';
 import 'nanoid';
 import '../Tooltip/Tooltip.js';
-import 'react-dom';
+import '@popperjs/core';
 
 const basic = {
     disabled: false,

package/lib/esm/components/Textarea/Textarea.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 Textarea = require$$0.forwardRef((_a, ref) => {
     var { error, className, name, id } = _a, props = __rest(_a, ["error", "className", "name", "id"]);

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

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

package/lib/esm/components/Toggle/Toggle.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 Toggle = forwardRef(({ size = "medium", error = false, disabled = false, defaultChecked = false, required = false, id, name, onChange, onBlur, onClick, checked, className, }, ref) => {
     const { prefix } = useGlobalSettings();

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

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

package/lib/esm/components/Tooltip/Tooltip.js

@@ -2,100 +2,70 @@ import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useRef } from 'react';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import ReactDOM from 'react-dom';
+import { createPopper } from '@popperjs/core';
 import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
 
-const Tooltip = ({ className, children, icon, label, theme, id, }) => {
+const Tooltip = ({ className, children, icon, label, iconTheme, theme, id, }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--tooltip`;
     const [isVisible, setIsVisible] = useState(false);
-    const [position, setPosition] = useState({
-        x: 0,
-        y: 0,
-    });
-    const [arrowPlacement, setArrowPlacement] = useState("center");
-    const [arrowAlignment, setArrowAlignment] = useState("left");
     const tooltipRef = useRef(null);
+    const popperInstanceRef = 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 = 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 (jsxs("div", Object.assign({ className: `${baseClass}--wrapper ${icon && "has-icon"}`, onMouseOver: handleOnMouseOver, onFocus: handleOnMouseOver, onMouseOut: handleOnMouseOut, onBlur: handleOnMouseOut, id: id }, { children: [!icon && jsx(Fragment, { children: children }), jsxs("span", Object.assign({ className: tooltipClasses, style: style, ref: tooltipRef }, { children: [jsx("span", { className: tooltipArrowClasses, role: "presentation" }), label] }))] })));
+    return (jsxs("div", Object.assign({ className: iconClasses, onMouseOver: handleOnMouseOver, onFocus: handleOnFocus, onMouseOut: handleOnMouseOut, onBlur: handleOnMouseOut, id: id }, { children: [!icon && jsx(Fragment, { children: children }), jsxs("span", Object.assign({ className: tooltipClasses, ref: tooltipRef, "data-id": id, id: "tooltip", role: "tooltip", "aria-hidden": !isVisible }, { children: [jsx("span", { "data-popper-arrow": true, className: tooltipArrowClasses, "data-placement": "negative", role: "presentation" }), label] }))] })));
 };
 
 export { Tooltip as default };

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

@@ -5,4 +5,4 @@ import 'classnames';
 import '../../hooks/useGlobalSettings.js';
 import 'tslib';
 import '../../GlobalCtx-7fb23cfa.js';
-import 'react-dom';
+import '@popperjs/core';

package/lib/esm/components/index.js

@@ -67,6 +67,7 @@ import '../utils/triggerBrowserReflow.js';
 import './FormControl/FormControl.js';
 import 'nanoid';
 import '../hooks/usePrevious.js';
+import '@popperjs/core';
 import './Hero/HeroCard.js';
 import './SocialMedia/SocialMedia.js';
 import './Input/Input.js';

package/lib/esm/index.js

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

package/lib/types/react/src/components/Button/Button.props.d.ts

@@ -13,6 +13,10 @@ export interface ButtonProps {
      * Specify an optional className to be added to your Button.
      */
     className?: string;
+    /**
+     * Specify the name for the Button.
+     */
+    name?: string;
     /**
      * Specify whether or not the button is disabled.
      */

package/lib/types/react/src/components/Profile/Profile.props.d.ts

@@ -1,3 +1,4 @@
+import { ThemeTypes, SizeTypes } from "../../types";
 interface LinkProps {
     /**
      * Specify the label for the the Profile's link
@@ -9,6 +10,14 @@ interface LinkProps {
     url?: Required<string>;
 }
 export interface ProfileProps {
+    /**
+     * Specify the theme for your profile component.
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify the size for your profile component.
+     */
+    size?: SizeTypes;
     /**
      * Specify an optional avatar to be added to your Profile component. Image *must* be a perfect square. CMS backend should provide a fallback if the avatar is not populated.
      */

package/lib/types/react/src/components/Tooltip/Tooltip.props.d.ts

@@ -1,4 +1,4 @@
-import { TooltipThemes } from "../../types";
+import { TooltipThemes, TooltipIconThemes } from "../../types";
 export interface TooltipProps {
     /**
      * Specify an optional className to be added to your Tooltip.
@@ -20,20 +20,12 @@ export interface TooltipProps {
      * Set whether the tooltip is visible or not
      */
     isVisible?: boolean;
-    /**
-     * Callback fired onMouseOver
-     */
-    onMouseOver?: (e: React.MouseEventHandler<HTMLDivElement>) => any;
-    /**
-     * Callback fired onMouseOut
-     */
-    onMouseOut?: (e: React.MouseEventHandler<HTMLDivElement>) => any;
     /**
      * Describe the theme of the tooltip
      */
     theme?: Required<TooltipThemes>;
     /**
-     * Set a width for the tooltip
+     * Describe the background theme of the tooltip
      */
-    width?: string;
+    iconTheme?: Required<TooltipIconThemes>;
 }

package/lib/types/react/src/types/index.d.ts

@@ -13,6 +13,7 @@ export type LabelTypes = "default" | "actionable" | "light";
 export type LinkTypes = "light" | "dark" | "footer" | "button";
 export type LinkListThemes = "light" | "dark";
 export type TooltipThemes = "light" | "dark";
+export type TooltipIconThemes = "light" | "dark";
 export type TooltipAlignment = "top" | "right" | "bottom" | "left";
 export type TooltipPlacement = "negative" | "center" | "positive";
 export type ListAlignment = "default" | "horizontal";