@linzjs/step-ag-grid 2.0.0 → 2.1.0

package/src/components/gridForm/GridFormTextArea.tsx

@@ -2,9 +2,9 @@ import { useCallback, useState } from "react";
 import { TextAreaInput } from "../../lui/TextAreaInput";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
-import { CellParams } from "@components/GridCell";
+import { CellEditorCommon, CellParams } from "@components/GridCell";
 
-export interface GridFormTextAreaProps<RowType extends GridBaseRow> {
+export interface GridFormTextAreaProps<RowType extends GridBaseRow> extends CellEditorCommon {
   placeholder?: string;
   required?: boolean;
   maxlength?: number;
@@ -50,9 +50,9 @@ export const GridFormTextArea = <RowType extends GridBaseRow>(_props: GridFormTe
     },
     [props, invalid, value],
   );
-  const { popoverWrapper } = useGridPopoverHook({ save });
+  const { popoverWrapper } = useGridPopoverHook({ className: props.className, save });
   return popoverWrapper(
-    <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }} className={"FormTest"}>
+    <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }}>
       <TextAreaInput
         value={value}
         onChange={(e) => setValue(e.target.value)}

package/src/components/gridForm/GridFormTextInput.tsx

@@ -2,9 +2,9 @@ import { useCallback, useState } from "react";
 import { TextInputFormatted } from "../../lui/TextInputFormatted";
 import { useGridPopoverHook } from "../GridPopoverHook";
 import { GridBaseRow } from "../Grid";
-import { CellParams } from "@components/GridCell";
+import { CellEditorCommon, CellParams } from "@components/GridCell";
 
-export interface GridFormTextInputProps<RowType extends GridBaseRow> {
+export interface GridFormTextInputProps<RowType extends GridBaseRow> extends CellEditorCommon {
   placeholder?: string;
   units?: string;
   required?: boolean;
@@ -54,7 +54,7 @@ export const GridFormTextInput = <RowType extends GridBaseRow>(_props: GridFormT
     },
     [invalid, value, initValue, props],
   );
-  const { popoverWrapper, triggerSave } = useGridPopoverHook({ save });
+  const { popoverWrapper, triggerSave } = useGridPopoverHook({ className: props.className, save });
 
   return popoverWrapper(
     <div style={{ display: "flex", flexDirection: "row", width: props.width ?? 240 }} className={"FormTest"}>

package/src/components/gridPopoverEdit/GridPopoutEditMultiSelect.ts

@@ -18,5 +18,9 @@ export const GridPopoutEditMultiSelect = <RowType extends GridBaseRow, ValueType
     {
       editor: GridFormMultiSelect,
       ...props,
+      editorParams: {
+        className: "GridMultiSelect-containerMedium",
+        ...(props.editorParams as GridFormMultiSelectProps<RowType, ValueType>),
+      },
     },
   );

package/src/components/gridPopoverEdit/GridPopoverEditBearing.ts

@@ -3,10 +3,10 @@ import { bearingCorrectionValueFormatter, bearingValueFormatter } from "@utils/b
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridFormEditBearing, GridFormEditBearingProps } from "../gridForm/GridFormEditBearing";
 import { GridBaseRow } from "../Grid";
-import { ColDef } from "ag-grid-community";
+import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
 
 export const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
-  colDef: ColDef,
+  colDef: GenericCellColDef<RowType>,
   props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>,
 ): ColDefT<RowType> => {
   return GridCell(
@@ -25,7 +25,7 @@ export const GridPopoverEditBearingLike = <RowType extends GridBaseRow>(
 };
 
 export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
-  colDef: ColDef,
+  colDef: GenericCellColDef<RowType>,
   props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>,
 ): ColDefT<RowType> => {
   return GridPopoverEditBearingLike(
@@ -47,7 +47,7 @@ export const GridPopoverEditBearing = <RowType extends GridBaseRow>(
 };
 
 export const GridPopoverEditBearingCorrection = <RowType extends GridBaseRow>(
-  colDef: ColDef,
+  colDef: GenericCellColDef<RowType>,
   props: GenericCellEditorProps<GridFormEditBearingProps<RowType>>,
 ): ColDefT<RowType> => {
   return GridPopoverEditBearingLike(

package/src/components/gridPopoverEdit/GridPopoverEditDropDown.ts

@@ -2,10 +2,10 @@ import { GenericMultiEditCellClass } from "../GenericCellClass";
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormDropDown, GridFormPopoutDropDownProps } from "../gridForm/GridFormDropDown";
-import { ColDef } from "ag-grid-community";
+import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
 
 export const GridPopoverEditDropDown = <RowType extends GridBaseRow, ValueType>(
-  colDef: ColDef,
+  colDef: GenericCellColDef<RowType>,
   props: GenericCellEditorProps<GridFormPopoutDropDownProps<RowType, ValueType>>,
 ): ColDefT<RowType> =>
   GridCell(
@@ -18,5 +18,10 @@ export const GridPopoverEditDropDown = <RowType extends GridBaseRow, ValueType>(
     {
       editor: GridFormDropDown,
       ...props,
+      editorParams: {
+        // Defaults to medium size container
+        className: "GridPopoverEditDropDown-containerMedium",
+        ...(props.editorParams as GridFormPopoutDropDownProps<RowType, ValueType>),
+      },
     },
   );

package/src/components/gridPopoverEdit/GridPopoverMenu.scss

@@ -1,13 +1,13 @@
-@use 'node_modules/@linzjs/lui/dist/scss/Core' as lui;
+@use "../../../node_modules/@linzjs/lui/dist/scss/Foundation/Variables/ColorVars" as colors;
 
 .GridPopoutMenu-burger {
   cursor: pointer;
 
-  & svg {
-    fill: lui.$sea;
+  svg {
+    fill: colors.$sea;
   }
 }
 
 .GridPopoutMenu-burgerDisabled svg {
-  fill: lui.$disabled-color;
+  fill: colors.$disabled-color;
 }

package/src/components/gridPopoverEdit/GridPopoverMenu.tsx

@@ -1,18 +1,17 @@
 import "./GridPopoverMenu.scss";
-import "../../react-menu3/styles/index.scss";
 
-import { ColDef } from "ag-grid-community";
 import { GenericMultiEditCellClass } from "../GenericCellClass";
 import { GridBaseRow } from "../Grid";
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridFormPopoutMenu, GridFormPopoutMenuProps } from "../gridForm/GridFormPopoutMenu";
 import { GridRenderPopoutMenuCell } from "../gridRender/GridRenderPopoutMenuCell";
+import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
 
 /**
  * Popout burger menu
  */
 export const GridPopoverMenu = <RowType extends GridBaseRow>(
-  colDef: ColDef,
+  colDef: GenericCellColDef<RowType>,
   props: GenericCellEditorProps<GridFormPopoutMenuProps<RowType>>,
 ): ColDefT<RowType> =>
   GridCell<RowType, GridFormPopoutMenuProps<RowType>>(

package/src/components/gridPopoverEdit/GridPopoverMessage.ts

@@ -1,10 +1,10 @@
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridFormMessage, GridFormMessageProps } from "../gridForm/GridFormMessage";
 import { GridBaseRow } from "../Grid";
-import { ColDef } from "ag-grid-community";
+import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
 
 export const GridPopoverMessage = <RowType extends GridBaseRow>(
-  colDef: ColDef,
+  colDef: GenericCellColDef<RowType>,
   props: GenericCellEditorProps<GridFormMessageProps<RowType>>,
 ): ColDefT<RowType> => {
   return GridCell(

package/src/components/gridPopoverEdit/GridPopoverTextArea.ts

@@ -1,10 +1,10 @@
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormTextArea, GridFormTextAreaProps } from "../gridForm/GridFormTextArea";
-import { ColDef } from "ag-grid-community";
+import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
 
 export const GridPopoverTextArea = <RowType extends GridBaseRow>(
-  colDef: ColDef,
+  colDef: GenericCellColDef<RowType>,
   params: GenericCellEditorProps<GridFormTextAreaProps<RowType>>,
 ): ColDefT<RowType> =>
   GridCell(

package/src/components/gridPopoverEdit/GridPopoverTextInput.ts

@@ -1,10 +1,10 @@
 import { ColDefT, GenericCellEditorProps, GridCell } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 import { GridFormTextInput, GridFormTextInputProps } from "../gridForm/GridFormTextInput";
-import { ColDef } from "ag-grid-community";
+import { GenericCellColDef } from "@components/gridRender/GridRenderGenericCell";
 
 export const GridPopoverTextInput = <RowType extends GridBaseRow>(
-  colDef: ColDef,
+  colDef: GenericCellColDef<RowType>,
   params: GenericCellEditorProps<GridFormTextInputProps<RowType>>,
 ): ColDefT<RowType> => {
   return GridCell(

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -1,4 +1,4 @@
-import "./GridRenderGenericCell.scss";
+import "../../styles/GridRenderGenericCell.scss";
 
 import { useContext } from "react";
 import { GridUpdatingContext } from "@contexts/GridUpdatingContext";
@@ -7,12 +7,13 @@ import { GridIcon } from "../GridIcon";
 import { ColDef, ICellRendererParams } from "ag-grid-community";
 import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
 import { GridBaseRow } from "../Grid";
+import { ColDefT } from "@components/GridCell";
 
 export interface RowICellRendererParams<RowType extends GridBaseRow> extends ICellRendererParams {
   data: RowType;
 }
 
-export interface GenericCellColDef<RowType extends GridBaseRow> extends ColDef {
+export interface GenericCellColDef<RowType extends GridBaseRow> extends ColDefT<RowType> {
   cellRendererParams?: GenericCellRendererParams<RowType>;
 }
 

package/src/contexts/GridContext.tsx

@@ -7,7 +7,7 @@ export interface GridContextType {
   setGridApi: (gridApi: GridApi | undefined) => void;
   setQuickFilter: (quickFilter: string) => void;
   editingCells: () => boolean;
-  getSelectedRows: <T extends unknown>() => T[];
+  getSelectedRows: <T extends GridBaseRow>() => T[];
   getSelectedRowIds: () => number[];
   selectRowsDiff: (updateFn: () => Promise<any>) => Promise<void>;
   selectRowsWithFlashDiff: (updateFn: () => Promise<any>) => Promise<void>;

package/src/contexts/GridPopoverContext.tsx

@@ -6,11 +6,11 @@ export interface PropsType {
   data: any;
   field: string;
   selectedRows: any[];
+  updateValue: (saveFn: (selectedRows: any[]) => Promise<boolean>) => Promise<boolean>;
 }
 
 export type GridPopoverContextType = {
   anchorRef: RefObject<Element>;
-  updateValueRef: RefObject<(saveFn: (selectedRows: any[]) => Promise<boolean>) => Promise<boolean>>;
   saving: boolean;
   setSaving: (saving: boolean) => void;
   setProps: (props: ICellEditorParams, multiEdit: boolean) => void;
@@ -19,12 +19,6 @@ export type GridPopoverContextType = {
 
 export const GridPopoverContext = createContext<GridPopoverContextType>({
   anchorRef: { current: null },
-  updateValueRef: {
-    current: async () => {
-      console.error("Missing GridPopoverContext updateValueRef");
-      return false;
-    },
-  },
   saving: false,
   setSaving: () => {},
   setProps: () => {},

package/src/contexts/GridPopoverContextProvider.tsx

@@ -1,8 +1,9 @@
-import { ReactNode, RefObject, useContext, useRef, useState } from "react";
+import { ReactNode, RefObject, useCallback, useContext, useRef, useState } from "react";
 import { GridPopoverContext, PropsType } from "./GridPopoverContext";
 import { ICellEditorParams } from "ag-grid-community";
-import { GridBaseRow } from "@components/Grid";
 import { GridContext } from "@contexts/GridContext";
+import { sortBy } from "lodash-es";
+import { GridBaseRow } from "@components/Grid";
 
 interface GridPopoverContextProps {
   children: ReactNode;
@@ -12,29 +13,30 @@ export const GridPopoverContextProvider = (props: GridPopoverContextProps) => {
   const { getSelectedRows, updatingCells } = useContext(GridContext);
   const anchorRef = useRef<Element>();
   const propsRef = useRef<PropsType>({} as PropsType);
-  const updateValueRef = useRef<(saveFn: (selectedRows: any[]) => Promise<boolean>) => Promise<boolean>>(async () => {
-    console.error("updateValueRef.current is not set");
-    return false;
-  });
 
   const [saving, setSaving] = useState(false);
 
-  const setProps = (props: ICellEditorParams, multiEdit: boolean) => {
-    const selectedRows = multiEdit ? getSelectedRows<GridBaseRow>() : [props.data];
-    const field = props.colDef?.field ?? "";
+  const setProps = useCallback(
+    (props: ICellEditorParams, multiEdit: boolean) => {
+      // Then item that is clicked on will always be first in the list
+      const selectedRows = multiEdit
+        ? sortBy(getSelectedRows(), (row) => row.id !== props.data.id)
+        : [props.data as GridBaseRow];
+      const field = props.colDef?.field ?? "";
 
-    anchorRef.current = props.eGridCell;
-    propsRef.current = {
-      value: props.value,
-      data: props.data,
-      field,
-      selectedRows,
-    };
-
-    updateValueRef.current = async (saveFn: (selectedRows: any[]) => Promise<boolean>): Promise<boolean> => {
-      return !saving && (await updatingCells({ selectedRows, field }, saveFn, setSaving));
-    };
-  };
+      anchorRef.current = props.eGridCell;
+      propsRef.current = {
+        value: props.value,
+        data: props.data,
+        field,
+        selectedRows,
+        updateValue: async (saveFn: (selectedRows: any[]) => Promise<boolean>): Promise<boolean> => {
+          return !saving && (await updatingCells({ selectedRows, field }, saveFn, setSaving));
+        },
+      };
+    },
+    [getSelectedRows, saving, updatingCells],
+  );
 
   return (
     <GridPopoverContext.Provider
@@ -42,7 +44,6 @@ export const GridPopoverContextProvider = (props: GridPopoverContextProps) => {
         anchorRef: anchorRef as any as RefObject<Element>,
         saving,
         setSaving,
-        updateValueRef,
         propsRef,
         setProps,
       }}

package/src/index.ts

@@ -0,0 +1,38 @@
+export * from "@react-menu3";
+export * from "./react-menu3/types";
+
+export * from "@contexts/GridUpdatingContext";
+export * from "@contexts/GridUpdatingContextProvider";
+export * from "@contexts/GridContext";
+export * from "@contexts/GridContextProvider";
+
+export type { GridBaseRow } from "@components/Grid";
+export { Grid } from "@components/Grid";
+export * from "@components/GridCell";
+export { GridIcon } from "@components/GridIcon";
+export { ComponentLoadingWrapper } from "@components/ComponentLoadingWrapper";
+export { GenericMultiEditCellClass } from "@components/GenericCellClass";
+export { GridLoadableCell } from "@components/GridLoadableCell";
+export { useGridPopoverHook } from "@components/GridPopoverHook";
+export { usePostSortRowsHook } from "@components/PostSortRowsHook";
+
+export { GridRendererGenericCell } from "@components/gridRender/GridRenderGenericCell";
+export { GridRenderPopoutMenuCell } from "@components/gridRender/GridRenderPopoutMenuCell";
+
+export { GridPopoutEditMultiSelect } from "@components/gridPopoverEdit/GridPopoutEditMultiSelect";
+export { GridPopoverMenu } from "@components/gridPopoverEdit/GridPopoverMenu";
+export { GridPopoverEditBearing } from "@components/gridPopoverEdit/GridPopoverEditBearing";
+export { GridPopoverEditBearingCorrection } from "@components/gridPopoverEdit/GridPopoverEditBearing";
+export { GridPopoverEditDropDown } from "@components/gridPopoverEdit/GridPopoverEditDropDown";
+export { GridPopoverMessage } from "@components/gridPopoverEdit/GridPopoverMessage";
+export { GridPopoverTextArea } from "@components/gridPopoverEdit/GridPopoverTextArea";
+export { GridPopoverTextInput } from "@components/gridPopoverEdit/GridPopoverTextInput";
+
+export { GridHeaderSelect } from "@components/gridHeader/GridHeaderSelect";
+
+export { TextAreaInput } from "./lui/TextAreaInput";
+export { TextInputFormatted } from "./lui/TextInputFormatted";
+export { GridSubComponentTextArea } from "@components/GridSubComponentTextArea";
+
+export * from "@utils/bearing";
+export * from "@utils/util";

package/src/lui/TextInputFormatted.scss

@@ -8,4 +8,4 @@
   top: 0;
   line-height: 48px;
   color: #beb9b4;
-}
+}

package/src/react-menu3/README.md

@@ -0,0 +1,66 @@
+# React-Menu
+
+> This is a fork of @szhsin/react-menu. v3.2.0
+
+> An accessible and keyboard-friendly React menu library.
+
+**[Live examples and docs](https://szhsin.github.io/react-menu/)**
+
+## Features
+
+- React menu components for easy and fast web development.
+- Unlimited levels of submenu.
+- Supports dropdown or context menu.
+- Supports radio and checkbox menu items.
+- Flexible menu positioning.
+- Comprehensive keyboard interactions.
+- Unstyled components and easy [customisation](https://szhsin.github.io/react-menu/#styling).
+- [Optimal level support](https://github.com/reactwg/react-18/discussions/70) (level 3) of **React 18** concurrent rendering.
+- Works in major browsers without polyfills.
+- [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) compliant.
+
+## Install
+
+with npm
+
+```bash
+npm install @szhsin/react-menu
+```
+
+or with Yarn
+
+```bash
+yarn add @szhsin/react-menu
+```
+
+## Usage
+
+```jsx
+import { Menu, MenuItem, MenuButton, SubMenu } from "@szhsin/react-menu";
+
+export default function App() {
+  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>
+    </Menu>
+  );
+}
+```
+
+**[Edit on CodeSandbox](https://codesandbox.io/s/react-menu-starter-3ez3c)**<br>  
+**[Visit more examples and docs](https://szhsin.github.io/react-menu/)**<br><br>
+[Migration from v2 to v3](https://github.com/szhsin/react-menu/wiki/Migration-from-v2-to-v3)<br>
+[Migration from v1 to v2](https://github.com/szhsin/react-menu/wiki/Migration-from-v1-to-v2)
+
+_Please note that React-Menu v3 requires React 16.14.0 or higher. If you are not able to upgrade React, you could install v2/v1 which requires React 16.8.0._
+
+## License
+
+[MIT](https://github.com/szhsin/react-menu/blob/master/LICENSE) Licensed.

package/src/react-menu3/components/ControlledMenu.tsx

@@ -12,20 +12,12 @@ import {
 import { createPortal } from "react-dom";
 import { MenuList } from "./MenuList";
 import { useBEM } from "../hooks";
-import {
-  menuContainerClass,
-  mergeProps,
-  safeCall,
-  isMenuOpen,
-  getTransition,
-  CloseReason,
-  Keys,
-  EventHandlersContext,
-  SettingsContext,
-  ItemSettingsContext,
-} from "../utils";
+import { menuContainerClass, mergeProps, safeCall, isMenuOpen, getTransition, CloseReason, Keys } from "../utils";
 import { hasParentClass } from "@utils/util";
 import { ControlledMenuProps, PortalFieldType, RadioChangeEvent } from "../types";
+import { ItemSettingsContext } from "../contexts/ItemSettingsContext";
+import { SettingsContext } from "../contexts/SettingsContext";
+import { EventHandlersContext, EventHandlersContextType } from "../contexts/EventHandlersContext";
 
 export const ControlledMenuFr = (
   {
@@ -128,13 +120,13 @@ export const ControlledMenuFr = (
   useEffect(() => {
     if (isMenuOpen(state)) {
       const thisDocument = anchorRef?.current ? anchorRef?.current.ownerDocument : document;
-      thisDocument.addEventListener("mousedown", handleScreenEventForCancel, true);
-      thisDocument.addEventListener("mouseup", handleScreenEventForSave, true);
+      thisDocument.addEventListener("mousedown", handleScreenEventForSave, true);
+      thisDocument.addEventListener("mouseup", handleScreenEventForCancel, true);
       thisDocument.addEventListener("click", handleScreenEventForCancel, true);
       thisDocument.addEventListener("dblclick", handleScreenEventForCancel, true);
       return () => {
-        thisDocument.removeEventListener("mousedown", handleScreenEventForCancel, true);
-        thisDocument.removeEventListener("mouseup", handleScreenEventForSave, true);
+        thisDocument.removeEventListener("mousedown", handleScreenEventForSave, true);
+        thisDocument.removeEventListener("mouseup", handleScreenEventForCancel, true);
         thisDocument.removeEventListener("click", handleScreenEventForCancel, true);
         thisDocument.removeEventListener("dblclick", handleScreenEventForCancel, true);
       };
@@ -151,7 +143,7 @@ export const ControlledMenuFr = (
   );
 
   const eventHandlers = useMemo(
-    () => ({
+    (): EventHandlersContextType => ({
       handleClick(event: RadioChangeEvent, isCheckOrRadio: boolean) {
         if (!event.stopPropagation) safeCall(onItemClick, event);
 

package/src/react-menu3/components/FocusableItem.tsx

@@ -1,16 +1,9 @@
 import { LegacyRef, useContext, useMemo, useRef } from "react";
 import { useBEM, useCombinedRef, useItemState } from "../hooks";
-import {
-  mergeProps,
-  commonProps,
-  safeCall,
-  menuClass,
-  menuItemClass,
-  withHovering,
-  EventHandlersContext,
-} from "../utils";
+import { mergeProps, commonProps, safeCall, menuClass, menuItemClass, withHovering } from "../utils";
 import { BaseProps } from "../types";
 import { withHoveringResultProps } from "../utils/withHovering";
+import { EventHandlersContext } from "../contexts/EventHandlersContext";
 
 export interface FocusableItemProps extends BaseProps, withHoveringResultProps {
   disabled?: boolean;

package/src/react-menu3/components/MenuGroup.tsx

@@ -1,7 +1,8 @@
 import { ForwardedRef, forwardRef, ReactNode, useContext, useRef, useState } from "react";
 import { useBEM, useLayoutEffect, useCombinedRef } from "../hooks";
-import { menuClass, menuGroupClass, MenuListContext } from "../utils";
+import { menuClass, menuGroupClass } from "../utils";
 import { BaseProps, MenuOverflow } from "../types";
+import { MenuListContext } from "../contexts/MenuListContext";
 
 export interface MenuGroupProps extends BaseProps {
   children?: ReactNode;

package/src/react-menu3/components/MenuItem.tsx

@@ -1,19 +1,10 @@
 import { Ref, useContext, useMemo } from "react";
 import { useBEM, useItemState, useCombinedRef } from "../hooks";
-import {
-  mergeProps,
-  commonProps,
-  safeCall,
-  menuClass,
-  menuItemClass,
-  withHovering,
-  EventHandlersContext,
-  RadioGroupContext,
-  Keys,
-  RMEvent,
-} from "../utils";
+import { mergeProps, commonProps, safeCall, menuClass, menuItemClass, withHovering, Keys, RMEvent } from "../utils";
 import { BaseProps, ClickEvent, EventHandler, Hoverable, MenuItemTypeProp, RenderProp } from "../types";
 import { withHoveringResultProps } from "../utils/withHovering";
+import { EventHandlersContext } from "../contexts/EventHandlersContext";
+import { RadioGroupContext } from "../contexts/RadioGroupContext";
 
 //
 // MenuItem

package/src/react-menu3/components/MenuList.tsx

@@ -17,12 +17,12 @@ import {
   Keys,
   FocusPositions,
   HoverActionTypes,
-  SettingsContext,
-  MenuListContext,
-  MenuListItemContext,
-  HoverItemContext,
 } from "../utils";
 import { ControlledMenuProps, MenuDirection } from "../types";
+import { MenuListItemContext } from "../contexts/MenuListItemContext";
+import { HoverItemContext } from "../contexts/HoverItemContext";
+import { MenuListContext } from "../contexts/MenuListContext";
+import { SettingsContext } from "../contexts/SettingsContext";
 
 export const MenuList = ({
   ariaLabel,

package/src/react-menu3/components/MenuRadioGroup.tsx

@@ -1,27 +1,8 @@
 import { ForwardedRef, forwardRef, ReactNode, useMemo } from "react";
 import { useBEM } from "../hooks";
-import { menuClass, radioGroupClass, RadioGroupContext } from "../utils";
-import { BaseProps, Event, EventHandler } from "../types";
-
-export interface RadioChangeEvent extends Event {
-  /**
-   * The `name` prop passed to the `MenuRadioGroup` when the menu item is in a radio group.
-   */
-  name?: string;
-  /**
-   * Set this property on event object to control whether to keep menu open after menu item is activated.
-   * Leaving it `undefined` will behave in accordance with WAI-ARIA Authoring Practices.
-   */
-  keepOpen?: boolean;
-  /**
-   * Setting this property on event object to `true` will skip `onItemClick` event on root menu component.
-   */
-  stopPropagation?: boolean;
-  /**
-   * DOM event object (React synthetic event)
-   */
-  syntheticEvent: MouseEvent | KeyboardEvent;
-}
+import { menuClass, radioGroupClass } from "../utils";
+import { BaseProps, EventHandler, RadioChangeEvent } from "../types";
+import { RadioGroupContext } from "../contexts/RadioGroupContext";
 
 //
 // MenuRadioGroup

package/src/react-menu3/components/SubMenu.tsx

@@ -21,10 +21,6 @@ import {
   menuItemClass,
   isMenuOpen,
   withHovering,
-  SettingsContext,
-  ItemSettingsContext,
-  MenuListContext,
-  MenuListItemContext,
   Keys,
   HoverActionTypes,
   FocusPositions,
@@ -43,6 +39,10 @@ import {
   UncontrolledMenuProps,
 } from "../types";
 import { withHoveringResultProps } from "../utils/withHovering";
+import { MenuListItemContext } from "../contexts/MenuListItemContext";
+import { MenuListContext } from "../contexts/MenuListContext";
+import { SettingsContext } from "../contexts/SettingsContext";
+import { ItemSettingsContext } from "../contexts/ItemSettingsContext";
 
 //
 // SubMenu

package/src/react-menu3/contexts/EventHandlersContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+import { RMEvent } from "../utils";
+
+export interface EventHandlersContextType {
+  handleClose?: () => void;
+  handleClick: (event: RMEvent, checked: boolean) => void;
+}
+
+export const EventHandlersContext = createContext<EventHandlersContextType>({
+  handleClick: () => {},
+});

package/src/react-menu3/contexts/HoverItemContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const HoverItemContext = createContext(undefined);

package/src/react-menu3/contexts/ItemSettingsContext.ts

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+
+export const ItemSettingsContext = createContext<{ submenuCloseDelay: number; submenuOpenDelay: number }>({
+  submenuOpenDelay: 0,
+  submenuCloseDelay: 0,
+});