@linzjs/step-ag-grid 23.0.1 → 25.0.0

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

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

@@ -1,18 +1,18 @@
 import {
+  cloneElement,
   ForwardedRef,
+  forwardRef,
   Fragment,
   ReactElement,
-  cloneElement,
-  forwardRef,
   useCallback,
   useImperativeHandle,
   useRef,
-} from "react";
+} from 'react';
 
-import { useCombinedRef, useMenuChange, useMenuStateAndFocus } from "../hooks";
-import { MenuButtonModifiers, MenuCloseEvent, RenderProp, RootMenuProps, UncontrolledMenuProps } from "../types";
-import { FocusPositions, Keys, getName, isMenuOpen, mergeProps, safeCall } from "../utils";
-import { ControlledMenu } from "./ControlledMenu";
+import { useCombinedRef, useMenuChange, useMenuStateAndFocus } from '../hooks';
+import { MenuButtonModifiers, MenuCloseEvent, RenderProp, RootMenuProps, UncontrolledMenuProps } from '../types';
+import { FocusPositions, getName, isMenuOpen, Keys, mergeProps, safeCall } from '../utils';
+import { ControlledMenu } from './ControlledMenu';
 
 //
 // Menu
@@ -31,7 +31,7 @@ export interface MenuProps extends RootMenuProps, UncontrolledMenuProps {
 }
 
 export function MenuFr(
-  { "aria-label": ariaLabel, menuButton, instanceRef, onMenuChange, ...restProps }: MenuProps,
+  { 'aria-label': ariaLabel, menuButton, instanceRef, onMenuChange, ...restProps }: MenuProps,
   externalRef: ForwardedRef<ReactElement>,
 ) {
   const [stateProps, toggleMenu, openMenu] = useMenuStateAndFocus(restProps);
@@ -72,14 +72,14 @@ export function MenuFr(
 
   // Too many mixed types here to figure out what to pick for button.  Bad code.
   const button: any = safeCall(menuButton, { open: isOpen });
-  if (!button || !button.type) throw new Error("Menu requires a menuButton prop.");
+  if (!button || !button.type) throw new Error('Menu requires a menuButton prop.');
 
   const buttonProps = {
     ref: useCombinedRef(button.ref, buttonRef),
     ...mergeProps({ onClick, onKeyDown }, button.props),
     isOpen: false,
   };
-  if (getName(button.type) === "MenuButton") {
+  if (getName(button.type) === 'MenuButton') {
     buttonProps.isOpen = isOpen;
   }
   const renderButton = cloneElement(button, buttonProps);
@@ -97,7 +97,7 @@ export function MenuFr(
       <ControlledMenu
         {...restProps}
         {...stateProps}
-        aria-label={ariaLabel || (typeof button.props.children === "string" ? button.props.children : "Menu")}
+        aria-label={ariaLabel || (typeof button.props.children === 'string' ? button.props.children : 'Menu')}
         anchorRef={buttonRef}
         ref={externalRef}
         onClose={handleClose}

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

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

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

@@ -1,8 +1,8 @@
-import { LegacyRef, forwardRef, memo } from "react";
+import { forwardRef, LegacyRef, memo } from 'react';
 
-import { useBEM } from "../hooks";
-import { BaseProps } from "../types";
-import { menuClass, menuDividerClass } from "../utils";
+import { useBEM } from '../hooks';
+import { BaseProps } from '../types';
+import { menuClass, menuDividerClass } from '../utils';
 
 const MenuDividerFr = ({ className, ...restProps }: BaseProps, externalRef: LegacyRef<HTMLLIElement>) => {
   return (

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

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

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

@@ -1,8 +1,8 @@
-import { ForwardedRef, forwardRef, memo } from "react";
+import { ForwardedRef, forwardRef, memo } from 'react';
 
-import { useBEM } from "../hooks";
-import { BasePropsWithChildren } from "../types";
-import { menuClass, menuHeaderClass } from "../utils";
+import { useBEM } from '../hooks';
+import { BasePropsWithChildren } from '../types';
+import { menuClass, menuHeaderClass } from '../utils';
 
 export const MenuHeaderFr = (
   { className, ...restProps }: BasePropsWithChildren,

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

@@ -1,11 +1,11 @@
-import { KeyboardEvent, Ref, useContext, useMemo } from "react";
+import { KeyboardEvent, Ref, useContext, useMemo } from 'react';
 
-import { EventHandlersContext } from "../contexts/EventHandlersContext";
-import { RadioGroupContext } from "../contexts/RadioGroupContext";
-import { useBEM, useCombinedRef, useItemState } from "../hooks";
-import { BaseProps, ClickEvent, EventHandler, Hoverable, MenuItemTypeProp, RenderProp } from "../types";
-import { Keys, RMEvent, commonProps, menuClass, menuItemClass, mergeProps, safeCall, withHovering } from "../utils";
-import { withHoveringResultProps } from "../utils/withHovering";
+import { EventHandlersContext } from '../contexts/EventHandlersContext';
+import { RadioGroupContext } from '../contexts/RadioGroupContext';
+import { useBEM, useCombinedRef, useItemState } from '../hooks';
+import { BaseProps, ClickEvent, EventHandler, Hoverable, MenuItemTypeProp, RenderProp } from '../types';
+import { commonProps, Keys, menuClass, menuItemClass, mergeProps, RMEvent, safeCall, withHovering } from '../utils';
+import { withHoveringResultProps } from '../utils/withHovering';
 
 //
 // MenuItem
@@ -33,7 +33,7 @@ export type MenuItemModifiers = Readonly<{
   anchor: boolean;
 }>;
 
-export interface MenuItemProps extends Omit<BaseProps<MenuItemModifiers>, "onClick">, Hoverable {
+export interface MenuItemProps extends Omit<BaseProps<MenuItemModifiers>, 'onClick'>, Hoverable {
   /**
    * Any value provided to this prop will be available in the event object of click events.
    *
@@ -85,8 +85,8 @@ const MenuItemFr = ({
   const { setHover, ...restStateProps } = useItemState(menuItemRef, menuItemRef, isHovering, isDisabled);
   const eventHandlers = useContext(EventHandlersContext);
   const radioGroup = useContext(RadioGroupContext);
-  const isRadio = type === "radio";
-  const isCheckBox = type === "checkbox";
+  const isRadio = type === 'radio';
+  const isCheckBox = type === 'checkbox';
   const isAnchor = !!href && !isDisabled && !isRadio && !isCheckBox;
   const isChecked = isRadio ? radioGroup.value === value : isCheckBox ? !!checked : false;
 
@@ -122,7 +122,7 @@ const MenuItemFr = ({
 
   const handleKeyDown = (e: KeyboardEvent) => {
     // if tab is allowed the handleKeyUp event can't process the tab
-    if (e.key === "Tab") {
+    if (e.key === 'Tab') {
       e.preventDefault();
       e.stopPropagation();
     }
@@ -176,8 +176,8 @@ const MenuItemFr = ({
   // 2. Merged outer and local props
   // 3. ref, className
   const menuItemProps = {
-    role: isRadio ? "menuitemradio" : isCheckBox ? "menuitemcheckbox" : "menuitem",
-    "aria-checked": isRadio || isCheckBox ? isChecked : undefined,
+    role: isRadio ? 'menuitemradio' : isCheckBox ? 'menuitemcheckbox' : 'menuitem',
+    'aria-checked': isRadio || isCheckBox ? isChecked : undefined,
     ...mergedProps,
     ...commonProps(isDisabled, isHovering),
     ref: useCombinedRef(externalRef as Ref<any>, menuItemRef),
@@ -196,4 +196,4 @@ const MenuItemFr = ({
   }
 };
 
-export const MenuItem = withHovering("MenuItem", MenuItemFr);
+export const MenuItem = withHovering('MenuItem', MenuItemFr);