@primer/components 0.0.0-2021983515 → 0.0.0-2022530194733

package/lib/stories/useFocusZone.stories.js

@@ -0,0 +1,490 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActiveDescendant = exports.ChangingSubtree = exports.SpecialSituations = exports.FocusInStrategy = exports.CustomFocusMovement = exports.FocusOutBehavior = exports.BasicFocusZone = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _ = require("..");
+
+var _focusZone = require("../behaviors/focusZone");
+
+var _Flex = _interopRequireDefault(require("../Flex"));
+
+var _themeGet = require("@styled-system/theme-get");
+
+var _useFocusZone = require("../hooks/useFocusZone");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _Button = require("../Button");
+
+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/useFocusZone',
+  decorators: [Story => {
+    return /*#__PURE__*/_react.default.createElement(_.ThemeProvider, {
+      theme: _.theme
+    }, /*#__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.border.info')} !important;
+  }
+`;
+const MarginButton = (0, _styledComponents.default)(_.Button).withConfig({
+  displayName: "useFocusZonestories__MarginButton",
+  componentId: "e94kdz-0"
+})(["margin:", ";"], (0, _themeGet.themeGet)('space.1'));
+
+const BasicFocusZone = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = (0, _react.useState)('none');
+  const reportKey = (0, _react.useCallback)(event => {
+    setLastKey(event.key);
+  }, []);
+  const [fzEnabled, setFzEnabled] = (0, _react.useState)(true);
+  const {
+    containerRef
+  } = (0, _useFocusZone.useFocusZone)({
+    disabled: !fzEnabled
+  }, [fzEnabled]);
+  const ToggleButton = fzEnabled ? _Button.ButtonDanger : _Button.ButtonPrimary;
+  const toggleFz = (0, _react.useCallback)(() => {
+    setFzEnabled(!fzEnabled);
+  }, [fzEnabled]);
+  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",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Absolute, {
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/_react.default.createElement(ToggleButton, {
+    mb: 3,
+    onClick: toggleFz
+  }, fzEnabled ? 'Disable' : 'Enable', " Focus Zone"), /*#__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, "Use Up Arrow, Down Arrow, Home, and End to move focus within this box."), /*#__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, "Kiwi"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Mango")));
+};
+
+exports.BasicFocusZone = BasicFocusZone;
+
+const FocusOutBehavior = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = (0, _react.useState)('none');
+  const reportKey = (0, _react.useCallback)(event => {
+    setLastKey(event.key);
+  }, []);
+  const {
+    containerRef: containerRef1
+  } = (0, _useFocusZone.useFocusZone)({
+    focusOutBehavior: 'stop',
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.HomeAndEnd
+  });
+  const {
+    containerRef: containerRef2
+  } = (0, _useFocusZone.useFocusZone)({
+    focusOutBehavior: 'wrap',
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.HomeAndEnd
+  });
+  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",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Absolute, {
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__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: 4,
+    p: 4
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus stops at the ends."), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "row",
+    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(_.BorderBox, {
+    borderColor: "gray.5",
+    ref: containerRef2,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Use Left Arrow, Right Arrow, Home, and End to move focus within this box. Focus is circular."), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__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(MarginButton, null, "Kiwi"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Mango")));
+};
+
+exports.FocusOutBehavior = FocusOutBehavior;
+
+function getSiblingIndex(element) {
+  let child = element;
+  let i = 0;
+
+  while ((child = child.previousElementSibling) != null) {
+    ++i;
+  }
+
+  return i;
+}
+
+const CustomFocusMovement = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = (0, _react.useState)('none');
+  const reportKey = (0, _react.useCallback)(event => {
+    setLastKey(event.key);
+  }, []);
+  const containerRef = (0, _react.useRef)(null);
+  const getNextFocusable = (0, _react.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]);
+  (0, _useFocusZone.useFocusZone)({
+    containerRef,
+    getNextFocusable
+  });
+  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",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Absolute, {
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Apple"), /*#__PURE__*/_react.default.createElement(_.BorderBox, {
+    borderColor: "gray.5",
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Use arrow keys to move focus within this box."), /*#__PURE__*/_react.default.createElement(_.Grid, {
+    ref: containerRef,
+    gridTemplateRows: "1fr 1fr 1fr",
+    gridTemplateColumns: "1fr 1fr 1fr"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__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(MarginButton, null, "Kiwi"))), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Mango")));
+};
+
+exports.CustomFocusMovement = CustomFocusMovement;
+
+const FocusInStrategy = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = (0, _react.useState)('none');
+  const reportKey = (0, _react.useCallback)(event => {
+    setLastKey(event.key);
+  }, []);
+  const {
+    containerRef: firstContainerRef
+  } = (0, _useFocusZone.useFocusZone)({
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.HomeAndEnd,
+    focusInStrategy: 'first'
+  });
+  const {
+    containerRef: prevContainerRef
+  } = (0, _useFocusZone.useFocusZone)({
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.HomeAndEnd,
+    focusInStrategy: 'previous'
+  });
+  const customContainerRef = (0, _react.useRef)(null);
+
+  const customStrategy = _react.default.useCallback(() => {
+    if (customContainerRef.current) {
+      const buttons = Array.from(customContainerRef.current.querySelectorAll('button'));
+      return buttons[Math.floor(Math.random() * 3)];
+    }
+  }, [customContainerRef]);
+
+  (0, _useFocusZone.useFocusZone)({
+    containerRef: customContainerRef,
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.HomeAndEnd,
+    focusInStrategy: customStrategy
+  });
+  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",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Absolute, {
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__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: firstContainerRef,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "\u201CFirst\u201D strategy (focus first focusable element)"), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Banana"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Durian"))), /*#__PURE__*/_react.default.createElement(_.BorderBox, {
+    borderColor: "gray.5",
+    ref: prevContainerRef,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "\u201CPrevious\u201D strategy (most recently focused element)"), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__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(_.BorderBox, {
+    borderColor: "gray.5",
+    ref: customContainerRef,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "\u201CCustom\u201D strategy (choose randomly for this example)"), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Honeydew"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Jackfruit"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Kiwi"))), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Mango")));
+};
+
+exports.FocusInStrategy = FocusInStrategy;
+
+const SpecialSituations = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = (0, _react.useState)('none');
+  const reportKey = (0, _react.useCallback)(event => {
+    setLastKey(event.key);
+  }, []);
+  const {
+    containerRef: vContainerRef
+  } = (0, _useFocusZone.useFocusZone)({
+    bindKeys: _focusZone.FocusKeys.ArrowVertical | _focusZone.FocusKeys.JK | _focusZone.FocusKeys.WS | _focusZone.FocusKeys.Tab | _focusZone.FocusKeys.PageUpDown | _focusZone.FocusKeys.HomeAndEnd
+  });
+  const {
+    containerRef: hContainerRef
+  } = (0, _useFocusZone.useFocusZone)({
+    focusOutBehavior: 'wrap',
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal
+  });
+  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",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Flash, {
+    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.default.createElement("a", {
+    href: "https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard"
+  }, "ARIA guidelines"), "."), /*#__PURE__*/_react.default.createElement(_.Absolute, {
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__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: vContainerRef,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Bound keys: Up, Down, PageUp, PageDown, W, S, J, K, Home, End, Tab"), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    style: {
+      width: '250px'
+    },
+    type: "text",
+    defaultValue: "Printable characters won't move focus"
+  }), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Regular button"), /*#__PURE__*/_react.default.createElement("select", null, /*#__PURE__*/_react.default.createElement("option", null, "Down arrow invokes dropdown"), /*#__PURE__*/_react.default.createElement("option", null, "Unless Cmd (mac)/Ctrl (Windows)"), /*#__PURE__*/_react.default.createElement("option", null, "Is held")), /*#__PURE__*/_react.default.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.default.createElement(_.BorderBox, {
+    borderColor: "gray.5",
+    ref: hContainerRef,
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Use Left Arrow and Right Arrow to move focus within this box. Focus is circular."), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "row",
+    alignItems: "center"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, null, "Grapefruit"), /*#__PURE__*/_react.default.createElement("input", {
+    style: {
+      width: '300px'
+    },
+    type: "text",
+    defaultValue: "Left/Right only work at beginning/end of input."
+  }), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Jackfruit"))), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Kiwi"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Lemon"), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Mango")));
+};
+
+exports.SpecialSituations = SpecialSituations;
+
+const ChangingSubtree = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = (0, _react.useState)('none');
+  const reportKey = (0, _react.useCallback)(event => {
+    setLastKey(event.key);
+  }, []);
+  const {
+    containerRef
+  } = (0, _useFocusZone.useFocusZone)({
+    bindKeys: _focusZone.FocusKeys.ArrowVertical
+  });
+  const [buttonCount, setButtonCount] = (0, _react.useState)(3);
+  const removeButton = (0, _react.useCallback)(() => {
+    setButtonCount(buttonCount - 1);
+  }, [setButtonCount, buttonCount]);
+  const addButton = (0, _react.useCallback)(() => {
+    setButtonCount(buttonCount + 1);
+  }, [setButtonCount, buttonCount]);
+  const buttons = [];
+
+  for (let i = 0; i < buttonCount; ++i) {
+    buttons.push( /*#__PURE__*/_react.default.createElement(MarginButton, {
+      key: 'button' + i
+    }, i + 1));
+  }
+
+  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",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Flash, {
+    mb: 3
+  }, "This story demonstrates that focusZone is consistent even when the container\u2019s subtree changes."), /*#__PURE__*/_react.default.createElement(_.Absolute, {
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__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, "Bound keys: Arrow Up and Arrow Down"), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, buttons)), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "row"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, {
+    onClick: removeButton
+  }, "Remove Button"), /*#__PURE__*/_react.default.createElement(MarginButton, {
+    onClick: addButton
+  }, "Add Button"))));
+};
+
+exports.ChangingSubtree = ChangingSubtree;
+
+const ActiveDescendant = () => {
+  // Display each key press in the top-right corner of the page as a visual aid
+  const [lastKey, setLastKey] = (0, _react.useState)('none');
+  const reportKey = (0, _react.useCallback)(event => {
+    setLastKey(event.key);
+  }, []);
+  const containerRef = (0, _react.useRef)(null);
+  const controllingElementRef = (0, _react.useRef)(null);
+  const {
+    theme
+  } = (0, _ThemeProvider.useTheme)(); // We set up two arrow focus behaviors on the same container!
+  // 1. Handles the active descendant treatment when the <input> element is focused
+  // 2. Handles regular focus treatment when the container itself is focused.
+
+  (0, _useFocusZone.useFocusZone)({
+    containerRef,
+    activeDescendantFocus: controllingElementRef,
+    bindKeys: _focusZone.FocusKeys.ArrowVertical,
+    onActiveDescendantChanged: (current, previous) => {
+      if (current) {
+        current.style.outline = `2px solid ${theme.colors.border.info}`;
+      }
+
+      if (previous) {
+        previous.style.outline = '';
+      }
+    },
+    focusableElementFilter: elem => elem instanceof HTMLButtonElement
+  });
+  (0, _useFocusZone.useFocusZone)({
+    containerRef,
+    bindKeys: _focusZone.FocusKeys.ArrowVertical,
+    getNextFocusable: (direction, from) => {
+      if (direction === 'previous' && from && from === containerRef.current) {
+        var _controllingElementRe;
+
+        return (_controllingElementRe = controllingElementRef.current) !== null && _controllingElementRe !== void 0 ? _controllingElementRe : undefined;
+      }
+    }
+  });
+  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",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Flash, {
+    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). Furthermore, this story shows how to simultaneously set up a regular arrow key focus treatment on the buttons. This pattern is used in a select menu with a filter box."), /*#__PURE__*/_react.default.createElement(_.Absolute, {
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__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",
+    m: 4,
+    p: 4
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Bound keys: Arrow Up and Arrow Down"), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    ref: controllingElementRef,
+    type: "text",
+    defaultValue: "Focus remains here.",
+    "aria-controls": "list"
+  }), /*#__PURE__*/_react.default.createElement(_Flex.default, {
+    id: "list",
+    tabIndex: 0,
+    flexDirection: "column",
+    alignItems: "flex-start",
+    ref: containerRef
+  }, /*#__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(MarginButton, null, "Kiwi")));
+};
+
+exports.ActiveDescendant = ActiveDescendant;