@linzjs/step-ag-grid 1.4.6 → 1.4.7

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "1.4.6",
+  "version": "1.4.7",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",

package/src/components/GridCell.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useContext, useMemo, useState } from "react";
+import { ForwardedRef, forwardRef, useCallback, useContext, useMemo, useState } from "react";
 import { GridBaseRow } from "./Grid";
 import { UpdatingContext } from "@contexts/UpdatingContext";
 import { GridContext } from "@contexts/GridContext";
@@ -27,7 +27,7 @@ export interface GenericCellEditorColDef<
   FormProps extends GenericCellEditorParams<RowType>,
 > extends ColDef {
   cellEditorParams?: FormProps;
-  cellRendererParams?: GenericCellRendererParams;
+  cellRendererParams?: GenericCellRendererParams<RowType>;
 }
 
 export const GridCellRenderer = (cellRendererParams: ICellRendererParams) => {
@@ -77,8 +77,9 @@ interface GenericCellEditorICellEditorParams<RowType extends GridBaseRow, FormPr
   colDef: GenericCellEditorColDef<RowType, FormProps>;
 }
 
-export const GenericCellEditorComponent = <RowType extends GridBaseRow, FormProps extends Record<string, any>>(
+export const GenericCellEditorComponentFr = <RowType extends GridBaseRow, FormProps extends Record<string, any>>(
   props: GenericCellEditorICellEditorParams<RowType, FormProps>,
+  _: ForwardedRef<any>, // We don't forward the ref, as that's for generic aggrid cell editing
 ) => {
   const { updatingCells, getSelectedRows } = useContext(GridContext);
 
@@ -123,3 +124,5 @@ export const GenericCellEditorComponent = <RowType extends GridBaseRow, FormProp
     </>
   );
 };
+
+export const GenericCellEditorComponent = forwardRef(GenericCellEditorComponentFr);

package/src/components/GridPopoverHook.tsx

@@ -3,7 +3,7 @@ import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import { GridContext } from "@contexts/GridContext";
 import { GridFormProps } from "./GridCell";
 import { GridBaseRow } from "./Grid";
-import { ControlledMenu } from "../react-menu3";
+import { ControlledMenu } from "@react-menu3";
 
 export const useGridPopoverHook = <RowType extends GridBaseRow>(
   props: GridFormProps<RowType>,

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -1,7 +1,7 @@
 import "../../react-menu3/styles/index.scss";
 
-import { MenuItem, MenuDivider, FocusableItem, RadioChangeEvent } from "@react-menu3";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { MenuItem, MenuDivider, FocusableItem, ClickEvent } from "@react-menu3";
+import { Fragment, useCallback, useEffect, useRef, useState, KeyboardEvent } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
 import { delay } from "lodash-es";
@@ -99,7 +99,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
             return undefined;
           }
           const str = (option.label as string) || "";
-          return str.toLowerCase().indexOf(filter) === -1 ? option.value : undefined;
+          return str.toLowerCase().indexOf(filter.trim()) === -1 ? option.value : undefined;
         })
         .filter((r) => r !== undefined),
     );
@@ -110,7 +110,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
       <div className={"Grid-popoverContainerList"}>
         {options && formProps.filtered && (
           <>
-            <FocusableItem className={"filter-item"}>
+            <FocusableItem className={"filter-item"} key={"filter"}>
               {({ ref }: any) => (
                 <div style={{ display: "flex", width: "100%" }}>
                   <input
@@ -134,34 +134,47 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
           item.value === MenuSeparatorString ? (
             <MenuDivider key={`$$divider_${index}`} />
           ) : filteredValues.includes(item.value) ? null : (
-            <>
+            <Fragment key={`${index}`}>
               <MenuItem
-                key={`${item.value}`}
-                onClick={(e: RadioChangeEvent) => {
-                  // FIXME Matt Event type guessed here
+                key={`${index}`}
+                onClick={(e: ClickEvent) => {
                   e.keepOpen = true;
-                  if (selectedValues.includes(e.value)) {
+                  if (selectedValues.includes(item.value)) {
                     setSelectedValues(selectedValues.filter((value) => value != item.value));
                   } else {
-                    setSelectedValues([...selectedValues, item.value as string]);
+                    setSelectedValues([...selectedValues, item.value]);
+                  }
+                }}
+                onKeyDown={async (e: KeyboardEvent) => {
+                  if (e.key === "Enter") triggerSave().then();
+                  else if (e.key === " ") {
+                    if (selectedValues.includes(item.value)) {
+                      setSelectedValues(selectedValues.filter((value) => value != item.value));
+                    } else {
+                      setSelectedValues([...selectedValues, item.value]);
+                    }
+                    e.preventDefault();
+                    e.stopPropagation();
                   }
-                  return false;
                 }}
-                onKeyDown={async (e) => e.key === "Enter" && triggerSave().then()}
               >
                 <LuiCheckboxInput
                   isChecked={selectedValues.includes(item.value)}
                   value={`${item.value}`}
                   label={item.label ?? (item.value == null ? `<${item.value}>` : `${item.value}`)}
-                  onChange={(e) => {
-                    if (e.target.checked) {
-                      setSelectedValues([...selectedValues, item.value as string]);
-                    } else {
-                      setSelectedValues(selectedValues.filter((value) => value != item.value));
-                    }
+                  inputProps={{
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      return false;
+                    },
+                  }}
+                  onChange={() => {
+                    /*Do nothing, change handled by menuItem*/
                   }}
                 />
               </MenuItem>
+
               {selectedValues.includes(item.value) && item.subComponent && (
                 <FocusableItem className={"LuiDeprecatedForms"} key={`${item.value}_subcomponent`}>
                   {(ref: any) =>
@@ -177,7 +190,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
                   }
                 </FocusableItem>
               )}
-            </>
+            </Fragment>
           ),
         )}
       </div>

package/src/components/gridRender/GridRenderGenericCell.tsx

@@ -1,7 +1,7 @@
 import "./GridRenderGenericCell.scss";
 
 import { useContext } from "react";
-import { UpdatingContext } from "../../contexts/UpdatingContext";
+import { UpdatingContext } from "@contexts/UpdatingContext";
 import { GridLoadableCell } from "../GridLoadableCell";
 import { GridIcon } from "../GridIcon";
 import { ColDef, ICellRendererParams } from "ag-grid-community";
@@ -9,21 +9,25 @@ import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef
 import { GenericCellEditorParams } from "../GridCell";
 import { GridBaseRow } from "../Grid";
 
+export interface RowICellRendererParams<RowType extends GridBaseRow> extends ICellRendererParams {
+  data: RowType;
+}
+
 export interface GenericCellColDef<RowType extends GridBaseRow, FormProps extends Record<string, any>> extends ColDef {
-  cellRendererParams?: GenericCellRendererParams;
+  cellRendererParams?: GenericCellRendererParams<RowType>;
   cellEditorParams?: GenericCellEditorParams<RowType> & FormProps;
 }
 
-export interface GenericCellRendererParams {
+export interface GenericCellRendererParams<RowType extends GridBaseRow> {
   singleClickEdit?: boolean;
-  warning?: (props: ICellRendererParams) => string | boolean | undefined;
-  info?: (props: ICellRendererParams) => string | boolean | undefined;
+  warning?: (props: RowICellRendererParams<RowType>) => string | boolean | undefined;
+  info?: (props: RowICellRendererParams<RowType>) => string | boolean | undefined;
 }
 
-export const GridRendererGenericCell = (props: ICellRendererParams): JSX.Element => {
+export const GridRendererGenericCell = <RowType extends GridBaseRow>(props: ICellRendererParams): JSX.Element => {
   const { checkUpdating } = useContext(UpdatingContext);
 
-  const cellRendererParams = props.colDef?.cellRendererParams as GenericCellRendererParams | undefined;
+  const cellRendererParams = props.colDef?.cellRendererParams as GenericCellRendererParams<RowType> | undefined;
   const warningFn = cellRendererParams?.warning;
   const warningText = warningFn ? warningFn(props) : undefined;
   const infoFn = cellRendererParams?.info;

package/src/components/gridRender/GridRenderPopoutMenuCell.tsx

@@ -1,13 +1,25 @@
 import { useContext } from "react";
-import { ICellRendererParams } from "ag-grid-community";
+import { ColDef, ICellRendererParams } from "ag-grid-community";
 import { UpdatingContext } from "@contexts/UpdatingContext";
 import { GridLoadableCell } from "../GridLoadableCell";
 import { LuiIcon } from "@linzjs/lui";
+import { Column } from "ag-grid-community/dist/lib/entities/column";
 
 export const GridRenderPopoutMenuCell = (props: ICellRendererParams) => {
   const { checkUpdating } = useContext(UpdatingContext);
   const isLoading = checkUpdating(props.colDef?.field ?? "", props.data.id);
-  const disabled = !props.colDef?.editable;
+  const editable = props.colDef?.editable;
+  const disabled = !(typeof editable === "function"
+    ? editable({
+        node: props.node,
+        data: props.data,
+        column: props.column as Column,
+        colDef: props.colDef as ColDef,
+        api: props.api,
+        columnApi: props.columnApi,
+        context: props.context,
+      })
+    : editable);
 
   return (
     <GridLoadableCell

package/src/contexts/GridContextProvider.tsx

@@ -258,9 +258,10 @@ export const GridContextProvider = (props: GridContextProps): ReactElement => {
         }
         // This is needed to trigger postSortRowsHook
         gridApi.refreshClientSideRowModel();
-        stopEditing();
+      } else {
+        // Don't set saving if ok as the form has already closed
+        setSaving && setSaving(false);
       }
-      setSaving && setSaving(false);
       return ok;
     });
   };

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

@@ -1,28 +1,33 @@
-// @ts-nocheck
-/* eslint-disable */
-import { forwardRef, useRef, useMemo, useCallback, useEffect } from "react";
+import {
+  forwardRef,
+  useRef,
+  useMemo,
+  useCallback,
+  useEffect,
+  KeyboardEvent,
+  FocusEvent,
+  MutableRefObject,
+  ForwardedRef,
+} from "react";
 import { createPortal } from "react-dom";
-import { string, number, bool, func, object, oneOf, oneOfType, exact } from "prop-types";
 import { MenuList } from "./MenuList";
 import { useBEM } from "../hooks";
 import {
-  rootMenuPropTypes,
   menuContainerClass,
   mergeProps,
   safeCall,
   isMenuOpen,
   getTransition,
-  values,
   CloseReason,
   Keys,
-  MenuStateMap,
   EventHandlersContext,
   SettingsContext,
   ItemSettingsContext,
 } from "../utils";
 import { hasParentClass } from "@utils/util";
+import { ControlledMenuProps, PortalFieldType, RadioChangeEvent } from "../types";
 
-export const ControlledMenu = forwardRef(function ControlledMenu(
+export const ControlledMenuFr = (
   {
     "aria-label": ariaLabel,
     className,
@@ -44,11 +49,11 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
     onClose,
     saveButtonRef,
     ...restProps
-  }: any,
-  externalRef,
-) {
-  const containerRef = useRef(null);
-  const scrollNodesRef = useRef<{anchors?:HTMLDivElement[]}>({});
+  }: ControlledMenuProps & { saveButtonRef?: MutableRefObject<HTMLButtonElement | null> },
+  externalRef: ForwardedRef<HTMLUListElement>,
+) => {
+  const containerRef = useRef<HTMLElement>();
+  const scrollNodesRef = useRef<{ anchors?: HTMLDivElement[] }>({});
   const { anchorRef, state } = restProps;
 
   const settings = useMemo(
@@ -92,7 +97,7 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
         // the cell doesn't refresh during update if save is invoked from a native event
         // This doesn't happen in React18
         // To work around it, I invoke the save by clicking on a passed in invisible button ref
-        if (saveButtonRef.current) saveButtonRef.current.click();
+        if (saveButtonRef?.current) saveButtonRef.current.click();
         else safeCall(onClose, { reason: CloseReason.BLUR });
 
         // If a user clicks on the menu button when a menu is open, we need to close the menu.
@@ -107,7 +112,7 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
         }
       }
     },
-    [clickIsWithinMenu, onClose],
+    [clickIsWithinMenu, onClose, saveButtonRef, skipOpen],
   );
 
   const handleScreenEventForCancel = useCallback(
@@ -122,7 +127,7 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
 
   useEffect(() => {
     if (isMenuOpen(state)) {
-      const thisDocument = anchorRef.current ? anchorRef.current.ownerDocument : document;
+      const thisDocument = anchorRef?.current ? anchorRef?.current.ownerDocument : document;
       thisDocument.addEventListener("mousedown", handleScreenEventForCancel, true);
       thisDocument.addEventListener("mouseup", handleScreenEventForSave, true);
       thisDocument.addEventListener("click", handleScreenEventForCancel, true);
@@ -135,7 +140,7 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
       };
     }
     return () => {};
-  }, [handleScreenEventForSave, handleScreenEventForCancel, state]);
+  }, [handleScreenEventForSave, handleScreenEventForCancel, state, anchorRef]);
 
   const itemSettings = useMemo(
     () => ({
@@ -147,7 +152,7 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
 
   const eventHandlers = useMemo(
     () => ({
-      handleClick(event, isCheckorRadio) {
+      handleClick(event: RadioChangeEvent, isCheckOrRadio: boolean) {
         if (!event.stopPropagation) safeCall(onItemClick, event);
 
         let keepOpen = event.keepOpen;
@@ -155,7 +160,7 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
           // if event.keepOpen is undefined, the following default behaviour is used
           // According to WAI-ARIA Authoring Practices 1.1
           // Keep menu open when check or radio is invoked by SPACE key
-          keepOpen = isCheckorRadio && event.key === Keys.SPACE;
+          keepOpen = isCheckOrRadio && event.key === Keys.SPACE;
         }
 
         if (!keepOpen) {
@@ -167,14 +172,14 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
         }
       },
 
-      handleClose(key) {
+      handleClose(key?: string) {
         safeCall(onClose, { key, reason: CloseReason.CLICK });
       },
     }),
     [onItemClick, onClose],
   );
 
-  const onKeyDown = ({ key }) => {
+  const onKeyDown = ({ key }: KeyboardEvent) => {
     switch (key) {
       case Keys.ESC:
         safeCall(onClose, { key, reason: CloseReason.CANCEL });
@@ -182,14 +187,14 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
     }
   };
 
-  const onBlur = (e) => {
+  const onBlur = (e: FocusEvent) => {
     if (isMenuOpen(state) && !e.currentTarget.contains(e.relatedTarget || document.activeElement)) {
       safeCall(onClose, { reason: CloseReason.BLUR });
 
       // If a user clicks on the menu button when a menu is open, we need to close the menu.
       // However, a blur event will be fired prior to the click event on menu button,
       // which makes the menu first close and then open again.
-      // If this happen, e.relatedTarget is incorrectly set to null instead of the button in Safari and Firefox,
+      // If this happens, e.relatedTarget is incorrectly set to null instead of the button in Safari and Firefox,
       // and makes it difficult to determine whether onBlur is fired because of clicking on menu button.
       // This is a workaround approach which sets a flag to skip a following click event.
       if (skipOpen) {
@@ -231,31 +236,20 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
     </div>
   );
 
-  if (portal === true && anchorRef.current !== undefined) {
-    portal = { target: anchorRef.current.ownerDocument.body };
+  if (portal === true && anchorRef?.current !== undefined) {
+    portal = { target: anchorRef.current.ownerDocument.body } as PortalFieldType;
   }
 
-  if (portal === true && typeof document !== "undefined") {
-    return createPortal(menuList, document.body);
-  } else if (portal) {
-    return portal.target ? createPortal(menuList, portal.target) : portal.stablePosition ? null : menuList;
+  if (portal) {
+    if (typeof portal === "boolean") {
+      if (portal && typeof document !== "undefined") {
+        return createPortal(menuList, document.body);
+      }
+    } else {
+      return portal.target ? createPortal(menuList, portal.target) : portal.stablePosition ? null : menuList;
+    }
   }
   return menuList;
-});
-
-ControlledMenu.propTypes /* remove-proptypes */ = {
-  ...rootMenuPropTypes,
-  state: oneOf(values(MenuStateMap)),
-  anchorPoint: exact({
-    x: number,
-    y: number,
-  }),
-  anchorRef: object,
-  skipOpen: object,
-  captureFocus: bool,
-  menuItemFocus: exact({
-    position: oneOfType([string, number]),
-    alwaysUpdate: bool,
-  }),
-  onClose: func,
 };
+
+export const ControlledMenu = forwardRef(ControlledMenuFr);

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

@@ -9,7 +9,7 @@ import {
   withHovering,
   EventHandlersContext,
 } from "../utils";
-import { BaseProps } from "../index";
+import { BaseProps } from "../types";
 import { withHoveringResultProps } from "../utils/withHovering";
 
 export interface FocusableItemProps extends BaseProps, withHoveringResultProps {
@@ -72,4 +72,4 @@ export const FocusableItemFr = ({
   );
 };
 
-export const FocusableItem = withHovering("FocusableItem", FocusableItemFr) as any as typeof FocusableItemFr;
+export const FocusableItem = withHovering("FocusableItem", FocusableItemFr);

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

@@ -11,7 +11,7 @@ import {
 import { ControlledMenu } from "./ControlledMenu";
 import { useMenuChange, useMenuStateAndFocus, useCombinedRef } from "../hooks";
 import { getName, mergeProps, safeCall, isMenuOpen, Keys, FocusPositions } from "../utils";
-import { MenuButtonModifiers, RenderProp, RootMenuProps, UncontrolledMenuProps } from "../index";
+import { MenuButtonModifiers, RenderProp, RootMenuProps, UncontrolledMenuProps } from "../types";
 
 //
 // Menu

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

@@ -1,7 +1,7 @@
 import { forwardRef, LegacyRef, ReactNode, useMemo } from "react";
 import { useBEM } from "../hooks";
 import { menuButtonClass } from "../utils";
-import { BaseProps, MenuButtonModifiers } from "../index";
+import { BaseProps, MenuButtonModifiers } from "../types";
 
 export interface MenuButtonProps extends BaseProps<MenuButtonModifiers> {
   disabled?: boolean;

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

@@ -1,7 +1,7 @@
 import { memo, forwardRef, LegacyRef } from "react";
 import { useBEM } from "../hooks";
 import { menuClass, menuDividerClass } from "../utils";
-import { BaseProps } from "../index";
+import { BaseProps } from "../types";
 
 const MenuDividerFr = ({ className, ...restProps }: BaseProps, externalRef: LegacyRef<HTMLLIElement>) => {
   return (
@@ -14,4 +14,4 @@ const MenuDividerFr = ({ className, ...restProps }: BaseProps, externalRef: Lega
   );
 };
 
-export const MenuDivider = memo(forwardRef(MenuDividerFr)) as any as typeof MenuDividerFr;
+export const MenuDivider = memo(forwardRef(MenuDividerFr));

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

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

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

@@ -1,7 +1,7 @@
 import { memo, forwardRef, ForwardedRef } from "react";
 import { useBEM } from "../hooks";
 import { menuClass, menuHeaderClass } from "../utils";
-import { BaseProps } from "../index";
+import { BaseProps } from "../types";
 
 export const MenuHeaderFr = ({ className, ...restProps }: BaseProps, externalRef: ForwardedRef<HTMLLIElement>) => {
   return (

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

@@ -12,7 +12,7 @@ import {
   Keys,
   RMEvent,
 } from "../utils";
-import { BaseProps, ClickEvent, EventHandler, Hoverable, MenuItemTypeProp, RenderProp } from "../index";
+import { BaseProps, ClickEvent, EventHandler, Hoverable, MenuItemTypeProp, RenderProp } from "../types";
 import { withHoveringResultProps } from "../utils/withHovering";
 
 //
@@ -179,5 +179,4 @@ const MenuItemFr = ({
   }
 };
 
-// FIXME matt as any
-export const MenuItem = withHovering("MenuItem", MenuItemFr) as any as typeof MenuItemFr;
+export const MenuItem = withHovering("MenuItem", MenuItemFr);

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

@@ -1,4 +1,4 @@
-import { useState, useReducer, useEffect, useRef, useMemo, useCallback, useContext, MutableRefObject } from "react";
+import { useState, useReducer, useEffect, useRef, useMemo, useCallback, useContext } from "react";
 import { flushSync } from "react-dom";
 import { useBEM, useCombinedRef, useLayoutEffect, useItems } from "../hooks";
 import { getPositionHelpers, positionMenu, positionContextMenu } from "../positionUtils";
@@ -22,65 +22,7 @@ import {
   MenuListItemContext,
   HoverItemContext,
 } from "../utils";
-import { EventHandler, FocusPosition, MenuCloseEvent, MenuDirection, MenuState, RootMenuProps } from "../index";
-
-interface ExtraMenuProps {
-  isDisabled?: boolean;
-  ariaLabel?: string;
-  containerRef: MutableRefObject<HTMLElement>;
-  externalRef: MutableRefObject<HTMLUListElement>;
-  parentScrollingRef: MutableRefObject<any>;
-}
-
-//
-// ControlledMenu
-// ----------------------------------------------------------------------
-export interface ControlledMenuProps extends RootMenuProps, ExtraMenuProps {
-  /**
-   * Viewport coordinates to which context menu will be positioned.
-   *
-   * *Use this prop only for context menu*
-   */
-  anchorPoint?: {
-    x: number;
-    y: number;
-  };
-  /**
-   * A ref object attached to a DOM element to which menu will be positioned.
-   *
-   * *Don't set this prop for context menu*
-   */
-  anchorRef?: React.MutableRefObject<HTMLElement>;
-  skipOpen?: React.RefObject<boolean>;
-  /**
-   * If `true`, the menu list element will gain focus after menu is open.
-   * @default true
-   */
-  captureFocus?: boolean;
-  /**
-   * Controls the state of menu. When the prop is `undefined`, menu will be unmounted from DOM.
-   */
-  state?: MenuState;
-  /**
-   * Sets which menu item receives focus (hover) when menu opens.
-   * You will usually set this prop when the menu is opened by keyboard events.
-   *
-   * *Note: If you don't intend to update focus (hover) position,
-   * it's important to keep this prop's identity stable when your component re-renders.*
-   */
-  menuItemFocus?: {
-    position?: FocusPosition;
-    alwaysUpdate?: boolean;
-  };
-  /**
-   * Set the return value of `useMenuState` to this prop.
-   */
-  endTransition?: () => void;
-  /**
-   * Event fired when menu is about to close.
-   */
-  onClose?: EventHandler<MenuCloseEvent>;
-}
+import { ControlledMenuProps, MenuDirection } from "../types";
 
 export const MenuList = ({
   ariaLabel,
@@ -194,7 +136,7 @@ export const MenuList = ({
 
   const handlePosition = useCallback(
     (noOverflowCheck?: boolean) => {
-      if (!containerRef.current) {
+      if (!containerRef?.current) {
         if (process.env.NODE_ENV !== "production") {
           console.error(
             '[React-Menu] Menu cannot be positioned properly as container ref is null. If you need to initialise `state` prop to "open" for ControlledMenu, please see this solution: https://codesandbox.io/s/initial-open-sp10wn',
@@ -403,7 +345,22 @@ export const MenuList = ({
         () => {
           // If focus has already been set to a children element, don't set focus on menu or item
           if (!menuRef.current.contains(document.activeElement)) {
-            focusRef.current?.focus();
+            // Handle popover portal focus
+            const popupElement = focusRef.current?.nextSibling;
+            if (popupElement instanceof Element) {
+              const input = popupElement.querySelectorAll("input,textarea")[0] as HTMLElement;
+              if (input) {
+                input.focus();
+                // Text areas should start at end
+                if (input instanceof HTMLTextAreaElement) {
+                  input.selectionStart = input.value.length;
+                }
+              } else {
+                focusRef.current?.focus();
+              }
+            } else {
+              focusRef.current?.focus();
+            }
             setItemFocus();
           }
         },

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

@@ -1,7 +1,7 @@
 import { ForwardedRef, forwardRef, ReactNode, useMemo } from "react";
 import { useBEM } from "../hooks";
 import { menuClass, radioGroupClass, RadioGroupContext } from "../utils";
-import { BaseProps, Event, EventHandler } from "../index";
+import { BaseProps, Event, EventHandler } from "../types";
 
 export interface RadioChangeEvent extends Event {
   /**
@@ -69,4 +69,4 @@ export const MenuRadioGroupFr = (
   );
 };
 
-export const MenuRadioGroup = forwardRef(MenuRadioGroupFr) as any as typeof MenuRadioGroupFr;
+export const MenuRadioGroup = forwardRef(MenuRadioGroupFr);