@linzjs/step-ag-grid 1.4.2 → 1.4.5

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

@@ -0,0 +1,96 @@
+// @ts-nocheck
+import { cloneElement, Fragment, forwardRef, useRef, useCallback, useImperativeHandle } from "react";
+import { element, func, oneOfType } from "prop-types";
+import { ControlledMenu } from "./ControlledMenu";
+import { useMenuChange, useMenuStateAndFocus, useCombinedRef } from "../hooks";
+import {
+  getName,
+  mergeProps,
+  safeCall,
+  isMenuOpen,
+  uncontrolledMenuPropTypes,
+  rootMenuPropTypes,
+  Keys,
+  FocusPositions,
+} from "../utils";
+
+export const Menu = forwardRef(function Menu(
+  { "aria-label": ariaLabel, captureFocus: _, menuButton, instanceRef, onMenuChange, ...restProps },
+  externalRef,
+) {
+  const [stateProps, toggleMenu, openMenu] = useMenuStateAndFocus(restProps);
+  const isOpen = isMenuOpen(stateProps.state);
+  const skipOpen = useRef(false);
+  const buttonRef = useRef(null);
+
+  const handleClose = useCallback(
+    (e) => {
+      toggleMenu(false);
+      if (e.key) buttonRef.current.focus();
+    },
+    [toggleMenu],
+  );
+
+  const onClick = (e) => {
+    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) => {
+    switch (e.key) {
+      case Keys.UP:
+        openMenu(FocusPositions.LAST);
+        break;
+
+      case Keys.DOWN:
+        openMenu(FocusPositions.FIRST);
+        break;
+
+      default:
+        return;
+    }
+
+    e.preventDefault();
+  };
+
+  const button = 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),
+  };
+  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>
+  );
+});
+
+Menu.propTypes = {
+  ...rootMenuPropTypes,
+  ...uncontrolledMenuPropTypes,
+  menuButton: oneOfType([element, func]).isRequired,
+};

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

@@ -0,0 +1,33 @@
+// @ts-nocheck
+import { forwardRef, useMemo } from "react";
+import { bool } from "prop-types";
+import { useBEM } from "../hooks";
+import { defineName, menuButtonClass, stylePropTypes } from "../utils";
+
+export const MenuButton = defineName(
+  "MenuButton",
+  forwardRef(function MenuButton({ className, isOpen, disabled, children, ...restProps }, ref) {
+    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>
+    );
+  }),
+);
+
+MenuButton.propTypes = {
+  ...stylePropTypes(),
+  isOpen: bool,
+  disabled: bool,
+};

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

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import { memo, forwardRef } from "react";
+import { useBEM } from "../hooks";
+import { menuClass, menuDividerClass, stylePropTypes } from "../utils";
+
+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(),
+};

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

@@ -0,0 +1,38 @@
+// @ts-nocheck
+import { forwardRef, useContext, useRef, useState } from "react";
+import { bool } from "prop-types";
+import { useBEM, useLayoutEffect, useCombinedRef } from "../hooks";
+import { menuClass, menuGroupClass, stylePropTypes, MenuListContext } from "../utils";
+
+export const MenuGroup = forwardRef(function MenuGroup({ className, style, takeOverflow, ...restProps }, externalRef) {
+  const ref = useRef(null);
+  const [overflowStyle, setOverflowStyle] = useState();
+  const { overflow, overflowAmt } = useContext(MenuListContext);
+
+  useLayoutEffect(() => {
+    let maxHeight;
+    if (takeOverflow && overflowAmt >= 0) {
+      maxHeight = ref.current.getBoundingClientRect().height - overflowAmt;
+      if (maxHeight < 0) maxHeight = 0;
+    }
+    setOverflowStyle(maxHeight >= 0 ? { maxHeight, overflow } : undefined);
+  }, [takeOverflow, overflow, overflowAmt]);
+
+  useLayoutEffect(() => {
+    if (overflowStyle) ref.current.scrollTop = 0;
+  }, [overflowStyle]);
+
+  return (
+    <div
+      {...restProps}
+      ref={useCombinedRef(externalRef, ref)}
+      className={useBEM({ block: menuClass, element: menuGroupClass, className })}
+      style={{ ...style, ...overflowStyle }}
+    />
+  );
+});
+
+MenuGroup.propTypes = {
+  ...stylePropTypes(),
+  takeOverflow: bool,
+};

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

@@ -0,0 +1,21 @@
+// @ts-nocheck
+import { memo, forwardRef } from "react";
+import { useBEM } from "../hooks";
+import { menuClass, menuHeaderClass, stylePropTypes } from "../utils";
+
+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(),
+};

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

@@ -0,0 +1,130 @@
+// @ts-nocheck
+import { useContext, useMemo } from "react";
+import { any, string, bool, func, node, oneOf, oneOfType } from "prop-types";
+import { useBEM, useItemState, useCombinedRef } from "../hooks";
+import {
+  mergeProps,
+  commonProps,
+  safeCall,
+  stylePropTypes,
+  menuClass,
+  menuItemClass,
+  withHovering,
+  EventHandlersContext,
+  RadioGroupContext,
+  Keys,
+} from "../utils";
+
+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;
+
+    const handleClick = (e) => {
+      if (isDisabled) {
+        e.stopPropagation();
+        e.preventDefault();
+        return;
+      }
+
+      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 handleKeyDown = (e) => {
+      if (!isHovering) return;
+
+      switch (e.key) {
+        case Keys.ENTER:
+        case Keys.SPACE:
+          if (isAnchor) {
+            itemRef.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, itemRef),
+      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} />;
+    }
+  },
+);
+
+MenuItem.propTypes = {
+  ...stylePropTypes(),
+  value: any,
+  href: string,
+  type: oneOf(["checkbox", "radio"]),
+  checked: bool,
+  disabled: bool,
+  children: oneOfType([node, func]),
+  onClick: func,
+};