@infinite-table/infinite-react 0.4.12 → 0.5.0

package/src/components/Menu/MenuCls.css.ts

@@ -0,0 +1,139 @@
+import { fallbackVar, style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { ThemeVars } from '../InfiniteTable/theme.css';
+import {
+  alignItems,
+  boxSizingBorderBox,
+  cursor,
+  display,
+  flexFlow,
+  margin,
+  position,
+  userSelect,
+} from '../InfiniteTable/utilities.css';
+
+export const MenuCls = style([
+  boxSizingBorderBox,
+  position.relative,
+  display.inlineGrid,
+  flexFlow.column,
+  margin.none,
+  {
+    padding: ThemeVars.components.Menu.padding,
+    color: ThemeVars.components.Menu.color,
+    background: ThemeVars.components.Menu.background,
+    borderRadius: ThemeVars.components.Menu.borderRadius,
+    outline: 'none',
+    boxShadow: `0 6px 12px -2px ${ThemeVars.components.Menu.shadowColor},0 3px 7px -3px ${ThemeVars.components.Menu.background}`,
+  },
+]);
+
+export const MenuRowCls = style({
+  display: 'contents',
+});
+
+const keyboardActiveItemBorder = fallbackVar(
+  ThemeVars.components.Row.activeBorder,
+  `${fallbackVar(
+    ThemeVars.components.Row.activeBorderWidth,
+    ThemeVars.components.Cell.activeBorderWidth,
+  )} ${fallbackVar(
+    ThemeVars.components.Row.activeBorderStyle,
+    ThemeVars.components.Cell.activeBorderStyle,
+  )} ${fallbackVar(
+    ThemeVars.components.Row.activeBorderColor,
+    `rgb(${ThemeVars.components.Cell.activeBorderColor_R} ${ThemeVars.components.Cell.activeBorderColor_G} ${ThemeVars.components.Cell.activeBorderColor_B})`,
+  )}`,
+);
+export const MenuItemCls = recipe({
+  base: [
+    {
+      paddingBlock: ThemeVars.components.Menu.cellPaddingVertical,
+      paddingInline: ThemeVars.components.Menu.cellPaddingHorizontal,
+      marginBlock: ThemeVars.components.Menu.cellMarginVertical,
+      border: keyboardActiveItemBorder,
+      borderColor: 'transparent',
+    },
+    display.flex,
+    alignItems.center,
+    userSelect.none,
+  ],
+  variants: {
+    disabled: {
+      true: [
+        {
+          opacity: ThemeVars.components.Menu.itemDisabledOpacity,
+          background: ThemeVars.components.Menu.itemDisabledBackground,
+        },
+        cursor.default,
+        userSelect.none,
+      ],
+      false: [cursor.pointer],
+    },
+    active: {
+      true: {},
+      false: {},
+    },
+    pressed: {
+      false: {},
+      true: {},
+    },
+    keyboardActive: {
+      true: {
+        selectors: {
+          [`${MenuCls}:focus-within > ${MenuRowCls} > &`]: {
+            border: keyboardActiveItemBorder,
+          },
+          [`${MenuCls}:focus-within > ${MenuRowCls} > &:first-child:last-child`]:
+            {
+              border: keyboardActiveItemBorder,
+            },
+          [`${MenuCls}:focus-within > ${MenuRowCls} > &:first-child`]: {
+            borderRightColor: 'transparent',
+          },
+          [`${MenuCls}:focus-within > ${MenuRowCls} > &:last-child`]: {
+            borderLeftColor: 'transparent',
+          },
+          [`${MenuCls}:focus-within > ${MenuRowCls} > &:not(:first-child):not(:last-child)`]:
+            {
+              borderLeftColor: 'transparent',
+              borderRightColor: 'transparent',
+            },
+        },
+      },
+      false: {},
+    },
+  },
+  compoundVariants: [
+    {
+      variants: {
+        active: true,
+        disabled: false,
+      },
+      style: {
+        background: ThemeVars.components.Menu.itemActiveBackground,
+        opacity: ThemeVars.components.Menu.itemActiveOpacity,
+      },
+    },
+    {
+      variants: {
+        pressed: true,
+        active: true,
+        disabled: false,
+      },
+      style: {
+        background: ThemeVars.components.Menu.itemPressedBackground,
+        opacity: ThemeVars.components.Menu.itemPressedOpacity,
+      },
+    },
+  ],
+});
+
+export const MenuSeparatorCls = style([
+  {
+    borderTop: '1px solid currentColor',
+    borderBottom: 0,
+    marginTop: `calc(${ThemeVars.components.Menu.cellPaddingVertical} / 2)`,
+    marginBottom: `calc(${ThemeVars.components.Menu.cellPaddingVertical} / 2)`,
+  },
+]);

package/src/components/Menu/MenuContext.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+import { MenuContextValue } from './MenuContextValue';
+
+export const MenuContext = createContext<MenuContextValue | null>(null);
+
+export function useMenuContext(): MenuContextValue {
+  const contextValue = useContext(MenuContext);
+
+  return contextValue!;
+}

package/src/components/Menu/MenuContextValue.ts

@@ -0,0 +1,15 @@
+import {
+  MenuActions,
+  // MenuApi,
+  // MenuComputedValues,
+  MenuState,
+} from './MenuState';
+
+export interface MenuContextValue {
+  // imperativeApi: MenuApi;
+  componentState: MenuState;
+  componentActions: MenuActions;
+  // computed: MenuComputedValues;
+  // getComputed: () => MenuComputedValues;
+  getState: () => MenuState;
+}

package/src/components/Menu/MenuProps.ts

@@ -0,0 +1,98 @@
+import { CSSProperties, HTMLProps } from 'react';
+import { ElementContainerGetter, OverlayShowParams } from '../hooks/useOverlay';
+import { NonUndefined } from '../types/NonUndefined';
+import { RemoveObject } from '../types/RemoveObject';
+import { Renderable } from '../types/Renderable';
+import { MenuApi, MenuState } from './MenuState';
+
+export type MenuRenderable = string | number | RemoveObject<Renderable>;
+
+export type MenuRuntimeItemSelectable = {
+  type: 'item';
+  key: string;
+  parentMenuId: string;
+  active: boolean;
+  keyboardActive: boolean;
+  value: MenuItemObject;
+  style?: CSSProperties;
+  className?: string;
+  disabled: boolean;
+  span: number;
+  menu: MenuProps | (() => MenuProps) | null;
+  originalMenuItem: MenuItemObject;
+};
+export type MenuRuntimeItem =
+  | MenuRuntimeItemSelectable
+  | {
+      type: 'decoration';
+      value: MenuDecoration;
+      style: CSSProperties;
+      span: number;
+    };
+
+export type MenuChildrenFnParam = {
+  item: MenuRuntimeItem;
+  column: MenuColumn;
+  columns: MenuColumn[];
+};
+
+export type MenuProps = {
+  id?: string;
+  portalContainer?: ElementContainerGetter | false | null;
+  items?: MenuItemDefinition[];
+  constrainTo?: OverlayShowParams['constrainTo'];
+  columns?: MenuColumn[];
+  children?: MenuRenderable;
+  wrapLabels?: boolean;
+  onShow?: (state: MenuState, api: MenuApi) => void;
+  onHide?: (state: MenuState) => void;
+  onHideIntent?: (state: MenuState) => void;
+  bubbleActionsFromSubmenus?: boolean;
+  addSubmenuColumnIfNeeded?: boolean;
+  onAction?: (key: string, item: MenuItemObject) => void;
+  parentMenuId?: string;
+  parentMenuItemKey?: string;
+  autoFocus?: boolean;
+};
+
+export type MenuSeparator = '-';
+export type MenuItemDefinition =
+  | MenuItemObject
+  | MenuDecoration
+  | MenuSeparator;
+
+type MenuItemSubMenu = Omit<MenuProps, 'children' | 'items'> & {
+  items: (MenuItemObject | MenuSeparator)[];
+};
+
+export type MenuItemObject = {
+  key: string;
+  label: NonUndefined<MenuRenderable>;
+  span?: number;
+  description?: MenuRenderable;
+  disabled?: boolean;
+  menu?: MenuItemSubMenu | (() => MenuItemSubMenu);
+  style?: CSSProperties;
+  className?: string;
+  onClick?: (event: React.MouseEvent) => void;
+  onAction?: (key: string, item: MenuItemObject) => void;
+  [k: string]: any;
+};
+
+export type MenuDecoration = MenuRenderable;
+
+export type MenuColumn = {
+  flex?: number;
+  width?: string | number;
+  style?: CSSProperties;
+  name: string;
+  field?: string;
+  render?: (param: MenuColumnRenderParam) => MenuRenderable;
+};
+
+export type MenuColumnRenderParam = {
+  item: MenuItemObject;
+  column: MenuColumn;
+  value: MenuRenderable;
+  domProps: HTMLProps<HTMLDivElement>;
+};

package/src/components/Menu/MenuState.ts

@@ -0,0 +1,56 @@
+import { MutableRefObject } from 'react';
+import { ComponentStateActions } from '../hooks/useComponentState/types';
+import {
+  MenuColumn,
+  MenuProps,
+  MenuRuntimeItem,
+  MenuRuntimeItemSelectable,
+} from './MenuProps';
+
+export type MenuSetupState = {
+  domRef: MutableRefObject<HTMLDivElement | null>;
+  keyboardActiveItemKey: string | null;
+  activeItemKey: string | null;
+  generatedId: string;
+  focused: boolean;
+  destroyed: boolean;
+};
+
+export type MenuDerivedState = {
+  runtimeItems: MenuRuntimeItem[];
+  runtimeSelectableItems: MenuRuntimeItemSelectable[];
+  columns: MenuColumn[];
+  menuId: string;
+};
+
+export type MenuMappedState = {
+  parentMenuId: MenuProps['parentMenuId'];
+  parentMenuItemKey: MenuProps['parentMenuItemKey'];
+  constrainTo: MenuProps['constrainTo'];
+  autoFocus: MenuProps['autoFocus'];
+  onHideIntent: MenuProps['onHideIntent'];
+  onAction: MenuProps['onAction'];
+  onShow: MenuProps['onShow'];
+  onHide: MenuProps['onHide'];
+  wrapLabels: MenuProps['wrapLabels'];
+};
+
+export interface MenuState
+  extends MenuMappedState,
+    MenuDerivedState,
+    MenuSetupState {}
+
+export type MenuActions = ComponentStateActions<MenuState>;
+
+export type MenuApi = {
+  focus: VoidFunction;
+  getMenuId: () => string;
+  getParentMenuId: () => string | undefined;
+};
+export type MenuComputedValues = {};
+export type MenuRuntimeItemContext = {
+  columns: MenuColumn[];
+  keyboardActiveItemKey: string | null;
+  activeItemKey: string | null;
+  menuId: string;
+};

package/src/components/Menu/MenuTriangleContext.ts

@@ -0,0 +1,352 @@
+import { getGlobal } from '../../utils/getGlobal';
+import { Point } from '../../utils/pageGeometry/Point';
+import { Rectangle } from '../../utils/pageGeometry/Rectangle';
+import { Triangle } from '../../utils/pageGeometry/Triangle';
+import { raf } from '../../utils/raf';
+
+const ACTIVE_OTHER_MENU_ITEM_TIMEOUT = 250;
+
+export function waitForValueOnRaf<ReturnType>(
+  getter: () => ReturnType,
+  timeout: number = 100,
+): Promise<ReturnType | undefined> {
+  const start = Date.now();
+  return new Promise((resolve) => {
+    let value;
+
+    const fn = () => {
+      value = getter();
+      if (value !== undefined) {
+        resolve(value);
+        return;
+      }
+      if (Date.now() - start > timeout) {
+        resolve(undefined);
+        return;
+      }
+
+      raf(fn);
+    };
+
+    // it's important to start it on next tick
+    raf(() => {
+      fn();
+    });
+  });
+}
+
+const globalObject = getGlobal();
+
+type MenuTriangleParams = {
+  timeout?: number;
+  /**
+   * NOTE: #IAC-false
+   * onItemActivateChange will only be called
+   * with `itemKey: null` when the user has an active item that has no submenu and
+   * leaves the menu hovering off that item directly outside the menu (not over another item).
+   *
+   * In this case, we want to mark that menu item as inactive, as it doesn't have any submenus.
+   *
+   * If the user hovers away from the menu when an item (that has submenu) is active,
+   * we keep that as active even when the mouse is away, so we don't call onItemActivateChange with `itemKey: null`.
+   */
+  onItemActivate: (itemKey: string | null, target: HTMLElement | null) => void;
+  itemHasSubMenu: (itemKey: string) => boolean;
+  getMenuRectFor: (itemKey: string) => Rectangle | undefined;
+  parentMenuId?: string;
+};
+/**
+ * Here's the logic of menu and the menu triangle solution:
+ *
+ * - use hovers a menu item
+ * - user then diagonally goes down and to the right to access the submenu
+ * and even though along the way other menu items are hovered, the submenu
+ * is not closed (and submenus for hovered items are not displayed along the way) - unless the move is slow (take more than say 200ms). When
+ * an item has the submenu visible, we call it "active".
+ * - if the move reverses, the submenu is closed and the last hovered item is activated
+ *
+ * Even items with no submenus can be active.
+ *
+ */
+
+export class MenuTriangleContext {
+  private activeItem: string | null = null;
+  private currentHoveredItem: string | null = null;
+
+  // private activeItemTimestamp: number = 0;
+  private activeItemLeavePoint: Point | null = null;
+
+  private menuLeaveTimeoutId: any = null;
+
+  // private activeItemEventTarget: HTMLElement | null = null;
+  private activeItemMenuRect: Rectangle | null = null;
+
+  private lastPointerMoveTimestamp: number = 0;
+  private mouseMoveTimeoutId: number = 0;
+  private params: MenuTriangleParams;
+
+  private lastHorizontalDiff: number = 0;
+
+  constructor(params: MenuTriangleParams) {
+    this.params = params;
+  }
+
+  private getTimeout = () => {
+    return this.params.timeout || ACTIVE_OTHER_MENU_ITEM_TIMEOUT;
+  };
+
+  private getPointerMoveTarget = () => {
+    return document.documentElement || globalObject;
+  };
+
+  private removePointerMoveListener = () => {
+    this.getPointerMoveTarget().removeEventListener(
+      'pointermove',
+      this.onPointerMoveWhileActiveItem,
+    );
+  };
+
+  /**
+   * The whole point of this method is to change the active item when the mouse moves,
+   * if the user is moving slowly or outside the menu triangle.
+   *
+   * This is called while having a currently active item.
+   */
+  private onPointerMoveWhileActiveItem = (pointerMoveEvent?: PointerEvent) => {
+    clearTimeout(this.mouseMoveTimeoutId);
+
+    if (!pointerMoveEvent) {
+      // we called it ourselves
+      // in order to update the timestamp of the last move
+      this.lastPointerMoveTimestamp = Date.now();
+      // and we exit early
+      return;
+    }
+
+    // if there is no hovered item, or the hovered item is the active one, we can return
+    // because we don't need tp update the active item
+    if (
+      !this.currentHoveredItem ||
+      this.currentHoveredItem === this.activeItem
+    ) {
+      return;
+    }
+
+    const now = Date.now();
+
+    if (!this.lastPointerMoveTimestamp) {
+      this.lastPointerMoveTimestamp = now;
+    }
+
+    const timeElapsed = now - this.lastPointerMoveTimestamp;
+    const timeoutGone = timeElapsed > this.getTimeout();
+
+    // update the value of the last move timestamp
+    this.lastPointerMoveTimestamp = now;
+
+    const activateHoveredItem = () => {
+      this.setActiveItem(null, null);
+      // so we trigger onItemChange for the last hovered item again
+      // because the move was slow or out of triangle
+
+      this.onItemChange(true, this.currentHoveredItem!, pointerMoveEvent);
+    };
+
+    if (timeoutGone) {
+      // the last mouse move was too long ago
+      // so we trigger onItemChange for the last hovered item
+      activateHoveredItem();
+      return;
+    }
+
+    let hoveredItem = this.currentHoveredItem;
+    this.mouseMoveTimeoutId = setTimeout(() => {
+      if (hoveredItem !== this.currentHoveredItem) {
+        // the hover item has changed, so we're out of sync
+        return;
+      }
+
+      const now = Date.now();
+      const elapsedTime = now - this.lastPointerMoveTimestamp;
+      const timeoutGone = elapsedTime > this.getTimeout();
+
+      if (timeoutGone) {
+        activateHoveredItem();
+      }
+    }, this.getTimeout()) as any as number;
+
+    const currentPoint = new Point({
+      left: pointerMoveEvent.clientX,
+      top: pointerMoveEvent.clientY,
+    });
+
+    // for checking the triangle logic, we have to have those, otherwise we can't continue
+    if (!this.activeItemMenuRect || !this.activeItemLeavePoint) {
+      return;
+    }
+
+    // we need to check if the user is moving the mouse back from the submenu to the menu again
+    // this is a reverse movement, so we should activate the last hovered item
+
+    const submenuToTheRight =
+      this.activeItemLeavePoint.left < this.activeItemMenuRect.left;
+
+    const horizontalDirectionSign = submenuToTheRight ? 1 : -1;
+    const horizontalDiff =
+      horizontalDirectionSign *
+      (currentPoint.left - this.activeItemLeavePoint.left);
+
+    if (horizontalDiff - this.lastHorizontalDiff < 0) {
+      this.lastHorizontalDiff = 0;
+      activateHoveredItem();
+      return;
+    }
+    this.lastHorizontalDiff = horizontalDiff;
+
+    // we need to check if the user is moving diagonally down and to the right/left (depending on the submenu position)
+    const triangle = submenuToTheRight
+      ? new Triangle([
+          this.activeItemLeavePoint,
+          this.activeItemMenuRect.getTopLeft(),
+          this.activeItemMenuRect.getBottomLeft(),
+        ])
+      : new Triangle([
+          // in this case, the menu is placed to the left, so adjust the triangle
+          this.activeItemLeavePoint,
+          this.activeItemMenuRect.getTopRight(),
+          this.activeItemMenuRect.getBottomRight(),
+        ]);
+
+    if (!triangle.containsPoint(currentPoint)) {
+      this.setActiveItem(null, null);
+      this.onItemChange(true, this.currentHoveredItem!, pointerMoveEvent);
+    }
+  };
+
+  /**
+   * See #IAC-false note above
+   */
+  private setupMenuLeaveTracking = () => {
+    this.menuLeaveTimeoutId = setTimeout(() => {
+      if (this.activeItem && this.params.itemHasSubMenu(this.activeItem)) {
+        // as per the note #IAC-false
+        // we don't continue clearing the active item if it has submenus
+        return;
+      }
+      this.setActiveItem(null, null);
+    }, this.getTimeout());
+  };
+
+  /**
+   * This function should call onItemActivate to notify whoever's listening
+   */
+  private setActiveItem = (
+    itemKey: string | null,
+    target: HTMLElement | null,
+  ) => {
+    if (itemKey === this.activeItem) {
+      return;
+    }
+
+    if (itemKey == null) {
+      this.removePointerMoveListener();
+      this.params.onItemActivate(null, null);
+
+      this.activeItem = null;
+      // this.activeItemTimestamp = 0;
+      // this.activeItemEventTarget = null;
+      this.activeItemMenuRect = null;
+
+      return;
+    }
+
+    this.activeItem = itemKey;
+    // this.activeItemTimestamp = Date.now();
+    // this.activeItemEventTarget = target as HTMLElement;
+
+    this.params.onItemActivate(itemKey, target);
+
+    this.activeItemMenuRect = null;
+    // wait for the active item to be rendered
+    // so we can retrieve the rect
+
+    waitForValueOnRaf(() => {
+      if (this.activeItem != itemKey) {
+        return false;
+      }
+      return this.params.getMenuRectFor(itemKey);
+    }).then((rect: Rectangle | false | undefined) => {
+      if (this.activeItem != itemKey) {
+        return;
+      }
+      if (rect) {
+        this.activeItemMenuRect = rect;
+      }
+    });
+  };
+
+  /**
+   * This function is called when an item receives mouse enter or mouse leave.
+   */
+  private onItemChange = (
+    hovered: boolean,
+    itemKey: string,
+    event: PointerEvent,
+  ) => {
+    clearTimeout(this.menuLeaveTimeoutId);
+    clearTimeout(this.mouseMoveTimeoutId);
+
+    if (!hovered) {
+      this.removePointerMoveListener();
+
+      if (itemKey === this.activeItem) {
+        // we're leaving the currently opened item
+        // so make sure we save the leave coords as we might need them
+        // later in the triangle logic
+        this.activeItemLeavePoint = new Point({
+          left: event.clientX,
+          top: event.clientY,
+        });
+      }
+
+      // we might be leaving the menu for good and stop moving the mouse for a while
+      // so we need to make sure we start the timeout
+      this.setupMenuLeaveTracking();
+      return;
+    }
+
+    // if by some accident this gets called twice one after the other, we can simply ignore this
+    // if (this.currentHoveredItem === itemKey) {
+    //   return;
+    // }
+
+    this.currentHoveredItem = itemKey;
+    if (!this.activeItem || !this.params.itemHasSubMenu(this.activeItem)) {
+      // no item is currently activated or the currently activated item does not have a submenu
+      // so we can safely activate the hovered item immediately
+      this.setActiveItem(itemKey, event.target as HTMLElement);
+      return;
+    }
+
+    // there is an active item already, and the active item does have a submenu
+    // and the active item is different from the currently hovered item
+    // so we listen to mouse moves
+
+    this.onPointerMoveWhileActiveItem(); // we need to call this in order to initialize the timestamp of the last "move" (to the value of Date.now())
+    this.getPointerMoveTarget().addEventListener(
+      'pointermove',
+      this.onPointerMoveWhileActiveItem,
+    );
+  };
+
+  getHandlers = () => {
+    return {
+      onItemEnter: (itemKey: string, event: PointerEvent) => {
+        this.onItemChange(true, itemKey, event);
+      },
+      onItemLeave: (itemKey: string, event: PointerEvent) => {
+        this.onItemChange(false, itemKey, event);
+      },
+    };
+  };
+}