@linzjs/step-ag-grid 1.4.5 → 1.4.7

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

@@ -1,8 +1,8 @@
-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";
@@ -19,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.
@@ -31,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.
@@ -50,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.
@@ -84,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;
@@ -122,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.
@@ -145,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.
    *
@@ -163,7 +139,7 @@ export interface MenuStateOptions {
   transitionTimeout?: number;
 }
 
-interface Hoverable {
+export interface Hoverable {
   disabled?: boolean;
   index?: number;
 }
@@ -242,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.
    */
@@ -279,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
@@ -330,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.
    *
@@ -408,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
@@ -439,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,5 +1,17 @@
-// @ts-nocheck
-import { createContext } from "react";
+import { createContext, MutableRefObject, RefObject } from "react";
+import {
+  ControlledMenuProps,
+  EventHandler,
+  FocusPosition,
+  MenuDirection,
+  MenuOverflow,
+  MenuReposition,
+  MenuState,
+  MenuViewScroll,
+  RectElement,
+  TransitionFieldType,
+} from "../types";
+import { RadioChangeEvent } from "../components/MenuRadioGroup";
 
 export const menuContainerClass = "szh-menu-container";
 export const menuClass = "szh-menu";
@@ -12,13 +24,73 @@ export const menuGroupClass = "group";
 export const subMenuClass = "submenu";
 export const radioGroupClass = "radio-group";
 
-export const HoverItemContext = createContext();
-export const MenuListItemContext = createContext({});
-export const MenuListContext = createContext({});
-export const EventHandlersContext = createContext({});
-export const RadioGroupContext = createContext({});
-export const SettingsContext = createContext({});
-export const ItemSettingsContext = createContext({});
+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;
+  checked?: boolean;
+  name?: string;
+  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",
@@ -55,7 +127,7 @@ export const FocusPositions = Object.freeze({
   LAST: "last",
 });
 
-export const MenuStateMap: Record<string, string | undefined> = Object.freeze({
+export const MenuStateMap: Record<string, MenuState> = Object.freeze({
   entering: "opening",
   entered: "open",
   exiting: "closing",

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/{propTypes.ts → propTypes2.ts}

@@ -4,6 +4,8 @@ export const stylePropTypes = (name?: string) => ({
   [name ? `${name}ClassName` : "className"]: oneOfType([string, func]),
 });
 
+export const Direction = oneOf(["left", "right", "top", "bottom"]);
+
 // Menu, SubMenu and ControlledMenu
 export const menuPropTypes = {
   className: string,
@@ -16,7 +18,7 @@ export const menuPropTypes = {
   offsetX: number,
   offsetY: number,
   align: oneOf(["start", "center", "end"]),
-  direction: oneOf(["left", "right", "top", "bottom"]),
+  direction: Direction,
   position: oneOf(["auto", "anchor", "initial"]),
   overflow: oneOf(["auto", "visible", "hidden"]),
 };