@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/docs/content/anchoredPosition.mdx

@@ -0,0 +1,163 @@
+---
+title: Anchored Position Behavior
+---
+
+The `getAnchoredPosition` behavior and `useAnchoredPosition` hook are used to calculate the position of a "floating" element that is anchored to another DOM element. This is useful for implementing overlay UI, such as dialogs, popovers, tooltips, toasts, and dropdown-style menus.
+
+At a high level, the `getAnchoredPosition` algorithm will attempt to find the most suitable position for the floating element based on the passed-in settings, its containing element, and the size and position of the anchor element. Specifically, the calculated position should try to ensure that the floating element, when positioned at the calculated coordinates, does not overflow or underflow the container's bounding box.
+
+Settings for this behavior allow the user to customize several aspects of this calculation. See **PositionSettings** below for a detailed description of these settings.
+
+### Positioning algorithm
+
+When calculating the position of the floating element, the algorithm relies on different measurements from three separate elements:
+
+1. The floating element's width and height
+2. The anchor element's x/y position and its width and height
+3. The floating element's clipping container (for x/y position, width and height, and border sizes)
+
+The public API only asks for the first two elements; the floating element's container is discovered via DOM traversal.
+
+#### Finding the floating element's clipping container
+
+The returned anchored position calculation is relative to the floating element's closest [_positioned_](https://developer.mozilla.org/en-US/docs/Web/CSS/position#types_of_positioning) ancestor. To find this ancestor, we try to check parents of the floating element until we find one that has a position set to anything other than `static` and use that element's bounding box as the container. If we can't find such an element, we will try to use `document.body`.
+
+Once we have found the appropriate relative ancestor, we attempt to find the floating element's _clipping container_. The clipping container is an element that: 1) has `overflow` set to something other than `visible`, and 2) is either an ancestor of the relative ancestor, or is itself the relative ancestor. Again, if we cannot locate such an element, we will use `document.body` as the clipping container.
+
+Once we have the clipping container, its bounding box is used as the viewport for the position calculation (see the next section). If the clipping container ends up being `document.body`, we take one additional step, allowing the clipping rectangle to be at least as tall as the window. This is done because the `body` element doesn't take up the full window size by default, but we still want to allow the entire space to be used as the viewport for the position calculation. It may be a good idea to ensure that this clipping container element _also_ contains the anchor element and is scrollable. This will ensure that if scrolled, the anchor and floating element will move together.
+
+#### Positioning and overflow
+
+With the positions and sizes of the above DOM elements, the algorithm calculates the (x, y) coordinate for the floating element. Then, it checks to see if, based on the floating element's size, if it would overflow the bounds of the container. If it would, it does one of two things:
+
+A) If the overflow happens in the same direction as the anchor side (e.g. side is `'outside-bottom'` and the overflowing portion of the floating element is the bottom), try to find a different side, recalculate the position, and check for overflow again. If we check all four sides and don't find one that fits, revert to the bottom side, in hopes that a scrollbar might appear.
+B) Otherwise, adjust the alignment offset so that the floating element can stay inside the container's bounds.
+
+For a more in-depth explanation of the positioning settings, see `PositionSettings` below.
+
+### Demo
+
+Deploy Storybook to see a live demo of `anchoredPosition`.
+
+### Usage
+
+```ts
+const settings = {
+  side: 'outside-right',
+  align: 'center',
+  alignmentOffset: 10,
+  anchorOffset: -10
+} as Partial<PositionSettings>
+const float = document.getElementById('floatingElement')
+const anchor = document.getElementById('anchorElement')
+const {top, left} = getAnchoredPosition(float, anchor, settings)
+float.style.top = `${top}px`
+float.style.left = `${left}px`
+```
+
+### API
+
+The `getAnchoredPosition` function takes the following arguments.
+
+| Name            | Type               | Default | Description                                                                                                                                                                            |
+| :-------------- | :----------------- | :-----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| floatingElement | `Element`          |         | This is an Element that is currently rendered on the page. `getAnchoredPosition` needs to be able to measure this element's `width` and `height`.                                      |
+| anchorElement   | `Element`          |         | This is an Element that the floating element will be "anchored" to. In other words, the calculated position of the floating element will be based on this element's position and size. |
+| settings        | `PositionSettings` |  `{}`   | Settings to customize the positioning algorithm. See below for a description of each setting.                                                                                          |
+
+#### PositionSettings interface
+
+`PositionSettings` is an object with the following interface
+
+| Name             | Type              |      Default       | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| :--------------- | :---------------- | :----------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| side             | `AnchorSide`      | `"outside-bottom"` | Sets the side of the anchor element that the floating element should be pinned to. This side is given by a string starting with either `inside` or `outside`, followed by a hyphen, followed by either `top`, `right`, `bottom`, or `left`. Additionally, `"inside-center"` is an allowed value.<br /><br />The first part of this string, `inside` or `outside`, determines whether the floating element should be attempted to be placed "inside" the anchor element or "outside" of it. Using `inside` is useful for making it appear that the anchor _contains_ the floating element, and it can be used for implementing a dialog that is centered on the screen. The `outside` value is more common and can be used for tooltips, popovers, menus, etc.<br /><br />The second part of this string determines the _edge_ on the anchor element that the floating element will be anchored to. If side is `"inside-center"`, then the floating element will be centered in the X-direction (while `align` is used to position it in the Y-direction). |
+| align            | `AnchorAlignment` |     `"start"`      | Determines how the floating element should align with the anchor element. If set to `"start"`, the floating element's first edge (top or left) will align with the anchor element's first edge. If set to `"center"`, the floating element will be centered along the axis of the anchor edge. If set to `"end"`, the floating element's last edge will align with the anchor element's last edge.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| anchorOffset     | `number`          |       `4`\*        | The number of pixels between the anchor edge and the floating element. Positive values move the floating element farther from the anchor element (for outside positioning) or further inside the anchor element (for inside positioning). Negative values have the opposite effect.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
+| alignmentOffset  | `number`          |      `4`\*\*       | An additional offset, in pixels, to move the floating element from the aligning edge. Positive values move the floating element in the direction of center-alignment. Negative values move the floating element away from center-alignment. When align is `"center"`, positive offsets move the floating element right (top or bottom anchor side) or down (left or right anchor side).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| allowOutOfBounds | `boolean`         |      `false`       | If false, when the above settings result in rendering the floating element wholly or partially off-screen, attempt to adjust the settings to prevent this. Only applies to `outside` positioning.<br /><br />First, attempt to flip to the opposite edge of the anchor if the floating element is getting clipped in that direction. If flipping results in a similar clipping, try moving to the adjacent sides.<br /><br />Once we find a side that does not clip the overlay in its own dimension, check the rest of the sides to see if we need to adjust the alignment offset to fit in other dimensions.<br /><br />If we try all four sides and get clipped each time, settle for overflowing and use the `bottom` side, since the ability to scroll is most likely in this direction.                                                                                                                                                                                                                                                             |
+
+\* If `side` is set to `"inside-center"`, this defaults to `0` instead of `4`.
+
+\*\* If using outside positioning, or if `align` is set to `"center"`, this defaults to `0` instead of `4`.
+
+#### AnchorSide
+
+`AnchorSide` can be any of the following strings:
+
+`'inside-top'`, `'inside-bottom'`, `'inside-left'`, `'inside-right'`, `'inside-center'`, `'outside-top'`, `'outside-bottom'`, `'outside-left'`, `'outside-right'`
+
+#### AnchorAlignment
+
+`AnchorAlignment` can be any of the following strings:
+
+`'start'`, `'center'`, `'end'`
+
+### Best practices
+
+As discussed above, the positioning algorithm needs to first measure the size of three different elements. Therefore, all three of these elements (anchor element, floating element, and the floating element's closest positioned container) must be rendered at the time `getAnchoredPosition` is called. To avoid a frame where the floating element is rendered at the `(0, 0)` position, give it a style of `visibility: hidden` until its position is returned at set. This allows the element to be measured without showing up on the page.
+
+### A note on performance
+
+Every time `getAnchoredPosition` is called, it causes a [reflow](https://developers.google.com/speed/docs/insights/browser-reflow) because it needs to query the rendering engine for the positions of 3 elements: the anchor element, the floating element, and the closest ancestor of the floating element that is [_positioned_](https://developer.mozilla.org/en-US/docs/Web/CSS/position#types_of_positioning). Therefore, this function should not be called until it is needed (e.g. an overlay-style menu is invoked and displayed).
+
+## useAnchoredPosition hook
+
+The `useAnchoredPosition` hook is used to provide anchored positioning data for React components. The hook returns refs that must be added to the anchor and floating elements, and a `position` object containing `top` and `left`. This position is tracked as state, so the component will re-render whenever it changes. It is the responsibility of the consumer to apply the top and left styles to the floating element in question.
+
+### Using your own refs
+
+The `useAnchoredPosition` hook will return two refs for the anchor element and the floating element, which must be added to their respective JSX. If you would like to use your own refs, you can pass them into the hook as part of the settings object (see the interface below).
+
+### Recalculating position
+
+Like other hooks such as `useCallback` and `useEffect`, this hook takes a dependencies array. If defined, the position will only be recalculated when one of the dependencies in this array changes. Otherwise, the position will be calculated when the component is first mounted, but never again.
+
+### Usage
+
+```jsx
+export const AnchoredPositionExample = () => {
+  const {floatingElementRef, anchorElementRef, position} = useAnchoredPosition({side: 'outside-bottom', align: 'center'})
+  return (
+    <div>
+      <Box
+        position="absolute"
+        top={position?.top ?? 0}
+        left={position?.left ?? 0}
+        width={150}
+        height={150}
+        ref={floatingElementRef as React.RefObject<HTMLDivElement>}
+      >
+        Floating element
+      </Box>
+      <Box borderWidth='1px' borderStyle='solid' borderColor='border.primary' borderRadius={2} width={400} height={75} ref={anchorElementRef as React.RefObject<HTMLDivElement>}>
+        Anchor Element
+      </Box>
+    </div>
+  )
+}
+```
+
+### useAnchoredPosition hook
+
+| Name         | Type                           |  Default  | Description                                                                                                          |
+| :----------- | :----------------------------- | :-------: | :------------------------------------------------------------------------------------------------------------------- |
+| settings     | `AnchoredPositionHookSettings` | undefined | Optional settings to control how the anchored position is calculated. See below.                                     |
+| dependencies | `React.DependencyList`         | undefined | Dependencies to determine when to re-calculate the position. If undefined or `[]`, only calculate the position once. |
+
+**Return value**
+
+| Name               | Type                          | Description                                        |
+| :----------------- | :---------------------------- | :------------------------------------------------- |
+| floatingElementRef | `React.RefObject<Element>`    | This ref must be added to the floating element JSX |
+| anchorElementRef   | `React.RefObject<Element>`    | This ref must be added to the anchor element JSX   |
+| position           | `{top: number, left: number}` | The calculated position                            |
+
+### AnchoredPositionHookSettings interface
+
+`AnchoredPositionHookSettings` is an object with an interface that extends `PositionSettings` (see above). Additionally, it adds the following properties:
+
+| Name               | Type                           |   Default   | Description                                                                                                                                                                                                                                                                                                                                 |
+| :----------------- | :----------------------------- | :---------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| floatingElementRef | `React.RefObject<HTMLElement>` | `undefined` | If provided, this will be the ref used to access the element that will be used for the floating element. Its size measurements are needed by the underlying `useAnchoredPosition` behavior. Otherwise, this hook will create the ref for you and return it. In both cases, the ref must be provided to the floating element's JSX.          |
+| anchorElementRef   | `React.RefObject<HTMLElement>` | `undefined` | If provided, this will be the ref used to access the element that will be used for the anchor element. Its position and size measurements are needed by the underlying `useAnchoredPosition` behavior. Otherwise, this hook will create the ref for you and return it. In both cases, the ref must be provided to the anchor element's JSX. |

package/docs/content/core-concepts.md

@@ -0,0 +1,70 @@
+---
+title: Core Concepts
+---
+
+This document aims to discuss some of the core concepts of building with Primer React.
+
+## Responsive props
+
+It's really easy to set different values for most of our component props based on screen size! We take advantage of [styled-system](https://github.com/styled-system/styled-system)'s responsive props API in our components.
+
+```
+<Button display={['flex', 'flex', 'none']}/>
+
+or
+
+<Text fontSize={[1,1,1,4]}/>
+```
+
+## Providing your own theme
+
+You can provide your own theme to Primer React! There are a few ways of doing this to varying degrees, checkout the [theme docs](https://primer.style/components/primer-theme) for more information.
+
+## The `css` prop
+
+When push comes to shove and you just _really_ need to add a custom CSS rule, you can do that with the `css` prop. Please don't abuse this :)
+
+```
+<Box css='border-bottom-right-radius: 0px' />
+
+```
+
+Please note that you will need to have the **[styled-components babel plugin](https://www.styled-components.com/docs/tooling#babel-plugin)** set up in your project in order to use the `css` prop.
+
+## Types of components
+
+We categorize our components into 3 general types. Building block components, pattern components, and helper components. Understanding how these types of components interact with each other can help you better understand how to get the most out of Primer React.
+
+- Building Blocks
+
+Building block components are components that are basic in their functions and can be used together with other components to build just about any UI. Some examples of building block components are `Box`, `Avatar`, `Details`, and `Link`.
+
+- Pattern Components
+
+Pattern components are components that are made up of several building block components to represent a commonly used pattern in our UI. Some examples of pattern components are `UnderlineNav` and `FilterList`. We plan on expanding our offering of pattern components in the near future.
+
+- Helper Components
+
+Helper components are components that help the user achieve common CSS patterns while maintaining some control over values used. Some examples of helper components are `Flex`, `Text`, `Grid`, and the `Position` components.
+
+## The `as` prop
+
+The `as` prop is a feature that all of our components get from [styled-components](https://www.styled-components.com). It allows you to pass a HTML tag or another component to a Primer Component to be rendered as the base tag of that component along with all of it's styles and props.
+
+For example, say you are using a `Button` component, and you really need to apply `Box` styles to it. You can compose `Box` and `Button` like so:
+
+```.jsx
+<Box display="flex" as={Button} href='https://github.com'>Hello</Box>
+```
+
+This will allow you to use all of the `Button` props _and_ all of the `Box` props without having to wrap your `Button` component in another `Box` component.
+
+**This pattern does have some limitations.** Usage of the `as` prop can lead to unexpected output. In the example above, if the user had done `<Button as={Box}/>` instead, because the `Box`'s render method is ultimately applied, and `Box` components render `div`'s, you'll see that the rendered component is a `div` when ideally you'd like it to be a `button`. It is also not always clear how the styles in both components will interact and/or override each other.
+
+For these reasons, **we recommend only using the `as` prop when you cannot achieve the same result by nesting components.** The `Box` / `Button` example could be done like so:
+
+```.jsx
+<Box display="flex">
+  <Button href='https://github.com'>Hi</Button>
+</Box>
+```

package/docs/content/focusTrap.mdx

@@ -0,0 +1,103 @@
+---
+title: Focus Trap Behavior
+---
+
+The `focusTrap` behavior and `useFocusTrap` hook are used prevent focus from leaving a particular element. This is useful for implementing modal dialogs: only the content within the dialog should be interactive, even though the UI underneath may still be visible.
+
+### Behavior
+
+- Activation: As soon as the focus trap is activated, it will ensure that an element within the container has focus. If it doesn't, it will focus the first focusable element within the container, or, if provided, the element indicated by the `initialFocus` parameter (see API below).
+- External focus changes: If an external cause (e.g. mouse click, scripts, or accessibility software) results in an element outside the container to be focused, focus will immediately be redirected to the last-focused element that is inside the container.
+- Circular tab focus: Using the `TAB` key on the last focusable element within the container will result in the first focusable element within the container receiving focus. Similarly, `Shift+TAB` can be used to focus the last element from the first.
+- Global: Only one focus trap can be _active_ at a time. When a focus trap is enabled, if there is already an active focus trap, it becomes suspended and pushed onto a stack. Once the newly-active focus trap is disabled, the most recently-suspended trap will reactivate. Suspended focus traps can be disabled, causing them to be removed from the stack of suspended traps.
+
+### Demo
+
+To see a demo, deploy Storybook and find the `useFocusTrap` stories.
+
+### Usage
+
+```ts
+function showDialog() {
+  const dialog = document.getElementById('myDialog')
+  if (dialog instanceof HTMLElement) {
+    dialog.style.display = ''
+    return focusTrap(dialog)
+  }
+}
+function hideDialog(controller: AbortController) {
+  document.getElementById('myDialog')?.style.display = 'none'
+  controller.abort()
+}
+const dialogController = showDialog()
+
+// later
+if (dialogController) {
+  hideDialog(controller)
+}
+```
+
+### API
+
+The `focusTrap` function takes the following arguments.
+
+| Name         | Type           |   Default   | Description                                                                                                                                                  |
+| :----------- | :------------- | :---------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| container    | `HTMLElement`  |             | When active, only elements within this container (along with the container itself) can be focused.                                                           |
+| initialFocus | `HTMLElement`  |             | Specifies the element which will receive focus when the focus trap is activated. Defaults to the first tabbable element inside the container.                |
+| signal       | `AbortSignal?` | `undefined` | Optional abort signal to control the focus trap. If one is not provided, an `AbortController` will be returned, which can be used to disable the focus trap. |
+
+#### Return value
+
+If the `signal` argument is omitted, `focusTrap()` will return an `AbortController`. This object has an `abort()` method, which can be called to disable the focus trap.
+
+### Best practices
+
+- Focus management is an important consideration for accessible applications. Sometimes poor focus management can make certain tasks impossible to complete for users not using a mouse. To learn more, read the [ARIA guidelines for keyboard focus](https://www.w3.org/TR/wai-aria-practices/#kbd_focus_discernable_predictable).
+- Only activate a focus trap if all UI outside of the trap container should be inert (non-interactive).
+- Avoid situations where multiple focus traps may be active (e.g. dialogs that open more dialogs). This behavior handles those situations, but the pattern may indicate poor UX.
+
+### A note on performance
+
+When focus trap is activated, it must perform [reflow](https://developers.google.com/speed/docs/insights/browser-reflow) to discover focusable elements. Use caution not to rapidly enable and disable focus traps.
+
+## useFocusTrap hook
+
+The `useFocusTrap` hook is used to achieve focus trapping for React components. The hook returns a `ref` that must be applied to the focus trap container. The hook also returns a ref that can be used to indicate the initially-focused element when a focus trap is activated.
+
+The focus trap can be disabled in two ways:
+
+1. Simply do not render the component. When a component that uses focus trapping is unmounted, its focus trap will be aborted automatically.
+2. Pass `disabled: true` to the settings argument of `useFocusTrap`.
+
+The `useFocusTrap` hook also has an additional setting, `restoreFocusOnCleanUp`. If this is set to true, when the hook is either disabled (called with `disabled: true` or unmounted), we will attempt to re-focus the element that was focused immediately before the focus trap was enabled.
+
+### Using your own refs
+
+If you would like to use your own refs, you can pass them into the hook as part of the settings object (see the interface below).
+
+### Usage
+
+```jsx
+export const FocusTrapExample = () => {
+  const {containerRef} = useFocusTrap()
+  return (
+    <div ref={containerRef as React.RefObject<HTMLDivElement>}>
+      <Button>Apple</Button>
+      <Button>Banana</Button>
+      <Button>Cantaloupe</Button>
+    </div>
+  )
+}
+```
+
+### FocusTrapHookSettings interface
+
+`FocusTrapHookSettings` has the following properties:
+
+| Name                  | Type              |   Default   | Description                                                                                                                                                                                                                                                                  |
+| :-------------------- | :---------------- | :---------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| containerRef          | `React.RefObject` | `undefined` | If provided, this will be the ref used to access the focus trap container. Otherwise, this hook will create the ref for you and return it. In both cases, the ref must be provided to the container element's JSX.                                                           |
+| initialFocusRef       | `React.RefObject` | `undefined` | If provided, this will be the ref used to access the element that should receive initial focus when the focus trap is activated. Otherwise, this hook will create the ref for you and return it. If unused, the first tabbable element inside the container will be focused. |
+| disabled              | `boolean`         |   `false`   | If true, the previously-established focus trap for this container will be aborted.                                                                                                                                                                                           |
+| restoreFocusOnCleanUp | `boolean`         |   `false`   | If true, attempt to restore focus to the previously-focused element when the trap is disabled or unmounted.                                                                                                                                                                  |

package/docs/content/focusZone.mdx

@@ -0,0 +1,145 @@
+---
+title: Focus Zone Behavior
+---
+
+The `focusZone` behavior and `useFocusZone` hook are used to designate a container where focus can be moved using keys other than `Tab`. This is useful for implementing many of the patterns described in [Section 6](https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard) of the WAI-ARIA Authoring Practices document. The most common use case of this behavior is to allow arrow keys (up and down or left and right) to move focus between related elements, such as items in a menu.
+
+At a high level, the `focusZone` behavior works by adjusting the `tabindex` attribute on focusable elements and setting up event listeners on the container that respond to the relevant key presses.
+
+Settings for this behavior allow the user to customize several aspects of the focus zone. See **FocusZoneSettings** below for a detailed description of these settings.
+
+### Focusability: which elements participate in the Focus Zone?
+
+When the `focusZone` behavior is established, it will discover all _focusable_ elements within the given container and allow them to be focused with the bound keys. _Focusable_ elements are those that either are normally focusable via the Tab key OR have a valid `tabindex` attribute (including `"-1"`). The easiest way to ensure an element participates in the focus zone is by applying the attribute `tabindex="-1"`. If you need to prevent a focusable element from participating in the focus zone, you can provide a `focusableElementFilter`.
+
+### Focus order
+
+The `focusZone` behavior uses the natural DOM ordering of elements to determine focus order. This means that a key that moves focus will either move to a "next" element or to a "previous" element. For example, the left arrow key and the up arrow key would both move focus to the previous element in the DOM order, while the right arrow key and the down arrow key would both move focus to the next element in the DOM order.
+
+Focus cannot be moved beyond the last element of the container (other than using the Tab key). The `focusOutBehavior` option can be used to allow focus to wrap around from last to first element (or vice-versa).
+
+For a more customized focus movement behavior, the consumer has the ability to supply a custom callback that identifies the next element to focus.
+
+#### Entering the focus zone
+
+By default, when focus enters a focus zone, the element that receives focus will be the most recently-focused element within that focus zone. If no element had previously been focused, or if that previously-focused element was removed, focus will revert to the first focusable element within the focus zone, regardless of the direction of focus movement.
+
+Using the `focusInStrategy` option, you can change this behavior. Setting this option to `"first"` will simply cause the first focusable element in the container to be focused whenever focus enters the focus zone. Setting it to `"closest"` will cause either the first or last focusable element in the container to be focused depending on the direction of focus movement (for example, a shift+tab that brings focus to the container will cause the last focusable element to be focused, whereas a regular tab would cause the first focusable element to be focused). Otherwise, you may provide a callback to choose a custom element to receive initial focus. One scenario where this would be useful is if you wanted to focus an item that is "selected" in a list.
+
+For more information on choosing the right focus in behavior, see [6.6 Keyboard Navigation Inside Components](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_general_within) from the ARIA Authoring Practices document.
+
+### Supported keys
+
+The `focusZone` behavior supports different sets of keys for moving focus around. The `bindKeys` option is used to set which of the following keys can be used to move focus.
+
+| Key(s)          | Notes                                                                                                                                                                                                                   | Use case                                                                                                                                 |
+| :-------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------- |
+| ArrowVertical   | Prevents default behavior of scrolling where applicable                                                                                                                                                                 | Most focus zones with vertically-positioned elements                                                                                     |
+| ArrowHorizontal | Prevents default behavior of scrolling where applicable                                                                                                                                                                 | Most focus zones with horizontally-positioned elements                                                                                   |
+| HomeAndEnd      | Causes focus to jump to the first or last focusable item in the container. Does not move focus if the currently-focused element is a text box.                                                                          | Generally used with arrow keys                                                                                                           |
+| PageUpDown      | Works the same as the Home and End keys. Advisable only when supplying a custom callback that supports paging.                                                                                                          | In a long, scrollable list                                                                                                               |
+| Tab/Shift+Tab   | Unlike other keys, the Tab key will always allow movement outside of the focus zone (use the Focus Trap behavior to prevent this). Tab moves to the next item, Shift+Tab moves to the previous.                         | Bind Tab if you want to continue allowing tab to move focus between elements in your container rather than jumping out of the container. |
+| JK              | J moves focus to the next item, K moves to the previous. Does not move focus if the currently-focused element is a text box. [Originally from](https://catonmat.net/why-vim-uses-hjkl-as-arrow-keys) the vi keybindings | Used in certain lists                                                                                                                    |
+| HL              | H moves focus to the previous item, L moves to the next. Does not move focus if the currently-focused element is a text box. [Originally from](https://catonmat.net/why-vim-uses-hjkl-as-arrow-keys) the vi keybindings | Used in certain lists                                                                                                                    |
+| WS              | W moves focus to the previous item, S moves to the next. Does not move focus if the currently-focused element is a text box.                                                                                            | Any situation where it is more ergonomic for the left hand to perform this action, such as in a gaming context (rare)                    |
+| AD              | A moves focus to the previous item, D moves to the next. Does not move focus if the currently-focused element is a text box.                                                                                            | Any situation where it is more ergonomic for the left hand to perform this action, such as in a gaming context (rare)                    |
+
+### DOM Focus vs. Active Descendant
+
+The `focusZone` behavior supports two modes of operation: DOM Focus and Active Descendant.
+
+- DOM Focus is the default mode and by far the most commonly needed. When a key is used to move focus, we call `.focus()` directly on the element to receive focus. This results in `document.activeElement` getting set to this new element, and it will receive any necessary styles via `:focus` and `:focus-within`.
+- Active Descendant mode does _not_ move DOM focus. Instead, focus remains on the _control_ element, and its `aria-activedescendant` attribute is set to the ID of the relevant element. Because there are no `:focus` styles applied and no `focus` events fired, you can supply an `onActiveDescendantChanged` callback to handle any necessary styles or other logic as the active descendant changes. For more information on the Active Descendant focus pattern, see [6.6.2 Managing Focus in Composites Using `aria-activedescendant`](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant) from the ARIA Authoring Practices document.
+
+### Demo
+
+Deploy Storybook to see live demos of `focusZone`.
+
+### Usage
+
+```ts
+const settings = {
+  bindKeys: FocusKeys.ArrowVertical | FocusKeys.HomeAndEnd
+} as FocusZoneSettings
+const focusZone = document.getElementById('focusZoneContainer')
+focusZone(focusZone, settings)
+```
+
+### API
+
+The `focusZone` function takes the following arguments.
+
+| Name      | Type                | Default | Description                                                                        |
+| :-------- | :------------------ | :-----: | :--------------------------------------------------------------------------------- |
+| container | `Element`           |         | The focus zone will apply to this container and all of its focusable descendants.  |
+| settings  | `FocusZoneSettings` |  `{}`   | Settings to customize the focus zone. See below for a description of each setting. |
+
+#### FocusZoneSettings interface
+
+`FocusZoneSettings` is an object with the following interface. All properties are optional and have default behaviors.
+
+| Name                      | Type                                          |                     Default                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| :------------------------ | :-------------------------------------------- | :----------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| bindKeys                  | `FocusKeys` (numeric enum)                    | `FocusKeys.ArrowVertical │ FocusKeys.HomeAndEnd` | Bit flags that identify keys that will move focus around the focus zone. Each available key either moves focus to the "next", "previous", "start", or "end" element, so it is best to only bind the keys that make sense to move focus in your UI. Use the `FocusKeys` object to discover supported keys (listed in the "Supported keys" section above). <br /><br />Use the bitwise "OR" operator (&#124;) to combine key types. For example, `FocusKeys.WASD │ FocusKeys.HJKL` represents all of W, A, S, D, H, J, K, and L.<br /><br />The default for this setting is `FocusKeys.ArrowVertical │ FocusKeys.HomeAndEnd`, unless `getNextFocusable` is provided, in which case `FocusKeys.ArrowAll │ FocusKeys.HomeAndEnd` is used as the default.                                                        |
+| focusOutBehavior          | `"stop" │ "wrap"`                             |                     `"stop"`                     | Choose the behavior applied in cases where focus is currently at either the first or last element of the container. `"stop"` - do nothing and keep focus where it was; `"wrap"` - wrap focus around to the first element from the last, or the last element from the first                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| focusInStrategy           | `"first" │ "closest" │ "previous" │ Function` |                   `"previous"`                   | This option allows customization of the behavior that determines which of the focusable elements should be focused when focus enters the container via the Tab key.<br /><br />When set to `"first"`, whenever focus enters the container via Tab, we will focus the first focusable element. When set to `"previous"`, the most recently focused element will be focused (fallback to first if there was no previous).<br /><br />The "closest" strategy works like "first", except either the first or the last element of the container will be focused, depending on the direction from which focus comes.<br /><br />If a function is provided, this function should return the `HTMLElement` intended to receive focus. This is useful if you want to focus the currently "selected" item or element. |
+| getNextFocusable          | `Function`                                    |                                                  | This is a callback used to customize the next element to focus when a bound key is pressed. The function takes 3 arguments: `direction` (`"previous"`, `"next"`, `"start"`, or `"end"`), `from` (Element or `undefined`), and `event` (KeyboardEvent). The function should return the next element to focus, or `undefined`. If `undefined` is returned, the regular algorithm to select the next element to focus will be used.                                                                                                                                                                                                                                                                                                                                                                            |
+| focusableElementFilter    | `Function`                                    |                                                  | This is a callback used to cull focusable elements from participating in the focus zone.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| abortSignal               | `AbortSignal`                                 |                                                  | If passed, the focus zone will be deactivated and all event listeners removed when this signal is aborted. If not passed, an `AbortSignal` will be returned by the `focusZone` function.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| activeDescendantControl   | `HTMLElement`                                 |                                                  | If `activeDescendantControl` is supplied, do not move focus or alter `tabindex` on any element. Instead, manage `aria-activedescendant` according to the [ARIA best practices guidelines](https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant).<br /><br />The given `activeDescendantControl` will be given an `aria-controls` attribute that references the ID of the `container`. Additionally, it will be given an `aria-activedescendant` attribute that references the ID of the currently-active descendant.<br /><br />This element will retain DOM focus as arrow keys are pressed.                                                                                                                                                                                           |
+| onActiveDescendantChanged | `Function`                                    |                                                  | This function is called each time the active descendant changes (only applicable if `activeDescendantControl` is given). The function takes two arguments: `newActiveDescendant` and `previousActiveDescendant`, both `HTMLElement`, either of which can be undefined (e.g. when an element in the container first becomes active, or when the controlling element becomes unfocused).                                                                                                                                                                                                                                                                                                                                                                                                                      |
+
+### Best practices
+
+We highly recommend reading [Section 6: Developing a Keyboard Interface](https://www.w3.org/TR/wai-aria-practices-1.1/#keyboard) from the WAI-ARIA Authoring Practices document.
+
+## useFocusZone hook
+
+The `useFocusZone` hook is used to provide focus zone behavior to React components. The hook returns a ref that must be added to the container element.
+
+### Using your own refs
+
+If you would like to use your own refs, you can pass them into the hook as part of the settings object (see the interface below).
+
+### Hook dependencies
+
+Like other hooks such as `useCallback` and `useEffect`, this hook takes a dependencies array. If defined, the focus zone will be re-applied when a dependency changes (and the old one will be cleaned up).
+
+### Usage
+
+```jsx
+export const FocusZoneExample = () => {
+  const {containerRef} = useFocusZone({bindKeys: FocusKeys.ArrowVertical | FocusKeys.HomeAndEnd})
+  return (
+    <div ref={containerRef}>
+      <button>First</button>
+      <button>Second</button>
+      <button>Third</button>
+    </div>
+  )
+}
+```
+
+### useFocusZone hook
+
+| Name         | Type                    |  Default  | Description                                                         |
+| :----------- | :---------------------- | :-------: | :------------------------------------------------------------------ |
+| settings     | `FocusZoneHookSettings` | undefined | Optional settings to control how the focus zone behaves. See below. |
+| dependencies | `React.DependencyList`  | undefined | Dependencies to determine when to initialize the focus zone.        |
+
+**Return value**
+
+| Name                       | Type                           | Description                                                                               |
+| :------------------------- | :----------------------------- | :---------------------------------------------------------------------------------------- |
+| containerRef               | `React.RefObject<HTMLElement>` | This ref must be added to the container's JSX.                                            |
+| activeDescendantControlRef | `React.RefObject<HTMLElement>` | If using active descendant focusing, this ref must be added to the control element's JSX. |
+
+### FocusZoneHookSettings interface
+
+`FocusZoneHookSettings` is an object with an interface that extends `FocusZoneSettings` (see above), however, the `activeDescendantControl` prop is omitted (instead see the `activeDescendantFocus` prop below). Additionally, it adds the following properties:
+
+| Name                  | Type                                     |   Default   | Description                                                                                                                                                                                                                                                                                                                                                   |
+| :-------------------- | :--------------------------------------- | :---------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| containerRef          | `React.RefObject`                        | `undefined` | If provided, this will be the ref used to access the element that will become the container of the focus zone. Otherwise, this hook will create the ref for you and return it. In both cases, the ref must be provided to the container's JSX.                                                                                                                |
+| activeDescendantFocus | `boolean │ React.RefObject<HTMLElement>` |   `false`   | If false, the focus zone will apply normal DOM focusing (see **DOM Focus vs. Active Descendant** above). If true, or if a ref is provided, the focus zone will use "active descendant" focusing. If a ref is applied, it will be used as the control element for active descendant focus. If `true` is given, a ref will be created and returned by the hook. |
+| disabled              | `boolean`                                |   `false`   | Set to true to disable the focus zone and clean up listeners. Can be re-enabled at any time.                                                                                                                                                                                                                                                                  |