@nordmanai/nif 0.0.0-stage → 0.2.0

package/registry/ui/components/nm-dropdown/nm-dropdown.css

@@ -0,0 +1,312 @@
+  .nm-dropdown {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .nm-dropdown__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    padding: 0;
+    border: 0;
+    background: transparent;
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    cursor: pointer;
+  }
+
+  .nm-dropdown__trigger--icon {
+    gap: 0;
+    padding: var(--nm-icon-pad);
+    border-radius: var(--nm-control-radius);
+  }
+
+  .nm-dropdown__trigger--chip {
+    gap: var(--nm-space-8);
+    box-sizing: border-box;
+    min-height: var(--nm-ui-chip-min-height, var(--nm-icon-control));
+    padding: var(--nm-icon-pad) var(--nm-space-12);
+    border: 0;
+    border-radius: calc(var(--nm-ui-chip-min-height, var(--nm-icon-control)) / 2);
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-medium);
+    line-height: var(--nm-type-ui);
+  }
+
+  .nm-dropdown__label {
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  .nm-dropdown__trigger--chip-icon-only {
+    gap: 0;
+    justify-content: center;
+    width: var(--nm-ui-chip-min-height, var(--nm-icon-control));
+    min-width: var(--nm-ui-chip-min-height, var(--nm-icon-control));
+    padding: var(--nm-icon-pad);
+  }
+
+  .nm-dropdown__trigger--filled {
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+  }
+
+  .nm-dropdown__trigger--outline {
+    background: transparent;
+    color: var(--nm-fg-subtle);
+  }
+
+  .nm-dropdown__trigger--chip:hover:not(:disabled),
+  .nm-dropdown__trigger--chip:focus-visible:not(:disabled),
+  .nm-dropdown__trigger--chip[aria-expanded='true']:not(:disabled) {
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+  }
+
+  .nm-dropdown__lead,
+  .nm-dropdown__chevron,
+  .nm-dropdown__trigger .nm-icon,
+  .nm-dropdown__trigger img {
+    display: block;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+  }
+
+  .nm-dropdown__panel,
+  .nm-dropdown__subpanel {
+    z-index: var(--nm-menu-z);
+    display: flex;
+    flex-direction: column;
+    gap: var(--nm-space-4);
+    min-width: 13.5rem;
+    max-height: var(--nm-dropdown-max);
+    margin: 0;
+    padding: var(--nm-list-pad);
+    border: var(--nm-rule) solid var(--nm-line-strong);
+    border-radius: var(--nm-menu-radius);
+    background: var(--nm-panel);
+    color: var(--nm-fg);
+    list-style: none;
+    box-shadow: none;
+    scrollbar-width: none;
+  }
+
+  .nm-dropdown__panel,
+  .nm-dropdown__subpanel {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .nm-dropdown__panel[data-scrolling='true'],
+  .nm-dropdown__subpanel[data-scrolling='true'] {
+    scrollbar-width: thin;
+    scrollbar-color: var(--nm-stroke) transparent;
+  }
+
+  .nm-dropdown__panel::-webkit-scrollbar,
+  .nm-dropdown__subpanel::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
+
+  .nm-dropdown__panel[data-scrolling='true']::-webkit-scrollbar,
+  .nm-dropdown__subpanel[data-scrolling='true']::-webkit-scrollbar {
+    width: var(--nm-rail-scrollbar);
+    height: var(--nm-rail-scrollbar);
+  }
+
+  .nm-dropdown__panel[data-scrolling='true']::-webkit-scrollbar-thumb,
+  .nm-dropdown__subpanel[data-scrolling='true']::-webkit-scrollbar-thumb {
+    background: var(--nm-stroke);
+    border-radius: var(--nm-radius-sm);
+  }
+
+  .nm-dropdown__panel {
+    position: absolute;
+    top: calc(100% + var(--nm-space-8));
+    left: 0;
+  }
+
+  .nm-dropdown__panel--end {
+    left: auto;
+    right: 0;
+  }
+
+  .nm-dropdown__panel--portal {
+    position: fixed;
+    z-index: calc(var(--nm-menu-z) + 2);
+    top: var(--nm-dropdown-top);
+    left: var(--nm-dropdown-left, auto);
+    right: var(--nm-dropdown-right, auto);
+  }
+
+  .nm-dropdown__panel--row {
+    box-sizing: border-box;
+    width: var(--nm-dropdown-width, auto);
+    min-width: 0;
+  }
+
+  .nm-dropdown__branch {
+    position: relative;
+  }
+
+  .nm-dropdown__subpanel {
+    position: fixed;
+    z-index: calc(var(--nm-menu-z) + 3);
+  }
+
+  .nm-dropdown__separator.nm-dropdown__separator {
+    height: 0;
+    margin: var(--nm-space-8) 0;
+    border: 0;
+    border-top: var(--nm-rule) solid var(--nm-line);
+    background: transparent;
+  }
+
+  /* One item metric. The repeated class wins over utility padding on the same node. */
+  .nm-dropdown__item.nm-dropdown__item {
+    display: flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    width: 100%;
+    box-sizing: border-box;
+    min-height: var(--nm-icon-control);
+    justify-content: space-between;
+    padding: var(--nm-icon-pad);
+    border: 0;
+    border-radius: var(--nm-panel-item-radius);
+    background: transparent;
+    color: var(--nm-fg);
+    font-family: var(--nm-font);
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-medium);
+    line-height: var(--nm-leading-tight);
+    text-align: left;
+    white-space: nowrap;
+    cursor: pointer;
+    outline: none;
+  }
+
+  .nm-dropdown__item.nm-dropdown__item:hover,
+  .nm-dropdown__item.nm-dropdown__item:focus,
+  .nm-dropdown__item.nm-dropdown__item:focus-visible,
+  .nm-dropdown__item.nm-dropdown__item[aria-selected='true'],
+  .nm-dropdown__item.nm-dropdown__item[data-highlighted],
+  .nm-dropdown__item.nm-dropdown__item[data-state='open'] {
+    background: var(--nm-line);
+    color: var(--nm-fg);
+  }
+
+  .nm-dropdown__item.nm-dropdown__item--danger {
+    color: rgb(var(--nm-destructive-rgb));
+  }
+
+  .nm-dropdown__item.nm-dropdown__item--disabled,
+  .nm-dropdown__item.nm-dropdown__item[data-disabled] {
+    cursor: default;
+    opacity: 0.5;
+  }
+
+  .nm-dropdown__item.nm-dropdown__item--quiet,
+  .nm-dropdown__item.nm-dropdown__item--quiet:hover,
+  .nm-dropdown__item.nm-dropdown__item--quiet:focus,
+  .nm-dropdown__item.nm-dropdown__item--quiet:focus-visible,
+  .nm-dropdown__item.nm-dropdown__item--quiet[data-highlighted] {
+    background: transparent;
+    color: var(--nm-fg-subtle);
+    cursor: default;
+  }
+
+  .nm-dropdown__mark {
+    width: var(--nm-space-8);
+    height: var(--nm-space-8);
+    flex-shrink: 0;
+    border-radius: 50%;
+    background: var(--nm-status-idle);
+  }
+
+  .nm-dropdown__mark--busy {
+    background: var(--nm-status-busy);
+  }
+
+  .nm-dropdown__mark--live {
+    background: var(--nm-status-live);
+  }
+
+  .nm-dropdown__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+    flex-shrink: 0;
+    color: inherit;
+  }
+
+  .nm-dropdown__icon img,
+  .nm-dropdown__icon svg,
+  .nm-dropdown__icon .nm-icon {
+    display: block;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+  }
+
+  .nm-dropdown__copy {
+    display: flex;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nm-space-16);
+  }
+
+  .nm-dropdown__item .nm-dropdown__label {
+    line-height: var(--nm-leading-tight);
+  }
+
+  .nm-dropdown__detail {
+    color: var(--nm-stroke);
+    font-size: var(--nm-type-ui);
+    font-weight: var(--nm-weight-medium);
+    text-align: right;
+    white-space: nowrap;
+  }
+
+  .nm-dropdown__trailing {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nm-space-8);
+    margin-inline-start: auto;
+  }
+
+  .nm-dropdown__shortcut {
+    padding: 0;
+    color: var(--nm-stroke);
+    font: inherit;
+    line-height: inherit;
+    white-space: nowrap;
+  }
+
+  .nm-dropdown__check {
+    display: none;
+    flex-shrink: 0;
+    margin-inline-start: auto;
+    width: var(--nm-icon-button);
+    height: var(--nm-icon-button);
+  }
+
+  .nm-dropdown__item--branch .nm-dropdown__check {
+    display: block;
+    transform: rotate(-90deg);
+  }
+
+  .nm-dropdown--hover {
+    display: none;
+  }
+
+  [data-nm-menu]:hover .nm-dropdown--hover,
+  [data-nm-menu]:focus-within .nm-dropdown--hover,
+  .nm-dropdown--hover[data-open='true'] {
+    display: inline-flex;
+  }

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

@@ -0,0 +1,412 @@
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type MouseEvent as ReactMouseEvent,
+  type ReactNode,
+  type Ref,
+} from 'react';
+import { createPortal } from 'react-dom';
+import type { NmIconId } from '../../config/nm-icons.ts';
+import {
+  NM_DROPDOWN_ALIGN,
+  NM_DROPDOWN_CLASSES,
+  NM_DROPDOWN_REVEAL,
+  NM_DROPDOWN_SCROLL_IDLE_MS,
+  NM_DROPDOWN_TONE,
+  NM_DROPDOWN_TRIGGER,
+} from '../../config/nm-dropdown.ts';
+import {
+  dropdownPortalHost,
+  placeNmDropdownPanel,
+  placeNmDropdownRowPanel,
+} from './nm-dropdown-placement';
+import { NordmanIconButton } from '../nordman-icon-button/nordman-icon-button.tsx';
+import { openDropdownBranch, type NmDropdownItem } from './nm-dropdown-item';
+import { findDropdownItem, NmDropdownOptions } from './nm-dropdown-options';
+import { NM_ICON_BUTTON_TONES } from '../../config/nm-icon-button.ts';
+import { NmDropdownPanel } from './nm-dropdown-panel';
+import { createLogger } from '../../kit-logger.ts';
+import { NmIcon } from '../nm-icon/nm-icon.tsx';
+
+const logger = createLogger('interface-nm-dropdown');
+
+function dropdownGlyph(
+  imageSrc: string | undefined,
+  icon: NmIconId | undefined,
+  iconClass?: string,
+): ReactNode {
+  if (imageSrc) {
+    return <img src={imageSrc} alt="" />;
+  }
+  if (icon) {
+    return <NmIcon id={icon} className={iconClass} />;
+  }
+  return null;
+}
+
+export type { NmDropdownItem };
+
+export type NmDropdownProps = {
+  label: string;
+  items?: readonly NmDropdownItem[];
+  selected?: string | null;
+  testId?: string;
+  trigger?: (typeof NM_DROPDOWN_TRIGGER)[keyof typeof NM_DROPDOWN_TRIGGER];
+  tone?: (typeof NM_DROPDOWN_TONE)[keyof typeof NM_DROPDOWN_TONE];
+  align?: (typeof NM_DROPDOWN_ALIGN)[keyof typeof NM_DROPDOWN_ALIGN];
+  icon?: NmIconId;
+  imageSrc?: string;
+  displayLabel?: string;
+  /** Chip/text triggers show only the lead icon; `label` stays for accessibility. */
+  iconOnly?: boolean;
+  portal?: boolean;
+  portalRoot?: HTMLElement | null;
+  disabled?: boolean;
+  /** `hover` hides the trigger until the host with `data-nm-menu` is hovered or focused. */
+  reveal?: (typeof NM_DROPDOWN_REVEAL)[keyof typeof NM_DROPDOWN_REVEAL];
+  open?: boolean;
+  triggerClassName?: string;
+  triggerRef?: Ref<HTMLButtonElement>;
+  onOpenChange?: (open: boolean) => void;
+  onSelect?: (id: string) => void;
+  onBranchExpand?: (id: string) => void;
+};
+
+function isIconTrigger(trigger: NmDropdownProps['trigger']): boolean {
+  return trigger === NM_DROPDOWN_TRIGGER.icon || trigger === NM_DROPDOWN_TRIGGER.iconButton;
+}
+
+function assignTriggerRef(ref: Ref<HTMLButtonElement> | undefined, node: HTMLButtonElement | null) {
+  if (ref == null) {
+    return;
+  }
+  if (typeof ref === 'function') {
+    ref(node);
+    return;
+  }
+  (ref as { current: HTMLButtonElement | null }).current = node;
+}
+
+export function NmDropdown(props: NmDropdownProps): ReactNode {
+  const panelId = useId();
+  const rootRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLUListElement>(null);
+  const triggerNodeRef = useRef<HTMLButtonElement | null>(null);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const [expandedIds, setExpandedIds] = useState<readonly string[]>([]);
+  const alignName = props.align === NM_DROPDOWN_ALIGN.end ? 'end' : 'start';
+  const [motionPlacement, setMotionPlacement] = useState(`bottom-${alignName}`);
+  const { open: openProp, onOpenChange } = props;
+  const open = openProp ?? uncontrolledOpen;
+  const setOpen = useCallback(
+    (next: boolean): void => {
+      if (openProp === undefined) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [openProp, onOpenChange],
+  );
+  const items = props.items ?? [];
+  const selected = findDropdownItem(items, props.selected);
+  const triggerLabel = props.displayLabel ?? selected?.label ?? props.label;
+  const leadIcon = selected?.icon ?? props.icon;
+  const chip = props.tone != null;
+  const iconOnlyTrigger = props.iconOnly === true;
+  const iconTrigger = isIconTrigger(props.trigger);
+  const iconButton = props.trigger === NM_DROPDOWN_TRIGGER.iconButton;
+  const portal = props.portal ?? iconTrigger;
+  const triggerClass = [
+    NM_DROPDOWN_CLASSES.trigger,
+    props.trigger === NM_DROPDOWN_TRIGGER.icon ? NM_DROPDOWN_CLASSES.triggerIcon : '',
+    chip ? NM_DROPDOWN_CLASSES.triggerChip : '',
+    chip && iconOnlyTrigger ? NM_DROPDOWN_CLASSES.triggerChipIconOnly : '',
+    props.tone === NM_DROPDOWN_TONE.filled ? NM_DROPDOWN_CLASSES.triggerFilled : '',
+    props.tone === NM_DROPDOWN_TONE.outline ? NM_DROPDOWN_CLASSES.triggerOutline : '',
+    props.triggerClassName ?? '',
+  ]
+    .filter((value) => value !== '')
+    .join(' ');
+
+  useEffect(() => {
+    const panel = panelRef.current;
+    if (!open || panel == null) {
+      return;
+    }
+    let idle = 0;
+    const onScroll = (event: Event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) {
+        return;
+      }
+      const inSubmenu = target.closest(`.${NM_DROPDOWN_CLASSES.subpanel}`) != null;
+      const inPanel = panel.contains(target);
+      if (!inSubmenu && !inPanel) {
+        return;
+      }
+      if (inPanel && !inSubmenu) {
+        setExpandedIds((current) => (current.length === 0 ? current : []));
+      }
+      target.dataset.scrolling = 'true';
+      window.clearTimeout(idle);
+      idle = window.setTimeout(() => {
+        delete target.dataset.scrolling;
+      }, NM_DROPDOWN_SCROLL_IDLE_MS);
+    };
+    document.addEventListener('scroll', onScroll, true);
+    return () => {
+      document.removeEventListener('scroll', onScroll, true);
+      window.clearTimeout(idle);
+      delete panel.dataset.scrolling;
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    function onPointer(event: MouseEvent): void {
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      const inSubmenu =
+        target instanceof Element && target.closest(`.${NM_DROPDOWN_CLASSES.subpanel}`) != null;
+      if (rootRef.current?.contains(target) || panelRef.current?.contains(target) || inSubmenu) {
+        return;
+      }
+      setOpen(false);
+      setExpandedIds([]);
+    }
+    function onKey(event: KeyboardEvent): void {
+      if (event.key === 'Escape') {
+        setOpen(false);
+        setExpandedIds([]);
+      }
+    }
+    document.addEventListener('mousedown', onPointer);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onPointer);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open, setOpen]);
+
+  useLayoutEffect(() => {
+    if (!open || !portal) {
+      return;
+    }
+    function applyPlacement(): void {
+      const trigger = triggerNodeRef.current;
+      const panel = panelRef.current;
+      if (trigger == null || panel == null) {
+        return;
+      }
+      const rect = trigger.getBoundingClientRect();
+      const viewport = { width: window.innerWidth, height: window.innerHeight };
+      const rowEl = props.align === NM_DROPDOWN_ALIGN.row ? trigger.closest('.nm-rail__row') : null;
+      if (rowEl instanceof HTMLElement) {
+        const rowRect = rowEl.getBoundingClientRect();
+        const placement = placeNmDropdownRowPanel({
+          row: {
+            top: rowRect.top,
+            left: rowRect.left,
+            right: rowRect.right,
+            bottom: rowRect.bottom,
+            width: rowRect.width,
+            height: rowRect.height,
+          },
+          panel: { height: panel.offsetHeight },
+          viewport,
+        });
+        panel.style.setProperty('--nm-dropdown-top', `${placement.top}px`);
+        panel.style.setProperty('--nm-dropdown-left', `${placement.left}px`);
+        panel.style.setProperty('--nm-dropdown-right', 'auto');
+        panel.style.setProperty('--nm-dropdown-width', `${placement.width}px`);
+        panel.style.width = `${placement.width}px`;
+        logger.debug('place-row', triggerLabel, placement);
+        return;
+      }
+
+      const placement = placeNmDropdownPanel({
+        trigger: {
+          top: rect.top,
+          left: rect.left,
+          right: rect.right,
+          bottom: rect.bottom,
+          width: rect.width,
+          height: rect.height,
+        },
+        panel: { width: panel.offsetWidth, height: panel.offsetHeight },
+        viewport,
+        align: props.align ?? NM_DROPDOWN_ALIGN.start,
+      });
+      panel.style.removeProperty('--nm-dropdown-width');
+      panel.style.removeProperty('width');
+      panel.style.setProperty('--nm-dropdown-top', `${placement.top}px`);
+      panel.style.setProperty('--nm-dropdown-left', `${placement.left}px`);
+      panel.style.setProperty('--nm-dropdown-right', 'auto');
+      logger.debug('place', triggerLabel, placement);
+    }
+    applyPlacement();
+    window.addEventListener('resize', applyPlacement);
+    window.addEventListener('scroll', applyPlacement, true);
+    return () => {
+      window.removeEventListener('resize', applyPlacement);
+      window.removeEventListener('scroll', applyPlacement, true);
+    };
+  }, [open, portal, props.align, alignName, items.length, expandedIds, triggerLabel]);
+
+  logger.debug('render', triggerLabel, { open, items: items.length });
+
+  const panelClass = [
+    NM_DROPDOWN_CLASSES.panel,
+    props.align === NM_DROPDOWN_ALIGN.end ? NM_DROPDOWN_CLASSES.panelEnd : '',
+    props.align === NM_DROPDOWN_ALIGN.row ? NM_DROPDOWN_CLASSES.panelRow : '',
+    portal ? NM_DROPDOWN_CLASSES.panelPortal : '',
+  ]
+    .filter((value) => value !== '')
+    .join(' ');
+
+  const panel = (
+    <NmDropdownPanel
+      open={open}
+      placement={motionPlacement}
+      className={panelClass}
+      id={panelId}
+      label={props.label}
+      panelRef={panelRef}
+    >
+      <NmDropdownOptions
+        items={items}
+        selected={props.selected}
+        expandedIds={expandedIds}
+        onOpenBranch={(id) => {
+          setExpandedIds((current) => {
+            const next = openDropdownBranch(items, id);
+            const same =
+              next.length === current.length &&
+              next.every((value, index) => value === current[index]);
+            if (same) {
+              return current;
+            }
+            logger.debug('hover', id);
+            props.onBranchExpand?.(id);
+            return next;
+          });
+        }}
+        onCloseBranches={() => {
+          setExpandedIds((current) => (current.length === 0 ? current : []));
+        }}
+        onSelect={(id) => {
+          logger.debug('select', id);
+          props.onSelect?.(id);
+          setOpen(false);
+          setExpandedIds([]);
+        }}
+      />
+    </NmDropdownPanel>
+  );
+
+  const bindTrigger = (node: HTMLButtonElement | null) => {
+    triggerNodeRef.current = node;
+    assignTriggerRef(props.triggerRef, node);
+  };
+  const toggle = (event: ReactMouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    if (!open) {
+      const rect = triggerNodeRef.current?.getBoundingClientRect();
+      if (rect != null) {
+        const side = rect.bottom + 120 > window.innerHeight ? 'top' : 'bottom';
+        setMotionPlacement(`${side}-${alignName}`);
+      }
+    }
+    setOpen(!open);
+  };
+
+  const rootClass = [
+    NM_DROPDOWN_CLASSES.root,
+    props.reveal === NM_DROPDOWN_REVEAL.hover ? NM_DROPDOWN_CLASSES.revealHover : '',
+  ]
+    .filter((value) => value !== '')
+    .join(' ');
+
+  let triggerElement: JSX.Element;
+  if (props.trigger === NM_DROPDOWN_TRIGGER.icon) {
+    triggerElement = (
+      <NordmanIconButton
+        label={props.label}
+        glyph={props.imageSrc == null ? (props.icon ?? 'ellipsis') : undefined}
+        imageSrc={props.imageSrc}
+        tone={NM_ICON_BUTTON_TONES.subtle}
+        disabled={props.disabled}
+        expanded={open}
+        popup="listbox"
+        controls={panelId}
+        ref={bindTrigger}
+        onClick={toggle}
+      />
+    );
+  } else if (iconButton) {
+    triggerElement = (
+      <NordmanIconButton
+        glyph={props.icon ?? 'ellipsis'}
+        label={props.label}
+        className={props.triggerClassName}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={panelId}
+        ref={bindTrigger}
+        onClick={toggle}
+      />
+    );
+  } else {
+    triggerElement = (
+      <button
+        className={triggerClass}
+        type="button"
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={panelId}
+        aria-label={props.label}
+        ref={bindTrigger}
+        onClick={toggle}
+      >
+        {iconOnlyTrigger ? (
+          dropdownGlyph(
+            props.imageSrc,
+            iconOnlyTrigger ? (leadIcon ?? props.icon ?? 'ellipsis') : (props.icon ?? 'ellipsis'),
+            iconOnlyTrigger ? NM_DROPDOWN_CLASSES.lead : undefined,
+          )
+        ) : (
+          <>
+            {dropdownGlyph(props.imageSrc, leadIcon, NM_DROPDOWN_CLASSES.lead)}
+            <span className={NM_DROPDOWN_CLASSES.label}>{triggerLabel}</span>
+          </>
+        )}
+        {chip || iconTrigger ? null : (
+          <NmIcon id="chevron" className={NM_DROPDOWN_CLASSES.chevron} />
+        )}
+      </button>
+    );
+  }
+
+  return (
+    <div
+      className={rootClass}
+      ref={rootRef}
+      data-testid={props.testId}
+      data-open={open ? 'true' : undefined}
+      data-reveal={props.reveal}
+    >
+      {triggerElement}
+      {portal && typeof document !== 'undefined'
+        ? createPortal(panel, dropdownPortalHost(props.portalRoot, triggerNodeRef.current))
+        : panel}
+    </div>
+  );
+}