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

import React, { FC, useMemo } from "react";
import scssVariables from "@react-md/app-bar/dist/scssVariables";
import { MoreVertSVGIcon } from "@react-md/material-icons";
import { DropdownMenu } from "@react-md/menu";
import { unitToNumber } from "@react-md/utils";

import ToggleThemeMenuItem from "./ToggleThemeMenuItem";
import ToggleRTLMenuItem from "./ToggleRTLMenuItem";
import GithubLinkMenuItem from "./GithubLinkMenuItem";

const margin = unitToNumber(scssVariables["rmd-app-bar-lr-margin"]);
const options = {
  vwMargin: margin,
  vhMargin: margin,
};

const ActionMenu: FC = () => {
  const items = useMemo(
    () => [
      ,
      ,
      ,
    ],
    []
  );

  return (

import React, { FC, Fragment, useState, ReactNode } from "react";
import { List, ListRowRenderer } from "react-virtualized";
import { DropdownMenu, Menu, MenuItem, MenuRenderer } from "@react-md/menu";
import scssVariables from "@react-md/list/dist/scssVariables";
import { Text } from "@react-md/typography";
import { unitToNumber, useAppSize } from "@react-md/utils";

import Code from "components/Code/Code";

const mobileHeight = unitToNumber(scssVariables["rmd-list-item-large-height"]);
const desktopHeight = unitToNumber(
  scssVariables["rmd-list-item-dense-large-height"]
);

interface Item {
  leftAvatar: ReactNode;
  children: string;
}

const VirtualizedMenu: FC<{ items: Item[] }> = ({ items }) => {
  const { isDesktop } = useAppSize();
  const [value, setValue] = useState("None");

  const rowRenderer: ListRowRenderer = ({ key, index, style }) => (

import React, { FC, Fragment, useState, ReactNode } from "react";
import { List, ListRowRenderer } from "react-virtualized";
import { DropdownMenu, Menu, MenuItem, MenuRenderer } from "@react-md/menu";
import scssVariables from "@react-md/list/dist/scssVariables";
import { Text } from "@react-md/typography";
import { unitToNumber, useAppSize } from "@react-md/utils";

import Code from "components/Code/Code";

const mobileHeight = unitToNumber(scssVariables["rmd-list-item-large-height"]);
const desktopHeight = unitToNumber(
  scssVariables["rmd-list-item-dense-large-height"]
);

interface Item {
  leftAvatar: ReactNode;
  children: string;
}

const VirtualizedMenu: FC<{ items: Item[] }> = ({ items }) => {
  const { isDesktop } = useAppSize();
  const [value, setValue] = useState("None");

  const rowRenderer: ListRowRenderer = ({ key, index, style }) => (

import React, { FC, useMemo } from "react";
import scssVariables from "@react-md/app-bar/dist/scssVariables";
import { MoreVertSVGIcon } from "@react-md/material-icons";
import { DropdownMenu } from "@react-md/menu";
import { unitToNumber } from "@react-md/utils";

import ToggleThemeMenuItem from "./ToggleThemeMenuItem";
import ToggleRTLMenuItem from "./ToggleRTLMenuItem";
import GithubLinkMenuItem from "./GithubLinkMenuItem";
import TableOfContentsMenuItem from "./TableOfContentsMenuItem";
import Version1MenuItem from "./Version1MenuItem";

const margin = unitToNumber(scssVariables["rmd-app-bar-lr-margin"]);
const options = {
  vwMargin: margin,
  vhMargin: margin,
};

const ActionMenu: FC = () => {
  const items = useMemo(
    () => [
      ,
      ,
      ,
      ,
      ,
    ],
    []
  );

import React, { FC, Fragment, useState, ReactNode } from "react";
import { List, ListRowRenderer } from "react-virtualized";
import { DropdownMenu, Menu, MenuItem, MenuRenderer } from "@react-md/menu";
import scssVariables from "@react-md/list/dist/scssVariables";
import { Text } from "@react-md/typography";
import { unitToNumber, useAppSizeContext } from "@react-md/utils";

import Code from "components/Code/Code";

const mobileHeight = unitToNumber(scssVariables["rmd-list-item-large-height"]);
const desktopHeight = unitToNumber(
  scssVariables["rmd-list-item-dense-large-height"]
);

interface Item {
  leftAvatar: ReactNode;
  children: string;
}

const VirtualizedMenu: FC<{ items: Item[] }> = ({ items }) => {
  const { isDesktop } = useAppSizeContext();
  const [value, setValue] = useState("None");

  const rowRenderer: ListRowRenderer = ({ key, index, style }) => (

    () => unitToNumber(dense ? denseSpacing : spacing),
    [spacing, denseSpacing, dense]

import React, { FC, Fragment, useState, ReactNode } from "react";
import { List, ListRowRenderer } from "react-virtualized";
import { DropdownMenu, Menu, MenuItem, MenuRenderer } from "@react-md/menu";
import scssVariables from "@react-md/list/dist/scssVariables";
import { Text } from "@react-md/typography";
import { unitToNumber, useAppSizeContext } from "@react-md/utils";

import Code from "components/Code/Code";

const mobileHeight = unitToNumber(scssVariables["rmd-list-item-large-height"]);
const desktopHeight = unitToNumber(
  scssVariables["rmd-list-item-dense-large-height"]
);

interface Item {
  leftAvatar: ReactNode;
  children: string;
}

const VirtualizedMenu: FC<{ items: Item[] }> = ({ items }) => {
  const { isDesktop } = useAppSizeContext();
  const [value, setValue] = useState("None");

  const rowRenderer: ListRowRenderer = ({ key, index, style }) => (

if (position !== "auto") {
    return position;
  } else if (!container) {
    return "below";
  }

  const rect = container.getBoundingClientRect();
  if (rect.top > getViewportBounds("height", vhMargin)) {
    return "above";
  }

  let { left, right } = rect;
  const tooltip = document.getElementById(id);
  if (tooltip) {
    const { offsetWidth } = tooltip;
    const spacing = unitToNumber(getSpacing(config));
    const vw = getViewportSize("width");
    if (
      left + offsetWidth + spacing > vw &&
      right - offsetWidth - spacing < 0
    ) {
      return "below";
    }

    const halvedWidth = (tooltip as HTMLSpanElement).offsetWidth / 2;
    left -= halvedWidth;
    right += halvedWidth;
  }

  if (left < getViewportBounds("width", vwMargin)) {
    return "right";
  } else if (right > getViewportBounds("width", vwMargin, false)) {

getOptions = (node: HTMLElement) => {
      const spacing = unitToNumber(
        window.getComputedStyle(node).getPropertyValue("--rmd-tooltip-spacing")
      );

      return { xMargin: spacing, yMargin: spacing };
    };
  }