@indico-data/design-system 3.13.0 → 3.14.0

package/lib/components/floatUI/FloatUI.d.ts

@@ -1,2 +1,2 @@
 import { FloatUIProps } from './types';
-export declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, className, hover, }: FloatUIProps): import("react/jsx-runtime").JSX.Element;
+export declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, className, hover, onOpenChange, }: FloatUIProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/floatUI/types.d.ts

@@ -20,4 +20,6 @@ export type FloatUIProps = {
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
     /** If true, opens on hover instead of click. Defaults to false. */
     hover?: boolean;
+    /** Callback function to be called when the FloatUI is opened or closed. */
+    onOpenChange?: (isOpen: boolean) => void;
 };

package/lib/index.d.ts

@@ -760,9 +760,11 @@ type FloatUIProps = {
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
     /** If true, opens on hover instead of click. Defaults to false. */
     hover?: boolean;
+    /** Callback function to be called when the FloatUI is opened or closed. */
+    onOpenChange?: (isOpen: boolean) => void;
 };
 
-declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, className, hover, }: FloatUIProps): react_jsx_runtime.JSX.Element;
+declare function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal, portalOptions, floatingOptions, className, hover, onOpenChange, }: FloatUIProps): react_jsx_runtime.JSX.Element;
 
 type MenuProps = {
     children: React$1.ReactNode;

package/lib/index.esm.js

@@ -5630,7 +5630,7 @@ const HorizontalStickyHeader = ({ children, position, onPinColumn, isPinned = fa
         });
         calculateWidth();
     }, [position, isPinned, pinnedColumnIds]);
-    return (jsxs("div", { className: "table__header-cell", "data-testid": `sticky-column-${position}`, children: [jsx(Button$1, { "data-testid": `sticky-header-pin-button-${position}`, variant: "link", size: "sm", iconLeft: "pin", onClick: onPinColumn, ariaLabel: isPinned ? 'Unpin column' : 'Pin column', className: `table__column--${isPinned ? 'is-pinned' : 'is-not-pinned'} table__column__pin-action` }), jsx("div", { className: "table__header-content", children: children })] }));
+    return (jsxs("div", { className: "table__header-cell", "data-testid": `sticky-column-${position}`, children: [jsx(Button$1, { "data-testid": `sticky-header-pin-button-${position}`, variant: "link", size: "sm", iconLeft: "pin", onClick: () => onPinColumn === null || onPinColumn === void 0 ? void 0 : onPinColumn(`sticky-column-${position}`), ariaLabel: isPinned ? 'Unpin column' : 'Pin column', className: `table__column--${isPinned ? 'is-pinned' : 'is-not-pinned'} table__column__pin-action` }), jsx("div", { className: "table__header-content", children: children })] }));
 };
 
 const processColumns = (columns, pinnedColumnIds, togglePinnedColumn) => {
@@ -13826,7 +13826,7 @@ const defaultOptions$1 = {
     placement: 'bottom-start',
     middleware: [offset$2(5), flip$2(), shift$2()],
 };
-function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal = false, portalOptions = {}, floatingOptions = defaultOptions$1, className, hover = false, }) {
+function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: controlledSetIsOpen, isPortal = false, portalOptions = {}, floatingOptions = defaultOptions$1, className, hover = false, onOpenChange, }) {
     const [internalIsOpen, setInternalIsOpen] = useState(false);
     // Determine whether the component is controlled or uncontrolled
     const isControlled = controlledIsOpen !== undefined && controlledSetIsOpen !== undefined;
@@ -13842,13 +13842,18 @@ function FloatUI({ children, ariaLabel, isOpen: controlledIsOpen, setIsOpen: con
     if (!isValidElement(trigger) || !isValidElement(content)) {
         throw new Error('Both children of FloatUI must be valid React elements.');
     }
-    const { refs, floatingStyles, context } = useFloating(Object.assign(Object.assign({}, floatingOptions), { open: isOpen, onOpenChange: setIsOpen, elements: {
+    const { refs, floatingStyles, context } = useFloating(Object.assign(Object.assign({}, floatingOptions), { open: isOpen, onOpenChange: (isOpen) => {
+            setIsOpen(isOpen);
+            onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
+        }, elements: {
             reference: referenceElementRef.current,
         } }));
     // Can't call hooks conditionally so this enabled option is needed.
     const click = useClick(context, { enabled: !hover });
     const hoverHook = useHover(context, { enabled: hover });
-    const dismiss = useDismiss(context);
+    const dismiss = useDismiss(context, {
+        bubbles: true,
+    });
     const { getReferenceProps, getFloatingProps } = useInteractions([click, hoverHook, dismiss]);
     const tooltipContent = (jsx("div", Object.assign({ ref: refs.setFloating }, getFloatingProps(), { style: floatingStyles, role: "dialog", "aria-label": ariaLabel, className: `floatui-container ${className}`, children: jsx("div", { ref: floatUIContentRef, className: "floatui-content", children: content }) })));
     return (jsxs(Fragment, { children: [jsx("div", Object.assign({ ref: refs.setReference }, getReferenceProps(), { children: trigger })), isOpen &&