@muraldevkit/ui-toolkit 4.67.0 → 4.68.0-dev-NFbt.1

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

@@ -0,0 +1,222 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var classnames = require('classnames');
+var React = require('react');
+var MrlSvgAnimate = require('../../svg/MrlSvgAnimate/MrlSvgAnimate.js');
+var constants = require('../../tooltip/constants.js');
+var constants$1 = require('../constants.js');
+var helpers = require('../helpers.js');
+var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
+var MrlTooltip = require('../../tooltip/MrlTooltip/MrlTooltip.js');
+
+function _interopNamespaceDefault(e) {
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+var _excluded = ["attrs", "badge", "disableEvents", "icon", "kind", "loading", "onClick", "position", "toggleAria", "toggleStyle", "text", "tipAnchor", "size", "state"];
+var MrlAnimatedIconButton = /*#__PURE__*/React__namespace.forwardRef(function MrlAnimatedIconButton(_ref, ref) {
+  var _ref$attrs = _ref.attrs,
+    attrs = _ref$attrs === void 0 ? {} : _ref$attrs,
+    badge = _ref.badge,
+    _ref$disableEvents = _ref.disableEvents,
+    disableEvents = _ref$disableEvents === void 0 ? false : _ref$disableEvents,
+    icon = _ref.icon,
+    _ref$kind = _ref.kind,
+    kind = _ref$kind === void 0 ? 'ghost-inverse' : _ref$kind,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    onClick = _ref.onClick,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? constants.MrlTooltipDefaults.position : _ref$position,
+    _ref$toggleAria = _ref.toggleAria,
+    toggleAria = _ref$toggleAria === void 0 ? constants$1.buttonDefaults.toggleAria : _ref$toggleAria,
+    toggleStyle = _ref.toggleStyle,
+    text = _ref.text,
+    _ref$tipAnchor = _ref.tipAnchor,
+    tipAnchor = _ref$tipAnchor === void 0 ? constants.MrlTooltipDefaults.anchor : _ref$tipAnchor,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? constants$1.buttonDefaults.size : _ref$size,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? constants$1.buttonDefaults.state : _ref$state,
+    remainingProps = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  /**
+   * State value to determine if the icon should be animating
+   */
+  var _React$useState = React__namespace.useState('stop'),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    isAnimating = _React$useState2[0],
+    setAnimation = _React$useState2[1];
+  var _React$useState3 = React__namespace.useState(false),
+    _React$useState4 = _rollupPluginBabelHelpers.slicedToArray(_React$useState3, 2),
+    isHovered = _React$useState4[0],
+    setHover = _React$useState4[1];
+  var _React$useState5 = React__namespace.useState(function () {
+      return helpers._isSelected(state);
+    }),
+    _React$useState6 = _rollupPluginBabelHelpers.slicedToArray(_React$useState5, 2),
+    isSelected = _React$useState6[0],
+    setIsSelected = _React$useState6[1];
+  var buttonRef = React__namespace.useRef(null);
+  /**
+   * `useImperativeHandle` customizes the instance value
+   * that is exposed to parent components when using ref.
+   */
+  React__namespace.useImperativeHandle(ref, function () {
+    return buttonRef.current;
+  });
+
+  /**
+   * MrlAnimatedIconButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'
+   */
+  var isToggleButton = toggleStyle && helpers._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__namespace.useEffect(function () {
+    // allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.
+    setIsSelected(helpers._isSelected(state));
+  }, [state]);
+
+  /**
+   * Handle onClick events
+   * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event
+   */
+  var handleOnClick = function handleOnClick(e) {
+    e.stopPropagation();
+    if (helpers._isDisabled(state, loading) || disableEvents) {
+      return;
+    }
+    if (isToggleButton) {
+      setIsSelected(function (prevIsSelected) {
+        return !prevIsSelected;
+      });
+    }
+    if (onClick && typeof onClick === 'function') {
+      onClick(e);
+    }
+  };
+
+  /**
+   * Handle animation status for mouse events exclusively
+   * @param {boolean} mouseEnter - Determines if this is a mouseEnter event
+   * @returns {void}
+   */
+  var handleMouseInteraction = function handleMouseInteraction(mouseEnter) {
+    /** Set hover status of button */
+    setHover(mouseEnter);
+
+    /**
+     * If the button is in focus and we trigger a mouse event
+     * we don't need to change the animation state.
+     */
+    if (document.activeElement === buttonRef.current) {
+      return;
+    }
+    if (isAnimating === 'play') {
+      setAnimation('stop');
+    } else {
+      setAnimation('play');
+    }
+  };
+
+  /**
+   * Handle animation status for mouse and keyboard events
+   * @param {animationEvent} eventType - The type of interaction that is triggering the animation update.
+   * @param {boolean} startEvent - Whether or not this event should start an animation
+   * @returns {void}
+   */
+  var handleAnimation = function handleAnimation(eventType) {
+    var startEvent = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    /** If the button is diabled or selected, the animation must be stopped */
+    if (isSelected || helpers._isDisabled(state, loading)) {
+      setAnimation('stop');
+      /** We still need to track the hover state */
+      setHover(startEvent);
+      return;
+    }
+
+    /**
+     * If the event is a hover interaction, handle them appropriately.
+     * We do this to ensure you can hover and focus without restarting
+     * or stopping the animation incorrectly.
+     */
+    if (eventType === 'hover') {
+      handleMouseInteraction(startEvent);
+      return;
+    }
+
+    /**
+     * Keyboard events
+     */
+    if (isAnimating === 'play') {
+      /**
+       * If a button is hovered and focused, do not stop the
+       * animation on blur.
+       */
+      if (isHovered) {
+        return;
+      }
+      setAnimation('stop');
+      return;
+    }
+    setAnimation('play');
+  };
+  var handleBlur = function handleBlur() {
+    handleAnimation('blur');
+  };
+  var handleFocus = function handleFocus() {
+    handleAnimation('focus');
+  };
+  var handleMouseEnter = function handleMouseEnter() {
+    handleAnimation('hover', true);
+  };
+  var handleMouseLeave = function handleMouseLeave() {
+    handleAnimation('hover');
+  };
+  var classNames = classnames('mrlIconButton', "mrlIconButton--".concat(size), "mrlIconButton--".concat(kind), 'mrlAnimatedIconButton', "toggleStyle--".concat(toggleStyle));
+  var attributes = setAttributes.setAttributes(attrs, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    'aria-disabled': helpers._isDisabled(state, loading),
+    'aria-label': text
+  }, isToggleButton && _rollupPluginBabelHelpers.defineProperty({}, "aria-".concat(toggleAria), isSelected || false)), {}, {
+    type: 'button'
+  }));
+  return /*#__PURE__*/React__namespace.createElement(MrlTooltip.MrlTooltip, {
+    anchor: tipAnchor,
+    position: position,
+    text: text
+  }, /*#__PURE__*/React__namespace.createElement("button", _rollupPluginBabelHelpers.extends({}, attributes, remainingProps, {
+    className: classNames,
+    ref: buttonRef,
+    onBlur: handleBlur,
+    onClick: handleOnClick,
+    onFocus: handleFocus,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }), /*#__PURE__*/React__namespace.createElement("div", {
+    className: "mrlAnimatedIconButton-iconContainer"
+  }, /*#__PURE__*/React__namespace.createElement(MrlSvgAnimate.MrlSvgAnimate, _rollupPluginBabelHelpers.extends({}, icon, {
+    state: isAnimating
+  }))), badge));
+});
+
+exports.MrlAnimatedIconButton = MrlAnimatedIconButton;
+//# sourceMappingURL=MrlAnimatedIconButton.js.map

package/dist/cjs/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlAnimatedIconButton.js","sources":["../../../../../src/components/button/MrlAnimatedIconButton/MrlAnimatedIconButton.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport * as React from 'react';\nimport { setAttributes } from '../../../utils';\nimport { MrlSvgAnimate, MrlSvgAnimateProps } from '../../svg/MrlSvgAnimate/MrlSvgAnimate';\nimport { AnimatedState } from '../../svg/constants';\nimport { MrlTooltip } from '../../tooltip';\nimport { MrlTooltipDefaults } from '../../tooltip/constants';\nimport { MrlIconButtonProps } from '../MrlIconButton/MrlIconButton';\nimport { buttonDefaults } from '../constants';\nimport { _isDisabled, _isSelected, _isToggleButton } from '../helpers';\n\nimport './MrlAnimatedIconButton.scss';\n\ninterface MrlAnimatedIconButtonProps extends Omit<MrlIconButtonProps, 'icon'> {\n\ticon: MrlSvgAnimateProps;\n}\n\ntype animationEvent = 'hover' | 'blur' | 'focus';\n\nexport const MrlAnimatedIconButton = React.forwardRef<\n\tHTMLButtonElement,\n\tMrlAnimatedIconButtonProps\n>(function MrlAnimatedIconButton(\n\t{\n\t\tattrs = {},\n\t\tbadge,\n\t\tdisableEvents = false,\n\t\ticon,\n\t\t// We intentionally deviate from the basic button for icon-buttons since the vast\n\t\t// majority of icon buttons are ghost buttons. The proptype remains\n\t\t// consistent with the basic button however to keep our code DRY.\n\t\tkind = 'ghost-inverse',\n\t\tloading = false,\n\t\tonClick,\n\t\tposition = MrlTooltipDefaults.position,\n\t\ttoggleAria = buttonDefaults.toggleAria,\n\t\ttoggleStyle,\n\t\ttext,\n\t\ttipAnchor = MrlTooltipDefaults.anchor,\n\t\tsize = buttonDefaults.size,\n\t\tstate = buttonDefaults.state,\n\t\t...remainingProps\n\t}: MrlAnimatedIconButtonProps,\n\tref\n) {\n\t/**\n\t * State value to determine if the icon should be animating\n\t */\n\tconst [isAnimating, setAnimation] = React.useState<AnimatedState>('stop');\n\n\tconst [isHovered, setHover] = React.useState(false);\n\n\tconst [isSelected, setIsSelected] = React.useState(() => _isSelected(state));\n\n\tconst buttonRef = React.useRef<HTMLButtonElement>(null);\n\t/**\n\t * `useImperativeHandle` customizes the instance value\n\t * that is exposed to parent components when using ref.\n\t */\n\tReact.useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(\n\t\tref,\n\t\t() => buttonRef.current\n\t);\n\n\t/**\n\t * MrlAnimatedIconButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'\n\t */\n\tconst isToggleButton = toggleStyle && _isToggleButton(toggleStyle);\n\n\t/**\n\t * We need to watch the value of state to keep in sync\n\t * the value of state passed as props and the internal\n\t * isSelected piece of state.\n\t */\n\tReact.useEffect(() => {\n\t\t// allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.\n\t\tsetIsSelected(_isSelected(state));\n\t}, [state]);\n\n\t/**\n\t * Handle onClick events\n\t * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event\n\t */\n\tconst handleOnClick = (e: React.MouseEvent<HTMLButtonElement>): void => {\n\t\te.stopPropagation();\n\n\t\tif (_isDisabled(state, loading) || disableEvents) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isToggleButton) {\n\t\t\tsetIsSelected((prevIsSelected) => !prevIsSelected);\n\t\t}\n\n\t\tif (onClick && typeof onClick === 'function') {\n\t\t\tonClick(e);\n\t\t}\n\t};\n\n\t/**\n\t * Handle animation status for mouse events exclusively\n\t * @param {boolean} mouseEnter - Determines if this is a mouseEnter event\n\t * @returns {void}\n\t */\n\tconst handleMouseInteraction = (mouseEnter: boolean): void => {\n\t\t/** Set hover status of button */\n\t\tsetHover(mouseEnter);\n\n\t\t/**\n\t\t * If the button is in focus and we trigger a mouse event\n\t\t * we don't need to change the animation state.\n\t\t */\n\t\tif (document.activeElement === buttonRef.current) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isAnimating === 'play') {\n\t\t\tsetAnimation('stop');\n\t\t} else {\n\t\t\tsetAnimation('play');\n\t\t}\n\t};\n\n\t/**\n\t * Handle animation status for mouse and keyboard events\n\t * @param {animationEvent} eventType - The type of interaction that is triggering the animation update.\n\t * @param {boolean} startEvent - Whether or not this event should start an animation\n\t * @returns {void}\n\t */\n\tconst handleAnimation = (eventType: animationEvent, startEvent = false): void => {\n\t\t/** If the button is diabled or selected, the animation must be stopped */\n\t\tif (isSelected || _isDisabled(state, loading)) {\n\t\t\tsetAnimation('stop');\n\t\t\t/** We still need to track the hover state */\n\t\t\tsetHover(startEvent);\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * If the event is a hover interaction, handle them appropriately.\n\t\t * We do this to ensure you can hover and focus without restarting\n\t\t * or stopping the animation incorrectly.\n\t\t */\n\t\tif (eventType === 'hover') {\n\t\t\thandleMouseInteraction(startEvent);\n\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * Keyboard events\n\t\t */\n\t\tif (isAnimating === 'play') {\n\t\t\t/**\n\t\t\t * If a button is hovered and focused, do not stop the\n\t\t\t * animation on blur.\n\t\t\t */\n\t\t\tif (isHovered) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetAnimation('stop');\n\t\t\treturn;\n\t\t}\n\n\t\tsetAnimation('play');\n\t};\n\n\tconst handleBlur = () => {\n\t\thandleAnimation('blur');\n\t};\n\n\tconst handleFocus = () => {\n\t\thandleAnimation('focus');\n\t};\n\n\tconst handleMouseEnter = () => {\n\t\thandleAnimation('hover', true);\n\t};\n\n\tconst handleMouseLeave = () => {\n\t\thandleAnimation('hover');\n\t};\n\n\tconst classNames = classnames(\n\t\t'mrlIconButton',\n\t\t`mrlIconButton--${size}`,\n\t\t`mrlIconButton--${kind}`,\n\t\t'mrlAnimatedIconButton',\n\t\t`toggleStyle--${toggleStyle}`\n\t);\n\n\tconst attributes = setAttributes(attrs, {\n\t\t'aria-disabled': _isDisabled(state, loading),\n\t\t'aria-label': text,\n\t\t...(isToggleButton && { [`aria-${toggleAria}`]: isSelected || false }),\n\t\ttype: 'button'\n\t});\n\n\treturn (\n\t\t<MrlTooltip anchor={tipAnchor} position={position} text={text}>\n\t\t\t<button\n\t\t\t\t{...attributes}\n\t\t\t\t{...remainingProps}\n\t\t\t\tclassName={classNames}\n\t\t\t\tref={buttonRef}\n\t\t\t\tonBlur={handleBlur}\n\t\t\t\tonClick={handleOnClick}\n\t\t\t\tonFocus={handleFocus}\n\t\t\t\tonMouseEnter={handleMouseEnter}\n\t\t\t\tonMouseLeave={handleMouseLeave}\n\t\t\t>\n\t\t\t\t<div className=\"mrlAnimatedIconButton-iconContainer\">\n\t\t\t\t\t<MrlSvgAnimate {...icon} state={isAnimating} />\n\t\t\t\t</div>\n\t\t\t\t{badge}\n\t\t\t</button>\n\t\t</MrlTooltip>\n\t);\n});\n"],"names":["MrlAnimatedIconButton","React","forwardRef","_ref","ref","_ref$attrs","attrs","badge","_ref$disableEvents","disableEvents","icon","_ref$kind","kind","_ref$loading","loading","onClick","_ref$position","position","MrlTooltipDefaults","_ref$toggleAria","toggleAria","buttonDefaults","toggleStyle","text","_ref$tipAnchor","tipAnchor","anchor","_ref$size","size","_ref$state","state","remainingProps","_objectWithoutProperties","_excluded","_React$useState","useState","_React$useState2","_slicedToArray","isAnimating","setAnimation","_React$useState3","_React$useState4","isHovered","setHover","_React$useState5","_isSelected","_React$useState6","isSelected","setIsSelected","buttonRef","useRef","useImperativeHandle","current","isToggleButton","_isToggleButton","useEffect","handleOnClick","e","stopPropagation","_isDisabled","prevIsSelected","handleMouseInteraction","mouseEnter","document","activeElement","handleAnimation","eventType","startEvent","arguments","length","undefined","handleBlur","handleFocus","handleMouseEnter","handleMouseLeave","classNames","classnames","concat","attributes","setAttributes","_objectSpread","_defineProperty","type","createElement","MrlTooltip","_extends","className","onBlur","onFocus","onMouseEnter","onMouseLeave","MrlSvgAnimate"],"mappings":"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"}

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

@@ -0,0 +1,136 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var classnames = require('classnames');
+var constants$1 = require('../constants.js');
+var helpers = require('../helpers.js');
+var constants = require('../../loader/constants.js');
+var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
+var MrlTooltip = require('../../tooltip/MrlTooltip/MrlTooltip.js');
+var MrlSpinner = require('../../loader/MrlSpinner/MrlSpinner.js');
+
+function _interopNamespaceDefault(e) {
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+var _excluded = ["attrs", "badge", "className", "disabled", "disableEvents", "icon", "iconPos", "kind", "loading", "loadingText", "onClick", "toggleAria", "toggleStyle", "text", "size", "state", "tooltip"];
+var MrlButton = /*#__PURE__*/React__namespace.forwardRef(function MrlButton(_ref, ref) {
+  var attrs = _ref.attrs,
+    badge = _ref.badge,
+    className = _ref.className,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? constants$1.buttonDefaults.disabled : _ref$disabled,
+    _ref$disableEvents = _ref.disableEvents,
+    disableEvents = _ref$disableEvents === void 0 ? false : _ref$disableEvents,
+    icon = _ref.icon,
+    _ref$iconPos = _ref.iconPos,
+    iconPos = _ref$iconPos === void 0 ? constants$1.buttonDefaults.iconPos : _ref$iconPos,
+    _ref$kind = _ref.kind,
+    kind = _ref$kind === void 0 ? constants$1.buttonDefaults.kind : _ref$kind,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$loadingText = _ref.loadingText,
+    loadingText = _ref$loadingText === void 0 ? constants.spinnerDefaults.text : _ref$loadingText,
+    onClick = _ref.onClick,
+    _ref$toggleAria = _ref.toggleAria,
+    toggleAria = _ref$toggleAria === void 0 ? constants$1.buttonDefaults.toggleAria : _ref$toggleAria,
+    toggleStyle = _ref.toggleStyle,
+    text = _ref.text,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? constants$1.buttonDefaults.size : _ref$size,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? constants$1.buttonDefaults.state : _ref$state,
+    tooltip = _ref.tooltip,
+    remainingProps = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React__namespace.useState(function () {
+      return helpers._isSelected(state);
+    }),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    isSelected = _React$useState2[0],
+    setIsSelected = _React$useState2[1];
+
+  /**
+   * MrlButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'
+   */
+  var isToggleButton = toggleStyle && constants$1.allowedButtonValues.toggleStyles.includes(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__namespace.useEffect(function () {
+    // allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.
+    setIsSelected(helpers._isSelected(state));
+  }, [state]);
+
+  /**
+   * Handle onClick events
+   *
+   * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event
+   */
+  function handleOnClick(e) {
+    e.stopPropagation();
+    if (helpers._isDisabled(state, loading) || disabled || disableEvents) {
+      return;
+    }
+    if (isToggleButton) {
+      setIsSelected(function (prevIsSelected) {
+        return !prevIsSelected;
+      });
+    }
+    if (onClick && typeof onClick === 'function') {
+      onClick(e);
+    }
+  }
+  var classNames = classnames('mrlButton', "mrlButton--".concat(size), "mrlButton--".concat(kind), state === 'skeleton' && "mrlButton--skeleton", !icon && loading && "mrlButton--loading", isToggleButton && "toggleStyle--".concat(toggleStyle), icon && "mrlButton--icon-".concat(iconPos), className, (attrs === null || attrs === void 0 ? void 0 : attrs["class"]) || (attrs === null || attrs === void 0 ? void 0 : attrs.className));
+  if (attrs && attrs["class"]) delete attrs["class"];
+  if (attrs && attrs.className) delete attrs.className;
+  var spinnerProps = helpers._spinnerProps(kind, size);
+  var spinner = /*#__PURE__*/React__namespace.createElement(MrlSpinner.MrlSpinner, {
+    kind: spinnerProps.kind,
+    role: "none",
+    size: spinnerProps.size,
+    text: loadingText
+  });
+  var attributes = setAttributes.setAttributes(attrs || {}, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    'aria-disabled': helpers._isDisabled(state, loading) || disabled
+  }, isToggleButton && _rollupPluginBabelHelpers.defineProperty({}, "aria-".concat(toggleAria), isSelected || false)), {}, {
+    role: 'button',
+    type: 'button'
+  }));
+  var renderButton = function renderButton() {
+    return /*#__PURE__*/React__namespace.createElement("button", _rollupPluginBabelHelpers.extends({}, attributes, remainingProps, {
+      className: classNames,
+      ref: ref,
+      onClick: handleOnClick
+    }), loading ? spinner : icon, /*#__PURE__*/React__namespace.createElement("span", {
+      className: "mrlButton-text"
+    }, text), badge);
+  };
+  return !tooltip ? renderButton() : /*#__PURE__*/React__namespace.createElement(MrlTooltip.MrlTooltip, {
+    position: tooltip.position || 'bottom',
+    anchor: tooltip.anchor || 'center',
+    text: tooltip.text,
+    dataQa: tooltip.dataQa
+  }, renderButton());
+});
+
+exports.MrlButton = MrlButton;
+//# sourceMappingURL=MrlButton.js.map

package/dist/cjs/components/button/MrlButton/MrlButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MrlButton.js","sources":["../../../../../src/components/button/MrlButton/MrlButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport {\n\tallowedButtonValues,\n\tbuttonDefaults,\n\tMrlButtonKind,\n\tMrlButtonSize,\n\tToggleAria,\n\tIconPosition\n} from '../constants';\nimport { _isDisabled, _isSelected, _spinnerProps } from '../helpers';\nimport { MrlSpinner, MrlTooltipAnchor, MrlTooltipPosition, MrlTooltip } from '../../';\nimport { spinnerDefaults } from '../../loader/constants';\nimport { AttrsObject, MrlComponentProps, setAttributes } from '../../../utils';\n\nimport './MrlButton.global.scss';\n\nexport type MrlButtonState = (typeof allowedButtonValues.states)[number];\nexport type ToggleStyle = (typeof allowedButtonValues.toggleStyles)[number];\n\nexport interface TooltipConfig {\n\t/**\n\t * The text to display in the tooltip\n\t */\n\ttext: string;\n\t/**\n\t * The position of the tooltip relative to the button\n\t */\n\tposition?: MrlTooltipPosition;\n\n\t/**\n\t * The anchor of the tooltip relative to the button\n\t */\n\tanchor?: MrlTooltipAnchor;\n\n\t/**\n\t * The data-qa attribute for the tooltip\n\t */\n\tdataQa?: string;\n}\n\nexport interface MrlButtonProps\n\textends Omit<MrlComponentProps, 'style'>,\n\t\tReact.ComponentProps<'button'> {\n\t/**\n\t * Applies additional HTML attributes to the button element.\n\t *\n\t * @deprecated\n\t */\n\tattrs?: AttrsObject;\n\t/**\n\t * Allow developers to add badge to buttons.\n\t */\n\tbadge?: React.ReactElement;\n\n\t/**\n\t * @deprecated - Use state=\"disabled\" or \"selected-disabled\" or \"skeleton\" instead.\n\t * Allow developers to change the disabled state based on user interactions.\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Allows developers the ability to disable built in event listeners so they can manage user\n\t * interactions from the application.\n\t */\n\tdisableEvents?: boolean;\n\t/**\n\t * Allow developers to add icon to buttons.\n\t */\n\ticon?: React.ReactElement;\n\t/**\n\t * Allows developers to right-align an icon within a button.\n\t */\n\ticonPos?: IconPosition;\n\t/**\n\t * Changes the visual emphasis of the button.\n\t */\n\tkind?: MrlButtonKind;\n\t/**\n\t * Displays a spinner in the button to indicate some action is in progress.\n\t */\n\tloading?: boolean;\n\t/**\n\t * Text for the spinner when the button is in a loading state.\n\t */\n\tloadingText?: string;\n\t/**\n\t * onClick event for the button.\n\t */\n\tonClick?: (e: React.SyntheticEvent<HTMLButtonElement>) => void;\n\t/**\n\t * Changes the size of the button so it can scale with its surrounding context.\n\t */\n\tsize?: MrlButtonSize;\n\t/**\n\t * Changes the state of the button based on user permissions or actions.\n\t */\n\tstate?: MrlButtonState;\n\t/**\n\t * The textual label describing the button's purpose/action.\n\t * Icon buttons require a text label to ensure accessibility.\n\t */\n\ttext: string;\n\t/**\n\t * Determines which aria setup to use for various toggle/selected styles.\n\t * pressed - use for an traditional “toggle button”\n\t * selected - use for tabs and custom select options\n\t * expanded - use for menus, panels, and popovers\n\t * checked - use for custom [radiobutton](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/#wai-aria-roles-states-and-properties-16)\n\t * \t\tor [checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/#wai-aria-roles-states-and-properties-5) inputs\n\t */\n\ttoggleAria?: ToggleAria;\n\n\t/**\n\t * Tooltip configuration for the button\n\t */\n\ttooltip?: TooltipConfig;\n\n\t/**\n\t * Selected state variant when the button is a Toggle Button. The visual styles\n\t * are also impacted by the \"kind\" prop. Toggle buttons are only supported\n\t * when \"kind\" is set to either \"ghost\" or \"ghost-inverse\". Setting this prop\n\t * informs the component that this is a toggle button and to add that functionality\n\t */\n\ttoggleStyle?: ToggleStyle;\n}\n\nexport const MrlButton = React.forwardRef<HTMLButtonElement, MrlButtonProps>(function MrlButton(\n\t{\n\t\tattrs,\n\t\tbadge,\n\t\tclassName,\n\t\tdisabled = buttonDefaults.disabled,\n\t\tdisableEvents = false,\n\t\ticon,\n\t\ticonPos = buttonDefaults.iconPos,\n\t\tkind = buttonDefaults.kind,\n\t\tloading = false,\n\t\tloadingText = spinnerDefaults.text,\n\t\tonClick,\n\t\ttoggleAria = buttonDefaults.toggleAria,\n\t\ttoggleStyle,\n\t\ttext,\n\t\tsize = buttonDefaults.size,\n\t\tstate = buttonDefaults.state,\n\t\ttooltip,\n\t\t...remainingProps\n\t}: MrlButtonProps,\n\tref\n) {\n\tconst [isSelected, setIsSelected] = React.useState(() => _isSelected(state));\n\n\t/**\n\t * MrlButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'\n\t */\n\tconst isToggleButton = toggleStyle && allowedButtonValues.toggleStyles.includes(toggleStyle);\n\n\t/**\n\t * We need to watch the value of state to keep in sync\n\t * the value of state passed as props and the internal\n\t * isSelected piece of state.\n\t */\n\tReact.useEffect(() => {\n\t\t// allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.\n\t\tsetIsSelected(_isSelected(state));\n\t}, [state]);\n\n\t/**\n\t * Handle onClick events\n\t *\n\t * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event\n\t */\n\tfunction handleOnClick(e: React.MouseEvent<HTMLButtonElement>) {\n\t\te.stopPropagation();\n\n\t\tif (_isDisabled(state, loading) || disabled || disableEvents) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isToggleButton) {\n\t\t\tsetIsSelected((prevIsSelected) => !prevIsSelected);\n\t\t}\n\n\t\tif (onClick && typeof onClick === 'function') {\n\t\t\tonClick(e);\n\t\t}\n\t}\n\n\tconst classNames = classnames(\n\t\t'mrlButton',\n\t\t`mrlButton--${size}`,\n\t\t`mrlButton--${kind}`,\n\t\tstate === 'skeleton' && `mrlButton--skeleton`,\n\t\t!icon && loading && `mrlButton--loading`,\n\t\tisToggleButton && `toggleStyle--${toggleStyle}`,\n\t\ticon && `mrlButton--icon-${iconPos}`,\n\t\tclassName,\n\t\tattrs?.class || attrs?.className\n\t);\n\n\tif (attrs && attrs.class) delete attrs.class;\n\tif (attrs && attrs.className) delete attrs.className;\n\n\tconst spinnerProps = _spinnerProps(kind, size);\n\tconst spinner = (\n\t\t<MrlSpinner kind={spinnerProps.kind} role=\"none\" size={spinnerProps.size} text={loadingText} />\n\t);\n\n\tconst attributes = setAttributes(attrs || {}, {\n\t\t'aria-disabled': _isDisabled(state, loading) || disabled,\n\t\t...(isToggleButton && { [`aria-${toggleAria}`]: isSelected || false }),\n\t\trole: 'button',\n\t\ttype: 'button'\n\t});\n\n\tconst renderButton = () => (\n\t\t<button\n\t\t\t{...attributes}\n\t\t\t{...remainingProps}\n\t\t\tclassName={classNames}\n\t\t\tref={ref}\n\t\t\tonClick={handleOnClick}\n\t\t>\n\t\t\t{loading ? spinner : icon}\n\t\t\t<span className=\"mrlButton-text\">{text}</span>\n\t\t\t{badge}\n\t\t</button>\n\t);\n\n\treturn !tooltip ? (\n\t\trenderButton()\n\t) : (\n\t\t<MrlTooltip\n\t\t\tposition={tooltip.position || 'bottom'}\n\t\t\tanchor={tooltip.anchor || 'center'}\n\t\t\ttext={tooltip.text}\n\t\t\tdataQa={tooltip.dataQa}\n\t\t>\n\t\t\t{renderButton()}\n\t\t</MrlTooltip>\n\t);\n});\n"],"names":["MrlButton","React","forwardRef","_ref","ref","attrs","badge","className","_ref$disabled","disabled","buttonDefaults","_ref$disableEvents","disableEvents","icon","_ref$iconPos","iconPos","_ref$kind","kind","_ref$loading","loading","_ref$loadingText","loadingText","spinnerDefaults","text","onClick","_ref$toggleAria","toggleAria","toggleStyle","_ref$size","size","_ref$state","state","tooltip","remainingProps","_objectWithoutProperties","_excluded","_React$useState","useState","_isSelected","_React$useState2","_slicedToArray","isSelected","setIsSelected","isToggleButton","allowedButtonValues","toggleStyles","includes","useEffect","handleOnClick","e","stopPropagation","_isDisabled","prevIsSelected","classNames","classnames","concat","spinnerProps","_spinnerProps","spinner","createElement","MrlSpinner","role","attributes","setAttributes","_objectSpread","_defineProperty","type","renderButton","_extends","MrlTooltip","position","anchor","dataQa"],"mappings":"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"}

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

@@ -0,0 +1,180 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var classnames = require('classnames');
+var constants$2 = require('../constants.js');
+var helpers = require('../helpers.js');
+var constants$1 = require('../../tooltip/constants.js');
+var constants = require('../../loader/constants.js');
+var setAttributes = require('../../../utils/setAttributes/setAttributes.js');
+var MrlTooltip = require('../../tooltip/MrlTooltip/MrlTooltip.js');
+var MrlSpinner = require('../../loader/MrlSpinner/MrlSpinner.js');
+
+function _interopNamespaceDefault(e) {
+	var n = Object.create(null);
+	if (e) {
+		Object.keys(e).forEach(function (k) {
+			if (k !== 'default') {
+				var d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: function () { return e[k]; }
+				});
+			}
+		});
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+var _excluded = ["aria-label", "attrs", "badge", "className", "disableEvents", "disableTooltipHover", "icon", "kind", "loading", "loadingText", "onClick", "onKeyUp", "onMouseUp", "position", "toggleAria", "toggleStyle", "text", "tipAnchor", "tooltipKind", "size", "state", "wrapperClassName", "controlledState"];
+var MrlIconButton = /*#__PURE__*/React__namespace.forwardRef(function MrlIconButton(_ref, ref) {
+  var ariaLabel = _ref['aria-label'],
+    _ref$attrs = _ref.attrs,
+    attrs = _ref$attrs === void 0 ? {} : _ref$attrs,
+    badge = _ref.badge,
+    className = _ref.className,
+    _ref$disableEvents = _ref.disableEvents,
+    disableEvents = _ref$disableEvents === void 0 ? false : _ref$disableEvents,
+    _ref$disableTooltipHo = _ref.disableTooltipHover,
+    disableTooltipHover = _ref$disableTooltipHo === void 0 ? false : _ref$disableTooltipHo,
+    icon = _ref.icon,
+    _ref$kind = _ref.kind,
+    kind = _ref$kind === void 0 ? 'ghost' : _ref$kind,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading,
+    _ref$loadingText = _ref.loadingText,
+    loadingText = _ref$loadingText === void 0 ? constants.spinnerDefaults.text : _ref$loadingText,
+    onClick = _ref.onClick,
+    onKeyUp = _ref.onKeyUp,
+    onMouseUp = _ref.onMouseUp,
+    _ref$position = _ref.position,
+    position = _ref$position === void 0 ? constants$1.MrlTooltipDefaults.position : _ref$position,
+    _ref$toggleAria = _ref.toggleAria,
+    toggleAria = _ref$toggleAria === void 0 ? constants$2.buttonDefaults.toggleAria : _ref$toggleAria,
+    toggleStyle = _ref.toggleStyle,
+    text = _ref.text,
+    _ref$tipAnchor = _ref.tipAnchor,
+    tipAnchor = _ref$tipAnchor === void 0 ? constants$1.MrlTooltipDefaults.anchor : _ref$tipAnchor,
+    _ref$tooltipKind = _ref.tooltipKind,
+    tooltipKind = _ref$tooltipKind === void 0 ? 'default' : _ref$tooltipKind,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? constants$2.buttonDefaults.size : _ref$size,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? constants$2.buttonDefaults.state : _ref$state,
+    wrapperClassName = _ref.wrapperClassName,
+    controlledState = _ref.controlledState,
+    remainingProps = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  /**
+   * 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.
+   */
+  var effectiveButtonState = controlledState !== null && controlledState !== void 0 ? controlledState : state;
+  var _React$useState = React__namespace.useState(function () {
+      return helpers._isSelected(effectiveButtonState);
+    }),
+    _React$useState2 = _rollupPluginBabelHelpers.slicedToArray(_React$useState, 2),
+    isSelected = _React$useState2[0],
+    setIsSelected = _React$useState2[1];
+  var buttonRef = React__namespace.useRef(null);
+  React__namespace.useImperativeHandle(ref, function () {
+    return buttonRef.current;
+  });
+
+  /**
+   * MrlIconButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'
+   */
+  var isToggleButton = toggleStyle && helpers._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__namespace.useEffect(function () {
+    // allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.
+    setIsSelected(helpers._isSelected(effectiveButtonState));
+  }, [effectiveButtonState]);
+
+  /**
+   * Handle onClick events
+   * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event
+   */
+  function handleOnClick(e) {
+    e.stopPropagation();
+    if (helpers._isDisabled(effectiveButtonState, loading) || disableEvents) {
+      return;
+    }
+    if (isToggleButton && !controlledState) {
+      setIsSelected(function (prevIsSelected) {
+        return !prevIsSelected;
+      });
+    }
+    if (onClick && typeof onClick === 'function') {
+      onClick(e);
+    }
+  }
+  var classNames = classnames('mrlIconButton', "mrlIconButton--".concat(size), "mrlIconButton--".concat(kind), isToggleButton && toggleStyle && "toggleStyle--".concat(toggleStyle), attrs["class"] || attrs.className, className);
+  delete attrs["class"];
+  delete attrs.className;
+  var getAriaLabel = function getAriaLabel() {
+    // Set loading text if loading
+    if (loading) return "".concat(loadingText, " ").concat(text);
+
+    // Only set aria-label if we have actual content
+    var 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;
+  };
+  var ariaLabelValue = getAriaLabel();
+  var attributes = setAttributes.setAttributes(attrs, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({
+    'aria-disabled': helpers._isDisabled(effectiveButtonState, loading),
+    'aria-label': ariaLabelValue
+  }, isToggleButton && _rollupPluginBabelHelpers.defineProperty({}, "aria-".concat(toggleAria), isSelected || false)), {}, {
+    type: 'button'
+  }));
+
+  // MrlSvg should always have size="auto"
+  var iconWithSizeAuto = React__namespace.useMemo(function () {
+    return /*#__PURE__*/React__namespace.cloneElement(icon, {
+      size: 'auto'
+    });
+  }, [icon]);
+  var spinnerProps = helpers._spinnerProps(kind, size);
+  var spinner = /*#__PURE__*/React__namespace.createElement(MrlSpinner.MrlSpinner, {
+    kind: spinnerProps.kind,
+    size: spinnerProps.size
+  });
+  var dataQaProp = remainingProps['data-qa'];
+  var tooltipQa = dataQaProp ? "".concat(dataQaProp, "-tooltip") : setAttributes.getUniqueId('tooltip');
+  var tooltipContentClass = size === 'xsmall' || size === 'small' ? "mrlIconButton--".concat(size, "-wrapper") : undefined;
+  return /*#__PURE__*/React__namespace.createElement(MrlTooltip.MrlTooltip, {
+    anchor: tipAnchor,
+    dataQa: tooltipQa,
+    kind: tooltipKind,
+    position: position,
+    text: text,
+    tooltipClass: classnames('mrlIconButton-wrapper', wrapperClassName),
+    tooltipContentClass: tooltipContentClass,
+    disableTooltipHover: disableTooltipHover,
+    srAnnouncement: false
+  }, /*#__PURE__*/React__namespace.createElement("button", _rollupPluginBabelHelpers.extends({}, attributes, remainingProps, {
+    className: classNames,
+    ref: buttonRef,
+    onClick: handleOnClick,
+    onKeyUp: onKeyUp,
+    onMouseUp: onMouseUp
+  }), loading ? spinner : iconWithSizeAuto, badge));
+});
+
+exports.MrlIconButton = MrlIconButton;
+//# sourceMappingURL=MrlIconButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MrlIconButton.js","sources":["../../../../../src/components/button/MrlIconButton/MrlIconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport {\n\tbuttonDefaults,\n\tMrlButtonKind,\n\tMrlButtonSize,\n\tMrlGhostIconButtonSize,\n\tToggleAria\n} from '../constants';\nimport { _isDisabled, _isSelected, _isToggleButton, _spinnerProps } from '../helpers';\nimport { AttrsObject, MrlComponentProps, setAttributes, getUniqueId } from '../../../utils';\nimport {\n\tMrlTooltipAnchor,\n\tMrlTooltipDefaults,\n\tMrlTooltipPosition,\n\tMrlTooltipVariant\n} from '../../tooltip/constants';\nimport { MrlButtonState, MrlSpinner, MrlTooltip, ToggleStyle } from '../../';\nimport { spinnerDefaults } from '../../loader/constants';\nimport './MrlIconButton.scss';\n\nexport interface MrlIconButtonProps\n\textends Omit<MrlComponentProps, 'style'>,\n\t\tReact.ComponentProps<'button'> {\n\t/**\n\t * Applies additional HTML attributes to the button element.\n\t * @deprecated\n\t */\n\tattrs?: AttrsObject;\n\t/**\n\t * Allow developers to add badge to buttons.\n\t */\n\tbadge?: React.ReactElement;\n\t/** Additional class to add to the button */\n\tclassName?: string;\n\t/**\n\t * Allows developers the ability to disable built in event listeners so they can manage user\n\t * interactions from the application.\n\t */\n\tdisableEvents?: boolean;\n\n\t/** Whether to disable the tooltip hover action that keeps it open */\n\tdisableTooltipHover?: boolean;\n\n\t/**\n\t * The icon that will be rendered.\n\t */\n\ticon: React.ReactElement;\n\t/**\n\t * Changes the visual emphasis of the button.\n\t *\n\t * Note: size=\"xsmall\" should ONLY be used with a kind of `ghost` or `ghost-inverse`.\n\t */\n\tkind?: MrlButtonKind;\n\t/**\n\t * Displays a spinner in the button to indicate some action is in progress.\n\t */\n\tloading?: boolean;\n\t/**\n\t * Text for the spinner when the button is in a loading state.\n\t */\n\tloadingText?: string;\n\n\t/**\n\t * onClick event for the button.\n\t */\n\tonClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n\n\t/**\n\t * onKeyDown event for the button.\n\t */\n\tonKeyUp?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;\n\n\t/**\n\t * onMouseUp event for the button.\n\t */\n\tonMouseUp?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n\n\t/**\n\t * The placement of the tooltip in relation to the button.\n\t */\n\tposition?: MrlTooltipPosition;\n\t/**\n\t * Changes the size of the button so it can scale with its surrounding context.\n\t *\n\t * Note: size=\"xsmall\" should ONLY be used with a kind of `ghost` or `ghost-inverse`.\n\t */\n\tsize?: MrlButtonSize | MrlGhostIconButtonSize;\n\t/**\n\t * Changes the state of the button based on user permissions or actions.\n\t *\n\t * Note: The Basic Button does not fully support state=\"disabled\", use\n\t * the 'disabled' prop instead. Since it does not support state=\"disabled\",\n\t * it also doesn't not support state=\"selected-disabled\".\n\t */\n\tstate?: MrlButtonState;\n\t/**\n\t * The textual label describing the button's purpose/action.\n\t * Icon buttons require a text label to ensure accessibility.\n\t */\n\ttext: string;\n\t/**\n\t * The arrow position of the tooltip in relation to the button.\n\t */\n\ttipAnchor?: MrlTooltipAnchor;\n\n\t/**\n\t * Determines which aria setup to use for various toggle/selected styles.\n\t * pressed - use for an traditional “toggle button”\n\t * selected - use for tabs and custom select options\n\t * expanded - use for menus, panels, and popovers\n\t * checked - use for custom [radiobutton](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/#wai-aria-roles-states-and-properties-16)\n\t * \t\tor [checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/#wai-aria-roles-states-and-properties-5) inputs\n\t */\n\ttoggleAria?: ToggleAria;\n\t/**\n\t * Selected state variant when the button is a Toggle Button. The visual styles\n\t * are also impacted by the \"kind\" prop. Toggle buttons are only supported\n\t * when \"kind\" is set to either \"ghost\" or \"ghost-inverse\". Setting this prop\n\t * informs the component that this is a toggle button and to add that functionality\n\t */\n\ttoggleStyle?: ToggleStyle;\n\n\t/** tooltip varient kind */\n\ttooltipKind?: MrlTooltipVariant;\n\n\t/**\n\t * An optional class name to add to the tooltip wrapper.\n\t */\n\twrapperClassName?: string;\n\n\t/**\n\t * Controlled state that overrides the internal state management.\n\t * When provided, this takes precedence over the `state` prop and allows\n\t * the parent component to fully control the icon button's state.\n\t */\n\tcontrolledState?: MrlButtonState;\n}\n\nexport const MrlIconButton = React.forwardRef<HTMLButtonElement, MrlIconButtonProps>(\n\tfunction MrlIconButton(\n\t\t{\n\t\t\t['aria-label']: ariaLabel,\n\t\t\tattrs = {},\n\t\t\tbadge,\n\t\t\tclassName,\n\t\t\tdisableEvents = false,\n\t\t\tdisableTooltipHover = false,\n\t\t\ticon,\n\t\t\t// We intentionally deviate from the basic button for icon-buttons since the vast\n\t\t\t// majority of icon buttons are ghost buttons. The proptype remains\n\t\t\t// consistent with the basic button however to keep our code DRY.\n\t\t\tkind = 'ghost',\n\t\t\tloading = false,\n\t\t\tloadingText = spinnerDefaults.text,\n\t\t\tonClick,\n\t\t\tonKeyUp,\n\t\t\tonMouseUp,\n\t\t\tposition = MrlTooltipDefaults.position,\n\t\t\ttoggleAria = buttonDefaults.toggleAria,\n\t\t\ttoggleStyle,\n\t\t\ttext,\n\t\t\ttipAnchor = MrlTooltipDefaults.anchor,\n\t\t\ttooltipKind = 'default',\n\t\t\tsize = buttonDefaults.size,\n\t\t\tstate = buttonDefaults.state,\n\t\t\twrapperClassName,\n\t\t\tcontrolledState,\n\t\t\t...remainingProps\n\t\t}: MrlIconButtonProps,\n\t\tref\n\t) {\n\t\t/**\n\t\t * Determine the effective button state.\n\t\t * Uses controlledState if provided (controlled mode),\n\t\t * otherwise falls back to the state prop (uncontrolled mode).\n\t\t * This allows the component to work in both controlled and uncontrolled scenarios.\n\t\t */\n\t\tconst effectiveButtonState = controlledState ?? state;\n\n\t\tconst [isSelected, setIsSelected] = React.useState(() => _isSelected(effectiveButtonState));\n\n\t\tconst buttonRef = React.useRef<HTMLButtonElement>(null);\n\t\tReact.useImperativeHandle<HTMLButtonElement | null, HTMLButtonElement | null>(\n\t\t\tref,\n\t\t\t() => buttonRef.current\n\t\t);\n\n\t\t/**\n\t\t * MrlIconButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'\n\t\t */\n\t\tconst isToggleButton = toggleStyle && _isToggleButton(toggleStyle);\n\n\t\t/**\n\t\t * We need to watch the value of state to keep in sync\n\t\t * the value of state passed as props and the internal\n\t\t * isSelected piece of state.\n\t\t */\n\t\tReact.useEffect(() => {\n\t\t\t// allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.\n\t\t\tsetIsSelected(_isSelected(effectiveButtonState));\n\t\t}, [effectiveButtonState]);\n\n\t\t/**\n\t\t * Handle onClick events\n\t\t * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event\n\t\t */\n\t\tfunction handleOnClick(e: React.MouseEvent<HTMLButtonElement>) {\n\t\t\te.stopPropagation();\n\n\t\t\tif (_isDisabled(effectiveButtonState, loading) || disableEvents) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (isToggleButton && !controlledState) {\n\t\t\t\tsetIsSelected((prevIsSelected) => !prevIsSelected);\n\t\t\t}\n\n\t\t\tif (onClick && typeof onClick === 'function') {\n\t\t\t\tonClick(e);\n\t\t\t}\n\t\t}\n\n\t\tconst classNames = classnames(\n\t\t\t'mrlIconButton',\n\t\t\t`mrlIconButton--${size}`,\n\t\t\t`mrlIconButton--${kind}`,\n\t\t\tisToggleButton && toggleStyle && `toggleStyle--${toggleStyle}`,\n\t\t\tattrs.class || attrs.className,\n\t\t\tclassName\n\t\t);\n\n\t\tdelete attrs.class;\n\t\tdelete attrs.className;\n\n\t\tconst getAriaLabel = (): string => {\n\t\t\t// Set loading text if loading\n\t\t\tif (loading) return `${loadingText} ${text}`;\n\n\t\t\t// Only set aria-label if we have actual content\n\t\t\tconst hasAriaLabel = ariaLabel && ariaLabel.trim() !== '';\n\n\t\t\t// If we have a custom ariaLabel, override the default text\n\t\t\tif (hasAriaLabel) return ariaLabel;\n\n\t\t\t// Fallback to icon button text\n\t\t\treturn text;\n\t\t};\n\n\t\tconst ariaLabelValue = getAriaLabel();\n\n\t\tconst attributes = setAttributes(attrs, {\n\t\t\t'aria-disabled': _isDisabled(effectiveButtonState, loading),\n\t\t\t'aria-label': ariaLabelValue,\n\t\t\t...(isToggleButton && { [`aria-${toggleAria}`]: isSelected || false }),\n\t\t\ttype: 'button'\n\t\t});\n\n\t\t// MrlSvg should always have size=\"auto\"\n\t\tconst iconWithSizeAuto = React.useMemo(\n\t\t\t() =>\n\t\t\t\tReact.cloneElement(icon, {\n\t\t\t\t\tsize: 'auto'\n\t\t\t\t}),\n\t\t\t[icon]\n\t\t);\n\n\t\tconst spinnerProps = _spinnerProps(kind, size);\n\t\tconst spinner = <MrlSpinner kind={spinnerProps.kind} size={spinnerProps.size} />;\n\n\t\tconst dataQaProp = (remainingProps as { 'data-qa'?: string })['data-qa'];\n\t\tconst tooltipQa = dataQaProp ? `${dataQaProp}-tooltip` : getUniqueId('tooltip');\n\t\tconst tooltipContentClass =\n\t\t\tsize === 'xsmall' || size === 'small' ? `mrlIconButton--${size}-wrapper` : undefined;\n\n\t\treturn (\n\t\t\t<MrlTooltip\n\t\t\t\tanchor={tipAnchor}\n\t\t\t\tdataQa={tooltipQa}\n\t\t\t\tkind={tooltipKind}\n\t\t\t\tposition={position}\n\t\t\t\ttext={text}\n\t\t\t\ttooltipClass={classnames('mrlIconButton-wrapper', wrapperClassName)}\n\t\t\t\ttooltipContentClass={tooltipContentClass}\n\t\t\t\tdisableTooltipHover={disableTooltipHover}\n\t\t\t\tsrAnnouncement={false}\n\t\t\t>\n\t\t\t\t<button\n\t\t\t\t\t{...attributes}\n\t\t\t\t\t{...remainingProps}\n\t\t\t\t\tclassName={classNames}\n\t\t\t\t\tref={buttonRef}\n\t\t\t\t\tonClick={handleOnClick}\n\t\t\t\t\tonKeyUp={onKeyUp}\n\t\t\t\t\tonMouseUp={onMouseUp}\n\t\t\t\t>\n\t\t\t\t\t{loading ? spinner : iconWithSizeAuto}\n\t\t\t\t\t{badge}\n\t\t\t\t</button>\n\t\t\t</MrlTooltip>\n\t\t);\n\t}\n);\n"],"names":["MrlIconButton","React","forwardRef","_ref","ref","ariaLabel","_ref$attrs","attrs","badge","className","_ref$disableEvents","disableEvents","_ref$disableTooltipHo","disableTooltipHover","icon","_ref$kind","kind","_ref$loading","loading","_ref$loadingText","loadingText","spinnerDefaults","text","onClick","onKeyUp","onMouseUp","_ref$position","position","MrlTooltipDefaults","_ref$toggleAria","toggleAria","buttonDefaults","toggleStyle","_ref$tipAnchor","tipAnchor","anchor","_ref$tooltipKind","tooltipKind","_ref$size","size","_ref$state","state","wrapperClassName","controlledState","remainingProps","_objectWithoutProperties","_excluded","effectiveButtonState","_React$useState","useState","_isSelected","_React$useState2","_slicedToArray","isSelected","setIsSelected","buttonRef","useRef","useImperativeHandle","current","isToggleButton","_isToggleButton","useEffect","handleOnClick","e","stopPropagation","_isDisabled","prevIsSelected","classNames","classnames","concat","getAriaLabel","hasAriaLabel","trim","ariaLabelValue","attributes","setAttributes","_objectSpread","_defineProperty","type","iconWithSizeAuto","useMemo","cloneElement","spinnerProps","_spinnerProps","spinner","createElement","MrlSpinner","dataQaProp","tooltipQa","getUniqueId","tooltipContentClass","undefined","MrlTooltip","dataQa","tooltipClass","srAnnouncement","_extends"],"mappings":"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"}