@linzjs/step-ag-grid 1.4.4 → 1.4.5

package/src/react-menu3/positionUtils/getPositionHelpers.ts

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import { parsePadding } from "../utils";
+
+export const getPositionHelpers = (containerRef, menuRef, menuScroll, boundingBoxPadding) => {
+  const menuRect = menuRef.current.getBoundingClientRect();
+  const containerRect = containerRef.current.getBoundingClientRect();
+  const thisWindow = containerRef.current.ownerDocument.defaultView;
+  const boundingRect =
+    menuScroll === window || menuScroll === thisWindow
+      ? {
+          left: 0,
+          top: 0,
+          right: thisWindow.document.documentElement.clientWidth,
+          bottom: thisWindow.innerHeight,
+        }
+      : menuScroll.getBoundingClientRect();
+  const padding = parsePadding(boundingBoxPadding);
+
+  // For left and top, overflows are negative value.
+  // For right and bottom, overflows are positive value.
+  const getLeftOverflow = (x) => x + containerRect.left - boundingRect.left - padding.left;
+  const getRightOverflow = (x) => x + containerRect.left + menuRect.width - boundingRect.right + padding.right;
+  const getTopOverflow = (y) => y + containerRect.top - boundingRect.top - padding.top;
+  const getBottomOverflow = (y) => y + containerRect.top + menuRect.height - boundingRect.bottom + padding.bottom;
+
+  const confineHorizontally = (x) => {
+    // If menu overflows to the left side, adjust x to have the menu contained within the viewport
+    // and there is no need to check the right side;
+    // if it doesn't overflow to the left, then check the right side
+    let leftOverflow = getLeftOverflow(x);
+    if (leftOverflow < 0) {
+      x -= leftOverflow;
+    } else {
+      const rightOverflow = getRightOverflow(x);
+      if (rightOverflow > 0) {
+        x -= rightOverflow;
+        // Check again to make sure menu doesn't overflow to the left
+        // because it may go off screen and cannot be scroll into view.
+        leftOverflow = getLeftOverflow(x);
+        if (leftOverflow < 0) x -= leftOverflow;
+      }
+    }
+
+    return x;
+  };
+
+  const confineVertically = (y) => {
+    // Similar logic to confineHorizontally above
+    let topOverflow = getTopOverflow(y);
+    if (topOverflow < 0) {
+      y -= topOverflow;
+    } else {
+      const bottomOverflow = getBottomOverflow(y);
+      if (bottomOverflow > 0) {
+        y -= bottomOverflow;
+        // Check again to make sure menu doesn't overflow to the bottom
+        // because it may go off screen and cannot be scroll into view.
+        topOverflow = getTopOverflow(y);
+        if (topOverflow < 0) y -= topOverflow;
+      }
+    }
+
+    return y;
+  };
+
+  return {
+    menuRect,
+    containerRect,
+    getLeftOverflow,
+    getRightOverflow,
+    getTopOverflow,
+    getBottomOverflow,
+    confineHorizontally,
+    confineVertically,
+  };
+};

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

@@ -0,0 +1,3 @@
+export { getPositionHelpers } from "./getPositionHelpers";
+export { positionContextMenu } from "./positionContextMenu";
+export { positionMenu } from "./positionMenu";

package/src/react-menu3/positionUtils/placeArrowHorizontal.ts

@@ -0,0 +1,8 @@
+// @ts-nocheck
+export const placeArrowHorizontal = ({ arrowRef, menuX, anchorRect, containerRect, menuRect }) => {
+  let x = anchorRect.left - containerRect.left - menuX + anchorRect.width / 2;
+  const offset = arrowRef.current.offsetWidth * 1.25;
+  x = Math.max(offset, x);
+  x = Math.min(x, menuRect.width - offset);
+  return x;
+};

package/src/react-menu3/positionUtils/placeArrowVertical.ts

@@ -0,0 +1,8 @@
+// @ts-nocheck
+export const placeArrowVertical = ({ arrowRef, menuY, anchorRect, containerRect, menuRect }) => {
+  let y = anchorRect.top - containerRect.top - menuY + anchorRect.height / 2;
+  const offset = arrowRef.current.offsetHeight * 1.25;
+  y = Math.max(offset, y);
+  y = Math.min(y, menuRect.height - offset);
+  return y;
+};

package/src/react-menu3/positionUtils/placeLeftorRight.ts

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import { placeArrowVertical } from "./placeArrowVertical";
+
+export const placeLeftorRight = ({
+  anchorRect,
+  containerRect,
+  menuRect,
+  placeLeftorRightY,
+  placeLeftX,
+  placeRightX,
+  getLeftOverflow,
+  getRightOverflow,
+  confineHorizontally,
+  confineVertically,
+  arrowRef,
+  arrow,
+  direction,
+  position,
+}) => {
+  let computedDirection = direction;
+  let y = placeLeftorRightY;
+  if (position !== "initial") {
+    y = confineVertically(y);
+    if (position === "anchor") {
+      // restrict menu to the edge of anchor element
+      y = Math.min(y, anchorRect.bottom - containerRect.top);
+      y = Math.max(y, anchorRect.top - containerRect.top - menuRect.height);
+    }
+  }
+
+  let x, leftOverflow, rightOverflow;
+  if (computedDirection === "left") {
+    x = placeLeftX;
+
+    if (position !== "initial") {
+      // if menu overflows to the left,
+      // try to reposition it to the right of the anchor.
+      leftOverflow = getLeftOverflow(x);
+      if (leftOverflow < 0) {
+        // if menu overflows to the right after repositioning,
+        // choose a side which has less overflow
+        rightOverflow = getRightOverflow(placeRightX);
+        if (rightOverflow <= 0 || -leftOverflow > rightOverflow) {
+          x = placeRightX;
+          computedDirection = "right";
+        }
+      }
+    }
+  } else {
+    // Opposite logic to the 'left' direction above
+    x = placeRightX;
+
+    if (position !== "initial") {
+      rightOverflow = getRightOverflow(x);
+      if (rightOverflow > 0) {
+        leftOverflow = getLeftOverflow(placeLeftX);
+        if (leftOverflow >= 0 || -leftOverflow < rightOverflow) {
+          x = placeLeftX;
+          computedDirection = "left";
+        }
+      }
+    }
+  }
+
+  if (position === "auto") x = confineHorizontally(x);
+  const arrowY = arrow
+    ? placeArrowVertical({
+        menuY: y,
+        arrowRef,
+        anchorRect,
+        containerRect,
+        menuRect,
+      })
+    : undefined;
+  return { arrowY, x, y, computedDirection };
+};

package/src/react-menu3/positionUtils/placeToporBottom.ts

@@ -0,0 +1,77 @@
+// @ts-nocheck
+import { placeArrowHorizontal } from "./placeArrowHorizontal";
+
+export const placeToporBottom = ({
+  anchorRect,
+  containerRect,
+  menuRect,
+  placeToporBottomX,
+  placeTopY,
+  placeBottomY,
+  getTopOverflow,
+  getBottomOverflow,
+  confineHorizontally,
+  confineVertically,
+  arrowRef,
+  arrow,
+  direction,
+  position,
+}) => {
+  // make sure invalid direction is treated as 'bottom'
+  let computedDirection = direction === "top" ? "top" : "bottom";
+  let x = placeToporBottomX;
+  if (position !== "initial") {
+    x = confineHorizontally(x);
+    if (position === "anchor") {
+      // restrict menu to the edge of anchor element
+      x = Math.min(x, anchorRect.right - containerRect.left);
+      x = Math.max(x, anchorRect.left - containerRect.left - menuRect.width);
+    }
+  }
+
+  let y, topOverflow, bottomOverflow;
+  if (computedDirection === "top") {
+    y = placeTopY;
+
+    if (position !== "initial") {
+      // if menu overflows to the top,
+      // try to reposition it to the bottom of the anchor.
+      topOverflow = getTopOverflow(y);
+      if (topOverflow < 0) {
+        // if menu overflows to the bottom after repositioning,
+        // choose a side which has less overflow
+        bottomOverflow = getBottomOverflow(placeBottomY);
+        if (bottomOverflow <= 0 || -topOverflow > bottomOverflow) {
+          y = placeBottomY;
+          computedDirection = "bottom";
+        }
+      }
+    }
+  } else {
+    // Opposite logic to the 'top' direction above
+    y = placeBottomY;
+
+    if (position !== "initial") {
+      bottomOverflow = getBottomOverflow(y);
+      if (bottomOverflow > 0) {
+        topOverflow = getTopOverflow(placeTopY);
+        if (topOverflow >= 0 || -topOverflow < bottomOverflow) {
+          y = placeTopY;
+          computedDirection = "top";
+        }
+      }
+    }
+  }
+
+  if (position === "auto") y = confineVertically(y);
+  const arrowX = arrow
+    ? placeArrowHorizontal({
+        menuX: x,
+        arrowRef,
+        anchorRect,
+        containerRect,
+        menuRect,
+      })
+    : undefined;
+  return { arrowX, x, y, computedDirection };
+};

package/src/react-menu3/positionUtils/positionContextMenu.ts

@@ -0,0 +1,49 @@
+// @ts-nocheck
+export const positionContextMenu = ({ positionHelpers, anchorPoint }) => {
+  const {
+    menuRect,
+    containerRect,
+    getLeftOverflow,
+    getRightOverflow,
+    getTopOverflow,
+    getBottomOverflow,
+    confineHorizontally,
+    confineVertically,
+  } = positionHelpers;
+
+  let x, y;
+
+  // position the menu with cursor pointing to its top-left corner
+  x = anchorPoint.x - containerRect.left;
+  y = anchorPoint.y - containerRect.top;
+
+  // If menu overflows to the right of viewport,
+  // try to reposition it on the left side of cursor.
+  // If menu overflows to the left of viewport after repositioning,
+  // choose a side which has less overflow
+  // and adjust x to have it contained within the viewport.
+  const rightOverflow = getRightOverflow(x);
+  if (rightOverflow > 0) {
+    const adjustedX = x - menuRect.width;
+    const leftOverflow = getLeftOverflow(adjustedX);
+    if (leftOverflow >= 0 || -leftOverflow < rightOverflow) {
+      x = adjustedX;
+    }
+    x = confineHorizontally(x);
+  }
+
+  // Similar logic to the left and right side above.
+  let computedDirection = "bottom";
+  const bottomOverflow = getBottomOverflow(y);
+  if (bottomOverflow > 0) {
+    const adjustedY = y - menuRect.height;
+    const topOverflow = getTopOverflow(adjustedY);
+    if (topOverflow >= 0 || -topOverflow < bottomOverflow) {
+      y = adjustedY;
+      computedDirection = "top";
+    }
+    y = confineVertically(y);
+  }
+
+  return { x, y, computedDirection };
+};

package/src/react-menu3/positionUtils/positionMenu.ts

@@ -0,0 +1,73 @@
+// @ts-nocheck
+import { placeLeftorRight } from "./placeLeftorRight";
+import { placeToporBottom } from "./placeToporBottom";
+
+export const positionMenu = ({
+  arrow,
+  align,
+  direction,
+  offsetX,
+  offsetY,
+  position,
+  anchorRef,
+  arrowRef,
+  positionHelpers,
+}) => {
+  const { menuRect, containerRect } = positionHelpers;
+
+  let horizontalOffset = offsetX;
+  let verticalOffset = offsetY;
+  if (arrow) {
+    if (direction === "left" || direction === "right") {
+      horizontalOffset += arrowRef.current.offsetWidth;
+    } else {
+      verticalOffset += arrowRef.current.offsetHeight;
+    }
+  }
+
+  const anchorRect = anchorRef.current.getBoundingClientRect();
+  const placeLeftX = anchorRect.left - containerRect.left - menuRect.width - horizontalOffset;
+  const placeRightX = anchorRect.right - containerRect.left + horizontalOffset;
+  const placeTopY = anchorRect.top - containerRect.top - menuRect.height - verticalOffset;
+  const placeBottomY = anchorRect.bottom - containerRect.top + verticalOffset;
+
+  let placeToporBottomX, placeLeftorRightY;
+  if (align === "end") {
+    placeToporBottomX = anchorRect.right - containerRect.left - menuRect.width;
+    placeLeftorRightY = anchorRect.bottom - containerRect.top - menuRect.height;
+  } else if (align === "center") {
+    placeToporBottomX = anchorRect.left - containerRect.left - (menuRect.width - anchorRect.width) / 2;
+    placeLeftorRightY = anchorRect.top - containerRect.top - (menuRect.height - anchorRect.height) / 2;
+  } else {
+    placeToporBottomX = anchorRect.left - containerRect.left;
+    placeLeftorRightY = anchorRect.top - containerRect.top;
+  }
+  placeToporBottomX += horizontalOffset;
+  placeLeftorRightY += verticalOffset;
+
+  const options = {
+    ...positionHelpers,
+    anchorRect,
+    placeLeftX,
+    placeRightX,
+    placeLeftorRightY,
+    placeTopY,
+    placeBottomY,
+    placeToporBottomX,
+    arrowRef,
+    arrow,
+    direction,
+    position,
+  };
+
+  switch (direction) {
+    case "left":
+    case "right":
+      return placeLeftorRight(options);
+
+    case "top":
+    case "bottom":
+    default:
+      return placeToporBottom(options);
+  }
+};

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

@@ -0,0 +1,80 @@
+import {
+  menuContainerClass,
+  menuButtonClass,
+  menuClass,
+  menuArrowClass,
+  menuItemClass,
+  menuDividerClass,
+  menuHeaderClass,
+  menuGroupClass,
+  radioGroupClass,
+  subMenuClass,
+} from "../utils";
+
+const bem = (block) => (element) => (modifier) => {
+  let selector = `.${block}`;
+  if (element) selector += `__${element}`;
+  if (modifier) selector += `--${modifier}`;
+  return selector;
+};
+
+const createSelector = (blockElement, modifiers = []) => {
+  const selectorObj = {};
+  Object.defineProperty(selectorObj, "name", {
+    value: blockElement(),
+    enumerable: true,
+  });
+
+  modifiers.forEach((modifier) => {
+    const selector = modifier.split("-").reduce((prev, curr) => `${prev}${curr[0].toUpperCase()}${curr.slice(1)}`);
+    Object.defineProperty(selectorObj, selector, {
+      value: blockElement(modifier),
+      enumerable: true,
+    });
+  });
+
+  return selectorObj;
+};
+
+const directions = ["dir-left", "dir-right", "dir-top", "dir-bottom"];
+const menuBlock = bem(menuClass);
+const menuSelector = createSelector(menuBlock(), [
+  "state-opening",
+  "state-open",
+  "state-closing",
+  "state-closed",
+  ...directions,
+]);
+const menuArrowSelector = createSelector(menuBlock(menuArrowClass), directions);
+const menuItemSelector = createSelector(menuBlock(menuItemClass), [
+  "hover",
+  "disabled",
+  "anchor",
+  "checked",
+  "open",
+  "submenu",
+  "focusable",
+  "type-radio",
+  "type-checkbox",
+]);
+
+const menuDividerSelector = createSelector(menuBlock(menuDividerClass));
+const menuHeaderSelector = createSelector(menuBlock(menuHeaderClass));
+const menuGroupSelector = createSelector(menuBlock(menuGroupClass));
+const radioGroupSelector = createSelector(menuBlock(radioGroupClass));
+const submenuSelector = createSelector(menuBlock(subMenuClass));
+const menuContainerSelector = createSelector(bem(menuContainerClass)(), ["itemTransition"]);
+const menuButtonSelector = createSelector(bem(menuButtonClass)(), ["open"]);
+
+export {
+  menuContainerSelector,
+  menuButtonSelector,
+  menuSelector,
+  menuArrowSelector,
+  menuItemSelector,
+  menuDividerSelector,
+  menuHeaderSelector,
+  menuGroupSelector,
+  radioGroupSelector,
+  submenuSelector,
+};

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

@@ -0,0 +1,110 @@
+interface Base {
+  /**
+   * CSS selector for the element itself
+   */
+  name: string;
+}
+
+interface Directions {
+  /**
+   * Menu opens to the left
+   */
+  dirLeft: string;
+  /**
+   * Menu opens to the right
+   */
+  dirRight: string;
+  /**
+   * Menu opens to the top
+   */
+  dirTop: string;
+  /**
+   * Menu opens to the bottom
+   */
+  dirBottom: string;
+}
+
+export const menuSelector: Readonly<
+  Base &
+    Directions & {
+      /**
+       * Menu transitions from closed to open
+       */
+      stateOpening: string;
+      /**
+       * Menu is open
+       */
+      stateOpen: string;
+      /**
+       * Menu transitions from open to closed
+       */
+      stateClosing: string;
+      /**
+       * Menu is closed
+       */
+      stateClosed: string;
+    }
+>;
+
+export const menuArrowSelector: Readonly<Base & Directions>;
+
+export const menuItemSelector: Readonly<
+  Base & {
+    /**
+     * Menu item is hovered and focused
+     */
+    hover: string;
+    /**
+     * Menu item is disabled
+     */
+    disabled: string;
+    /**
+     * Menu item is a URL link (when the `href` prop is set)
+     */
+    anchor: string;
+    /**
+     * Menu item is checked (only for a radio or checkbox item)
+     */
+    checked: string;
+    /**
+     * Present on a submenu item when it's submenu is open
+     */
+    open: string;
+    /**
+     * Present on a submenu item, which is set by the `label` prop on `SubMenu` component
+     */
+    submenu: string;
+    /**
+     * Present on a `FocusableItem`
+     */
+    focusable: string;
+    /**
+     * Menu item is a radio item
+     */
+    typeRadio: string;
+    /**
+     * Menu item is a checkbox item
+     */
+    typeCheckbox: string;
+  }
+>;
+
+export const menuDividerSelector: Readonly<Base>;
+export const menuHeaderSelector: Readonly<Base>;
+export const menuGroupSelector: Readonly<Base>;
+export const radioGroupSelector: Readonly<Base>;
+export const submenuSelector: Readonly<Base>;
+
+export const menuContainerSelector: Readonly<
+  Base & {
+    itemTransition: string;
+  }
+>;
+
+export const menuButtonSelector: Readonly<
+  Base & {
+    open: string;
+  }
+>;
+
+export {};

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

@@ -0,0 +1,11 @@
+@mixin reset-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+@mixin remove-focus {
+  &:focus {
+    outline: none;
+  }
+}

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

@@ -0,0 +1,20 @@
+@use 'sass:math';
+
+$color: #212529;
+$color-dark: #cad1d8;
+$color-disabled: #aaa;
+$color-disabled-dark: #666;
+
+$header-color: #888;
+$divider-color: rgba(0, 0, 0, 0.12);
+$divider-color-dark: #3a3a3a;
+$border-color: rgba(0, 0, 0, 0.1);
+$border-color-dark: #333;
+
+$background-color: #fff;
+$background-color-dark: #22262c;
+$background-color-hover: #ebebeb;
+$background-color-hover-dark: #31363c;
+
+$arrow-size: 0.75rem;
+$arrow-pos: -(math.div($arrow-size, 2));

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

@@ -0,0 +1,80 @@
+@use 'var';
+@use 'mixins';
+
+.szh-menu {
+  @include mixins.reset-list;
+  @include mixins.remove-focus;
+  box-sizing: border-box;
+  width: max-content;
+  z-index: 100;
+  border: 1px solid var.$border-color;
+  background-color: var.$background-color;
+
+  &__arrow {
+    box-sizing: border-box;
+    width: var.$arrow-size;
+    height: var.$arrow-size;
+    background-color: var.$background-color;
+    border: 1px solid transparent;
+    border-left-color: var.$border-color;
+    border-top-color: var.$border-color;
+    z-index: -1;
+
+    &--dir-left {
+      right: var.$arrow-pos;
+      transform: translateY(-50%) rotate(135deg);
+    }
+
+    &--dir-right {
+      left: var.$arrow-pos;
+      transform: translateY(-50%) rotate(-45deg);
+    }
+
+    &--dir-top {
+      bottom: var.$arrow-pos;
+      transform: translateX(-50%) rotate(-135deg);
+    }
+
+    &--dir-bottom {
+      top: var.$arrow-pos;
+      transform: translateX(-50%) rotate(45deg);
+    }
+  }
+
+  &__item {
+    @include mixins.remove-focus;
+    cursor: pointer;
+
+    &--hover {
+      background-color: var.$background-color-hover;
+    }
+
+    &--focusable {
+      cursor: default;
+      background-color: inherit;
+    }
+
+    &--disabled {
+      cursor: default;
+      color: var.$color-disabled;
+    }
+  }
+
+  &__group {
+    box-sizing: border-box;
+  }
+
+  &__radio-group {
+    @include mixins.reset-list;
+  }
+
+  &__divider {
+    height: 1px;
+    margin: 0.5rem 0;
+    background-color: var.$divider-color;
+  }
+}
+
+.szh-menu-button {
+  box-sizing: border-box;
+}