Package Exports

@zendeskgarden/container-focusjail
@zendeskgarden/container-focusjail/dist/index.cjs.js
@zendeskgarden/container-focusjail/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@zendeskgarden/container-focusjail) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@zendeskgarden/container-focusjail

This package includes containers relating to focus looping in the Garden Design System.

Installation

npm install @zendeskgarden/container-focusjail

Usage

This container implements the dialog focus loop design pattern and can be used to build a modal component. Check out storybook for live examples.

useFocusJail

The useFocusJail hook allows you to trap focus to a container element. Useful for modals and widgets. Garden uses this in react-components for the modals package.

import { useRef } from 'react';
import { useFocusJail } from '@zendeskgarden/container-focusjail';

const FocusJail = () => {
  const containerRef = useRef(null);
  const { getContainerProps } = useFocusJail({
    focusOnMount: false,
    environment: window.parent.document,
    containerRef
  });

  return (
    <>
      <input />
      <div {...getContainerProps({ ref: containerRef, tabIndex: -1 })}>
        <p>Focus is locked within the parent element</p>
        <input />
        <button>Focusable Items</button>
      </div>
    </>
  );
};

FocusJailContainer

FocusJailContainer is a render-prop wrapper for the useFocusJail hook.

import { createRef } from 'react';
import { FocusJailContainer } from '@zendeskgarden/container-focusjail';

const containerRef = createRef(null);

<FocusJailContainer
  containerRef={containerRef}
  focusOnMount={false}
  environment={window.parent.document}
>
  {({ getContainerProps }) => (
    <>
      <input />
      <div {...getContainerProps({ ref: containerRef, tabIndex: -1 })}>
        <p>Focus is locked within the parent element</p>
        <input />
        <button>Focusable Items</button>
      </div>
    </>
  )}
</FocusJailContainer>;