@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/lib-esm/stories/Dialog.stories.js

@@ -0,0 +1,240 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { BaseStyles, Button, ThemeProvider, Box } from '..';
+import { Dialog } from '../Dialog/Dialog';
+export default {
+  title: 'Internal components/Dialog',
+  component: Dialog,
+  decorators: [Story => {
+    // Since portal roots are registered globally, we need this line so that each storybook
+    // story works in isolation.
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
+  }],
+  argTypes: {
+    width: {
+      defaultValue: 'xlarge',
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large', 'xlarge']
+      }
+    },
+    height: {
+      defaultValue: 'auto',
+      control: {
+        type: 'radio',
+        options: ['small', 'large', 'auto']
+      }
+    },
+    subtitle: {
+      name: 'show subtitle',
+      defaultValue: true,
+      control: {
+        type: 'boolean'
+      }
+    },
+    title: {
+      table: {
+        disable: true
+      }
+    },
+    renderHeader: {
+      table: {
+        disable: true
+      }
+    },
+    renderBody: {
+      table: {
+        disable: true
+      }
+    },
+    renderFooter: {
+      table: {
+        disable: true
+      }
+    },
+    onClose: {
+      table: {
+        disable: true
+      }
+    },
+    role: {
+      table: {
+        disable: true
+      }
+    },
+    ref: {
+      table: {
+        disable: true
+      }
+    },
+    key: {
+      table: {
+        disable: true
+      }
+    },
+    footerButtons: {
+      table: {
+        disable: true
+      }
+    }
+  }
+};
+const lipsum = /*#__PURE__*/React.createElement("div", {
+  style: {
+    fontSize: '14px'
+  }
+}, /*#__PURE__*/React.createElement("p", {
+  style: {
+    marginBlockStart: 0
+  }
+}, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt. Cras condimentum ante in accumsan ultricies. Morbi quis porta est, sit amet congue augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut consequat nunc id quam tempus, id tincidunt neque venenatis. Mauris fringilla tempor est, vitae fermentum enim elementum vitae. Nullam eleifend odio ut porta efficitur. Phasellus luctus tempus posuere."), /*#__PURE__*/React.createElement("p", null, "Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim sit amet scelerisque. Nulla sed odio nec lorem dapibus condimentum at sagittis quam. Sed in ornare ex, sed luctus sem. Mauris a est tellus."), /*#__PURE__*/React.createElement("p", null, "Sed fringilla est ac urna aliquet, eget condimentum felis vulputate. Sed sagittis eros non mauris sodales molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam ante leo, condimentum sed lectus non, rutrum octopodes urna. Mauris neque ante, interdum molestie tellus pharetra, eleifend dapibus justo. Sed at diam ligula. Donec dapibus ipsum quis elit euismod, sed suscipit eros euismod. Aliquam pretium felis quis risus luctus fringilla. Ut purus lacus, mattis a turpis eget, sollicitudin pellentesque neque."), /*#__PURE__*/React.createElement("p", null, "Nunc sodales quis ante quis porttitor. Vestibulum ornare lacinia ante. Donec a nisi nec arcu aliquam pretium in nec nunc. Donec fringilla erat vitae viverra feugiat. Sed non odio vel ipsum porttitor maximus. Donec id eleifend lectus. Proin varius felis sit amet neque eleifend, vitae porttitor ligula commodo."), /*#__PURE__*/React.createElement("p", null, "Vivamus felis quam, porttitor a justo sit amet, placerat ultricies nisl. Suspendisse potenti. Maecenas non consequat lorem, eu porta ante. Pellentesque elementum diam sapien, nec ultrices risus convallis eget. Nam pharetra dolor at dictum tempor. Quisque ut est a ligula hendrerit sodales. Curabitur ornare a nulla in laoreet. Maecenas semper mi egestas, dignissim nisi et, elementum neque."));
+export const BasicDialog = ({
+  width,
+  height,
+  subtitle
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [secondOpen, setSecondOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const onDialogClose = useCallback(() => setIsOpen(false), []);
+  const onSecondDialogClose = useCallback(() => setSecondOpen(false), []);
+  const openSecondDialog = useCallback(() => setSecondOpen(true), []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "Show dialog"), isOpen && /*#__PURE__*/React.createElement(Dialog, {
+    title: "My Dialog",
+    subtitle: subtitle ? 'This is a subtitle!' : undefined,
+    onClose: onDialogClose,
+    width: width,
+    height: height,
+    footerButtons: [{
+      buttonType: 'danger',
+      content: 'Delete the universe',
+      onClick: onDialogClose
+    }, {
+      buttonType: 'primary',
+      content: 'Proceed',
+      onClick: openSecondDialog,
+      autoFocus: true
+    }]
+  }, lipsum, secondOpen && /*#__PURE__*/React.createElement(Dialog, {
+    title: "Inner dialog!",
+    onClose: onSecondDialogClose,
+    width: "small"
+  }, "Hello world")));
+};
+
+function CustomHeader({
+  title,
+  subtitle,
+  dialogLabelId,
+  dialogDescriptionId,
+  onClose
+}) {
+  const onCloseClick = useCallback(() => {
+    onClose('close-button');
+  }, [onClose]);
+
+  if (typeof title === 'string' && typeof subtitle === 'string') {
+    return /*#__PURE__*/React.createElement(Box, {
+      bg: "auto.blue.3"
+    }, /*#__PURE__*/React.createElement("h1", {
+      id: dialogLabelId
+    }, title.toUpperCase()), /*#__PURE__*/React.createElement("h2", {
+      id: dialogDescriptionId
+    }, subtitle.toLowerCase()), /*#__PURE__*/React.createElement(Dialog.CloseButton, {
+      onClose: onCloseClick
+    }));
+  }
+
+  return null;
+}
+
+function CustomBody({
+  children
+}) {
+  return /*#__PURE__*/React.createElement(Dialog.Body, {
+    bg: "auto.red.3"
+  }, children);
+}
+
+CustomBody.displayName = "CustomBody";
+
+function CustomFooter({
+  footerButtons
+}) {
+  return /*#__PURE__*/React.createElement(Dialog.Footer, {
+    bg: "auto.yellow.3"
+  }, footerButtons ? /*#__PURE__*/React.createElement(Dialog.Buttons, {
+    buttons: footerButtons
+  }) : null);
+}
+
+CustomFooter.displayName = "CustomFooter";
+export const WithCustomRenderers = ({
+  width,
+  height,
+  subtitle
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onDialogClose = useCallback(() => setIsOpen(false), []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => setIsOpen(!isOpen)
+  }, "Show dialog"), isOpen && /*#__PURE__*/React.createElement(Dialog, {
+    title: "My Dialog",
+    subtitle: subtitle ? 'This is a subtitle!' : undefined,
+    width: width,
+    height: height,
+    renderHeader: CustomHeader,
+    renderBody: CustomBody,
+    renderFooter: CustomFooter,
+    onClose: onDialogClose,
+    footerButtons: [{
+      buttonType: 'danger',
+      content: 'Delete the universe',
+      onClick: onDialogClose
+    }, {
+      buttonType: 'primary',
+      content: 'Proceed'
+    }]
+  }, lipsum));
+};
+export const StressTest = ({
+  width,
+  height,
+  subtitle
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [secondOpen, setSecondOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const onDialogClose = useCallback(() => setIsOpen(false), []);
+  const onSecondDialogClose = useCallback(() => setSecondOpen(false), []);
+  const openSecondDialog = useCallback(() => setSecondOpen(true), []);
+  const manyButtons = new Array(10).fill(undefined).map((_, i) => ({
+    content: `Button ${i}`
+  }));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "Show dialog"), isOpen && /*#__PURE__*/React.createElement(Dialog, {
+    title: "This dialog has a really long title. So long, in fact, that it should cause wrapping, going to multiple lines!.",
+    subtitle: subtitle ? "It's not a common scenario, sure, but what if the subtitle is generated from a really long value? Do we just break the dialog? Or do we handle it because we are pros?" : undefined,
+    onClose: onDialogClose,
+    width: width,
+    height: height,
+    footerButtons: [...manyButtons, {
+      buttonType: 'danger',
+      content: 'Delete the universe',
+      onClick: onDialogClose
+    }, {
+      buttonType: 'primary',
+      content: 'Proceed',
+      onClick: openSecondDialog,
+      autoFocus: true
+    }]
+  }, lipsum, secondOpen && /*#__PURE__*/React.createElement(Dialog, {
+    title: "Inner dialog!",
+    onClose: onSecondDialogClose,
+    width: "small"
+  }, "Hello world")));
+};

package/lib-esm/stories/DropdownMenu.stories.js

@@ -0,0 +1,94 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React from 'react';
+import { theme, ThemeProvider } from '..';
+import BaseStyles from '../BaseStyles';
+import Box from '../Box';
+import { DropdownMenu, DropdownButton } from '../DropdownMenu';
+import TextInput from '../TextInput';
+const meta = {
+  title: 'Composite components/DropdownMenu',
+  component: DropdownMenu,
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
+  }],
+  parameters: {
+    controls: {
+      disable: true
+    }
+  }
+};
+export default meta;
+export function FavoriteColorStory() {
+  const items = React.useMemo(() => [{
+    text: '🔵 Cyan'
+  }, {
+    text: '🔴 Magenta'
+  }, {
+    text: '🟡 Yellow'
+  }], []);
+  const [selectedItem, setSelectedItem] = React.useState();
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", null, "Favorite Color"), /*#__PURE__*/React.createElement(TextInput, {
+    placeholder: "Input for focus testing",
+    sx: {
+      mb: 2
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    id: "favorite-color-label"
+  }, "Please select your favorite color:"), /*#__PURE__*/React.createElement(DropdownMenu, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": `favorite-color-label ${ariaLabelledBy}`
+    }, anchorProps), children),
+    placeholder: "\uD83C\uDFA8",
+    items: items,
+    selectedItem: selectedItem,
+    onChange: setSelectedItem
+  }));
+}
+FavoriteColorStory.storyName = 'Favorite Color';
+export function ExternalAnchorStory() {
+  const items = React.useMemo(() => [{
+    text: '🔵 Cyan'
+  }, {
+    text: '🔴 Magenta'
+  }, {
+    text: '🟡 Yellow'
+  }], []);
+  const [selectedItem, setSelectedItem] = React.useState();
+  const anchorRef = React.useRef(null);
+  const [open, setOpen] = React.useState(false);
+  return /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "row"
+  }, /*#__PURE__*/React.createElement(DropdownButton, {
+    onClick: () => setOpen(true)
+  }, "Click me to open the dropdown"), /*#__PURE__*/React.createElement(Box, {
+    ref: anchorRef,
+    bg: "papayawhip",
+    p: 4,
+    ml: 40,
+    borderRadius: 2,
+    display: "inline-block"
+  }, "Anchored on me!")), /*#__PURE__*/React.createElement(DropdownMenu, {
+    renderAnchor: null,
+    anchorRef: anchorRef,
+    open: open,
+    onOpenChange: setOpen,
+    placeholder: "\uD83C\uDFA8",
+    items: items,
+    selectedItem: selectedItem,
+    onChange: setSelectedItem
+  }));
+}
+ExternalAnchorStory.displayName = "ExternalAnchorStory";
+ExternalAnchorStory.storyName = 'DropdownMenu with External Anchor';

package/lib-esm/stories/Overlay.stories.js

@@ -0,0 +1,154 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useState, useRef, useCallback } from 'react';
+import styled from 'styled-components';
+import { BaseStyles, Overlay, Button, Text, ButtonDanger, ThemeProvider, Box } from '..';
+import { DropdownMenu, DropdownButton } from '../DropdownMenu';
+export default {
+  title: 'Internal components/Overlay',
+  component: Overlay,
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
+  }]
+};
+const DummyItem = styled.button.withConfig({
+  displayName: "Overlaystories__DummyItem",
+  componentId: "sc-92ppmu-0"
+})(["border-radius:6px;font-weight:400;padding:6px 8px;font-weight:400;text-align:left;margin:0;font-size:14px;background:none;border:none;&:hover{background:#f0f3f5;}&:focus{background:red;}"]);
+export const DropdownOverlay = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef(null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    ref: buttonRef,
+    sx: {
+      position: 'relative'
+    },
+    onClick: () => setIsOpen(!isOpen)
+  }, "open overlay"), isOpen ? /*#__PURE__*/React.createElement(Overlay, {
+    returnFocusRef: buttonRef,
+    height: "auto",
+    width: "small",
+    ignoreClickRefs: [buttonRef],
+    onEscape: () => setIsOpen(false),
+    onClickOutside: () => setIsOpen(false)
+  }, /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    p: 2
+  }, /*#__PURE__*/React.createElement(DummyItem, null, "Copy link"), /*#__PURE__*/React.createElement(DummyItem, null, "Quote reply"), /*#__PURE__*/React.createElement(DummyItem, null, "Reference in new issue"), /*#__PURE__*/React.createElement(DummyItem, null, "Edit"), /*#__PURE__*/React.createElement(DummyItem, null, "Delete"))) : null);
+};
+export const DialogOverlay = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const confirmButtonRef = useRef(null);
+  const anchorRef = useRef(null);
+
+  const closeOverlay = () => setIsOpen(false);
+
+  return /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    ref: anchorRef
+  }, /*#__PURE__*/React.createElement(Button, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "open overlay"), isOpen ? /*#__PURE__*/React.createElement(Overlay, {
+    initialFocusRef: confirmButtonRef,
+    returnFocusRef: buttonRef,
+    ignoreClickRefs: [buttonRef],
+    onEscape: closeOverlay,
+    onClickOutside: closeOverlay,
+    width: "small"
+  }, /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    p: 2
+  }, /*#__PURE__*/React.createElement(Text, null, "Are you sure?"), /*#__PURE__*/React.createElement(ButtonDanger, {
+    onClick: closeOverlay
+  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
+    onClick: closeOverlay,
+    ref: confirmButtonRef
+  }, "Confirm"))) : null);
+};
+DialogOverlay.displayName = "DialogOverlay";
+export const OverlayOnTopOfOverlay = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isSecondaryOpen, setIsSecondaryOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const secondaryButtonRef = useRef(null);
+  const confirmButtonRef = useRef(null);
+  const anchorRef = useRef(null);
+
+  const closeOverlay = () => setIsOpen(false); // intentionally not memoized
+
+
+  const closeSecondaryOverlay = useCallback(() => setIsSecondaryOpen(false), [setIsSecondaryOpen]);
+  const items = React.useMemo(() => [{
+    text: '🔵 Cyan',
+    onMouseDown: e => {
+      e.preventDefault();
+    }
+  }, {
+    text: '🔴 Magenta',
+    onMouseDown: e => {
+      e.preventDefault();
+    }
+  }, {
+    text: '🟡 Yellow',
+    onMouseDown: e => {
+      e.preventDefault();
+    }
+  }], []);
+  const [selectedItem, setSelectedItem] = React.useState();
+  return /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    ref: anchorRef
+  }, /*#__PURE__*/React.createElement("input", {
+    placeholder: "Input for focus testing"
+  }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "open overlay"), isOpen ? /*#__PURE__*/React.createElement(Overlay, {
+    initialFocusRef: confirmButtonRef,
+    returnFocusRef: buttonRef,
+    onEscape: closeOverlay,
+    onClickOutside: closeOverlay,
+    width: "small"
+  }, /*#__PURE__*/React.createElement(Button, {
+    ref: secondaryButtonRef,
+    onClick: () => setIsSecondaryOpen(!isSecondaryOpen)
+  }, "open overlay"), isSecondaryOpen ? /*#__PURE__*/React.createElement(Overlay, {
+    initialFocusRef: confirmButtonRef,
+    returnFocusRef: secondaryButtonRef,
+    onEscape: closeSecondaryOverlay,
+    onClickOutside: closeSecondaryOverlay,
+    width: "small",
+    sx: {
+      top: '40px'
+    }
+  }, /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    p: 2
+  }, /*#__PURE__*/React.createElement(Text, null, "Select an option!"), /*#__PURE__*/React.createElement(DropdownMenu, {
+    renderAnchor: ({
+      children,
+      'aria-labelledby': ariaLabelledBy,
+      ...anchorProps
+    }) => /*#__PURE__*/React.createElement(DropdownButton, _extends({
+      "aria-labelledby": `favorite-color-label ${ariaLabelledBy}`
+    }, anchorProps), children),
+    placeholder: "\uD83C\uDFA8",
+    items: items,
+    selectedItem: selectedItem,
+    onChange: setSelectedItem
+  }))) : null) : null);
+};
+OverlayOnTopOfOverlay.displayName = "OverlayOnTopOfOverlay";

package/lib-esm/stories/Portal.stories.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { BaseStyles, Box, ThemeProvider } from '..';
+import Portal, { registerPortalRoot } from '../Portal';
+export default {
+  title: 'Generic behaviors/Portal',
+  component: Portal,
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
+  }]
+};
+export const defaultPortal = () => /*#__PURE__*/React.createElement(React.Fragment, null, "Root position", /*#__PURE__*/React.createElement(Box, {
+  bg: "red.2",
+  p: 3
+}, "Outer container", /*#__PURE__*/React.createElement(Box, {
+  bg: "green.2",
+  p: 3
+}, "Inner container", /*#__PURE__*/React.createElement(Portal, null, "Portaled content rendered at ", /*#__PURE__*/React.createElement("code", null, "<BaseStyles>"), " root."))));
+export const customPortalRootById = () => /*#__PURE__*/React.createElement(React.Fragment, null, "Root position", /*#__PURE__*/React.createElement(Box, {
+  bg: "red.2",
+  p: 3,
+  id: "__primerPortalRoot__"
+}, "Outer container", /*#__PURE__*/React.createElement(Box, {
+  bg: "green.2",
+  p: 3
+}, "Inner container", /*#__PURE__*/React.createElement(Portal, null, "Portaled content rendered at the outer container."))));
+export const CustomPortalRootByRegistration = () => {
+  const outerContainerRef = React.useRef(null);
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    if (outerContainerRef.current instanceof HTMLElement) {
+      registerPortalRoot(outerContainerRef.current);
+      setMounted(true);
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, "Root position", /*#__PURE__*/React.createElement(Box, {
+    bg: "red.2",
+    p: 3,
+    ref: outerContainerRef
+  }, mounted ? /*#__PURE__*/React.createElement(React.Fragment, null, "Outer container", /*#__PURE__*/React.createElement(Box, {
+    bg: "green.2",
+    p: 3
+  }, "Inner container", /*#__PURE__*/React.createElement(Portal, null, "Portaled content rendered at the outer container."))) : null));
+};
+export const MultiplePortalRoots = () => {
+  const outerContainerRef = React.useRef(null);
+  const innerContainerRef = React.useRef(null);
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => {
+    if (outerContainerRef.current instanceof HTMLElement && innerContainerRef.current instanceof HTMLElement) {
+      registerPortalRoot(outerContainerRef.current, 'outer');
+      registerPortalRoot(innerContainerRef.current, 'inner');
+      setMounted(true);
+    }
+  }, [outerContainerRef]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, "Root position", /*#__PURE__*/React.createElement(Box, {
+    bg: "red.2",
+    p: 3,
+    ref: outerContainerRef
+  }, "Outer container", /*#__PURE__*/React.createElement(Box, {
+    bg: "green.2",
+    p: 3,
+    ref: innerContainerRef
+  }, mounted ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Portal, {
+    containerName: "outer"
+  }, "Portaled content rendered at the outer container."), /*#__PURE__*/React.createElement(Portal, {
+    containerName: "inner"
+  }, "Portaled content rendered at the end of the inner container."), /*#__PURE__*/React.createElement(Portal, null, "Portaled content rendered at ", /*#__PURE__*/React.createElement("code", null, "<BaseStyles>"), " root.")) : null, "Inner container")));
+};