@primer/components 0.0.0-20219922627 → 0.0.0-2022530201059

package/lib-esm/hooks/useMouseIntent.js

@@ -0,0 +1,50 @@
+/* adapted from: https://github.com/github/github/blob/a959c0d15c29b98c49b881f520c5947fe24eecb9/app/assets/modules/github/behaviors/button-outline.ts */
+import { useEffect } from 'react';
+
+const useMouseIntent = () => {
+  useEffect(() => {
+    let lastActiveElement = null;
+    let currentInputIsMouse = false;
+
+    function setClass() {
+      lastActiveElement = document.activeElement;
+
+      if (document.body) {
+        document.body.classList.toggle('intent-mouse', currentInputIsMouse);
+      }
+    }
+
+    function onKeyDown() {
+      currentInputIsMouse = false;
+    }
+
+    function onMouseDown() {
+      currentInputIsMouse = true;
+      if (lastActiveElement === document.activeElement) setClass();
+    } // Use mousedown event to make sure outline is remove for holding and dragging
+
+
+    document.addEventListener('mousedown', onMouseDown, {
+      capture: true
+    });
+    document.addEventListener('keydown', onKeyDown, {
+      capture: true
+    });
+    document.addEventListener('focusin', setClass, {
+      capture: true
+    });
+    return () => {
+      document.removeEventListener('keydown', onKeyDown, {
+        capture: true
+      });
+      document.removeEventListener('focusin', setClass, {
+        capture: true
+      });
+      document.removeEventListener('mousedown', onMouseDown, {
+        capture: true
+      });
+    };
+  }, []);
+};
+
+export default useMouseIntent;

package/lib-esm/hooks/useOnEscapePress.js

@@ -1,59 +1,16 @@
 import { useEffect, useCallback } from 'react';
-const handlers = [];
-/**
- * Calls all handlers in reverse order
- * @param event The KeyboardEvent generated by the Escape keydown.
- */
-
-function handleEscape(event) {
-  if (event.key === 'Escape' && !event.defaultPrevented) {
-    for (let i = handlers.length - 1; i >= 0; --i) {
-      handlers[i](event); // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-
-      if (event.defaultPrevented) {
-        break;
-      }
+export const useOnEscapePress = ({
+  onEscape
+}) => {
+  const handleEscape = useCallback(e => {
+    if (e.key === 'Escape' && !e.defaultPrevented) {
+      onEscape(e);
     }
-  }
-}
-/**
- * Sets up a `keydown` listener on `window.document`. If
- * 1) The pressed key is "Escape", and
- * 2) The event has not had `.preventDefault()` called
- * The given callback will be executed.
- *
- * Note: If multiple `useOnEscapePress` hooks are active simultaneously, the
- * callbacks will occur in reverse order. In other words, if a parent component
- * and a child component both call `useOnEscapePress`, when the user presses
- * Escape, the child component's callback will execute, followed by the parent's
- * callback. Each callback has the chance to call `.preventDefault()` on the
- * event to prevent further callbacks.
- *
- * @param callback {(e: KeyboardEvent) => void} The callback that gets executed
- * when the Escape key is pressed. The KeyboardEvent generated by the Escape
- * keypress is passed as the only argument.
- *
- * @param callbackDependencies {React.DependencyList} The dependencies of the given
- * `onEscape` callback for memoization. Omit this param if the callback is already
- * memoized. See `React.useCallback` for more info on memoization.
- */
-
-
-export const useOnEscapePress = (onEscape, callbackDependencies = [onEscape]) => {
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  const escapeCallback = useCallback(onEscape, callbackDependencies);
+  }, [onEscape]);
   useEffect(() => {
-    if (handlers.length === 0) {
-      document.addEventListener('keydown', handleEscape);
-    }
-
-    handlers.push(escapeCallback);
+    document.addEventListener('keydown', handleEscape);
     return () => {
-      handlers.splice(handlers.findIndex(h => h === escapeCallback), 1);
-
-      if (handlers.length === 0) {
-        document.removeEventListener('keydown', handleEscape);
-      }
+      document.removeEventListener('keydown', handleEscape);
     };
-  }, [escapeCallback]);
+  }, [handleEscape]);
 };

package/lib-esm/hooks/useOnOutsideClick.js

@@ -1,79 +1,54 @@
-import { useEffect, useCallback, useMemo } from 'react';
-// Because events are handled at the document level, we provide a mechanism for early return.
-const stopPropagation = true;
-/**
- * Calls all handlers in reverse order
- * @param event The MouseEvent generated by the click event.
- */
+import { useEffect, useCallback } from 'react';
+
+const shouldCallClickHandler = ({
+  ignoreClickRefs,
+  containerRef,
+  e
+}) => {
+  var _containerRef$current;
+
+  let shouldCallHandler = true; // don't call click handler if the mouse event was triggered by an auxiliary button (right click/wheel button/etc)
+
+  if (e instanceof MouseEvent && e.button > 0) {
+    shouldCallHandler = false;
+  } // don't call handler if the click happened inside of the container
+
+
+  if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(e.target)) {
+    shouldCallHandler = false; // don't call handler if click happened on an ignored ref
+  } else if (ignoreClickRefs) {
+    for (const ignoreRef of ignoreClickRefs) {
+      var _ignoreRef$current;
+
+      if (ignoreRef && (_ignoreRef$current = ignoreRef.current) !== null && _ignoreRef$current !== void 0 && _ignoreRef$current.contains(e.target)) {
+        shouldCallHandler = false; // if we encounter one, break early, we don't need to go through the rest
 
-function handleClick(event) {
-  if (!event.defaultPrevented) {
-    for (const handler of Object.values(registry).reverse()) {
-      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      if (handler(event) === stopPropagation || event.defaultPrevented) {
         break;
       }
     }
   }
-}
-
-const registry = {};
-
-function register(id, handler) {
-  registry[id] = handler;
-}
 
-function deregister(id) {
-  delete registry[id];
-} // For auto-incrementing unique identifiers for registered handlers.
+  return shouldCallHandler;
+};
 
-
-let handlerId = 0;
 export const useOnOutsideClick = ({
   containerRef,
   ignoreClickRefs,
   onClickOutside
 }) => {
-  const id = useMemo(() => handlerId++, []);
-  const handler = useCallback(event => {
-    var _containerRef$current;
-
-    // don't call click handler if the mouse event was triggered by an auxiliary button (right click/wheel button/etc)
-    if (event instanceof MouseEvent && event.button > 0) {
-      return stopPropagation;
-    } // don't call handler if the click happened inside of the container
-
-
-    if ((_containerRef$current = containerRef.current) !== null && _containerRef$current !== void 0 && _containerRef$current.contains(event.target)) {
-      return stopPropagation;
-    } // don't call handler if click happened on an ignored ref
-
-
-    if (ignoreClickRefs && ignoreClickRefs.some(({
-      current
-    }) => current === null || current === void 0 ? void 0 : current.contains(event.target))) {
-      return stopPropagation;
+  const onOutsideClickInternal = useCallback(e => {
+    if (shouldCallClickHandler({
+      ignoreClickRefs,
+      containerRef,
+      e
+    })) {
+      onClickOutside(e);
     }
-
-    onClickOutside(event);
-  }, [containerRef, ignoreClickRefs, onClickOutside]);
+  }, [onClickOutside, containerRef, ignoreClickRefs]);
   useEffect(() => {
-    if (Object.keys(registry).length === 0) {
-      // use capture to ensure we get all events
-      document.addEventListener('mousedown', handleClick, {
-        capture: true
-      });
-    }
-
-    register(id, handler);
+    document.addEventListener('click', onOutsideClickInternal);
     return () => {
-      deregister(id);
-
-      if (Object.keys(registry).length === 0) {
-        document.removeEventListener('mousedown', handleClick, {
-          capture: true
-        });
-      }
+      document.removeEventListener('click', onOutsideClickInternal);
     };
-  }, [id, handler]);
+  }, [onOutsideClickInternal]);
 };

package/lib-esm/hooks/useOpenAndCloseFocus.js

@@ -10,7 +10,7 @@ export function useOpenAndCloseFocus({
 
     if (initialFocusRef && initialFocusRef.current) {
       initialFocusRef.current.focus();
-    } else if (containerRef.current) {
+    } else if (containerRef && containerRef.current) {
       const firstItem = iterateFocusableElements(containerRef.current).next().value;
       firstItem === null || firstItem === void 0 ? void 0 : firstItem.focus();
     }

package/lib-esm/hooks/useOverlay.js

@@ -1,16 +1,21 @@
 import { useOnOutsideClick } from './useOnOutsideClick';
 import { useOpenAndCloseFocus } from './useOpenAndCloseFocus';
 import { useOnEscapePress } from './useOnEscapePress';
-import { useProvidedRefOrCreate } from './useProvidedRefOrCreate';
+import { useAnchoredPosition } from './useAnchoredPosition';
+import { useRef } from 'react';
 export const useOverlay = ({
-  overlayRef: _overlayRef,
+  anchorRef,
+  positionSettings = {},
+  positionDeps,
   returnFocusRef,
   initialFocusRef,
   onEscape,
   ignoreClickRefs,
   onClickOutside
 }) => {
-  const overlayRef = useProvidedRefOrCreate(_overlayRef);
+  const overlayRef = useRef(null);
+  positionSettings.anchorElementRef = anchorRef;
+  positionSettings.floatingElementRef = overlayRef;
   useOpenAndCloseFocus({
     containerRef: overlayRef,
     returnFocusRef,
@@ -21,8 +26,14 @@ export const useOverlay = ({
     ignoreClickRefs,
     onClickOutside
   });
-  useOnEscapePress(onEscape);
+  useOnEscapePress({
+    onEscape
+  });
+  const {
+    position
+  } = useAnchoredPosition(positionSettings, positionDeps);
   return {
-    ref: overlayRef
+    ref: overlayRef,
+    position
   };
 };

package/lib-esm/hooks/useSafeTimeout.js

@@ -18,7 +18,6 @@ export default function useSafeTimeout() {
   }, []);
   useEffect(() => {
     return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
       for (const id of timers.current) {
         clearTimeout(id);
       }

package/lib-esm/index.js

@@ -1,29 +1,27 @@
 export { default as theme } from './theme';
 export { get as themeGet } from './constants';
 export { default as BaseStyles } from './BaseStyles';
-export { default as ThemeProvider, useTheme, useColorSchemeVar } from './ThemeProvider';
-// Layout
+export { default as ThemeProvider, useTheme, useColorSchemeVar } from './ThemeProvider'; // Layout
+
 export { default as BorderBox } from './BorderBox';
 export { default as Box } from './Box';
 export { default as Flex } from './Flex';
 export { default as Grid } from './Grid';
-export { default as Position, Absolute, Fixed, Relative, Sticky } from './Position';
-// Hooks
+export { default as Position, Absolute, Fixed, Relative, Sticky } from './Position'; // Hooks
+
 export { default as useDetails } from './hooks/useDetails';
+export { default as useMouseIntent } from './hooks/useMouseIntent';
 export { default as useSafeTimeout } from './hooks/useSafeTimeout';
 export { useOnOutsideClick } from './hooks/useOnOutsideClick';
 export { useOpenAndCloseFocus } from './hooks/useOpenAndCloseFocus';
 export { useOnEscapePress } from './hooks/useOnEscapePress';
-export { useOverlay } from './hooks/useOverlay';
-export { useConfirm } from './Dialog/ConfirmationDialog'; // Components
+export { useOverlay } from './hooks/useOverlay'; // Components
 
-export { ActionList } from './ActionList';
-export { ActionMenu } from './ActionMenu';
 export { default as Avatar } from './Avatar';
 export { default as AvatarPair } from './AvatarPair';
 export { default as AvatarStack } from './AvatarStack';
 export { default as BranchName } from './BranchName';
-export { default as Breadcrumbs, Breadcrumb } from './Breadcrumbs';
+export { default as Breadcrumb } from './Breadcrumb';
 export { default as Button, ButtonDanger, ButtonOutline, ButtonPrimary, ButtonInvisible, ButtonTableList, ButtonClose, ButtonGroup } from './Button';
 export { default as Caret } from './Caret';
 export { default as CircleBadge } from './CircleBadge';
@@ -31,11 +29,7 @@ export { default as CircleOcticon } from './CircleOcticon';
 export { default as CounterLabel } from './CounterLabel';
 export { default as Details } from './Details';
 export { default as Dialog } from './Dialog';
-export { ConfirmationDialog } from './Dialog/ConfirmationDialog';
 export { default as Dropdown } from './Dropdown';
-export { DropdownButton, DropdownMenu } from './DropdownMenu'; // not exporting new DropdownMenu types yet due to conflict with Dropdown types above
-// export type {DropdownButtonProps, DropdownMenuProps} from './DropdownMenu'
-
 export { default as FilteredSearch } from './FilteredSearch';
 export { default as FilterList } from './FilterList';
 export { default as Flash } from './Flash';
@@ -49,13 +43,11 @@ export { default as Overlay } from './Overlay';
 export { default as Pagehead } from './Pagehead';
 export { default as Pagination } from './Pagination';
 export { default as PointerBox } from './PointerBox';
-export { default as Popover } from './Popover';
-// export {default as Portal, registerPortalRoot} from './Portal'
-// export type {PortalProps} from './Portal'
+export { default as Popover } from './Popover'; // export {default as Portal, PortalProps, registerPortalRoot} from './Portal'
+
 export { default as ProgressBar } from './ProgressBar';
 export { default as SelectMenu } from './SelectMenu';
 export { default as SideNav } from './SideNav';
-export { default as Spinner } from './Spinner';
 export { default as StateLabel } from './StateLabel';
 export { default as StyledOcticon } from './StyledOcticon';
 export { default as SubNav } from './SubNav';
@@ -65,5 +57,4 @@ export { default as Text } from './Text';
 export { default as Timeline } from './Timeline';
 export { default as Tooltip } from './Tooltip';
 export { default as Truncate } from './Truncate';
-export { default as UnderlineNav } from './UnderlineNav';
-export { SSRProvider, useSSRSafeId } from './utils/ssr';
+export { default as UnderlineNav } from './UnderlineNav';

package/lib-esm/polyfills/eventListenerSignal.js

@@ -15,10 +15,9 @@ function noop() {}
 try {
   const options = Object.create({}, {
     signal: {
-      get() {
+      get: function () {
         signalSupported = true;
       }
-
     }
   });
   window.addEventListener('test', noop, options);
@@ -32,10 +31,6 @@ function featureSupported() {
 }
 
 function monkeyPatch() {
-  if (typeof window === 'undefined') {
-    return;
-  }
-
   const originalAddEventListener = EventTarget.prototype.addEventListener;
 
   EventTarget.prototype.addEventListener = function (name, originalCallback, optionsOrCapture) {

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

@@ -0,0 +1,79 @@
+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); }
+
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import React from 'react';
+import { BaseStyles, Button, ButtonClose, ButtonDanger, ButtonGroup, ButtonInvisible, ButtonOutline, ButtonPrimary, ButtonTableList, ThemeProvider } from '..';
+export default {
+  title: 'Composite components/Button',
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
+  }],
+  argTypes: {
+    as: {
+      table: {
+        disable: true
+      }
+    },
+    theme: {
+      table: {
+        disable: true
+      }
+    },
+    sx: {
+      table: {
+        disable: true
+      }
+    },
+    variant: {
+      control: {
+        type: 'radio',
+        options: ['small', 'medium', 'large']
+      }
+    }
+  }
+};
+export const defaultButton = args => /*#__PURE__*/React.createElement(Button, args, "Default Button");
+defaultButton.displayName = "defaultButton";
+export const dangerButton = args => /*#__PURE__*/React.createElement(ButtonDanger, args, "Danger Button");
+dangerButton.displayName = "dangerButton";
+export const outlineButton = args => /*#__PURE__*/React.createElement(ButtonOutline, args, "Outline Button");
+outlineButton.displayName = "outlineButton";
+export const primaryButton = args => /*#__PURE__*/React.createElement(ButtonPrimary, args, "Primary Button");
+primaryButton.displayName = "primaryButton";
+export const invisibleButton = args => /*#__PURE__*/React.createElement(ButtonInvisible, args, "Invisible Button");
+invisibleButton.displayName = "invisibleButton";
+export const closeButton = args => /*#__PURE__*/React.createElement(ButtonClose, _extends({}, args, {
+  onClick: () => alert('button clicked.')
+}));
+closeButton.displayName = "closeButton";
+export const buttonGroup = args => /*#__PURE__*/React.createElement(ButtonGroup, {
+  display: "block",
+  my: 2
+}, /*#__PURE__*/React.createElement(Button, args, "Button 1"), /*#__PURE__*/React.createElement(Button, args, "Button 2"), /*#__PURE__*/React.createElement(Button, args, "Button 3"));
+buttonGroup.displayName = "buttonGroup";
+export const buttonTableList = args => /*#__PURE__*/React.createElement(ButtonTableList, args, "Button Table List");
+buttonTableList.displayName = "buttonTableList";
+defaultButton.args = {
+  variant: 'medium'
+};
+dangerButton.args = {
+  variant: 'medium'
+};
+outlineButton.args = {
+  variant: 'medium'
+};
+primaryButton.args = {
+  variant: 'medium'
+};
+invisibleButton.args = {
+  variant: 'medium'
+};
+closeButton.args = {
+  variant: 'medium'
+};
+buttonGroup.args = {
+  variant: 'medium'
+};
+buttonTableList.args = {
+  variant: 'medium'
+};

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

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import React, { useState, useRef } from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import { BaseStyles, Overlay, Button, Text, ButtonDanger, theme, Position, Flex } from '..';
+export default {
+  title: 'Internal components/Overlay',
+  component: Overlay,
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__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, {
+    anchorRef: buttonRef,
+    returnFocusRef: buttonRef,
+    height: "auto",
+    width: "sm",
+    ignoreClickRefs: [buttonRef],
+    onEscape: () => setIsOpen(false),
+    onClickOutside: () => setIsOpen(false)
+  }, /*#__PURE__*/React.createElement(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"))));
+};
+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(Position, {
+    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, {
+    positionSettings: {
+      side: 'inside-center',
+      align: 'center'
+    },
+    anchorRef: anchorRef,
+    initialFocusRef: confirmButtonRef,
+    returnFocusRef: buttonRef,
+    ignoreClickRefs: [buttonRef],
+    onEscape: closeOverlay,
+    onClickOutside: closeOverlay,
+    width: "sm"
+  }, /*#__PURE__*/React.createElement(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"))));
+};
+DialogOverlay.displayName = "DialogOverlay";

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

@@ -0,0 +1,72 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import React from 'react';
+import { BaseStyles, Box, ThemeProvider } from '..';
+import Portal, { registerPortalRoot } from '../Portal';
+export default {
+  title: 'Generic behaviors/Portal',
+  component: Portal,
+  decorators: [Story => {
+    // Since portal roots are registered globally, we need this line so that each storybook
+    // story works in isolation.
+    registerPortalRoot(undefined);
+    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.")))));
+};
+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.")), "Inner container")));
+};