@linzjs/step-ag-grid 23.0.1 → 24.0.0

package/src/index.ts

@@ -1,21 +1,17 @@
-export * from "./components";
-
-export * from "./contexts/GridContext";
-export * from "./contexts/GridContextProvider";
-export * from "./contexts/GridUpdatingContext";
-export * from "./contexts/GridUpdatingContextProvider";
-export * from "./contexts/GridPopoverContext";
-export * from "./contexts/GridPopoverContextProvider";
-export * from "./contexts/GridSubComponentContext";
-
-export * from "./lui/ActionButton";
-export * from "./lui/FormError";
-export * from "./lui/TextAreaInput";
-export * from "./lui/TextInputFormatted";
-
-export * from "./react-menu3/index";
-export * from "./react-menu3/types";
-
-export * from "./utils/bearing";
-export * from "./utils/util";
-export * from "./utils/deferredPromise";
+export * from './components';
+export * from './contexts/GridContext';
+export * from './contexts/GridContextProvider';
+export * from './contexts/GridPopoverContext';
+export * from './contexts/GridPopoverContextProvider';
+export * from './contexts/GridSubComponentContext';
+export * from './contexts/GridUpdatingContext';
+export * from './contexts/GridUpdatingContextProvider';
+export * from './lui/ActionButton';
+export * from './lui/FormError';
+export * from './lui/TextAreaInput';
+export * from './lui/TextInputFormatted';
+export * from './react-menu3/index';
+export * from './react-menu3/types';
+export * from './utils/bearing';
+export * from './utils/deferredPromise';
+export * from './utils/util';

package/src/lui/ActionButton.tsx

@@ -1,27 +1,27 @@
-import "./ActionButton.scss";
+import './ActionButton.scss';
 
-import clsx from "clsx";
-import { CSSProperties, ReactElement, useEffect, useState } from "react";
+import { LuiButton, LuiIcon, LuiMiniSpinner } from '@linzjs/lui';
+import { LuiButtonProps } from '@linzjs/lui/dist/components/LuiButton/LuiButton';
+import { IconName } from '@linzjs/lui/dist/components/LuiIcon/LuiIcon';
+import clsx from 'clsx';
+import { CSSProperties, ReactElement, useEffect, useState } from 'react';
 
-import { LuiButton, LuiIcon, LuiMiniSpinner } from "@linzjs/lui";
-import { LuiButtonProps } from "@linzjs/lui/dist/components/LuiButton/LuiButton";
-import { IconName } from "@linzjs/lui/dist/components/LuiIcon/LuiIcon";
-
-import { usePrevious } from "./reactUtils";
-import { useStateDeferred } from "./stateDeferredHook";
+import { usePrevious } from './reactUtils';
+import { useStateDeferred } from './stateDeferredHook';
 
 export interface ActionButtonProps {
   icon: IconName;
   name?: string;
-  "aria-label"?: string;
+  'aria-label'?: string;
   inProgressName?: string;
   title?: string;
   dataTestId?: string;
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "ns";
-  iconPosition?: "left" | "right";
-  className?: "ActionButton-fill" | "ActionButton-tight" | string;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'ns';
+  iconPosition?: 'left' | 'right';
+  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+  className?: 'ActionButton-fill' | 'ActionButton-tight' | string;
   onClick: () => Promise<void> | void;
-  level?: LuiButtonProps["level"];
+  level?: LuiButtonProps['level'];
   style?: CSSProperties;
   disabled?: boolean;
 }
@@ -39,10 +39,10 @@ export const ActionButton = ({
   className,
   title,
   onClick,
-  size = "sm",
-  iconPosition = "left",
-  level = "tertiary",
-  "aria-label": ariaLabel,
+  size = 'sm',
+  iconPosition = 'left',
+  level = 'tertiary',
+  'aria-label': ariaLabel,
 }: ActionButtonProps): ReactElement => {
   const [inProgress, setInProgress] = useState(false);
   const lastInProgress = usePrevious(inProgress ?? false);
@@ -54,63 +54,64 @@ export const ActionButton = ({
   }, [inProgress, lastInProgress, setLocalInProgress, setLocalInProgressDeferred]);
 
   const buttonText = (
-    <span className={"ActionButton-minimalArea"}>
-      <span className={"ActionButton-minimalAreaDisplay"}>{(localInProgress ? inProgressName : name) ?? name}</span>
+    <span className={'ActionButton-minimalArea'}>
+      <span className={'ActionButton-minimalAreaDisplay'}>{(localInProgress ? inProgressName : name) ?? name}</span>
       {/* This makes sure the button expands to fill maximum length text at all times */}
-      <span className={"ActionButton-minimalAreaExpand"}>{name}</span>
+      <span className={'ActionButton-minimalAreaExpand'}>{name}</span>
     </span>
   );
 
   return (
     <LuiButton
       data-testid={dataTestId}
-      type={"button"}
+      type={'button'}
       level={level}
       title={title ?? ariaLabel ?? name}
-      buttonProps={{ "aria-label": ariaLabel ?? name }}
+      buttonProps={{ 'aria-label': ariaLabel ?? name }}
       className={clsx(
-        "lui-button-icon-right",
-        "ActionButton",
+        'lui-button-icon-right',
+        'ActionButton',
         className,
-        localInProgress && "ActionButton-inProgress",
-        name != null && !className?.includes("ActionButton-fill") && "ActionButton-minimal",
-        name == null && "ActionButton-iconOnly",
+        localInProgress && 'ActionButton-inProgress',
+        name != null && !className?.includes('ActionButton-fill') && 'ActionButton-minimal',
+        name == null && 'ActionButton-iconOnly',
       )}
-      size={"lg"}
+      size={'lg'}
       style={style}
-      onClick={async () => {
+      onClick={() => {
         const promise = onClick();
-        const isPromise = typeof promise !== "undefined";
+        const isPromise = typeof promise !== 'undefined';
         if (isPromise) {
           setInProgress(true);
-          if (isPromise) await promise;
-          setInProgress(false);
+          void promise.finally(() => {
+            setInProgress(false);
+          });
         }
       }}
       disabled={localInProgress || disabled}
     >
-      {iconPosition === "right" && buttonText}
+      {iconPosition === 'right' && buttonText}
       {localInProgress && (
-        <div style={{ position: "relative" }}>
+        <div style={{ position: 'relative' }}>
           <LuiMiniSpinner
             size={14}
             divProps={{
-              "data-testid": "loading-spinner",
+              'data-testid': 'loading-spinner',
               style: {
-                position: "absolute",
+                position: 'absolute',
                 left: 4,
                 top: -10,
                 bottom: 10,
                 right: -4,
               },
-              role: "status",
-              "aria-label": "Loading",
+              role: 'status',
+              'aria-label': 'Loading',
             }}
           />
         </div>
       )}
-      <LuiIcon name={icon} alt={ariaLabel ?? name ?? ""} size={size} />
-      {iconPosition === "left" && buttonText}
+      <LuiIcon name={icon} alt={ariaLabel ?? name ?? ''} size={size} />
+      {iconPosition === 'left' && buttonText}
     </LuiButton>
   );
 };

package/src/lui/FormError.tsx

@@ -1,7 +1,7 @@
-import "./FormError.scss";
+import './FormError.scss';
 
-import { ReactElement } from "react";
-import { LuiIcon } from "@linzjs/lui";
+import { LuiIcon } from '@linzjs/lui';
+import { ReactElement } from 'react';
 
 export interface FormErrorProps {
   helpText?: string;
@@ -18,7 +18,7 @@ export const FormError = (props: FormErrorProps) => {
         </div>
       )}
 
-      {props.helpText && !props.error && <span className={"FormError-helpText"}>{props.helpText}</span>}
+      {props.helpText && !props.error && <span className={'FormError-helpText'}>{props.helpText}</span>}
     </>
   );
 };

package/src/lui/TextAreaInput.tsx

@@ -1,8 +1,8 @@
-import clsx from "clsx";
-import { omit } from "lodash-es";
-import { InputHTMLAttributes, ReactElement, useId } from "react";
+import clsx from 'clsx';
+import { omit } from 'lodash-es';
+import { InputHTMLAttributes, ReactElement, useId } from 'react';
 
-import { FormError } from "./FormError";
+import { FormError } from './FormError';
 
 export interface LuiTextAreaInputProps extends InputHTMLAttributes<HTMLTextAreaElement> {
   // overrides value in base class to be string type only
@@ -23,9 +23,9 @@ export const TextAreaInput = (props: LuiTextAreaInputProps) => {
   return (
     <div
       className={clsx(
-        "LuiTextAreaInput Grid-popoverContainer",
-        props.disabled ? "isDisabled" : "",
-        props.error ? "hasError" : "",
+        'LuiTextAreaInput Grid-popoverContainer',
+        props.disabled ? 'isDisabled' : '',
+        props.error ? 'hasError' : '',
         props.className,
       )}
     >
@@ -36,9 +36,9 @@ export const TextAreaInput = (props: LuiTextAreaInputProps) => {
           {/* wrapper div used for error styling */}
           <textarea
             rows={5}
-            {...omit(props, ["error", "value", "helpText", "formatted", "className", "allowTabToSave"])}
+            {...omit(props, ['error', 'value', 'helpText', 'formatted', 'className', 'allowTabToSave'])}
             id={id}
-            value={props.value ?? ""}
+            value={props.value ?? ''}
             spellCheck={true}
             onMouseEnter={(e) => {
               if (document.activeElement != e.currentTarget) {

package/src/lui/TextInputFormatted.tsx

@@ -1,10 +1,10 @@
-import "./TextInputFormatted.scss";
+import './TextInputFormatted.scss';
 
-import clsx from "clsx";
-import { omit } from "lodash-es";
-import { DetailedHTMLProps, InputHTMLAttributes, ReactElement } from "react";
+import clsx from 'clsx';
+import { omit } from 'lodash-es';
+import { DetailedHTMLProps, InputHTMLAttributes, ReactElement } from 'react';
 
-import { FormError } from "./FormError";
+import { FormError } from './FormError';
 
 export interface LuiTextInputProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
   // overrides value in base class to be string type only
@@ -21,26 +21,26 @@ export const TextInputFormatted = (props: LuiTextInputProps): ReactElement => {
   return (
     <div
       className={clsx(
-        "LuiTextInput GridLuiTextInput Grid-popoverContainer",
-        props.error && "hasError",
+        'LuiTextInput GridLuiTextInput Grid-popoverContainer',
+        props.error && 'hasError',
         props.className,
       )}
     >
       <span className="LuiTextInput-inputWrapper">
         {/* wrapper div used for error styling */}
         <input
-          type={"text"}
+          type={'text'}
           spellCheck={true}
           defaultValue={props.value}
-          {...omit(props, ["error", "value", "helpText", "formatted", "className", "allowTabToSave"])}
-          className={"LuiTextInput-input"}
+          {...omit(props, ['error', 'value', 'helpText', 'formatted', 'className', 'allowTabToSave'])}
+          className={'LuiTextInput-input'}
           onMouseEnter={(e) => {
             e.currentTarget.focus();
             props.onMouseEnter && props.onMouseEnter(e);
           }}
           data-allowtabtosave={props.allowTabToSave}
         />
-        <span className={"LuiTextInput-formatted"}>{props.formatted}</span>
+        <span className={'LuiTextInput-formatted'}>{props.formatted}</span>
       </span>
 
       <FormError error={props.error} helpText={props.helpText} />

package/src/lui/reactUtils.test.tsx

@@ -1,9 +1,9 @@
-import { screen } from "@testing-library/dom";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { ReactElement, useEffect, useState } from "react";
+import { screen } from '@testing-library/dom';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ReactElement, useEffect, useState } from 'react';
 
-import { usePrevious } from "./reactUtils";
+import { usePrevious } from './reactUtils';
 
 interface WrapperProps {
   value: boolean;
@@ -33,10 +33,10 @@ const TestComponent = (): ReactElement => {
   );
 };
 
-describe("usePrevious", () => {
-  test("usePrevious", async () => {
+describe('usePrevious', () => {
+  test('usePrevious', async () => {
     render(<TestComponent />);
-    const button = await screen.findByText("Change value");
+    const button = await screen.findByText('Change value');
 
     expect(extPrevious).toBeUndefined();
 

package/src/lui/reactUtils.tsx

@@ -1,11 +1,11 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
 
 /**
  * Track previous values of states.
  *
  * @param value Value to track.
  */
-export const usePrevious = <T extends unknown>(value: T): T | undefined => {
+export const usePrevious = <T,>(value: T): T | undefined => {
   const ref = useRef<T>();
   useEffect(() => {
     ref.current = value;

package/src/lui/stateDeferredHook.tsx

@@ -1,13 +1,11 @@
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useRef, useState } from 'react';
 
-import { useTimeoutHook } from "./timeoutHook";
+import { useTimeoutHook } from './timeoutHook';
 
 /**
  * Defers state change up to a minimum time since last state change.
  */
-export const useStateDeferred = <T extends unknown>(
-  initialValue: T,
-): [T, (v: T) => void, (v: T, w: number) => void] => {
+export const useStateDeferred = <T,>(initialValue: T): [T, (v: T) => void, (v: T, w: number) => void] => {
   const startTime = useRef<number>(0);
   const timeoutHook = useTimeoutHook();
 

package/src/lui/timeoutHook.test.tsx

@@ -1,8 +1,8 @@
-import { render } from "@testing-library/react";
+import { render } from '@testing-library/react';
 
-import { useTimeoutHook } from "./timeoutHook";
+import { useTimeoutHook } from './timeoutHook';
 
-describe("useTimeoutHook", () => {
+describe('useTimeoutHook', () => {
   beforeEach(() => {
     jest.useFakeTimers();
   });
@@ -19,7 +19,7 @@ describe("useTimeoutHook", () => {
     return <div />;
   };
 
-  test("invokes on timeout", async () => {
+  test('invokes on timeout', () => {
     const callback = jest.fn();
 
     render(<TestComponent callback={callback} />);
@@ -28,7 +28,7 @@ describe("useTimeoutHook", () => {
     expect(callback).toHaveBeenCalledTimes(1);
   });
 
-  test("invokes once on double invocation", async () => {
+  test('invokes once on double invocation', () => {
     const callback = jest.fn();
 
     render(<TestComponent callback={callback} repeat={2} />);

package/src/lui/timeoutHook.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from 'react';
 
 /**
  * Cancels timeouts on scope being destroyed.

package/src/react-app-env.d.ts

@@ -1 +1 @@
-/// <reference types="react-scripts" />
+/// <reference types="react-scripts" />

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

@@ -1,18 +1,18 @@
-import { FocusEvent, ForwardedRef, MutableRefObject, forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
-import { createPortal } from "react-dom";
-
-import { hasParentClass } from "../../utils/util";
-import { EventHandlersContext, EventHandlersContextType } from "../contexts/EventHandlersContext";
-import { ItemSettingsContext } from "../contexts/ItemSettingsContext";
-import { SettingsContext } from "../contexts/SettingsContext";
-import { useBEM } from "../hooks";
-import { ControlledMenuProps, PortalFieldType, RadioChangeEvent } from "../types";
-import { CloseReason, Keys, getTransition, isMenuOpen, menuContainerClass, mergeProps, safeCall } from "../utils";
-import { MenuList } from "./MenuList";
+import { FocusEvent, ForwardedRef, forwardRef, MutableRefObject, useCallback, useEffect, useMemo, useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+import { hasParentClass } from '../../utils/util';
+import { EventHandlersContext, EventHandlersContextType } from '../contexts/EventHandlersContext';
+import { ItemSettingsContext } from '../contexts/ItemSettingsContext';
+import { SettingsContext } from '../contexts/SettingsContext';
+import { useBEM } from '../hooks';
+import { ControlledMenuProps, PortalFieldType, RadioChangeEvent } from '../types';
+import { CloseReason, getTransition, isMenuOpen, Keys, menuContainerClass, mergeProps, safeCall } from '../utils';
+import { MenuList } from './MenuList';
 
 export const ControlledMenuFr = (
   {
-    "aria-label": ariaLabel,
+    'aria-label': ariaLabel,
     className,
     containerProps,
     initialMounted,
@@ -21,11 +21,11 @@ export const ControlledMenuFr = (
     transitionTimeout,
     boundingBoxRef,
     boundingBoxPadding,
-    reposition = "auto",
+    reposition = 'auto',
     submenuOpenDelay = 300,
     submenuCloseDelay = 150,
     skipOpen,
-    viewScroll = "initial",
+    viewScroll = 'initial',
     portal,
     theming,
     onItemClick,
@@ -68,10 +68,10 @@ export const ControlledMenuFr = (
 
   const isWithinMenu = useCallback(
     (target: EventTarget | null) =>
-      hasParentClass("szh-menu--state-open", target as Node) ||
+      hasParentClass('szh-menu--state-open', target as Node) ||
       // This is temporary, it will be removed when the overlay click is fixed
-      hasParentClass("LuiModalPrefab", target as Node) ||
-      hasParentClass("prefab-modal", target as Node),
+      hasParentClass('LuiModalPrefab', target as Node) ||
+      hasParentClass('prefab-modal', target as Node),
     [],
   );
 
@@ -85,7 +85,7 @@ export const ControlledMenuFr = (
         // 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.setAttribute("data-reason", CloseReason.BLUR);
+          saveButtonRef.current.setAttribute('data-reason', CloseReason.BLUR);
           saveButtonRef.current.click();
         } else safeCall(onClose, { reason: CloseReason.BLUR });
 
@@ -121,7 +121,7 @@ export const ControlledMenuFr = (
       const thisDocument = anchorRef?.current ? anchorRef?.current.ownerDocument : document;
       const activeElement = thisDocument.activeElement;
       if (!anchorRef?.current || !activeElement) return;
-      if (ev.key !== "Tab" && ev.key !== "Enter") return;
+      if (ev.key !== 'Tab' && ev.key !== 'Enter') return;
 
       if (ev.repeat) {
         ev.preventDefault();
@@ -131,14 +131,14 @@ export const ControlledMenuFr = (
 
       const invokeSave = (reason: string) => {
         if (!saveButtonRef?.current) return;
-        saveButtonRef.current?.setAttribute("data-reason", reason);
+        saveButtonRef.current?.setAttribute('data-reason', reason);
         saveButtonRef?.current?.click();
       };
 
       // data-allowtabtosave is used such that list filter inputs can use tab to save
-      const allowTabToSave = activeElement.getAttribute("data-allowtabtosave") == "true";
+      const allowTabToSave = activeElement.getAttribute('data-allowtabtosave') == 'true';
 
-      const inputElsIterator = thisDocument.querySelectorAll<HTMLElement>(".szh-menu--state-open input,textarea");
+      const inputElsIterator = thisDocument.querySelectorAll<HTMLElement>('.szh-menu--state-open input,textarea');
       let inputEls: HTMLElement[] = [];
       inputElsIterator.forEach((el) => inputEls.push(el));
       inputEls = inputEls.filter((el) => !(el as any).disabled);
@@ -146,10 +146,10 @@ export const ControlledMenuFr = (
       const firstInputEl = inputEls[0];
       const lastInputEl = inputEls[inputEls.length - 1];
 
-      const isTextArea = activeElement.nodeName === "TEXTAREA";
-      const suppressEnterAutoSave = activeElement.getAttribute("data-disableenterautosave") == "true" || isTextArea;
+      const isTextArea = activeElement.nodeName === 'TEXTAREA';
+      const suppressEnterAutoSave = activeElement.getAttribute('data-disableenterautosave') == 'true' || isTextArea;
 
-      if (ev.key === "Tab") {
+      if (ev.key === 'Tab') {
         const tabDirection = ev.shiftKey ? CloseReason.TAB_BACKWARD : CloseReason.TAB_FORWARD;
         if (
           (activeElement === lastInputEl && !ev.shiftKey) ||
@@ -167,14 +167,14 @@ export const ControlledMenuFr = (
         }
       }
 
-      const type = activeElement.getAttribute("type");
-      const isTextInput = type === "text" || type == null || type === "textarea";
+      const type = activeElement.getAttribute('type');
+      const isTextInput = type === 'text' || type == null || type === 'textarea';
 
       switch (activeElement.nodeName) {
-        case "INPUT":
+        case 'INPUT':
           {
             // If there's only one input element, we support tab and enter
-            if (isTextInput && ev.key === "Enter" && !suppressEnterAutoSave) {
+            if (isTextInput && ev.key === 'Enter' && !suppressEnterAutoSave) {
               ev.preventDefault();
               ev.stopPropagation();
               if (isDown) {
@@ -196,19 +196,19 @@ export const ControlledMenuFr = (
   useEffect(() => {
     if (isMenuOpen(state)) {
       const thisDocument = anchorRef?.current ? anchorRef?.current.ownerDocument : document;
-      thisDocument.addEventListener("keydown", handleKeydownTabAndEnter, true);
-      thisDocument.addEventListener("keyup", handleKeyupTabAndEnter, true);
-      thisDocument.addEventListener("mousedown", handleScreenEventForSave, true);
-      thisDocument.addEventListener("mouseup", handleScreenEventForCancel, true);
-      thisDocument.addEventListener("click", handleScreenEventForCancel, true);
-      thisDocument.addEventListener("dblclick", handleScreenEventForCancel, true);
+      thisDocument.addEventListener('keydown', handleKeydownTabAndEnter, true);
+      thisDocument.addEventListener('keyup', handleKeyupTabAndEnter, true);
+      thisDocument.addEventListener('mousedown', handleScreenEventForSave, true);
+      thisDocument.addEventListener('mouseup', handleScreenEventForCancel, true);
+      thisDocument.addEventListener('click', handleScreenEventForCancel, true);
+      thisDocument.addEventListener('dblclick', handleScreenEventForCancel, true);
       return () => {
-        thisDocument.removeEventListener("keydown", handleKeydownTabAndEnter, true);
-        thisDocument.removeEventListener("keyup", handleKeyupTabAndEnter, true);
-        thisDocument.removeEventListener("mousedown", handleScreenEventForSave, true);
-        thisDocument.removeEventListener("mouseup", handleScreenEventForCancel, true);
-        thisDocument.removeEventListener("click", handleScreenEventForCancel, true);
-        thisDocument.removeEventListener("dblclick", handleScreenEventForCancel, true);
+        thisDocument.removeEventListener('keydown', handleKeydownTabAndEnter, true);
+        thisDocument.removeEventListener('keyup', handleKeyupTabAndEnter, true);
+        thisDocument.removeEventListener('mousedown', handleScreenEventForSave, true);
+        thisDocument.removeEventListener('mouseup', handleScreenEventForCancel, true);
+        thisDocument.removeEventListener('click', handleScreenEventForCancel, true);
+        thisDocument.removeEventListener('dblclick', handleScreenEventForCancel, true);
       };
     }
     return () => {};
@@ -248,7 +248,7 @@ export const ControlledMenuFr = (
             key: event.key,
             shiftKey: event.shiftKey,
             reason:
-              event.key === "Tab"
+              event.key === 'Tab'
                 ? event.shiftKey
                   ? CloseReason.TAB_BACKWARD
                   : CloseReason.TAB_FORWARD
@@ -295,7 +295,7 @@ export const ControlledMenuFr = (
     }
   };
 
-  const itemTransition = getTransition(transition, "item");
+  const itemTransition = getTransition(transition, 'item');
   const modifiers = useMemo(() => ({ theme: theming, itemTransition }), [theming, itemTransition]);
 
   const menuList = (
@@ -306,7 +306,7 @@ export const ControlledMenuFr = (
         modifiers,
         className,
       })}
-      style={{ ...containerProps?.style, position: "relative" }}
+      style={{ ...containerProps?.style, position: 'relative' }}
       ref={containerRef}
     >
       {state && (
@@ -315,7 +315,7 @@ export const ControlledMenuFr = (
             <EventHandlersContext.Provider value={eventHandlers}>
               <MenuList
                 {...restProps}
-                ariaLabel={ariaLabel || "Menu"}
+                ariaLabel={ariaLabel || 'Menu'}
                 externalRef={externalRef}
                 containerRef={containerRef}
                 onClose={onClose}
@@ -328,7 +328,7 @@ export const ControlledMenuFr = (
   );
 
   if (portal === true && anchorRef?.current != null) {
-    if (hasParentClass("react-menu-inline-test", anchorRef.current)) {
+    if (hasParentClass('react-menu-inline-test', anchorRef.current)) {
       portal = false;
     } else {
       portal = { target: anchorRef.current.ownerDocument.body } as PortalFieldType;
@@ -336,8 +336,8 @@ export const ControlledMenuFr = (
   }
 
   if (portal) {
-    if (typeof portal === "boolean") {
-      if (portal && typeof document !== "undefined") {
+    if (typeof portal === 'boolean') {
+      if (portal && typeof document !== 'undefined') {
         return createPortal(menuList, document.body);
       }
     } else {

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

@@ -1,10 +1,10 @@
-import { LegacyRef, ReactElement, useContext, useMemo, useRef } from "react";
+import { LegacyRef, ReactElement, useContext, useMemo, useRef } from 'react';
 
-import { EventHandlersContext } from "../contexts/EventHandlersContext";
-import { useBEM, useCombinedRef, useItemState } from "../hooks";
-import { BaseProps } from "../types";
-import { commonProps, menuClass, menuItemClass, mergeProps, safeCall, withHovering } from "../utils";
-import { withHoveringResultProps } from "../utils/withHovering";
+import { EventHandlersContext } from '../contexts/EventHandlersContext';
+import { useBEM, useCombinedRef, useItemState } from '../hooks';
+import { BaseProps } from '../types';
+import { commonProps, menuClass, menuItemClass, mergeProps, safeCall, withHovering } from '../utils';
+import { withHoveringResultProps } from '../utils/withHovering';
 
 export interface FocusableItemProps extends BaseProps, withHoveringResultProps {
   disabled?: boolean;
@@ -66,4 +66,4 @@ export const FocusableItemFr = ({
   );
 };
 
-export const FocusableItem = withHovering("FocusableItem", FocusableItemFr);
+export const FocusableItem = withHovering('FocusableItem', FocusableItemFr);