@ringcentral/spring-ui 1.11.2 → 1.13.0

package/Popover.js

@@ -1,21 +1,262 @@
-export { P as Popover } from './chunks/Popover.js';
-import 'react/jsx-runtime';
-import 'react';
-import '@floating-ui/react-dom';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
-import 'framer-motion';
-import './chunks/Icon.js';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/getGrow.js';
-import './chunks/Modal.js';
-import '@mui/base';
-import './chunks/getFade.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-import './Popper.js';
-import './chunks/PopperPaper.js';
-
-var Popover = {"sui-popover-popper":"sui-popover-popper","sui-popover-paper":"sui-popover-paper","sui-popover-widget":"sui-popover-widget","sui-popover-bordered":"sui-popover-bordered","sui-popover-shadow":"sui-popover-shadow"};
-
-export { Popover as popoverStyle };
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef } from "react";
+import { shift, size } from "@floating-ui/react-dom";
+import { combineProps, logInDev, useClasses, useForkRef } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
+import { getTransformOriginStringForPlacement, getGrow, getFade } from "./chunks/4476.js";
+import { Modal as Modal_Modal } from "./Modal.js";
+import { Popper } from "./Popper.js";
+import { PopperPaper as PopperPaper_PopperPaper } from "./PopperPaper.js";
+import { usePrefersReducedMotion } from "./chunks/1294.js";
+
+
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var Popover = ({"sui-popover-popper":"sui-popover-popper","sui-popover-paper":"sui-popover-paper","sui-popover-widget":"sui-popover-widget","sui-popover-bordered":"sui-popover-bordered","sui-popover-shadow":"sui-popover-shadow","sui-popover-paper-content-no-vertical-scroll":"sui-popover-paper-content-no-vertical-scroll"});
+
+
+
+
+
+
+
+
+
+
+/** Middleware name and its `middlewareData` key, which have to stay in sync. */ const DESIRED_CONTENT_HEIGHT = 'desiredContentHeight';
+const Popover_Popover = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    /** Internal-only extras; see `Popover.internal.ts`. */ const props = useThemeProps({
+        props: inProps,
+        name: 'Popover'
+    });
+    const { classes, className, children, PopperProps, variant = 'standard', bordered = false, shadow = true, transformOrigin, motionProps: motionPropsProp, popperRef, placement, open, disableBackdropAnimation, anchorEl, actions, maxHeight, onAvailableHeightChange, measureDesiredHeight, disableContentVerticalScroll = false, deferEnterAnimation = false, PopperPaperProps: popperPaperPropsProp, ...rest } = props;
+    const cls = useClasses('popover', classes, className);
+    const paperContentRef = useRef(null);
+    const handlePaperContentRef = useForkRef(popperPaperPropsProp?.contentRef, paperContentRef);
+    const prefersReducedMotion = usePrefersReducedMotion();
+    return /*#__PURE__*/ jsx(Modal_Modal, {
+        ...rest,
+        open: open,
+        className: cls('root', 'popper'),
+        ref: ref,
+        /**
+         * Pin the fade to `hidden` only while the consumer is still sizing itself,
+         * which is the one state Modal's own `toggle: open` cannot express. Handing
+         * back `null` afterwards restores Modal's default fade, so the animation
+         * plays from the settled size and nothing changes for other consumers.
+         */ motionProps: deferEnterAnimation ? getFade({
+            prefersReducedMotion,
+            toggle: false
+        }) : null,
+        /**
+         * A close that lands while the fade is still pinned has nothing to play:
+         * the popover was never shown, and the pinned state leaves framer-motion
+         * with no change to report, so waiting for the exit would keep the content
+         * in the DOM for good. Leave through Modal's no-animation path instead.
+         */ disableBackdropAnimation: disableBackdropAnimation || deferEnterAnimation && !open,
+        hideBackdrop: true,
+        children: /*#__PURE__*/ jsx(Popper, {
+            arrowHeight: variant === 'standard' ? 0 : 10,
+            arrowPadding: 12,
+            offset: variant === 'standard' ? 2 : 4,
+            ...combineProps({
+                tether: false,
+                middlewares: (presetMiddlewares)=>{
+                    /**
+                 * Popper presets: offset, flip, shift, arrow, optional match-anchor-width size.
+                 * Popover reorders them so alignment shift runs before its own `size`, and the
+                 * preset tether shift runs after `size` so cross-axis movement does not inflate
+                 * the clipping dimension `size` reports.
+                 *
+                 * Popper's match-anchor `size` stays in the trailing presets. When
+                 * `matchAnchorWidth` is on, Popover skips content `maxWidth`: floating
+                 * width already matches the anchor, and content should flow inside it
+                 * without a separate viewport-based width cap.
+                 */ const restMiddlewares = [
+                        ...presetMiddlewares
+                    ];
+                    const matchAnchorWidth = Boolean(PopperProps?.matchAnchorWidth);
+                    /** Pull named presets out; anything Popper adds later stays in `restMiddlewares`. */ const takePreset = (name)=>{
+                        const index = restMiddlewares.findIndex((middleware)=>middleware.name === name);
+                        if (index === -1) {
+                            if (process.env.NODE_ENV !== 'production') {
+                                logInDev({
+                                    scope: 'Popover',
+                                    message: `Popper preset middleware "${name}" was not found, so Popover cannot order it around its own \`size\` middleware.`
+                                });
+                            }
+                            return [];
+                        }
+                        return restMiddlewares.splice(index, 1);
+                    };
+                    const offsetMiddleware = takePreset('offset');
+                    const flipMiddleware = takePreset('flip');
+                    const tetherShiftMiddleware = takePreset('shift');
+                    const arrowMiddleware = takePreset('arrow');
+                    /**
+                 * Establish the height the content wants, ignoring the space the current
+                 * side happens to have, and publish it for `flip` and `size` to share.
+                 * `maxHeight` caps that demand: it is a height the consumer asked for,
+                 * unlike the viewport clamp, which only reflects the current side.
+                 *
+                 * `flip` decides from the rendered box, so the clamp `size` left behind on
+                 * the previous update would otherwise prove the current side still fits and
+                 * `bestFit` would never move the popper to the roomier side.
+                 *
+                 * One value, two sources: a consumer whose height lives outside the DOM
+                 * (virtualized list sized from state) restores and reports it through
+                 * `measureDesiredHeight`; anything else is measured from the DOM once the
+                 * viewport clamp is gone.
+                 *
+                 * Runs once per positioning pass. The guard lives in `middlewareData`, not a
+                 * ref: `size` may reset the chain after it clamps, and a ref would keep
+                 * clearing that clamp on every reset until Floating UI hits its reset limit
+                 * and stops with `y` out of sync with the final height.
+                 */ const desiredContentHeight = {
+                        name: DESIRED_CONTENT_HEIGHT,
+                        fn ({ middlewareData }) {
+                            if (middlewareData[DESIRED_CONTENT_HEIGHT]) {
+                                return {};
+                            }
+                            const content = paperContentRef.current;
+                            if (!content) {
+                                return {};
+                            }
+                            /** Drop the viewport clamp, but keep the cap the consumer asked for. */ const previousClamp = content.style.maxHeight;
+                            const consumerClamp = maxHeight !== undefined ? `${maxHeight}px` : '';
+                            content.style.maxHeight = consumerClamp;
+                            const reportedHeight = measureDesiredHeight?.();
+                            const measuredHeight = typeof reportedHeight === 'number' ? reportedHeight : content.scrollHeight;
+                            const height = maxHeight !== undefined ? Math.min(maxHeight, measuredHeight) : measuredHeight;
+                            const data = {
+                                height
+                            };
+                            return {
+                                data,
+                                /** Remeasure so `flip` sees the box at its desired size. */ ...previousClamp !== consumerClamp || reportedHeight !== undefined ? {
+                                    reset: {
+                                        rects: true
+                                    }
+                                } : undefined
+                            };
+                        }
+                    };
+                    return [
+                        ...offsetMiddleware,
+                        desiredContentHeight,
+                        ...flipMiddleware,
+                        shift({
+                            padding: PopperProps?.padding
+                        }),
+                        size({
+                            padding: PopperProps?.padding,
+                            apply ({ availableHeight, availableWidth, elements, middlewareData }) {
+                                const content = paperContentRef.current;
+                                if (!content) {
+                                    return;
+                                }
+                                /**
+                       * Available size is for the popper. Max size is applied to paper
+                       * content, so subtract the paper's extra size (border, etc.).
+                       */ const decorationHeight = elements.floating.offsetHeight - content.offsetHeight;
+                                const viewportMaxHeight = Math.max(0, availableHeight - decorationHeight);
+                                /**
+                       * Both caps guard the same box; use the smaller one so paper
+                       * content stays the only scroller.
+                       */ const contentMaxHeight = maxHeight !== undefined ? Math.min(viewportMaxHeight, maxHeight) : viewportMaxHeight;
+                                if (matchAnchorWidth) {
+                                    /**
+                         * Floating width already matches the anchor (Popper `size`).
+                         * Clear content `maxWidth` so paper content is not capped by a
+                         * separate viewport-based width; it flows inside the floating box.
+                         */ content.style.maxWidth = '';
+                                } else {
+                                    /**
+                         * Always set maxWidth. If we cleared it when content "fits", wrapping
+                         * would shrink `scrollWidth` to the cap, we would clear it, text would
+                         * unwrap, and it would flicker.
+                         */ const decorationWidth = elements.floating.offsetWidth - content.offsetWidth;
+                                    content.style.maxWidth = `${Math.max(0, availableWidth - decorationWidth)}px`;
+                                }
+                                /** Clamp against the height already resolved before `flip`. */ const desiredHeight = middlewareData[DESIRED_CONTENT_HEIGHT]?.height ?? content.scrollHeight;
+                                /** The consumer cap stays applied even where the viewport is roomier. */ content.style.maxHeight = maxHeight !== undefined || contentMaxHeight < desiredHeight ? `${contentMaxHeight}px` : '';
+                                /**
+                       * Height of a horizontal scrollbar, if any. Measured after the
+                       * width/height caps above so it matches this pass.
+                       * `offsetHeight - clientHeight` also includes vertical borders,
+                       * so subtract those (consumers can border this element via
+                       * `PopperPaperProps`).
+                       */ const { borderTopWidth, borderBottomWidth } = getComputedStyle(content);
+                                const borderY = (Number.parseFloat(borderTopWidth) || 0) + (Number.parseFloat(borderBottomWidth) || 0);
+                                const inlineScrollbarHeight = Math.max(0, content.offsetHeight - content.clientHeight - borderY);
+                                /**
+                       * Height left for content after decoration and that scrollbar.
+                       * Filling the full `maxHeight` would hide the last rows behind it.
+                       */ onAvailableHeightChange?.(Math.max(0, contentMaxHeight - inlineScrollbarHeight));
+                            }
+                        }),
+                        ...tetherShiftMiddleware,
+                        ...arrowMiddleware,
+                        ...restMiddlewares
+                    ];
+                }
+            }, PopperProps ?? {}, [
+                'middlewares'
+            ]),
+            className: cls('popper'),
+            disablePortal: true,
+            tabIndex: -1,
+            ref: popperRef,
+            placement: placement,
+            anchorEl: anchorEl,
+            actions: actions,
+            children: ({ arrowStyle, arrowRef, placement: computedPlacement })=>{
+                const motionProps = motionPropsProp ?? getGrow({
+                    transformOrigin,
+                    prefersReducedMotion
+                });
+                const popperPaperProps = {
+                    className: cls('paper', {
+                        bordered,
+                        shadow
+                    }),
+                    ...disableContentVerticalScroll ? {
+                        classes: {
+                            content: cls('paper-content-no-vertical-scroll')
+                        }
+                    } : {}
+                };
+                /**
+             * If no transform origin is set, determine the transform origin using
+             * the computed placement. This ensures the transition used for the
+             * grow animation is always faithful to where the Popover is positioned.
+             */ if (!transformOrigin) {
+                    popperPaperProps.style = {
+                        ...popperPaperProps.style,
+                        transformOrigin: getTransformOriginStringForPlacement({
+                            placement: computedPlacement
+                        })
+                    };
+                }
+                return /*#__PURE__*/ jsx(PopperPaper_PopperPaper, {
+                    arrowRef: arrowRef,
+                    arrowStyle: arrowStyle,
+                    ...combineProps(combineProps(motionProps, popperPaperProps), popperPaperPropsProp),
+                    contentRef: handlePaperContentRef,
+                    children: children
+                });
+            }
+        })
+    });
+});
+Popover_Popover.displayName = 'SuiPopover';
+
+
+
+
+
+
+export { Popover as popoverStyle, Popover_Popover as Popover };

package/Popper.js

@@ -1,100 +1,127 @@
-import { jsx } from 'react/jsx-runtime';
-import { flip, shift, limitShift, arrow, offset, size, useFloating, autoUpdate } from '@floating-ui/react-dom';
-import { useWindowContext, useForkRef } from '@ringcentral/spring-base';
-import { useThemeProps, useTheme } from '@ringcentral/spring-theme';
-import { forwardRef, useRef, useImperativeHandle, useLayoutEffect } from 'react';
-import { u as useModalContext } from './chunks/Modal.js';
-import { Portal } from '@mui/base';
-import 'framer-motion';
-import './chunks/Icon.js';
-import './chunks/usePrefersReducedMotion.js';
-import './chunks/getFade.js';
-import './chunks/useFocusTrapStack.js';
-import './chunks/Backdrop.js';
-
-const getArrowSide = (placement) => ({
-    top: 'bottom',
-    right: 'left',
-    bottom: 'top',
-    left: 'right',
-})[placement.split('-')[0]];
-const Popper = forwardRef((inProps, ref) => {
-    const props = useThemeProps({ props: inProps, name: 'Popper' });
-    const { children: childrenProp, middlewares: middlewaresProp = [], placement: placementProp, anchorEl, arrowHeight = 0, offset: offset$1 = 0, padding = 0, arrowPadding = 0, style, actions, autoUpdate: autoUpdate$1 = true, whileElementsMounted, matchAnchorWidth, container: containerProp, disablePortal, ...rest } = props;
+import { jsx } from "react/jsx-runtime";
+import { arrow, autoUpdate as react_dom_autoUpdate, flip, limitShift, offset as react_dom_offset, shift, size, useFloating } from "@floating-ui/react-dom";
+import { useForkRef, useWindowContext } from "@ringcentral/spring-base";
+import { useTheme, useThemeProps } from "@ringcentral/spring-theme";
+import { forwardRef, useImperativeHandle, useLayoutEffect, useRef } from "react";
+import { useModalContext, useOverlayBranch } from "./Modal.js";
+import { Portal } from "./Portal.js";
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const getArrowSide = (placement)=>({
+        top: 'bottom',
+        right: 'left',
+        bottom: 'top',
+        left: 'right'
+    })[placement.split('-')[0]];
+const Popper = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'Popper'
+    });
+    const { children: childrenProp, middlewares: middlewaresProp = [], placement: placementProp, anchorEl, arrowHeight = 0, offset = 0, padding = 0, arrowPadding = 0, style, actions, autoUpdate = true, whileElementsMounted, matchAnchorWidth, tether = true, container: containerProp, disablePortal, ...rest } = props;
     const { externalWindow, document } = useWindowContext();
     const container = containerProp ?? document?.body;
     const { scopeProps } = useTheme();
     const modalContext = useModalContext();
+    const overlayBranchRegistry = modalContext?.overlayBranchRegistry;
     const finalDisablePortal = disablePortal ?? (modalContext?.ariaHideEnabled ? true : false);
+    const overlayBranchRef = useOverlayBranch({
+        active: !finalDisablePortal,
+        registry: overlayBranchRegistry
+    });
     const arrowRef = useRef(null);
     const presetMiddlewares = [
-        flip({ padding }),
+        react_dom_offset(offset + arrowHeight),
+        flip({
+            padding
+        }),
         shift({
-            limiter: limitShift(),
-            padding,
+            // tether: limitShift on alignment axis. Untethered: also shift crossAxis.
+            ...tether ? {
+                limiter: limitShift()
+            } : {
+                crossAxis: true
+            },
+            padding
         }),
         arrow({
             element: arrowRef,
-            padding: arrowPadding,
-        }),
-        offset(offset$1 + arrowHeight),
+            padding: arrowPadding
+        })
     ];
     if (matchAnchorWidth) {
         presetMiddlewares.push(size({
-            apply({ rects, elements, }) {
+            apply ({ rects, elements }) {
                 Object.assign(elements.floating.style, {
-                    width: `${rects.reference.width}px`,
+                    boxSizing: 'border-box',
+                    width: `${rects.reference.width}px`
                 });
-            },
+            }
         }));
     }
-    const middlewares = typeof middlewaresProp === 'function'
-        ? middlewaresProp(presetMiddlewares)
-        : [...presetMiddlewares, ...middlewaresProp];
-    const { x, y, refs: { setReference, setFloating }, strategy, placement, update, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} }, } = useFloating({
+    const middlewares = typeof middlewaresProp === 'function' ? middlewaresProp(presetMiddlewares) : [
+        ...presetMiddlewares,
+        ...middlewaresProp
+    ];
+    const { x, y, refs: { setReference, setFloating }, strategy, placement, update, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} } } = useFloating({
         placement: placementProp,
         middleware: middlewares,
-        whileElementsMounted: (reference, floating, update) => {
+        whileElementsMounted: (reference, floating, update)=>{
             const dispose = whileElementsMounted?.(reference, floating, update);
-            const disposeAutoUpdate = (() => {
-                if (autoUpdate$1 === false) {
-                    return;
-                }
-                if (autoUpdate$1 === true) {
-                    return autoUpdate(reference, floating, update, {
-                        ancestorResize: true,
-                        ancestorScroll: true,
-                        animationFrame: false,
-                        elementResize: Boolean(matchAnchorWidth),
-                    });
-                }
-                return autoUpdate(reference, floating, update, autoUpdate$1);
-            })();
-            return () => {
+            /**
+         * `true` passes no options so floating-ui keeps its defaults, including
+         * skipping ResizeObserver / IntersectionObserver when they are missing (jsdom).
+         */ const disposeAutoUpdate = autoUpdate === false ? undefined : react_dom_autoUpdate(reference, floating, update, autoUpdate === true ? undefined : autoUpdate);
+            return ()=>{
                 disposeAutoUpdate?.();
                 dispose?.();
             };
-        },
+        }
     });
-    useImperativeHandle(actions, () => ({ update }), [update]);
+    useImperativeHandle(actions, ()=>({
+            update
+        }), [
+        update
+    ]);
     const handleRootRef = useForkRef(ref, setFloating);
-    useLayoutEffect(() => {
-        if (anchorEl) {
-            const anchor = typeof anchorEl === 'function' ? anchorEl() : anchorEl;
-            setReference(anchor);
-        }
-        else {
+    useLayoutEffect(()=>{
+        if (!anchorEl) {
             setReference(null);
+            return undefined;
         }
-    }, [setReference, anchorEl]);
+        const anchor = typeof anchorEl === 'function' ? anchorEl() : anchorEl;
+        setReference(anchor);
+        return ()=>{
+            setReference(null);
+        };
+    }, [
+        setReference,
+        anchorEl
+    ]);
     const arrowSide = getArrowSide(placement);
-    const children = (() => {
-        if (typeof childrenProp !== 'function')
-            return childrenProp;
-        if (!arrowHeight)
-            childrenProp({ placement, arrowRef, arrowStyle: {} });
+    const renderChildren = ()=>{
+        if (typeof childrenProp !== 'function') return childrenProp;
+        if (!arrowHeight) {
+            return childrenProp({
+                placement,
+                arrowRef,
+                arrowStyle: {}
+            });
+        }
         const squareSideLength = Math.round(((arrowHeight * 2) ** 2 / 2) ** (1 / 2));
-        return childrenProp({
+        const childrenRenderProps = {
             placement,
             arrowRef,
             arrowStyle: {
@@ -102,25 +129,51 @@ const Popper = forwardRef((inProps, ref) => {
                 height: squareSideLength,
                 top: arrowY,
                 left: arrowX,
-                [arrowSide]: -squareSideLength / 2,
-            },
-        });
-    })();
+                [arrowSide]: -squareSideLength / 2
+            }
+        };
+        return childrenProp(childrenRenderProps);
+    };
+    const children = renderChildren();
     const dpr = externalWindow?.devicePixelRatio ?? 1;
     const fixedX = Math.round(Number(x ?? 0) * dpr) / dpr;
     const fixedY = Math.round(Number(y ?? 0) * dpr) / dpr;
-    return (jsx(Portal, { container: container, disablePortal: finalDisablePortal, children: jsx("div", { ...scopeProps, style: { display: 'contents' }, children: jsx("div", { ...rest, "data-sui-popper-placement": placement, ref: handleRootRef, style: {
-                    ...(arrowHeight
-                        ? { minWidth: (arrowHeight + arrowPadding) * 2 }
-                        : undefined),
+    return /*#__PURE__*/ jsx(Portal, {
+        container: container,
+        disablePortal: finalDisablePortal,
+        children: /*#__PURE__*/ jsx("div", {
+            ref: overlayBranchRef,
+            ...scopeProps,
+            style: {
+                display: 'contents'
+            },
+            children: /*#__PURE__*/ jsx("div", {
+                ...rest,
+                "data-sui-popper-placement": placement,
+                ref: handleRootRef,
+                style: {
+                    /* prevent arrow overflow when content too small */ ...arrowHeight ? {
+                        minWidth: (arrowHeight + arrowPadding) * 2
+                    } : undefined,
                     ...style,
                     position: strategy,
                     top: '0',
                     left: '0',
                     transform: `translate3d(${fixedX}px,${fixedY}px,0)`,
-                    width: 'max-content',
-                }, children: children }) }) }));
+                    // matchAnchorWidth: width is set by size middleware, not inline style.
+                    ...matchAnchorWidth ? undefined : {
+                        width: 'max-content'
+                    }
+                },
+                children: children
+            })
+        })
+    });
 });
 Popper.displayName = 'SuiPopper';
 
+
+
+
+
 export { Popper };

package/PopperPaper.js

@@ -1,10 +1,56 @@
-export { P as PopperPaper } from './chunks/PopperPaper.js';
-import 'react/jsx-runtime';
-import 'react';
-import 'framer-motion';
-import '@ringcentral/spring-base';
-import '@ringcentral/spring-theme';
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { motion } from "framer-motion";
+import { useClasses } from "@ringcentral/spring-base";
+import { useThemeProps } from "@ringcentral/spring-theme";
 
-var PopperPaper = {"sui-popper-paper-root":"sui-popper-paper-root","sui-popper-paper-arrow":"sui-popper-paper-arrow","sui-popper":"sui-popper","sui-popper-paper-content":"sui-popper-paper-content"};
 
-export { PopperPaper as popperPaperStyle };
+
+
+
+
+// extracted by css-extract-rspack-plugin
+/* export default */ var PopperPaper = ({"sui-popper-paper-root":"sui-popper-paper-root","sui-popper-paper-arrow":"sui-popper-paper-arrow","sui-popper":"sui-popper","sui-popper-paper-content":"sui-popper-paper-content"});
+
+
+
+
+
+
+const PopperPaper_PopperPaper = /*#__PURE__*/ forwardRef((inProps, ref)=>{
+    const props = useThemeProps({
+        props: inProps,
+        name: 'PopperPaper'
+    });
+    const { classes, className, children, arrowRef, arrowStyle, contentRef, ...rest } = props;
+    const cls = useClasses('popper-paper', classes, className);
+    /**
+   * Popper passes `{}` when `arrowHeight` is 0 ("not show arrow"). Rendering the
+   * empty arrow node still inherits paper border and can show a 1px corner dot.
+   */ const showArrow = Object.keys(arrowStyle).length > 0;
+    return /*#__PURE__*/ jsxs(motion.div, {
+        className: cls('root'),
+        ...rest,
+        ref: ref,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                ref: contentRef,
+                className: cls('content'),
+                children: children
+            }),
+            showArrow ? /*#__PURE__*/ jsx("div", {
+                className: cls('arrow'),
+                ref: arrowRef,
+                style: arrowStyle
+            }) : null
+        ]
+    });
+});
+PopperPaper_PopperPaper.displayName = 'SuiPopperPaper';
+
+
+
+
+
+
+export { PopperPaper as popperPaperStyle, PopperPaper_PopperPaper as PopperPaper };

package/Portal.js

@@ -1 +1,6 @@
-export { Portal } from '@mui/base';
+
+
+
+
+
+export { Portal } from "@mui/base";