@primer/components 33.0.0-rc.dcc047ad → 33.0.0

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

@@ -1,313 +0,0 @@
-import React from 'react';
-import { BaseStyles, Box, ButtonPrimary, ThemeProvider } from '..';
-import { useAnchoredPosition } from '../hooks';
-import styled from 'styled-components';
-import { get } from '../constants';
-import Portal, { registerPortalRoot } from '../Portal';
-import Button from '../Button';
-export default {
-  title: 'Hooks/useAnchoredPosition',
-  decorators: [// Note: For some reason, if you use <BaseStyles><Story /></BaseStyles>,
-  // the component gets unmounted from the root every time a control changes!
-  Story => {
-    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, Story()));
-  }],
-  argTypes: {
-    anchorX: {
-      control: {
-        type: 'range',
-        min: 0,
-        max: 500
-      }
-    },
-    anchorY: {
-      control: {
-        type: 'range',
-        min: 0,
-        max: 500
-      }
-    },
-    anchorWidth: {
-      control: {
-        type: 'range',
-        min: 50,
-        max: 500
-      }
-    },
-    anchorHeight: {
-      control: {
-        type: 'range',
-        min: 50,
-        max: 500
-      }
-    },
-    floatWidth: {
-      control: {
-        type: 'range',
-        min: 50,
-        max: 500
-      }
-    },
-    floatHeight: {
-      control: {
-        type: 'range',
-        min: 50,
-        max: 500
-      }
-    },
-    anchorPosition: {
-      control: {
-        type: 'inline-radio',
-        options: ['inside', 'outside']
-      }
-    },
-    anchorSide: {
-      control: {
-        type: 'inline-radio',
-        options: ['top', 'bottom', 'left', 'right', 'center']
-      },
-      description: 'note'
-    },
-    anchorAlignment: {
-      control: {
-        type: 'inline-radio',
-        options: ['first', 'center', 'last']
-      }
-    },
-    anchorOffset: {
-      control: {
-        type: 'range',
-        min: -100,
-        max: 100
-      }
-    },
-    alignmentOffset: {
-      control: {
-        type: 'range',
-        min: -100,
-        max: 100
-      }
-    },
-    allowOutOfBounds: {
-      control: {
-        type: 'boolean'
-      }
-    }
-  }
-};
-const Float = styled(Box).withConfig({
-  displayName: "useAnchoredPositionstories__Float",
-  componentId: "sc-18cdzou-0"
-})(["position:absolute;border:1px solid ", ";border-radius:", ";background-color:", ";display:flex;flex-direction:column;text-align:center;font-size:", ";font-weight:", ";padding:", ";"], get('colors.black'), get('radii.2'), get('colors.orange.3'), get('fontSizes.3'), get('fontWeights.bold'), get('space.3'));
-const Anchor = styled(Box).withConfig({
-  displayName: "useAnchoredPositionstories__Anchor",
-  componentId: "sc-18cdzou-1"
-})(["position:absolute;border:1px solid ", ";border-radius:", ";background-color:", ";display:flex;flex-direction:column;text-align:center;font-size:", ";font-weight:", ";padding:", ";"], get('colors.black'), get('radii.2'), get('colors.blue.3'), get('fontSizes.3'), get('fontWeights.bold'), get('space.3')); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
-export const UseAnchoredPosition = args => {
-  var _args$anchorPosition, _args$anchorSide, _args$anchorAlignment, _args$allowOutOfBound, _args$anchorY, _args$anchorX, _position$top, _position$left, _args$floatWidth, _args$floatHeight;
-
-  const {
-    floatingElementRef,
-    anchorElementRef,
-    position
-  } = useAnchoredPosition({
-    side: `${(_args$anchorPosition = args.anchorPosition) !== null && _args$anchorPosition !== void 0 ? _args$anchorPosition : 'outside'}-${(_args$anchorSide = args.anchorSide) !== null && _args$anchorSide !== void 0 ? _args$anchorSide : 'bottom'}`,
-    align: (_args$anchorAlignment = args.anchorAlignment) !== null && _args$anchorAlignment !== void 0 ? _args$anchorAlignment : 'start',
-    anchorOffset: args.anchorOffset && parseInt(args.anchorOffset, 10),
-    alignmentOffset: args.alignmentOffset && parseInt(args.alignmentOffset, 10),
-    allowOutOfBounds: (_args$allowOutOfBound = args.allowOutOfBounds) !== null && _args$allowOutOfBound !== void 0 ? _args$allowOutOfBound : undefined
-  }, [args.anchorY, args.anchorX, args.anchorPosition, args.anchorSide, args.anchorAlignment, args.anchorOffset, args.alignmentOffset, args.allowOutOfBounds, args.floatHeight, args.floatWidth]);
-  return /*#__PURE__*/React.createElement(Box, {
-    position: "relative",
-    m: 2
-  }, /*#__PURE__*/React.createElement(Anchor, {
-    top: (_args$anchorY = args.anchorY) !== null && _args$anchorY !== void 0 ? _args$anchorY : 0,
-    left: (_args$anchorX = args.anchorX) !== null && _args$anchorX !== void 0 ? _args$anchorX : 0,
-    width: args.anchorWidth,
-    height: args.anchorHeight,
-    ref: anchorElementRef
-  }, "Anchor Element"), /*#__PURE__*/React.createElement(Float, {
-    top: (_position$top = position === null || position === void 0 ? void 0 : position.top) !== null && _position$top !== void 0 ? _position$top : 0,
-    left: (_position$left = position === null || position === void 0 ? void 0 : position.left) !== null && _position$left !== void 0 ? _position$left : 0,
-    width: (_args$floatWidth = args.floatWidth) !== null && _args$floatWidth !== void 0 ? _args$floatWidth : 150,
-    height: (_args$floatHeight = args.floatHeight) !== null && _args$floatHeight !== void 0 ? _args$floatHeight : 150,
-    ref: floatingElementRef
-  }, "Floating element"));
-};
-UseAnchoredPosition.displayName = "UseAnchoredPosition";
-export const CenteredOnScreen = () => {
-  var _position$top2, _position$left2;
-
-  const {
-    floatingElementRef,
-    anchorElementRef,
-    position
-  } = useAnchoredPosition({
-    side: 'inside-center',
-    align: 'center'
-  }); // The outer Position element simply fills all available space
-
-  return /*#__PURE__*/React.createElement(Box, {
-    ref: anchorElementRef,
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    left: 0,
-    right: 0
-  }, /*#__PURE__*/React.createElement(Float, {
-    ref: floatingElementRef,
-    top: (_position$top2 = position === null || position === void 0 ? void 0 : position.top) !== null && _position$top2 !== void 0 ? _position$top2 : 0,
-    left: (_position$left2 = position === null || position === void 0 ? void 0 : position.left) !== null && _position$left2 !== void 0 ? _position$left2 : 0
-  }, /*#__PURE__*/React.createElement("p", null, "Screen-Centered Floating Element "), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("small", null, /*#__PURE__*/React.createElement("em", null, "(Controls are ignored for this story)")))));
-};
-CenteredOnScreen.displayName = "CenteredOnScreen";
-export const ComplexAncestry = () => {
-  var _position$top3, _position$left3;
-
-  const [recalculateSignal, setRecalculateSignal] = React.useState(0);
-  const {
-    floatingElementRef,
-    anchorElementRef,
-    position
-  } = useAnchoredPosition({
-    side: 'outside-bottom',
-    align: 'start'
-  }, [recalculateSignal]);
-  const onRecalculateClick = React.useCallback(() => {
-    setRecalculateSignal(recalculateSignal + 1);
-  }, [recalculateSignal]); // The outer Position element simply fills all available space
-
-  const space = 2;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Box, {
-    m: space,
-    p: space,
-    sx: {
-      border: '1px solid #000',
-      backgroundColor: 'blue.1',
-      height: '440px',
-      overflow: 'auto',
-      position: 'relative'
-    }
-  }, "Clipping container - this element has ", /*#__PURE__*/React.createElement("code", null, "overflow"), " set to something other than ", /*#__PURE__*/React.createElement("code", null, "visible"), /*#__PURE__*/React.createElement(Box, {
-    m: space,
-    p: space,
-    sx: {
-      border: '1px solid #000',
-      backgroundColor: 'blue.2',
-      position: 'relative'
-    }
-  }, "Relatively positioned parent, but fluid height, so not the clipping parent.", /*#__PURE__*/React.createElement(Box, {
-    m: space,
-    p: space,
-    sx: {
-      border: '1px solid #000',
-      backgroundColor: 'blue.3',
-      position: 'static',
-      overflow: 'hidden'
-    }
-  }, "Floating element container. Position=static and overflow=hidden to show that overflow-hidden on a statically-positioned element will not have any effect.", /*#__PURE__*/React.createElement(Float, {
-    top: (_position$top3 = position === null || position === void 0 ? void 0 : position.top) !== null && _position$top3 !== void 0 ? _position$top3 : 0,
-    left: (_position$left3 = position === null || position === void 0 ? void 0 : position.left) !== null && _position$left3 !== void 0 ? _position$left3 : 0,
-    width: 150,
-    height: 220,
-    ref: floatingElementRef
-  }, "Floating element"))), /*#__PURE__*/React.createElement(Box, {
-    m: space,
-    p: space,
-    backgroundColor: "blue.3",
-    sx: {
-      border: '1px solid #000',
-      height: '2000px'
-    }
-  }, "Anchor element container. This element is really tall to demonstrate behavior within a scrollable clipping container.", /*#__PURE__*/React.createElement(Box, {
-    width: "200px",
-    backgroundColor: "orange.3",
-    height: 60,
-    ref: anchorElementRef,
-    sx: {
-      border: '1px solid #000'
-    },
-    m: space,
-    p: space
-  }, "Anchor Element"))), /*#__PURE__*/React.createElement(Button, {
-    onClick: onRecalculateClick
-  }, "Click to recalculate floating position"));
-};
-const Nav = styled('nav').withConfig({
-  displayName: "useAnchoredPositionstories__Nav",
-  componentId: "sc-18cdzou-2"
-})(["width:300px;padding:", ";position:relative;overflow:hidden;border-right:1px solid ", ";"], get('space.3'), get('colors.border.gray'));
-const Main = styled('main').withConfig({
-  displayName: "useAnchoredPositionstories__Main",
-  componentId: "sc-18cdzou-3"
-})(["display:flex;position:absolute;top:0;left:0;right:0;bottom:0;"]);
-/*
-
-There are a few "gotchas" to take note of from this example. See the
-documentation for more info.
-
-1. The portal's root (<Main> in this example) needs to be large enough
-   to include ANY space that the overlay might need to take. By default,
-   elements are not rendered at full height! Notice how <Main> uses
-   top, left, right, and bottom all set to 0 to achieve a full-size box.
-
-2. The positioning routine needs to know the size of the overlay before
-   calculating its position! Therefore, we use visibility: hidden to
-   prevent showing a single frame of the overlay being positioned at
-   (0, 0).
-
-*/
-
-export const WithPortal = () => {
-  var _position$top4, _position$left4;
-
-  const [showMenu, setShowMenu] = React.useState(false);
-  const mainRef = React.useRef(null); // Calculate the position of the menu
-
-  const {
-    floatingElementRef,
-    anchorElementRef,
-    position
-  } = useAnchoredPosition({
-    side: 'outside-bottom',
-    align: 'start'
-  }, [showMenu]); // Register <Main> as the Portal root
-
-  React.useEffect(() => {
-    if (mainRef.current) {
-      registerPortalRoot(mainRef.current);
-    }
-  }, [mainRef]); // Toggles rendering the menu when the button is clicked
-
-  const toggleMenu = React.useCallback(() => {
-    setShowMenu(!showMenu);
-  }, [showMenu]);
-  return /*#__PURE__*/React.createElement(Main, {
-    ref: mainRef
-  }, /*#__PURE__*/React.createElement(Nav, null, /*#__PURE__*/React.createElement("h2", null, "The nav bar!"), /*#__PURE__*/React.createElement("p", null, "This \u201Cnav bar\u201D has a width of 300px and is ", /*#__PURE__*/React.createElement("code", null, "position:relative"), " with", ' ', /*#__PURE__*/React.createElement("code", null, "overflow:hidden"), ", meaning that its children cannot overflow this container. Using <Portal> with ", /*#__PURE__*/React.createElement("code", null, "useAnchoredPosition"), ", we can break out of this contraint."), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      textAlign: 'right'
-    }
-  }, /*#__PURE__*/React.createElement(ButtonPrimary, {
-    onClick: toggleMenu,
-    ref: anchorElementRef
-  }, "Show the overlay!"), showMenu ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Float, {
-    ref: floatingElementRef,
-    style: {
-      top: `${(_position$top4 = position === null || position === void 0 ? void 0 : position.top) !== null && _position$top4 !== void 0 ? _position$top4 : 0}px`,
-      left: `${(_position$left4 = position === null || position === void 0 ? void 0 : position.left) !== null && _position$left4 !== void 0 ? _position$left4 : 0}px`
-    },
-    width: 250,
-    height: 400,
-    sx: {
-      visibility: position ? 'visible' : 'hidden'
-    }
-  }, "An un-constrained overlay!")) : null)), /*#__PURE__*/React.createElement(Box, {
-    sx: {
-      flexGrow: 1
-    },
-    p: 3
-  }, /*#__PURE__*/React.createElement("h1", null, "The body!"), /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("em", null, "Note: The controls below have no effect in this story."))));
-};
-WithPortal.displayName = "WithPortal";

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

@@ -1,313 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-import styled, { createGlobalStyle } from 'styled-components';
-import { BaseStyles, Box, Button, Flash, Text, ThemeProvider } from '..';
-import { useFocusTrap } from '../hooks/useFocusTrap';
-import { themeGet } from '@styled-system/theme-get';
-export default {
-  title: 'Hooks/useFocusTrap',
-  decorators: [Story => {
-    return /*#__PURE__*/React.createElement(ThemeProvider, null, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Story, null)));
-  }]
-}; // NOTE: the below styles are solely intended as a visual aid for
-// this Storybook story, but they're not recommended for a real site!
-
-const HelperGlobalStyling = createGlobalStyle`
-  *:focus {
-    outline: 2px solid ${themeGet('colors.auto.blue.3')} !important;
-  }
-  [data-focus-trap='active'] {
-    background-color: ${themeGet('colors.auto.green.2')}
-  }
-  [data-focus-trap='suspended'] {
-    background-color: ${themeGet('colors.auto.yellow.2')}
-  }
-`;
-const MarginButton = styled(Button).withConfig({
-  displayName: "useFocusTrapstories__MarginButton",
-  componentId: "sc-12zkn1e-0"
-})(["margin:", " 0;"], themeGet('space.1'));
-export const FocusTrap = () => {
-  const [trapEnabled, setTrapEnabled] = React.useState(false);
-  const {
-    containerRef
-  } = useFocusTrap({
-    disabled: !trapEnabled
-  });
-  const spaceListener = React.useCallback(event => {
-    if (event.key === ' ') {
-      setTrapEnabled(!trapEnabled);
-    }
-  }, [trapEnabled]);
-  useEffect(() => {
-    document.addEventListener('keypress', spaceListener);
-    return () => {
-      document.removeEventListener('keypress', spaceListener);
-    };
-  }, [spaceListener]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start"
-  }, /*#__PURE__*/React.createElement(MarginButton, null, "Apple"), /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(Box, {
-    borderColor: "gray.5",
-    ref: containerRef,
-    m: 4,
-    p: 4,
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 2
-  }, /*#__PURE__*/React.createElement("strong", null, "Trap zone! Press SPACE to ", trapEnabled ? 'deactivate' : 'activate', "."), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start"
-  }, /*#__PURE__*/React.createElement(MarginButton, null, "Durian"), /*#__PURE__*/React.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/React.createElement(MarginButton, null, "Fig"))), /*#__PURE__*/React.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/React.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/React.createElement(MarginButton, null, "Jackfruit")));
-};
-export const RestoreFocus = () => {
-  const [trapEnabled, setTrapEnabled] = React.useState(false);
-  const {
-    containerRef
-  } = useFocusTrap({
-    disabled: !trapEnabled,
-    restoreFocusOnCleanUp: true
-  });
-  const spaceListener = React.useCallback(event => {
-    if (event.key === ' ') {
-      setTrapEnabled(!trapEnabled);
-    }
-  }, [trapEnabled]);
-  useEffect(() => {
-    document.addEventListener('keypress', spaceListener);
-    return () => {
-      document.removeEventListener('keypress', spaceListener);
-    };
-  }, [spaceListener]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start"
-  }, /*#__PURE__*/React.createElement(MarginButton, null, "Apple"), /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(Box, {
-    borderColor: "gray.5",
-    ref: containerRef,
-    m: 4,
-    p: 4,
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 2
-  }, /*#__PURE__*/React.createElement("strong", null, "Trap zone! Press SPACE to ", trapEnabled ? 'deactivate' : 'activate', "."), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start"
-  }, /*#__PURE__*/React.createElement(MarginButton, null, "Durian"), /*#__PURE__*/React.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/React.createElement(MarginButton, null, "Fig"))), /*#__PURE__*/React.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/React.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/React.createElement(MarginButton, null, "Jackfruit")));
-};
-export const CustomInitialFocus = () => {
-  const [trapEnabled, setTrapEnabled] = React.useState(false);
-  const {
-    containerRef,
-    initialFocusRef
-  } = useFocusTrap({
-    disabled: !trapEnabled
-  });
-  const spaceListener = React.useCallback(event => {
-    if (event.key === ' ') {
-      setTrapEnabled(!trapEnabled);
-    }
-  }, [trapEnabled]);
-  useEffect(() => {
-    document.addEventListener('keypress', spaceListener);
-    return () => {
-      document.removeEventListener('keypress', spaceListener);
-    };
-  }, [spaceListener]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start"
-  }, /*#__PURE__*/React.createElement(Flash, {
-    sx: {
-      mb: 3
-    }
-  }, "This story is the same as the `Focus Trap` story, except, when the trap zone is activated, the \u201CElderberry\u201D button will receive the initial focus (if the trap zone container does not already have focus)."), /*#__PURE__*/React.createElement(MarginButton, null, "Apple"), /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(Box, {
-    borderColor: "gray.5",
-    ref: containerRef,
-    m: 4,
-    p: 4,
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 2
-  }, /*#__PURE__*/React.createElement("strong", null, "Trap zone! Press SPACE to ", trapEnabled ? 'deactivate' : 'activate', "."), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start"
-  }, /*#__PURE__*/React.createElement(MarginButton, null, "Durian"), /*#__PURE__*/React.createElement(MarginButton, {
-    ref: initialFocusRef
-  }, "Elderberry"), /*#__PURE__*/React.createElement(MarginButton, null, "Fig"))), /*#__PURE__*/React.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/React.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/React.createElement(MarginButton, null, "Jackfruit")));
-};
-
-function useKeyPressListener(key, handler, capture = false) {
-  const listener = useCallback(event => {
-    if (event.key === key) {
-      handler();
-    }
-  }, [key, handler]);
-  useEffect(() => {
-    document.addEventListener('keypress', listener, {
-      capture
-    });
-    return () => {
-      document.removeEventListener('keypress', listener, {
-        capture
-      });
-    };
-  }, [listener, capture]);
-}
-
-function ToggleableButton({
-  name
-}) {
-  const [showButton, setShowButton] = React.useState(true);
-  const key = name.substr(0, 1).toLowerCase();
-  useKeyPressListener(key, useCallback(() => setShowButton(!showButton), [showButton]));
-  return /*#__PURE__*/React.createElement("span", null, showButton ? /*#__PURE__*/React.createElement(MarginButton, null, name) : /*#__PURE__*/React.createElement(React.Fragment, null, name, " (Hidden) - "), "Press ", key, " to toggle");
-}
-
-ToggleableButton.displayName = "ToggleableButton";
-export const DynamicFocusTrapContents = () => {
-  const [trapEnabled, setTrapEnabled] = React.useState(false);
-  const {
-    containerRef
-  } = useFocusTrap({
-    disabled: !trapEnabled
-  });
-  useKeyPressListener(' ', useCallback(() => setTrapEnabled(!trapEnabled), [trapEnabled]));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start"
-  }, /*#__PURE__*/React.createElement(MarginButton, null, "Apple"), /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(Box, {
-    borderColor: "gray.5",
-    ref: containerRef,
-    m: 4,
-    p: 4,
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 2
-  }, /*#__PURE__*/React.createElement("strong", null, "Trap zone! Press SPACE to ", trapEnabled ? 'deactivate' : 'activate', "."), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start"
-  }, /*#__PURE__*/React.createElement(ToggleableButton, {
-    name: "Durian"
-  }), /*#__PURE__*/React.createElement(ToggleableButton, {
-    name: "Elderberry"
-  }), /*#__PURE__*/React.createElement(ToggleableButton, {
-    name: "Fig"
-  }))), /*#__PURE__*/React.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/React.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/React.createElement(MarginButton, null, "Jackfruit")));
-};
-export const MultipleFocusTraps = () => {
-  const [trapEnabled1, setTrapEnabled1] = React.useState(false);
-  const [trapEnabled2, setTrapEnabled2] = React.useState(false);
-  const {
-    containerRef: containerRef1
-  } = useFocusTrap({
-    disabled: !trapEnabled1
-  });
-  const {
-    containerRef: containerRef2
-  } = useFocusTrap({
-    disabled: !trapEnabled2
-  });
-  const keyListener = React.useCallback(event => {
-    if (event.key === '1') {
-      setTrapEnabled1(!trapEnabled1);
-    }
-
-    if (event.key === '2') {
-      setTrapEnabled2(!trapEnabled2);
-    }
-  }, [trapEnabled1, trapEnabled2]);
-  useEffect(() => {
-    document.addEventListener('keydown', keyListener, {
-      capture: true
-    });
-    return () => {
-      document.removeEventListener('keydown', keyListener, {
-        capture: true
-      });
-    };
-  }, [keyListener]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start"
-  }, /*#__PURE__*/React.createElement(Flash, {
-    sx: {
-      mb: 3
-    }
-  }, "This story demonstrates the global nature of focus traps. When a focus trap is enabled, if there is already an active focus trap, it becomes suspended and pushed onto a stack. Once the newly-active focus trap is disabled, the most recently-suspended trap will reactivate. Suspended focus traps can be disabled, causing them to be removed from the stack of suspended traps."), /*#__PURE__*/React.createElement(Box, {
-    p: 2,
-    mb: 3,
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderColor: "border.default",
-    borderRadius: 2
-  }, "Legend", /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "row"
-  }, /*#__PURE__*/React.createElement(Box, {
-    width: 40,
-    height: 22,
-    mr: 2,
-    borderColor: "gray.5",
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 2
-  }), /*#__PURE__*/React.createElement(Text, null, " - Inactive")), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "row"
-  }, /*#__PURE__*/React.createElement(Box, {
-    width: 40,
-    height: 22,
-    mr: 2,
-    borderColor: "gray.5",
-    backgroundColor: "yellow.2",
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 2
-  }), /*#__PURE__*/React.createElement(Text, null, " - Suspended")), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "row"
-  }, /*#__PURE__*/React.createElement(Box, {
-    width: 40,
-    height: 22,
-    mr: 2,
-    borderColor: "gray.5",
-    backgroundColor: "green.2",
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 2
-  }), /*#__PURE__*/React.createElement(Text, null, " - Active"))), /*#__PURE__*/React.createElement(MarginButton, null, "Apple"), /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(Box, {
-    borderColor: "gray.5",
-    ref: containerRef1,
-    m: 2,
-    p: 2,
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 2
-  }, /*#__PURE__*/React.createElement("strong", null, "Trap zone (", trapEnabled1 ? 'enabled' : 'disabled', ")! Press ", /*#__PURE__*/React.createElement("code", null, "1"), " to toggle."), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start"
-  }, /*#__PURE__*/React.createElement(MarginButton, null, "Durian"), /*#__PURE__*/React.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/React.createElement(MarginButton, null, "Fig"))), /*#__PURE__*/React.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/React.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/React.createElement(MarginButton, null, "Jackfruit"), /*#__PURE__*/React.createElement(Box, {
-    borderColor: "gray.5",
-    ref: containerRef2,
-    m: 2,
-    p: 2,
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 2
-  }, /*#__PURE__*/React.createElement("strong", null, "Trap zone (", trapEnabled2 ? 'enabled' : 'disabled', ")! Press ", /*#__PURE__*/React.createElement("code", null, "2"), " to toggle."), /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start"
-  }, /*#__PURE__*/React.createElement(MarginButton, null, "Kiwi"), /*#__PURE__*/React.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/React.createElement(MarginButton, null, "Mango"))), /*#__PURE__*/React.createElement(MarginButton, null, "Nectarine"), /*#__PURE__*/React.createElement(MarginButton, null, "Orange"), /*#__PURE__*/React.createElement(MarginButton, null, "Peach")));
-};