@linzjs/step-ag-grid 1.4.5 → 1.4.7

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

@@ -1,43 +1,58 @@
-// @ts-nocheck
-import { cloneElement, Fragment, forwardRef, useRef, useCallback, useImperativeHandle } from "react";
-import { element, func, oneOfType } from "prop-types";
+import {
+  cloneElement,
+  Fragment,
+  forwardRef,
+  useRef,
+  useCallback,
+  useImperativeHandle,
+  ReactElement,
+  ForwardedRef,
+} from "react";
 import { ControlledMenu } from "./ControlledMenu";
 import { useMenuChange, useMenuStateAndFocus, useCombinedRef } from "../hooks";
-import {
-  getName,
-  mergeProps,
-  safeCall,
-  isMenuOpen,
-  uncontrolledMenuPropTypes,
-  rootMenuPropTypes,
-  Keys,
-  FocusPositions,
-} from "../utils";
+import { getName, mergeProps, safeCall, isMenuOpen, Keys, FocusPositions } from "../utils";
+import { MenuButtonModifiers, RenderProp, RootMenuProps, UncontrolledMenuProps } from "../types";
 
-export const Menu = forwardRef(function Menu(
-  { "aria-label": ariaLabel, captureFocus: _, menuButton, instanceRef, onMenuChange, ...restProps },
-  externalRef,
+//
+// 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, ReactElement>;
+}
+
+export function MenuFr(
+  { "aria-label": ariaLabel, menuButton, instanceRef, onMenuChange, ...restProps }: MenuProps,
+  externalRef: ForwardedRef<any>, // FIXME Matt correct type?
 ) {
   const [stateProps, toggleMenu, openMenu] = useMenuStateAndFocus(restProps);
   const isOpen = isMenuOpen(stateProps.state);
   const skipOpen = useRef(false);
-  const buttonRef = useRef(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
 
   const handleClose = useCallback(
     (e) => {
       toggleMenu(false);
-      if (e.key) buttonRef.current.focus();
+      if (e.key) buttonRef.current && buttonRef.current.focus();
     },
     [toggleMenu],
   );
 
-  const onClick = (e) => {
+  const onClick = (e: MouseEvent) => {
     if (skipOpen.current) return;
     // Focus (hover) the first menu item when onClick event is trigger by keyboard
     openMenu(e.detail === 0 ? FocusPositions.FIRST : undefined);
   };
 
-  const onKeyDown = (e) => {
+  const onKeyDown = (e: KeyboardEvent) => {
     switch (e.key) {
       case Keys.UP:
         openMenu(FocusPositions.LAST);
@@ -54,12 +69,14 @@ export const Menu = forwardRef(function Menu(
     e.preventDefault();
   };
 
-  const button = safeCall(menuButton, { open: isOpen });
+  // FIXME erk! button seems to be many types
+  const button: any = safeCall(menuButton, { open: isOpen });
   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") {
     buttonProps.isOpen = isOpen;
@@ -87,10 +104,5 @@ export const Menu = forwardRef(function Menu(
       />
     </Fragment>
   );
-});
-
-Menu.propTypes = {
-  ...rootMenuPropTypes,
-  ...uncontrolledMenuPropTypes,
-  menuButton: oneOfType([element, func]).isRequired,
-};
+}
+export const Menu = forwardRef(MenuFr);

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

@@ -1,33 +1,34 @@
-// @ts-nocheck
-import { forwardRef, useMemo } from "react";
-import { bool } from "prop-types";
+import { forwardRef, LegacyRef, ReactNode, useMemo } from "react";
 import { useBEM } from "../hooks";
-import { defineName, menuButtonClass, stylePropTypes } from "../utils";
+import { menuButtonClass } from "../utils";
+import { BaseProps, MenuButtonModifiers } from "../types";
 
-export const MenuButton = defineName(
-  "MenuButton",
-  forwardRef(function MenuButton({ className, isOpen, disabled, children, ...restProps }, ref) {
-    const modifiers = useMemo(() => ({ open: isOpen }), [isOpen]);
+export interface MenuButtonProps extends BaseProps<MenuButtonModifiers> {
+  disabled?: boolean;
+  children?: ReactNode;
 
-    return (
-      <button
-        aria-haspopup
-        aria-expanded={isOpen}
-        aria-disabled={disabled || undefined}
-        type="button"
-        disabled={disabled}
-        {...restProps}
-        ref={ref}
-        className={useBEM({ block: menuButtonClass, modifiers, className })}
-      >
-        {children}
-      </button>
-    );
-  }),
-);
+  // FIXME Matt added, seems to be an internal thing
+  isOpen?: boolean;
+}
 
-MenuButton.propTypes = {
-  ...stylePropTypes(),
-  isOpen: bool,
-  disabled: bool,
-};
+export const MenuButton = forwardRef(function MenuButton(
+  { className, isOpen, disabled, children, ...restProps }: MenuButtonProps,
+  ref: LegacyRef<HTMLButtonElement>,
+) {
+  const modifiers = useMemo(() => ({ open: isOpen }), [isOpen]);
+
+  return (
+    <button
+      aria-haspopup
+      aria-expanded={isOpen}
+      aria-disabled={disabled || undefined}
+      type="button"
+      disabled={disabled}
+      {...restProps}
+      ref={ref}
+      className={useBEM({ block: menuButtonClass, modifiers, className })}
+    >
+      {children}
+    </button>
+  );
+});

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

@@ -1,21 +1,17 @@
-// @ts-nocheck
-import { memo, forwardRef } from "react";
+import { memo, forwardRef, LegacyRef } from "react";
 import { useBEM } from "../hooks";
-import { menuClass, menuDividerClass, stylePropTypes } from "../utils";
+import { menuClass, menuDividerClass } from "../utils";
+import { BaseProps } from "../types";
 
-export const MenuDivider = memo(
-  forwardRef(function MenuDivider({ className, ...restProps }, externalRef) {
-    return (
-      <li
-        role="separator"
-        {...restProps}
-        ref={externalRef}
-        className={useBEM({ block: menuClass, element: menuDividerClass, className })}
-      />
-    );
-  }),
-);
-
-MenuDivider.propTypes = {
-  ...stylePropTypes(),
+const MenuDividerFr = ({ className, ...restProps }: BaseProps, externalRef: LegacyRef<HTMLLIElement>) => {
+  return (
+    <li
+      role="separator"
+      {...restProps}
+      ref={externalRef}
+      className={useBEM({ block: menuClass, element: menuDividerClass, className })}
+    />
+  );
 };
+
+export const MenuDivider = memo(forwardRef(MenuDividerFr));

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

@@ -1,38 +1,47 @@
-// @ts-nocheck
-import { forwardRef, useContext, useRef, useState } from "react";
-import { bool } from "prop-types";
+import { ForwardedRef, forwardRef, ReactNode, useContext, useRef, useState } from "react";
 import { useBEM, useLayoutEffect, useCombinedRef } from "../hooks";
-import { menuClass, menuGroupClass, stylePropTypes, MenuListContext } from "../utils";
+import { menuClass, menuGroupClass, MenuListContext } from "../utils";
+import { BaseProps, MenuOverflow } from "../types";
 
-export const MenuGroup = forwardRef(function MenuGroup({ className, style, takeOverflow, ...restProps }, externalRef) {
-  const ref = useRef(null);
-  const [overflowStyle, setOverflowStyle] = useState();
+export interface MenuGroupProps extends BaseProps {
+  children?: 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;
+}
+
+export const MenuGroupFr = (
+  { className, style, takeOverflow, ...restProps }: MenuGroupProps,
+  externalRef: ForwardedRef<HTMLDivElement>,
+) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [overflowStyle, setOverflowStyle] = useState<{ maxHeight?: number; overflow?: MenuOverflow }>();
   const { overflow, overflowAmt } = useContext(MenuListContext);
 
   useLayoutEffect(() => {
     let maxHeight;
-    if (takeOverflow && overflowAmt >= 0) {
+    if (takeOverflow && overflowAmt != null && overflowAmt >= 0 && ref.current) {
+      // FIXME Matt added && ref.current
       maxHeight = ref.current.getBoundingClientRect().height - overflowAmt;
       if (maxHeight < 0) maxHeight = 0;
     }
-    setOverflowStyle(maxHeight >= 0 ? { maxHeight, overflow } : undefined);
+    setOverflowStyle(maxHeight != null && maxHeight >= 0 ? { maxHeight, overflow } : undefined);
   }, [takeOverflow, overflow, overflowAmt]);
 
   useLayoutEffect(() => {
-    if (overflowStyle) ref.current.scrollTop = 0;
+    if (overflowStyle && ref.current) ref.current.scrollTop = 0;
   }, [overflowStyle]);
 
   return (
     <div
       {...restProps}
-      ref={useCombinedRef(externalRef, ref)}
+      ref={useCombinedRef(externalRef, ref)} // TODO wierd refs
       className={useBEM({ block: menuClass, element: menuGroupClass, className })}
       style={{ ...style, ...overflowStyle }}
     />
   );
-});
-
-MenuGroup.propTypes = {
-  ...stylePropTypes(),
-  takeOverflow: bool,
 };
+
+export const MenuGroup = forwardRef(MenuGroupFr);

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

@@ -1,21 +1,17 @@
-// @ts-nocheck
-import { memo, forwardRef } from "react";
+import { memo, forwardRef, ForwardedRef } from "react";
 import { useBEM } from "../hooks";
-import { menuClass, menuHeaderClass, stylePropTypes } from "../utils";
+import { menuClass, menuHeaderClass } from "../utils";
+import { BaseProps } from "../types";
 
-export const MenuHeader = memo(
-  forwardRef(function MenuHeader({ className, ...restProps }, externalRef) {
-    return (
-      <li
-        role="presentation"
-        {...restProps}
-        ref={externalRef}
-        className={useBEM({ block: menuClass, element: menuHeaderClass, className })}
-      />
-    );
-  }),
-);
-
-MenuHeader.propTypes = {
-  ...stylePropTypes(),
+export const MenuHeaderFr = ({ className, ...restProps }: BaseProps, externalRef: ForwardedRef<HTMLLIElement>) => {
+  return (
+    <li
+      role="presentation"
+      {...restProps}
+      ref={externalRef}
+      className={useBEM({ block: menuClass, element: menuHeaderClass, className })}
+    />
+  );
 };
+
+export const MenuHeader = memo(forwardRef(MenuHeaderFr));

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

@@ -1,130 +1,182 @@
-// @ts-nocheck
-import { useContext, useMemo } from "react";
-import { any, string, bool, func, node, oneOf, oneOfType } from "prop-types";
+import { Ref, useContext, useMemo } from "react";
 import { useBEM, useItemState, useCombinedRef } from "../hooks";
 import {
   mergeProps,
   commonProps,
   safeCall,
-  stylePropTypes,
   menuClass,
   menuItemClass,
   withHovering,
   EventHandlersContext,
   RadioGroupContext,
   Keys,
+  RMEvent,
 } from "../utils";
+import { BaseProps, ClickEvent, EventHandler, Hoverable, MenuItemTypeProp, RenderProp } from "../types";
+import { withHoveringResultProps } from "../utils/withHovering";
 
-export const MenuItem = withHovering(
-  "MenuItem",
-  function MenuItem({
-    className,
-    value,
-    href,
-    type,
-    checked,
-    disabled,
-    children,
-    onClick,
-    isHovering,
-    itemRef,
-    externalRef,
-    ...restProps
-  }) {
-    const isDisabled = !!disabled;
-    const { setHover, ...restStateProps } = useItemState(itemRef, itemRef, isHovering, isDisabled);
-    const eventHandlers = useContext(EventHandlersContext);
-    const radioGroup = useContext(RadioGroupContext);
-    const isRadio = type === "radio";
-    const isCheckBox = type === "checkbox";
-    const isAnchor = !!href && !isDisabled && !isRadio && !isCheckBox;
-    const isChecked = isRadio ? radioGroup.value === value : isCheckBox ? !!checked : false;
+//
+// 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;
+}>;
 
-    const handleClick = (e) => {
-      if (isDisabled) {
-        e.stopPropagation();
-        e.preventDefault();
-        return;
-      }
+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>;
+}
 
-      const event = { value, syntheticEvent: e };
-      if (e.key !== undefined) event.key = e.key;
-      if (isCheckBox) event.checked = !isChecked;
-      if (isRadio) event.name = radioGroup.name;
-      safeCall(onClick, event);
-      if (isRadio) safeCall(radioGroup.onRadioChange, event);
-      eventHandlers.handleClick(event, isCheckBox || isRadio);
-    };
+const MenuItemFr = ({
+  className,
+  value,
+  href,
+  type,
+  checked,
+  disabled,
+  children,
+  onClick,
+  isHovering,
+  menuItemRef,
+  externalRef,
+  ...restProps
+}: MenuItemProps & withHoveringResultProps) => {
+  const isDisabled = !!disabled;
+  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 isAnchor = !!href && !isDisabled && !isRadio && !isCheckBox;
+  const isChecked = isRadio ? radioGroup.value === value : isCheckBox ? !!checked : false;
 
-    const handleKeyDown = (e) => {
-      if (!isHovering) return;
+  // FIXME handle click seems to be a combination of multiple event types
+  const handleClick = (e: any) => {
+    if (isDisabled) {
+      e.stopPropagation();
+      e.preventDefault();
+      return;
+    }
 
-      switch (e.key) {
-        case Keys.ENTER:
-        case Keys.SPACE:
-          if (isAnchor) {
-            itemRef.current.click();
-          } else {
-            handleClick(e);
-          }
-          break;
-      }
+    const event: RMEvent = {
+      value,
+      syntheticEvent: e,
     };
+    if (e.key !== undefined) event.key = e.key;
+    if (isCheckBox) event.checked = !isChecked;
+    if (isRadio) event.name = radioGroup.name;
+    safeCall(onClick, event);
+    if (isRadio) safeCall(radioGroup.onRadioChange, event);
+    eventHandlers.handleClick(event, isCheckBox || isRadio);
+  };
 
-    const modifiers = useMemo(
-      () => ({
-        type,
-        disabled: isDisabled,
-        hover: isHovering,
-        checked: isChecked,
-        anchor: isAnchor,
-      }),
-      [type, isDisabled, isHovering, isChecked, isAnchor],
-    );
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (!isHovering) return;
 
-    const mergedProps = mergeProps(
-      {
-        ...restStateProps,
-        onPointerDown: setHover,
-        onKeyDown: handleKeyDown,
-        onClick: handleClick,
-      },
-      restProps,
-    );
+    switch (e.key) {
+      case Keys.ENTER:
+      case Keys.SPACE:
+        if (isAnchor) {
+          menuItemRef?.current && menuItemRef.current.click();
+        } else {
+          handleClick(e);
+        }
+        break;
+    }
+  };
 
-    // Order of props overriding (same in all components):
-    // 1. Preset props adhering to WAI-ARIA Authoring Practices.
-    // 2. Merged outer and local props
-    // 3. ref, className
-    const menuItemProps = {
-      role: isRadio ? "menuitemradio" : isCheckBox ? "menuitemcheckbox" : "menuitem",
-      "aria-checked": isRadio || isCheckBox ? isChecked : undefined,
-      ...mergedProps,
-      ...commonProps(isDisabled, isHovering),
-      ref: useCombinedRef(externalRef, itemRef),
-      className: useBEM({ block: menuClass, element: menuItemClass, modifiers, className }),
-      children: useMemo(() => safeCall(children, modifiers), [children, modifiers]),
-    };
+  const modifiers = useMemo(
+    () => ({
+      type,
+      disabled: isDisabled,
+      hover: isHovering,
+      checked: isChecked,
+      anchor: isAnchor,
+    }),
+    [type, isDisabled, isHovering, isChecked, isAnchor],
+  );
 
-    if (isAnchor) {
-      return (
-        <li role="presentation">
-          <a href={href} {...menuItemProps} />
-        </li>
-      );
-    } else {
-      return <li {...menuItemProps} />;
-    }
-  },
-);
+  const mergedProps = mergeProps(
+    {
+      ...restStateProps,
+      onPointerDown: setHover,
+      onKeyDown: handleKeyDown,
+      onClick: handleClick,
+    },
+    restProps,
+  );
+
+  // Order of props overriding (same in all components):
+  // 1. Preset props adhering to WAI-ARIA Authoring Practices.
+  // 2. Merged outer and local props
+  // 3. ref, className
+  const menuItemProps = {
+    role: isRadio ? "menuitemradio" : isCheckBox ? "menuitemcheckbox" : "menuitem",
+    "aria-checked": isRadio || isCheckBox ? isChecked : undefined,
+    ...mergedProps,
+    ...commonProps(isDisabled, isHovering),
+    ref: useCombinedRef(externalRef as Ref<any>, menuItemRef),
+    className: useBEM({ block: menuClass, element: menuItemClass, modifiers, className }),
+    children: useMemo(() => safeCall(children, modifiers), [children, modifiers]),
+  };
 
-MenuItem.propTypes = {
-  ...stylePropTypes(),
-  value: any,
-  href: string,
-  type: oneOf(["checkbox", "radio"]),
-  checked: bool,
-  disabled: bool,
-  children: oneOfType([node, func]),
-  onClick: func,
+  if (isAnchor) {
+    return (
+      <li role="presentation">
+        <a href={href} {...menuItemProps} />
+      </li>
+    );
+  } else {
+    return <li {...menuItemProps} />;
+  }
 };
+
+export const MenuItem = withHovering("MenuItem", MenuItemFr);