@linzjs/step-ag-grid 23.0.1 → 25.0.0

package/src/react-menu3/hooks/useItems.ts

@@ -1,8 +1,8 @@
-import { defer } from "lodash-es";
-import { MutableRefObject, useCallback, useRef, useState } from "react";
+import { defer } from 'lodash-es';
+import { MutableRefObject, useCallback, useRef, useState } from 'react';
 
-import { FocusPosition } from "../types";
-import { HoverActionTypes, focusFirstInput, indexOfNode } from "../utils";
+import { FocusPosition } from '../types';
+import { focusFirstInput, HoverActionTypes, indexOfNode } from '../utils';
 
 export const useItems = (menuRef: MutableRefObject<any>, focusRef: MutableRefObject<any> | undefined) => {
   const [hoverItem, setHoverItem] = useState<
@@ -46,7 +46,7 @@ export const useItems = (menuRef: MutableRefObject<any>, focusRef: MutableRefObj
       const { items, hoverIndex } = mutableState;
       const sortItems = () => {
         if (mutableState.sorted) return;
-        const orderedNodes = menuRef.current.querySelectorAll(".szh-menu__item");
+        const orderedNodes = menuRef.current.querySelectorAll('.szh-menu__item');
         items.sort((a, b) => indexOfNode(orderedNodes, a) - indexOfNode(orderedNodes, b));
         mutableState.sorted = true;
       };
@@ -81,12 +81,12 @@ export const useItems = (menuRef: MutableRefObject<any>, focusRef: MutableRefObj
           break;
 
         case HoverActionTypes.SET_INDEX:
-          if (typeof nextIndex !== "number") break;
+          if (typeof nextIndex !== 'number') break;
           sortItems();
           index = nextIndex;
           newItem = items[index];
           defer(() =>
-            (newItem as HTMLElement).scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" }),
+            (newItem as HTMLElement).scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' }),
           );
           break;
 
@@ -112,7 +112,7 @@ export const useItems = (menuRef: MutableRefObject<any>, focusRef: MutableRefObj
         }
 
         default:
-          if (process.env.NODE_ENV !== "production")
+          if (process.env.NODE_ENV !== 'production')
             throw new Error(`[React-Menu] Unknown hover action type: ${actionType}`);
       }
 

package/src/react-menu3/hooks/useMenuChange.ts

@@ -1,7 +1,7 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef } from 'react';
 
-import { EventHandler, MenuChangeEvent } from "../types";
-import { safeCall } from "../utils";
+import { EventHandler, MenuChangeEvent } from '../types';
+import { safeCall } from '../utils';
 
 export const useMenuChange = (onMenuChange?: EventHandler<MenuChangeEvent>, isOpen?: boolean) => {
   const prevOpen = useRef(isOpen);

package/src/react-menu3/hooks/useMenuState.ts

@@ -1,7 +1,7 @@
-import { useTransition } from "react-transition-state";
+import { useTransition } from 'react-transition-state';
 
-import { MenuState, MenuStateOptions } from "../types";
-import { MenuStateMap, getTransition } from "../utils";
+import { MenuState, MenuStateOptions } from '../types';
+import { getTransition, MenuStateMap } from '../utils';
 
 /**
  * A custom Hook which helps manage the states of `ControlledMenu`.
@@ -35,8 +35,8 @@ export const useMenuState = (
     mountOnEnter: !initialMounted,
     unmountOnExit: unmountOnClose,
     timeout: transitionTimeout ?? 500,
-    enter: getTransition(transition, "open"),
-    exit: getTransition(transition, "close"),
+    enter: getTransition(transition, 'open'),
+    exit: getTransition(transition, 'close'),
   });
 
   return [{ state: MenuStateMap[state.status], endTransition }, toggleMenu];

package/src/react-menu3/hooks/useMenuStateAndFocus.ts

@@ -1,13 +1,13 @@
-import { useState } from "react";
+import { useState } from 'react';
 
-import { ControlledMenuProps, FocusPosition, MenuStateOptions } from "../types";
-import { useMenuState } from "./useMenuState";
+import { ControlledMenuProps, FocusPosition, MenuStateOptions } from '../types';
+import { useMenuState } from './useMenuState';
 
 export const useMenuStateAndFocus = (
   options: MenuStateOptions,
 ): [any, (open?: boolean) => void, (position?: FocusPosition, alwaysUpdate?: boolean) => void] => {
   const [menuProps, toggleMenu] = useMenuState(options);
-  const [menuItemFocus, setMenuItemFocus] = useState<ControlledMenuProps["menuItemFocus"]>();
+  const [menuItemFocus, setMenuItemFocus] = useState<ControlledMenuProps['menuItemFocus']>();
 
   const openMenu = (position?: FocusPosition, alwaysUpdate?: boolean) => {
     setMenuItemFocus({ position, alwaysUpdate });

package/src/react-menu3/index.ts

@@ -1,11 +1,11 @@
-export { useMenuState } from "./hooks";
-export { MenuButton } from "./components/MenuButton";
-export { Menu } from "./components/Menu";
-export { ControlledMenu } from "./components/ControlledMenu";
-export { SubMenu } from "./components/SubMenu";
-export { MenuItem } from "./components/MenuItem";
-export { FocusableItem } from "./components/FocusableItem";
-export { MenuDivider } from "./components/MenuDivider";
-export { MenuHeader } from "./components/MenuHeader";
-export { MenuGroup } from "./components/MenuGroup";
-export { MenuRadioGroup } from "./components/MenuRadioGroup";
+export { ControlledMenu } from './components/ControlledMenu';
+export { FocusableItem } from './components/FocusableItem';
+export { Menu } from './components/Menu';
+export { MenuButton } from './components/MenuButton';
+export { MenuDivider } from './components/MenuDivider';
+export { MenuGroup } from './components/MenuGroup';
+export { MenuHeader } from './components/MenuHeader';
+export { MenuItem } from './components/MenuItem';
+export { MenuRadioGroup } from './components/MenuRadioGroup';
+export { SubMenu } from './components/SubMenu';
+export { useMenuState } from './hooks';

package/src/react-menu3/positionUtils/getPositionHelpers.ts

@@ -1,6 +1,6 @@
-import { MutableRefObject } from "react";
+import { MutableRefObject } from 'react';
 
-import { parsePadding } from "../utils";
+import { parsePadding } from '../utils';
 
 export const getPositionHelpers = (
   containerRef: MutableRefObject<HTMLElement | undefined>,

package/src/react-menu3/positionUtils/index.ts

@@ -1,3 +1,3 @@
-export { getPositionHelpers } from "./getPositionHelpers";
-export { positionContextMenu } from "./positionContextMenu";
-export { positionMenu } from "./positionMenu";
+export { getPositionHelpers } from './getPositionHelpers';
+export { positionContextMenu } from './positionContextMenu';
+export { positionMenu } from './positionMenu';

package/src/react-menu3/positionUtils/placeArrowHorizontal.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from "react";
+import { MutableRefObject } from 'react';
 
 export const placeArrowHorizontal = (p: {
   arrowRef: MutableRefObject<HTMLElement | null>;

package/src/react-menu3/positionUtils/placeArrowVertical.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from "react";
+import { MutableRefObject } from 'react';
 
 export const placeArrowVertical = (p: {
   arrowRef: MutableRefObject<HTMLElement | null>;

package/src/react-menu3/positionUtils/placeLeftorRight.ts

@@ -1,8 +1,8 @@
-import { MutableRefObject } from "react";
+import { MutableRefObject } from 'react';
 
-import { MenuDirection } from "../types";
-import { getPositionHelpers } from "./getPositionHelpers";
-import { placeArrowVertical } from "./placeArrowVertical";
+import { MenuDirection } from '../types';
+import { getPositionHelpers } from './getPositionHelpers';
+import { placeArrowVertical } from './placeArrowVertical';
 
 export interface placeLeftorRightParams {
   anchorRect: DOMRect;
@@ -12,7 +12,7 @@ export interface placeLeftorRightParams {
   arrowRef: MutableRefObject<HTMLElement | null>;
   arrow?: boolean;
   direction: MenuDirection;
-  position: "auto" | "anchor" | "initial";
+  position: 'auto' | 'anchor' | 'initial';
 }
 
 export const placeLeftorRight = (
@@ -36,9 +36,9 @@ export const placeLeftorRight = (
   } = props;
   let computedDirection = direction;
   let y = placeLeftorRightY;
-  if (position !== "initial") {
+  if (position !== 'initial') {
     y = confineVertically(y);
-    if (position === "anchor") {
+    if (position === 'anchor') {
       // restrict menu to the edge of anchor element
       y = Math.min(y, anchorRect.bottom - containerRect.top);
       y = Math.max(y, anchorRect.top - containerRect.top - menuRect.height);
@@ -46,10 +46,10 @@ export const placeLeftorRight = (
   }
 
   let x, leftOverflow, rightOverflow;
-  if (computedDirection === "left") {
+  if (computedDirection === 'left') {
     x = placeLeftX;
 
-    if (position !== "initial") {
+    if (position !== 'initial') {
       // if menu overflows to the left,
       // try to reposition it to the right of the anchor.
       leftOverflow = getLeftOverflow(x);
@@ -59,7 +59,7 @@ export const placeLeftorRight = (
         rightOverflow = getRightOverflow(placeRightX);
         if (rightOverflow <= 0 || -leftOverflow > rightOverflow) {
           x = placeRightX;
-          computedDirection = "right";
+          computedDirection = 'right';
         }
       }
     }
@@ -67,19 +67,19 @@ export const placeLeftorRight = (
     // Opposite logic to the 'left' direction above
     x = placeRightX;
 
-    if (position !== "initial") {
+    if (position !== 'initial') {
       rightOverflow = getRightOverflow(x);
       if (rightOverflow > 0) {
         leftOverflow = getLeftOverflow(placeLeftX);
         if (leftOverflow >= 0 || -leftOverflow < rightOverflow) {
           x = placeLeftX;
-          computedDirection = "left";
+          computedDirection = 'left';
         }
       }
     }
   }
 
-  if (position === "auto") x = confineHorizontally(x);
+  if (position === 'auto') x = confineHorizontally(x);
   const arrowY = arrow
     ? placeArrowVertical({
         menuY: y,

package/src/react-menu3/positionUtils/placeToporBottom.ts

@@ -1,8 +1,8 @@
-import { MutableRefObject } from "react";
+import { MutableRefObject } from 'react';
 
-import { MenuDirection } from "../types";
-import { getPositionHelpers } from "./getPositionHelpers";
-import { placeArrowHorizontal } from "./placeArrowHorizontal";
+import { MenuDirection } from '../types';
+import { getPositionHelpers } from './getPositionHelpers';
+import { placeArrowHorizontal } from './placeArrowHorizontal';
 
 export interface placeToporBottomParams {
   anchorRect: DOMRect;
@@ -11,8 +11,8 @@ export interface placeToporBottomParams {
   placeBottomY: number;
   arrowRef: MutableRefObject<HTMLElement | null>;
   arrow?: boolean;
-  direction: "left" | "right" | "top" | "bottom";
-  position: "auto" | "anchor" | "initial";
+  direction: 'left' | 'right' | 'top' | 'bottom';
+  position: 'auto' | 'anchor' | 'initial';
 }
 
 export const placeToporBottom = (
@@ -35,11 +35,11 @@ export const placeToporBottom = (
     position,
   } = props;
   // make sure invalid direction is treated as 'bottom'
-  let computedDirection: MenuDirection = direction === "top" ? "top" : "bottom";
+  let computedDirection: MenuDirection = direction === 'top' ? 'top' : 'bottom';
   let x = placeToporBottomX;
-  if (position !== "initial") {
+  if (position !== 'initial') {
     x = confineHorizontally(x);
-    if (position === "anchor") {
+    if (position === 'anchor') {
       // restrict menu to the edge of anchor element
       x = Math.min(x, anchorRect.right - containerRect.left);
       x = Math.max(x, anchorRect.left - containerRect.left - menuRect.width);
@@ -47,10 +47,10 @@ export const placeToporBottom = (
   }
 
   let y, topOverflow, bottomOverflow;
-  if (computedDirection === "top") {
+  if (computedDirection === 'top') {
     y = placeTopY;
 
-    if (position !== "initial") {
+    if (position !== 'initial') {
       // if menu overflows to the top,
       // try to reposition it to the bottom of the anchor.
       topOverflow = getTopOverflow(y);
@@ -60,7 +60,7 @@ export const placeToporBottom = (
         bottomOverflow = getBottomOverflow(placeBottomY);
         if (bottomOverflow <= 0 || -topOverflow > bottomOverflow) {
           y = placeBottomY;
-          computedDirection = "bottom";
+          computedDirection = 'bottom';
         }
       }
     }
@@ -68,19 +68,19 @@ export const placeToporBottom = (
     // Opposite logic to the 'top' direction above
     y = placeBottomY;
 
-    if (position !== "initial") {
+    if (position !== 'initial') {
       bottomOverflow = getBottomOverflow(y);
       if (bottomOverflow > 0) {
         topOverflow = getTopOverflow(placeTopY);
         if (topOverflow >= 0 || -topOverflow < bottomOverflow) {
           y = placeTopY;
-          computedDirection = "top";
+          computedDirection = 'top';
         }
       }
     }
   }
 
-  if (position === "auto") y = confineVertically(y);
+  if (position === 'auto') y = confineVertically(y);
   const arrowX = arrow
     ? placeArrowHorizontal({
         menuX: x,

package/src/react-menu3/positionUtils/positionContextMenu.ts

@@ -1,5 +1,5 @@
-import { MenuDirection } from "../types";
-import { getPositionHelpers } from "./getPositionHelpers";
+import { MenuDirection } from '../types';
+import { getPositionHelpers } from './getPositionHelpers';
 
 export const positionContextMenu = ({
   positionHelpers,
@@ -45,14 +45,14 @@ export const positionContextMenu = ({
   }
 
   // Similar logic to the left and right side above.
-  let computedDirection: MenuDirection = "bottom";
+  let computedDirection: MenuDirection = 'bottom';
   const bottomOverflow = getBottomOverflow(y);
   if (bottomOverflow > 0) {
     const adjustedY = y - menuRect.height;
     const topOverflow = getTopOverflow(adjustedY);
     if (topOverflow >= 0 || -topOverflow < bottomOverflow) {
       y = adjustedY;
-      computedDirection = "top";
+      computedDirection = 'top';
     }
     y = confineVertically(y);
   }

package/src/react-menu3/positionUtils/positionMenu.ts

@@ -1,9 +1,9 @@
-import { MutableRefObject } from "react";
+import { MutableRefObject } from 'react';
 
-import { MenuDirection } from "../types";
-import { getPositionHelpers } from "./getPositionHelpers";
-import { placeLeftorRight } from "./placeLeftorRight";
-import { placeToporBottom } from "./placeToporBottom";
+import { MenuDirection } from '../types';
+import { getPositionHelpers } from './getPositionHelpers';
+import { placeLeftorRight } from './placeLeftorRight';
+import { placeToporBottom } from './placeToporBottom';
 
 interface positionMenuProps {
   offsetX: number;
@@ -12,8 +12,8 @@ interface positionMenuProps {
   anchorRef: MutableRefObject<Element | null>;
   arrow?: boolean;
   direction: MenuDirection;
-  position: "auto" | "anchor" | "initial";
-  align: "start" | "center" | "end";
+  position: 'auto' | 'anchor' | 'initial';
+  align: 'start' | 'center' | 'end';
   positionHelpers: ReturnType<typeof getPositionHelpers>;
 }
 
@@ -24,7 +24,7 @@ export const positionMenu = (props: positionMenuProps) => {
   let horizontalOffset = offsetX;
   let verticalOffset = offsetY;
   if (arrow && arrowRef.current) {
-    if (direction === "left" || direction === "right") {
+    if (direction === 'left' || direction === 'right') {
       horizontalOffset += arrowRef.current.offsetWidth;
     } else {
       verticalOffset += arrowRef.current.offsetHeight;
@@ -40,10 +40,10 @@ export const positionMenu = (props: positionMenuProps) => {
   const placeBottomY = anchorRect.bottom - containerRect.top + verticalOffset;
 
   let placeToporBottomX, placeLeftorRightY;
-  if (align === "end") {
+  if (align === 'end') {
     placeToporBottomX = anchorRect.right - containerRect.left - menuRect.width;
     placeLeftorRightY = anchorRect.bottom - containerRect.top - menuRect.height;
-  } else if (align === "center") {
+  } else if (align === 'center') {
     placeToporBottomX = anchorRect.left - containerRect.left - (menuRect.width - anchorRect.width) / 2;
     placeLeftorRightY = anchorRect.top - containerRect.top - (menuRect.height - anchorRect.height) / 2;
   } else {
@@ -69,12 +69,12 @@ export const positionMenu = (props: positionMenuProps) => {
   };
 
   switch (direction) {
-    case "left":
-    case "right":
+    case 'left':
+    case 'right':
       return placeLeftorRight(options);
 
-    case "top":
-    case "bottom":
+    case 'top':
+    case 'bottom':
     default:
       return placeToporBottom(options);
   }

package/src/react-menu3/style-utils/index.ts

@@ -9,7 +9,7 @@ import {
   menuItemClass,
   radioGroupClass,
   subMenuClass,
-} from "../utils";
+} from '../utils';
 
 const bem =
   (block: string) =>
@@ -23,13 +23,13 @@ const bem =
 
 const createSelector = (blockElement: (modifier?: string) => string, modifiers: string[] = []) => {
   const selectorObj = {};
-  Object.defineProperty(selectorObj, "name", {
+  Object.defineProperty(selectorObj, 'name', {
     value: blockElement(),
     enumerable: true,
   });
 
   modifiers.forEach((modifier) => {
-    const selector = modifier.split("-").reduce((prev, curr) => `${prev}${curr[0].toUpperCase()}${curr.slice(1)}`);
+    const selector = modifier.split('-').reduce((prev, curr) => `${prev}${curr[0].toUpperCase()}${curr.slice(1)}`);
     Object.defineProperty(selectorObj, selector, {
       value: blockElement(modifier),
       enumerable: true,
@@ -39,26 +39,26 @@ const createSelector = (blockElement: (modifier?: string) => string, modifiers:
   return selectorObj;
 };
 
-const directions = ["dir-left", "dir-right", "dir-top", "dir-bottom"];
+const directions = ['dir-left', 'dir-right', 'dir-top', 'dir-bottom'];
 const menuBlock = bem(menuClass);
 const menuSelector = createSelector(menuBlock(), [
-  "state-opening",
-  "state-open",
-  "state-closing",
-  "state-closed",
+  'state-opening',
+  'state-open',
+  'state-closing',
+  'state-closed',
   ...directions,
 ]);
 const menuArrowSelector = createSelector(menuBlock(menuArrowClass), directions);
 const menuItemSelector = createSelector(menuBlock(menuItemClass), [
-  "hover",
-  "disabled",
-  "anchor",
-  "checked",
-  "open",
-  "submenu",
-  "focusable",
-  "type-radio",
-  "type-checkbox",
+  'hover',
+  'disabled',
+  'anchor',
+  'checked',
+  'open',
+  'submenu',
+  'focusable',
+  'type-radio',
+  'type-checkbox',
 ]);
 
 const menuDividerSelector = createSelector(menuBlock(menuDividerClass));
@@ -66,18 +66,18 @@ const menuHeaderSelector = createSelector(menuBlock(menuHeaderClass));
 const menuGroupSelector = createSelector(menuBlock(menuGroupClass));
 const radioGroupSelector = createSelector(menuBlock(radioGroupClass));
 const submenuSelector = createSelector(menuBlock(subMenuClass));
-const menuContainerSelector = createSelector(bem(menuContainerClass)(), ["itemTransition"]);
-const menuButtonSelector = createSelector(bem(menuButtonClass)(), ["open"]);
+const menuContainerSelector = createSelector(bem(menuContainerClass)(), ['itemTransition']);
+const menuButtonSelector = createSelector(bem(menuButtonClass)(), ['open']);
 
 export {
-  menuContainerSelector,
-  menuButtonSelector,
-  menuSelector,
   menuArrowSelector,
-  menuItemSelector,
+  menuButtonSelector,
+  menuContainerSelector,
   menuDividerSelector,
-  menuHeaderSelector,
   menuGroupSelector,
+  menuHeaderSelector,
+  menuItemSelector,
+  menuSelector,
   radioGroupSelector,
   submenuSelector,
 };

package/src/react-menu3/types.ts

@@ -1,29 +1,29 @@
 //
 // base types
 // ----------------------------------------------------------------------
-import { ForwardedRef, MutableRefObject } from "react";
+import { ForwardedRef, MutableRefObject } from 'react';
 
-export type MenuState = "opening" | "open" | "closing" | "closed";
-export type MenuAlign = "start" | "center" | "end";
-export type MenuDirection = "left" | "right" | "top" | "bottom";
-export type MenuPosition = "auto" | "anchor" | "initial";
-export type MenuOverflow = "auto" | "visible" | "hidden";
-export type MenuReposition = "auto" | "initial";
-export type MenuViewScroll = "auto" | "close" | "initial";
-export type MenuItemTypeProp = "checkbox" | "radio";
-export type CloseReason = "click" | "cancel" | "blur" | "scroll";
+export type MenuState = 'opening' | 'open' | 'closing' | 'closed';
+export type MenuAlign = 'start' | 'center' | 'end';
+export type MenuDirection = 'left' | 'right' | 'top' | 'bottom';
+export type MenuPosition = 'auto' | 'anchor' | 'initial';
+export type MenuOverflow = 'auto' | 'visible' | 'hidden';
+export type MenuReposition = 'auto' | 'initial';
+export type MenuViewScroll = 'auto' | 'close' | 'initial';
+export type MenuItemTypeProp = 'checkbox' | 'radio';
+export type CloseReason = 'click' | 'cancel' | 'blur' | 'scroll';
 /**
  * - `'first'` focus the first item in the menu.
  * - `'last'` focus the last item in the menu.
  * - `number` focus item at the specific position (zero-based).
  */
-export type FocusPosition = "first" | "last" | number;
+export type FocusPosition = 'first' | 'last' | number;
 
 export type ClassNameProp<M = undefined> = string | ((modifiers: M) => string);
 
 export type RenderProp<M, R = React.ReactNode> = R | ((modifiers: M) => R);
 
-export interface BaseProps<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, "className" | "children"> {
+export interface BaseProps<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, 'className' | 'children'> {
   ref?: React.Ref<any>;
   /**
    * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
@@ -31,7 +31,7 @@ export interface BaseProps<M = undefined> extends Omit<React.HTMLAttributes<HTML
   className?: ClassNameProp<M>;
 }
 
-export interface BasePropsWithChildren<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, "className"> {
+export interface BasePropsWithChildren<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement>, 'className'> {
   ref?: React.Ref<any>;
   /**
    * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
@@ -157,7 +157,7 @@ export interface Hoverable {
 /**
  * Common props for `Menu`, `SubMenu` and `ControlledMenu`
  */
-interface BaseMenuProps extends Omit<BaseProps, "style"> {
+interface BaseMenuProps extends Omit<BaseProps, 'style'> {
   /**
    * Can be a string or a function which receives a modifier object and returns a CSS `class` string.
    */
@@ -310,7 +310,7 @@ export interface RootMenuProps extends BaseMenuProps, MenuStateOptions {
   /**
    * Properties of this object are spread to the root DOM element containing the menu.
    */
-  containerProps?: Omit<React.HTMLAttributes<HTMLElement>, "className">;
+  containerProps?: Omit<React.HTMLAttributes<HTMLElement>, 'className'>;
   /**
    * A ref object attached to a DOM element within which menu will be positioned.
    * If not provided, the nearest ancestor which has CSS `overflow` set to a value