@linzjs/step-ag-grid 1.4.6 → 1.4.8

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.8",
   "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";
@@ -6,6 +6,8 @@ import { GenericMultiEditCellClass } from "./GenericCellClass";
 import { GenericCellRendererParams, GridRendererGenericCell } from "./gridRender/GridRenderGenericCell";
 import { ColDef, ICellEditorParams, ICellRendererParams } from "ag-grid-community";
 import { GridLoadableCell } from "./GridLoadableCell";
+import { GridIcon } from "@components/GridIcon";
+import { ValueFormatterParams } from "ag-grid-community/dist/lib/entities/colDef";
 
 export interface GridFormProps<RowType extends GridBaseRow> {
   cellEditorParams: ICellEditorParams;
@@ -27,24 +29,29 @@ export interface GenericCellEditorColDef<
   FormProps extends GenericCellEditorParams<RowType>,
 > extends ColDef {
   cellEditorParams?: FormProps;
-  cellRendererParams?: GenericCellRendererParams;
+  cellRendererParams?: GenericCellRendererParams<RowType>;
 }
 
-export const GridCellRenderer = (cellRendererParams: ICellRendererParams) => {
+export const GridCellRenderer = (props: ICellRendererParams) => {
   const { checkUpdating } = useContext(UpdatingContext);
-  const colDef = cellRendererParams.colDef;
+  const colDef = props.colDef as ColDef;
 
-  return colDef?.cellRendererParams?.oldCellRenderer ? (
-    <GridLoadableCell
-      isLoading={checkUpdating(
-        cellRendererParams.colDef?.field ?? cellRendererParams.colDef?.colId ?? "",
-        cellRendererParams.data.id,
-      )}
-    >
-      <colDef.cellRendererParams.oldCellRenderer {...cellRendererParams} />
+  const rendererParams = colDef.cellRendererParams as GenericCellRendererParams<any> | undefined;
+  const warningFn = rendererParams?.warning;
+  const warningText = warningFn ? warningFn(props) : undefined;
+  const infoFn = rendererParams?.info;
+  const infoText = infoFn ? infoFn(props) : undefined;
+
+  return colDef?.cellRendererParams?.originalCellRenderer ? (
+    <GridLoadableCell isLoading={checkUpdating(colDef.field ?? colDef.colId ?? "", props.data.id)}>
+      <>
+        {typeof warningText === "string" && <GridIcon icon={"ic_warning"} title={warningText} />}
+        {typeof infoText === "string" && <GridIcon icon={"ic_info"} title={infoText} />}
+        <colDef.cellRendererParams.originalCellRenderer {...props} />
+      </>
     </GridLoadableCell>
   ) : (
-    <GridRendererGenericCell {...cellRendererParams} />
+    <GridRendererGenericCell {...props} />
   );
 };
 
@@ -55,7 +62,6 @@ export const GridCell = <RowType extends GridBaseRow, FormProps extends GenericC
   props: GenericCellEditorColDef<RowType, FormProps>,
 ): ColDef => {
   return {
-    cellRenderer: GridCellRenderer,
     sortable: !!(props?.field || props?.valueGetter),
     resizable: true,
     ...(props.cellEditorParams && {
@@ -63,9 +69,16 @@ export const GridCell = <RowType extends GridBaseRow, FormProps extends GenericC
       editable: true,
       cellEditor: GenericCellEditorComponent,
     }),
+    // Default value formatter, otherwise react freaks out on objects
+    valueFormatter: (params: ValueFormatterParams) => {
+      const types = ["number", "undefined", "boolean", "string"];
+      if (types.includes(typeof params.value)) return params.value;
+      else return JSON.stringify(params.value);
+    },
     ...props,
+    cellRenderer: GridCellRenderer,
     cellRendererParams: {
-      originalCellRender: props.cellRenderer,
+      originalCellRenderer: props.cellRenderer,
       ...props.cellRendererParams,
     },
   };
@@ -77,8 +90,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 +137,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/gridForm/GridFormPopoutMenu.tsx

@@ -22,6 +22,7 @@ export interface MenuOption<RowType> {
   action?: (selectedRows: RowType[]) => Promise<boolean>;
   disabled?: string | boolean;
   supportsMultiEdit: boolean;
+  hidden?: boolean;
 }
 
 /**
@@ -76,14 +77,16 @@ export const GridFormPopoutMenu = <RowType extends GridBaseRow>(props: GridFormP
           item.label === MenuSeparator ? (
             <MenuDivider key={`$$divider_${index}`} />
           ) : (
-            <MenuItem
-              key={`${item.label}`}
-              onClick={() => actionClick(item)}
-              disabled={!!item.disabled || !filteredOptions?.includes(item)}
-              title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
-            >
-              {item.label as JSX.Element | string}
-            </MenuItem>
+            !item.hidden && (
+              <MenuItem
+                key={`${item.label}`}
+                onClick={() => actionClick(item)}
+                disabled={!!item.disabled || !filteredOptions?.includes(item)}
+                title={item.disabled && typeof item.disabled !== "boolean" ? item.disabled : ""}
+              >
+                {item.label as JSX.Element | string}
+              </MenuItem>
+            )
           ),
         )}
       </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,28 +9,33 @@ 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 | null | undefined;
+  info?: (props: RowICellRendererParams<RowType>) => string | boolean | null | 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 colDef = props.colDef as ColDef;
+  const cellRendererParams = colDef.cellRendererParams as GenericCellRendererParams<RowType> | undefined;
   const warningFn = cellRendererParams?.warning;
   const warningText = warningFn ? warningFn(props) : undefined;
   const infoFn = cellRendererParams?.info;
   const infoText = infoFn ? infoFn(props) : undefined;
 
   const defaultFormatter = (props: ValueFormatterParams): string => props.value;
-  const formatter = props.colDef?.valueFormatter ?? defaultFormatter;
+  const formatter = colDef.valueFormatter ?? defaultFormatter;
   if (typeof formatter === "string") {
     console.error("valueFormatter must be a function");
     return <span>valueFormatter must be a function</span>;
@@ -38,7 +43,7 @@ export const GridRendererGenericCell = (props: ICellRendererParams): JSX.Element
   const formatted = formatter(props as ValueFormatterParams);
 
   return (
-    <GridLoadableCell isLoading={checkUpdating(props.colDef?.field ?? props.colDef?.colId ?? "", props.data.id)}>
+    <GridLoadableCell isLoading={checkUpdating(colDef.field ?? colDef.colId ?? "", props.data.id)}>
       <>
         {typeof warningText === "string" && <GridIcon icon={"ic_warning"} title={warningText} />}
         {typeof infoText === "string" && <GridIcon icon={"ic_info"} title={infoText} />}

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);