@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/lib/stories/useFocusZone.stories.js

@@ -0,0 +1,599 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ActiveDescendant = exports.NestedZones = 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 _themeGet = require("@styled-system/theme-get");
+
+var _useFocusZone = require("../hooks/useFocusZone");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _Button = require("../Button");
+
+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/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(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "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(_.Box, {
+    borderColor: "gray.5",
+    ref: containerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Use Up Arrow, Down Arrow, Home, and End to move focus within this box."), /*#__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, "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(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "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(_.Box, {
+    borderColor: "gray.5",
+    ref: containerRef1,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__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(_.Box, {
+    display: "flex",
+    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(_.Box, {
+    borderColor: "gray.5",
+    ref: containerRef2,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__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(_.Box, {
+    display: "flex",
+    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(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "absolute",
+    right: 5,
+    top: 2
+  }, "Last key pressed: ", lastKey), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Apple"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    borderColor: "gray.5",
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Use arrow keys to move focus within this box."), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "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: closestContainerRef
+  } = (0, _useFocusZone.useFocusZone)({
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal | _focusZone.FocusKeys.HomeAndEnd,
+    focusInStrategy: 'closest'
+  });
+  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(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "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(_.Box, {
+    borderColor: "gray.5",
+    ref: firstContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "\u201CFirst\u201D strategy (focus first focusable element)"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    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(_.Box, {
+    borderColor: "gray.5",
+    ref: closestContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "\u201CClosest\u201D strategy (focus first or last depending on focus direction)"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    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(_.Box, {
+    borderColor: "gray.5",
+    ref: prevContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "\u201CPrevious\u201D strategy (most recently focused element)"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    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(_.Box, {
+    borderColor: "gray.5",
+    ref: customContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "\u201CCustom\u201D strategy (choose randomly for this example)"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "flex-start"
+  }, /*#__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, "Papaya")));
+};
+
+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(_.Box, {
+    display: "flex",
+    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(_.Box, {
+    position: "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(_.Box, {
+    borderColor: "gray.5",
+    ref: vContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Bound keys: Up, Down, PageUp, PageDown, W, S, J, K, Home, End, Tab"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    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(_.Box, {
+    borderColor: "gray.5",
+    ref: hContainerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__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(_.Box, {
+    display: "flex",
+    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("div", null, /*#__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(_.Box, {
+    display: "flex",
+    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(_.Box, {
+    position: "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(_.Box, {
+    borderColor: "gray.5",
+    ref: containerRef,
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Bound keys: Arrow Up and Arrow Down"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, buttons)), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    flexDirection: "row"
+  }, /*#__PURE__*/_react.default.createElement(MarginButton, {
+    onClick: removeButton
+  }, "Remove Button"), /*#__PURE__*/_react.default.createElement(MarginButton, {
+    onClick: addButton
+  }, "Add Button"))));
+};
+
+exports.ChangingSubtree = ChangingSubtree;
+
+const NestedZones = () => {
+  // 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 outerContainerRef = (0, _react.useRef)(null);
+  const innerContainerRef = (0, _react.useRef)(null);
+  (0, _useFocusZone.useFocusZone)({
+    containerRef: outerContainerRef,
+    bindKeys: _focusZone.FocusKeys.ArrowVertical
+  });
+  (0, _useFocusZone.useFocusZone)({
+    containerRef: innerContainerRef,
+    bindKeys: _focusZone.FocusKeys.ArrowHorizontal
+  });
+  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",
+    onKeyDownCapture: reportKey
+  }, /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "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(_.Box, {
+    borderColor: "gray.5",
+    m: 4,
+    p: 4,
+    ref: outerContainerRef,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Bound keys: Arrow Up and Arrow Down"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(MarginButton, null, "Cantaloupe"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    borderColor: "gray.5",
+    m: 4,
+    p: 4,
+    ref: innerContainerRef,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Additional Bound keys: Arrow Left and Arrow Right"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    id: "list",
+    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(MarginButton, null, "Kiwi")));
+};
+
+exports.NestedZones = NestedZones;
+
+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: themeFromContext
+  } = (0, _ThemeProvider.useTheme)();
+  (0, _useFocusZone.useFocusZone)({
+    containerRef,
+    activeDescendantFocus: controllingElementRef,
+    bindKeys: _focusZone.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.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(HelperGlobalStyling, null), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    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)."), /*#__PURE__*/_react.default.createElement(_.Box, {
+    position: "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(_.Box, {
+    borderColor: "gray.5",
+    m: 4,
+    p: 4,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: 2
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Bound keys: Arrow Up and Arrow Down"), /*#__PURE__*/_react.default.createElement(_.Box, {
+    display: "flex",
+    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(_.Box, {
+    display: "flex",
+    id: "list",
+    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;

package/lib-esm/Button/Button.d.ts

@@ -268,7 +268,6 @@ declare const Button: import("styled-components").StyledComponent<"button", any,
     onAnimationIterationCapture?: import("react").AnimationEventHandler<HTMLButtonElement> | undefined;
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLButtonElement> | undefined;
-    css?: import("@emotion/core").InterpolationWithTheme<any>;
     autoFocus?: boolean | undefined;
     disabled?: boolean | undefined;
     formAction?: string | undefined;

package/lib-esm/Button/ButtonClose.d.ts

@@ -287,7 +287,6 @@ declare const ButtonClose: React.ForwardRefExoticComponent<Pick<{
     onAnimationIterationCapture?: React.AnimationEventHandler<HTMLButtonElement> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<HTMLButtonElement> | undefined;
-    css?: import("@emotion/core").InterpolationWithTheme<any>;
     bg?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
     mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
@@ -317,6 +316,6 @@ declare const ButtonClose: React.ForwardRefExoticComponent<Pick<{
     formTarget?: string | undefined;
 } & {
     theme?: any;
-}, "backgroundColor" | "color" | "display" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "verticalAlign" | "width" | "margin" | "overflow" | "padding" | "hidden" | "children" | "theme" | "value" | "form" | "p" | "slot" | "style" | "title" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "size" | "sx" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
+}, "backgroundColor" | "color" | "display" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "verticalAlign" | "width" | "margin" | "overflow" | "padding" | "hidden" | "children" | "theme" | "value" | "form" | "p" | "slot" | "style" | "title" | "type" | "name" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "size" | "sx" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget"> & React.RefAttributes<HTMLButtonElement>>;
 export declare type ButtonCloseProps = ComponentProps<typeof ButtonClose>;
 export default ButtonClose;