@muraldevkit/ui-toolkit 4.66.0-dev-7XJy.1 → 4.66.0-dev-7K0j.1

package/dist/cjs/components/text/MrlTextHeading/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlTextHeading"), exports);

package/dist/cjs/components/text/constants.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headingDefaults = exports.headingAllowedValues = exports.textDefaults = exports.textAllowedValues = void 0;
+exports.textAllowedValues = {
+    sizes: [
+        'xxsmall',
+        'xsmall',
+        'small',
+        'medium',
+        'large'
+    ]
+};
+/**
+ * Default values for props on the Text component;
+ * Shared between the component and Storybook
+ */
+exports.textDefaults = {
+    attrs: {},
+    size: 'medium'
+};
+/**
+ * Defines all of classes allowed for the type attribute;
+ * used for Storybook and testing
+ */
+exports.headingAllowedValues = {
+    hierarchy: ['primary', 'secondary'],
+    kinds: ['display', 'headline', 'title'],
+    level: [
+        '1',
+        '2',
+        '3',
+        '4',
+        '5',
+        '6'
+    ],
+    sizes: ['small', 'medium', 'large']
+};
+/**
+ * Default values for props on the Text component;
+ * Shared between the component and Storybook
+ */
+exports.headingDefaults = Object.assign(Object.assign({}, exports.textDefaults), { hierarchy: 'primary', kind: 'headline', level: '2' });

package/dist/cjs/components/text/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlText"), exports);
+__exportStar(require("./MrlTextHeading"), exports);

package/dist/cjs/components/toolbar/MrlToolbar/MrlToolbar.js

@@ -0,0 +1,151 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlToolbar = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const __1 = require("../../../");
+const MrlToolbar_module_scss_1 = __importDefault(require("./MrlToolbar.module.scss.js"));
+/**
+ * MrlToolbar component.
+ *
+ * @param props The MrlToolbar component properties.
+ * @param ref The ref to forward to the toolbar div element.
+ * @returns The MrlToolbar component.
+ */
+exports.MrlToolbar = React.forwardRef(function MrlToolbar(props, ref) {
+    const { children, className, kind = 'default', label, maxVisibleItems = -1, menuButtonProps = {
+        kind: kind === 'inverse' ? 'ghost-inverse' : 'ghost',
+        position: props.orientation === 'vertical' ? 'right' : 'bottom',
+        size: 'small',
+        state: 'default',
+        text: 'More tools'
+    }, menuProps = {
+        actionState: { actionType: null, isOpen: false },
+        alignment: 'center',
+        clickOutsideEvent: 'mouseup',
+        isInternal: false,
+        isSubMenu: false,
+        menuOffset: 10,
+        position: 'bottom',
+        spacing: 'default',
+        triggerStopPropagation: false
+    }, orientation = 'horizontal', shouldUseRti, size = 'small', spaced } = props, rest = __rest(props, ["children", "className", "kind", "label", "maxVisibleItems", "menuButtonProps", "menuProps", "orientation", "shouldUseRti", "size", "spaced"]);
+    const toolbarClasses = (0, classnames_1.default)(MrlToolbar_module_scss_1.default['MrlToolbar'], 'MrlToolbar', className, {
+        [MrlToolbar_module_scss_1.default[`MrlToolbar-${kind}`]]: kind !== 'default',
+        [MrlToolbar_module_scss_1.default[`MrlToolbar-${orientation}`]]: orientation !== 'horizontal',
+        [MrlToolbar_module_scss_1.default[`MrlToolbar-${size}`]]: size !== 'small',
+        [MrlToolbar_module_scss_1.default['MrlToolbar-spaced']]: spaced
+    });
+    const menuTriggerRef = React.useRef(null);
+    // eslint-disable-next-line
+    const renderMenu = (items) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const lockedChildren = [];
+        const menuItems = React.Children.map(items, (child) => {
+            if (child.props.lockedInToolbar) {
+                lockedChildren.push(child);
+                return;
+            }
+            if (child.type.name === 'MrlToolbarButton') {
+                return React.createElement(__1.MrlToolbarButton, Object.assign({}, child.props, { renderInMenu: true }));
+            }
+            return child;
+        });
+        if (menuItems.length === 0) {
+            return;
+        }
+        return (React.createElement(React.Fragment, null,
+            React.createElement(__1.MrlIconButton, Object.assign({ "data-roving": shouldUseRti ? 'true' : undefined, icon: React.createElement(__1.MrlSvg, { svg: ds_icons_1.more }) }, menuButtonProps, { ref: menuTriggerRef })),
+            React.createElement(__1.MrlMenu, Object.assign({ spacing: menuProps.spacing, position: menuProps.position, actionState: menuProps.actionState || { actionType: null, isOpen: false }, alignment: menuProps.alignment, triggerRef: menuTriggerRef }, menuProps), menuItems),
+            lockedChildren));
+    };
+    const renderChildren = () => {
+        if (children) {
+            const numberOfChildren = React.Children.count(children);
+            const childArray = React.Children.toArray(children);
+            const hasLimit = maxVisibleItems > 0;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let toolbarChildren = [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const menuChildren = [];
+            if (hasLimit && numberOfChildren > maxVisibleItems + 1) {
+                childArray.map((child, index) => {
+                    if (maxVisibleItems > index) {
+                        toolbarChildren.push(child);
+                    }
+                    else {
+                        menuChildren.push(child);
+                    }
+                });
+            }
+            else {
+                toolbarChildren = childArray;
+            }
+            if (kind === 'skeleton') {
+                const mediumButtonWidth = 24;
+                const smallButtonWidth = 32;
+                const xsmallButtonWidth = 32;
+                const buttonSize = size === 'xsmall'
+                    ? xsmallButtonWidth
+                    : size === 'medium'
+                        ? mediumButtonWidth
+                        : smallButtonWidth;
+                const skeletonSize = (numberOfChildren * buttonSize) / 16;
+                const displayStyle = orientation === 'vertical'
+                    ? { height: `${skeletonSize}rem` }
+                    : { width: `${skeletonSize}rem` };
+                return React.createElement("span", { style: displayStyle });
+            }
+            return (React.createElement(React.Fragment, null,
+                toolbarChildren,
+                renderMenu(menuChildren)));
+        }
+    };
+    const renderToolbar = () => {
+        return (React.createElement("div", Object.assign({}, rest, { className: toolbarClasses, "aria-label": label || rest['aria-label'], ref: ref }, (shouldUseRti ? { role: 'toolbar' } : {})), renderChildren()));
+    };
+    if (shouldUseRti) {
+        return React.createElement(__1.MrlRovingTabindex, null, renderToolbar());
+    }
+    else {
+        return renderToolbar();
+    }
+});

package/dist/cjs/components/toolbar/MrlToolbar/MrlToolbar.module.css

@@ -0,0 +1,55 @@
+.MrlToolbar--ILy6m {
+  align-items: center;
+  background: var(--mrl-color-background);
+  border-radius: var(--mrl-border-radius-container);
+  box-shadow: var(--mrl-shadows-lifted);
+  cursor: default;
+  display: flex;
+  gap: var(--mrl-spacing-02);
+  min-height: 3rem;
+  padding: var(--mrl-spacing-03);
+  pointer-events: all;
+  transition: opacity var(--mrl-duration-03) var(--mrl-timing-m3);
+}
+
+.MrlToolbar-inverse--PreZQ {
+  background: var(--mrl-color-background-inverse);
+  box-shadow: none;
+  color: var(--mrl-color-text-inverse);
+}
+
+.MrlToolbar-skeleton--tH2YJ.MrlToolbar-vertical--GmNQj {
+  background-color: rgba(var(--mrl-gray-30), 1);
+}
+
+.MrlToolbar-medium--ygo5b {
+  gap: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
+  min-height: 3.5rem;
+  padding: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
+}
+
+.MrlToolbar-xsmall--idjIR {
+  gap: var(--mrl-spacing-02);
+  min-height: 2rem;
+  padding: var(--mrl-spacing-02);
+}
+
+.MrlToolbar-vertical--GmNQj {
+  flex-direction: column;
+  min-height: 0;
+  min-width: 3rem;
+}
+.MrlToolbar-vertical--GmNQj.MrlToolbar-medium--ygo5b {
+  min-width: 3.5rem;
+}
+.MrlToolbar-vertical--GmNQj.MrlToolbar-xsmall--idjIR {
+  min-width: 2rem;
+}
+
+.MrlToolbar-spaced--oR9I5 {
+  gap: var(--mrl-spacing-05);
+  padding-left: var(--mrl-spacing-05);
+}
+.MrlToolbar-spaced--oR9I5 .mrlButton--HGpoJ + .mrlButton--HGpoJ {
+  margin-left: calc(var(--mrl-spacing-03) / 2 * -1);
+}

package/dist/cjs/components/toolbar/MrlToolbar/MrlToolbar.module.scss.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlToolbar.module.css");
+exports.default = {
+	"MrlToolbar": "MrlToolbar--ILy6m",
+	"MrlToolbar-inverse": "MrlToolbar-inverse--PreZQ",
+	"MrlToolbar-skeleton": "MrlToolbar-skeleton--tH2YJ",
+	"MrlToolbar-vertical": "MrlToolbar-vertical--GmNQj",
+	"MrlToolbar-medium": "MrlToolbar-medium--ygo5b",
+	"MrlToolbar-xsmall": "MrlToolbar-xsmall--idjIR",
+	"MrlToolbar-spaced": "MrlToolbar-spaced--oR9I5",
+	"mrlButton": "mrlButton--HGpoJ"
+};

package/dist/cjs/components/toolbar/MrlToolbar/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlToolbar"), exports);

package/dist/cjs/components/toolbar/MrlToolbarButton/MrlToolbarButton.js

@@ -0,0 +1,63 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlToolbarButton = void 0;
+const React = __importStar(require("react"));
+const __1 = require("../../../");
+const MrlToolbarButton_module_scss_1 = __importDefault(require("./MrlToolbarButton.module.scss.js"));
+const classnames_1 = __importDefault(require("classnames"));
+/**
+ * MrlToolbarButton component.
+ * @param props The MrlToolbarButton component properties.
+ * @returns The MrlToolbarButton component.
+ */
+exports.MrlToolbarButton = React.forwardRef(function MrlToolbarButton(props, ref) {
+    const { className, icon, includeInRoving = false, menuItemProps, onClick, qa, renderInMenu, text, toolbarButtonProps = {
+        position: 'bottom',
+        size: 'small',
+        state: 'default'
+    } } = props, rest = __rest(props, ["className", "icon", "includeInRoving", "menuItemProps", "onClick", "qa", "renderInMenu", "text", "toolbarButtonProps"]);
+    const classes = (0, classnames_1.default)('MrlToolbarButton', className);
+    if (renderInMenu) {
+        return (React.createElement(__1.MrlMenuItem, Object.assign({}, menuItemProps, { className: classes, "data-qa": qa, onClick: onClick }),
+            React.createElement("span", { className: MrlToolbarButton_module_scss_1.default.MrlToolbarButtonIcon }, icon),
+            text));
+    }
+    return (React.createElement(__1.MrlIconButton, Object.assign({}, rest, toolbarButtonProps, { className: classes, "data-qa": qa, "data-roving": includeInRoving ? 'true' : undefined, icon: icon, onClick: onClick, ref: ref, text: text })));
+});

package/dist/cjs/components/toolbar/MrlToolbarButton/MrlToolbarButton.module.css

@@ -0,0 +1,3 @@
+.MrlToolbarButtonIcon--7IKxw {
+  margin-right: var(--mrl-spacing-03);
+}

package/dist/cjs/components/toolbar/MrlToolbarButton/MrlToolbarButton.module.scss.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlToolbarButton.module.css");
+exports.default = {
+	"MrlToolbarButtonIcon": "MrlToolbarButtonIcon--7IKxw"
+};

package/dist/cjs/components/toolbar/MrlToolbarButton/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlToolbarButton"), exports);

package/dist/cjs/components/toolbar/MrlToolbarItem/MrlToolbarItem.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlToolbarItem = void 0;
+/**
+ * MrlToolbarItem component.
+ *
+ * @param props The MrlToolbarItem component properties.
+ * @returns The MrlToolbarItem component.
+ */
+const MrlToolbarItem = (props) => {
+    const { renderInMenu, menuItem = null, toolbarItem } = props;
+    if (renderInMenu) {
+        return menuItem;
+    }
+    return toolbarItem;
+};
+exports.MrlToolbarItem = MrlToolbarItem;

package/dist/cjs/components/toolbar/MrlToolbarItem/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlToolbarItem"), exports);

package/dist/cjs/components/toolbar/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlToolbar"), exports);
+__exportStar(require("./MrlToolbarButton"), exports);
+__exportStar(require("./MrlToolbarItem"), exports);

package/dist/cjs/components/tooltip/MrlTooltip/MrlTooltip.js

@@ -0,0 +1,177 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlTooltip = void 0;
+const React = __importStar(require("react"));
+const utils_1 = require("../../../utils");
+const constants_1 = require("../constants");
+const MrlTooltipContent_1 = require("../MrlTooltipContent/MrlTooltipContent");
+const utils_2 = require("../utils");
+const classnames_1 = __importDefault(require("classnames"));
+const portal_1 = require("../../portal");
+require("../../../styles/shared/a11y-helpers/a11y.global.css");
+const useTooltipPosition_1 = require("../useTooltipPosition");
+const web_1 = require("@react-spring/web");
+const layers_1 = require("../../../utils/layers");
+/**
+ * MrlTooltip Component
+ *
+ * This component is not displayed when rendering this component if the primary pointing device can’t hover. Examples include touchscreens and screens that use a basic drawing stylus.
+ * Pointing devices that can hover, but for which doing so is inconvenient and not part of the normal way they are used, also match this criteria. For example, a touchscreen where a long press is treated as hovering.
+ * @param {MrlTooltipProps} props - The props of the component
+ * @returns {HTMLElement} a configured Tooltip component
+ */
+exports.MrlTooltip = React.memo((props) => {
+    const { children, clickToClose = true, disableTooltipHover = false, display: defaultDisplay = 'hide', text, attrs = {}, dataQa, kind = 'default', position = constants_1.MrlTooltipDefaults.position || 'top', anchor = constants_1.MrlTooltipDefaults.anchor, srAnnouncement = true, tooltipClass, tooltipContentClass } = props, rest = __rest(props, ["children", "clickToClose", "disableTooltipHover", "display", "text", "attrs", "dataQa", "kind", "position", "anchor", "srAnnouncement", "tooltipClass", "tooltipContentClass"]);
+    const [interaction, setInteraction] = React.useState('mouse');
+    const triggerRef = React.useRef(null);
+    const tooltipRef = React.useRef(null);
+    /**
+     * State value to determine if the tooltip should be displayed
+     */
+    const [display, setDisplay] = React.useState(defaultDisplay);
+    /**
+     * State value to determine if the tooltip should be displayed
+     */
+    const [id, setId] = React.useState('');
+    /**
+     * Event handler to show tooltip when the trigger is focused
+     */
+    const handleShowTooltip = React.useCallback(() => {
+        setDisplay('show');
+    }, []);
+    const handleFocus = React.useCallback(() => {
+        if (interaction === 'keyboard') {
+            handleShowTooltip();
+        }
+    }, [interaction, handleShowTooltip]);
+    /**
+     * Event handler to hide the tooltip on mouseout
+     */
+    const handleHideTooltip = () => {
+        setDisplay('hide');
+    };
+    /**
+     * Event handler to hide the tooltip when a user presses escape
+     * @param {React.KeyboardEvent} e Keyboard event
+     */
+    const handleKeyDown = (e) => {
+        if (e.key === 'Escape' || e.key === 'Enter' || e.key === ' ') {
+            handleHideTooltip();
+        }
+    };
+    const handleSetKeyboardInteraction = (e) => {
+        if (e.key === 'Tab' || e.key === 'Enter' || e.key === ' ') {
+            setInteraction('keyboard');
+        }
+    };
+    const handlesetMouseInteraction = () => setInteraction('mouse');
+    /**
+     * Setup of the initial component attributes and events
+     */
+    React.useEffect(() => {
+        if (id === '')
+            setId((0, utils_1.getUniqueId)('mrl-tooltip'));
+    }, [id]);
+    React.useEffect(() => {
+        setDisplay(defaultDisplay);
+    }, [defaultDisplay]);
+    /**
+     * Setting the triggerRef to the trigger element
+     *
+     * We need to use 'querySelector' because we cannot pass a ref to the child object. There are
+     * some situations where the child component may not accept a ref, for example: a react router
+     * link is passed as a child. In older versions of react router you could not pass a ref to the
+     * component so this causes an issue.
+     */
+    React.useEffect(() => {
+        const trigger = document.querySelector(`[data-tooltip-id="${id}"]`);
+        triggerRef.current = trigger;
+    }, [id]);
+    React.useEffect(() => {
+        const currentTooltipRef = tooltipRef.current;
+        document.addEventListener('keydown', handleSetKeyboardInteraction);
+        document.addEventListener('mousedown', handlesetMouseInteraction);
+        if (!disableTooltipHover && currentTooltipRef) {
+            currentTooltipRef.addEventListener('mouseover', handleShowTooltip);
+            currentTooltipRef.addEventListener('mouseout', handleHideTooltip);
+        }
+        return () => {
+            if (!disableTooltipHover && currentTooltipRef) {
+                currentTooltipRef.removeEventListener('mouseover', handleShowTooltip);
+                currentTooltipRef.removeEventListener('mouseout', handleHideTooltip);
+            }
+            document.removeEventListener('keydown', handleSetKeyboardInteraction);
+            document.removeEventListener('mousedown', handlesetMouseInteraction);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [handleShowTooltip, tooltipRef.current]);
+    const positionStyles = (0, useTooltipPosition_1.useTooltipPosition)(triggerRef, tooltipRef, {
+        align: anchor,
+        position: position
+    }, display === 'show', -1);
+    const inlineStyles = {
+        menu: {
+            left: positionStyles.left,
+            position: 'fixed',
+            top: positionStyles.top
+        }
+    };
+    const transitions = (0, web_1.useTransition)(display === 'show', {
+        config: { duration: display === 'show' ? 150 : 25 },
+        enter: { opacity: 1 },
+        from: { opacity: 0 },
+        leave: { opacity: 0 }
+    });
+    return (React.createElement(React.Fragment, null,
+        React.Children.map(children, (child, index) => {
+            if (index === 0 && React.isValidElement(child)) {
+                const _a = child.props, { className, onBlur, onFocus, onKeyDown, onMouseOver, onMouseOut, onMouseUp, children } = _a, otherProps = __rest(_a, ["className", "onBlur", "onFocus", "onKeyDown", "onMouseOver", "onMouseOut", "onMouseUp", "children"])
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                ;
+                return React.cloneElement(child, Object.assign(Object.assign(Object.assign(Object.assign({ 'aria-describedby': display === 'show' && srAnnouncement ? id : undefined, className: (0, classnames_1.default)(tooltipClass, className, 'mrl-tooltip-trigger', display === 'show' && 'mrl-tooltip-trigger--active'), onBlur: (0, utils_2.curryHandlers)(onBlur, handleHideTooltip) }, (clickToClose && !disableTooltipHover
+                    ? { onMouseUp: (0, utils_2.curryHandlers)(onMouseUp, handleHideTooltip) }
+                    : {})), { onFocus: (0, utils_2.curryHandlers)(onFocus, handleFocus), onKeyDown: (0, utils_2.curryHandlers)(onKeyDown, handleKeyDown), onMouseOut: (0, utils_2.curryHandlers)(onMouseOut, handleHideTooltip), onMouseOver: (0, utils_2.curryHandlers)(onMouseOver, handleShowTooltip) }), otherProps), { children, ['data-tooltip-id']: id }));
+            }
+            return child;
+        }),
+        React.createElement(portal_1.MrlPortal, { id: layers_1.PORTAL_LAYERS.TOOLTIP.name, layer: layers_1.PORTAL_LAYERS.TOOLTIP, className: layers_1.PORTAL_LAYERS.TOOLTIP.name, "data-qa": layers_1.PORTAL_LAYERS.TOOLTIP.name }, transitions((style, item) => item && (React.createElement(web_1.animated.div, { ref: tooltipRef, style: Object.assign(Object.assign({}, inlineStyles.menu), style) },
+            React.createElement(MrlTooltipContent_1.MrlTooltipContent, Object.assign({}, rest, { attrs: attrs, anchor: anchor, dataQa: dataQa, kind: kind, id: id, position: position, text: text, tooltipContentClass: tooltipContentClass }))))))));
+});
+exports.MrlTooltip.displayName = 'MrlTooltip';

package/dist/cjs/components/tooltip/MrlTooltip/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlTooltip = void 0;
+var MrlTooltip_1 = require("./MrlTooltip");
+Object.defineProperty(exports, "MrlTooltip", { enumerable: true, get: function () { return MrlTooltip_1.MrlTooltip; } });