@primer/components 0.0.0-20219835928 → 0.0.0-2022530195733

package/lib/stories/useAnchoredPosition.stories.js

@@ -0,0 +1,349 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithPortal = exports.ComplexAncestry = exports.CenteredOnScreen = exports.UseAnchoredPosition = exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _useAnchoredPosition = require("../hooks/useAnchoredPosition");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _constants = require("../constants");
+
+var _Portal = _interopRequireWildcard(require("../Portal"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+var _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.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react.default.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'
+      }
+    }
+  }
+};
+exports.default = _default;
+const Float = (0, _styledComponents.default)(_.Position).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:", ";"], (0, _constants.get)('colors.black'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.orange.3'), (0, _constants.get)('fontSizes.3'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('space.3'));
+const Anchor = (0, _styledComponents.default)(_.Position).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:", ";"], (0, _constants.get)('colors.black'), (0, _constants.get)('radii.2'), (0, _constants.get)('colors.blue.3'), (0, _constants.get)('fontSizes.3'), (0, _constants.get)('fontWeights.bold'), (0, _constants.get)('space.3')); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+const UseAnchoredPosition = args => {
+  var _args$anchorPosition, _args$anchorSide, _args$anchorAlignment, _parseInt, _parseInt2, _args$allowOutOfBound, _args$anchorY, _args$anchorX, _position$top, _position$left, _args$floatWidth, _args$floatHeight;
+
+  const {
+    floatingElementRef,
+    anchorElementRef,
+    position
+  } = (0, _useAnchoredPosition.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 = parseInt(args.anchorOffset, 10)) !== null && _parseInt !== void 0 ? _parseInt : undefined),
+    alignmentOffset: args.alignmentOffset && ((_parseInt2 = parseInt(args.alignmentOffset, 10)) !== null && _parseInt2 !== void 0 ? _parseInt2 : undefined),
+    allowOutOfBounds: (_args$allowOutOfBound = args.allowOutOfBounds) !== null && _args$allowOutOfBound !== void 0 ? _args$allowOutOfBound : undefined
+  }, [args]);
+  return /*#__PURE__*/_react.default.createElement(_.Relative, {
+    m: 2
+  }, /*#__PURE__*/_react.default.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.default.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"));
+};
+
+exports.UseAnchoredPosition = UseAnchoredPosition;
+UseAnchoredPosition.displayName = "UseAnchoredPosition";
+
+const CenteredOnScreen = () => {
+  var _position$top2, _position$left2;
+
+  const {
+    floatingElementRef,
+    anchorElementRef,
+    position
+  } = (0, _useAnchoredPosition.useAnchoredPosition)({
+    side: 'inside-center',
+    align: 'center'
+  }); // The outer Position element simply fills all available space
+
+  return /*#__PURE__*/_react.default.createElement(_.Position, {
+    ref: anchorElementRef,
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0
+  }, /*#__PURE__*/_react.default.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.default.createElement("p", null, "Screen-Centered Floating Element "), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("small", null, /*#__PURE__*/_react.default.createElement("em", null, "(Controls are ignored for this story)")))));
+};
+
+exports.CenteredOnScreen = CenteredOnScreen;
+CenteredOnScreen.displayName = "CenteredOnScreen";
+
+const ComplexAncestry = () => {
+  var _position$top3, _position$left3;
+
+  const [recalculateSignal, setRecalculateSignal] = _react.default.useState(0);
+
+  const {
+    floatingElementRef,
+    anchorElementRef,
+    position
+  } = (0, _useAnchoredPosition.useAnchoredPosition)({
+    side: 'outside-bottom',
+    align: 'start'
+  }, [recalculateSignal]);
+
+  const onRecalculateClick = _react.default.useCallback(() => {
+    setRecalculateSignal(recalculateSignal + 1);
+  }, [recalculateSignal]); // The outer Position element simply fills all available space
+
+
+  const space = 2;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.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.default.createElement("code", null, "overflow"), " set to something other than ", /*#__PURE__*/_react.default.createElement("code", null, "visible"), /*#__PURE__*/_react.default.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.default.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.default.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.default.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.default.createElement(_.Box, {
+    width: "200px",
+    backgroundColor: "orange.3",
+    height: 60,
+    ref: anchorElementRef,
+    sx: {
+      border: '1px solid #000'
+    },
+    m: space,
+    p: space
+  }, "Anchor Element"))), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    onClick: onRecalculateClick
+  }, "Click to recalculate floating position"));
+};
+
+exports.ComplexAncestry = ComplexAncestry;
+const Nav = (0, _styledComponents.default)('nav').withConfig({
+  displayName: "useAnchoredPositionstories__Nav",
+  componentId: "sc-18cdzou-2"
+})(["width:300px;padding:", ";position:relative;overflow:hidden;border-right:1px solid ", ";"], (0, _constants.get)('space.3'), (0, _constants.get)('colors.border.gray'));
+const Main = (0, _styledComponents.default)('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).
+
+*/
+
+const WithPortal = () => {
+  var _position$top4, _position$left4;
+
+  const [showMenu, setShowMenu] = _react.default.useState(false);
+
+  const mainRef = _react.default.useRef(null); // Calculate the position of the menu
+
+
+  const {
+    floatingElementRef,
+    anchorElementRef,
+    position
+  } = (0, _useAnchoredPosition.useAnchoredPosition)({
+    side: 'outside-bottom',
+    align: 'start'
+  }, [showMenu]); // Register <Main> as the Portal root
+
+  _react.default.useEffect(() => {
+    if (mainRef.current) {
+      (0, _Portal.registerPortalRoot)(mainRef.current);
+    }
+  }, [mainRef]); // Toggles rendering the menu when the button is clicked
+
+
+  const toggleMenu = _react.default.useCallback(() => {
+    setShowMenu(!showMenu);
+  }, [showMenu]);
+
+  return /*#__PURE__*/_react.default.createElement(Main, {
+    ref: mainRef
+  }, /*#__PURE__*/_react.default.createElement(Nav, null, /*#__PURE__*/_react.default.createElement("h2", null, "The nav bar!"), /*#__PURE__*/_react.default.createElement("p", null, "This \u201Cnav bar\u201D has a width of 300px and is ", /*#__PURE__*/_react.default.createElement("code", null, "position:relative"), " with", ' ', /*#__PURE__*/_react.default.createElement("code", null, "overflow:hidden"), ", meaning that its children cannot overflow this container. Using <Portal> with ", /*#__PURE__*/_react.default.createElement("code", null, "useAnchoredPosition"), ", we can break out of this contraint."), /*#__PURE__*/_react.default.createElement(_.Box, {
+    sx: {
+      textAlign: 'right'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_.ButtonPrimary, {
+    onClick: toggleMenu,
+    ref: anchorElementRef
+  }, "Show the overlay!"), showMenu && /*#__PURE__*/_react.default.createElement(_Portal.default, null, /*#__PURE__*/_react.default.createElement(Float, {
+    ref: floatingElementRef,
+    top: (_position$top4 = position === null || position === void 0 ? void 0 : position.top) !== null && _position$top4 !== void 0 ? _position$top4 : 0,
+    left: (_position$left4 = position === null || position === void 0 ? void 0 : position.left) !== null && _position$left4 !== void 0 ? _position$left4 : 0,
+    width: 250,
+    height: 400,
+    sx: {
+      visibility: position ? 'visible' : 'hidden'
+    }
+  }, "An un-constrained overlay!")))), /*#__PURE__*/_react.default.createElement(_.Box, {
+    sx: {
+      flexGrow: 1
+    },
+    p: 3
+  }, /*#__PURE__*/_react.default.createElement("h1", null, "The body!"), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("em", null, "Note: The controls below have no effect in this story."))));
+};
+
+exports.WithPortal = WithPortal;
+WithPortal.displayName = "WithPortal";

package/lib/stories/useFocusTrap.stories.js

@@ -0,0 +1,278 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultipleFocusTraps = exports.DynamicFocusTrapContents = exports.CustomInitialFocus = exports.FocusTrap = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _ = require("..");
+
+var _useFocusTrap = require("../hooks/useFocusTrap");
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
+var _themeGet = require("@styled-system/theme-get");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+var _default = {
+  title: 'Hooks/useFocusTrap',
+  decorators: [Story => {
+    return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react.default.createElement(_.BaseStyles, null, /*#__PURE__*/_react.default.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!
+
+exports.default = _default;
+const HelperGlobalStyling = (0, _styledComponents.createGlobalStyle)`
+  *:focus {
+    outline: 2px solid ${(0, _themeGet.themeGet)('colors.blue.3')} !important;
+  }
+  [data-focus-trap='active'] {
+    background-color: ${(0, _themeGet.themeGet)('colors.green.2')}
+  }
+  [data-focus-trap='suspended'] {
+    background-color: ${(0, _themeGet.themeGet)('colors.yellow.2')}
+  }
+`;
+const MarginButton = (0, _styledComponents.default)(_.Button).withConfig({
+  displayName: "useFocusTrapstories__MarginButton",
+  componentId: "sc-12zkn1e-0"
+})(["margin:", " 0;"], (0, _themeGet.themeGet)('space.1'));
+
+const FocusTrap = () => {
+  const [trapEnabled, setTrapEnabled] = _react.default.useState(false);
+
+  const {
+    containerRef
+  } = (0, _useFocusTrap.useFocusTrap)({
+    disabled: !trapEnabled
+  });
+
+  const spaceListener = _react.default.useCallback(event => {
+    if (event.key === ' ') {
+      setTrapEnabled(!trapEnabled);
+    }
+  }, [trapEnabled]);
+
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keypress', spaceListener);
+    return () => {
+      document.removeEventListener('keypress', spaceListener);
+    };
+  }, [spaceListener]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HelperGlobalStyling, null), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Apple"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(_.BorderBox, {
+    borderColor: "gray.5",
+    ref: containerRef,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Trap zone! Press SPACE to ", trapEnabled ? 'deactivate' : 'activate', "."), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Durian"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Fig"))), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Jackfruit")));
+};
+
+exports.FocusTrap = FocusTrap;
+
+const CustomInitialFocus = () => {
+  const [trapEnabled, setTrapEnabled] = _react.default.useState(false);
+
+  const {
+    containerRef,
+    initialFocusRef
+  } = (0, _useFocusTrap.useFocusTrap)({
+    disabled: !trapEnabled
+  });
+
+  const spaceListener = _react.default.useCallback(event => {
+    if (event.key === ' ') {
+      setTrapEnabled(!trapEnabled);
+    }
+  }, [trapEnabled]);
+
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keypress', spaceListener);
+    return () => {
+      document.removeEventListener('keypress', spaceListener);
+    };
+  }, [spaceListener]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HelperGlobalStyling, null), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(_.Flash, {
+    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.default.createElement(MarginButton, null, "Apple"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(_.BorderBox, {
+    borderColor: "gray.5",
+    ref: containerRef,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Trap zone! Press SPACE to ", trapEnabled ? 'deactivate' : 'activate', "."), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Durian"), /*#__PURE__*/_react.default.createElement(MarginButton, {
+    ref: initialFocusRef
+  }, "Elderberry"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Fig"))), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Jackfruit")));
+};
+
+exports.CustomInitialFocus = CustomInitialFocus;
+
+function useKeyPressListener(key, handler, capture = false) {
+  const listener = (0, _react.useCallback)(event => {
+    if (event.key === key) {
+      handler();
+    }
+  }, [key, handler]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keypress', listener, {
+      capture
+    });
+    return () => {
+      document.removeEventListener('keypress', listener, {
+        capture
+      });
+    };
+  }, [listener, capture]);
+}
+
+function ToggleableButton({
+  name
+}) {
+  const [showButton, setShowButton] = _react.default.useState(true);
+
+  const key = name.substr(0, 1).toLowerCase();
+  useKeyPressListener(key, (0, _react.useCallback)(() => setShowButton(!showButton), [showButton]));
+  return /*#__PURE__*/_react.default.createElement("span", null, showButton ? /*#__PURE__*/_react.default.createElement(MarginButton, null, name) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, name, " (Hidden) - "), "Press ", key, " to toggle");
+}
+
+ToggleableButton.displayName = "ToggleableButton";
+
+const DynamicFocusTrapContents = () => {
+  const [trapEnabled, setTrapEnabled] = _react.default.useState(false);
+
+  const {
+    containerRef
+  } = (0, _useFocusTrap.useFocusTrap)({
+    disabled: !trapEnabled
+  });
+  useKeyPressListener(' ', (0, _react.useCallback)(() => setTrapEnabled(!trapEnabled), [trapEnabled]));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HelperGlobalStyling, null), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Apple"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(_.BorderBox, {
+    borderColor: "gray.5",
+    ref: containerRef,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Trap zone! Press SPACE to ", trapEnabled ? 'deactivate' : 'activate', "."), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(ToggleableButton, {
+    name: "Durian"
+  }), /*#__PURE__*/_react.default.createElement(ToggleableButton, {
+    name: "Elderberry"
+  }), /*#__PURE__*/_react.default.createElement(ToggleableButton, {
+    name: "Fig"
+  }))), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Jackfruit")));
+};
+
+exports.DynamicFocusTrapContents = DynamicFocusTrapContents;
+
+const MultipleFocusTraps = () => {
+  const [trapEnabled1, setTrapEnabled1] = _react.default.useState(false);
+
+  const [trapEnabled2, setTrapEnabled2] = _react.default.useState(false);
+
+  const {
+    containerRef: containerRef1
+  } = (0, _useFocusTrap.useFocusTrap)({
+    disabled: !trapEnabled1
+  });
+  const {
+    containerRef: containerRef2
+  } = (0, _useFocusTrap.useFocusTrap)({
+    disabled: !trapEnabled2
+  });
+
+  const keyListener = _react.default.useCallback(event => {
+    if (event.key === '1') {
+      setTrapEnabled1(!trapEnabled1);
+    }
+
+    if (event.key === '2') {
+      setTrapEnabled2(!trapEnabled2);
+    }
+  }, [trapEnabled1, trapEnabled2]);
+
+  (0, _react.useEffect)(() => {
+    document.addEventListener('keydown', keyListener, {
+      capture: true
+    });
+    return () => {
+      document.removeEventListener('keydown', keyListener, {
+        capture: true
+      });
+    };
+  }, [keyListener]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HelperGlobalStyling, null), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(_.Flash, {
+    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.default.createElement(_.BorderBox, {
+    p: 2,
+    mb: 3
+  }, "Legend", /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "row"
+  }, /*#__PURE__*/_react.default.createElement(_.BorderBox, {
+    width: 40,
+    height: 22,
+    mr: 2,
+    borderColor: "gray.5"
+  }), /*#__PURE__*/_react.default.createElement(_.Text, null, " - Inactive")), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "row"
+  }, /*#__PURE__*/_react.default.createElement(_.BorderBox, {
+    width: 40,
+    height: 22,
+    mr: 2,
+    borderColor: "gray.5",
+    backgroundColor: "yellow.2"
+  }), /*#__PURE__*/_react.default.createElement(_.Text, null, " - Suspended")), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "row"
+  }, /*#__PURE__*/_react.default.createElement(_.BorderBox, {
+    width: 40,
+    height: 22,
+    mr: 2,
+    borderColor: "gray.5",
+    backgroundColor: "green.2"
+  }), /*#__PURE__*/_react.default.createElement(_.Text, null, " - Active"))), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Apple"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(_.BorderBox, {
+    borderColor: "gray.5",
+    ref: containerRef1,
+    m: 2,
+    p: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Trap zone (", trapEnabled1 ? 'enabled' : 'disabled', ")! Press ", /*#__PURE__*/_react.default.createElement("code", null, "1"), " to toggle."), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Durian"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Fig"))), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Jackfruit"), /*#__PURE__*/_react.default.createElement(_.BorderBox, {
+    borderColor: "gray.5",
+    ref: containerRef2,
+    m: 2,
+    p: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Trap zone (", trapEnabled2 ? 'enabled' : 'disabled', ")! Press ", /*#__PURE__*/_react.default.createElement("code", null, "2"), " to toggle."), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Kiwi"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Mango"))), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Nectarine"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Orange"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Peach")));
+};
+
+exports.MultipleFocusTraps = MultipleFocusTraps;