@primer/components 29.1.0 → 29.1.1-rc.cea79543

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

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