@primer/components 31.0.0-rc.c90c1dae → 31.0.0

package/lib/stories/useFocusTrap.stories.js

@@ -1,356 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.MultipleFocusTraps = exports.DynamicFocusTrapContents = exports.CustomInitialFocus = exports.RestoreFocus = 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 _themeGet = require("@styled-system/theme-get");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
-
-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.auto.blue.3')} !important;
-  }
-  [data-focus-trap='active'] {
-    background-color: ${(0, _themeGet.themeGet)('colors.auto.green.2')}
-  }
-  [data-focus-trap='suspended'] {
-    background-color: ${(0, _themeGet.themeGet)('colors.auto.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(_.Box, {
-    display: "flex",
-    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(_.Box, {
-    borderColor: "gray.5",
-    ref: containerRef,
-    m: 4,
-    p: 4,
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 2
-  }, /*#__PURE__*/_react.default.createElement("strong", null, "Trap zone! Press SPACE to ", trapEnabled ? 'deactivate' : 'activate', "."), /*#__PURE__*/_react.default.createElement(_.Box, {
-    display: "flex",
-    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 RestoreFocus = () => {
-  const [trapEnabled, setTrapEnabled] = _react.default.useState(false);
-
-  const {
-    containerRef
-  } = (0, _useFocusTrap.useFocusTrap)({
-    disabled: !trapEnabled,
-    restoreFocusOnCleanUp: true
-  });
-
-  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(_.Box, {
-    display: "flex",
-    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(_.Box, {
-    borderColor: "gray.5",
-    ref: containerRef,
-    m: 4,
-    p: 4,
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 2
-  }, /*#__PURE__*/_react.default.createElement("strong", null, "Trap zone! Press SPACE to ", trapEnabled ? 'deactivate' : 'activate', "."), /*#__PURE__*/_react.default.createElement(_.Box, {
-    display: "flex",
-    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.RestoreFocus = RestoreFocus;
-
-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(_.Box, {
-    display: "flex",
-    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(_.Box, {
-    borderColor: "gray.5",
-    ref: containerRef,
-    m: 4,
-    p: 4,
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 2
-  }, /*#__PURE__*/_react.default.createElement("strong", null, "Trap zone! Press SPACE to ", trapEnabled ? 'deactivate' : 'activate', "."), /*#__PURE__*/_react.default.createElement(_.Box, {
-    display: "flex",
-    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(_.Box, {
-    display: "flex",
-    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(_.Box, {
-    borderColor: "gray.5",
-    ref: containerRef,
-    m: 4,
-    p: 4,
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 2
-  }, /*#__PURE__*/_react.default.createElement("strong", null, "Trap zone! Press SPACE to ", trapEnabled ? 'deactivate' : 'activate', "."), /*#__PURE__*/_react.default.createElement(_.Box, {
-    display: "flex",
-    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(_.Box, {
-    display: "flex",
-    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(_.Box, {
-    p: 2,
-    mb: 3,
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderColor: "border.default",
-    borderRadius: 2
-  }, "Legend", /*#__PURE__*/_react.default.createElement(_.Box, {
-    display: "flex",
-    flexDirection: "row"
-  }, /*#__PURE__*/_react.default.createElement(_.Box, {
-    width: 40,
-    height: 22,
-    mr: 2,
-    borderColor: "gray.5",
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 2
-  }), /*#__PURE__*/_react.default.createElement(_.Text, null, " - Inactive")), /*#__PURE__*/_react.default.createElement(_.Box, {
-    display: "flex",
-    flexDirection: "row"
-  }, /*#__PURE__*/_react.default.createElement(_.Box, {
-    width: 40,
-    height: 22,
-    mr: 2,
-    borderColor: "gray.5",
-    backgroundColor: "yellow.2",
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 2
-  }), /*#__PURE__*/_react.default.createElement(_.Text, null, " - Suspended")), /*#__PURE__*/_react.default.createElement(_.Box, {
-    display: "flex",
-    flexDirection: "row"
-  }, /*#__PURE__*/_react.default.createElement(_.Box, {
-    width: 40,
-    height: 22,
-    mr: 2,
-    borderColor: "gray.5",
-    backgroundColor: "green.2",
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 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(_.Box, {
-    borderColor: "gray.5",
-    ref: containerRef1,
-    m: 2,
-    p: 2,
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 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(_.Box, {
-    display: "flex",
-    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(_.Box, {
-    borderColor: "gray.5",
-    ref: containerRef2,
-    m: 2,
-    p: 2,
-    borderWidth: "1px",
-    borderStyle: "solid",
-    borderRadius: 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(_.Box, {
-    display: "flex",
-    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;