@godxjp/ui 28.7.0 → 28.9.0

package/dist/components/navigation/index.d.ts

@@ -9,5 +9,9 @@ export { AppSettingToggle } from "./app-setting-toggle.js";
 export type { AppSettingToggleProp, AppSettingToggleProps, AppSettingToggleKind, } from "./app-setting-toggle.js";
 export type { BreadcrumbItemProp as BreadcrumbItem } from "../../props/vocabulary/navigation.prop.js";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./dropdown-menu.js";
+export { MegaMenu } from "./mega-menu.js";
+export type { MegaMenuProp, MegaMenuProps, MegaMenuItemProp, MegaMenuItemProps, MegaMenuPanelProp, MegaMenuPanelProps, MegaMenuGroupProp, MegaMenuGroupProps, MegaMenuLinkProp, MegaMenuLinkProps, MegaMenuLinkComponentProp, MegaMenuLinkComponentProps, MegaMenuTriggerActionProp, MegaMenuTriggerActionProps, } from "./mega-menu.js";
 export { Conversations } from "./conversations.js";
 export type { ConversationsProp, ConversationsProps, ConversationsItemProp, ConversationsDividerProp, ConversationsEntryProp, ConversationsMenuProp, ConversationsMenuItemProp, ConversationsGroupableProp, ConversationsCreationProp, } from "./conversations.js";
+export { Anchor } from "./anchor.js";
+export type { AnchorContainerProp, AnchorDirectionProp, AnchorItemProp, AnchorProp, AnchorProps, } from "./anchor.js";

package/dist/components/navigation/index.js

@@ -29,8 +29,11 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger
 } from "./dropdown-menu.js";
+import { MegaMenu } from "./mega-menu.js";
 import { Conversations } from "./conversations.js";
+import { Anchor } from "./anchor.js";
 export {
+  Anchor,
   AppSettingPicker,
   AppSettingToggle,
   Conversations,
@@ -51,6 +54,7 @@ export {
   DropdownMenuTrigger,
   FilterBar,
   FilterBarGroup,
+  MegaMenu,
   Pagination,
   PaginationContent,
   PaginationEllipsis,

package/dist/components/navigation/mega-menu.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { MegaMenuItemProp, MegaMenuLinkComponentProp } from "../../props/components/navigation.prop.js";
+export type { MegaMenuGroupProp, MegaMenuGroupProp as MegaMenuGroupProps, MegaMenuItemProp, MegaMenuItemProp as MegaMenuItemProps, MegaMenuLinkComponentProp, MegaMenuLinkComponentProp as MegaMenuLinkComponentProps, MegaMenuLinkProp, MegaMenuLinkProp as MegaMenuLinkProps, MegaMenuPanelProp, MegaMenuPanelProp as MegaMenuPanelProps, MegaMenuProp, MegaMenuProp as MegaMenuProps, MegaMenuTriggerActionProp, MegaMenuTriggerActionProp as MegaMenuTriggerActionProps, } from "../../props/components/navigation.prop.js";
+export declare const MegaMenu: React.ForwardRefExoticComponent<{
+    items: readonly MegaMenuItemProp[];
+    open?: string | null;
+    defaultOpen?: string | null;
+    onOpenChange?: (key: string | null) => void;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (key: string) => void;
+    size?: "xs" | "sm" | "md" | "lg";
+    triggerAction?: import("./mega-menu.js").MegaMenuTriggerActionProp;
+    openDelay?: number;
+    closeDelay?: number;
+    label?: string;
+    expandIcon?: React.ReactNode | false;
+    linkComponent?: MegaMenuLinkComponentProp;
+    id?: import("../../props/index.js").IdProp;
+    className?: import("../../props/index.js").ClassNameProp;
+} & Omit<React.HTMLAttributes<HTMLElement>, "children" | "defaultValue" | "onChange"> & React.RefAttributes<HTMLElement>>;

package/dist/components/navigation/mega-menu.js

@@ -0,0 +1,526 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { useTranslation } from "../../i18n/use-translation.js";
+const OPEN_DELAY_MS = 0;
+const CLOSE_DELAY_MS = 100;
+function nextEnabled(items, from, step) {
+  const count = items.length;
+  for (let hop = 1; hop <= count; hop++) {
+    const index = (from + step * hop + count * count) % count;
+    if (!items[index]?.disabled) return index;
+  }
+  return from;
+}
+function firstEnabled(items, from) {
+  const order = from === "start" ? items.map((_, i) => i) : items.map((_, i) => i).reverse();
+  return order.find((index) => !items[index]?.disabled) ?? 0;
+}
+function panelLinks(panel) {
+  if (!panel) return [];
+  return Array.from(panel.querySelectorAll("a[href]"));
+}
+function MegaMenuPanelLink({
+  link,
+  itemKey,
+  current,
+  linkComponent: LinkComponent,
+  onActivate
+}) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    link.icon ? (
+      // Decorative: the label is the accessible name, so the glyph must not be announced twice.
+      /* @__PURE__ */ jsx("span", { "data-slot": "mega-menu-link-icon", className: "ui-mega-menu-link-icon", "aria-hidden": "true", children: link.icon })
+    ) : null,
+    /* @__PURE__ */ jsxs("span", { "data-slot": "mega-menu-link-text", className: "ui-mega-menu-link-text", children: [
+      /* @__PURE__ */ jsx("span", { className: "ui-mega-menu-link-label", children: link.label }),
+      link.description ? /* @__PURE__ */ jsx("span", { "data-slot": "mega-menu-link-description", className: "ui-mega-menu-link-description", children: link.description }) : null
+    ] })
+  ] });
+  const anchorProps = {
+    className: "ui-mega-menu-link ui-focus-ring",
+    "data-slot": "mega-menu-link",
+    href: link.disabled ? void 0 : link.href,
+    "aria-current": current ? "page" : void 0,
+    "aria-disabled": link.disabled || void 0,
+    "data-disabled": link.disabled ? "true" : void 0,
+    onClick: (event) => {
+      if (link.disabled) {
+        event.preventDefault();
+        return;
+      }
+      onActivate(link.key);
+    }
+  };
+  return /* @__PURE__ */ jsx("li", { className: "ui-mega-menu-link-row", "data-item": itemKey, children: LinkComponent && link.href && !link.disabled ? /* @__PURE__ */ jsx(LinkComponent, { ...anchorProps, children: content }) : (
+    // An href-less anchor is the DISABLED row: no destination, so no tab stop and no arrow
+    // landing, while `aria-disabled` keeps it announced with its name and its reason.
+    /* @__PURE__ */ jsx("a", { ...anchorProps, children: content })
+  ) });
+}
+function MegaMenuGroupColumn({
+  group,
+  itemKey,
+  value,
+  linkComponent,
+  onActivate,
+  headingId
+}) {
+  return /* @__PURE__ */ jsxs("li", { className: "ui-mega-menu-group", "data-slot": "mega-menu-group", children: [
+    group.label ? /* @__PURE__ */ jsxs("p", { className: "ui-mega-menu-group-label", id: headingId, "data-slot": "mega-menu-group-label", children: [
+      group.icon ? /* @__PURE__ */ jsx("span", { className: "ui-mega-menu-group-icon", "aria-hidden": "true", children: group.icon }) : null,
+      group.label
+    ] }) : null,
+    group.description ? /* @__PURE__ */ jsx("p", { className: "ui-mega-menu-group-description", "data-slot": "mega-menu-group-description", children: group.description }) : null,
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: "ui-mega-menu-group-links",
+        "aria-labelledby": group.label ? headingId : void 0,
+        children: group.links.map((link) => /* @__PURE__ */ jsx(
+          MegaMenuPanelLink,
+          {
+            link,
+            itemKey,
+            current: value === link.key,
+            linkComponent,
+            onActivate
+          },
+          link.key
+        ))
+      }
+    )
+  ] });
+}
+const MegaMenu = React.forwardRef(function MegaMenu2({
+  items,
+  open,
+  defaultOpen = null,
+  onOpenChange,
+  value,
+  defaultValue,
+  onValueChange,
+  size = "md",
+  triggerAction = "click",
+  openDelay = OPEN_DELAY_MS,
+  closeDelay = CLOSE_DELAY_MS,
+  label,
+  expandIcon,
+  linkComponent,
+  className,
+  id,
+  style,
+  ...props
+}, ref) {
+  const { t } = useTranslation();
+  const reactId = React.useId();
+  const baseId = id ?? `mega-menu-${reactId}`;
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const openKey = open !== void 0 ? open : uncontrolledOpen;
+  const [uncontrolledValue, setUncontrolledValue] = React.useState(
+    defaultValue
+  );
+  const currentValue = value !== void 0 ? value : uncontrolledValue;
+  const [focusIndex, setFocusIndex] = React.useState(() => firstEnabled(items, "start"));
+  const rootRef = React.useRef(null);
+  const triggerRefs = React.useRef(/* @__PURE__ */ new Map());
+  const panelRefs = React.useRef(/* @__PURE__ */ new Map());
+  const openTimer = React.useRef(null);
+  const closeTimer = React.useRef(null);
+  const setRootRef = React.useCallback(
+    (node) => {
+      rootRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref]
+  );
+  const clearTimers = React.useCallback(() => {
+    if (openTimer.current) {
+      clearTimeout(openTimer.current);
+      openTimer.current = null;
+    }
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  }, []);
+  React.useEffect(() => clearTimers, [clearTimers]);
+  const [panelOffset, setPanelOffset] = React.useState(
+    null
+  );
+  React.useLayoutEffect(() => {
+    if (openKey === null) {
+      setPanelOffset(null);
+      return;
+    }
+    const measure = () => {
+      const node = rootRef.current;
+      if (!node || typeof window === "undefined") return;
+      const rect = node.getBoundingClientRect();
+      const rtl = window.getComputedStyle(node).direction === "rtl";
+      setPanelOffset({
+        // Under RTL the panel's own `inset-inline-start: 0` resolves to the viewport's RIGHT
+        // edge, so the offset is measured from there and is normally negative.
+        x: rtl ? rect.right - window.innerWidth : rect.left,
+        y: rect.bottom,
+        w: rect.width
+      });
+    };
+    measure();
+    window.addEventListener("resize", measure);
+    window.addEventListener("scroll", measure, { capture: true, passive: true });
+    return () => {
+      window.removeEventListener("resize", measure);
+      window.removeEventListener("scroll", measure, { capture: true });
+    };
+  }, [openKey]);
+  const commitOpen = React.useCallback(
+    (key) => {
+      if (open === void 0) setUncontrolledOpen(key);
+      onOpenChange?.(key);
+    },
+    [open, onOpenChange]
+  );
+  const close = React.useCallback(() => {
+    clearTimers();
+    if (openKey !== null) commitOpen(null);
+  }, [clearTimers, commitOpen, openKey]);
+  const closeAndRestore = React.useCallback(
+    (key) => {
+      clearTimers();
+      commitOpen(null);
+      triggerRefs.current.get(key)?.focus();
+    },
+    [clearTimers, commitOpen]
+  );
+  const activate = React.useCallback(
+    (key) => {
+      if (value === void 0) setUncontrolledValue(key);
+      onValueChange?.(key);
+      close();
+    },
+    [value, onValueChange, close]
+  );
+  const firstRoute = React.useRef(true);
+  React.useEffect(() => {
+    if (firstRoute.current) {
+      firstRoute.current = false;
+      return;
+    }
+    close();
+  }, [currentValue]);
+  React.useEffect(() => {
+    if (openKey === null) return;
+    const onPointerDown = (event) => {
+      const node = rootRef.current;
+      if (node && event.target instanceof Node && !node.contains(event.target)) close();
+    };
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [openKey, close]);
+  const isRtl = () => {
+    const node = rootRef.current;
+    if (!node || typeof window === "undefined") return false;
+    return window.getComputedStyle(node).direction === "rtl";
+  };
+  const focusTrigger = (index) => {
+    const item = items[index];
+    if (!item) return;
+    setFocusIndex(index);
+    triggerRefs.current.get(item.key)?.focus();
+  };
+  const [pendingFocus, setPendingFocus] = React.useState(null);
+  React.useLayoutEffect(() => {
+    if (!pendingFocus) return;
+    if (openKey === pendingFocus.key) {
+      const links = panelLinks(panelRefs.current.get(pendingFocus.key) ?? null);
+      const target = pendingFocus.edge === "first" ? links[0] : links[links.length - 1];
+      target?.focus();
+    }
+    setPendingFocus(null);
+  }, [pendingFocus, openKey]);
+  const openPanel = React.useCallback(
+    (key, focus) => {
+      clearTimers();
+      commitOpen(key);
+      if (focus) setPendingFocus({ key, edge: focus });
+    },
+    [clearTimers, commitOpen]
+  );
+  const onBarKeyDown = (event, index, item) => {
+    const forward = isRtl() ? "ArrowLeft" : "ArrowRight";
+    const backward = isRtl() ? "ArrowRight" : "ArrowLeft";
+    const move = (to) => {
+      event.preventDefault();
+      focusTrigger(to);
+      if (openKey !== null) {
+        const target = items[to];
+        if (target?.panel) commitOpen(target.key);
+        else commitOpen(null);
+      }
+    };
+    switch (event.key) {
+      case forward:
+        move(nextEnabled(items, index, 1));
+        return;
+      case backward:
+        move(nextEnabled(items, index, -1));
+        return;
+      case "Home":
+        move(firstEnabled(items, "start"));
+        return;
+      case "End":
+        move(firstEnabled(items, "end"));
+        return;
+      case "Escape":
+        if (openKey !== null) {
+          event.preventDefault();
+          closeAndRestore(openKey);
+        }
+        return;
+      case "ArrowDown":
+        if (item.panel) {
+          event.preventDefault();
+          openPanel(item.key, "first");
+        }
+        return;
+      case "ArrowUp":
+        if (item.panel) {
+          event.preventDefault();
+          openPanel(item.key, "last");
+        }
+        return;
+      case "Enter":
+      case " ":
+        if (item.panel) {
+          event.preventDefault();
+          if (openKey === item.key) closeAndRestore(item.key);
+          else openPanel(item.key);
+        }
+        return;
+      default:
+    }
+  };
+  const onPanelKeyDown = (event, itemKey) => {
+    const links = panelLinks(panelRefs.current.get(itemKey) ?? null);
+    const at = links.indexOf(document.activeElement);
+    const focusLink = (to) => {
+      event.preventDefault();
+      links[Math.max(0, Math.min(links.length - 1, to))]?.focus();
+    };
+    switch (event.key) {
+      case "Escape":
+        event.preventDefault();
+        closeAndRestore(itemKey);
+        return;
+      case "ArrowDown":
+        focusLink(at + 1);
+        return;
+      case "ArrowUp":
+        if (at <= 0) {
+          event.preventDefault();
+          closeAndRestore(itemKey);
+          return;
+        }
+        focusLink(at - 1);
+        return;
+      case "Home":
+        focusLink(0);
+        return;
+      case "End":
+        focusLink(links.length - 1);
+        return;
+      default:
+    }
+  };
+  const onBlurCapture = (event) => {
+    const node = rootRef.current;
+    const next = event.relatedTarget;
+    if (!node) return;
+    if (next instanceof Node && node.contains(next)) return;
+    close();
+  };
+  const hoverable = triggerAction === "hover";
+  const onTriggerPointerEnter = (event, item) => {
+    if (!hoverable || item.disabled || !item.panel) return;
+    if (event.pointerType === "touch") return;
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+    if (openKey !== null) {
+      clearTimers();
+      commitOpen(item.key);
+      return;
+    }
+    if (openTimer.current) clearTimeout(openTimer.current);
+    openTimer.current = setTimeout(() => {
+      openTimer.current = null;
+      commitOpen(item.key);
+    }, openDelay);
+  };
+  const onTriggerPointerLeave = () => {
+    if (openTimer.current) {
+      clearTimeout(openTimer.current);
+      openTimer.current = null;
+    }
+  };
+  const onRootPointerEnter = () => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  };
+  const onRootPointerLeave = (event) => {
+    if (!hoverable || event.pointerType === "touch") return;
+    if (openKey === null) return;
+    if (closeTimer.current) clearTimeout(closeTimer.current);
+    closeTimer.current = setTimeout(() => {
+      closeTimer.current = null;
+      const node = rootRef.current;
+      if (node && node.contains(document.activeElement)) return;
+      commitOpen(null);
+    }, closeDelay);
+  };
+  const chevron = expandIcon === false ? null : /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "mega-menu-expand-icon",
+      className: "ui-mega-menu-expand-icon",
+      "aria-hidden": "true",
+      children: expandIcon ?? /* @__PURE__ */ jsx(ChevronDown, {})
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      ref: setRootRef,
+      id: baseId,
+      "data-slot": "mega-menu",
+      "data-size": size,
+      "data-trigger-action": triggerAction,
+      "data-open": openKey === null ? void 0 : "true",
+      "aria-label": label ?? t("navigation.megaMenu.label"),
+      className: cn("ui-mega-menu", className),
+      style: panelOffset ? {
+        ...style,
+        "--mega-menu-panel-translate-x": `${panelOffset.x}px`,
+        "--mega-menu-panel-translate-y": `${panelOffset.y}px`,
+        "--mega-menu-panel-measured-width": `${panelOffset.w}px`
+      } : style,
+      onPointerEnter: onRootPointerEnter,
+      onPointerLeave: onRootPointerLeave,
+      onBlurCapture,
+      ...props,
+      children: /* @__PURE__ */ jsx("ul", { "data-slot": "mega-menu-bar", className: "ui-mega-menu-bar", children: items.map((item, index) => {
+        const panelId = `${baseId}-panel-${item.key}`;
+        const expanded = openKey === item.key;
+        const current = currentValue === item.key;
+        const roving = index === focusIndex ? 0 : -1;
+        const sharedTrigger = {
+          "data-slot": "mega-menu-trigger",
+          "data-open": expanded ? "true" : void 0,
+          className: "ui-mega-menu-trigger ui-focus-ring",
+          tabIndex: item.disabled ? -1 : roving,
+          onKeyDown: (event) => onBarKeyDown(event, index, item),
+          onFocus: () => setFocusIndex(index),
+          onPointerEnter: (event) => onTriggerPointerEnter(event, item),
+          onPointerLeave: onTriggerPointerLeave
+        };
+        const labelNode = /* @__PURE__ */ jsxs(Fragment, { children: [
+          item.icon ? /* @__PURE__ */ jsx("span", { className: "ui-mega-menu-trigger-icon", "aria-hidden": "true", children: item.icon }) : null,
+          /* @__PURE__ */ jsx("span", { className: "ui-mega-menu-trigger-label", children: item.label })
+        ] });
+        return /* @__PURE__ */ jsxs("li", { className: "ui-mega-menu-item", "data-slot": "mega-menu-item", children: [
+          item.panel ? (
+            // ui-audit-disable-next-line no-raw-button — a DISCLOSURE TRIGGER, not a Button.
+            // The APG pattern names `<button aria-expanded aria-controls>` as the element, and
+            // this one is a bar cell under a roving tabindex: wrapping it in `Button` would
+            // layer Button's variant padding, its own focus treatment and its tabIndex on top
+            // of the bar's. Sidebar's own nav row carries the identical exemption.
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                ref: (node) => {
+                  if (node) triggerRefs.current.set(item.key, node);
+                  else triggerRefs.current.delete(item.key);
+                },
+                "aria-expanded": expanded,
+                "aria-controls": panelId,
+                "aria-current": current ? "page" : void 0,
+                disabled: item.disabled,
+                onClick: () => {
+                  if (expanded) closeAndRestore(item.key);
+                  else openPanel(item.key);
+                },
+                ...sharedTrigger,
+                children: [
+                  labelNode,
+                  chevron
+                ]
+              }
+            )
+          ) : /* @__PURE__ */ jsx(
+            "a",
+            {
+              ref: (node) => {
+                if (node) triggerRefs.current.set(item.key, node);
+                else triggerRefs.current.delete(item.key);
+              },
+              href: item.disabled ? void 0 : item.href,
+              "aria-current": current ? "page" : void 0,
+              "aria-disabled": item.disabled || void 0,
+              "data-disabled": item.disabled ? "true" : void 0,
+              onClick: (event) => {
+                if (item.disabled) {
+                  event.preventDefault();
+                  return;
+                }
+                activate(item.key);
+              },
+              ...sharedTrigger,
+              children: labelNode
+            }
+          ),
+          item.panel ? /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: (node) => {
+                if (node) panelRefs.current.set(item.key, node);
+                else panelRefs.current.delete(item.key);
+              },
+              id: panelId,
+              "data-slot": "mega-menu-panel",
+              className: "ui-mega-menu-panel",
+              hidden: !expanded,
+              onKeyDown: (event) => onPanelKeyDown(event, item.key),
+              children: /* @__PURE__ */ jsxs("div", { className: "ui-mega-menu-panel-inner", children: [
+                /* @__PURE__ */ jsx("ul", { className: "ui-mega-menu-groups", children: item.panel.groups.map((group) => /* @__PURE__ */ jsx(
+                  MegaMenuGroupColumn,
+                  {
+                    group,
+                    itemKey: item.key,
+                    value: currentValue,
+                    linkComponent,
+                    onActivate: activate,
+                    headingId: `${panelId}-${group.key}`
+                  },
+                  group.key
+                )) }),
+                item.panel.footer ? /* @__PURE__ */ jsx("div", { "data-slot": "mega-menu-panel-footer", className: "ui-mega-menu-panel-footer", children: item.panel.footer }) : null
+              ] })
+            }
+          ) : null
+        ] }, item.key);
+      }) })
+    }
+  );
+});
+MegaMenu.displayName = "MegaMenu";
+export {
+  MegaMenu
+};

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "28.7.0",
+  "version": "28.9.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,