@indico-data/design-system 2.32.0 → 2.33.0

package/lib/index.css

@@ -526,6 +526,14 @@ a:hover, .link:hover {
   font-size: var(--pf-font-size-h2);
 }
 
+.btn--icon-only {
+  padding-left: var(--pf-padding-2);
+  padding-right: var(--pf-padding-2);
+}
+.btn--icon-only.btn--md {
+  height: 32px;
+}
+
 .btn--primary {
   background: var(--pf-button-primary-color);
   color: var(--pf-button-primary-text-color);

package/lib/index.d.ts

@@ -1066,10 +1066,13 @@ type FloatUIProps = {
     floatingOptions?: UseFloatingOptions;
     isOpen?: boolean;
     isPortal?: boolean;
+    portalOptions?: {
+        rootId?: string;
+    };
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, floatingOptions, }: FloatUIProps): react_jsx_runtime.JSX.Element;
+declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, }: FloatUIProps): react_jsx_runtime.JSX.Element;
 
 type MenuProps = {
     children: React$1.ReactNode;

package/lib/index.esm.css

@@ -526,6 +526,14 @@ a:hover, .link:hover {
   font-size: var(--pf-font-size-h2);
 }
 
+.btn--icon-only {
+  padding-left: var(--pf-padding-2);
+  padding-right: var(--pf-padding-2);
+}
+.btn--icon-only.btn--md {
+  height: 32px;
+}
+
 .btn--primary {
   background: var(--pf-button-primary-color);
   color: var(--pf-button-primary-text-color);

package/lib/index.esm.js

@@ -5518,6 +5518,7 @@ const Button$2 = forwardRef((props, ref) => {
         [`btn--${color}`]: color,
         [`btn--${variant}`]: variant,
         [`btn--${size}`]: size,
+        'btn--icon-only': !children && iconName,
         'btn--loading': isLoading,
     }, className);
     const handleOnClick = (event) => {
@@ -5525,7 +5526,7 @@ const Button$2 = forwardRef((props, ref) => {
             onClick(event);
         }
     };
-    return (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 && (jsx(Icon, { name: "fa-circle-notch", style: { animation: 'spin 1s linear infinite' }, className: "mr-2", ariaLabel: "Loading..." })), !children && iconName && jsx(Icon, { name: iconName, ariaLabel: `${iconName} Icon` }), children && iconPosition === 'left' && iconName && (jsx(Icon, { name: iconName, className: "mr-2", ariaLabel: `${iconName} Icon` })), children, children && iconPosition === 'right' && iconName && (jsx(Icon, { name: iconName, className: "ml-2", ariaLabel: `${iconName} Icon` }))] })));
+    return (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 && (jsx(Icon, { name: "fa-circle-notch", style: { animation: 'spin 1s linear infinite' }, className: "mr-2", ariaLabel: "Loading...", size: size })), !children && iconName && jsx(Icon, { name: iconName, ariaLabel: `${iconName} Icon`, size: size }), children && iconPosition === 'left' && iconName && (jsx(Icon, { name: iconName, className: "mr-2", ariaLabel: `${iconName} Icon`, size: size })), children, children && iconPosition === 'right' && iconName && (jsx(Icon, { name: iconName, className: "ml-2", ariaLabel: `${iconName} Icon`, size: size }))] })));
 });
 
 function ownKeys$2(object, enumerableOnly) {
@@ -22036,7 +22037,7 @@ const defaultOptions$1 = {
     placement: 'bottom-start',
     middleware: [offset$4(5), flip$4(), shift$2()],
 };
-function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal = false, floatingOptions = defaultOptions$1, }) {
+function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal = false, portalOptions = {}, floatingOptions = defaultOptions$1, }) {
     const [internalIsOpen, setInternalIsOpen] = useState(false);
     // Determine whether the component is controlled or uncontrolled
     const isControlled = controlledIsOpen !== undefined && controlledSetIsOpen !== undefined;
@@ -22063,7 +22064,8 @@ function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: con
             top: y !== null && y !== void 0 ? y : 0,
             left: x !== null && x !== void 0 ? x : 0,
         }, role: "dialog", "aria-label": ariaLabel, className: "floatui-container", children: jsx("div", { ref: floatUIContentRef, className: "floatui-content", children: content }) }));
-    return (jsxs(Fragment, { children: [jsx("div", { ref: referenceElementRef, onClick: () => setIsOpen(!isOpen), children: trigger }), isOpen && (isPortal ? jsx(FloatingPortal, { children: tooltipContent }) : tooltipContent)] }));
+    return (jsxs(Fragment, { children: [jsx("div", { ref: referenceElementRef, onClick: () => setIsOpen(!isOpen), children: trigger }), isOpen &&
+                (isPortal ? (jsx(FloatingPortal, { id: portalOptions === null || portalOptions === void 0 ? void 0 : portalOptions.rootId, children: tooltipContent })) : (tooltipContent))] }));
 }
 
 function Menu({ children }) {