@linzjs/step-ag-grid 1.4.4 → 1.4.6

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

@@ -0,0 +1,116 @@
+import { createContext, MutableRefObject } from "react";
+import { EventHandler, FocusPosition, MenuDirection, MenuOverflow, MenuState } from "../index";
+import { RadioChangeEvent } from "../components/MenuRadioGroup";
+import { ControlledMenuProps } from "../components/MenuList";
+
+export const menuContainerClass = "szh-menu-container";
+export const menuClass = "szh-menu";
+export const menuButtonClass = "szh-menu-button";
+export const menuArrowClass = "arrow";
+export const menuItemClass = "item";
+export const menuDividerClass = "divider";
+export const menuHeaderClass = "header";
+export const menuGroupClass = "group";
+export const subMenuClass = "submenu";
+export const radioGroupClass = "radio-group";
+
+export const HoverItemContext = createContext(undefined);
+
+interface MenuListItemContextType {
+  isParentOpen?: boolean;
+  isSubmenuOpen?: boolean;
+  dispatch: (actionType: number, item: any, nextIndex: FocusPosition) => void;
+  updateItems: (item: any, isMounted?: boolean) => void;
+  setOpenSubmenuCount: (fn: (count: number) => number) => void;
+}
+
+export const MenuListItemContext = createContext<MenuListItemContextType>({
+  dispatch: () => {},
+  updateItems: () => {},
+  setOpenSubmenuCount: () => 0,
+});
+
+export const MenuListContext = createContext<{
+  overflow?: MenuOverflow;
+  overflowAmt?: number;
+  parentMenuRef?: MutableRefObject<any>;
+  parentDir?: MenuDirection;
+  reposSubmenu?: boolean;
+}>({});
+
+export interface RMEvent {
+  value: any;
+  syntheticEvent: any;
+  checked?: boolean;
+  name?: string;
+  key?: string;
+}
+
+export const EventHandlersContext = createContext<{
+  handleClose?: () => void;
+  handleClick: (event: RMEvent, checked: boolean) => void;
+}>({
+  handleClick: () => {},
+});
+
+export const RadioGroupContext = createContext<{
+  value?: any;
+  name?: string;
+  onRadioChange?: EventHandler<RadioChangeEvent>;
+}>({});
+
+interface SettingsContextType extends ControlledMenuProps, MenuListItemContextType {
+  rootMenuRef?: MutableRefObject<any>;
+  rootAnchorRef?: MutableRefObject<any>;
+  scrollNodesRef: MutableRefObject<{ anchors?: Element[]; menu: any }>;
+}
+
+// FIXME hacking a default context in here is probably bad
+export const SettingsContext = createContext<SettingsContextType>({} as SettingsContextType);
+
+export const ItemSettingsContext = createContext<{ submenuCloseDelay: number; submenuOpenDelay: number }>({
+  submenuOpenDelay: 0,
+  submenuCloseDelay: 0,
+});
+
+export const Keys = Object.freeze({
+  ENTER: "Enter",
+  ESC: "Escape",
+  SPACE: " ",
+  HOME: "Home",
+  END: "End",
+  LEFT: "ArrowLeft",
+  RIGHT: "ArrowRight",
+  UP: "ArrowUp",
+  DOWN: "ArrowDown",
+});
+
+export const HoverActionTypes = Object.freeze({
+  RESET: 0,
+  SET: 1,
+  UNSET: 2,
+  INCREASE: 3,
+  DECREASE: 4,
+  FIRST: 5,
+  LAST: 6,
+  SET_INDEX: 7,
+});
+
+export const CloseReason = Object.freeze({
+  CLICK: "click",
+  CANCEL: "cancel",
+  BLUR: "blur",
+  SCROLL: "scroll",
+});
+
+export const FocusPositions = Object.freeze({
+  FIRST: "first",
+  LAST: "last",
+});
+
+export const MenuStateMap: Record<string, MenuState> = Object.freeze({
+  entering: "opening",
+  entered: "open",
+  exiting: "closing",
+  exited: "closed",
+});

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

@@ -0,0 +1,4 @@
+export * from "./constants";
+export * from "./utils";
+export * from "./propTypes";
+export { withHovering } from "./withHovering";

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

@@ -0,0 +1,63 @@
+import { string, number, bool, func, object, oneOf, oneOfType, exact } from "prop-types";
+
+export const stylePropTypes = (name?: string) => ({
+  [name ? `${name}ClassName` : "className"]: oneOfType([string, func]),
+});
+
+export const Direction = oneOf(["left", "right", "top", "bottom"]);
+
+// Menu, SubMenu and ControlledMenu
+export const menuPropTypes = {
+  className: string,
+  ...stylePropTypes("menu"),
+  ...stylePropTypes("arrow"),
+  menuStyle: object,
+  arrowStyle: object,
+  arrow: bool,
+  setDownOverflow: bool,
+  offsetX: number,
+  offsetY: number,
+  align: oneOf(["start", "center", "end"]),
+  direction: Direction,
+  position: oneOf(["auto", "anchor", "initial"]),
+  overflow: oneOf(["auto", "visible", "hidden"]),
+};
+
+// Menu and ControlledMenu
+export const rootMenuPropTypes = {
+  ...menuPropTypes,
+  containerProps: object,
+  initialMounted: bool,
+  unmountOnClose: bool,
+  transition: oneOfType([
+    bool,
+    exact({
+      open: bool,
+      close: bool,
+      item: bool,
+    }),
+  ]),
+  transitionTimeout: number,
+  boundingBoxRef: object,
+  boundingBoxPadding: string,
+  reposition: oneOf(["auto", "initial"]),
+  repositionFlag: oneOfType([string, number]),
+  viewScroll: oneOf(["auto", "close", "initial"]),
+  submenuOpenDelay: number,
+  submenuCloseDelay: number,
+  portal: oneOfType([
+    bool,
+    exact({
+      target: object,
+      stablePosition: bool,
+    }),
+  ]),
+  theming: string,
+  onItemClick: func,
+};
+
+// Menu and SubMenu
+export const uncontrolledMenuPropTypes = {
+  instanceRef: oneOfType([object, func]),
+  onMenuChange: func,
+};

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

@@ -0,0 +1,88 @@
+import { unstable_batchedUpdates } from "react-dom";
+import { MenuState, MenuStateOptions } from "../index";
+import { MenuButtonProps } from "../components/MenuButton";
+import { findIndex } from "lodash-es";
+
+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 type TransitionMap = {
+  open?: boolean;
+  close?: boolean;
+  item?: boolean;
+};
+export const getTransition = (transition: MenuStateOptions["transition"], name: keyof TransitionMap) =>
+  transition === true || !!(transition && transition[name]);
+
+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: 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 defineName = (
+  name: string,
+  component: React.ForwardRefExoticComponent<React.PropsWithoutRef<MenuButtonProps> & React.RefAttributes<unknown>>,
+) => Object.defineProperty(component, internalKey, { value: name });
+
+export const mergeProps = (target: Record<string, any>, source: Record<string, any>) => {
+  source &&
+    Object.keys(source).forEach((key) => {
+      const targetProp = target[key];
+      const sourceProp = source[key];
+      if (typeof sourceProp === "function" && targetProp) {
+        target[key] = (...arg: any[]) => {
+          sourceProp(...arg);
+          targetProp(...arg);
+        };
+      } else {
+        target[key] = sourceProp;
+      }
+    });
+
+  return target;
+};
+
+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;
+  const right = !isNaN(padding[1]) ? padding[1] : top;
+  return {
+    top,
+    right,
+    bottom: !isNaN(padding[2]) ? padding[2] : top,
+    left: !isNaN(padding[3]) ? padding[3] : right,
+  };
+};
+
+// Adapted from https://github.com/popperjs/popper-core/tree/v2.9.1/src/dom-utils
+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 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?: boolean, isHovering?: boolean) {
+  return {
+    "aria-disabled": isDisabled || undefined,
+    tabIndex: isHovering ? 0 : -1,
+  };
+}
+
+export const indexOfNode = (nodeList: NodeListOf<Node>, node: Node) => findIndex(nodeList, node);

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

@@ -0,0 +1,27 @@
+import { memo, forwardRef, useContext, useRef, MutableRefObject } from "react";
+import { HoverItemContext } from "./constants";
+
+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 menuItemRef = useRef<any>(null);
+    return (
+      <Component
+        {...props}
+        menuItemRef={menuItemRef}
+        externalRef={ref}
+        isHovering={useContext(HoverItemContext) === menuItemRef.current}
+      />
+    );
+  });
+
+  WithHovering.displayName = `WithHovering(${name})`;
+
+  return WithHovering;
+};

package/src/stories/components/GridPopoutEditDropDown.stories.tsx

@@ -8,12 +8,10 @@ import { GridContextProvider } from "@contexts/GridContextProvider";
 import { Grid, GridProps } from "@components/Grid";
 import { useCallback, useMemo, useState } from "react";
 import {
-  FinalSelectOption,
   GridFormDropDown,
   GridFormPopoutDropDownProps,
   MenuSeparator,
   MenuSeparatorString,
-  SelectOption,
 } from "@components/gridForm/GridFormDropDown";
 import { ColDef } from "ag-grid-community";
 import { wait } from "@utils/util";
@@ -180,7 +178,7 @@ const GridEditDropDownTemplate: ComponentStory<typeof Grid> = (props: GridProps)
           },
         }),
       ] as ColDef[],
-    [optionsFn],
+    [optionsFn, optionsObjects],
   );
 
   const rowData = useMemo(

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({});

package/src/utils/util.ts

@@ -17,7 +17,8 @@ export const isFloat = (value: string) => {
 export const hasParentClass = function (className: string, child: Node) {
   let node: Node | null = child;
   while (node) {
-    if (node instanceof Node && node instanceof HTMLElement && node.classList.contains(className)) {
+    // When nodes are in portals they aren't type node anymore hence treating it as any here
+    if ((node as any).classList && (node as any).classList.contains(className)) {
       return true;
     }
     node = node.parentNode;