@nordmanai/nif 0.0.0-stage → 0.2.0

package/registry/ui/components/nm-dropdown/nm-dropdown-options.tsx

@@ -0,0 +1,242 @@
+import { useRef, type ReactNode } from 'react';
+import { isNmDropdownSeparator, type NmDropdownItem } from './nm-dropdown-item';
+import { NM_DROPDOWN_CLASSES } from '../../config/nm-dropdown.ts';
+import { NmDropdownBranch } from './nm-dropdown-panel';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+export function findDropdownItem(
+  items: readonly NmDropdownItem[],
+  selected?: string | null,
+): NmDropdownItem | undefined {
+  for (const item of items) {
+    if (isNmDropdownSeparator(item)) {
+      continue;
+    }
+    if (item.id === selected) {
+      return item;
+    }
+    const child = item.children?.find((entry) => entry.id === selected);
+    if (child) {
+      return child;
+    }
+  }
+  return undefined;
+}
+
+function itemClassName(item: NmDropdownItem, branched: boolean): string {
+  return [
+    NM_DROPDOWN_CLASSES.item,
+    branched ? NM_DROPDOWN_CLASSES.itemBranch : '',
+    item.danger ? NM_DROPDOWN_CLASSES.itemDanger : '',
+    item.disabled && item.mark == null ? NM_DROPDOWN_CLASSES.itemDisabled : '',
+    item.disabled && item.mark != null ? NM_DROPDOWN_CLASSES.itemQuiet : '',
+  ]
+    .filter((value) => value !== '')
+    .join(' ');
+}
+
+function optionIcon(item: NmDropdownItem): ReactNode {
+  if (item.leading != null) {
+    return <span className={NM_DROPDOWN_CLASSES.icon}>{item.leading}</span>;
+  }
+  if (item.imageSrc) {
+    return (
+      <span className={NM_DROPDOWN_CLASSES.icon}>
+        <img src={item.imageSrc} alt="" />
+      </span>
+    );
+  }
+  if (item.icon) {
+    return (
+      <span className={NM_DROPDOWN_CLASSES.icon}>
+        <NmIcon id={item.icon} />
+      </span>
+    );
+  }
+  return null;
+}
+
+function markTone(mark: NonNullable<NmDropdownItem['mark']>): string {
+  if (mark === 'busy') {
+    return NM_DROPDOWN_CLASSES.markBusy;
+  }
+  if (mark === 'live') {
+    return NM_DROPDOWN_CLASSES.markLive;
+  }
+  return '';
+}
+
+function optionTrailing(item: NmDropdownItem): ReactNode {
+  const detail = item.detail != null && item.detail.length > 0;
+  const shortcut = item.shortcut != null && item.shortcut.length > 0;
+  if (!detail && !shortcut) {
+    return null;
+  }
+  return (
+    <span className={NM_DROPDOWN_CLASSES.trailing}>
+      {detail ? <span className={NM_DROPDOWN_CLASSES.detail}>{item.detail}</span> : null}
+      {shortcut ? <span className={NM_DROPDOWN_CLASSES.shortcut}>{item.shortcut}</span> : null}
+    </span>
+  );
+}
+
+function optionMark(
+  item: NmDropdownItem,
+  branched: boolean,
+  active: boolean,
+  selectionMark: 'check' | 'none',
+): ReactNode {
+  if (item.mark != null) {
+    const tone = markTone(item.mark);
+    return <span className={[NM_DROPDOWN_CLASSES.mark, tone].filter(Boolean).join(' ')} />;
+  }
+  if (branched) {
+    return <NmIcon id="chevron" className={NM_DROPDOWN_CLASSES.check} />;
+  }
+  if (selectionMark === 'check' && active) {
+    return <NmIcon id="check" className={NM_DROPDOWN_CLASSES.check} />;
+  }
+  return null;
+}
+
+function NmDropdownOption({
+  item,
+  selected,
+  focusedOptionId,
+  expandedIds,
+  onSelect,
+  onOpenBranch,
+  onCloseBranches,
+  selectionMark = 'check',
+}: {
+  item: NmDropdownItem;
+  selected?: string | null;
+  /** Combobox keyboard highlight — scroll target only; does not set `aria-selected`. */
+  focusedOptionId?: string | null;
+  expandedIds?: readonly string[];
+  selectionMark?: 'check' | 'none';
+  onSelect: (id: string) => void;
+  onOpenBranch: (id: string) => void;
+  onCloseBranches: () => void;
+}): ReactNode {
+  const anchorRef = useRef<HTMLLIElement>(null);
+  const children = item.children ?? [];
+  const branched = children.length > 0;
+  const expanded = expandedIds?.includes(item.id) === true;
+  const childActive = children.some((child) => child.id === selected);
+  const valueSelected = item.id === selected || childActive;
+  const comboboxFocus = focusedOptionId != null && item.id === focusedOptionId;
+  const ariaSelected =
+    focusedOptionId != null ? item.checked === true : valueSelected || item.checked === true;
+  const showCheck = valueSelected || item.checked === true;
+  return (
+    <li
+      ref={anchorRef}
+      className={branched ? NM_DROPDOWN_CLASSES.branch : undefined}
+      role="none"
+      onPointerEnter={(event) => {
+        if (item.disabled) {
+          return;
+        }
+        if (branched) {
+          onOpenBranch(item.id);
+          return;
+        }
+        const insideSubmenu =
+          event.currentTarget.closest(`.${NM_DROPDOWN_CLASSES.subpanel}`) != null;
+        if (!insideSubmenu) {
+          onCloseBranches();
+        }
+      }}
+    >
+      <button
+        className={itemClassName(item, branched)}
+        type="button"
+        role={branched ? undefined : 'option'}
+        aria-selected={branched ? undefined : ariaSelected}
+        data-combobox-focus={comboboxFocus ? 'true' : undefined}
+        aria-disabled={item.disabled ? true : undefined}
+        aria-haspopup={branched ? 'listbox' : undefined}
+        aria-expanded={branched ? expanded : undefined}
+        disabled={item.disabled}
+        onClick={() => {
+          if (item.disabled) {
+            return;
+          }
+          if (branched) {
+            onOpenBranch(item.id);
+            return;
+          }
+          onSelect(item.id);
+        }}
+      >
+        {optionIcon(item)}
+        <span className={NM_DROPDOWN_CLASSES.copy}>
+          <span className={NM_DROPDOWN_CLASSES.label}>{item.label}</span>
+          {optionTrailing(item)}
+        </span>
+        {optionMark(item, branched, showCheck, selectionMark)}
+      </button>
+      <NmDropdownBranch open={branched && expanded} label={item.label} anchorRef={anchorRef}>
+        <NmDropdownOptions
+          items={children}
+          selected={selected}
+          expandedIds={expandedIds}
+          selectionMark={selectionMark}
+          onSelect={onSelect}
+          onOpenBranch={onOpenBranch}
+          onCloseBranches={onCloseBranches}
+        />
+      </NmDropdownBranch>
+    </li>
+  );
+}
+
+export function NmDropdownOptions({
+  items,
+  selected,
+  focusedOptionId,
+  expandedIds,
+  selectionMark = 'check',
+  onSelect,
+  onOpenBranch,
+  onCloseBranches,
+}: {
+  items: readonly NmDropdownItem[];
+  selected?: string | null;
+  focusedOptionId?: string | null;
+  expandedIds?: readonly string[];
+  selectionMark?: 'check' | 'none';
+  onSelect: (id: string) => void;
+  onOpenBranch: (id: string) => void;
+  onCloseBranches: () => void;
+}) {
+  return (
+    <>
+      {items.map((item, index) => {
+        if (isNmDropdownSeparator(item)) {
+          return (
+            <li
+              key={`${item.id}-${index}`}
+              className={NM_DROPDOWN_CLASSES.separator}
+              role="separator"
+            />
+          );
+        }
+        return (
+          <NmDropdownOption
+            key={item.id}
+            item={item}
+            selected={selected}
+            focusedOptionId={focusedOptionId}
+            expandedIds={expandedIds}
+            selectionMark={selectionMark}
+            onSelect={onSelect}
+            onOpenBranch={onOpenBranch}
+            onCloseBranches={onCloseBranches}
+          />
+        );
+      })}
+    </>
+  );
+}

package/registry/ui/components/nm-dropdown/nm-dropdown-panel.tsx

@@ -0,0 +1,171 @@
+import {
+  Fragment,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+} from 'react';
+import { createPortal } from 'react-dom';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useMenuMotion } from '../../lib/menu-motion.ts';
+import type { NmDropdownPlacement } from './nm-dropdown-placement';
+import { dropdownPortalHost, placeNmDropdownSubpanel } from './nm-dropdown-placement';
+import { NM_DROPDOWN_CLASSES } from '../../config/nm-dropdown.ts';
+import { createLogger } from '../../kit-logger.ts';
+
+const logger = createLogger('interface-nm-dropdown');
+
+export function NmDropdownPanel({
+  open,
+  placement,
+  className,
+  id,
+  label,
+  panelRef,
+  children,
+}: {
+  open: boolean;
+  placement: string;
+  className: string;
+  id: string;
+  label: string;
+  panelRef: Ref<HTMLUListElement>;
+  children: ReactNode;
+}): ReactNode {
+  const motionProps = useMenuMotion(placement);
+  return (
+    <AnimatePresence>
+      {open ? (
+        <Fragment key={id}>
+          <motion.ul
+            className={className}
+            id={id}
+            ref={panelRef}
+            role="listbox"
+            aria-label={label}
+            initial={motionProps.variants.closed}
+            animate={motionProps.variants.open}
+            exit={motionProps.variants.closed}
+            style={motionProps.style}
+          >
+            {children}
+          </motion.ul>
+        </Fragment>
+      ) : null}
+    </AnimatePresence>
+  );
+}
+
+function readSubpanelPlace(anchor: HTMLElement, submenu: HTMLElement): NmDropdownPlacement | null {
+  const menu = anchor.closest(`.${NM_DROPDOWN_CLASSES.panel}, .${NM_DROPDOWN_CLASSES.subpanel}`);
+  if (!(menu instanceof HTMLElement)) {
+    return null;
+  }
+  const row = anchor.getBoundingClientRect();
+  const panel = menu.getBoundingClientRect();
+  const size = submenu.getBoundingClientRect();
+  return placeNmDropdownSubpanel({
+    rowTop: row.top,
+    rowBottom: row.bottom,
+    panelLeft: panel.left,
+    panelRight: panel.left + menu.offsetWidth,
+    submenuWidth: size.width,
+    submenuHeight: size.height,
+    viewportWidth: window.innerWidth,
+    viewportHeight: window.innerHeight,
+  });
+}
+
+function useSubpanelPlace(
+  open: boolean,
+  anchorRef: RefObject<HTMLElement | null>,
+  measureRef: RefObject<HTMLElement | null>,
+  submenu: HTMLElement | null,
+): NmDropdownPlacement | null {
+  const [frame, setFrame] = useState<NmDropdownPlacement | null>(null);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const anchor = anchorRef.current;
+    const submenuNode = submenu ?? measureRef.current;
+    if (anchor == null || submenuNode == null) {
+      return;
+    }
+    const place = () => {
+      const next = readSubpanelPlace(anchor, submenuNode);
+      if (next == null) {
+        return;
+      }
+      setFrame((current) =>
+        current?.top === next.top && current.left === next.left ? current : next,
+      );
+      logger.debug('place', 'subpanel', next);
+    };
+    place();
+    const settled = window.setTimeout(place, 300);
+    window.addEventListener('resize', place);
+    window.addEventListener('scroll', place, true);
+    return () => {
+      window.clearTimeout(settled);
+      window.removeEventListener('resize', place);
+      window.removeEventListener('scroll', place, true);
+    };
+  }, [open, anchorRef, measureRef, submenu]);
+  return frame;
+}
+
+export function NmDropdownBranch({
+  open,
+  label,
+  anchorRef,
+  children,
+}: {
+  open: boolean;
+  label?: string;
+  anchorRef: RefObject<HTMLElement | null>;
+  children: ReactNode;
+}): ReactNode {
+  const measureRef = useRef<HTMLUListElement>(null);
+  const [submenu, setSubmenu] = useState<HTMLUListElement | null>(null);
+  const motionProps = useMenuMotion('right-start');
+  const frame = useSubpanelPlace(open, anchorRef, measureRef, submenu);
+  const reduced = motionProps.variants.closed.scale === 1;
+  const transition = reduced ? { duration: 0 } : motionProps.variants.open.transition;
+  const at = { top: frame?.top ?? 0, left: frame?.left ?? 0 };
+  const host = dropdownPortalHost(undefined, anchorRef.current);
+  return createPortal(
+    <>
+      {open && frame == null ? (
+        <ul ref={measureRef} className={NM_DROPDOWN_CLASSES.subpanel} aria-hidden="true">
+          {children}
+        </ul>
+      ) : null}
+      <AnimatePresence>
+        {open && frame != null ? (
+          <Fragment key="submenu">
+            <motion.ul
+              ref={setSubmenu}
+              className={NM_DROPDOWN_CLASSES.subpanel}
+              role="listbox"
+              aria-label={label}
+              style={{
+                ...motionProps.style,
+                maxHeight: frame.maxHeight != null ? `${frame.maxHeight}px` : undefined,
+              }}
+              initial={{ ...motionProps.variants.closed, ...at }}
+              animate={{ ...motionProps.variants.open, ...at }}
+              exit={{ ...motionProps.variants.closed, ...at }}
+              transition={transition}
+            >
+              {children}
+            </motion.ul>
+          </Fragment>
+        ) : null}
+      </AnimatePresence>
+    </>,
+    host,
+  );
+}

package/registry/ui/components/nm-dropdown/nm-dropdown-placement.ts

@@ -0,0 +1,157 @@
+import { NM_DROPDOWN_ALIGN, NM_DROPDOWN_GAP_PX } from '../../config/nm-dropdown.ts';
+
+export type NmDropdownBox = {
+  top: number;
+  left: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+};
+
+export type NmDropdownViewport = {
+  width: number;
+  height: number;
+};
+
+export type NmDropdownPlacement = {
+  top: number;
+  left: number;
+  maxHeight?: number;
+};
+
+/** Scroll cap for a panel anchored at `panelTop`; only needed when content exceeds this. */
+export function nmDropdownViewportMaxHeight(input: {
+  trigger: Pick<NmDropdownBox, 'top' | 'bottom'>;
+  viewport: NmDropdownViewport;
+  panelTop: number;
+  gap?: number;
+  edgePadding?: number;
+}): number {
+  const gap = input.gap ?? NM_DROPDOWN_GAP_PX;
+  const edge = input.edgePadding ?? gap;
+  const belowTop = input.trigger.bottom + gap;
+  const opensBelow = input.panelTop + 1 >= belowTop;
+  if (opensBelow) {
+    return Math.max(0, input.viewport.height - input.panelTop - edge);
+  }
+  return Math.max(0, input.trigger.top - gap - edge);
+}
+
+export function placeNmDropdownPanel({
+  trigger,
+  panel,
+  viewport,
+  align,
+  gap = NM_DROPDOWN_GAP_PX,
+}: {
+  trigger: NmDropdownBox;
+  panel: Pick<NmDropdownBox, 'width' | 'height'>;
+  viewport: NmDropdownViewport;
+  align: (typeof NM_DROPDOWN_ALIGN)[keyof typeof NM_DROPDOWN_ALIGN];
+  gap?: number;
+}): NmDropdownPlacement {
+  const belowTop = trigger.bottom + gap;
+  const aboveTop = trigger.top - gap - panel.height;
+  const spaceBelow = viewport.height - belowTop;
+  const spaceAbove = trigger.top - gap;
+  const top =
+    spaceBelow >= panel.height || spaceBelow >= spaceAbove
+      ? clamp(belowTop, 0, Math.max(0, viewport.height - panel.height))
+      : clamp(aboveTop, 0, Math.max(0, viewport.height - panel.height));
+
+  const startLeft = trigger.left;
+  const endLeft = trigger.right - panel.width;
+  const preferredLeft = align === NM_DROPDOWN_ALIGN.end ? endLeft : startLeft;
+  let flippedLeft = preferredLeft;
+  const overflows = preferredLeft < 0 || preferredLeft + panel.width > viewport.width;
+  if (overflows && preferredLeft < 0) {
+    flippedLeft = startLeft;
+  } else if (overflows) {
+    flippedLeft = endLeft;
+  }
+  const left = clamp(flippedLeft, 0, Math.max(0, viewport.width - panel.width));
+
+  return { top, left };
+}
+
+/** Opens below (or above) a history row; panel width matches the row pill. */
+export function placeNmDropdownRowPanel({
+  row,
+  panel,
+  viewport,
+  gap = NM_DROPDOWN_GAP_PX,
+}: {
+  row: NmDropdownBox;
+  panel: Pick<NmDropdownBox, 'height'>;
+  viewport: NmDropdownViewport;
+  gap?: number;
+}): NmDropdownPlacement & { width: number } {
+  const belowTop = row.bottom + gap;
+  const aboveTop = row.top - gap - panel.height;
+  const spaceBelow = viewport.height - belowTop;
+  const spaceAbove = row.top - gap;
+  const top =
+    spaceBelow >= panel.height || spaceBelow >= spaceAbove
+      ? clamp(belowTop, 0, Math.max(0, viewport.height - panel.height))
+      : clamp(aboveTop, 0, Math.max(0, viewport.height - panel.height));
+
+  const width = row.width;
+  const left = clamp(row.left, 0, Math.max(0, viewport.width - width));
+
+  return { top, left, width };
+}
+
+/** Places a submenu beside its parent menu, with the same gap as the trigger. */
+export function placeNmDropdownSubpanel({
+  rowTop,
+  rowBottom,
+  panelLeft,
+  panelRight,
+  submenuWidth,
+  submenuHeight,
+  viewportWidth,
+  viewportHeight,
+  gap = NM_DROPDOWN_GAP_PX,
+}: {
+  rowTop: number;
+  rowBottom: number;
+  panelLeft: number;
+  panelRight: number;
+  submenuWidth: number;
+  submenuHeight: number;
+  viewportWidth: number;
+  viewportHeight: number;
+  gap?: number;
+}): NmDropdownPlacement {
+  const onRight = panelRight + gap;
+  const fitsRight = onRight + submenuWidth <= viewportWidth;
+  const left = fitsRight ? onRight : Math.max(0, panelLeft - gap - submenuWidth);
+  const spaceBelowRow = viewportHeight - rowBottom - gap;
+  const openUpward = spaceBelowRow < submenuHeight;
+  const top = openUpward
+    ? clamp(rowBottom - submenuHeight, gap, Math.max(gap, viewportHeight - submenuHeight - gap))
+    : clamp(rowTop, gap, Math.max(gap, viewportHeight - submenuHeight - gap));
+  const maxHeight = openUpward
+    ? Math.max(0, rowBottom - gap - gap)
+    : Math.max(0, viewportHeight - top - gap);
+  return { top, left, maxHeight };
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function dropdownPortalHost(
+  explicit: HTMLElement | null | undefined,
+  trigger: HTMLElement | null,
+): HTMLElement {
+  if (explicit != null) {
+    return explicit;
+  }
+  const fullscreen = document.fullscreenElement;
+  if (fullscreen instanceof HTMLElement && trigger != null && fullscreen.contains(trigger)) {
+    return fullscreen;
+  }
+  return document.body;
+}