How to use the reakit-system/createHook.createHook function in reakit-system

usePopover
} from "../Popover/Popover";
import { MenuBarOptions, MenuBarHTMLProps, useMenuBar } from "./MenuBar";
import { useMenuState, MenuStateReturn } from "./MenuState";
import { MenuContext, MenuContextType } from "./__utils/MenuContext";

export type MenuOptions = Omit &
  Pick &
  Pick, "first" | "last"> &
  MenuBarOptions;

export type MenuHTMLProps = PopoverHTMLProps & MenuBarHTMLProps;

export type MenuProps = MenuOptions & MenuHTMLProps;

export const useMenu = createHook({
  name: "Menu",
  compose: [useMenuBar, usePopover],
  useState: useMenuState,

  useOptions(options) {
    const parent = React.useContext(MenuContext);
    const parentIsMenuBar = parent && parent.role === "menubar";

    return {
      unstable_autoFocusOnShow: !parent,
      unstable_autoFocusOnHide: !parentIsMenuBar,
      modal: false,
      ...options,
      // will be handled differently from usePopover/useDialog
      hideOnEsc: false
    };

element.tagName === "A" ||
    element.tagName === "AUDIO" ||
    element.tagName === "VIDEO"
  );
}

// https://twitter.com/diegohaz/status/1176998102139572225
function isUserAgent(string: string) {
  if (typeof window === "undefined") return false;
  return window.navigator.userAgent.indexOf(string) !== -1;
}

const isSafariOrFirefoxOnMac =
  isUserAgent("Mac") && (isUserAgent("Safari") || isUserAgent("Firefox"));

export const useTabbable = createHook({
  name: "Tabbable",
  compose: useBox,
  keys: [
    "disabled",
    "focusable",
    "unstable_clickOnEnter",
    "unstable_clickOnSpace"
  ],

  useOptions(
    { unstable_clickOnEnter = true, unstable_clickOnSpace = true, ...options },
    { disabled }
  ) {
    return {
      disabled,
      unstable_clickOnEnter,

import { unstable_IdStateReturn, unstable_useIdState } from "./IdState";
import { unstable_IdContext } from "./IdProvider";

export type unstable_IdOptions = BoxOptions &
  Pick, "baseId" | "unstable_idCountRef"> & {
    /**
     * Same as the HTML attribute.
     */
    id?: string;
  };

export type unstable_IdHTMLProps = BoxHTMLProps;

export type unstable_IdProps = unstable_IdOptions & unstable_IdHTMLProps;

export const unstable_useId = createHook<
  unstable_IdOptions,
  unstable_IdHTMLProps
>({
  name: "Id",
  compose: useBox,
  useState: unstable_useIdState,
  keys: ["id"],

  useOptions(options, htmlProps) {
    const generateId = React.useContext(unstable_IdContext);

    const [suffix] = React.useState(() => {
      // This comes from useIdState
      if (options.unstable_idCountRef) {
        options.unstable_idCountRef.current += 1;
        return `-${options.unstable_idCountRef.current}`;

import { createComponent } from "reakit-system/createComponent";
import { createHook } from "reakit-system/createHook";
import { BoxOptions, BoxHTMLProps, useBox } from "../Box/Box";

export type SeparatorOptions = BoxOptions & {
  /**
   * Separator's orientation.
   */
  orientation?: "horizontal" | "vertical";
};

export type SeparatorHTMLProps = BoxHTMLProps;

export type SeparatorProps = SeparatorOptions & SeparatorHTMLProps;

export const useSeparator = createHook({
  name: "Separator",
  compose: useBox,
  keys: ["orientation"],

  useOptions({ orientation = "horizontal", ...options }) {
    return { orientation, ...options };
  },

  useProps(options, htmlProps) {
    return {
      role: "separator",
      "aria-orientation": options.orientation,
      ...htmlProps
    };
  }
});

Pick, "state" | "setState"> & {
    /**
     * Same as the `value` attribute.
     */
    value: any;
    /**
     * Same as the `checked` attribute.
     */
    checked?: boolean;
  };

export type RadioHTMLProps = RoverHTMLProps & React.InputHTMLAttributes;

export type RadioProps = RadioOptions & RadioHTMLProps;

export const useRadio = createHook({
  name: "Radio",
  compose: useRover,
  useState: useRadioState,
  keys: ["value", "checked"],

  useOptions(
    { unstable_clickOnEnter = false, ...options },
    { value, checked }
  ) {
    return { value, checked, unstable_clickOnEnter, ...options };
  },

  useProps(
    options,
    { onChange: htmlOnChange, onClick: htmlOnClick, ...htmlProps }
  ) {

import { createComponent } from "reakit-system/createComponent";
import { createHook } from "reakit-system/createHook";
import {
  SeparatorOptions,
  SeparatorHTMLProps,
  useSeparator
} from "../Separator/Separator";
import { useMenuState } from "./MenuState";

export type MenuSeparatorOptions = SeparatorOptions;

export type MenuSeparatorHTMLProps = SeparatorHTMLProps;

export type MenuSeparatorProps = MenuSeparatorOptions & MenuSeparatorHTMLProps;

export const useMenuSeparator = createHook<
  MenuSeparatorOptions,
  MenuSeparatorHTMLProps
>({
  name: "MenuSeparator",
  compose: useSeparator,
  useState: useMenuState,

  useOptions({ orientation = "vertical", ...options }) {
    return {
      orientation: orientation === "vertical" ? "horizontal" : "vertical",
      ...options
    };
  }
});

export const MenuSeparator = createComponent({

import { createHook } from "reakit-system/createHook";
import {
  DialogBackdropOptions,
  DialogBackdropHTMLProps,
  useDialogBackdrop
} from "../Dialog/DialogBackdrop";
import { usePopoverState } from "./PopoverState";

export type PopoverBackdropOptions = DialogBackdropOptions;

export type PopoverBackdropHTMLProps = DialogBackdropHTMLProps;

export type PopoverBackdropProps = PopoverBackdropOptions &
  PopoverBackdropHTMLProps;

export const usePopoverBackdrop = createHook<
  PopoverBackdropOptions,
  PopoverBackdropHTMLProps
>({
  name: "PopoverBackdrop",
  compose: useDialogBackdrop,
  useState: usePopoverState
});

export const PopoverBackdrop = createComponent({
  as: "div",
  useHook: usePopoverBackdrop
});

* @private
   */
  unstable_system?: unknown;
};

export type BoxHTMLProps = React.HTMLAttributes &
  React.RefAttributes & {
    /**
     * Function returned by hook to wrap children.
     */
    unstable_wrap?: (children: React.ReactNode) => JSX.Element;
  };

export type BoxProps = BoxOptions & BoxHTMLProps;

export const useBox = createHook({
  name: "Box",
  keys: ["unstable_system"]
});

export const Box = createComponent({
  as: "div",
  useHook: useBox
});

import { createComponent } from "reakit-system/createComponent";
import { createHook } from "reakit-system/createHook";
import {
  PopoverArrowOptions,
  PopoverArrowHTMLProps,
  usePopoverArrow
} from "../Popover/PopoverArrow";
import { useTooltipState } from "./TooltipState";

export type TooltipArrowOptions = PopoverArrowOptions;

export type TooltipArrowHTMLProps = PopoverArrowHTMLProps;

export type TooltipArrowProps = TooltipArrowOptions & TooltipArrowHTMLProps;

export const useTooltipArrow = createHook<
  TooltipArrowOptions,
  TooltipArrowHTMLProps
>({
  name: "TooltipArrow",
  compose: usePopoverArrow,
  useState: useTooltipState,

  useOptions({ size = 16, ...options }) {
    return { size, ...options };
  }
});

export const TooltipArrow = createComponent({
  as: "div",
  useHook: useTooltipArrow
});

import { useMenuItem, MenuItemOptions, MenuItemHTMLProps } from "./MenuItem";

export type MenuItemRadioOptions = RadioOptions &
  MenuItemOptions &
  Pick & {
    /**
     * MenuItemRadio's name as in `menu.values`.
     */
    name: string;
  };

export type MenuItemRadioHTMLProps = RadioHTMLProps & MenuItemHTMLProps;

export type MenuItemRadioProps = MenuItemRadioOptions & MenuItemRadioHTMLProps;

export const useMenuItemRadio = createHook<
  MenuItemRadioOptions,
  MenuItemRadioHTMLProps
>({
  name: "MenuItemRadio",
  compose: [useMenuItem, useRadio],
  useState: useMenuState,
  keys: ["name"],

  useOptions(options) {
    const setState = React.useCallback(
      value => options.unstable_setValue(options.name, value),
      [options.unstable_setValue, options.name]
    );

    return {
      ...options,