@primer/components 32.0.1-rc.c4c2c50a → 32.1.0

package/lib/stories/useFocusZone.stories.js

@@ -1,607 +0,0 @@
-"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, {
-    onClick: toggleFz,
-    sx: {
-      mb: 3
-    }
-  }, 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, {
-    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.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, {
-    sx: {
-      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, {
-    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.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/utils/create-slots.jsx

@@ -1,65 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const use_force_update_1 = require("./use-force-update");
-/** createSlots is a factory that can create a
- *  typesafe Slots + Slot pair to use in a component definition
- *  For example: ActionList.Item uses createSlots to get a Slots wrapper
- *  + Slot component that is used by LeadingVisual, Description
- */
-const createSlots = (slotNames) => {
-    const SlotsContext = react_1.default.createContext({
-        registerSlot: () => null,
-        unregisterSlot: () => null,
-        context: {}
-    });
-    /** Slots uses a Double render strategy inspired by [reach-ui/descendants](https://github.com/reach/reach-ui/tree/develop/packages/descendants)
-     *  Slot registers themself with the Slots parent.
-     *  When all the children have mounted = registered themselves in slot,
-     *  we re-render the parent component to render with slots
-     */
-    const Slots = ({ context = {}, children }) => {
-        // initialise slots
-        const slotsDefinition = {};
-        slotNames.map(name => (slotsDefinition[name] = null));
-        const slotsRef = react_1.default.useRef(slotsDefinition);
-        const rerenderWithSlots = use_force_update_1.useForceUpdate();
-        const [isMounted, setIsMounted] = react_1.default.useState(false);
-        // fires after all the effects in children
-        react_1.default.useEffect(() => {
-            rerenderWithSlots();
-            setIsMounted(true);
-        }, [rerenderWithSlots]);
-        const registerSlot = react_1.default.useCallback((name, contents) => {
-            slotsRef.current[name] = contents;
-            // don't render until the component mounts = all slots are registered
-            if (isMounted)
-                rerenderWithSlots();
-        }, [isMounted, rerenderWithSlots]);
-        // Slot can be removed from the tree as well,
-        // we need to unregister them from the slot
-        const unregisterSlot = react_1.default.useCallback((name) => {
-            slotsRef.current[name] = null;
-            rerenderWithSlots();
-        }, [rerenderWithSlots]);
-        /**
-         * Slots uses a render prop API so abstract the
-         * implementation detail of using a context provider.
-         */
-        const slots = slotsRef.current;
-        return (<SlotsContext.Provider value={{ registerSlot, unregisterSlot, context }}>{children(slots)}</SlotsContext.Provider>);
-    };
-    const Slot = ({ name, children }) => {
-        const { registerSlot, unregisterSlot, context } = react_1.default.useContext(SlotsContext);
-        react_1.default.useEffect(() => {
-            registerSlot(name, typeof children === 'function' ? children(context) : children);
-            return () => unregisterSlot(name);
-        }, [name, children, registerSlot, unregisterSlot, context]);
-        return null;
-    };
-    return { Slots, Slot };
-};
-exports.default = createSlots;