@tamagui/dialog 1.0.1-beta.151 → 1.0.1-beta.154

package/dist/esm/Dialog.js

@@ -1,3 +1,4 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence } from "@tamagui/animate-presence";
 import { hideOthers } from "@tamagui/aria-hidden";
 import { useComposedRefs } from "@tamagui/compose-refs";
@@ -30,21 +31,23 @@ const TRIGGER_NAME = "DialogTrigger";
 const DialogTriggerFrame = styled(YStack, {
   name: TRIGGER_NAME
 });
-const DialogTrigger = React.forwardRef((props, forwardedRef) => {
-  const { __scopeDialog, ...triggerProps } = props;
-  const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
-  const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
-  return /* @__PURE__ */ React.createElement(DialogTriggerFrame, {
-    tag: "button",
-    "aria-haspopup": "dialog",
-    "aria-expanded": context.open,
-    "aria-controls": context.contentId,
-    "data-state": getState(context.open),
-    ...triggerProps,
-    ref: composedTriggerRef,
-    onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
-  });
-});
+const DialogTrigger = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...triggerProps } = props;
+    const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
+    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+    return /* @__PURE__ */ jsx(DialogTriggerFrame, {
+      tag: "button",
+      "aria-haspopup": "dialog",
+      "aria-expanded": context.open,
+      "aria-controls": context.contentId,
+      "data-state": getState(context.open),
+      ...triggerProps,
+      ref: composedTriggerRef,
+      onPress: composeEventHandlers(props.onPress, context.onOpenToggle)
+    });
+  }
+);
 DialogTrigger.displayName = TRIGGER_NAME;
 const PORTAL_NAME = "DialogPortal";
 const [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
@@ -59,29 +62,39 @@ const DialogPortalFrame = styled(YStack, {
     maxHeight: "100vh"
   }
 });
-const DialogPortal = DialogPortalFrame.extractable((props) => {
-  const { __scopeDialog, forceMount, children, ...frameProps } = props;
-  const themeName = useThemeName();
-  const context = useDialogContext(PORTAL_NAME, __scopeDialog);
-  const isShowing = forceMount || context.open;
-  const contents = /* @__PURE__ */ React.createElement(AnimatePresence, null, isShowing ? children : null);
-  const isSheet = useShowDialogSheet(context);
-  if (!context.modal || isSheet) {
-    return contents;
+const DialogPortal = DialogPortalFrame.extractable(
+  (props) => {
+    const { __scopeDialog, forceMount, children, ...frameProps } = props;
+    const themeName = useThemeName();
+    const context = useDialogContext(PORTAL_NAME, __scopeDialog);
+    const isShowing = forceMount || context.open;
+    const contents = /* @__PURE__ */ jsx(AnimatePresence, {
+      children: isShowing ? children : null
+    });
+    const isSheet = useShowDialogSheet(context);
+    if (!context.modal || isSheet) {
+      return contents;
+    }
+    return /* @__PURE__ */ jsx(PortalItem, {
+      children: /* @__PURE__ */ jsx(DialogProvider, {
+        scope: __scopeDialog,
+        ...context,
+        children: /* @__PURE__ */ jsx(Theme, {
+          name: themeName,
+          children: /* @__PURE__ */ jsx(PortalProvider, {
+            scope: __scopeDialog,
+            forceMount,
+            children: /* @__PURE__ */ jsx(DialogPortalFrame, {
+              pointerEvents: isShowing ? "auto" : "none",
+              ...frameProps,
+              children: contents
+            })
+          })
+        })
+      })
+    });
   }
-  return /* @__PURE__ */ React.createElement(PortalItem, null, /* @__PURE__ */ React.createElement(DialogProvider, {
-    scope: __scopeDialog,
-    ...context
-  }, /* @__PURE__ */ React.createElement(Theme, {
-    name: themeName
-  }, /* @__PURE__ */ React.createElement(PortalProvider, {
-    scope: __scopeDialog,
-    forceMount
-  }, /* @__PURE__ */ React.createElement(DialogPortalFrame, {
-    pointerEvents: isShowing ? "auto" : "none",
-    ...frameProps
-  }, contents)))));
-});
+);
 DialogPortal.displayName = PORTAL_NAME;
 const OVERLAY_NAME = "DialogOverlay";
 const DialogOverlayFrame = styled(ThemeableStack, {
@@ -89,38 +102,43 @@ const DialogOverlayFrame = styled(ThemeableStack, {
   backgrounded: true,
   fullscreen: true
 });
-const DialogOverlay = React.forwardRef(({ __scopeDialog, ...props }, forwardedRef) => {
-  const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog);
-  const { forceMount = portalContext.forceMount, ...overlayProps } = props;
-  const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
-  const showSheet = useShowDialogSheet(context);
-  if (!forceMount) {
-    if (!context.modal || showSheet) {
-      return null;
+const DialogOverlay = React.forwardRef(
+  ({ __scopeDialog, ...props }, forwardedRef) => {
+    const portalContext = usePortalContext(OVERLAY_NAME, __scopeDialog);
+    const { forceMount = portalContext.forceMount, ...overlayProps } = props;
+    const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
+    const showSheet = useShowDialogSheet(context);
+    if (!forceMount) {
+      if (!context.modal || showSheet) {
+        return null;
+      }
     }
+    return /* @__PURE__ */ jsx(DialogOverlayImpl, {
+      context,
+      ...overlayProps,
+      ref: forwardedRef
+    });
   }
-  return /* @__PURE__ */ React.createElement(DialogOverlayImpl, {
-    context,
-    ...overlayProps,
-    ref: forwardedRef
-  });
-});
+);
 DialogOverlay.displayName = OVERLAY_NAME;
-const DialogOverlayImpl = React.forwardRef((props, forwardedRef) => {
-  const { context, ...overlayProps } = props;
-  return /* @__PURE__ */ React.createElement(RemoveScroll, {
-    enabled: context.open,
-    as: Slot,
-    allowPinchZoom: context.allowPinchZoom,
-    shards: [context.contentRef],
-    removeScrollBar: false
-  }, /* @__PURE__ */ React.createElement(DialogOverlayFrame, {
-    "data-state": getState(context.open),
-    pointerEvents: context.open ? "auto" : "none",
-    ...overlayProps,
-    ref: forwardedRef
-  }));
-});
+const DialogOverlayImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const { context, ...overlayProps } = props;
+    return /* @__PURE__ */ jsx(RemoveScroll, {
+      enabled: context.open,
+      as: Slot,
+      allowPinchZoom: context.allowPinchZoom,
+      shards: [context.contentRef],
+      removeScrollBar: false,
+      children: /* @__PURE__ */ jsx(DialogOverlayFrame, {
+        "data-state": getState(context.open),
+        pointerEvents: context.open ? "auto" : "none",
+        ...overlayProps,
+        ref: forwardedRef
+      })
+    });
+  }
+);
 const CONTENT_NAME = "DialogContent";
 const DialogContentFrame = styled(ThemeableStack, {
   name: CONTENT_NAME,
@@ -141,144 +159,173 @@ const DialogContentFrame = styled(ThemeableStack, {
     size: "$4"
   }
 });
-const DialogContent = DialogContentFrame.extractable(React.forwardRef(({ __scopeDialog, ...props }, forwardedRef) => {
-  const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
-  const { forceMount = portalContext.forceMount, ...contentProps } = props;
-  const context = useDialogContext(CONTENT_NAME, __scopeDialog);
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, context.modal ? /* @__PURE__ */ React.createElement(DialogContentModal, {
-    context,
-    ...contentProps,
-    ref: forwardedRef
-  }) : /* @__PURE__ */ React.createElement(DialogContentNonModal, {
-    context,
-    ...contentProps,
-    ref: forwardedRef
-  }));
-}));
+const DialogContent = DialogContentFrame.extractable(
+  React.forwardRef(
+    ({ __scopeDialog, ...props }, forwardedRef) => {
+      const portalContext = usePortalContext(CONTENT_NAME, __scopeDialog);
+      const { forceMount = portalContext.forceMount, ...contentProps } = props;
+      const context = useDialogContext(CONTENT_NAME, __scopeDialog);
+      return /* @__PURE__ */ jsx(Fragment, {
+        children: context.modal ? /* @__PURE__ */ jsx(DialogContentModal, {
+          context,
+          ...contentProps,
+          ref: forwardedRef
+        }) : /* @__PURE__ */ jsx(DialogContentNonModal, {
+          context,
+          ...contentProps,
+          ref: forwardedRef
+        })
+      });
+    }
+  )
+);
 DialogContent.displayName = CONTENT_NAME;
-const DialogContentModal = React.forwardRef(({ children, context, ...props }, forwardedRef) => {
-  const contentRef = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
-  React.useEffect(() => {
-    if (!context.open)
-      return;
-    const content = contentRef.current;
-    if (content)
-      return hideOthers(content);
-  }, [context.open]);
-  return /* @__PURE__ */ React.createElement(DialogContentImpl, {
-    ...props,
-    context,
-    ref: composedRefs,
-    trapFocus: context.open,
-    disableOutsidePointerEvents: true,
-    onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
-      var _a;
-      event.preventDefault();
-      (_a = context.triggerRef.current) == null ? void 0 : _a.focus();
-    }),
-    onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
-      const originalEvent = event["detail"].originalEvent;
-      const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
-      const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-      if (isRightClick)
+const DialogContentModal = React.forwardRef(
+  ({ children, context, ...props }, forwardedRef) => {
+    const contentRef = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
+    React.useEffect(() => {
+      if (!context.open)
+        return;
+      const content = contentRef.current;
+      if (content)
+        return hideOthers(content);
+    }, [context.open]);
+    return /* @__PURE__ */ jsx(DialogContentImpl, {
+      ...props,
+      context,
+      ref: composedRefs,
+      trapFocus: context.open,
+      disableOutsidePointerEvents: true,
+      onCloseAutoFocus: composeEventHandlers(props.onCloseAutoFocus, (event) => {
+        var _a;
         event.preventDefault();
-    }),
-    onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => event.preventDefault())
-  }, children);
-});
-const DialogContentNonModal = React.forwardRef((props, forwardedRef) => {
-  const hasInteractedOutsideRef = React.useRef(false);
-  return /* @__PURE__ */ React.createElement(DialogContentImpl, {
-    ...props,
-    ref: forwardedRef,
-    trapFocus: false,
-    disableOutsidePointerEvents: false,
-    onCloseAutoFocus: (event) => {
-      var _a, _b;
-      console.log("on close autofocus");
-      (_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event);
-      if (!event.defaultPrevented) {
-        if (!hasInteractedOutsideRef.current) {
-          (_b = props.context.triggerRef.current) == null ? void 0 : _b.focus();
+        (_a = context.triggerRef.current) == null ? void 0 : _a.focus();
+      }),
+      onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
+        const originalEvent = event["detail"].originalEvent;
+        const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+        const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+        if (isRightClick)
+          event.preventDefault();
+      }),
+      onFocusOutside: composeEventHandlers(
+        props.onFocusOutside,
+        (event) => event.preventDefault()
+      ),
+      children
+    });
+  }
+);
+const DialogContentNonModal = React.forwardRef(
+  (props, forwardedRef) => {
+    const hasInteractedOutsideRef = React.useRef(false);
+    return /* @__PURE__ */ jsx(DialogContentImpl, {
+      ...props,
+      ref: forwardedRef,
+      trapFocus: false,
+      disableOutsidePointerEvents: false,
+      onCloseAutoFocus: (event) => {
+        var _a, _b;
+        console.log("on close autofocus");
+        (_a = props.onCloseAutoFocus) == null ? void 0 : _a.call(props, event);
+        if (!event.defaultPrevented) {
+          if (!hasInteractedOutsideRef.current) {
+            (_b = props.context.triggerRef.current) == null ? void 0 : _b.focus();
+          }
+          event.preventDefault();
         }
-        event.preventDefault();
+        hasInteractedOutsideRef.current = false;
+      },
+      onInteractOutside: (event) => {
+        var _a;
+        (_a = props.onInteractOutside) == null ? void 0 : _a.call(props, event);
+        if (!event.defaultPrevented)
+          hasInteractedOutsideRef.current = true;
+        const target = event.target;
+        const trigger = props.context.triggerRef.current;
+        if (!(trigger instanceof HTMLElement))
+          return;
+        const targetIsTrigger = trigger.contains(target);
+        if (targetIsTrigger)
+          event.preventDefault();
       }
-      hasInteractedOutsideRef.current = false;
-    },
-    onInteractOutside: (event) => {
-      var _a;
-      (_a = props.onInteractOutside) == null ? void 0 : _a.call(props, event);
-      if (!event.defaultPrevented)
-        hasInteractedOutsideRef.current = true;
-      const target = event.target;
-      const trigger = props.context.triggerRef.current;
-      if (!(trigger instanceof HTMLElement))
-        return;
-      const targetIsTrigger = trigger.contains(target);
-      if (targetIsTrigger)
-        event.preventDefault();
-    }
-  });
-});
-const DialogContentImpl = React.forwardRef((props, forwardedRef) => {
-  const {
-    __scopeDialog,
-    trapFocus,
-    onOpenAutoFocus,
-    onCloseAutoFocus,
-    disableOutsidePointerEvents,
-    onEscapeKeyDown,
-    onPointerDownOutside,
-    onFocusOutside,
-    onInteractOutside,
-    context,
-    ...contentProps
-  } = props;
-  const contentRef = React.useRef(null);
-  const composedRefs = useComposedRefs(forwardedRef, contentRef);
-  const showSheet = useShowDialogSheet(context);
-  const contents = /* @__PURE__ */ React.createElement(DialogContentFrame, {
-    id: context.contentId,
-    "aria-describedby": context.descriptionId,
-    "aria-labelledby": context.titleId,
-    "data-state": getState(context.open),
-    ...contentProps
-  });
-  if (showSheet) {
-    return /* @__PURE__ */ React.createElement(PortalItem, {
-      hostName: `${context.scopeKey}SheetContents`
-    }, contentProps.children);
+    });
   }
-  if (!isWeb) {
-    return contents;
+);
+const DialogContentImpl = React.forwardRef(
+  (props, forwardedRef) => {
+    const {
+      __scopeDialog,
+      trapFocus,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      disableOutsidePointerEvents,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      context,
+      ...contentProps
+    } = props;
+    const contentRef = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, contentRef);
+    const showSheet = useShowDialogSheet(context);
+    const contents = /* @__PURE__ */ jsx(DialogContentFrame, {
+      id: context.contentId,
+      "aria-describedby": context.descriptionId,
+      "aria-labelledby": context.titleId,
+      "data-state": getState(context.open),
+      ...contentProps
+    });
+    if (showSheet) {
+      return /* @__PURE__ */ jsx(PortalItem, {
+        hostName: `${context.scopeKey}SheetContents`,
+        children: contentProps.children
+      });
+    }
+    if (!isWeb) {
+      return contents;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(FocusScope, {
+          loop: true,
+          trapped: trapFocus,
+          onMountAutoFocus: onOpenAutoFocus,
+          forceUnmount: !context.open,
+          onUnmountAutoFocus: onCloseAutoFocus,
+          children: /* @__PURE__ */ jsx(Dismissable, {
+            disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
+            forceUnmount: !context.open,
+            onEscapeKeyDown,
+            onPointerDownOutside,
+            onFocusOutside,
+            onInteractOutside,
+            ref: composedRefs,
+            onDismiss: () => context.onOpenChange(false),
+            children: contents
+          })
+        }),
+        process.env.NODE_ENV === "development" && /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx(TitleWarning, {
+              titleId: context.titleId
+            }),
+            /* @__PURE__ */ jsx(DescriptionWarning, {
+              contentRef,
+              descriptionId: context.descriptionId
+            })
+          ]
+        })
+      ]
+    });
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(FocusScope, {
-    loop: true,
-    trapped: trapFocus,
-    onMountAutoFocus: onOpenAutoFocus,
-    forceUnmount: !context.open,
-    onUnmountAutoFocus: onCloseAutoFocus
-  }, /* @__PURE__ */ React.createElement(Dismissable, {
-    disableOutsidePointerEvents: context.open && disableOutsidePointerEvents,
-    forceUnmount: !context.open,
-    onEscapeKeyDown,
-    onPointerDownOutside,
-    onFocusOutside,
-    onInteractOutside,
-    ref: composedRefs,
-    onDismiss: () => context.onOpenChange(false)
-  }, contents)), process.env.NODE_ENV === "development" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TitleWarning, {
-    titleId: context.titleId
-  }), /* @__PURE__ */ React.createElement(DescriptionWarning, {
-    contentRef,
-    descriptionId: context.descriptionId
-  })));
-});
+);
 const SHEET_CONTENTS_NAME = "DialogSheetContents";
 const DialogSheetContents = ({ __scopeDialog }) => {
   const context = useDialogContext(SHEET_CONTENTS_NAME, __scopeDialog);
-  return /* @__PURE__ */ React.createElement(PortalHost, {
+  return /* @__PURE__ */ jsx(PortalHost, {
     name: `${context.scopeKey}SheetContents`
   });
 };
@@ -287,45 +334,51 @@ const TITLE_NAME = "DialogTitle";
 const DialogTitleFrame = styled(H2, {
   name: TITLE_NAME
 });
-const DialogTitle = React.forwardRef((props, forwardedRef) => {
-  const { __scopeDialog, ...titleProps } = props;
-  const context = useDialogContext(TITLE_NAME, __scopeDialog);
-  return /* @__PURE__ */ React.createElement(DialogTitleFrame, {
-    id: context.titleId,
-    ...titleProps,
-    ref: forwardedRef
-  });
-});
+const DialogTitle = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...titleProps } = props;
+    const context = useDialogContext(TITLE_NAME, __scopeDialog);
+    return /* @__PURE__ */ jsx(DialogTitleFrame, {
+      id: context.titleId,
+      ...titleProps,
+      ref: forwardedRef
+    });
+  }
+);
 DialogTitle.displayName = TITLE_NAME;
 const DialogDescriptionFrame = styled(Paragraph, {
   name: "DialogDescription"
 });
 const DESCRIPTION_NAME = "DialogDescription";
-const DialogDescription = React.forwardRef((props, forwardedRef) => {
-  const { __scopeDialog, ...descriptionProps } = props;
-  const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
-  return /* @__PURE__ */ React.createElement(DialogDescriptionFrame, {
-    id: context.descriptionId,
-    ...descriptionProps,
-    ref: forwardedRef
-  });
-});
+const DialogDescription = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...descriptionProps } = props;
+    const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
+    return /* @__PURE__ */ jsx(DialogDescriptionFrame, {
+      id: context.descriptionId,
+      ...descriptionProps,
+      ref: forwardedRef
+    });
+  }
+);
 DialogDescription.displayName = DESCRIPTION_NAME;
 const CLOSE_NAME = "DialogClose";
-const DialogClose = React.forwardRef((props, forwardedRef) => {
-  const { __scopeDialog, ...closeProps } = props;
-  const context = useDialogContext(CLOSE_NAME, __scopeDialog);
-  const isSheet = useShowDialogSheet(context);
-  if (isSheet) {
-    return null;
+const DialogClose = React.forwardRef(
+  (props, forwardedRef) => {
+    const { __scopeDialog, ...closeProps } = props;
+    const context = useDialogContext(CLOSE_NAME, __scopeDialog);
+    const isSheet = useShowDialogSheet(context);
+    if (isSheet) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(YStack, {
+      tag: "button",
+      ...closeProps,
+      ref: forwardedRef,
+      onPress: composeEventHandlers(props.onPress, () => context.onOpenChange(false))
+    });
   }
-  return /* @__PURE__ */ React.createElement(YStack, {
-    tag: "button",
-    ...closeProps,
-    ref: forwardedRef,
-    onPress: composeEventHandlers(props.onPress, () => context.onOpenChange(false))
-  });
-});
+);
 DialogClose.displayName = CLOSE_NAME;
 function getState(open) {
   return open ? "open" : "closed";
@@ -392,10 +445,14 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
     defaultProp: defaultOpen,
     onChange: onOpenChange
   });
-  React.useImperativeHandle(ref, () => ({
-    open: setOpen
-  }), [setOpen]);
-  return /* @__PURE__ */ React.createElement(DialogProvider, {
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      open: setOpen
+    }),
+    [setOpen]
+  );
+  return /* @__PURE__ */ jsx(DialogProvider, {
     scope: __scopeDialog,
     scopeKey: __scopeDialog ? Object.keys(__scopeDialog)[0] : "",
     triggerRef,
@@ -408,11 +465,13 @@ const DialogInner = React.forwardRef(function Dialog(props, ref) {
     onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
     modal,
     allowPinchZoom,
-    sheetBreakpoint
-  }, /* @__PURE__ */ React.createElement(DialogSheetController, {
-    onChangeOpen: setOpen,
-    __scopeDialog
-  }, children));
+    sheetBreakpoint,
+    children: /* @__PURE__ */ jsx(DialogSheetController, {
+      onChangeOpen: setOpen,
+      __scopeDialog,
+      children
+    })
+  });
 });
 const Dialog2 = withStaticProperties(DialogInner, {
   Trigger: DialogTrigger,
@@ -430,15 +489,16 @@ const DialogSheetController = (props) => {
   const showSheet = useShowDialogSheet(context);
   const breakpointActive = useSheetBreakpointActive(context);
   const getShowSheet = useGet(showSheet);
-  return /* @__PURE__ */ React.createElement(SheetController, {
+  return /* @__PURE__ */ jsx(SheetController, {
     onChangeOpen: (val) => {
       if (getShowSheet()) {
         props.onChangeOpen(val);
       }
     },
     open: context.open,
-    hidden: breakpointActive === false
-  }, props.children);
+    hidden: breakpointActive === false,
+    children: props.children
+  });
 };
 const useSheetBreakpointActive = (context) => {
   const media = useMedia();