@primer/components 33.0.0 → 33.1.0-rc.6856bcf5

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

@@ -0,0 +1,558 @@
+import React, { useCallback, useRef, useState } from 'react';
+import styled, { createGlobalStyle } from 'styled-components';
+import { Box, BaseStyles, Button, Flash, theme, ThemeProvider } from '..';
+import { FocusKeys } from '../behaviors/focusZone';
+import { themeGet } from '@styled-system/theme-get';
+import { useFocusZone } from '../hooks/useFocusZone';
+import { useTheme } from '../ThemeProvider';
+import { ButtonDanger, ButtonPrimary } from '../Button';
+export default {
+  title: 'Hooks/useFocusZone',
+  decorators: [Story => {
+    return /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme
+    }, /*#__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 ", " !important;}"], themeGet('colors.border.info'));
+const MarginButton = styled(Button).withConfig({
+  displayName: "useFocusZonestories__MarginButton",
+  componentId: "sc-e94kdz-0"
+})(["margin:", ";"], themeGet('space.1'));
+export const BasicFocusZone = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = useState('none');
+  const reportKey = useCallback(event => {
+    setLastKey(event.key);
+  }, []);
+  const [fzEnabled, setFzEnabled] = useState(true);
+  const {
+    containerRef
+  } = useFocusZone({
+    disabled: !fzEnabled
+  }, [fzEnabled]);
+  const ToggleButton = fzEnabled ? ButtonDanger : ButtonPrimary;
+  const toggleFz = useCallback(() => {
+    setFzEnabled(!fzEnabled);
+  }, [fzEnabled]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/React.createElement(ToggleButton, {
+    onClick: toggleFz,
+    sx: {
+      mb: 3
+    }
+  }, fzEnabled ? 'Disable' : 'Enable', " Focus Zone"), /*#__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, "Use Up Arrow, Down Arrow, Home, and End to move focus within this box."), /*#__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, "Kiwi"), /*#__PURE__*/React.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/React.createElement(MarginButton, null, "Mango")));
+};
+export const FocusOutBehavior = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = useState('none');
+  const reportKey = useCallback(event => {
+    setLastKey(event.key);
+  }, []);
+  const {
+    containerRef: containerRef1
+  } = useFocusZone({
+    focusOutBehavior: 'stop',
+    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd
+  });
+  const {
+    containerRef: containerRef2
+  } = useFocusZone({
+    focusOutBehavior: 'wrap',
+    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__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: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/React.createElement("strong", null, "Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus stops at the ends."), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(MarginButton, null, "Durian"), /*#__PURE__*/React.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/React.createElement(MarginButton, null, "Fig"))), /*#__PURE__*/React.createElement(Box, {
+    borderColor: "gray.5",
+    ref: containerRef2,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/React.createElement("strong", null, "Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus is circular."), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/React.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/React.createElement(MarginButton, null, "Jackfruit"))), /*#__PURE__*/React.createElement(MarginButton, null, "Kiwi"), /*#__PURE__*/React.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/React.createElement(MarginButton, null, "Mango")));
+};
+
+function getSiblingIndex(element) {
+  let child = element;
+  let i = 0;
+
+  while ((child = child.previousElementSibling) != null) {
+    ++i;
+  }
+
+  return i;
+}
+
+export const CustomFocusMovement = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = useState('none');
+  const reportKey = useCallback(event => {
+    setLastKey(event.key);
+  }, []);
+  const containerRef = useRef(null);
+  const getNextFocusable = useCallback((direction, from, event) => {
+    const toEnd = direction === 'start' || direction === 'end';
+
+    if (from && containerRef.current) {
+      const currentIndex = getSiblingIndex(from);
+      let nextIndex = currentIndex;
+
+      if (['End', 'ArrowRight'].includes(event.key)) {
+        while (nextIndex % 3 !== 2) {
+          nextIndex += 1;
+
+          if (!toEnd) {
+            break;
+          }
+        }
+      }
+
+      if (['Home', 'ArrowLeft'].includes(event.key)) {
+        while (nextIndex % 3 !== 0) {
+          nextIndex -= 1;
+
+          if (!toEnd) {
+            break;
+          }
+        }
+      }
+
+      if (event.key === 'ArrowUp') {
+        while (nextIndex - 3 >= 0) {
+          nextIndex -= 3;
+
+          if (!toEnd) {
+            break;
+          }
+        }
+      }
+
+      if (event.key === 'ArrowDown') {
+        while (nextIndex + 3 < 9) {
+          nextIndex += 3;
+
+          if (!toEnd) {
+            break;
+          }
+        }
+      }
+
+      return containerRef.current.children[nextIndex];
+    }
+  }, [containerRef]);
+  useFocusZone({
+    containerRef,
+    getNextFocusable
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/React.createElement(MarginButton, null, "Apple"), /*#__PURE__*/React.createElement(Box, {
+    borderColor: "gray.5",
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/React.createElement("strong", null, "Use arrow keys to move focus within this box."), /*#__PURE__*/React.createElement(Box, {
+    display: "grid",
+    ref: containerRef,
+    gridTemplateRows: "1fr 1fr 1fr",
+    gridTemplateColumns: "1fr 1fr 1fr"
+  }, /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__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(MarginButton, null, "Kiwi"))), /*#__PURE__*/React.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/React.createElement(MarginButton, null, "Mango")));
+};
+export const FocusInStrategy = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = useState('none');
+  const reportKey = useCallback(event => {
+    setLastKey(event.key);
+  }, []);
+  const {
+    containerRef: firstContainerRef
+  } = useFocusZone({
+    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+    focusInStrategy: 'first'
+  });
+  const {
+    containerRef: closestContainerRef
+  } = useFocusZone({
+    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+    focusInStrategy: 'closest'
+  });
+  const {
+    containerRef: prevContainerRef
+  } = useFocusZone({
+    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+    focusInStrategy: 'previous'
+  });
+  const customContainerRef = useRef(null);
+  const customStrategy = React.useCallback(() => {
+    if (customContainerRef.current) {
+      const buttons = Array.from(customContainerRef.current.querySelectorAll('button'));
+      return buttons[Math.floor(Math.random() * 3)];
+    }
+  }, [customContainerRef]);
+  useFocusZone({
+    containerRef: customContainerRef,
+    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+    focusInStrategy: customStrategy
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__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: firstContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/React.createElement("strong", null, "\u201CFirst\u201D strategy (focus first focusable element)"), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(MarginButton, null, "Durian"))), /*#__PURE__*/React.createElement(Box, {
+    borderColor: "gray.5",
+    ref: closestContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/React.createElement("strong", null, "\u201CClosest\u201D strategy (focus first or last depending on focus direction)"), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(MarginButton, null, "Elderberry"), /*#__PURE__*/React.createElement(MarginButton, null, "Fig"), /*#__PURE__*/React.createElement(MarginButton, null, "Grapefruit"))), /*#__PURE__*/React.createElement(Box, {
+    borderColor: "gray.5",
+    ref: prevContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/React.createElement("strong", null, "\u201CPrevious\u201D strategy (most recently focused element)"), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/React.createElement(MarginButton, null, "Jackfruit"), /*#__PURE__*/React.createElement(MarginButton, null, "Kiwi"))), /*#__PURE__*/React.createElement(Box, {
+    borderColor: "gray.5",
+    ref: customContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/React.createElement("strong", null, "\u201CCustom\u201D strategy (choose randomly for this example)"), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__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, "Papaya")));
+};
+export const SpecialSituations = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = useState('none');
+  const reportKey = useCallback(event => {
+    setLastKey(event.key);
+  }, []);
+  const {
+    containerRef: vContainerRef
+  } = useFocusZone({
+    bindKeys: FocusKeys.ArrowVertical | FocusKeys.JK | FocusKeys.WS | FocusKeys.Tab | FocusKeys.PageUpDown | FocusKeys.HomeAndEnd
+  });
+  const {
+    containerRef: hContainerRef
+  } = useFocusZone({
+    focusOutBehavior: 'wrap',
+    bindKeys: FocusKeys.ArrowHorizontal
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/React.createElement(Flash, {
+    sx: {
+      mb: 3
+    }
+  }, "This story is very esoteric! It only exists to show some of the nuance of the arrow key focus behavior in different situations. Focus treatment within your component should be evaluated for your particular UX using the ", /*#__PURE__*/React.createElement("a", {
+    href: "https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard"
+  }, "ARIA guidelines"), "."), /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__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: vContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/React.createElement("strong", null, "Bound keys: Up, Down, PageUp, PageDown, W, S, J, K, Home, End, Tab"), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement("input", {
+    style: {
+      width: '250px'
+    },
+    type: "text",
+    defaultValue: "Printable characters won't move focus"
+  }), /*#__PURE__*/React.createElement(MarginButton, null, "Regular button"), /*#__PURE__*/React.createElement("select", null, /*#__PURE__*/React.createElement("option", null, "Down arrow invokes dropdown"), /*#__PURE__*/React.createElement("option", null, "Unless Cmd (mac)/Ctrl (Windows)"), /*#__PURE__*/React.createElement("option", null, "Is held")), /*#__PURE__*/React.createElement("textarea", {
+    style: {
+      width: '250px',
+      height: '95px'
+    },
+    defaultValue: "Up/Down only works when at beginning/end. PageUp and PageDown completely disabled. Printable characters will never move focus."
+  }))), /*#__PURE__*/React.createElement(Box, {
+    borderColor: "gray.5",
+    ref: hContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/React.createElement("strong", null, "Use Left Arrow and Right Arrow to move focus within this box. Focus is circular."), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/React.createElement("input", {
+    style: {
+      width: '300px'
+    },
+    type: "text",
+    defaultValue: "Left/Right only work at beginning/end of input."
+  }), /*#__PURE__*/React.createElement(MarginButton, null, "Jackfruit"))), /*#__PURE__*/React.createElement(MarginButton, null, "Kiwi"), /*#__PURE__*/React.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/React.createElement(MarginButton, null, "Mango")));
+};
+export const ChangingSubtree = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = useState('none');
+  const reportKey = useCallback(event => {
+    setLastKey(event.key);
+  }, []);
+  const {
+    containerRef
+  } = useFocusZone({
+    bindKeys: FocusKeys.ArrowVertical
+  });
+  const [buttonCount, setButtonCount] = useState(3);
+  const removeButton = useCallback(() => {
+    setButtonCount(buttonCount - 1);
+  }, [setButtonCount, buttonCount]);
+  const addButton = useCallback(() => {
+    setButtonCount(buttonCount + 1);
+  }, [setButtonCount, buttonCount]);
+  const buttons = [];
+
+  for (let i = 0; i < buttonCount; ++i) {
+    buttons.push( /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(MarginButton, {
+      key: `button${i}`
+    }, i + 1)));
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/React.createElement(Flash, {
+    sx: {
+      mb: 3
+    }
+  }, "This story demonstrates that focusZone is consistent even when the container\u2019s subtree changes."), /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__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, "Bound keys: Arrow Up and Arrow Down"), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, buttons)), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "row"
+  }, /*#__PURE__*/React.createElement(MarginButton, {
+    onClick: removeButton
+  }, "Remove Button"), /*#__PURE__*/React.createElement(MarginButton, {
+    onClick: addButton
+  }, "Add Button"))));
+};
+export const NestedZones = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = useState('none');
+  const reportKey = useCallback(event => {
+    setLastKey(event.key);
+  }, []);
+  const outerContainerRef = useRef(null);
+  const innerContainerRef = useRef(null);
+  useFocusZone({
+    containerRef: outerContainerRef,
+    bindKeys: FocusKeys.ArrowVertical
+  });
+  useFocusZone({
+    containerRef: innerContainerRef,
+    bindKeys: FocusKeys.ArrowHorizontal
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/React.createElement(MarginButton, null, "Apple"), /*#__PURE__*/React.createElement(MarginButton, null, "Banana"), /*#__PURE__*/React.createElement(Box, {
+    borderColor: "gray.5",
+    m: 4,
+    p: 4,
+    ref: outerContainerRef,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/React.createElement("strong", null, "Bound keys: Arrow Up and Arrow Down"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/React.createElement(Box, {
+    borderColor: "gray.5",
+    m: 4,
+    p: 4,
+    ref: innerContainerRef,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/React.createElement("strong", null, "Additional Bound keys: Arrow Left and Arrow Right"), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    id: "list",
+    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(MarginButton, null, "Kiwi")));
+};
+export const ActiveDescendant = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = useState('none');
+  const reportKey = useCallback(event => {
+    setLastKey(event.key);
+  }, []);
+  const containerRef = useRef(null);
+  const controllingElementRef = useRef(null);
+  const {
+    theme: themeFromContext
+  } = useTheme();
+  useFocusZone({
+    containerRef,
+    activeDescendantFocus: controllingElementRef,
+    bindKeys: FocusKeys.ArrowVertical,
+    onActiveDescendantChanged: (current, previous) => {
+      if (current) {
+        current.style.outline = `2px solid ${themeFromContext === null || themeFromContext === void 0 ? void 0 : themeFromContext.colors.border.info}`;
+      }
+
+      if (previous) {
+        previous.style.outline = '';
+      }
+    },
+    focusableElementFilter: elem => elem instanceof HTMLButtonElement
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HelperGlobalStyling, null), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/React.createElement(Flash, {
+    sx: {
+      mb: 3
+    }
+  }, "This story demonstrates using the `aria-activedescendant` pattern for managing both a focused element and an active element. Below, you can focus the input box then use the up/down arrow keys to change the active descendant (dark blue outline)."), /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__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",
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/React.createElement("strong", null, "Bound keys: Arrow Up and Arrow Down"), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement("input", {
+    ref: controllingElementRef,
+    type: "text",
+    defaultValue: "Focus remains here.",
+    "aria-controls": "list"
+  }), /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    id: "list",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    ref: containerRef
+  }, /*#__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(MarginButton, null, "Kiwi")));
+};