@linzjs/step-ag-grid 1.5.4 → 2.0.1

package/src/react-menu3/README.md

@@ -0,0 +1,66 @@
+# React-Menu
+
+> This is a fork of @szhsin/react-menu. v3.2.0
+
+> An accessible and keyboard-friendly React menu library.
+
+**[Live examples and docs](https://szhsin.github.io/react-menu/)**
+
+## Features
+
+- React menu components for easy and fast web development.
+- Unlimited levels of submenu.
+- Supports dropdown or context menu.
+- Supports radio and checkbox menu items.
+- Flexible menu positioning.
+- Comprehensive keyboard interactions.
+- Unstyled components and easy [customisation](https://szhsin.github.io/react-menu/#styling).
+- [Optimal level support](https://github.com/reactwg/react-18/discussions/70) (level 3) of **React 18** concurrent rendering.
+- Works in major browsers without polyfills.
+- [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/menu/) compliant.
+
+## Install
+
+with npm
+
+```bash
+npm install @szhsin/react-menu
+```
+
+or with Yarn
+
+```bash
+yarn add @szhsin/react-menu
+```
+
+## Usage
+
+```jsx
+import { Menu, MenuItem, MenuButton, SubMenu } from "@szhsin/react-menu";
+
+export default function App() {
+  return (
+    <Menu menuButton={<MenuButton>Open menu</MenuButton>}>
+      <MenuItem>New File</MenuItem>
+      <MenuItem>Save</MenuItem>
+      <SubMenu label="Edit">
+        <MenuItem>Cut</MenuItem>
+        <MenuItem>Copy</MenuItem>
+        <MenuItem>Paste</MenuItem>
+      </SubMenu>
+      <MenuItem>Print...</MenuItem>
+    </Menu>
+  );
+}
+```
+
+**[Edit on CodeSandbox](https://codesandbox.io/s/react-menu-starter-3ez3c)**<br>  
+**[Visit more examples and docs](https://szhsin.github.io/react-menu/)**<br><br>
+[Migration from v2 to v3](https://github.com/szhsin/react-menu/wiki/Migration-from-v2-to-v3)<br>
+[Migration from v1 to v2](https://github.com/szhsin/react-menu/wiki/Migration-from-v1-to-v2)
+
+_Please note that React-Menu v3 requires React 16.14.0 or higher. If you are not able to upgrade React, you could install v2/v1 which requires React 16.8.0._
+
+## License
+
+[MIT](https://github.com/szhsin/react-menu/blob/master/LICENSE) Licensed.

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

@@ -12,20 +12,12 @@ import {
 import { createPortal } from "react-dom";
 import { MenuList } from "./MenuList";
 import { useBEM } from "../hooks";
-import {
-  menuContainerClass,
-  mergeProps,
-  safeCall,
-  isMenuOpen,
-  getTransition,
-  CloseReason,
-  Keys,
-  EventHandlersContext,
-  SettingsContext,
-  ItemSettingsContext,
-} from "../utils";
+import { menuContainerClass, mergeProps, safeCall, isMenuOpen, getTransition, CloseReason, Keys } from "../utils";
 import { hasParentClass } from "@utils/util";
 import { ControlledMenuProps, PortalFieldType, RadioChangeEvent } from "../types";
+import { ItemSettingsContext } from "../contexts/ItemSettingsContext";
+import { SettingsContext } from "../contexts/SettingsContext";
+import { EventHandlersContext, EventHandlersContextType } from "../contexts/EventHandlersContext";
 
 export const ControlledMenuFr = (
   {
@@ -128,13 +120,13 @@ export const ControlledMenuFr = (
   useEffect(() => {
     if (isMenuOpen(state)) {
       const thisDocument = anchorRef?.current ? anchorRef?.current.ownerDocument : document;
-      thisDocument.addEventListener("mousedown", handleScreenEventForCancel, true);
-      thisDocument.addEventListener("mouseup", handleScreenEventForSave, true);
+      thisDocument.addEventListener("mousedown", handleScreenEventForSave, true);
+      thisDocument.addEventListener("mouseup", handleScreenEventForCancel, true);
       thisDocument.addEventListener("click", handleScreenEventForCancel, true);
       thisDocument.addEventListener("dblclick", handleScreenEventForCancel, true);
       return () => {
-        thisDocument.removeEventListener("mousedown", handleScreenEventForCancel, true);
-        thisDocument.removeEventListener("mouseup", handleScreenEventForSave, true);
+        thisDocument.removeEventListener("mousedown", handleScreenEventForSave, true);
+        thisDocument.removeEventListener("mouseup", handleScreenEventForCancel, true);
         thisDocument.removeEventListener("click", handleScreenEventForCancel, true);
         thisDocument.removeEventListener("dblclick", handleScreenEventForCancel, true);
       };
@@ -151,7 +143,7 @@ export const ControlledMenuFr = (
   );
 
   const eventHandlers = useMemo(
-    () => ({
+    (): EventHandlersContextType => ({
       handleClick(event: RadioChangeEvent, isCheckOrRadio: boolean) {
         if (!event.stopPropagation) safeCall(onItemClick, event);
 

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

@@ -1,16 +1,9 @@
 import { LegacyRef, useContext, useMemo, useRef } from "react";
 import { useBEM, useCombinedRef, useItemState } from "../hooks";
-import {
-  mergeProps,
-  commonProps,
-  safeCall,
-  menuClass,
-  menuItemClass,
-  withHovering,
-  EventHandlersContext,
-} from "../utils";
+import { mergeProps, commonProps, safeCall, menuClass, menuItemClass, withHovering } from "../utils";
 import { BaseProps } from "../types";
 import { withHoveringResultProps } from "../utils/withHovering";
+import { EventHandlersContext } from "../contexts/EventHandlersContext";
 
 export interface FocusableItemProps extends BaseProps, withHoveringResultProps {
   disabled?: boolean;

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

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

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

@@ -1,19 +1,10 @@
 import { Ref, useContext, useMemo } from "react";
 import { useBEM, useItemState, useCombinedRef } from "../hooks";
-import {
-  mergeProps,
-  commonProps,
-  safeCall,
-  menuClass,
-  menuItemClass,
-  withHovering,
-  EventHandlersContext,
-  RadioGroupContext,
-  Keys,
-  RMEvent,
-} from "../utils";
+import { mergeProps, commonProps, safeCall, menuClass, menuItemClass, withHovering, Keys, RMEvent } from "../utils";
 import { BaseProps, ClickEvent, EventHandler, Hoverable, MenuItemTypeProp, RenderProp } from "../types";
 import { withHoveringResultProps } from "../utils/withHovering";
+import { EventHandlersContext } from "../contexts/EventHandlersContext";
+import { RadioGroupContext } from "../contexts/RadioGroupContext";
 
 //
 // MenuItem

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

@@ -17,12 +17,12 @@ import {
   Keys,
   FocusPositions,
   HoverActionTypes,
-  SettingsContext,
-  MenuListContext,
-  MenuListItemContext,
-  HoverItemContext,
 } from "../utils";
 import { ControlledMenuProps, MenuDirection } from "../types";
+import { MenuListItemContext } from "../contexts/MenuListItemContext";
+import { HoverItemContext } from "../contexts/HoverItemContext";
+import { MenuListContext } from "../contexts/MenuListContext";
+import { SettingsContext } from "../contexts/SettingsContext";
 
 export const MenuList = ({
   ariaLabel,

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

@@ -1,27 +1,8 @@
 import { ForwardedRef, forwardRef, ReactNode, useMemo } from "react";
 import { useBEM } from "../hooks";
-import { menuClass, radioGroupClass, RadioGroupContext } from "../utils";
-import { BaseProps, Event, EventHandler } from "../types";
-
-export interface RadioChangeEvent extends Event {
-  /**
-   * The `name` prop passed to the `MenuRadioGroup` when the menu item is in a radio group.
-   */
-  name?: string;
-  /**
-   * Set this property on event object to control whether to keep menu open after menu item is activated.
-   * Leaving it `undefined` will behave in accordance with WAI-ARIA Authoring Practices.
-   */
-  keepOpen?: boolean;
-  /**
-   * Setting this property on event object to `true` will skip `onItemClick` event on root menu component.
-   */
-  stopPropagation?: boolean;
-  /**
-   * DOM event object (React synthetic event)
-   */
-  syntheticEvent: MouseEvent | KeyboardEvent;
-}
+import { menuClass, radioGroupClass } from "../utils";
+import { BaseProps, EventHandler, RadioChangeEvent } from "../types";
+import { RadioGroupContext } from "../contexts/RadioGroupContext";
 
 //
 // MenuRadioGroup

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

@@ -21,10 +21,6 @@ import {
   menuItemClass,
   isMenuOpen,
   withHovering,
-  SettingsContext,
-  ItemSettingsContext,
-  MenuListContext,
-  MenuListItemContext,
   Keys,
   HoverActionTypes,
   FocusPositions,
@@ -43,6 +39,10 @@ import {
   UncontrolledMenuProps,
 } from "../types";
 import { withHoveringResultProps } from "../utils/withHovering";
+import { MenuListItemContext } from "../contexts/MenuListItemContext";
+import { MenuListContext } from "../contexts/MenuListContext";
+import { SettingsContext } from "../contexts/SettingsContext";
+import { ItemSettingsContext } from "../contexts/ItemSettingsContext";
 
 //
 // SubMenu

package/src/react-menu3/contexts/EventHandlersContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+import { RMEvent } from "../utils";
+
+export interface EventHandlersContextType {
+  handleClose?: () => void;
+  handleClick: (event: RMEvent, checked: boolean) => void;
+}
+
+export const EventHandlersContext = createContext<EventHandlersContextType>({
+  handleClick: () => {},
+});

package/src/react-menu3/contexts/HoverItemContext.ts

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const HoverItemContext = createContext(undefined);

package/src/react-menu3/contexts/ItemSettingsContext.ts

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+
+export const ItemSettingsContext = createContext<{ submenuCloseDelay: number; submenuOpenDelay: number }>({
+  submenuOpenDelay: 0,
+  submenuCloseDelay: 0,
+});

package/src/react-menu3/contexts/MenuListContext.ts

@@ -0,0 +1,10 @@
+import { createContext, MutableRefObject } from "react";
+import { MenuDirection, MenuOverflow } from "../types";
+
+export const MenuListContext = createContext<{
+  overflow?: MenuOverflow;
+  overflowAmt?: number;
+  parentMenuRef?: MutableRefObject<any>;
+  parentDir?: MenuDirection;
+  reposSubmenu?: boolean;
+}>({});

package/src/react-menu3/contexts/MenuListItemContext.ts

@@ -0,0 +1,16 @@
+import { FocusPosition } from "../types";
+import { createContext } from "react";
+
+interface MenuListItemContextType {
+  isParentOpen?: boolean;
+  isSubmenuOpen?: boolean;
+  dispatch: (actionType: number, item: any, nextIndex: FocusPosition) => void;
+  updateItems: (item: any, isMounted?: boolean) => void;
+  setOpenSubmenuCount: (fn: (count: number) => number) => void;
+}
+
+export const MenuListItemContext = createContext<MenuListItemContextType>({
+  dispatch: () => {},
+  updateItems: () => {},
+  setOpenSubmenuCount: () => 0,
+});

package/src/react-menu3/contexts/RadioGroupContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+import { EventHandler, RadioChangeEvent } from "../types";
+
+export const RadioGroupContext = createContext<{
+  value?: any;
+  name?: string;
+  onRadioChange?: EventHandler<RadioChangeEvent>;
+}>({});

package/src/react-menu3/contexts/SettingsContext.ts

@@ -0,0 +1,20 @@
+// FIXME hacking a default context in here is probably bad
+import { createContext, MutableRefObject, RefObject } from "react";
+import { ControlledMenuProps, MenuReposition, MenuViewScroll, RectElement, TransitionFieldType } from "../types";
+
+interface SettingsContextType extends ControlledMenuProps {
+  rootMenuRef?: MutableRefObject<any>;
+  rootAnchorRef?: MutableRefObject<any>;
+  scrollNodesRef: MutableRefObject<{ anchors?: Element[]; menu?: any }>;
+
+  initialMounted?: boolean;
+  unmountOnClose?: boolean;
+  transition?: TransitionFieldType;
+  transitionTimeout?: number;
+  boundingBoxRef?: RefObject<Element | RectElement>;
+  boundingBoxPadding?: string;
+  reposition?: MenuReposition;
+  viewScroll?: MenuViewScroll;
+}
+
+export const SettingsContext = createContext<SettingsContextType>({} as SettingsContextType);

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

@@ -1,6 +1,8 @@
 import { useRef, useContext, useEffect, FocusEvent, MutableRefObject } from "react";
-import { ItemSettingsContext, MenuListItemContext, HoverActionTypes } from "../utils";
+import { HoverActionTypes } from "../utils";
 import { useItemEffect } from "./useItemEffect";
+import { MenuListItemContext } from "../contexts/MenuListItemContext";
+import { ItemSettingsContext } from "../contexts/ItemSettingsContext";
 
 // This hook includes some common stateful logic in MenuItem and FocusableItem
 export const useItemState = (

package/src/react-menu3/index.ts

@@ -9,4 +9,3 @@ export { MenuDivider } from "./components/MenuDivider";
 export { MenuHeader } from "./components/MenuHeader";
 export { MenuGroup } from "./components/MenuGroup";
 export { MenuRadioGroup } from "./components/MenuRadioGroup";
-export { ClickEvent } from "./types";

package/src/react-menu3/styles/_var.scss

@@ -1,4 +1,4 @@
-@use 'sass:math';
+@use "sass:math";
 
 $color: #212529;
 $color-dark: #cad1d8;
@@ -6,9 +6,9 @@ $color-disabled: #aaa;
 $color-disabled-dark: #666;
 
 $header-color: #888;
-$divider-color: rgba(0, 0, 0, 0.12);
+$divider-color: rgb(0 0 0 / 12%);
 $divider-color-dark: #3a3a3a;
-$border-color: rgba(0, 0, 0, 0.1);
+$border-color: rgb(0 0 0 / 10%);
 $border-color-dark: #333;
 
 $background-color: #fff;
@@ -17,4 +17,4 @@ $background-color-hover: #ebebeb;
 $background-color-hover-dark: #31363c;
 
 $arrow-size: 0.75rem;
-$arrow-pos: -(math.div($arrow-size, 2));
+$arrow-pos: (math.div($arrow-size, 2));

package/src/react-menu3/styles/core.scss

@@ -1,9 +1,9 @@
-@use 'var';
-@use 'mixins';
+@use "var";
+@use "mixins";
 
 .szh-menu {
-  @include mixins.reset-list;
-  @include mixins.remove-focus;
+  @include mixins.reset-list ();
+  @include mixins.remove-focus ();
   box-sizing: border-box;
   width: max-content;
   z-index: 100;
@@ -42,7 +42,7 @@
   }
 
   &__item {
-    @include mixins.remove-focus;
+    @include mixins.remove-focus ();
     cursor: pointer;
 
     &--hover {
@@ -65,7 +65,7 @@
   }
 
   &__radio-group {
-    @include mixins.reset-list;
+    @include mixins.reset-list ();
   }
 
   &__divider {

package/src/react-menu3/styles/index.scss

@@ -1,12 +1,12 @@
-@use 'var';
-@use 'core';
+@use "var";
+@use "core";
 
 .szh-menu {
   user-select: none;
   color: var.$color;
   border: none;
   border-radius: 0.25rem;
-  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.133), 0 0.6px 2px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 3px 7px rgb(0 0 0 / 13.3%), 0 0.6px 2px rgb(0 0 0 / 10%);
   min-width: 10rem;
   padding: 0.5rem 0;
 
@@ -26,8 +26,9 @@
 
     &--type-radio {
       padding-left: 2.2rem;
+
       &::before {
-        content: '\25cb';
+        content: "\25cb";
         position: absolute;
         left: 0.8rem;
         top: 0.55rem;
@@ -36,11 +37,12 @@
     }
 
     &--type-radio#{&}--checked::before {
-      content: '\25cf';
+      content: "\25cf";
     }
 
     &--type-checkbox {
       padding-left: 2.2rem;
+
       &::before {
         position: absolute;
         left: 0.8rem;
@@ -48,14 +50,15 @@
     }
 
     &--type-checkbox#{&}--checked::before {
-      content: '\2714';
+      content: "\2714";
     }
   }
 
   &__submenu > .szh-menu__item {
     padding-right: 2.5rem;
+
     &::after {
-      content: '\276f';
+      content: "\276f";
       position: absolute;
       right: 1rem;
     }

package/src/react-menu3/styles/theme-dark.scss

@@ -1,10 +1,10 @@
-@use 'var';
+@use "var";
 
 .szh-menu-container--theme-dark .szh-menu {
   color: var.$color-dark;
   background-color: var.$background-color-dark;
   border: 1px solid var.$border-color-dark;
-  box-shadow: 0 2px 9px 3px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 2px 9px 3px rgb(0 0 0 / 25%);
 
   &__arrow {
     background-color: var.$background-color-dark;
@@ -16,9 +16,11 @@
     &--hover {
       background-color: var.$background-color-hover-dark;
     }
+
     &--focusable {
       background-color: inherit;
     }
+
     &--disabled {
       color: var.$color-disabled-dark;
     }

package/src/react-menu3/styles/transitions/slide.scss

@@ -1,13 +1,13 @@
-@use 'sass:list';
-@use 'sass:map';
+@use "sass:list";
+@use "sass:map";
 
-$menu: 'szh-menu';
+$menu: "szh-menu";
 $duration: 0.15s;
 $directions: (
-  'left': 'X' 1,
-  'right': 'X' -1,
-  'top': 'Y' 1,
-  'bottom': 'Y' -1
+  "left": "X" 1,
+  "right": "X" -1,
+  "top": "Y" 1,
+  "bottom": "Y" -1,
 );
 
 @mixin animation($name, $dir) {
@@ -43,5 +43,5 @@ $directions: (
 }
 
 @each $dir in map.keys($directions) {
-  @include animation('slide', $dir);
+  @include animation("slide", $dir);
 }

package/src/react-menu3/utils/constants.ts

@@ -1,17 +1,4 @@
-import { createContext, MutableRefObject, RefObject } from "react";
-import {
-  ControlledMenuProps,
-  EventHandler,
-  FocusPosition,
-  MenuDirection,
-  MenuOverflow,
-  MenuReposition,
-  MenuState,
-  MenuViewScroll,
-  RectElement,
-  TransitionFieldType,
-} from "../types";
-import { RadioChangeEvent } from "../components/MenuRadioGroup";
+import { MenuState } from "../types";
 
 export const menuContainerClass = "szh-menu-container";
 export const menuClass = "szh-menu";
@@ -24,30 +11,6 @@ export const menuGroupClass = "group";
 export const subMenuClass = "submenu";
 export const radioGroupClass = "radio-group";
 
-export const HoverItemContext = createContext(undefined);
-
-interface MenuListItemContextType {
-  isParentOpen?: boolean;
-  isSubmenuOpen?: boolean;
-  dispatch: (actionType: number, item: any, nextIndex: FocusPosition) => void;
-  updateItems: (item: any, isMounted?: boolean) => void;
-  setOpenSubmenuCount: (fn: (count: number) => number) => void;
-}
-
-export const MenuListItemContext = createContext<MenuListItemContextType>({
-  dispatch: () => {},
-  updateItems: () => {},
-  setOpenSubmenuCount: () => 0,
-});
-
-export const MenuListContext = createContext<{
-  overflow?: MenuOverflow;
-  overflowAmt?: number;
-  parentMenuRef?: MutableRefObject<any>;
-  parentDir?: MenuDirection;
-  reposSubmenu?: boolean;
-}>({});
-
 export interface RMEvent {
   value: any;
   syntheticEvent: any;
@@ -56,42 +19,6 @@ export interface RMEvent {
   key?: string;
 }
 
-export const EventHandlersContext = createContext<{
-  handleClose?: () => void;
-  handleClick: (event: RMEvent, checked: boolean) => void;
-}>({
-  handleClick: () => {},
-});
-
-export const RadioGroupContext = createContext<{
-  value?: any;
-  name?: string;
-  onRadioChange?: EventHandler<RadioChangeEvent>;
-}>({});
-
-interface SettingsContextType extends ControlledMenuProps {
-  rootMenuRef?: MutableRefObject<any>;
-  rootAnchorRef?: MutableRefObject<any>;
-  scrollNodesRef: MutableRefObject<{ anchors?: Element[]; menu?: any }>;
-
-  initialMounted?: boolean;
-  unmountOnClose?: boolean;
-  transition?: TransitionFieldType;
-  transitionTimeout?: number;
-  boundingBoxRef?: RefObject<Element | RectElement>;
-  boundingBoxPadding?: string;
-  reposition?: MenuReposition;
-  viewScroll?: MenuViewScroll;
-}
-
-// FIXME hacking a default context in here is probably bad
-export const SettingsContext = createContext<SettingsContextType>({} as SettingsContextType);
-
-export const ItemSettingsContext = createContext<{ submenuCloseDelay: number; submenuOpenDelay: number }>({
-  submenuOpenDelay: 0,
-  submenuCloseDelay: 0,
-});
-
 export const Keys = Object.freeze({
   ENTER: "Enter",
   ESC: "Escape",

package/src/react-menu3/utils/withHovering.tsx

@@ -1,5 +1,5 @@
 import { memo, forwardRef, useContext, useRef, MutableRefObject } from "react";
-import { HoverItemContext } from "./constants";
+import { HoverItemContext } from "../contexts/HoverItemContext";
 
 export interface withHoveringResultProps {
   isHovering?: boolean;

package/src/stories/components/FormTest.scss

@@ -1,4 +1,3 @@
-
 .FormTest {
   display: inline-flex;
   flex-wrap: nowrap;
@@ -7,4 +6,4 @@
 
 .FormTest-textInput {
   width: 100px;
-}
+}

package/src/stories/components/FormTest.tsx

@@ -3,7 +3,7 @@ import "./FormTest.scss";
 import { useCallback, useState } from "react";
 import { LuiTextInput } from "@linzjs/lui";
 import { wait } from "@utils/util";
-import { GridFormProps } from "@components/GridCell";
+import { CellEditorCommon, CellParams } from "@components/GridCell";
 import { useGridPopoverHook } from "@components/GridPopoverHook";
 import { GridBaseRow } from "@components/Grid";
 
@@ -16,7 +16,8 @@ export interface IFormTestRow {
   distance: number | null;
 }
 
-export const FormTest = <RowType extends GridBaseRow>(props: GridFormProps<RowType>): JSX.Element => {
+export const FormTest = <RowType extends GridBaseRow>(_props: CellEditorCommon): JSX.Element => {
+  const props = _props as CellParams<RowType>;
   const [v1, v2, ...v3] = props.value.split(" ");
 
   const [nameType, setNameType] = useState(v1);
@@ -34,7 +35,7 @@ export const FormTest = <RowType extends GridBaseRow>(props: GridFormProps<RowTy
     // Close form
     return true;
   }, [nameType, numba, plan, props.selectedRows]);
-  const { popoverWrapper } = useGridPopoverHook(props, save);
+  const { popoverWrapper } = useGridPopoverHook({ className: _props.className, save });
 
   return popoverWrapper(
     <div style={{ display: "flex", flexDirection: "row" }} className={"FormTest Grid-popoverContainer"}>