@parrot-co/parrot-ui 0.0.89 → 0.0.91

package/dist/main.js

@@ -25,10 +25,13 @@ $parcel$export(module.exports, "IconButton", () => $3af04cd154cf4de1$export$c25a
 $parcel$export(module.exports, "ButtonGroup", () => $7f70742e736041ff$export$69b1032f2ecdf404);
 $parcel$export(module.exports, "Checkbox", () => $f88e10ca2ba68239$export$48513f6b9f8ce62d);
 $parcel$export(module.exports, "CheckboxGroup", () => $0f8ef6f4acac1766$export$4aa08d5625cb8ead);
+$parcel$export(module.exports, "DropdownMenu", () => $3b903582a5253460$export$e44a253a59704894);
 $parcel$export(module.exports, "Radio", () => $e158c5cf7e190200$export$d7b12c4107be0d61);
 $parcel$export(module.exports, "RadioGroup", () => $e158c5cf7e190200$export$a98f0dcb43a68a25);
 $parcel$export(module.exports, "RadioCard", () => $71fcf48f7e2e9427$export$f8afaea2e9656b91);
 $parcel$export(module.exports, "Select", () => $e37831ebf64d8e7d$export$ef9b1a59e592288f);
+$parcel$export(module.exports, "Option", () => $dcfc4542aa84c062$export$36d18380658d5d20);
+$parcel$export(module.exports, "Section", () => $dcfc4542aa84c062$export$6e2c8f0811a474ce);
 $parcel$export(module.exports, "DateInput", () => $e0a58c83d4c36e4e$export$7edc06cf1783b30f);
 $parcel$export(module.exports, "Calendar", () => $284d30e280d297d3$export$e1aef45b828286de);
 $parcel$export(module.exports, "Avatar", () => $2fdd5844efb4cca1$export$e2255cf6045e8d47);
@@ -130,7 +133,7 @@ function $62f1c614c0962470$export$c9058316764c140e(...refs) {
 }
 
 
-const $eb8f27c3596a0e6b$export$e71c4d32a2263218 = /*#__PURE__*/ $8zHUo$react.forwardRef(({ stretchX: stretchX, stretchY: stretchY, stretchXY: stretchXY, children: children, className: className, position: position, as: as = "div", ...props }, ref)=>{
+const $eb8f27c3596a0e6b$export$23c260ee8e4dfaad = ({ stretchX: stretchX, stretchY: stretchY, stretchXY: stretchXY, children: children, className: className, position: position, as: as = "div", ...props }, ref)=>{
     const Comp = as;
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)(Comp, {
         className: (0, $62f1c614c0962470$export$a274e22fb40f762e)({
@@ -144,8 +147,9 @@ const $eb8f27c3596a0e6b$export$e71c4d32a2263218 = /*#__PURE__*/ $8zHUo$react.for
         ...props,
         children: children
     });
-});
-$eb8f27c3596a0e6b$export$e71c4d32a2263218.displayName = "Box";
+};
+$eb8f27c3596a0e6b$export$23c260ee8e4dfaad.displayName = "Box";
+const $eb8f27c3596a0e6b$export$e71c4d32a2263218 = /*#__PURE__*/ $8zHUo$react.forwardRef($eb8f27c3596a0e6b$export$23c260ee8e4dfaad);
 
 
 
@@ -195,7 +199,7 @@ $df66c26cdcece32b$export$9eb849b9b922d396.displayName = "GridItem";
 
 
 
-const $c3a954a7c0cb5109$export$f51f4c4ede09e011 = /*#__PURE__*/ $8zHUo$react.forwardRef((props, ref)=>{
+const $c3a954a7c0cb5109$export$21ee1313e2afe36c = (props, ref)=>{
     const { justify: justify, align: align, direction: direction, gap: gap = "sm", columnGap: columnGap, rowGap: rowGap, inline: inline, wrap: wrap, stack: stack, className: className, ...otherProps } = props;
     const getDirection = $8zHUo$react.useCallback(()=>{
         if (stack) return "column";
@@ -216,12 +220,14 @@ const $c3a954a7c0cb5109$export$f51f4c4ede09e011 = /*#__PURE__*/ $8zHUo$react.for
             [`row-gap-${rowGap}`]: !!rowGap,
             [`flex-${wrap}`]: !!wrap
         }),
+        // TODO - Fix types here - seems to work just fine though
         ref: ref,
         ...otherProps,
         children: props.children
     });
-});
-$c3a954a7c0cb5109$export$f51f4c4ede09e011.displayName = "Flex";
+};
+$c3a954a7c0cb5109$export$21ee1313e2afe36c.displayName = "Flex";
+const $c3a954a7c0cb5109$export$f51f4c4ede09e011 = /*#__PURE__*/ $8zHUo$react.forwardRef($c3a954a7c0cb5109$export$21ee1313e2afe36c);
 
 
 
@@ -386,7 +392,7 @@ function $f2fd0cbe11b7f0dd$export$93d4e7f90805808f(options) {
 
 
 
-const $d9ffc65197682590$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).forwardRef(({ label: label, error: error, color: color = "gray", appearance: appearance = "outline", size: size = "sm", append: append, prepend: prepend, description: description, isDisabled: isDisabled, validationStatus: validationStatus, className: className, inputRef: inputRef, radius: radius, ...props }, ref)=>{
+const $d9ffc65197682590$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).forwardRef(({ label: label, error: error, color: color = "gray", appearance: appearance = "outline", size: size = "sm", append: append, prepend: prepend, description: description, isDisabled: isDisabled, validationStatus: validationStatus, className: className, inputRef: inputRef, radius: radius, style: style, ...props }, ref)=>{
     const space = (0, $eae337549f49a5a2$export$450c36e0b0e62ccd)();
     const internalInputRef = (0, ($parcel$interopDefault($8zHUo$react))).useRef(null);
     const { labelProps: labelProps, inputProps: inputProps, errorMessageProps: errorMessageProps, descriptionProps: descriptionProps } = (0, $8zHUo$reactaria.useTextField)({
@@ -406,6 +412,7 @@ const $d9ffc65197682590$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, ($parcel$int
         ref: ref,
         gap: "3xs",
         stretchX: true,
+        style: style,
         children: [
             label && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $5a5b41d120374960$export$2e2bcd8739ae039), {
                 color: color,
@@ -620,6 +627,7 @@ const $5a6f28f3fd58ff6e$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, ($parcel$int
         "data-size": size,
         className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(className, "p-button", space.classNames),
         ref: (0, $62f1c614c0962470$export$c9058316764c140e)(ref, buttonRef),
+        form: otherProps.form,
         ...buttonProps,
         children: [
             prepend,
@@ -989,6 +997,212 @@ $f88e10ca2ba68239$export$48513f6b9f8ce62d.displayName = "checkbox";
 
 
 
+
+
+function $0f347092d3465402$export$5b6b19405a83ff9d({ state: state, children: children, popoverRef: popoverRef, ...props }) {
+    const internalPopoverRef = $8zHUo$react.useRef(null);
+    const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
+    const { popoverProps: popoverProps, underlayProps: underlayProps } = (0, $8zHUo$reactaria.usePopover)({
+        ...props,
+        popoverRef: internalPopoverRef
+    }, state);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $8zHUo$reactaria.Overlay), {
+        children: [
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+                ...underlayProps,
+                className: "underlay"
+            }),
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
+                "data-color": theme?.color,
+                "data-radius": theme?.radius,
+                ...popoverProps,
+                ref: (0, $62f1c614c0962470$export$c9058316764c140e)(popoverRef, internalPopoverRef),
+                className: "p-popover",
+                children: children
+            })
+        ]
+    });
+}
+
+
+
+
+
+
+const $724eace27ebf345b$var$DropdownContext = /*#__PURE__*/ $8zHUo$react.createContext(null);
+function $724eace27ebf345b$export$e44a253a59704894({ children: children, ...props }) {
+    const triggerRef = $8zHUo$react.useRef(null);
+    const triggerState = (0, $8zHUo$reactstately.useMenuTriggerState)(props);
+    const { menuProps: menuProps, menuTriggerProps: triggerProps } = (0, $8zHUo$reactaria.useMenuTrigger)(props, triggerState, triggerRef);
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($724eace27ebf345b$var$DropdownContext.Provider, {
+        value: {
+            triggerRef: triggerRef,
+            triggerState: triggerState,
+            triggerProps: triggerProps,
+            menuProps: menuProps
+        },
+        children: children
+    });
+}
+function $724eace27ebf345b$export$e7eb525bc415b4b4({ asChild: asChild, children: children, useClickEvent: useClickEvent }) {
+    const ctx = $8zHUo$react.useContext($724eace27ebf345b$var$DropdownContext);
+    const { pressProps: pressProps, isPressed: isPressed } = (0, $8zHUo$reactaria.usePress)({
+        ...ctx?.triggerProps,
+        ref: ctx?.triggerRef
+    });
+    const triggerProps = useClickEvent ? pressProps : ctx?.triggerProps;
+    if (asChild) {
+        const child = $8zHUo$react.Children.only(children);
+        return /*#__PURE__*/ $8zHUo$react.cloneElement(child, {
+            ...triggerProps,
+            ref: ctx?.triggerRef,
+            "data-pressed": isPressed
+        });
+    }
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $5a6f28f3fd58ff6e$export$353f5b6fc5456de1), {
+        ...ctx?.triggerProps,
+        ref: ctx?.triggerRef,
+        children: children
+    });
+}
+function $724eace27ebf345b$export$d9b273488cd8ce6f(props) {
+    const ctx = $8zHUo$react.useContext($724eace27ebf345b$var$DropdownContext);
+    if (!ctx?.triggerState.isOpen) return null;
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $0f347092d3465402$export$5b6b19405a83ff9d), {
+        placement: "bottom start",
+        offset: 8,
+        state: ctx?.triggerState,
+        triggerRef: ctx?.triggerRef,
+        children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($724eace27ebf345b$var$MenuInner, {
+            ...(0, $8zHUo$reactaria.mergeProps)(props, ctx.menuProps)
+        })
+    });
+}
+function $724eace27ebf345b$var$MenuInner({ menuHeader: menuHeader, menuFooter: menuFooter, ...props }) {
+    const state = (0, $8zHUo$reactstately.useTreeState)(props);
+    const ref = $8zHUo$react.useRef(null);
+    const { menuProps: menuProps } = (0, $8zHUo$reactaria.useMenu)({
+        ...props,
+        autoFocus: true,
+        isVirtualized: true
+    }, state, ref);
+    const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
+    function resolvedMenuHeader() {
+        if (typeof menuHeader === "function") return menuHeader();
+        return menuHeader;
+    }
+    function resolvedMenuFooter() {
+        if (typeof menuFooter === "function") return menuFooter();
+        return menuFooter;
+    }
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+        stack: true,
+        ref: ref,
+        ...menuProps,
+        "data-color": theme?.color ?? "violet",
+        "data-radius": theme?.radius ?? "lg",
+        className: "p-list-box-wrapper",
+        children: [
+            resolvedMenuHeader(),
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("ul", {
+                children: [
+                    ...state.collection
+                ].map((item)=>{
+                    if (item.type === "section") return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($724eace27ebf345b$var$MenuSectionInner, {
+                        state: state,
+                        section: item
+                    }, item.key);
+                    return /*#__PURE__*/ (0, $8zHUo$react.createElement)($724eace27ebf345b$var$MenuItemInner, {
+                        ...item.props,
+                        state: state,
+                        item: item,
+                        key: item.key
+                    });
+                })
+            }),
+            resolvedMenuFooter()
+        ]
+    });
+}
+function $724eace27ebf345b$var$MenuItemInner({ state: state, item: item, ...otherProps }) {
+    const ref = $8zHUo$react.useRef(null);
+    const { menuItemProps: menuItemProps, isSelected: isSelected, isFocused: isFocused, isPressed: isPressed, isDisabled: isDisabled } = (0, $8zHUo$reactaria.useMenuItem)({
+        key: item?.key
+    }, state, ref);
+    const { className: className, style: style, isReadOnly: isReadOnly } = otherProps;
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("li", {
+        ref: ref,
+        className: (0, $62f1c614c0962470$export$a274e22fb40f762e)(className, "p-list-option"),
+        "data-selected": isSelected,
+        "data-focused": isFocused,
+        "data-pressed": isPressed,
+        "data-disabled": isDisabled,
+        "data-readonly": isReadOnly,
+        style: style,
+        ...menuItemProps,
+        children: item.rendered
+    });
+}
+function $724eace27ebf345b$var$MenuSectionInner({ state: state, section: section }) {
+    const { itemProps: itemProps, headingProps: headingProps, groupProps: groupProps } = (0, $8zHUo$reactaria.useMenuSection)({
+        heading: section?.rendered,
+        "aria-label": section?.["aria-label"]
+    });
+    const { separatorProps: separatorProps } = (0, $8zHUo$reactaria.useSeparator)({
+        elementType: "li"
+    });
+    function getChildren() {
+        if (state?.collection.getChildren) return [
+            ...state.collection.getChildren(section.key)
+        ];
+        return [];
+    }
+    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
+        className: "p-list-section",
+        children: [
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("li", {
+                className: "p-list-separator",
+                ...separatorProps
+            }),
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("li", {
+                ...itemProps,
+                children: section?.rendered && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("span", {
+                    ...headingProps,
+                    children: section?.rendered
+                })
+            }),
+            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("ul", {
+                ...groupProps,
+                children: getChildren().map((item)=>{
+                    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)($724eace27ebf345b$var$MenuItemInner, {
+                        state: state,
+                        item: item
+                    }, item.key);
+                })
+            })
+        ]
+    });
+}
+const $724eace27ebf345b$export$2ce376c2cc3355c8 = (0, $8zHUo$reactstately.Item);
+const $724eace27ebf345b$export$4b1545b4f2016d26 = (0, $8zHUo$reactstately.Section);
+
+
+(0, $724eace27ebf345b$export$e44a253a59704894).Menu = (0, $724eace27ebf345b$export$d9b273488cd8ce6f);
+(0, $724eace27ebf345b$export$e44a253a59704894).Trigger = (0, $724eace27ebf345b$export$e7eb525bc415b4b4);
+(0, $724eace27ebf345b$export$e44a253a59704894).Item = (0, $724eace27ebf345b$export$2ce376c2cc3355c8);
+(0, $724eace27ebf345b$export$e44a253a59704894).Section = (0, $724eace27ebf345b$export$4b1545b4f2016d26);
+const $3b903582a5253460$export$e44a253a59704894 = (0, $724eace27ebf345b$export$e44a253a59704894);
+
+
+
+
+
+
+
+
+
+
+
 const $e158c5cf7e190200$export$b118023277d4a5c3 = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).createContext(null);
 const $e158c5cf7e190200$export$d7b12c4107be0d61 = /*#__PURE__*/ (0, ($parcel$interopDefault($8zHUo$react))).forwardRef((props, ref)=>{
     const state = (0, ($parcel$interopDefault($8zHUo$react))).useContext($e158c5cf7e190200$export$b118023277d4a5c3);
@@ -1143,6 +1357,7 @@ function $fc43ab93aaa777d9$export$3d7d0414f6db67e7({ children: children, renderO
         const label = item?.[labelKey ?? "label"];
         const value = item?.[valueKey ?? "id"];
         const sectionChildren = item?.[sectionKey ?? "children"] ?? [];
+        console.log(label, "label");
         if (item?.[sectionKey]) return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $dcfc4542aa84c062$export$6e2c8f0811a474ce), {
             items: sectionChildren,
             title: getSectionLabel?.(item),
@@ -1180,14 +1395,15 @@ function $71edc9998a9f3b41$export$961f16f221737ce2() {
 
 
 
-function $dcfc4542aa84c062$export$41f133550aa26f48({ state: state, color: color, width: width = 300, showSelectedMarker: showSelectedMarker = true, ...props }) {
+
+function $dcfc4542aa84c062$export$41f133550aa26f48({ state: state, color: color, width: width = 300, showSelectedMarker: showSelectedMarker = true, listBoxRef: listBoxRef, ...props }) {
     const internalState = (0, $8zHUo$reactstately.useListState)({
         ...props,
         children: (0, $fc43ab93aaa777d9$export$3d7d0414f6db67e7)(props)
     });
     const listRef = $8zHUo$react.useRef(null);
     const listState = state || internalState;
-    const { listBoxProps: listBoxProps, labelProps: labelProps } = (0, $8zHUo$reactaria.useListBox)(props, listState, listRef);
+    const { listBoxProps: listBoxProps } = (0, $8zHUo$reactaria.useListBox)(props, listState, listRef);
     const options = [
         ...listState.collection
     ];
@@ -1208,7 +1424,7 @@ function $dcfc4542aa84c062$export$41f133550aa26f48({ state: state, color: color,
                 stack: true,
                 gap: "none",
                 className: "p-list-box-wrapper",
-                ref: listRef,
+                ref: (0, $62f1c614c0962470$export$c9058316764c140e)(listRef, listBoxRef),
                 "data-radius": "lg",
                 ...listBoxProps,
                 children: [
@@ -1428,38 +1644,8 @@ $cfadb0728cf907ff$export$3288d34c523a1192.displayName = "Tag";
 
 
 
-function $0f347092d3465402$export$5b6b19405a83ff9d({ state: state, children: children, ...props }) {
-    const popoverRef = $8zHUo$react.useRef(null);
-    const theme = (0, $f2fd0cbe11b7f0dd$export$93d4e7f90805808f)();
-    const { popoverProps: popoverProps, underlayProps: underlayProps } = (0, $8zHUo$reactaria.usePopover)({
-        ...props,
-        popoverRef: popoverRef
-    }, state);
-    return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $8zHUo$reactaria.Overlay), {
-        children: [
-            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
-                ...underlayProps,
-                className: "underlay"
-            }),
-            /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
-                "data-color": theme?.color,
-                "data-radius": theme?.radius,
-                ...popoverProps,
-                ref: popoverRef,
-                className: "p-popover",
-                children: children
-            })
-        ]
-    });
-}
-
-
-
-
-
-
 
-function $e37831ebf64d8e7d$export$ef9b1a59e592288f({ label: label, selectionMode: selectionMode = "single", appearance: appearance = "outline", append: append, prepend: prepend, renderValue: renderValue, color: color = "gray", error: error, description: description, size: size = "sm", radius: radius, listBoxColor: listBoxColor, className: className, value: value, defaultValue: defaultValue, onChange: onChange, ...props }) {
+function $e37831ebf64d8e7d$export$ef9b1a59e592288f({ label: label, selectionMode: selectionMode = "single", appearance: appearance = "outline", renderValue: renderValue, color: color = "gray", error: error, description: description, size: size = "sm", radius: radius, listBoxColor: listBoxColor, className: className, value: value, defaultValue: defaultValue, onChange: onChange, ...props }) {
     const isMultiple = selectionMode === "multiple";
     function getValue(value) {
         if (!value) return null;
@@ -1519,7 +1705,6 @@ function $e37831ebf64d8e7d$export$ef9b1a59e592288f({ label: label, selectionMode
                     children: item?.textValue
                 }, item?.key))
         });
-        console.log(selectedItems);
         return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
             variant: "default",
             color: color === "gray" ? "black" : color,
@@ -1551,7 +1736,7 @@ function $e37831ebf64d8e7d$export$ef9b1a59e592288f({ label: label, selectionMode
             }),
             /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
                 "data-radius": radius ?? theme?.radius ?? "lg",
-                gap: "2xs",
+                gap: "3xs",
                 stack: true,
                 className: (0, $62f1c614c0962470$export$a274e22fb40f762e)("p-input-group", className, space.compactItemWrapperAdjust),
                 "data-size": size,
@@ -1577,6 +1762,16 @@ function $e37831ebf64d8e7d$export$ef9b1a59e592288f({ label: label, selectionMode
                                 size: 18
                             })
                         ]
+                    }),
+                    error && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $4b54f76a59afa8a5$export$2e2bcd8739ae039), {
+                        children: error
+                    }),
+                    description && /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $88fa102d91bf323a$export$5f1af8db9871e1d6), {
+                        as: "div",
+                        variant: "light",
+                        color: "gray",
+                        size: "sm",
+                        children: description
                     })
                 ]
             }),
@@ -1615,6 +1810,7 @@ function $e37831ebf64d8e7d$export$ef9b1a59e592288f({ label: label, selectionMode
 
 
 
+
 function $5a757815ed1b91e3$var$createCalendar() {
     return new (0, $8zHUo$internationalizeddate.GregorianCalendar)();
 }
@@ -1724,7 +1920,7 @@ const $284d30e280d297d3$export$e1aef45b828286de = /*#__PURE__*/ $8zHUo$react.for
     });
     const { calendarProps: calendarProps, prevButtonProps: prevButtonProps, nextButtonProps: nextButtonProps, title: title } = (0, $8zHUo$reactaria.useCalendar)(props, state);
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsxs)((0, $c3a954a7c0cb5109$export$f51f4c4ede09e011), {
-        color: color,
+        "data-color": color,
         inline: true,
         gap: "xs",
         direction: "column",
@@ -2558,8 +2754,9 @@ function $9ff025417b0a683c$export$e6a97ba2cae5bb94({ items: items, render: rende
 
 function $1278141024f0bc4d$export$c6fdb837b070b4ff({ children: children, state: state, ...props }) {
     const modalRef = $8zHUo$react.useRef(null);
-    const { modalProps: modalProps, underlayProps: underlayProps } = (0, $8zHUo$reactaria.useModalOverlay)(props, state, modalRef);
-    if (!state.isOpen) return null;
+    const { modalProps: modalProps, underlayProps: underlayProps } = (0, $8zHUo$reactaria.useModalOverlay)(props, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    state, modalRef);
+    if (!state?.isOpen) return null;
     return /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)((0, $8zHUo$reactaria.Overlay), {
         children: /*#__PURE__*/ (0, $8zHUo$reactjsxruntime.jsx)("div", {
             className: "p-modal-underlay",