@linzjs/step-ag-grid 1.4.5 → 1.4.7

package/src/react-menu3/utils/utils.ts

@@ -1,25 +1,44 @@
-// @ts-nocheck
 import { unstable_batchedUpdates } from "react-dom";
+import { MenuState, MenuStateOptions } from "../types";
+import { MenuButtonProps } from "../components/MenuButton";
+import { findIndex } from "lodash-es";
 
-export const isMenuOpen = (state) => !!state && state[0] === "o";
-export const batchedUpdates = unstable_batchedUpdates || ((callback) => callback());
-export const values = Object.values || ((obj) => Object.keys(obj).map((key) => obj[key]));
+export const isMenuOpen = (state?: MenuState) => !!state && state[0] === "o";
+export const batchedUpdates = unstable_batchedUpdates || ((callback: () => any) => callback());
+export const values = Object.values || ((obj: { [x: string]: any }) => Object.keys(obj).map((key) => obj[key]));
 export const floatEqual = (a: number, b: number, diff = 0.0001) => Math.abs(a - b) < diff;
-export const getTransition = (transition: boolean | Record<string, string>, name: string) =>
+
+export type TransitionMap = {
+  open?: boolean;
+  close?: boolean;
+  item?: boolean;
+};
+export const getTransition = (transition: MenuStateOptions["transition"], name: keyof TransitionMap) =>
   transition === true || !!(transition && transition[name]);
-export const safeCall = (fn, arg) => (typeof fn === "function" ? fn(arg) : fn);
+
+export function safeCall<T, R>(fn: (arg?: T) => R, arg?: T): R;
+export function safeCall<T, R>(fn: T, arg: R): T;
+export function safeCall<T, R>(fn: (arg?: T) => R, arg?: T): T | R {
+  return typeof fn === "function" ? fn(arg) : fn;
+}
 
 const internalKey = "_szhsinMenu";
-export const getName = (component) => component[internalKey];
-export const defineName = (name, component) => Object.defineProperty(component, internalKey, { value: name });
+export const getName = (component: Record<string, any | undefined>) => component[internalKey];
+//export const defineName = <T extends any[]>(name: string, component: (...args: T) => JSX.Element) =>
+//  Object.defineProperty(component, internalKey, { value: name });
 
-export const mergeProps = (target: Record<string, any>, source: Record<string, any>) => {
+export const defineName = (
+  name: string,
+  component: React.ForwardRefExoticComponent<React.PropsWithoutRef<MenuButtonProps> & React.RefAttributes<unknown>>,
+) => Object.defineProperty(component, internalKey, { value: name });
+
+export const mergeProps = (target: any, source: any) => {
   source &&
     Object.keys(source).forEach((key) => {
       const targetProp = target[key];
       const sourceProp = source[key];
       if (typeof sourceProp === "function" && targetProp) {
-        target[key] = (...arg) => {
+        target[key] = (...arg: any[]) => {
           sourceProp(...arg);
           targetProp(...arg);
         };
@@ -31,8 +50,8 @@ export const mergeProps = (target: Record<string, any>, source: Record<string, a
   return target;
 };
 
-export const parsePadding = (paddingStr) => {
-  if (typeof paddingStr !== "string") return { top: 0, right: 0, bottom: 0, left: 0 };
+export const parsePadding = (paddingStr: string | undefined) => {
+  if (paddingStr == null) return { top: 0, right: 0, bottom: 0, left: 0 };
 
   const padding = paddingStr.trim().split(/\s+/, 4).map(parseFloat);
   const top = !isNaN(padding[0]) ? padding[0] : 0;
@@ -46,26 +65,24 @@ export const parsePadding = (paddingStr) => {
 };
 
 // Adapted from https://github.com/popperjs/popper-core/tree/v2.9.1/src/dom-utils
-export const getScrollAncestor = (node) => {
-  const thisWindow = node.ownerDocument.defaultView;
+export const getScrollAncestor = (node: Node | null): Element | null => {
+  const thisWindow = (node?.ownerDocument ?? document).defaultView ?? window;
   while (node) {
     node = node.parentNode;
-    if (!node || node === thisWindow.document.body) return;
-    const { overflow, overflowX, overflowY } = thisWindow.getComputedStyle(node);
-    if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX)) return node;
+    if (!node || node === thisWindow?.document?.body) return null;
+    if (node instanceof Element) {
+      const { overflow, overflowX, overflowY } = thisWindow.getComputedStyle(node);
+      if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX)) return node;
+    }
   }
+  return null;
 };
 
-export function commonProps(isDisabled, isHovering) {
+export function commonProps(isDisabled?: boolean, isHovering?: boolean) {
   return {
     "aria-disabled": isDisabled || undefined,
     tabIndex: isHovering ? 0 : -1,
   };
 }
 
-export function indexOfNode(nodeList, node) {
-  for (let i = 0; i < nodeList.length; i++) {
-    if (nodeList[i] === node) return i;
-  }
-  return -1;
-}
+export const indexOfNode = (nodeList: NodeListOf<Node>, node: Node) => findIndex(nodeList, node);

package/src/react-menu3/utils/withHovering.tsx

@@ -1,17 +1,22 @@
-// @ts-nocheck
-import { memo, forwardRef, useContext, useRef } from "react";
+import { memo, forwardRef, useContext, useRef, MutableRefObject } from "react";
 import { HoverItemContext } from "./constants";
 
-export const withHovering = (name: string, WrappedComponent: any): any => {
+export interface withHoveringResultProps {
+  isHovering?: boolean;
+  externalRef?: MutableRefObject<any>;
+  menuItemRef?: MutableRefObject<any>;
+}
+
+export const withHovering = (name: string, WrappedComponent: (...args: any) => JSX.Element): any => {
   const Component = memo(WrappedComponent);
   const WithHovering = forwardRef<any>((props: any, ref) => {
-    const itemRef = useRef(null);
+    const menuItemRef = useRef<any>(null);
     return (
       <Component
         {...props}
-        itemRef={itemRef}
+        menuItemRef={menuItemRef}
         externalRef={ref}
-        isHovering={useContext(HoverItemContext) === itemRef.current}
+        isHovering={useContext(HoverItemContext) === menuItemRef.current}
       />
     );
   });

package/src/stories/components/GridReadOnly.stories.tsx

@@ -8,7 +8,6 @@ import { GridContextProvider } from "@contexts/GridContextProvider";
 import { Grid, GridProps } from "@components/Grid";
 import { useMemo, useState } from "react";
 import { wait } from "@utils/util";
-import { ICellRendererParams } from "ag-grid-community";
 import { GridPopoverMenu } from "@components/gridPopoverEdit/GridPopoverMenu";
 import { GridPopoverMessage } from "@components/gridPopoverEdit/GridPopoverMessage";
 import { GridCell } from "@components/GridCell";
@@ -51,14 +50,14 @@ const GridReadOnlyTemplate: ComponentStory<typeof Grid> = (props: GridProps) =>
         initialWidth: 65,
         maxWidth: 85,
       }),
-      GridCell({
+      GridCell<ITestRow, any>({
         field: "position",
         headerName: "Position",
         initialWidth: 65,
         maxWidth: 150,
         cellRendererParams: {
-          warning: (props: ICellRendererParams) => props.value === "Tester" && "Testers are testing",
-          info: (props: ICellRendererParams) => props.value === "Developer" && "Developers are awesome",
+          warning: (props) => props.value === "Tester" && "Testers are testing",
+          info: (props) => props.value === "Developer" && "Developers are awesome",
         },
       }),
       GridCell({

package/src/stories/components/ReactMenu.stories.tsx

@@ -0,0 +1,37 @@
+import "@linzjs/lui/dist/scss/base.scss";
+import "@linzjs/lui/dist/fonts";
+import "../../lui-overrides.scss";
+
+import { ComponentMeta, ComponentStory } from "@storybook/react/dist/ts3.9/client/preview/types-6-3";
+import { Grid } from "@components/Grid";
+import { Menu, MenuItem, MenuButton, MenuDivider, SubMenu } from "@react-menu3";
+
+export default {
+  title: "Components / React-menu",
+  component: Grid,
+  args: {
+    externalSelectedItems: [],
+    setExternalSelectedItems: () => {},
+  },
+} as ComponentMeta<typeof Grid>;
+
+const ReactMenuTemplate: ComponentStory<typeof Grid> = () => {
+  return (
+    <>
+      <Menu menuButton={<MenuButton>Open menu</MenuButton>}>
+        <MenuItem>New File</MenuItem>
+        <MenuItem>Save</MenuItem>
+        <SubMenu label="Edit">
+          <MenuItem>Cut</MenuItem>
+          <MenuItem>Copy</MenuItem>
+          <MenuItem>Paste</MenuItem>
+        </SubMenu>
+        <MenuItem>Print...</MenuItem>
+        <MenuDivider />
+        <MenuItem>Exit</MenuItem>
+      </Menu>
+    </>
+  );
+};
+
+export const ReactMenuControlled = ReactMenuTemplate.bind({});