@ilo-org/react 0.9.1 → 0.10.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @ilo-org/react
 
+## 0.10.1
+
+### Patch Changes
+
+- 67ac66a79: Refactor option label to be a child component instead of an attribute to improve screen reader experience
+- e34e17292: Add optional name paramater that will pass a string to the button element's underlying name attribute
+- d74d0161f: Refactor card heading from h5 to h3 to ensure headings are in sequential order to improve accessibility
+- Updated dependencies [16dea2974]
+- Updated dependencies [0d0341a3c]
+  - @ilo-org/styles@0.13.2
+
+## 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

package/lib/cjs/components/Button/Button.js

@@ -10,7 +10,7 @@ require('react');
 require('../../GlobalCtx-97e4b433.js');
 require('@ilo-org/icons-react');
 
-const Button = ({ callback, className, disabled = false, icon, icononly, iconPosition, kind = "button", label, opensmodal, size = "large", target = "", type = "primary", url, style, }) => {
+const Button = ({ callback, className, disabled = false, icon, icononly, iconPosition, kind = "button", label, opensmodal, size = "large", target = "", type = "primary", url, style, name, }) => {
     const { prefix } = hooks_useGlobalSettings();
     const baseClass = `${prefix}--button`;
     const hasURL = !!url;
@@ -30,7 +30,7 @@ const Button = ({ callback, className, disabled = false, icon, icononly, iconPos
             callback(e);
         }
     };
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: hasURL ? (jsxRuntime.jsx(components_Link_Link, Object.assign({ className: ButtonClasses, target: target, url: url, label: label, style: style }, { children: icon && jsxRuntime.jsx(components_Icon_Icon, { name: icon, hidden: true }) }))) : (jsxRuntime.jsxs("button", Object.assign({ className: ButtonClasses, onClick: (e) => handleClick(e), disabled: disabled, type: kind, "aria-haspopup": opensmodal ? `dialog` : false, style: style }, { children: [label && jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: label })), icon && jsxRuntime.jsx(components_Icon_Icon, { name: icon, hidden: true })] }))) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: hasURL ? (jsxRuntime.jsx(components_Link_Link, Object.assign({ className: ButtonClasses, target: target, url: url, label: label, style: style }, { children: icon && jsxRuntime.jsx(components_Icon_Icon, { name: icon, hidden: true }) }))) : (jsxRuntime.jsxs("button", Object.assign({ className: ButtonClasses, onClick: (e) => handleClick(e), disabled: disabled, type: kind, "aria-haspopup": opensmodal ? `dialog` : false, style: style, name: name }, { children: [label && jsxRuntime.jsx("span", Object.assign({ className: "button__label" }, { children: label })), icon && jsxRuntime.jsx(components_Icon_Icon, { name: icon, hidden: true })] }))) }));
 };
 
 module.exports = Button;

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

@@ -15,10 +15,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/cjs/components/Card/Card.js

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

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;
@@ -28,7 +28,7 @@ const Dropdown = require$$0.forwardRef((props, ref) => {
         }
     };
     return (jsxRuntime.jsx("div", Object.assign({ className: `${baseClass}--wrapper` }, { children: jsxRuntime.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) => (jsxRuntime.jsx("option", { disabled: option.disabled, label: option.label, value: option.value }, `${baseClass}--option--${i}`))) })) })));
+                options.map((option, i) => (jsxRuntime.jsx("option", Object.assign({ disabled: option.disabled, label: option.label, value: option.value }, { children: option.label }), `${baseClass}--option--${i}`))) })) })));
 });
 const LabelledDropdown = require$$0.forwardRef((props, ref) => {
     const { style, inputStyle, className } = props, rest = tslib.__rest(props, ["style", "inputStyle", "className"]);

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();

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/Button/Button.js

@@ -8,7 +8,7 @@ import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
 import '@ilo-org/icons-react';
 
-const Button = ({ callback, className, disabled = false, icon, icononly, iconPosition, kind = "button", label, opensmodal, size = "large", target = "", type = "primary", url, style, }) => {
+const Button = ({ callback, className, disabled = false, icon, icononly, iconPosition, kind = "button", label, opensmodal, size = "large", target = "", type = "primary", url, style, name, }) => {
     const { prefix } = useGlobalSettings();
     const baseClass = `${prefix}--button`;
     const hasURL = !!url;
@@ -28,7 +28,7 @@ const Button = ({ callback, className, disabled = false, icon, icononly, iconPos
             callback(e);
         }
     };
-    return (jsx(Fragment, { children: hasURL ? (jsx(Link, Object.assign({ className: ButtonClasses, target: target, url: url, label: label, style: style }, { children: icon && jsx(Icon, { name: icon, hidden: true }) }))) : (jsxs("button", Object.assign({ className: ButtonClasses, onClick: (e) => handleClick(e), disabled: disabled, type: kind, "aria-haspopup": opensmodal ? `dialog` : false, style: style }, { children: [label && jsx("span", Object.assign({ className: "button__label" }, { children: label })), icon && jsx(Icon, { name: icon, hidden: true })] }))) }));
+    return (jsx(Fragment, { children: hasURL ? (jsx(Link, Object.assign({ className: ButtonClasses, target: target, url: url, label: label, style: style }, { children: icon && jsx(Icon, { name: icon, hidden: true }) }))) : (jsxs("button", Object.assign({ className: ButtonClasses, onClick: (e) => handleClick(e), disabled: disabled, type: kind, "aria-haspopup": opensmodal ? `dialog` : false, style: style, name: name }, { children: [label && jsx("span", Object.assign({ className: "button__label" }, { children: label })), icon && jsx(Icon, { name: icon, hidden: true })] }))) }));
 };
 
 export { Button as default };