@linzjs/step-ag-grid 1.4.4 → 1.4.6

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

@@ -0,0 +1,108 @@
+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, Keys, FocusPositions } from "../utils";
+import { MenuButtonModifiers, RenderProp, RootMenuProps, UncontrolledMenuProps } from "../index";
+
+//
+// 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<HTMLButtonElement>(null);
+
+  const handleClose = useCallback(
+    (e) => {
+      toggleMenu(false);
+      if (e.key) buttonRef.current && buttonRef.current.focus();
+    },
+    [toggleMenu],
+  );
+
+  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: KeyboardEvent) => {
+    switch (e.key) {
+      case Keys.UP:
+        openMenu(FocusPositions.LAST);
+        break;
+
+      case Keys.DOWN:
+        openMenu(FocusPositions.FIRST);
+        break;
+
+      default:
+        return;
+    }
+
+    e.preventDefault();
+  };
+
+  // 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;
+  }
+  const renderButton = cloneElement(button, buttonProps);
+
+  useMenuChange(onMenuChange, isOpen);
+
+  useImperativeHandle(instanceRef, () => ({
+    openMenu,
+    closeMenu: () => toggleMenu(false),
+  }));
+
+  return (
+    <Fragment>
+      {renderButton}
+      <ControlledMenu
+        {...restProps}
+        {...stateProps}
+        aria-label={ariaLabel || (typeof button.props.children === "string" ? button.props.children : "Menu")}
+        anchorRef={buttonRef}
+        ref={externalRef}
+        onClose={handleClose}
+        skipOpen={skipOpen}
+      />
+    </Fragment>
+  );
+}
+export const Menu = forwardRef(MenuFr);

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

@@ -0,0 +1,34 @@
+import { forwardRef, LegacyRef, ReactNode, useMemo } from "react";
+import { useBEM } from "../hooks";
+import { menuButtonClass } from "../utils";
+import { BaseProps, MenuButtonModifiers } from "../index";
+
+export interface MenuButtonProps extends BaseProps<MenuButtonModifiers> {
+  disabled?: boolean;
+  children?: ReactNode;
+
+  // FIXME Matt added, seems to be an internal thing
+  isOpen?: boolean;
+}
+
+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

@@ -0,0 +1,17 @@
+import { memo, forwardRef, LegacyRef } from "react";
+import { useBEM } from "../hooks";
+import { menuClass, menuDividerClass } from "../utils";
+import { BaseProps } from "../index";
+
+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)) as any as typeof MenuDividerFr;

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

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

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

@@ -0,0 +1,17 @@
+import { memo, forwardRef, ForwardedRef } from "react";
+import { useBEM } from "../hooks";
+import { menuClass, menuHeaderClass } from "../utils";
+import { BaseProps } from "../index";
+
+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

@@ -0,0 +1,183 @@
+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 { BaseProps, ClickEvent, EventHandler, Hoverable, MenuItemTypeProp, RenderProp } from "../index";
+import { withHoveringResultProps } from "../utils/withHovering";
+
+//
+// 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>;
+}
+
+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;
+
+  // FIXME handle click seems to be a combination of multiple event types
+  const handleClick = (e: any) => {
+    if (isDisabled) {
+      e.stopPropagation();
+      e.preventDefault();
+      return;
+    }
+
+    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 handleKeyDown = (e: KeyboardEvent) => {
+    if (!isHovering) return;
+
+    switch (e.key) {
+      case Keys.ENTER:
+      case Keys.SPACE:
+        if (isAnchor) {
+          menuItemRef?.current && menuItemRef.current.click();
+        } else {
+          handleClick(e);
+        }
+        break;
+    }
+  };
+
+  const modifiers = useMemo(
+    () => ({
+      type,
+      disabled: isDisabled,
+      hover: isHovering,
+      checked: isChecked,
+      anchor: isAnchor,
+    }),
+    [type, isDisabled, isHovering, isChecked, isAnchor],
+  );
+
+  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]),
+  };
+
+  if (isAnchor) {
+    return (
+      <li role="presentation">
+        <a href={href} {...menuItemProps} />
+      </li>
+    );
+  } else {
+    return <li {...menuItemProps} />;
+  }
+};
+
+// FIXME matt as any
+export const MenuItem = withHovering("MenuItem", MenuItemFr) as any as typeof MenuItemFr;