@linzjs/step-ag-grid 1.4.5 → 1.4.6

package/src/react-menu3/positionUtils/getPositionHelpers.ts

@@ -1,10 +1,16 @@
-// @ts-nocheck
 import { parsePadding } from "../utils";
+import { MutableRefObject } from "react";
 
-export const getPositionHelpers = (containerRef, menuRef, menuScroll, boundingBoxPadding) => {
+export const getPositionHelpers = (
+  containerRef: MutableRefObject<HTMLElement>,
+  menuRef: MutableRefObject<HTMLElement>,
+  menuScroll: Window | Element,
+  boundingBoxPadding: string | undefined,
+) => {
   const menuRect = menuRef.current.getBoundingClientRect();
   const containerRect = containerRef.current.getBoundingClientRect();
-  const thisWindow = containerRef.current.ownerDocument.defaultView;
+  const thisWindow = containerRef.current.ownerDocument.defaultView ?? window;
+
   const boundingRect =
     menuScroll === window || menuScroll === thisWindow
       ? {
@@ -13,17 +19,18 @@ export const getPositionHelpers = (containerRef, menuRef, menuScroll, boundingBo
           right: thisWindow.document.documentElement.clientWidth,
           bottom: thisWindow.innerHeight,
         }
-      : menuScroll.getBoundingClientRect();
+      : (menuScroll as Element).getBoundingClientRect();
   const padding = parsePadding(boundingBoxPadding);
 
   // For left and top, overflows are negative value.
   // For right and bottom, overflows are positive value.
-  const getLeftOverflow = (x) => x + containerRect.left - boundingRect.left - padding.left;
-  const getRightOverflow = (x) => x + containerRect.left + menuRect.width - boundingRect.right + padding.right;
-  const getTopOverflow = (y) => y + containerRect.top - boundingRect.top - padding.top;
-  const getBottomOverflow = (y) => y + containerRect.top + menuRect.height - boundingRect.bottom + padding.bottom;
+  const getLeftOverflow = (x: number) => x + containerRect.left - boundingRect.left - padding.left;
+  const getRightOverflow = (x: number) => x + containerRect.left + menuRect.width - boundingRect.right + padding.right;
+  const getTopOverflow = (y: number) => y + containerRect.top - boundingRect.top - padding.top;
+  const getBottomOverflow = (y: number) =>
+    y + containerRect.top + menuRect.height - boundingRect.bottom + padding.bottom;
 
-  const confineHorizontally = (x) => {
+  const confineHorizontally = (x: number) => {
     // If menu overflows to the left side, adjust x to have the menu contained within the viewport
     // and there is no need to check the right side;
     // if it doesn't overflow to the left, then check the right side
@@ -35,7 +42,7 @@ export const getPositionHelpers = (containerRef, menuRef, menuScroll, boundingBo
       if (rightOverflow > 0) {
         x -= rightOverflow;
         // Check again to make sure menu doesn't overflow to the left
-        // because it may go off screen and cannot be scroll into view.
+        // because it may go off-screen and cannot be scrolled into view.
         leftOverflow = getLeftOverflow(x);
         if (leftOverflow < 0) x -= leftOverflow;
       }
@@ -44,7 +51,7 @@ export const getPositionHelpers = (containerRef, menuRef, menuScroll, boundingBo
     return x;
   };
 
-  const confineVertically = (y) => {
+  const confineVertically = (y: number) => {
     // Similar logic to confineHorizontally above
     let topOverflow = getTopOverflow(y);
     if (topOverflow < 0) {

package/src/react-menu3/positionUtils/placeArrowHorizontal.ts

@@ -1,8 +1,15 @@
-// @ts-nocheck
-export const placeArrowHorizontal = ({ arrowRef, menuX, anchorRect, containerRect, menuRect }) => {
-  let x = anchorRect.left - containerRect.left - menuX + anchorRect.width / 2;
-  const offset = arrowRef.current.offsetWidth * 1.25;
+import { MutableRefObject } from "react";
+
+export const placeArrowHorizontal = (p: {
+  arrowRef: MutableRefObject<HTMLElement | null>;
+  menuX: number;
+  anchorRect: DOMRect;
+  containerRect: DOMRect;
+  menuRect: DOMRect;
+}) => {
+  let x = p.anchorRect.left - p.containerRect.left - p.menuX + p.anchorRect.width / 2;
+  const offset = p.arrowRef.current ? p.arrowRef.current.offsetWidth * 1.25 : 0;
   x = Math.max(offset, x);
-  x = Math.min(x, menuRect.width - offset);
+  x = Math.min(x, p.menuRect.width - offset);
   return x;
 };

package/src/react-menu3/positionUtils/placeArrowVertical.ts

@@ -1,8 +1,15 @@
-// @ts-nocheck
-export const placeArrowVertical = ({ arrowRef, menuY, anchorRect, containerRect, menuRect }) => {
-  let y = anchorRect.top - containerRect.top - menuY + anchorRect.height / 2;
-  const offset = arrowRef.current.offsetHeight * 1.25;
+import { MutableRefObject } from "react";
+
+export const placeArrowVertical = (p: {
+  arrowRef: MutableRefObject<HTMLElement | null>;
+  menuY: number;
+  anchorRect: DOMRect;
+  containerRect: DOMRect;
+  menuRect: DOMRect;
+}) => {
+  let y = p.anchorRect.top - p.containerRect.top - p.menuY + p.anchorRect.height / 2;
+  const offset = p.arrowRef.current ? p.arrowRef.current.offsetHeight * 1.25 : 0;
   y = Math.max(offset, y);
-  y = Math.min(y, menuRect.height - offset);
+  y = Math.min(y, p.menuRect.height - offset);
   return y;
 };

package/src/react-menu3/positionUtils/placeLeftorRight.ts

@@ -1,22 +1,38 @@
-// @ts-nocheck
 import { placeArrowVertical } from "./placeArrowVertical";
+import { getPositionHelpers } from "./getPositionHelpers";
+import { MutableRefObject } from "react";
+import { MenuDirection } from "../index";
 
-export const placeLeftorRight = ({
-  anchorRect,
-  containerRect,
-  menuRect,
-  placeLeftorRightY,
-  placeLeftX,
-  placeRightX,
-  getLeftOverflow,
-  getRightOverflow,
-  confineHorizontally,
-  confineVertically,
-  arrowRef,
-  arrow,
-  direction,
-  position,
-}) => {
+export interface placeLeftorRightParams {
+  anchorRect: DOMRect;
+  placeLeftorRightY: number;
+  placeLeftX: number;
+  placeRightX: number;
+  arrowRef: MutableRefObject<HTMLElement | null>;
+  arrow?: boolean;
+  direction: MenuDirection;
+  position: "auto" | "anchor" | "initial";
+}
+
+export const placeLeftorRight = (
+  props: ReturnType<typeof getPositionHelpers> & placeLeftorRightParams,
+): { arrowY: number | undefined; x: number; y: number; computedDirection: MenuDirection } => {
+  const {
+    anchorRect,
+    containerRect,
+    menuRect,
+    placeLeftorRightY,
+    placeLeftX,
+    placeRightX,
+    getLeftOverflow,
+    getRightOverflow,
+    confineHorizontally,
+    confineVertically,
+    arrowRef,
+    arrow,
+    direction,
+    position,
+  } = props;
   let computedDirection = direction;
   let y = placeLeftorRightY;
   if (position !== "initial") {

package/src/react-menu3/positionUtils/placeToporBottom.ts

@@ -1,24 +1,40 @@
-// @ts-nocheck
 import { placeArrowHorizontal } from "./placeArrowHorizontal";
+import { getPositionHelpers } from "./getPositionHelpers";
+import { MutableRefObject } from "react";
+import { MenuDirection } from "../index";
 
-export const placeToporBottom = ({
-  anchorRect,
-  containerRect,
-  menuRect,
-  placeToporBottomX,
-  placeTopY,
-  placeBottomY,
-  getTopOverflow,
-  getBottomOverflow,
-  confineHorizontally,
-  confineVertically,
-  arrowRef,
-  arrow,
-  direction,
-  position,
-}) => {
+export interface placeToporBottomParams {
+  anchorRect: DOMRect;
+  placeToporBottomX: number;
+  placeTopY: number;
+  placeBottomY: number;
+  arrowRef: MutableRefObject<HTMLElement | null>;
+  arrow?: boolean;
+  direction: "left" | "right" | "top" | "bottom";
+  position: "auto" | "anchor" | "initial";
+}
+
+export const placeToporBottom = (
+  props: ReturnType<typeof getPositionHelpers> & placeToporBottomParams,
+): { arrowX?: number | undefined; x: number; y: number; computedDirection: MenuDirection } => {
+  const {
+    anchorRect,
+    containerRect,
+    menuRect,
+    placeToporBottomX,
+    placeTopY,
+    placeBottomY,
+    getTopOverflow,
+    getBottomOverflow,
+    confineHorizontally,
+    confineVertically,
+    arrowRef,
+    arrow,
+    direction,
+    position,
+  } = props;
   // make sure invalid direction is treated as 'bottom'
-  let computedDirection = direction === "top" ? "top" : "bottom";
+  let computedDirection: MenuDirection = direction === "top" ? "top" : "bottom";
   let x = placeToporBottomX;
   if (position !== "initial") {
     x = confineHorizontally(x);

package/src/react-menu3/positionUtils/positionContextMenu.ts

@@ -1,5 +1,17 @@
-// @ts-nocheck
-export const positionContextMenu = ({ positionHelpers, anchorPoint }) => {
+import { getPositionHelpers } from "./getPositionHelpers";
+import { MenuDirection } from "../index";
+
+export const positionContextMenu = ({
+  positionHelpers,
+  anchorPoint,
+}: {
+  positionHelpers: ReturnType<typeof getPositionHelpers>;
+  anchorPoint: { x: number; y: number };
+}): {
+  x: number;
+  y: number;
+  computedDirection: MenuDirection;
+} => {
   const {
     menuRect,
     containerRect,
@@ -33,7 +45,7 @@ export const positionContextMenu = ({ positionHelpers, anchorPoint }) => {
   }
 
   // Similar logic to the left and right side above.
-  let computedDirection = "bottom";
+  let computedDirection: MenuDirection = "bottom";
   const bottomOverflow = getBottomOverflow(y);
   if (bottomOverflow > 0) {
     const adjustedY = y - menuRect.height;

package/src/react-menu3/positionUtils/positionMenu.ts

@@ -1,23 +1,28 @@
-// @ts-nocheck
 import { placeLeftorRight } from "./placeLeftorRight";
 import { placeToporBottom } from "./placeToporBottom";
+import { MutableRefObject } from "react";
+import { getPositionHelpers } from "./getPositionHelpers";
+import { MenuDirection } from "../index";
 
-export const positionMenu = ({
-  arrow,
-  align,
-  direction,
-  offsetX,
-  offsetY,
-  position,
-  anchorRef,
-  arrowRef,
-  positionHelpers,
-}) => {
+interface positionMenuProps {
+  offsetX: number;
+  offsetY: number;
+  arrowRef: MutableRefObject<HTMLDivElement | null>;
+  anchorRef: MutableRefObject<HTMLElement | null>;
+  arrow?: boolean;
+  direction: MenuDirection;
+  position: "auto" | "anchor" | "initial";
+  align: "start" | "center" | "end";
+  positionHelpers: ReturnType<typeof getPositionHelpers>;
+}
+
+export const positionMenu = (props: positionMenuProps) => {
+  const { arrow, align, direction, offsetX, offsetY, position, anchorRef, arrowRef, positionHelpers } = props;
   const { menuRect, containerRect } = positionHelpers;
 
   let horizontalOffset = offsetX;
   let verticalOffset = offsetY;
-  if (arrow) {
+  if (arrow && arrowRef.current) {
     if (direction === "left" || direction === "right") {
       horizontalOffset += arrowRef.current.offsetWidth;
     } else {
@@ -25,7 +30,9 @@ export const positionMenu = ({
     }
   }
 
-  const anchorRect = anchorRef.current.getBoundingClientRect();
+  const anchorRect = anchorRef.current
+    ? anchorRef.current.getBoundingClientRect()
+    : ({ left: 0, right: 0, top: 200, bottom: 200, width: 200, height: 200 } as DOMRect);
   const placeLeftX = anchorRect.left - containerRect.left - menuRect.width - horizontalOffset;
   const placeRightX = anchorRect.right - containerRect.left + horizontalOffset;
   const placeTopY = anchorRect.top - containerRect.top - menuRect.height - verticalOffset;

package/src/react-menu3/style-utils/index.ts

@@ -11,14 +11,17 @@ import {
   subMenuClass,
 } from "../utils";
 
-const bem = (block) => (element) => (modifier) => {
-  let selector = `.${block}`;
-  if (element) selector += `__${element}`;
-  if (modifier) selector += `--${modifier}`;
-  return selector;
-};
+const bem =
+  (block: string) =>
+  (element?: string) =>
+  (modifier?: string): string => {
+    let selector = `.${block}`;
+    if (element) selector += `__${element}`;
+    if (modifier) selector += `--${modifier}`;
+    return selector;
+  };
 
-const createSelector = (blockElement, modifiers = []) => {
+const createSelector = (blockElement: (modifier?: string) => string, modifiers: string[] = []) => {
   const selectorObj = {};
   Object.defineProperty(selectorObj, "name", {
     value: blockElement(),

package/src/react-menu3/utils/constants.ts

@@ -1,5 +1,7 @@
-// @ts-nocheck
-import { createContext } from "react";
+import { createContext, MutableRefObject } from "react";
+import { EventHandler, FocusPosition, MenuDirection, MenuOverflow, MenuState } from "../index";
+import { RadioChangeEvent } from "../components/MenuRadioGroup";
+import { ControlledMenuProps } from "../components/MenuList";
 
 export const menuContainerClass = "szh-menu-container";
 export const menuClass = "szh-menu";
@@ -12,13 +14,64 @@ export const menuGroupClass = "group";
 export const subMenuClass = "submenu";
 export const radioGroupClass = "radio-group";
 
-export const HoverItemContext = createContext();
-export const MenuListItemContext = createContext({});
-export const MenuListContext = createContext({});
-export const EventHandlersContext = createContext({});
-export const RadioGroupContext = createContext({});
-export const SettingsContext = createContext({});
-export const ItemSettingsContext = createContext({});
+export const HoverItemContext = createContext(undefined);
+
+interface MenuListItemContextType {
+  isParentOpen?: boolean;
+  isSubmenuOpen?: boolean;
+  dispatch: (actionType: number, item: any, nextIndex: FocusPosition) => void;
+  updateItems: (item: any, isMounted?: boolean) => void;
+  setOpenSubmenuCount: (fn: (count: number) => number) => void;
+}
+
+export const MenuListItemContext = createContext<MenuListItemContextType>({
+  dispatch: () => {},
+  updateItems: () => {},
+  setOpenSubmenuCount: () => 0,
+});
+
+export const MenuListContext = createContext<{
+  overflow?: MenuOverflow;
+  overflowAmt?: number;
+  parentMenuRef?: MutableRefObject<any>;
+  parentDir?: MenuDirection;
+  reposSubmenu?: boolean;
+}>({});
+
+export interface RMEvent {
+  value: any;
+  syntheticEvent: any;
+  checked?: boolean;
+  name?: string;
+  key?: string;
+}
+
+export const EventHandlersContext = createContext<{
+  handleClose?: () => void;
+  handleClick: (event: RMEvent, checked: boolean) => void;
+}>({
+  handleClick: () => {},
+});
+
+export const RadioGroupContext = createContext<{
+  value?: any;
+  name?: string;
+  onRadioChange?: EventHandler<RadioChangeEvent>;
+}>({});
+
+interface SettingsContextType extends ControlledMenuProps, MenuListItemContextType {
+  rootMenuRef?: MutableRefObject<any>;
+  rootAnchorRef?: MutableRefObject<any>;
+  scrollNodesRef: MutableRefObject<{ anchors?: Element[]; menu: any }>;
+}
+
+// FIXME hacking a default context in here is probably bad
+export const SettingsContext = createContext<SettingsContextType>({} as SettingsContextType);
+
+export const ItemSettingsContext = createContext<{ submenuCloseDelay: number; submenuOpenDelay: number }>({
+  submenuOpenDelay: 0,
+  submenuCloseDelay: 0,
+});
 
 export const Keys = Object.freeze({
   ENTER: "Enter",
@@ -55,7 +108,7 @@ export const FocusPositions = Object.freeze({
   LAST: "last",
 });
 
-export const MenuStateMap: Record<string, string | undefined> = Object.freeze({
+export const MenuStateMap: Record<string, MenuState> = Object.freeze({
   entering: "opening",
   entered: "open",
   exiting: "closing",

package/src/react-menu3/utils/propTypes.ts

@@ -4,6 +4,8 @@ export const stylePropTypes = (name?: string) => ({
   [name ? `${name}ClassName` : "className"]: oneOfType([string, func]),
 });
 
+export const Direction = oneOf(["left", "right", "top", "bottom"]);
+
 // Menu, SubMenu and ControlledMenu
 export const menuPropTypes = {
   className: string,
@@ -16,7 +18,7 @@ export const menuPropTypes = {
   offsetX: number,
   offsetY: number,
   align: oneOf(["start", "center", "end"]),
-  direction: oneOf(["left", "right", "top", "bottom"]),
+  direction: Direction,
   position: oneOf(["auto", "anchor", "initial"]),
   overflow: oneOf(["auto", "visible", "hidden"]),
 };

package/src/react-menu3/utils/utils.ts

@@ -1,17 +1,36 @@
-// @ts-nocheck
 import { unstable_batchedUpdates } from "react-dom";
+import { MenuState, MenuStateOptions } from "../index";
+import { MenuButtonProps } from "../components/MenuButton";
+import { findIndex } from "lodash-es";
 
-export const isMenuOpen = (state) => !!state && state[0] === "o";
-export const batchedUpdates = unstable_batchedUpdates || ((callback) => callback());
-export const values = Object.values || ((obj) => Object.keys(obj).map((key) => obj[key]));
+export const isMenuOpen = (state?: MenuState) => !!state && state[0] === "o";
+export const batchedUpdates = unstable_batchedUpdates || ((callback: () => any) => callback());
+export const values = Object.values || ((obj: { [x: string]: any }) => Object.keys(obj).map((key) => obj[key]));
 export const floatEqual = (a: number, b: number, diff = 0.0001) => Math.abs(a - b) < diff;
-export const getTransition = (transition: boolean | Record<string, string>, name: string) =>
+
+export type TransitionMap = {
+  open?: boolean;
+  close?: boolean;
+  item?: boolean;
+};
+export const getTransition = (transition: MenuStateOptions["transition"], name: keyof TransitionMap) =>
   transition === true || !!(transition && transition[name]);
-export const safeCall = (fn, arg) => (typeof fn === "function" ? fn(arg) : fn);
+
+export function safeCall<T, R>(fn: (arg?: T) => R, arg?: T): R;
+export function safeCall<T, R>(fn: T, arg: R): T;
+export function safeCall<T, R>(fn: (arg?: T) => R, arg?: T): T | R {
+  return typeof fn === "function" ? fn(arg) : fn;
+}
 
 const internalKey = "_szhsinMenu";
-export const getName = (component) => component[internalKey];
-export const defineName = (name, component) => Object.defineProperty(component, internalKey, { value: name });
+export const getName = (component: Record<string, any | undefined>) => component[internalKey];
+//export const defineName = <T extends any[]>(name: string, component: (...args: T) => JSX.Element) =>
+//  Object.defineProperty(component, internalKey, { value: name });
+
+export const defineName = (
+  name: string,
+  component: React.ForwardRefExoticComponent<React.PropsWithoutRef<MenuButtonProps> & React.RefAttributes<unknown>>,
+) => Object.defineProperty(component, internalKey, { value: name });
 
 export const mergeProps = (target: Record<string, any>, source: Record<string, any>) => {
   source &&
@@ -19,7 +38,7 @@ export const mergeProps = (target: Record<string, any>, source: Record<string, a
       const targetProp = target[key];
       const sourceProp = source[key];
       if (typeof sourceProp === "function" && targetProp) {
-        target[key] = (...arg) => {
+        target[key] = (...arg: any[]) => {
           sourceProp(...arg);
           targetProp(...arg);
         };
@@ -31,8 +50,8 @@ export const mergeProps = (target: Record<string, any>, source: Record<string, a
   return target;
 };
 
-export const parsePadding = (paddingStr) => {
-  if (typeof paddingStr !== "string") return { top: 0, right: 0, bottom: 0, left: 0 };
+export const parsePadding = (paddingStr: string | undefined) => {
+  if (paddingStr == null) return { top: 0, right: 0, bottom: 0, left: 0 };
 
   const padding = paddingStr.trim().split(/\s+/, 4).map(parseFloat);
   const top = !isNaN(padding[0]) ? padding[0] : 0;
@@ -46,26 +65,24 @@ export const parsePadding = (paddingStr) => {
 };
 
 // Adapted from https://github.com/popperjs/popper-core/tree/v2.9.1/src/dom-utils
-export const getScrollAncestor = (node) => {
-  const thisWindow = node.ownerDocument.defaultView;
+export const getScrollAncestor = (node: Node | null): Element | null => {
+  const thisWindow = (node?.ownerDocument ?? document).defaultView ?? window;
   while (node) {
     node = node.parentNode;
-    if (!node || node === thisWindow.document.body) return;
-    const { overflow, overflowX, overflowY } = thisWindow.getComputedStyle(node);
-    if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX)) return node;
+    if (!node || node === thisWindow?.document?.body) return null;
+    if (node instanceof Element) {
+      const { overflow, overflowX, overflowY } = thisWindow.getComputedStyle(node);
+      if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX)) return node;
+    }
   }
+  return null;
 };
 
-export function commonProps(isDisabled, isHovering) {
+export function commonProps(isDisabled?: boolean, isHovering?: boolean) {
   return {
     "aria-disabled": isDisabled || undefined,
     tabIndex: isHovering ? 0 : -1,
   };
 }
 
-export function indexOfNode(nodeList, node) {
-  for (let i = 0; i < nodeList.length; i++) {
-    if (nodeList[i] === node) return i;
-  }
-  return -1;
-}
+export const indexOfNode = (nodeList: NodeListOf<Node>, node: Node) => findIndex(nodeList, node);

package/src/react-menu3/utils/withHovering.tsx

@@ -1,17 +1,22 @@
-// @ts-nocheck
-import { memo, forwardRef, useContext, useRef } from "react";
+import { memo, forwardRef, useContext, useRef, MutableRefObject } from "react";
 import { HoverItemContext } from "./constants";
 
-export const withHovering = (name: string, WrappedComponent: any): any => {
+export interface withHoveringResultProps {
+  isHovering?: boolean;
+  externalRef?: MutableRefObject<any>;
+  menuItemRef?: MutableRefObject<any>;
+}
+
+export const withHovering = (name: string, WrappedComponent: (...args: any) => JSX.Element): any => {
   const Component = memo(WrappedComponent);
   const WithHovering = forwardRef<any>((props: any, ref) => {
-    const itemRef = useRef(null);
+    const menuItemRef = useRef<any>(null);
     return (
       <Component
         {...props}
-        itemRef={itemRef}
+        menuItemRef={menuItemRef}
         externalRef={ref}
-        isHovering={useContext(HoverItemContext) === itemRef.current}
+        isHovering={useContext(HoverItemContext) === menuItemRef.current}
       />
     );
   });

package/src/stories/components/ReactMenu.stories.tsx

@@ -0,0 +1,37 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+import "../../lui-overrides.scss";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { Grid } from "@components/Grid";
+import { Menu, MenuItem, MenuButton, MenuDivider, SubMenu } from "@react-menu3";
+
+export default {
+  title: "Components / React-menu",
+  component: Grid,
+  args: {
+    externalSelectedItems: [],
+    setExternalSelectedItems: () => {},
+  },
+} as ComponentMeta<typeof Grid>;
+
+const ReactMenuTemplate: ComponentStory<typeof Grid> = () => {
+  return (
+    <>
+      <Menu menuButton={<MenuButton>Open menu</MenuButton>}>
+        <MenuItem>New File</MenuItem>
+        <MenuItem>Save</MenuItem>
+        <SubMenu label="Edit">
+          <MenuItem>Cut</MenuItem>
+          <MenuItem>Copy</MenuItem>
+          <MenuItem>Paste</MenuItem>
+        </SubMenu>
+        <MenuItem>Print...</MenuItem>
+        <MenuDivider />
+        <MenuItem>Exit</MenuItem>
+      </Menu>
+    </>
+  );
+};
+
+export const ReactMenuControlled = ReactMenuTemplate.bind({});