@linzjs/step-ag-grid 1.4.4 → 1.4.6

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

@@ -0,0 +1,93 @@
+import { placeArrowHorizontal } from "./placeArrowHorizontal";
+import { getPositionHelpers } from "./getPositionHelpers";
+import { MutableRefObject } from "react";
+import { MenuDirection } from "../index";
+
+export interface placeToporBottomParams {
+  anchorRect: DOMRect;
+  placeToporBottomX: number;
+  placeTopY: number;
+  placeBottomY: number;
+  arrowRef: MutableRefObject<HTMLElement | null>;
+  arrow?: boolean;
+  direction: "left" | "right" | "top" | "bottom";
+  position: "auto" | "anchor" | "initial";
+}
+
+export const placeToporBottom = (
+  props: ReturnType<typeof getPositionHelpers> & placeToporBottomParams,
+): { arrowX?: number | undefined; x: number; y: number; computedDirection: MenuDirection } => {
+  const {
+    anchorRect,
+    containerRect,
+    menuRect,
+    placeToporBottomX,
+    placeTopY,
+    placeBottomY,
+    getTopOverflow,
+    getBottomOverflow,
+    confineHorizontally,
+    confineVertically,
+    arrowRef,
+    arrow,
+    direction,
+    position,
+  } = props;
+  // make sure invalid direction is treated as 'bottom'
+  let computedDirection: MenuDirection = 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,61 @@
+import { getPositionHelpers } from "./getPositionHelpers";
+import { MenuDirection } from "../index";
+
+export const positionContextMenu = ({
+  positionHelpers,
+  anchorPoint,
+}: {
+  positionHelpers: ReturnType<typeof getPositionHelpers>;
+  anchorPoint: { x: number; y: number };
+}): {
+  x: number;
+  y: number;
+  computedDirection: MenuDirection;
+} => {
+  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: MenuDirection = "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,80 @@
+import { placeLeftorRight } from "./placeLeftorRight";
+import { placeToporBottom } from "./placeToporBottom";
+import { MutableRefObject } from "react";
+import { getPositionHelpers } from "./getPositionHelpers";
+import { MenuDirection } from "../index";
+
+interface positionMenuProps {
+  offsetX: number;
+  offsetY: number;
+  arrowRef: MutableRefObject<HTMLDivElement | null>;
+  anchorRef: MutableRefObject<HTMLElement | null>;
+  arrow?: boolean;
+  direction: MenuDirection;
+  position: "auto" | "anchor" | "initial";
+  align: "start" | "center" | "end";
+  positionHelpers: ReturnType<typeof getPositionHelpers>;
+}
+
+export const positionMenu = (props: positionMenuProps) => {
+  const { arrow, align, direction, offsetX, offsetY, position, anchorRef, arrowRef, positionHelpers } = props;
+  const { menuRect, containerRect } = positionHelpers;
+
+  let horizontalOffset = offsetX;
+  let verticalOffset = offsetY;
+  if (arrow && arrowRef.current) {
+    if (direction === "left" || direction === "right") {
+      horizontalOffset += arrowRef.current.offsetWidth;
+    } else {
+      verticalOffset += arrowRef.current.offsetHeight;
+    }
+  }
+
+  const anchorRect = anchorRef.current
+    ? anchorRef.current.getBoundingClientRect()
+    : ({ left: 0, right: 0, top: 200, bottom: 200, width: 200, height: 200 } as DOMRect);
+  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,83 @@
+import {
+  menuContainerClass,
+  menuButtonClass,
+  menuClass,
+  menuArrowClass,
+  menuItemClass,
+  menuDividerClass,
+  menuHeaderClass,
+  menuGroupClass,
+  radioGroupClass,
+  subMenuClass,
+} from "../utils";
+
+const bem =
+  (block: string) =>
+  (element?: string) =>
+  (modifier?: string): string => {
+    let selector = `.${block}`;
+    if (element) selector += `__${element}`;
+    if (modifier) selector += `--${modifier}`;
+    return selector;
+  };
+
+const createSelector = (blockElement: (modifier?: string) => string, modifiers: string[] = []) => {
+  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;
+}

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);
+}