@linzjs/step-ag-grid 1.4.4 → 1.4.5

package/src/react-menu3/styles/index.scss

@@ -0,0 +1,70 @@
+@use 'var';
+@use 'core';
+
+.szh-menu {
+  user-select: none;
+  color: var.$color;
+  border: none;
+  border-radius: 0.25rem;
+  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.133), 0 0.6px 2px rgba(0, 0, 0, 0.1);
+  min-width: 10rem;
+  padding: 0.5rem 0;
+
+  &__item {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding: 0.375rem 1.5rem;
+
+    .szh-menu-container--itemTransition & {
+      transition: {
+        property: background-color, color;
+        duration: 0.15s;
+        timing-function: ease-in-out;
+      }
+    }
+
+    &--type-radio {
+      padding-left: 2.2rem;
+      &::before {
+        content: '\25cb';
+        position: absolute;
+        left: 0.8rem;
+        top: 0.55rem;
+        font-size: 0.8rem;
+      }
+    }
+
+    &--type-radio#{&}--checked::before {
+      content: '\25cf';
+    }
+
+    &--type-checkbox {
+      padding-left: 2.2rem;
+      &::before {
+        position: absolute;
+        left: 0.8rem;
+      }
+    }
+
+    &--type-checkbox#{&}--checked::before {
+      content: '\2714';
+    }
+  }
+
+  &__submenu > .szh-menu__item {
+    padding-right: 2.5rem;
+    &::after {
+      content: '\276f';
+      position: absolute;
+      right: 1rem;
+    }
+  }
+
+  &__header {
+    color: var.$header-color;
+    font-size: 0.8rem;
+    padding: 0.2rem 1.5rem;
+    text-transform: uppercase;
+  }
+}

package/src/react-menu3/styles/theme-dark.scss

@@ -0,0 +1,30 @@
+@use 'var';
+
+.szh-menu-container--theme-dark .szh-menu {
+  color: var.$color-dark;
+  background-color: var.$background-color-dark;
+  border: 1px solid var.$border-color-dark;
+  box-shadow: 0 2px 9px 3px rgba(0, 0, 0, 0.25);
+
+  &__arrow {
+    background-color: var.$background-color-dark;
+    border-left-color: var.$border-color-dark;
+    border-top-color: var.$border-color-dark;
+  }
+
+  &__item {
+    &--hover {
+      background-color: var.$background-color-hover-dark;
+    }
+    &--focusable {
+      background-color: inherit;
+    }
+    &--disabled {
+      color: var.$color-disabled-dark;
+    }
+  }
+
+  &__divider {
+    background-color: var.$divider-color-dark;
+  }
+}

package/src/react-menu3/styles/transitions/slide.scss

@@ -0,0 +1,47 @@
+@use 'sass:list';
+@use 'sass:map';
+
+$menu: 'szh-menu';
+$duration: 0.15s;
+$directions: (
+  'left': 'X' 1,
+  'right': 'X' -1,
+  'top': 'Y' 1,
+  'bottom': 'Y' -1
+);
+
+@mixin animation($name, $dir) {
+  .#{$menu}--state-opening.#{$menu}--dir-#{$dir} {
+    animation: #{$menu}-show-#{$name}-#{$dir} $duration ease-out;
+  }
+
+  .#{$menu}--state-closing.#{$menu}--dir-#{$dir} {
+    animation: #{$menu}-hide-#{$name}-#{$dir} $duration ease-in forwards;
+  }
+}
+
+@mixin slide-start($axis, $sign) {
+  opacity: 0;
+  transform: translate#{$axis }($sign * 0.75rem);
+}
+
+@each $dir, $value in $directions {
+  $axis: list.nth($value, 1);
+  $sign: list.nth($value, 2);
+
+  @keyframes #{$menu}-show-slide-#{$dir} {
+    from {
+      @include slide-start($axis, $sign);
+    }
+  }
+
+  @keyframes #{$menu}-hide-slide-#{$dir} {
+    to {
+      @include slide-start($axis, $sign);
+    }
+  }
+}
+
+@each $dir in map.keys($directions) {
+  @include animation('slide', $dir);
+}

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

@@ -0,0 +1,63 @@
+// @ts-nocheck
+import { createContext } from "react";
+
+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();
+export const MenuListItemContext = createContext({});
+export const MenuListContext = createContext({});
+export const EventHandlersContext = createContext({});
+export const RadioGroupContext = createContext({});
+export const SettingsContext = createContext({});
+export const ItemSettingsContext = createContext({});
+
+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, string | undefined> = 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,61 @@
+import { string, number, bool, func, object, oneOf, oneOfType, exact } from "prop-types";
+
+export const stylePropTypes = (name?: string) => ({
+  [name ? `${name}ClassName` : "className"]: oneOfType([string, func]),
+});
+
+// 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: oneOf(["left", "right", "top", "bottom"]),
+  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,71 @@
+// @ts-nocheck
+import { unstable_batchedUpdates } from "react-dom";
+
+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 floatEqual = (a: number, b: number, diff = 0.0001) => Math.abs(a - b) < diff;
+export const getTransition = (transition: boolean | Record<string, string>, name: string) =>
+  transition === true || !!(transition && transition[name]);
+export const safeCall = (fn, arg) => (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 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) => {
+          sourceProp(...arg);
+          targetProp(...arg);
+        };
+      } else {
+        target[key] = sourceProp;
+      }
+    });
+
+  return target;
+};
+
+export const parsePadding = (paddingStr) => {
+  if (typeof paddingStr !== "string") 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) => {
+  const thisWindow = node.ownerDocument.defaultView;
+  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;
+  }
+};
+
+export function commonProps(isDisabled, isHovering) {
+  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;
+}

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

@@ -0,0 +1,22 @@
+// @ts-nocheck
+import { memo, forwardRef, useContext, useRef } from "react";
+import { HoverItemContext } from "./constants";
+
+export const withHovering = (name: string, WrappedComponent: any): any => {
+  const Component = memo(WrappedComponent);
+  const WithHovering = forwardRef<any>((props: any, ref) => {
+    const itemRef = useRef(null);
+    return (
+      <Component
+        {...props}
+        itemRef={itemRef}
+        externalRef={ref}
+        isHovering={useContext(HoverItemContext) === itemRef.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/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;