How to use the @react-md/utils.useInteractionModeContext function in @react-md/utils

tabletLayout,
    landscapeTabletLayout,
    desktopLayout,
    largeDesktopLayout,
  });

  const mainId = `${id}-main`;
  // this makes it so that the SkipToMainContent button can still
  // focus the `<main>` element, but the `<main>` will no longer be
  // focused if the user clicks inside. This is super nice since one
  // of my bigger patterns is to click somewhere then press tab to
  // focus a specific element. Without this fix, the first element in
  // the `<main>` tag would be focused instead of the closest focusable
  // element to the click area.
  let mainTabIndex: number | undefined;
  if (useInteractionModeContext() === "keyboard") {
    mainTabIndex = -1;
  }

  const navIcon = useIcon("menu", propNavIcon);
  const value = useMemo(
    () =&gt; ({
      showNav,
      hideNav,
      layout,
      isNavVisible,
      isFullHeight,
      isPersistent,
    }),
    [hideNav, isFullHeight, isNavVisible, isPersistent, layout, showNav]
  );
</main></main></main>

const i = title.lastIndexOf("- ");
      if (i !== -1) {
        title = title.substring(i + 2);
      }
    }
  }

  // this makes it so that the SkipToMainContent button can still
  // focus the `<main>` element, but the `<main>` will no longer be
  // focused if the user clicks inside. This is super nice since one
  // of my bigger patterns is to click somewhere then press tab to
  // focus a specific element. Without this fix, the first element in
  // the `<main>` tag would be focused instead of the closest focusable
  // element to the click area.
  let mainTabIndex: number | undefined;
  if (useInteractionModeContext() === "keyboard") {
    mainTabIndex = -1;
  }

  return (
    
      <header title="{title}">
      </header></main></main></main>

const i = title.lastIndexOf("- ");
      if (i !== -1) {
        title = title.substring(i + 2);
      }
    }
  }

  // this makes it so that the SkipToMainContent button can still
  // focus the `<main>` element, but the `<main>` will no longer be
  // focused if the user clicks inside. This is super nice since one
  // of my bigger patterns is to click somewhere then press tab to
  // focus a specific element. Without this fix, the first element in
  // the `<main>` tag would be focused instead of the closest focusable
  // element to the click area.
  let mainTabIndex: number | undefined;
  if (useInteractionModeContext() === "keyboard") {
    mainTabIndex = -1;
  }

  return (
    
      <header title="{title}">
      </header></main></main></main>

positionThreshold = DEFAULT_THRESHOLD,
  hoverDelay = DEFAULT_DELAY,
  touchTimeout = DEFAULT_DELAY,
  focusDelay = DEFAULT_DELAY,
  disableHoverMode,
  onMouseEnter,
  onMouseLeave,
  onTouchStart,
  onTouchMove,
  onFocus,
  onBlur,
  onKeyDown,
  onShow,
  onHide,
}: TooltipStateOptions): ReturnValue {
  const mode = useInteractionModeContext();
  const initiated = useRef(null);
  const setInitiated = useCallback((initiatedBy: TooltipInitiated) => {
    initiated.current = initiatedBy;
  }, []);

  const [visible, showTooltip, hide] = useToggle(false);
  const hideTooltip = useCallback(() => {
    initiated.current = null;
    hide();
  }, [hide]);

  useVisiblityChange({
    visible,
    onShow,
    onHide,
    mode: initiated.current,

onItemExpansion,
  onMultiItemExpansion,
  valueKey,
  getItemValue,
}: Options): ReturnValue {
  const items = useNestedTreeList(data, sort, rootId);
  const [visibleItems, itemIdRefs, flattenedItems] = useFlattenedTreeList({
    id,
    items,
    expandedIds,
    rootId,
    valueKey,
    getItemValue,
  });

  const isKeyboard = useInteractionModeContext() === "keyboard";

  const {
    activeId,
    onKeyDown: handleKeyDown,
    focusedIndex,
    setFocusedIndex,
  } = useActiveDescendantMovement<
    SearchableTreeItem,
    ListElement,
    HTMLLIElement
  >({
    ...MovementPresets.VERTICAL_TREE,
    items: visibleItems,
    baseId: id,
    getId(_baseId, index) {
      return (visibleItems[index] || { id: "" }).id;

const ToggleTheme: FC = () => {
  const { theme } = useTheme();
  const { toggleTheme } = useThemeActions();
  const isLight = theme === "light";

  const [toggled, enable, disable] = useToggle(false);
  let icon = ;
  if (toggled !== isLight) {
    icon = ;
  }

  const isMouseMode = useInteractionModeContext() === "mouse";

  return (
    
      
        {icon}
      
    
  );

const DenseTooltipsWrapper: FC = ({ children }) => {
  const [variables, setVariables] = useState([]);
  const container = useRef(null);
  const mode = useInteractionModeContext();

  const enableVariables = (): void => {
    if (!variables.length) {
      setVariables(VARIABLES);
    }
  };

  useEffect(() => {
    if (!variables.length) {
      return;
    }

    const handleLeave = (event: Event): void => {
      if (
        !container.current ||
        !event.target ||