@linzjs/step-ag-grid 1.4.5 → 1.4.6

package/package.json

@@ -2,7 +2,7 @@
   "name": "@linzjs/step-ag-grid",
   "repository": "github:linz/step-ag-grid.git",
   "license": "MIT",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "module": "dist/step-ag-grid.esm.js",
@@ -17,23 +17,23 @@
     "node": ">=14"
   },
   "peerDependencies": {
-    "react": ">=17",
-    "react-dom": ">=17",
+    "@linzjs/lui": ">=17",
     "ag-grid-community": ">=27",
     "ag-grid-react": ">=27",
-    "@linzjs/lui": ">=17"
+    "react": ">=17",
+    "react-dom": ">=17"
   },
   "dependencies": {
-    "@linzjs/lui": "^17.18.2",
-    "ag-grid-community": "^27.3.0",
-    "ag-grid-react": "^27.3.0",
+    "@linzjs/lui": ">=17",
+    "ag-grid-community": ">=27",
+    "ag-grid-react": ">=27",
     "debounce-promise": "^3.1.2",
     "lodash-es": "^4.17.21",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "uuid": "^9.0.0",
     "prop-types": "^15.8.1",
-    "react-transition-state": "^1.1.5"
+    "react": ">=17",
+    "react-dom": ">=17",
+    "react-transition-state": "^1.1.5",
+    "uuid": "^9.0.0"
   },
   "scripts": {
     "build": "rollup -c && npm run",

package/src/components/gridForm/GridFormDropDown.tsx

@@ -153,7 +153,7 @@ export const GridFormDropDown = <RowType extends GridBaseRow, ValueType>(props:
     <>
       {formProps.filtered && (
         <>
-          <FocusableItem className={"filter-item"} index={-1}>
+          <FocusableItem className={"filter-item"}>
             {({ ref }: any) => (
               <div style={{ display: "flex", width: "100%" }}>
                 <input

package/src/components/gridForm/GridFormMultiSelect.tsx

@@ -1,6 +1,6 @@
 import "../../react-menu3/styles/index.scss";
 
-import { MenuItem, MenuDivider, FocusableItem } from "@react-menu3";
+import { MenuItem, MenuDivider, FocusableItem, RadioChangeEvent } from "@react-menu3";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { GridBaseRow } from "../Grid";
 import { ComponentLoadingWrapper } from "../ComponentLoadingWrapper";
@@ -58,7 +58,7 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
     },
     [formProps, selectedValues],
   );
-  const { popoverWrapper } = useGridPopoverHook(props, save);
+  const { popoverWrapper, triggerSave } = useGridPopoverHook(props, save);
 
   // Load up options list if it's async function
   useEffect(() => {
@@ -137,11 +137,17 @@ export const GridFormMultiSelect = <RowType extends GridBaseRow, ValueType>(prop
             <>
               <MenuItem
                 key={`${item.value}`}
-                onClick={(e: { keepOpen: boolean }) => {
+                onClick={(e: RadioChangeEvent) => {
+                  // FIXME Matt Event type guessed here
                   e.keepOpen = true;
-                  // onSelectMenuOption(itemIndex, e.value);
+                  if (selectedValues.includes(e.value)) {
+                    setSelectedValues(selectedValues.filter((value) => value != item.value));
+                  } else {
+                    setSelectedValues([...selectedValues, item.value as string]);
+                  }
                   return false;
                 }}
+                onKeyDown={async (e) => e.key === "Enter" && triggerSave().then()}
               >
                 <LuiCheckboxInput
                   isChecked={selectedValues.includes(item.value)}

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

@@ -1,4 +1,5 @@
 // @ts-nocheck
+/* eslint-disable */
 import { forwardRef, useRef, useMemo, useCallback, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { string, number, bool, func, object, oneOf, oneOfType, exact } from "prop-types";
@@ -47,7 +48,7 @@ export const ControlledMenu = forwardRef(function ControlledMenu(
   externalRef,
 ) {
   const containerRef = useRef(null);
-  const scrollNodesRef = useRef({});
+  const scrollNodesRef = useRef<{anchors?:HTMLDivElement[]}>({});
   const { anchorRef, state } = restProps;
 
   const settings = useMemo(

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

@@ -1,6 +1,4 @@
-// @ts-nocheck
-import { useContext, useMemo, useRef } from "react";
-import { bool, func } from "prop-types";
+import { LegacyRef, useContext, useMemo, useRef } from "react";
 import { useBEM, useCombinedRef, useItemState } from "../hooks";
 import {
   mergeProps,
@@ -8,63 +6,70 @@ import {
   safeCall,
   menuClass,
   menuItemClass,
-  stylePropTypes,
   withHovering,
   EventHandlersContext,
 } from "../utils";
+import { BaseProps } from "../index";
+import { withHoveringResultProps } from "../utils/withHovering";
 
-export const FocusableItem = withHovering(
-  "FocusableItem",
-  function FocusableItem({ className, disabled, children, isHovering, itemRef, externalRef, ...restProps }) {
-    const isDisabled = !!disabled;
-    const ref = useRef(null);
-    const { setHover, onPointerLeave, ...restStateProps } = useItemState(itemRef, ref, isHovering, isDisabled);
-    const { handleClose } = useContext(EventHandlersContext);
+export interface FocusableItemProps extends BaseProps, withHoveringResultProps {
+  disabled?: boolean;
+  children: (ref: LegacyRef<any>) => JSX.Element;
+}
 
-    const modifiers = useMemo(
-      () => ({
-        disabled: isDisabled,
-        hover: isHovering,
-        focusable: true,
-      }),
-      [isDisabled, isHovering],
-    );
+export const FocusableItemFr = ({
+  className,
+  disabled,
+  children,
+  isHovering,
+  menuItemRef,
+  externalRef,
+  ...restProps
+}: FocusableItemProps) => {
+  const isDisabled = !!disabled;
+  const ref = useRef(null);
+  const { setHover, onPointerLeave, ...restStateProps } = useItemState(menuItemRef, ref, isHovering, isDisabled);
+  const { handleClose } = useContext(EventHandlersContext);
 
-    const renderChildren = useMemo(
-      () =>
-        safeCall(children, {
-          ...modifiers,
-          ref,
-          closeMenu: handleClose,
-        }),
-      [children, modifiers, handleClose],
-    );
+  const modifiers = useMemo(
+    () => ({
+      disabled: isDisabled,
+      hover: isHovering,
+      focusable: true,
+    }),
+    [isDisabled, isHovering],
+  );
 
-    const mergedProps = mergeProps(
-      {
-        ...restStateProps,
-        onPointerLeave: (e) => onPointerLeave(e, true),
-        onFocus: setHover,
-      },
-      restProps,
-    );
+  const renderChildren = useMemo(
+    () =>
+      safeCall(children, {
+        ...modifiers,
+        ref,
+        closeMenu: handleClose,
+      }),
+    [children, modifiers, handleClose],
+  );
 
-    return (
-      <li
-        role="menuitem"
-        {...mergedProps}
-        {...commonProps(isDisabled)}
-        ref={useCombinedRef(externalRef, itemRef)}
-        className={useBEM({ block: menuClass, element: menuItemClass, modifiers, className })}
-      >
-        {renderChildren}
-      </li>
-    );
-  },
-);
+  const mergedProps = mergeProps(
+    {
+      ...restStateProps,
+      onPointerLeave: (e: PointerEvent) => onPointerLeave(e, true),
+      onFocus: setHover,
+    },
+    restProps,
+  );
 
-FocusableItem.propTypes = {
-  ...stylePropTypes(),
-  disabled: bool,
-  children: func,
+  return (
+    <li
+      role="menuitem"
+      {...mergedProps}
+      {...commonProps(isDisabled)}
+      ref={useCombinedRef(externalRef, menuItemRef)}
+      className={useBEM({ block: menuClass, element: menuItemClass, modifiers, className })}
+    >
+      {renderChildren}
+    </li>
+  );
 };
+
+export const FocusableItem = withHovering("FocusableItem", FocusableItemFr) as any as typeof FocusableItemFr;

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 "../index";
 
-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 "../index";
 
-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 "../index";
 
-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)) as any as typeof 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 "../index";
 
-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 "../index";
 
-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));