@dmsi/wedgekit-react 0.0.550 → 0.0.552

package/src/components/Menu.tsx

@@ -1,316 +0,0 @@
-"use client";
-
-import clsx from "clsx";
-import {
-  ComponentProps,
-  ReactNode,
-  RefObject,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { createPortal } from "react-dom";
-import { useMenuPosition } from "./useMenuSystem";
-import { findDocumentRoot } from "../utils";
-import { useMatchesMobile } from "../hooks";
-
-export type MenuPosition = "right" | "bottom" | "bottom-right";
-
-type MenuProps = {
-  id?: string;
-  testid?: string;
-  positionTo?: RefObject<HTMLElement | null>;
-  mobilePositionTo?: RefObject<HTMLElement | null>;
-  show?: boolean;
-  setShow?: (value: boolean) => void;
-  position?: MenuPosition;
-  maxHeight?: string;
-  topOffset?: number | null;
-  mobileBackMenuOption?: () => ReactNode;
-  mobileHide?: boolean;
-  useDefaultMinWidth?: boolean;
-  autoFocusOff?: boolean;
-  menuName?: string;
-  calculateMinMaxHeight?: boolean;
-};
-
-export const Menu = ({
-  id,
-  testid,
-  children,
-  className,
-  ref,
-  positionTo,
-  mobilePositionTo,
-  show,
-  setShow,
-  position = "bottom",
-  maxHeight: customMaxHeight,
-  topOffset,
-  mobileBackMenuOption,
-  mobileHide,
-  useDefaultMinWidth,
-  autoFocusOff,
-  menuName,
-  calculateMinMaxHeight,
-  ...props
-}: ComponentProps<"div"> & MenuProps) => {
-  const internalRef = useRef<HTMLDivElement>(null);
-  const actualRef = (ref || internalRef) as RefObject<HTMLDivElement>;
-  const [maxHeight, setMaxHeight] = useState("180px");
-  const isMobile = useMatchesMobile();
-  const { menuPosition, updatePosition } = useMenuPosition(
-    isMobile && mobilePositionTo ? mobilePositionTo! : positionTo!,
-    position,
-    {
-      isOpen: show,
-      setIsOpen: setShow,
-      menuRef: internalRef,
-      topOffset,
-      isMobile: !!(isMobile && mobilePositionTo)
-    },
-  );
-
-  useEffect(() => {
-    if (calculateMinMaxHeight) {
-      return;
-    }
-
-    const raf = requestAnimationFrame(() => {
-      if (!actualRef.current || customMaxHeight) {
-        return;
-      }
-
-      if (actualRef.current.childElementCount > 4) {
-        let accumulatedHeight = 0;
-
-        Array.from(actualRef.current.children).forEach((child, index) => {
-          if (index >= 5) {
-            return;
-          }
-
-          accumulatedHeight += child.clientHeight;
-        });
-
-        accumulatedHeight = (accumulatedHeight / 5) * 4.5; // default max height is set to 4.5 times of the first 5 child height of the menu
-
-        setMaxHeight(`${accumulatedHeight}px`);
-      }
-    });
-
-    return () => {
-      cancelAnimationFrame(raf);
-    };
-  }, [actualRef.current, customMaxHeight, calculateMinMaxHeight]);
-
-  useEffect(() => {
-    if (!calculateMinMaxHeight) {
-      return;
-    }
-
-    if (positionTo?.current && actualRef.current) {
-      const positionToRect = positionTo.current.getBoundingClientRect();
-      const offsetInPx = 16;
-
-      const calculatedMaxHeight = window.innerHeight - positionToRect.bottom - offsetInPx;
-
-      setMaxHeight(`${calculatedMaxHeight}px`);
-    }
-  }, [actualRef.current, positionTo?.current, calculateMinMaxHeight])
-
-  useEffect(() => {
-    if (!show) {
-      return;
-    }
-
-    initializeMenuFocus();
-    updatePosition();
-  }, [show, updatePosition]);
-
-  useEffect(() => {
-    if (!show || !setShow) {
-      return;
-    }
-
-    const handleEscapeKey = (event: KeyboardEvent) => {
-      if (event.key !== "Escape") {
-        return;
-      }
-
-      setShow(false);
-      positionTo?.current?.focus();
-    };
-
-    document.addEventListener("keydown", handleEscapeKey);
-
-    return () => {
-      document.removeEventListener("keydown", handleEscapeKey);
-    };
-  }, [show, setShow, positionTo]);
-
-  return (
-    show &&
-    createPortal(
-      <div
-        id={id}
-        data-testid={testid}
-        ref={setRefs}
-        className={clsx(
-          "shadow-4 rounded-base bg-background-grouped-primary-normal overflow-x-hidden overflow-y-auto flex flex-col outline-0",
-          "fixed",
-          "z-50",
-          "max-w-screen",
-          mobileHide && "opacity-0 pointer-events-none",
-          className,
-        )}
-        {...props}
-        style={{
-          ...props.style,
-          maxHeight: customMaxHeight || maxHeight,
-          ...menuPosition,
-          minWidth: useDefaultMinWidth ? "212px" : menuPosition.minWidth,
-        }}
-        onKeyDown={handleKeydown}
-        onMouseDown={stopPropagation}
-        onMouseUp={stopPropagation}
-        onTouchStart={stopPropagation}
-        onTouchEnd={stopPropagation}
-        tabIndex={-1}
-        data-menu={menuName ?? ""}
-      >
-        {mobileBackMenuOption?.()}
-
-        {children}
-      </div>,
-      findDocumentRoot(internalRef.current),
-    )
-  );
-
-  function handleKeydown(e: React.KeyboardEvent<HTMLDivElement>): void {
-    if (!internalRef.current) {
-      return;
-    }
-
-    if (e.key !== "Escape") {
-      e.stopPropagation();
-    }
-
-    const menuOptions = Array.from(
-      internalRef.current.querySelectorAll('[role="menuitem"]'),
-    ) as HTMLElement[];
-
-    if (menuOptions.length === 0) {
-      return;
-    }
-
-    let currentIndex = -1;
-    const focusedElement = document.activeElement;
-
-    for (let i = 0; i < menuOptions.length; i++) {
-      if (menuOptions[i] === focusedElement) {
-        currentIndex = i;
-        break;
-      }
-    }
-
-    switch (e.key) {
-      case "ArrowDown": {
-        e.preventDefault();
-        const nextIndex =
-          currentIndex < menuOptions.length - 1 ? currentIndex + 1 : 0;
-        menuOptions[nextIndex].focus();
-        break;
-      }
-
-      case "ArrowUp": {
-        e.preventDefault();
-        const prevIndex =
-          currentIndex > 0 ? currentIndex - 1 : menuOptions.length - 1;
-        menuOptions[prevIndex].focus();
-        break;
-      }
-
-      case "Home":
-        e.preventDefault();
-        menuOptions[0].focus();
-        break;
-
-      case "End":
-        e.preventDefault();
-        menuOptions[menuOptions.length - 1].focus();
-        break;
-
-      case "Enter":
-      case " ":
-      case "ArrowRight":
-        e.preventDefault();
-
-        if (currentIndex >= 0) {
-          menuOptions[currentIndex].click();
-        }
-
-        break;
-
-      case "ArrowLeft":
-        e.preventDefault();
-        positionTo?.current?.click();
-        positionTo?.current?.focus();
-
-        break;
-    }
-  }
-
-  function initializeMenuFocus() {
-    if (!autoFocusOff) {
-      internalRef.current?.focus();
-    }
-
-    const selectedOption = internalRef.current?.querySelector(
-      "[data-selected]",
-    ) as HTMLElement | null;
-
-    // Get the first menu item (not submenu wrapper)
-    const firstMenuItem = internalRef.current?.querySelector(
-      '[role="menuitem"]',
-    ) as HTMLElement | null;
-
-    const targetElement = selectedOption || firstMenuItem;
-
-    if (!targetElement) {
-      return;
-    }
-
-    targetElement.scrollIntoView({
-      block: "nearest",
-      behavior: "instant",
-    });
-
-    if (autoFocusOff) {
-      return;
-    }
-
-    requestAnimationFrame(() => {
-      targetElement.focus();
-    });
-  }
-
-  function setRefs(node: HTMLDivElement | null) {
-    internalRef.current = node;
-
-    if (ref) {
-      if (typeof ref === "function") {
-        ref(node);
-      } else {
-        ref.current = node;
-      }
-    }
-  }
-
-  function stopPropagation(
-    e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>,
-  ) {
-    e.stopPropagation();
-  }
-};
-
-Menu.displayName = "Menu";

package/src/components/MenuOption.tsx

@@ -1,330 +0,0 @@
-"use client";
-
-import clsx from "clsx";
-import { PropsWithChildren, ReactNode, RefObject, useId, useRef, useState } from "react";
-import { baseTransition, componentGap, componentPadding, layoutGroupGap } from "../classNames";
-import { AsProps } from "../types";
-import { Label, Tags } from "./Label";
-import { Paragraph } from "./Paragraph";
-import { Icon } from "./Icon";
-import { MenuPosition } from "./Menu";
-import { useMatchesMobile } from "../hooks";
-import { Caption } from "./Caption";
-
-type BaseProps = PropsWithChildren<{
-  id?: string;
-  testid?: string;
-  disabled?: boolean;
-  value?: string;
-  before?: ReactNode;
-  after?: ReactNode;
-  onClick?: (id: string, value?: string) => void;
-  ref?: React.Ref<HTMLDivElement> | undefined;
-  mobilePositionTo?: RefObject<HTMLElement | null>;
-  selected?: boolean;
-  currentSubMenuLevel?: number | null;
-  small?: boolean;
-}> &
-  (
-    | {
-        subMenu: (props: {
-          menuId: string;
-          positionTo?: RefObject<HTMLDivElement>;
-          mobilePositionTo?: RefObject<HTMLElement | null>;
-          position?: MenuPosition;
-          subMenuLevel: number;
-          mobileBackMenuOption?: () => ReactNode;
-          mobileHide?: boolean;
-          autoFocusOff?: boolean;
-        }) => ReactNode;
-        subMenuLevel?: number;
-        onSubMenuHover: (menuId: string, level: number) => void;
-        onSubMenuLeave: (level: number) => void;
-        onSubMenuEnter: () => void;
-        onMouseMove: () => void;
-        toggleMenu: (id: string, level: number) => void;
-        activeMenu: string;
-        closeSubMenuLevel: (level: number) => void;
-      }
-    | {
-        subMenu?: undefined;
-        subMenuLevel?: number;
-        onSubMenuHover?: (menuId: string, level: number) => void;
-        onSubMenuLeave?: (level: number) => void;
-        onSubMenuEnter?: () => void;
-        onMouseMove?: () => void;
-        toggleMenu?: (id: string, level: number) => void;
-        closeSubMenuLevel?: (level: number) => void;
-        activeMenu?: string;
-      }
-  ) &
-  (
-    | {
-        highlightMatchingText: true;
-        menuValue: string;
-      }
-    | {
-        highlightMatchingText?: false | undefined;
-        menuValue?: string;
-      }
-  );
-
-type ActionProps = BaseProps & {
-  variant: "action";
-} & AsProps<Tags>;
-
-type NormalProps = BaseProps & {
-  variant?: "normal";
-};
-
-type MenuOptionProps = ActionProps | NormalProps;
-
-export const MenuOption = ({
-  id,
-  testid,
-  children,
-  disabled = false,
-  variant = "normal",
-  value,
-  before,
-  after,
-  subMenu,
-  onClick,
-  selected,
-  ref,
-  onSubMenuHover,
-  onSubMenuLeave,
-  onSubMenuEnter,
-  toggleMenu,
-  subMenuLevel = 1,
-  currentSubMenuLevel,
-  closeSubMenuLevel,
-  activeMenu,
-  mobilePositionTo,
-  highlightMatchingText = false,
-  menuValue,
-  onMouseMove,
-  small = false,
-}: MenuOptionProps) => {
-  const uniqueId = useId();
-  const internalRef = useRef(null);
-  const actualRef = (ref || internalRef) as RefObject<HTMLDivElement>;
-  const menuId = useRef(`menu-${uniqueId}`);
-  const isMobile = useMatchesMobile();
-  const [isSubMenuHovered, setIsSubMenuHovered] = useState(false);
-
-  const handleMouseEnter = () => {
-    if (subMenu && onSubMenuHover && !disabled) {
-      onSubMenuHover(menuId.current, subMenuLevel);
-    }
-  };
-
-  const handleMouseLeave = () => {
-    if (subMenu && onSubMenuLeave && !disabled) {
-      onSubMenuLeave(subMenuLevel);
-    }
-    
-    setIsSubMenuHovered(false);
-  };
-
-  const handleMouseMove = () => {
-    if (subMenu && onMouseMove && !disabled) {
-      onMouseMove();
-    }
-  }
-
-  const handleSubMenuEnter = () => {
-    if (onSubMenuEnter) {
-      onSubMenuEnter();
-    }
-    setIsSubMenuHovered(true);
-  };
-
-  const additionalAttributes = {
-    "data-selected": selected || null,
-    "data-submenu-hovered": isSubMenuHovered || null,
-  };
-
-  const svgStyles = clsx(
-    "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal",
-  );
-
-  const textLabelStyles = clsx("w-full whitespace-nowrap !leading-6");
-
-  const normalStyles =
-    variant === "normal" &&
-    !disabled &&
-    clsx(
-      "bg-transparent text-text-primary-normal",
-      "hover:bg-background-action-secondary-hover",
-      "focus-visible:bg-background-action-secondary-hover",
-      "data-selected:bg-background-action-secondary-hover",
-      "data-submenu-hovered:bg-background-action-secondary-hover",
-      "active:bg-background-action-secondary-active",
-    );
-
-  const normalDisabledStyles =
-    variant === "normal" && disabled && clsx("text-text-primary-disabled");
-
-  const actionStyles =
-    variant === "action" &&
-    !disabled &&
-    clsx(
-      "text-action-400 bg-transparent",
-      "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
-      "focus-visible:bg-background-action-secondary-hover focus-visible:text-text-action-hover",
-      "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
-      "data-submenu-hovered:bg-background-action-secondary-active data-submenu-hovered:text-text-action-active",
-      "active:bg-background-action-secondary-active active:text-text-action-active",
-    );
-
-  const actionDisabledStyles =
-    variant === "action" && disabled && clsx("text-text-action-disabled");
-
-  const disabledStyles =
-    disabled && clsx("bg-transparent cursor-default pointer-events-none");
-
-  const processChildren =
-    typeof children === "string" && highlightMatchingText
-      ? highlightMatch(children, menuValue)
-      : children;
-
-  const renderChildren =
-    typeof children === "object" ? (
-      children
-    ) : variant === "action" ? (
-      <Label padded className={textLabelStyles}>
-        {processChildren}
-      </Label>
-    ) : (
-      !small ? (
-      <Paragraph padded className={textLabelStyles}>
-        {processChildren}
-      </Paragraph>
-      ) : (
-      <Caption padded className={textLabelStyles}>
-        {processChildren}
-      </Caption>
-      )
-    );
-
-  return (
-    <>
-      <div
-        id={id}
-        data-testid={testid}
-        ref={actualRef}
-        className={clsx(
-          "flex cursor-pointer w-full text-left relative outline-none",
-          svgStyles,
-          small ? layoutGroupGap : componentGap,
-          componentPadding,
-          baseTransition,
-          normalStyles,
-          normalDisabledStyles,
-          actionStyles,
-          actionDisabledStyles,
-          disabledStyles,
-          { "items-center": !small },
-        )}
-        data-value={value || children}
-        onClick={() => {
-          onClick?.(menuId.current, (value || children) as string);
-          if (subMenu) {
-            toggleMenu(menuId.current, subMenuLevel);
-          }
-        }}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        onMouseMove={handleMouseMove}
-        {...additionalAttributes}
-        tabIndex={-1}
-        role="menuitem"
-        aria-haspopup={subMenu ? "menu" : undefined}
-      >
-        {before && <div className={clsx("shrink-0", { "items-center flex": !small })}>{before}</div>}
-
-        {renderChildren}
-
-        {renderAfterProp()}
-      </div>
-
-      {subMenu && (
-        <div
-          onMouseEnter={handleSubMenuEnter}
-          onMouseLeave={() => {
-            handleMouseLeave();
-            setIsSubMenuHovered(false);
-          }}
-          data-submenu-parent={menuId.current}
-          data-menu-level={subMenuLevel + 1}
-        >
-          {subMenu({
-            menuId: menuId.current,
-            positionTo: actualRef,
-            mobilePositionTo,
-            position: "right",
-            subMenuLevel,
-            mobileBackMenuOption,
-            mobileHide: isMobile && activeMenu !== menuId.current,
-            autoFocusOff: true,
-          })}
-        </div>
-      )}
-    </>
-  );
-
-  function renderAfterProp() {
-    if (after) {
-      return after;
-    }
-
-    if (subMenu && after !== null) {
-      return <Icon name="chevron_right" />;
-    }
-  }
-
-  function mobileBackMenuOption() {
-    if (!isMobile) {
-      return;
-    }
-
-    return (
-      <MenuOption
-        id={id ? `${id}-back` : undefined}
-        testid={testid ? `${testid}-back` : undefined}
-        onClick={() => {
-          closeSubMenuLevel?.(currentSubMenuLevel ?? 0);
-        }} 
-        variant="action"
-        before={<Icon name="chevron_left" />}
-      >
-        Back
-      </MenuOption>
-    );
-  }
-};
-
-MenuOption.displayName = "MenuOption";
-
-function highlightMatch(text: string, searchValue?: string): React.ReactNode {
-  if (!searchValue || !searchValue.trim()) {
-    return text;
-  }
-
-  const regex = new RegExp(
-    `(${searchValue.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
-    "gi",
-  );
-  const parts = text.split(regex);
-
-  return parts.map((part, index) =>
-    regex.test(part) ? (
-      <span key={index} className="font-bold">
-        {part}
-      </span>
-    ) : (
-      part
-    ),
-  );
-}

package/src/components/MobileDataGrid/ColumnList.tsx

@@ -1,66 +0,0 @@
-import clsx from "clsx";
-import { useGridContext } from "./GridContextProvider/useGridContext";
-import { MobileDataGridCard } from "./MobileDataGridCard";
-import { GridContextType } from "./GridContextProvider/GridContext";
-import { RowActions } from "./types";
-
-type ColumnListProps<T> = {
-  withBorder?: boolean;
-  renderLink?: (data: T) => React.ReactNode;
-  renderChevron?: boolean;
-  enableRowSelection?: boolean;
-  footer?: (ctx: GridContextType<T>) => React.ReactNode;
-  rowActions?: RowActions<T>;
-};
-export function ColumnList<T extends Record<string, unknown>>(
-  props: ColumnListProps<T>,
-) {
-  const {
-    withBorder,
-    renderLink,
-    renderChevron,
-    footer: Footer,
-    enableRowSelection,
-    rowActions,
-  } = props;
-  const ctx = useGridContext<T>();
-  const { id, testid, data, getId, selectedRowIds } = ctx;
-  return (
-    <div
-      className={clsx(
-        "flex flex-col flex-1 relative overflow-y-auto overflow-x-hidden",
-        !!Footer && "mb-20",
-      )}
-    >
-      <ul
-        id={id}
-        data-testid={testid}
-        className={clsx(
-          "rounded absolute top-0 left-0 w-full flex-1",
-          "divide-y divide-border-primary-normal",
-          withBorder && "border border-border-primary-normal",
-        )}
-      >
-        {data.map((item) => {
-          const id = getId(item);
-          return (
-            <MobileDataGridCard
-              data={item}
-              key={id}
-              renderLink={renderLink}
-              enableRowSelection={enableRowSelection}
-              selected={!!id && selectedRowIds.includes(id)}
-              renderChevron={renderChevron}
-              rowActions={rowActions}
-            />
-          );
-        })}
-        {!!Footer && (
-          <div className="fixed left-0 right-0 bottom-0 flex flex-col w-full min-h-20">
-            <Footer {...ctx} />
-          </div>
-        )}
-      </ul>
-    </div>
-  );
-}