@primer/components 31.0.2-rc.1e80de40 → 31.1.0

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

@@ -1,309 +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, {
-    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, {
-    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")));
-};