@linzjs/step-ag-grid 1.4.6 → 1.4.7

package/src/react-menu3/{index.d.ts → types.ts}

@@ -1,9 +1,8 @@
-/* eslint-disable */
-import React = require("react");
-
 //
 // base types
 // ----------------------------------------------------------------------
+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";
@@ -20,11 +19,11 @@ export type CloseReason = "click" | "cancel" | "blur" | "scroll";
  */
 export type FocusPosition = "first" | "last" | number;
 
-type ClassNameProp<M = undefined> = string | ((modifiers: M) => string);
+export type ClassNameProp<M = undefined> = string | ((modifiers: M) => string);
 
-type RenderProp<M, R = React.ReactNode> = R | ((modifiers: M) => R);
+export type RenderProp<M, R = React.ReactNode> = R | ((modifiers: M) => R);
 
-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.
@@ -32,7 +31,7 @@ interface BaseProps<M = undefined> extends Omit<React.HTMLAttributes<HTMLElement
   className?: ClassNameProp<M>;
 }
 
-interface Event {
+export interface Event {
   /**
    * The `value` prop passed to the `MenuItem` being clicked.
    * It's useful for identifying which menu item is clicked.
@@ -51,33 +50,6 @@ export interface MenuCloseEvent extends Event {
   reason: CloseReason;
 }
 
-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;
-}
-
-export interface ClickEvent extends RadioChangeEvent {
-  /**
-   * Indicates if the menu item is checked, only for `MenuItem` type="checkbox".
-   */
-  checked?: boolean;
-}
-
 export interface MenuChangeEvent {
   /**
    * Indicates if the menu is open or closed.
@@ -85,11 +57,11 @@ export interface MenuChangeEvent {
   open: boolean;
 }
 
-interface EventHandler<E> {
+export interface EventHandler<E> {
   (event: E): void;
 }
 
-interface RectElement {
+export interface RectElement {
   getBoundingClientRect(): {
     left: number;
     right: number;
@@ -123,6 +95,14 @@ export type MenuArrowModifiers = Readonly<{
   dir: MenuDirection;
 }>;
 
+export type TransitionFieldType =
+  | boolean
+  | {
+      open?: boolean;
+      close?: boolean;
+      item?: boolean;
+    };
+
 export interface MenuStateOptions {
   /**
    * By default menu isn't mounted into DOM until it's opened for the first time.
@@ -146,13 +126,8 @@ export interface MenuStateOptions {
    *
    * @example [CodeSandbox Demo](https://codesandbox.io/s/react-menu-sass-i1wxo)
    */
-  transition?:
-    | boolean
-    | {
-        open?: boolean;
-        close?: boolean;
-        item?: boolean;
-      };
+  transition?: TransitionFieldType;
+
   /**
    * A fallback timeout in `ms` to stop transition if `onAnimationEnd` events are not fired.
    *
@@ -164,7 +139,7 @@ export interface MenuStateOptions {
   transitionTimeout?: number;
 }
 
-interface Hoverable {
+export interface Hoverable {
   disabled?: boolean;
   index?: number;
 }
@@ -243,10 +218,85 @@ interface BaseMenuProps extends Omit<BaseProps, "style"> {
   children?: React.ReactNode;
 }
 
+//
+// MenuButton
+// ----------------------------------------------------------------------
+export type MenuButtonModifiers = Readonly<{
+  /**
+   * Indicates if the associated menu is open.
+   */
+  open: boolean;
+}>;
+
+export interface MenuInstance {
+  /**
+   * Open menu and optionally request which menu item will be hovered.
+   */
+  openMenu: (position?: FocusPosition, alwaysUpdate?: boolean) => void;
+  /**
+   * Close menu
+   */
+  closeMenu: () => void;
+}
+
+/**
+ * Common props for `Menu` and `SubMenu`
+ */
+export interface UncontrolledMenuProps {
+  /**
+   * Menu component ref which can be used to programmatically open or close menu.
+   */
+  instanceRef?: React.Ref<MenuInstance>;
+  /**
+   * Event fired after menu is open or closed.
+   */
+  onMenuChange?: EventHandler<MenuChangeEvent>;
+}
+
+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;
+}
+
+export interface ClickEvent extends RadioChangeEvent {
+  /**
+   * Indicates if the menu item is checked, only for `MenuItem` type="checkbox".
+   */
+  checked?: boolean;
+}
+
+export type PortalFieldType =
+  | boolean
+  | {
+      /**
+       * A DOM node under which menu will be rendered.
+       */
+      target?: Element | null;
+      /**
+       * When `target` is null, setting this value `true` prevents menu from rendering into the DOM hierarchy of its parent component.
+       */
+      stablePosition?: boolean;
+    };
+
 /**
  * Common props for `Menu` and `ControlledMenu`
  */
-interface RootMenuProps extends BaseMenuProps, MenuStateOptions {
+export interface RootMenuProps extends BaseMenuProps, MenuStateOptions {
   /**
    * Properties of this object are spread to the root DOM element containing the menu.
    */
@@ -280,18 +330,8 @@ interface RootMenuProps extends BaseMenuProps, MenuStateOptions {
    * - You have a DOM structure that creates a complex hierarchy of stacking contexts,
    * and menu is overlapped regardless of `z-index` value.
    */
-  portal?:
-    | boolean
-    | {
-        /**
-         * A DOM node under which menu will be rendered.
-         */
-        target?: Element | null;
-        /**
-         * When `target` is null, setting this value `true` prevents menu from rendering into the DOM hierarchy of its parent component.
-         */
-        stablePosition?: boolean;
-      };
+  portal?: PortalFieldType;
+
   /**
    * Specify when menu is repositioned:
    * - 'initial' Don't automatically reposition menu. Set to this value when you want
@@ -331,70 +371,18 @@ interface RootMenuProps extends BaseMenuProps, MenuStateOptions {
   onItemClick?: EventHandler<ClickEvent>;
 }
 
-export interface MenuInstance {
-  /**
-   * Open menu and optionally request which menu item will be hovered.
-   */
-  openMenu: (position?: FocusPosition, alwaysUpdate?: boolean) => void;
-  /**
-   * Close menu
-   */
-  closeMenu: () => void;
-}
-
-/**
- * Common props for `Menu` and `SubMenu`
- */
-interface UncontrolledMenuProps {
-  /**
-   * Menu component ref which can be used to programmatically open or close menu.
-   */
-  instanceRef?: React.Ref<MenuInstance>;
-  /**
-   * Event fired after menu is open or closed.
-   */
-  onMenuChange?: EventHandler<MenuChangeEvent>;
+export interface ExtraMenuProps {
+  isDisabled?: boolean;
+  ariaLabel?: string;
+  containerRef?: MutableRefObject<HTMLElement | undefined>;
+  externalRef?: ForwardedRef<HTMLUListElement>;
+  parentScrollingRef?: MutableRefObject<any>;
 }
 
-//
-// MenuButton
-// ----------------------------------------------------------------------
-export type MenuButtonModifiers = Readonly<{
-  /**
-   * Indicates if the associated menu is open.
-   */
-  open: boolean;
-}>;
-
-export interface MenuButtonProps extends BaseProps<MenuButtonModifiers> {
-  disabled?: boolean;
-  children?: React.ReactNode;
-}
-
-export const MenuButton: React.NamedExoticComponent<MenuButtonProps>;
-
-//
-// Menu
-// ----------------------------------------------------------------------
-export interface MenuProps extends RootMenuProps, UncontrolledMenuProps {
-  /**
-   * Can be a `MenuButton`, a `button` element, or a React component.
-   * It also can be a render function that returns one.
-   *
-   * If a React component is provided, it needs to implement the following contracts:
-   * - Accepts a `ref` prop that is forwarded to an element to which menu will be positioned.
-   * The element should be able to receive focus.
-   * - Accepts `onClick` and `onKeyDown` event props.
-   */
-  menuButton: RenderProp<MenuButtonModifiers, React.ReactElement>;
-}
-
-export const Menu: React.NamedExoticComponent<MenuProps>;
-
 //
 // ControlledMenu
 // ----------------------------------------------------------------------
-export interface ControlledMenuProps extends RootMenuProps {
+export interface ControlledMenuProps extends RootMenuProps, ExtraMenuProps {
   /**
    * Viewport coordinates to which context menu will be positioned.
    *
@@ -409,8 +397,8 @@ export interface ControlledMenuProps extends RootMenuProps {
    *
    * *Don't set this prop for context menu*
    */
-  anchorRef?: React.RefObject<Element | RectElement>;
-  skipOpen?: React.RefObject<boolean>;
+  anchorRef?: React.MutableRefObject<HTMLElement>;
+  skipOpen?: React.MutableRefObject<boolean>;
   /**
    * If `true`, the menu list element will gain focus after menu is open.
    * @default true
@@ -440,244 +428,3 @@ export interface ControlledMenuProps extends RootMenuProps {
    */
   onClose?: EventHandler<MenuCloseEvent>;
 }
-
-export const ControlledMenu: React.NamedExoticComponent<ControlledMenuProps>;
-
-//
-// SubMenu
-// ----------------------------------------------------------------------
-export type SubMenuItemModifiers = Readonly<{
-  /**
-   * Indicates if the submenu is open.
-   */
-  open: boolean;
-  /**
-   * Indicates if the submenu item is being hovered and has focus.
-   */
-  hover: boolean;
-  /**
-   * Indicates if the submenu and item are disabled.
-   */
-  disabled: boolean;
-}>;
-
-export interface SubMenuProps extends BaseMenuProps, Hoverable, UncontrolledMenuProps {
-  /**
-   * Properties of this object are spread to the submenu item DOM element.
-   */
-  itemProps?: BaseProps<SubMenuItemModifiers>;
-  /**
-   * The submenu `label` can be a `string` or JSX element, or a render function that returns one.
-   */
-  label?: RenderProp<SubMenuItemModifiers>;
-  /**
-   * - `undefined` submenu opens when the label item is hovered or clicked. This is the default behaviour.
-   * - 'clickOnly' submenu opens when the label item is clicked.
-   * - 'none' submenu doesn't open with mouse or keyboard events;
-   * you can call the `openMenu` function on `instanceRef` to open submenu programmatically.
-   */
-  openTrigger?: "none" | "clickOnly";
-}
-
-export const SubMenu: React.NamedExoticComponent<SubMenuProps>;
-
-//
-// MenuItem
-// ----------------------------------------------------------------------
-export type MenuItemModifiers = Readonly<{
-  /**
-   * 'radio' for radio item, 'checkbox' for checkbox item, or `undefined` for other items.
-   */
-  type?: MenuItemTypeProp;
-  /**
-   * Indicates if the menu item is disabled.
-   */
-  disabled: boolean;
-  /**
-   * Indicates if the menu item is being hovered and has focus.
-   */
-  hover: boolean;
-  /**
-   * Indicates if the menu item is checked when it's a radio or checkbox item.
-   */
-  checked: boolean;
-  /**
-   * Indicates if the menu item has a URL link.
-   */
-  anchor: boolean;
-}>;
-
-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.
-   *
-   * It's useful for helping identify which menu item is clicked when you
-   * listen on `onItemClick` event on root menu component.
-   */
-  value?: any;
-  /**
-   * If provided, menu item renders an HTML `<a>` element with this `href` attribute.
-   */
-  href?: string;
-  rel?: string;
-  target?: string;
-  /**
-   * Set this prop to make the item a checkbox or radio menu item.
-   */
-  type?: MenuItemTypeProp;
-  /**
-   * Set `true` if a checkbox menu item is checked.
-   *
-   * *Please note radio menu item doesn't use this prop.*
-   */
-  checked?: boolean;
-  /**
-   * Event fired when the menu item is clicked.
-   */
-  onClick?: EventHandler<ClickEvent>;
-  /**
-   * Any valid React node or a render function that returns one.
-   */
-  children?: RenderProp<MenuItemModifiers>;
-}
-
-export const MenuItem: React.NamedExoticComponent<MenuItemProps>;
-
-//
-// FocusableItem
-// ----------------------------------------------------------------------
-export type FocusableItemModifiers = Readonly<{
-  /**
-   * Indicates if the focusable item is disabled.
-   */
-  disabled: boolean;
-  /**
-   * Indicates if the focusable item is being hovered.
-   */
-  hover: boolean;
-  /**
-   * Always `true` for a focusable item.
-   */
-  focusable: true;
-}>;
-
-export interface FocusableItemProps extends BaseProps<FocusableItemModifiers>, Hoverable {
-  /**
-   * A render function that returns a React node.
-   */
-  children: (modifiers: {
-    /**
-     * Indicates if the focusable item is disabled.
-     */
-    disabled: boolean;
-    /**
-     * Indicates if the focusable item is being hovered.
-     */
-    hover: boolean;
-    /**
-     * A ref to be attached to the element which should receive focus when this focusable item is hovered.
-     *
-     * If you render a React component, it needs to expose a `focus` method or implement ref forwarding.
-     */
-    ref: React.RefObject<any>;
-    /**
-     * A function that requests to close the root menu.
-     * @param {string} key Indicate which key initiates the close request.
-     */
-    closeMenu: (key?: string) => void;
-  }) => React.ReactNode;
-}
-
-/**
- * A component to wrap focusable element (input, button) in a menu item.
- * It manages focus automatically among other menu items during mouse and keyboard interactions.
- *
- * @example https://szhsin.github.io/react-menu/#focusable-item
- */
-export const FocusableItem: React.NamedExoticComponent<FocusableItemProps>;
-
-//
-// MenuDivider
-// ----------------------------------------------------------------------
-export const MenuDivider: React.NamedExoticComponent<BaseProps>;
-
-//
-// MenuHeader
-// ----------------------------------------------------------------------
-export interface MenuHeaderProps extends BaseProps {
-  children?: React.ReactNode;
-}
-
-export const MenuHeader: React.NamedExoticComponent<MenuHeaderProps>;
-
-//
-// MenuGroup
-// ----------------------------------------------------------------------
-export interface MenuGroupProps extends BaseProps {
-  children?: React.ReactNode;
-  /**
-   * Set `true` to apply overflow of the parent menu to the group.
-   * Only one `MenuGroup` in a menu should set this prop as `true`.
-   */
-  takeOverflow?: boolean;
-}
-
-/**
- * A component to wrap a subset related menu items and make them scrollable.
- *
- * @example https://szhsin.github.io/react-menu/#menu-overflow
- */
-export const MenuGroup: React.NamedExoticComponent<MenuGroupProps>;
-
-//
-// MenuRadioGroup
-// ----------------------------------------------------------------------
-export interface MenuRadioGroupProps extends BaseProps {
-  /**
-   * Optionally set the radio group name.
-   *
-   * The name will be passed to the `onRadioChange` event.
-   * It's useful for identifying radio groups if you attach the same event handler to multiple groups.
-   */
-  name?: string;
-  /**
-   * Set value of the radio group.
-   *
-   * The child menu item which has the same value (strict equality ===) as the
-   * radio group is marked as checked.
-   */
-  value?: any;
-  children?: React.ReactNode;
-  /**
-   * Event fired when a child menu item is clicked (selected).
-   */
-  onRadioChange?: EventHandler<RadioChangeEvent>;
-}
-
-export const MenuRadioGroup: React.NamedExoticComponent<MenuRadioGroupProps>;
-
-/**
- * A custom Hook which helps manage the states of `ControlledMenu`.
- */
-export function useMenuState(options?: MenuStateOptions): [
-  {
-    /**
-     * Menu state which should be forwarded to `ControlledMenu`.
-     */
-    state?: MenuState;
-    /**
-     * Stop transition animation. This function value should be forwarded to `ControlledMenu`.
-     */
-    endTransition: () => void;
-  },
-
-  /**
-   * Open or close menu.
-   *
-   * - If no parameter is supplied, this function will toggle state between open and close phases.
-   * - You can set a boolean parameter to explicitly switch into one of the two phases.
-   */
-  (open?: boolean) => void,
-];
-
-export {};

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

@@ -1,7 +1,17 @@
-import { createContext, MutableRefObject } from "react";
-import { EventHandler, FocusPosition, MenuDirection, MenuOverflow, MenuState } from "../index";
+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 { ControlledMenuProps } from "../components/MenuList";
 
 export const menuContainerClass = "szh-menu-container";
 export const menuClass = "szh-menu";
@@ -59,10 +69,19 @@ export const RadioGroupContext = createContext<{
   onRadioChange?: EventHandler<RadioChangeEvent>;
 }>({});
 
-interface SettingsContextType extends ControlledMenuProps, MenuListItemContextType {
+interface SettingsContextType extends ControlledMenuProps {
   rootMenuRef?: MutableRefObject<any>;
   rootAnchorRef?: MutableRefObject<any>;
-  scrollNodesRef: MutableRefObject<{ anchors?: Element[]; menu: 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

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

@@ -1,4 +1,4 @@
 export * from "./constants";
 export * from "./utils";
-export * from "./propTypes";
+
 export { withHovering } from "./withHovering";

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

@@ -1,5 +1,5 @@
 import { unstable_batchedUpdates } from "react-dom";
-import { MenuState, MenuStateOptions } from "../index";
+import { MenuState, MenuStateOptions } from "../types";
 import { MenuButtonProps } from "../components/MenuButton";
 import { findIndex } from "lodash-es";
 
@@ -32,7 +32,7 @@ export const defineName = (
   component: React.ForwardRefExoticComponent<React.PropsWithoutRef<MenuButtonProps> & React.RefAttributes<unknown>>,
 ) => Object.defineProperty(component, internalKey, { value: name });
 
-export const mergeProps = (target: Record<string, any>, source: Record<string, any>) => {
+export const mergeProps = (target: any, source: any) => {
   source &&
     Object.keys(source).forEach((key) => {
       const targetProp = target[key];

package/src/stories/components/GridReadOnly.stories.tsx

@@ -8,7 +8,6 @@ import { GridContextProvider } from "@contexts/GridContextProvider";
 import { Grid, GridProps } from "@components/Grid";
 import { useMemo, useState } from "react";
 import { wait } from "@utils/util";
-import { ICellRendererParams } from "ag-grid-community";
 import { GridPopoverMenu } from "@components/gridPopoverEdit/GridPopoverMenu";
 import { GridPopoverMessage } from "@components/gridPopoverEdit/GridPopoverMessage";
 import { GridCell } from "@components/GridCell";
@@ -51,14 +50,14 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         initialWidth: 65,
         maxWidth: 85,
       }),
-      GridCell({
+      GridCell<ITestRow, any>({
         field: "position",
         headerName: "Position",
         initialWidth: 65,
         maxWidth: 150,
         cellRendererParams: {
-          warning: (props: ICellRendererParams) => props.value === "Tester" && "Testers are testing",
-          info: (props: ICellRendererParams) => props.value === "Developer" && "Developers are awesome",
+          warning: (props) => props.value === "Tester" && "Testers are testing",
+          info: (props) => props.value === "Developer" && "Developers are awesome",
         },
       }),
       GridCell({