@muraldevkit/ui-toolkit 4.65.3-dev-IWCo.1 → 4.66.0-dev-avUr.1

package/dist/cjs/components/button/MrlIconButton/MrlIconButton.js

@@ -0,0 +1,125 @@
+"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.MrlIconButton = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const constants_1 = require("../constants");
+const helpers_1 = require("../helpers");
+const utils_1 = require("../../../utils");
+const constants_2 = require("../../tooltip/constants");
+const __1 = require("../../");
+const constants_3 = require("../../loader/constants");
+require("./MrlIconButton.css");
+exports.MrlIconButton = React.forwardRef(function MrlIconButton(_a, ref) {
+    var { ['aria-label']: ariaLabel, attrs = {}, badge, className, disableEvents = false, disableTooltipHover = false, icon, 
+    // We intentionally deviate from the basic button for icon-buttons since the vast
+    // majority of icon buttons are ghost buttons. The proptype remains
+    // consistent with the basic button however to keep our code DRY.
+    kind = 'ghost', loading = false, loadingText = constants_3.spinnerDefaults.text, onClick, onKeyUp, onMouseUp, position = constants_2.MrlTooltipDefaults.position, toggleAria = constants_1.buttonDefaults.toggleAria, toggleStyle, text, tipAnchor = constants_2.MrlTooltipDefaults.anchor, tooltipKind = 'default', size = constants_1.buttonDefaults.size, state = constants_1.buttonDefaults.state, wrapperClassName, controlledState } = _a, remainingProps = __rest(_a, ['aria-label', "attrs", "badge", "className", "disableEvents", "disableTooltipHover", "icon", "kind", "loading", "loadingText", "onClick", "onKeyUp", "onMouseUp", "position", "toggleAria", "toggleStyle", "text", "tipAnchor", "tooltipKind", "size", "state", "wrapperClassName", "controlledState"]);
+    /**
+     * Determine the effective button state.
+     * Uses controlledState if provided (controlled mode),
+     * otherwise falls back to the state prop (uncontrolled mode).
+     * This allows the component to work in both controlled and uncontrolled scenarios.
+     */
+    const effectiveButtonState = controlledState !== null && controlledState !== void 0 ? controlledState : state;
+    const [isSelected, setIsSelected] = React.useState(() => (0, helpers_1._isSelected)(effectiveButtonState));
+    const buttonRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => buttonRef.current);
+    /**
+     * MrlIconButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'
+     */
+    const isToggleButton = toggleStyle && (0, helpers_1._isToggleButton)(toggleStyle);
+    /**
+     * We need to watch the value of state to keep in sync
+     * the value of state passed as props and the internal
+     * isSelected piece of state.
+     */
+    React.useEffect(() => {
+        // allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.
+        setIsSelected((0, helpers_1._isSelected)(effectiveButtonState));
+    }, [effectiveButtonState]);
+    /**
+     * Handle onClick events
+     * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event
+     */
+    function handleOnClick(e) {
+        e.stopPropagation();
+        if ((0, helpers_1._isDisabled)(effectiveButtonState, loading) || disableEvents) {
+            return;
+        }
+        if (isToggleButton && !controlledState) {
+            setIsSelected((prevIsSelected) => !prevIsSelected);
+        }
+        if (onClick && typeof onClick === 'function') {
+            onClick(e);
+        }
+    }
+    const classNames = (0, classnames_1.default)('mrlIconButton', `mrlIconButton--${size}`, `mrlIconButton--${kind}`, isToggleButton && toggleStyle && `toggleStyle--${toggleStyle}`, attrs.class || attrs.className, className);
+    delete attrs.class;
+    delete attrs.className;
+    const getAriaLabel = () => {
+        // Set loading text if loading
+        if (loading)
+            return `${loadingText} ${text}`;
+        // Only set aria-label if we have actual content
+        const hasAriaLabel = ariaLabel && ariaLabel.trim() !== '';
+        // If we have a custom ariaLabel, override the default text
+        if (hasAriaLabel)
+            return ariaLabel;
+        // Fallback to icon button text
+        return text;
+    };
+    const ariaLabelValue = getAriaLabel();
+    const attributes = (0, utils_1.setAttributes)(attrs, Object.assign(Object.assign({ 'aria-disabled': (0, helpers_1._isDisabled)(effectiveButtonState, loading), 'aria-label': ariaLabelValue }, (isToggleButton && { [`aria-${toggleAria}`]: isSelected || false })), { type: 'button' }));
+    // MrlSvg should always have size="auto"
+    const iconWithSizeAuto = React.useMemo(() => React.cloneElement(icon, {
+        size: 'auto'
+    }), [icon]);
+    const spinnerProps = (0, helpers_1._spinnerProps)(kind, size);
+    const spinner = React.createElement(__1.MrlSpinner, { kind: spinnerProps.kind, size: spinnerProps.size });
+    const dataQaProp = remainingProps['data-qa'];
+    const tooltipQa = dataQaProp ? `${dataQaProp}-tooltip` : (0, utils_1.getUniqueId)('tooltip');
+    const tooltipContentClass = size === 'xsmall' || size === 'small' ? `mrlIconButton--${size}-wrapper` : undefined;
+    return (React.createElement(__1.MrlTooltip, { anchor: tipAnchor, dataQa: tooltipQa, kind: tooltipKind, position: position, text: text, tooltipClass: (0, classnames_1.default)('mrlIconButton-wrapper', wrapperClassName), tooltipContentClass: tooltipContentClass, disableTooltipHover: disableTooltipHover, srAnnouncement: false },
+        React.createElement("button", Object.assign({}, attributes, remainingProps, { className: classNames, ref: buttonRef, onClick: handleOnClick, onKeyUp: onKeyUp, onMouseUp: onMouseUp }),
+            loading ? spinner : iconWithSizeAuto,
+            badge)));
+});

package/dist/cjs/components/button/MrlIconButton/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("./MrlIconButton"), exports);

package/dist/cjs/components/button/MrlProcessingButton/MrlProcessingButton.js

@@ -0,0 +1,122 @@
+"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.MrlProcessingButton = exports.DEFAULT_FEEDBACK_TIME = exports.DEFAULT_RESET_TIME = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const MrlButton_1 = require("../MrlButton");
+const svg_1 = require("../../svg");
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const live_region_1 = require("../../live-region");
+const MrlProcessingButton_module_scss_1 = __importDefault(require("./MrlProcessingButton.module.scss.js"));
+exports.DEFAULT_RESET_TIME = 4000;
+exports.DEFAULT_FEEDBACK_TIME = 500;
+/**
+ * A specialized button component that provides visual feedback during processing operations.
+ *
+ * The MrlProcessingButton extends the standard MrlButton with additional processing state
+ * management and user feedback capabilities. It automatically handles the transition between
+ * normal, loading, and completion states to provide clear visual feedback to users.
+ *
+ * @param props - The component props extending MrlButtonProps with additional processing capabilities
+ * @returns a MrlProcessingButton React component
+ */
+function MrlProcessingButton(props) {
+    var _a, _b, _c, _d, _e;
+    const { ['data-qa']: dataQa, processingButtonConfig, resetTime = exports.DEFAULT_RESET_TIME, className } = props, buttonProps = __rest(props, ['data-qa', "processingButtonConfig", "resetTime", "className"]);
+    const [currentState, setCurrentState] = React.useState('normal');
+    const timeoutRef = React.useRef(null);
+    const handleClick = () => {
+        if (currentState === 'processing')
+            return;
+        setCurrentState('processing');
+    };
+    const feedbackTime = (_a = processingButtonConfig.processing.feedbackTime) !== null && _a !== void 0 ? _a : exports.DEFAULT_FEEDBACK_TIME;
+    const executeAction = React.useCallback(() => {
+        processingButtonConfig.processing
+            .action()
+            .then(() => {
+            if (processingButtonConfig.success) {
+                setCurrentState('success');
+            }
+            else {
+                setCurrentState('normal');
+            }
+        })
+            .catch(() => {
+            if (processingButtonConfig.error) {
+                setCurrentState('error');
+            }
+            else {
+                setCurrentState('normal');
+            }
+        });
+    }, [
+        processingButtonConfig.error,
+        processingButtonConfig.processing,
+        processingButtonConfig.success
+    ]);
+    React.useEffect(() => {
+        switch (currentState) {
+            case 'processing':
+                timeoutRef.current = setTimeout(executeAction, feedbackTime);
+                break;
+            case 'success':
+            case 'error':
+                timeoutRef.current = setTimeout(() => {
+                    setCurrentState('normal');
+                }, resetTime);
+                break;
+            default:
+                break;
+        }
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, [currentState, processingButtonConfig, resetTime, executeAction, feedbackTime]);
+    const button = currentState === 'processing' ? (React.createElement(MrlButton_1.MrlButton, Object.assign({ "data-qa": dataQa }, buttonProps, { className: (0, classnames_1.default)(MrlProcessingButton_module_scss_1.default['MrlProcessingButton'], MrlProcessingButton_module_scss_1.default['MrlProcessingButton-is-processing'], className), "aria-busy": true, "aria-disabled": false, 
+        // We need to use a placeholder icon to display text and the MrlSpinner
+        icon: React.createElement(svg_1.MrlSvg, { svg: ds_icons_1.placeholder }), loading: true, loadingText: " ", state: "disabled", text: processingButtonConfig.processing.text || processingButtonConfig.normal.text }))) : (React.createElement(MrlButton_1.MrlButton, Object.assign({ "data-qa": dataQa, className: className }, buttonProps, { icon: ((_b = processingButtonConfig[currentState]) === null || _b === void 0 ? void 0 : _b.icon) && (React.createElement(svg_1.MrlSvg, { svg: (_c = processingButtonConfig[currentState]) === null || _c === void 0 ? void 0 : _c.icon })), onClick: handleClick, state: "default", text: ((_d = processingButtonConfig[currentState]) === null || _d === void 0 ? void 0 : _d.text) || '' })));
+    return (React.createElement(React.Fragment, null,
+        button,
+        React.createElement(live_region_1.MrlLiveRegion, { ariaLive: "assertive", srContent: ((_e = processingButtonConfig[currentState]) === null || _e === void 0 ? void 0 : _e.text) || '' })));
+}
+exports.MrlProcessingButton = MrlProcessingButton;

package/dist/cjs/components/button/MrlProcessingButton/MrlProcessingButton.module.css

@@ -0,0 +1,6 @@
+.MrlProcessingButton--ClCVf[aria-disabled=false].MrlProcessingButton-is-processing--CNqDf[aria-disabled=false] {
+  background: var(--mrl-button-background-color-disabled);
+  box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-disabled);
+  color: var(--mrl-button-text-color-disabled);
+  cursor: default;
+}

package/dist/cjs/components/button/MrlProcessingButton/MrlProcessingButton.module.scss.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlProcessingButton.module.css");
+exports.default = {
+	"MrlProcessingButton": "MrlProcessingButton--ClCVf",
+	"MrlProcessingButton-is-processing": "MrlProcessingButton-is-processing--CNqDf"
+};

package/dist/cjs/components/button/MrlProcessingButton/actions.js

@@ -0,0 +1,39 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MRL_PROCESSING_BUTTON_ACTIONS = exports.copyToClipboard = void 0;
+/**
+ * Copies text to the clipboard using the browser's clipboard API
+ * @param text - The text to copy to clipboard
+ * @param processing_time - The time to wait before copying the text to the clipboard
+ * @returns Promise that resolves when text is copied
+ */
+function copyToClipboard(text, processing_time) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return new Promise((resolve, reject) => {
+            if (processing_time) {
+                setTimeout(() => {
+                    navigator.clipboard.writeText(text).then(resolve).catch(reject);
+                }, processing_time);
+            }
+            else {
+                navigator.clipboard.writeText(text).then(resolve).catch(reject);
+            }
+        });
+    });
+}
+exports.copyToClipboard = copyToClipboard;
+/**
+ * Actions for the MrlProcessingButton
+ */
+exports.MRL_PROCESSING_BUTTON_ACTIONS = {
+    copyToClipboard
+};

package/dist/cjs/components/button/MrlProcessingButton/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("./MrlProcessingButton"), exports);
+__exportStar(require("./actions"), exports);

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonDefaults = exports.allowedButtonValues = void 0;
+/*
+ * Button component constants
+ * ------------------------------------------------------------------
+ */
+exports.allowedButtonValues = {
+    iconPositions: ['before', 'after'],
+    kinds: [
+        'secondary',
+        'primary',
+        'ghost',
+        'inverse',
+        'ghost-inverse',
+        'primary-native',
+        'secondary-native'
+    ],
+    sizes: ['xsmall', 'small', 'medium', 'large'],
+    states: ['default', 'disabled', 'selected', 'selected-disabled', 'skeleton'],
+    toggleAriaTypes: ['expanded', 'pressed', 'selected', 'checked'],
+    toggleStyles: ['default', 'secondary'],
+    types: ['button', 'reset', 'submit']
+};
+/**
+ * Default values for props on the Button component;
+ * Shared between the component and Storybook
+ */
+exports.buttonDefaults = {
+    attrs: {
+        type: 'button'
+    },
+    disabled: false,
+    iconPos: 'before',
+    kind: 'secondary',
+    size: 'medium',
+    state: 'default',
+    text: 'Button',
+    toggleAria: 'expanded'
+};

package/dist/cjs/components/button/helpers.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports._isToggleButton = exports._isSelected = exports._isDisabled = exports._spinnerProps = void 0;
+const constants_1 = require("./constants");
+/**
+ * Determines what loader should be displayed in which types of buttons.
+ *
+ * @private
+ * @param {MrlButtonKind} [buttonKind] - the kind of the current button.
+ * @param {MrlGhostIconButtonSize} [buttonSize] - the size of the current button.
+ * @returns {SpinnerComponent} - an MrlSpinner element themed to the button.
+ */
+const _spinnerProps = (buttonKind, buttonSize) => {
+    /** Set the Spinner kind */
+    const spinnerStyle = buttonKind === 'primary' || buttonKind === 'ghost-inverse' ? 'inverse' : 'default';
+    /** Set the Spinner size */
+    const spinnerSize = buttonSize === 'large' || buttonSize === 'medium'
+        ? 'medium'
+        : buttonSize === 'xsmall'
+            ? 'xsmall'
+            : 'small';
+    return {
+        kind: spinnerStyle,
+        size: spinnerSize
+    };
+};
+exports._spinnerProps = _spinnerProps;
+/**
+ * Determines if the button is disabled since multiple states represent disabled
+ *
+ * @private
+ * @param {MrlButtonState} [currentState] - the value of this.state from the component.
+ * @param {boolean} [isLoading] - if the button is loading
+ * @param {MrlButtonState} [enforcedState] - optionally pass in a state to check against.
+ * 		This is used for @Watch statements where this.state is not consistent.
+ * @returns {boolean} - if the button is disabled
+ */
+const _isDisabled = (currentState, isLoading, enforcedState) => {
+    const value = enforcedState || currentState;
+    // We treat Skeleton as disabled so users can't interact with it
+    // Note: this may need to be re-evaluated a bit when we allow screen reader and
+    // keyboard users access to disabled buttons as we would still not want them to
+    // access hydrated skeletons.
+    return isLoading || value === 'disabled' || value === 'selected-disabled' || value === 'skeleton'
+        ? true
+        : false;
+};
+exports._isDisabled = _isDisabled;
+/**
+ * Determines if the button is selected since multiple states represent selected
+ *
+ * @private
+ * @param {MrlButtonState} [currentState] - the value of this.state from the component.
+ * @param {MrlButtonState} [enforcedState] - optionally pass in a state to check against.
+ * 		This is used for @Watch statements where this.state is not consistent.
+ * @returns {boolean} - if the button is disabled
+ */
+const _isSelected = (currentState, enforcedState) => {
+    const value = enforcedState || currentState;
+    return value === 'selected' || value === 'selected-disabled' ? true : false;
+};
+exports._isSelected = _isSelected;
+/**
+ * MrlIconButton and MrlAnimatedIconButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'
+ *
+ * @param {ToggleStyle} toggleStyle type of toggle
+ * @returns {boolean} returns boolean if it's togglable
+ */
+const _isToggleButton = (toggleStyle) => toggleStyle && constants_1.allowedButtonValues.toggleStyles.includes(toggleStyle);
+exports._isToggleButton = _isToggleButton;

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

@@ -0,0 +1,20 @@
+"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("./MrlAnimatedIconButton"), exports);
+__exportStar(require("./MrlButton"), exports);
+__exportStar(require("./MrlIconButton"), exports);
+__exportStar(require("./MrlProcessingButton"), exports);

package/dist/cjs/components/callout/MrlCallout/MrlCallout.js

@@ -0,0 +1,106 @@
+"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.MrlCallout = void 0;
+const React = __importStar(require("react"));
+const popover_1 = require("../../popover");
+const text_1 = require("../../text");
+const MrlCallout_module_scss_1 = __importDefault(require("./MrlCallout.module.scss.js"));
+const button_1 = require("../../button");
+const utils_1 = require("../../../utils");
+const layers_1 = require("../../../utils/layers");
+const react_1 = require("react");
+/**
+ * MrlCallout component.
+ *
+ * @param props - The props.
+ * @returns {React.ReactElement} The MrlCallout component.
+ */
+const MrlCallout = (props) => {
+    // In some cases when `show` is false, the content is also null or empty.
+    // At the same time callout shows fade-out animation and do not disappear immediately.
+    // Saving last visible content to show it while animating on close.
+    const savedContent = (0, react_1.useRef)();
+    if (props.show) {
+        savedContent.current = {
+            alignment: props.alignment,
+            description: props.description,
+            eyebrow: props.eyebrow,
+            image: props.image,
+            kind: props.kind,
+            title: props.title
+        };
+    }
+    const _a = props.show ? props : Object.assign(Object.assign({}, props), savedContent.current), { ariaControls, alignment = 'center', children, description, disableClickOutside = true, disableFocusTrap = true, eyebrow, hasCloseButton = true, image, kind = 'primary', onOpen, onClose, point = true, position = 'bottom', primaryCta, secondaryCta, show = true, spacing, title } = _a, rest = __rest(_a, ["ariaControls", "alignment", "children", "description", "disableClickOutside", "disableFocusTrap", "eyebrow", "hasCloseButton", "image", "kind", "onOpen", "onClose", "point", "position", "primaryCta", "secondaryCta", "show", "spacing", "title"]);
+    if (React.isValidElement(children) && children.type === React.Fragment) {
+        throw new Error('MrlCallout accepts a single child and does not accept a React.Fragment as a child.');
+    }
+    const calloutId = React.useMemo(() => (0, utils_1.getUniqueId)('callout-append'), []);
+    const triggerRef = React.useRef(null);
+    const childElement = React.useMemo(() => {
+        return React.Children.map(children, (child) => {
+            return React.cloneElement(child, Object.assign(Object.assign(Object.assign({}, child.props), (child.type !== 'button' && { role: 'button' })), { 'aria-controls': ariaControls, 'aria-expanded': show, id: calloutId }));
+        });
+    }, [calloutId, children, show, ariaControls]);
+    // Setting trigger ref to the element with the calloutId (set above in the childElement useMemo)
+    //
+    // We are using querySelector to set the triggerRef instead of assigning a ref directly in childElement because
+    // a child element may already have a ref assigned to it and we don't want to override it.
+    React.useEffect(() => {
+        triggerRef.current = document.querySelector(`#${calloutId}`);
+    }, [calloutId]);
+    const popoverKind = kind === 'primary' ? 'inverse' : 'primary';
+    const primaryCtaKind = kind === 'primary' ? 'inverse' : 'secondary';
+    const secondaryCtaKind = kind === 'primary' ? 'ghost-inverse' : 'ghost';
+    return (React.createElement(React.Fragment, null,
+        childElement,
+        triggerRef && (React.createElement(popover_1.MrlPopover, Object.assign({ actionState: { actionType: 'click', isOpen: show }, alignment: alignment, className: MrlCallout_module_scss_1.default['MrlCallout'], disableClickToOpen: true, disableClickOutside: disableClickOutside, disableFocusTrap: disableFocusTrap, hasCloseButton: hasCloseButton, kind: popoverKind, onClose: onClose, onOpen: onOpen, point: point, portalProps: {
+                id: layers_1.PORTAL_LAYERS.CALLOUT.name,
+                layer: layers_1.PORTAL_LAYERS.CALLOUT
+            }, position: position, spacing: spacing, triggerRef: triggerRef }, rest),
+            React.createElement("div", { className: MrlCallout_module_scss_1.default['MrlCallout--content'] },
+                eyebrow && (React.createElement(text_1.MrlText, { attrs: { className: MrlCallout_module_scss_1.default['MrlCallout--eyebrow'] }, text: eyebrow })),
+                title && (React.createElement(text_1.MrlTextHeading, { className: MrlCallout_module_scss_1.default['MrlCallout--title'], level: "2", text: title })),
+                description && (React.createElement("div", { className: MrlCallout_module_scss_1.default['MrlCallout--description'] }, typeof description === 'string' ? React.createElement(text_1.MrlText, { text: description }) : description)),
+                image && React.createElement("div", { className: MrlCallout_module_scss_1.default['MrlCallout--image'] }, image),
+                (primaryCta || secondaryCta) && (React.createElement("div", { className: MrlCallout_module_scss_1.default['MrlCallout--footer'] },
+                    secondaryCta && (React.createElement(button_1.MrlButton, { "data-qa": secondaryCta.dataQa, kind: secondaryCtaKind, onClick: secondaryCta.onClick, text: secondaryCta.text, size: "small" })),
+                    primaryCta && (React.createElement(button_1.MrlButton, { "data-qa": primaryCta.dataQa, kind: primaryCtaKind, onClick: primaryCta.onClick, text: primaryCta.text, size: "small" })))))))));
+};
+exports.MrlCallout = MrlCallout;