How to use reakit-utils - 10 common examples

export function press(
  key: string,
  element?: Element | null,
  options: KeyboardEventInit = {}
) {
  if (element == null) {
    element = document.activeElement || document.body;
  }

  if (!element) return;

  // We can't press on elements that aren't focusable
  if (!isFocusable(element) && element.tagName !== "BODY") return;

  // If element is not focused, we should focus it
  if (element.ownerDocument?.activeElement !== element) {
    if (element.tagName === "BODY") {
      blur();
    } else {
      focus(element);
    }
  }

  // Track event.preventDefault() calls so we bail out of keydown/keyup effects
  const defaultPrevented = subscribeDefaultPrevented(
    element,
    "keydown",
    "keyup"
  );

export function type(
  text: string,
  element?: DirtiableElement | null,
  options: InputEventInit = {}
) {
  if (element == null) {
    element = document.activeElement;
  }

  if (!element || !isFocusable(element)) return;

  if (!isTextField(element)) {
    warning(
      true,
      "[reakit-test-utils/type]",
      "You're trying to type on an element that is not able of being typed on a keyboard."
    );
    return;
  }

  focus(element);

  // Set element dirty so blur() can dispatch a change event
  element.dirty = true;

  for (const char of text) {

// Move focus onto menu after blurring
        if (
          document.activeElement === document.body &&
          menuRef.current &&
          !isTouchDevice()
        ) {
          menuRef.current.focus();
        }
      },
      [menuRef]
    );

    return {
      role: "menuitem",
      onMouseOver: useAllCallbacks(onMouseOver, htmlOnMouseOver),
      onMouseOut: useAllCallbacks(onMouseOut, htmlOnMouseOut),
      ...htmlProps
    };
  }
});

useUpdateEffect(() => {
    const dialog = dialogRef.current;

    warning(
      Boolean(shouldFocus && !dialog),
      "[reakit/Dialog]",
      "Can't set initial focus on dialog because `ref` wasn't passed to component.",
      "See https://reakit.io/docs/dialog"
    );

    // If there're nested open dialogs, let them handle focus
    if (
      !shouldFocus ||
      !dialog ||
      nestedDialogs.find(child =>
        Boolean(child.current && !child.current.hidden)
      )
    ) {
      return;
    }

export function useHiddenState(
  initialState: SealedInitialState = {}
): HiddenStateReturn {
  const {
    unstable_animated: animated = false,
    visible: sealedVisible = false,
    unstable_isMounted: initialIsMounted = false,
    ...sealed
  } = useSealedState(initialState);

  const id = unstable_useIdState(sealed);

  const [visible, setVisible] = React.useState(sealedVisible);
  const [animating, setAnimating] = React.useState(false);
  const [isMounted, setIsMounted] = React.useState(initialIsMounted);
  const lastVisible = useLastValue(visible);

  if (
    animated &&
    !animating &&
    lastVisible.current != null &&
    lastVisible.current !== visible
  ) {
    // Sets animating to true when when visible changes
    setAnimating(true);

const [visible, setVisible] = React.useState(sealedVisible);
  const [animating, setAnimating] = React.useState(false);
  const [isMounted, setIsMounted] = React.useState(initialIsMounted);
  const lastVisible = useLastValue(visible);

  if (
    animated &&
    !animating &&
    lastVisible.current != null &&
    lastVisible.current !== visible
  ) {
    // Sets animating to true when when visible changes
    setAnimating(true);
  }

  useIsomorphicEffect(() => {
    if (typeof animated !== "number") return undefined;
    // Stops animation after an interval defined by animated
    const timeoutId = setTimeout(() => setAnimating(false), animated);
    return () => clearTimeout(timeoutId);
  }, [animated]);

  const show = React.useCallback(() => {
    warning(
      !isMounted,
      "[reakit/Hidden]",
      "You're trying to show a hidden element that hasn't been mounted yet.",
      "You shouldn't conditionally render a `Hidden` component (or any of its derivatives) as this will make some features not work.",
      "If this is intentional, you can omit this warning by passing `unstable_isMounted: true` to `useHiddenState` or just ignore it.",
      "See https://reakit.io/docs/hidden/#conditionally-rendering"
    );
    setVisible(true);

export function createHook(options: CreateHookOptions) {
  const composedHooks = toArray(options.compose) as Hook[];

  const __useOptions = (hookOptions: O, htmlProps: P) => {
    // Call the current hook's useOptions first
    if (options.useOptions) {
      hookOptions = options.useOptions(hookOptions, htmlProps);
    }
    // If there's name, call useOptions from the system context
    if (options.name) {
      hookOptions = useOptions(options.name, hookOptions, htmlProps);
    }
    return hookOptions;
  };

  const useHook: Hook = (
    hookOptions = {} as O,
    htmlProps = {} as P,

export function useFocusOnShow(
  dialogRef: React.RefObject,
  nestedDialogs: Array>,
  options: DialogOptions
) {
  const initialFocusRef = options.unstable_initialFocusRef;
  const shouldFocus = options.visible && options.unstable_autoFocusOnShow;

  useUpdateEffect(() => {
    const dialog = dialogRef.current;

    warning(
      Boolean(shouldFocus && !dialog),
      "[reakit/Dialog]",
      "Can't set initial focus on dialog because `ref` wasn't passed to component.",
      "See https://reakit.io/docs/dialog"
    );

    // If there're nested open dialogs, let them handle focus
    if (
      !shouldFocus ||
      !dialog ||
      nestedDialogs.find(child =>
        Boolean(child.current && !child.current.hidden)
      )

export function useFocusOnHide(
  dialogRef: React.RefObject,
  disclosuresRef: React.RefObject,
  options: DialogOptions
) {
  const shouldFocus = options.unstable_autoFocusOnHide && !options.visible;

  useUpdateEffect(() => {
    if (!shouldFocus) return;
    const dialog = dialogRef.current;

    // Hide was triggered by a click/focus on a tabbable element outside
    // the dialog or on another dialog. We won't change focus then.
    if (
      document.activeElement &&
      dialog &&
      !dialog.contains(document.activeElement) &&
      (isTabbable(document.activeElement) ||
        document.activeElement.getAttribute("data-dialog") === "true")
    ) {
      return;
    }

    const finalFocusEl =

export const Demoboard = (props: DemoboardProps = defaultProps) => {
  // Each demoboard managed by a single worker needs to have a unique id.
  // Given that a worker may be shared over multiple nested demoboards, we'll
  // want to scope our generated ids by demoboard id.
  const demoboard = (typeof window !== 'undefined' &&
    (window as any).demoboard) || {
    id: 'demoboard',
  }
  const defaultId = useId(demoboard.id + '-')

  const { id = defaultId, width, height, style, className, ...rest } = props
  const project = useDemoboardProject(rest)
  const build = useDemoboardBuild(id, project.buildConfig)
  const instance = useDemoboardInstance({
    build,
    history: project.state.view.history,
    pause: false,
    onChangeHistory: value => {
      project.dispatch({
        type: 'history.set',
        history: value,
      })
    },
  })