@indico-data/design-system 2.21.0 → 2.21.2

package/lib/index.js

@@ -3186,7 +3186,7 @@ var classnames = {exports: {}};
 var classnamesExports = classnames.exports;
 var y$1 = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
-const Button$2 = (props) => {
+const Button$2 = e.forwardRef((props, ref) => {
     const { ariaLabel, children, isLoading, isDisabled, variant = 'solid', color = 'primary', iconPosition = 'left', iconName, onClick, type = 'button', size = 'md', onMouseEnter, onMouseExit, onKeyDown, className, href } = props, rest = __rest$1(props, ["ariaLabel", "children", "isLoading", "isDisabled", "variant", "color", "iconPosition", "iconName", "onClick", "type", "size", "onMouseEnter", "onMouseExit", "onKeyDown", "className", "href"]);
     const buttonClasses = y$1('btn', {
         [`btn--${color}`]: color,
@@ -3195,12 +3195,12 @@ const Button$2 = (props) => {
         'btn--loading': isLoading,
     }, className);
     const handleOnClick = (event) => {
-        if (!isLoading && props.onClick) {
-            props.onClick(event);
+        if (!isLoading && onClick) {
+            onClick(event);
         }
     };
-    return (jsxRuntime.jsxs("button", Object.assign({ disabled: isLoading || isDisabled, className: buttonClasses, role: "button", onClick: handleOnClick, "aria-label": ariaLabel || 'button', "aria-disabled": isLoading || isDisabled, "aria-busy": isLoading, type: type, onMouseEnter: onMouseEnter, onMouseLeave: onMouseExit, onKeyDown: onKeyDown }, rest, { children: [isLoading && (jsxRuntime.jsx(Icon, { name: "fa-circle-notch", style: { animation: 'spin 1s linear infinite' }, className: "mr-2", ariaLabel: "Loading..." })), !children && iconName && jsxRuntime.jsx(Icon, { name: iconName, ariaLabel: `${iconName} Icon` }), children && iconPosition === 'left' && iconName && (jsxRuntime.jsx(Icon, { name: iconName, className: "mr-2", ariaLabel: `${iconName} Icon` })), children, children && iconPosition === 'right' && iconName && (jsxRuntime.jsx(Icon, { name: iconName, className: "ml-2", ariaLabel: `${iconName} Icon` }))] })));
-};
+    return (jsxRuntime.jsxs("button", Object.assign({ ref: ref, disabled: isLoading || isDisabled, className: buttonClasses, role: "button", onClick: handleOnClick, "aria-label": ariaLabel || 'button', "aria-disabled": isLoading || isDisabled, "aria-busy": isLoading, type: type, onMouseEnter: onMouseEnter, onMouseLeave: onMouseExit, onKeyDown: onKeyDown }, rest, { children: [isLoading && (jsxRuntime.jsx(Icon, { name: "fa-circle-notch", style: { animation: 'spin 1s linear infinite' }, className: "mr-2", ariaLabel: "Loading..." })), !children && iconName && jsxRuntime.jsx(Icon, { name: iconName, ariaLabel: `${iconName} Icon` }), children && iconPosition === 'left' && iconName && (jsxRuntime.jsx(Icon, { name: iconName, className: "mr-2", ariaLabel: `${iconName} Icon` })), children, children && iconPosition === 'right' && iconName && (jsxRuntime.jsx(Icon, { name: iconName, className: "ml-2", ariaLabel: `${iconName} Icon` }))] })));
+});
 
 function ownKeys$2(object, enumerableOnly) {
   var keys = Object.keys(object);
@@ -40935,7 +40935,11 @@ function ModalBase(props) {
         ariaProps['describedby'] = describedBy;
     }
     // Try to render modal within the theme-root, otherwise attach to the root
-    const parentSelector = () => document.getElementById('theme-root') || document.getElementById('root');
+    const parentSelector = () => {
+        const themeRoot = document.getElementById('theme-root');
+        const root = document.getElementById('root');
+        return themeRoot || root || document.body;
+    };
     return (jsxRuntime.jsx(StyledModalBase, { ariaHideApp: false, "data-cy": props['data-cy'], aria: ariaProps, className: className || 'baseModal', contentLabel: 'labelText' in props ? props.labelText : null, id: id, isOpen: open, node: node, onRequestClose: clickToDismiss, parentSelector: parentSelector, shouldCloseOnEsc: !preventEscDismiss, shouldReturnFocusAfterClose: !preventReturnFocus, maxWidth: maxWidth, children: children }));
 }