@mlola-ui/registry 1.0.0

package/snapshot/source/packages/components/context-menu/context-menu.tsx

@@ -0,0 +1,192 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { IconCheck } from "@mlola-ui/icons";
+import { cx } from "../_internal/react";
+import { usePortalNode } from "../_internal/floating";
+
+export interface ContextMenuItem {
+  label: string;
+  icon?: React.ReactNode;
+  shortcut?: string;
+  disabled?: boolean;
+  danger?: boolean;
+  /** Shows a tick, for toggles such as "Show grid". */
+  checked?: boolean;
+  /** Draw a divider above this item. */
+  separatorBefore?: boolean;
+  onSelect?: () => void;
+}
+
+export interface ContextMenuProps {
+  /** The area that answers a right-click, a long press or the menu key. */
+  children: React.ReactNode;
+  /** The items, or a function that builds them for what was clicked. */
+  items: ContextMenuItem[] | ((target: EventTarget | null) => ContextMenuItem[]);
+  label?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+/** Keep a menu of this size inside the window, flipping from the pointer when it would overflow. */
+export function placeMenu(x: number, y: number, width: number, height: number, viewport: { width: number; height: number }, margin = 8) {
+  const left = x + width + margin > viewport.width ? Math.max(margin, x - width) : x;
+  const top = y + height + margin > viewport.height ? Math.max(margin, y - height) : y;
+  return { left, top };
+}
+
+/**
+ * Actions for what is under the pointer: right-click (or long-press, or the
+ * menu key) opens a menu at that spot, kept inside the window. Arrows move,
+ * a letter jumps, Enter chooses, Escape returns focus where it was.
+ */
+export function ContextMenu({ children, items, label = "Actions", disabled, className }: ContextMenuProps) {
+  const portal = usePortalNode();
+  const [state, setState] = React.useState<{ x: number; y: number; items: ContextMenuItem[] } | null>(null);
+  const [active, setActive] = React.useState(0);
+  const menu = React.useRef<HTMLDivElement>(null);
+  const returnTo = React.useRef<HTMLElement | null>(null);
+  const press = React.useRef<number | undefined>(undefined);
+
+  // From the keyboard the first item is highlighted; from a pointer nothing is until the pointer or an arrow moves.
+  const openAt = (x: number, y: number, target: EventTarget | null, keyboard = false) => {
+    const list = typeof items === "function" ? items(target) : items;
+    if (!list.length) return;
+    returnTo.current = document.activeElement as HTMLElement | null;
+    setState({ x, y, items: list });
+    setActive(keyboard ? list.findIndex((item) => !item.disabled) : -1);
+  };
+
+  const close = React.useCallback((restore = true) => {
+    setState(null);
+    if (restore) requestAnimationFrame(() => returnTo.current?.focus?.());
+  }, []);
+
+  // Place inside the window once the menu's size is known, then take focus.
+  React.useLayoutEffect(() => {
+    const element = menu.current;
+    if (!state || !element) return;
+    const { left, top } = placeMenu(state.x, state.y, element.offsetWidth, element.offsetHeight, { width: window.innerWidth, height: window.innerHeight });
+    element.style.left = `${left}px`;
+    element.style.top = `${top}px`;
+    element.focus({ preventScroll: true });
+  }, [state]);
+
+  React.useEffect(() => {
+    if (!state) return;
+    const away = (event: Event) => {
+      if (!menu.current?.contains(event.target as Node)) close(false);
+    };
+    const shut = () => close(false);
+    document.addEventListener("pointerdown", away, true);
+    window.addEventListener("resize", shut);
+    window.addEventListener("scroll", shut, true);
+    window.addEventListener("blur", shut);
+    return () => {
+      document.removeEventListener("pointerdown", away, true);
+      window.removeEventListener("resize", shut);
+      window.removeEventListener("scroll", shut, true);
+      window.removeEventListener("blur", shut);
+    };
+  }, [state, close]);
+
+  const choose = (item: ContextMenuItem | undefined) => {
+    if (!item || item.disabled) return;
+    close();
+    item.onSelect?.();
+  };
+
+  const move = (step: number) => {
+    if (!state) return;
+    const count = state.items.length;
+    let next = active < 0 ? (step > 0 ? -1 : count) : active;
+    for (let tries = 0; tries < count; tries++) {
+      next = (next + step + count) % count;
+      if (!state.items[next].disabled) break;
+    }
+    setActive(next);
+  };
+
+  const onMenuKey = (event: React.KeyboardEvent) => {
+    if (!state) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      move(event.key === "ArrowDown" ? 1 : -1);
+    } else if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      setActive(event.key === "Home" ? 0 : state.items.length - 1);
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      choose(state.items[active]);
+    } else if (event.key === "Escape" || event.key === "Tab") {
+      event.preventDefault();
+      close();
+    } else if (/^\w$/.test(event.key)) {
+      // A letter jumps to the next item that starts with it.
+      const letter = event.key.toLowerCase();
+      const order = state.items.map((_, index) => (active + 1 + index) % state.items.length);
+      const found = order.find((index) => !state.items[index].disabled && state.items[index].label.toLowerCase().startsWith(letter));
+      if (found !== undefined) setActive(found);
+    }
+  };
+
+  return (
+    <div
+      className={cx("ml-context-menu-area", className)}
+      onContextMenu={(event) => {
+        if (disabled) return;
+        event.preventDefault();
+        openAt(event.clientX, event.clientY, event.target);
+      }}
+      onKeyDown={(event) => {
+        if (disabled) return;
+        if (event.key === "ContextMenu" || (event.shiftKey && event.key === "F10")) {
+          event.preventDefault();
+          const rect = (event.target as HTMLElement).getBoundingClientRect();
+          openAt(rect.left + 8, rect.bottom, event.target, true);
+        }
+      }}
+      onPointerDown={(event) => {
+        // A long press opens the menu on touch screens.
+        if (event.pointerType !== "touch" || disabled) return;
+        const { clientX, clientY, target } = event;
+        press.current = window.setTimeout(() => openAt(clientX, clientY, target), 520);
+      }}
+      onPointerUp={() => window.clearTimeout(press.current)}
+      onPointerMove={() => window.clearTimeout(press.current)}
+    >
+      {children}
+      {state && portal
+        ? createPortal(
+            <div ref={menu} className="ml-context-menu" role="menu" aria-label={label} tabIndex={-1} onKeyDown={onMenuKey} style={{ left: state.x, top: state.y }}>
+              {state.items.map((item, index) => (
+                <React.Fragment key={`${item.label}-${index}`}>
+                  {item.separatorBefore ? <div className="ml-context-menu-separator" role="separator" /> : null}
+                  <button
+                    type="button"
+                    role={item.checked === undefined ? "menuitem" : "menuitemcheckbox"}
+                    aria-checked={item.checked === undefined ? undefined : item.checked}
+                    tabIndex={-1}
+                    className="ml-context-menu-item"
+                    data-highlighted={index === active || undefined}
+                    data-danger={item.danger || undefined}
+                    aria-disabled={item.disabled || undefined}
+                    onPointerMove={() => !item.disabled && index !== active && setActive(index)}
+                    onClick={() => choose(item)}
+                  >
+                    <span className="ml-context-menu-icon" aria-hidden="true">
+                      {item.checked ? <IconCheck size="1em" /> : item.icon}
+                    </span>
+                    <span className="ml-context-menu-label">{item.label}</span>
+                    {item.shortcut ? <span className="ml-context-menu-shortcut">{item.shortcut}</span> : null}
+                  </button>
+                </React.Fragment>
+              ))}
+            </div>,
+            portal,
+          )
+        : null}
+    </div>
+  );
+}

package/snapshot/source/packages/components/date-picker/date-picker.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import * as React from "react";
+import { IconCalendar, IconX } from "@mlola-ui/icons";
+import { Calendar, addDays, isDateBlocked, rangeProblem, today as todayOf, type DateMatchers, type DateRange, type ISODate } from "../calendar/calendar";
+import { Field, fieldDescription } from "../input/input";
+import { Popover } from "../popover/popover";
+import { cx } from "../_internal/react";
+import { startOfMonth, toTime } from "../calendar/dates";
+
+export type { DateMatcher, DateMatchers, DateRange, ISODate } from "../calendar/calendar";
+
+export interface DatePreset {
+  label: string;
+  value: ISODate | DateRange;
+}
+
+interface BaseProps {
+  label?: React.ReactNode;
+  hint?: React.ReactNode;
+  error?: React.ReactNode;
+  placeholder?: string;
+  min?: ISODate;
+  max?: ISODate;
+  /** Dates that cannot be picked: dates, `{ from, to }`, `{ before }`, `{ after }`, `{ dayOfWeek }` or a function. */
+  disabledDates?: DateMatchers;
+  /** When given, only these dates can be picked. */
+  enabledDates?: DateMatchers;
+  isDisabled?: (date: ISODate) => boolean;
+  /** Quick picks beside the calendar, such as "Last 7 days". */
+  presets?: DatePreset[];
+  weekStart?: 0 | 1;
+  locale?: string;
+  /** Show a button that empties the field. */
+  clearable?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  id?: string;
+  /** Today's date, for server rendering. */
+  today?: ISODate;
+  className?: string;
+}
+
+interface SingleProps {
+  mode?: "single";
+  value?: ISODate | null;
+  defaultValue?: ISODate | null;
+  onValueChange?: (value: ISODate | null) => void;
+}
+
+interface RangeProps {
+  mode: "range";
+  value?: DateRange | null;
+  defaultValue?: DateRange | null;
+  onValueChange?: (value: DateRange | null) => void;
+  /** Shortest range in days, counted inclusively. */
+  minDays?: number;
+  /** Longest range in days, counted inclusively. */
+  maxDays?: number;
+  /** Let a range pass over disabled dates. */
+  allowDisabledInRange?: boolean;
+}
+
+export type DatePickerProps = BaseProps & (SingleProps | RangeProps);
+
+/** Ranges people reach for, relative to today. */
+export function rangePresets(today = todayOf()): DatePreset[] {
+  return [
+    { label: "Today", value: { from: today, to: today } },
+    { label: "Last 7 days", value: { from: addDays(today, -6), to: today } },
+    { label: "Last 30 days", value: { from: addDays(today, -29), to: today } },
+    { label: "This month", value: { from: startOfMonth(today), to: today } },
+  ];
+}
+
+/**
+ * A date field that opens a calendar: one date, or a range with presets
+ * beside two months. The field shows the choice in the reader's own format;
+ * the value stays an ISO date, so it round-trips through forms and APIs.
+ */
+export function DatePicker(props: DatePickerProps) {
+  const { label, hint, error, placeholder, min, max, disabledDates, enabledDates, isDisabled, presets, weekStart, locale = "en", clearable = true, disabled, required, id, today, className } = props;
+  const mode = props.mode ?? "single";
+  const autoId = React.useId();
+  const fieldId = id ?? autoId;
+  const [open, setOpen] = React.useState(false);
+  const [inner, setInner] = React.useState<ISODate | DateRange | null>((props.defaultValue as ISODate | DateRange | null) ?? null);
+  const value = props.value !== undefined ? (props.value as ISODate | DateRange | null) : inner;
+  const commit = (next: ISODate | DateRange | null) => {
+    if (props.value === undefined) setInner(next);
+    (props.onValueChange as ((value: ISODate | DateRange | null) => void) | undefined)?.(next);
+  };
+
+  const format = new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", year: "numeric", timeZone: "UTC" });
+  const show = (date: ISODate) => format.format(new Date(toTime(date)));
+  const text =
+    value === null
+      ? null
+      : typeof value === "string"
+        ? show(value)
+        : value.to && value.to !== value.from
+          ? `${show(value.from)} – ${show(value.to)}`
+          : show(value.from);
+  const shownPresets = presets ?? (mode === "range" ? rangePresets(today) : []);
+  const blocked = (date: ISODate) => isDateBlocked(date, { min, max, disabled: disabledDates, enabled: enabledDates }) || Boolean(isDisabled?.(date));
+  const rangeRules = props.mode === "range" ? { minDays: props.minDays, maxDays: props.maxDays, allowBlockedInside: props.allowDisabledInRange } : {};
+  // A preset the rules refuse stays in the list, but cannot be chosen.
+  const presetRefused = (preset: DatePreset) =>
+    typeof preset.value === "string" ? blocked(preset.value) : rangeProblem(preset.value.from, preset.value.to ?? preset.value.from, blocked, rangeRules) !== null;
+  const rules = { min, max, disabledDates, enabledDates, isDisabled, weekStart, locale, today };
+
+  const trigger = (
+    <button
+      id={fieldId}
+      type="button"
+      className="ml-input ml-date-picker-trigger"
+      data-empty={text ? undefined : ""}
+      disabled={disabled}
+      aria-invalid={error ? true : undefined}
+      aria-describedby={fieldDescription(fieldId, { hint, error })}
+    >
+      <IconCalendar aria-hidden="true" size="1em" className="ml-date-picker-icon" />
+      <span className="ml-date-picker-value">{text ?? placeholder ?? (mode === "range" ? "Pick a range" : "Pick a date")}</span>
+    </button>
+  );
+
+  return (
+    <Field id={fieldId} label={label} hint={hint} error={error} required={required} disabled={disabled} className={cx("ml-date-picker", className)}>
+      <div className="ml-date-picker-control">
+        <Popover trigger={trigger} label={typeof label === "string" ? label : mode === "range" ? "Choose dates" : "Choose a date"} open={open} onOpenChange={setOpen} side="bottom" align="start" className="ml-date-picker-popover">
+          <div className="ml-date-picker-panel" data-presets={shownPresets.length ? "" : undefined}>
+            {shownPresets.length ? (
+              <ul className="ml-date-picker-presets" aria-label="Presets">
+                {shownPresets.map((preset) => (
+                  <li key={preset.label}>
+                    <button
+                      type="button"
+                      className="ml-date-picker-preset"
+                      disabled={presetRefused(preset)}
+                      onClick={() => {
+                        commit(preset.value);
+                        setOpen(false);
+                      }}
+                    >
+                      {preset.label}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+            {mode === "range" ? (
+              <Calendar
+                mode="range"
+                months={2}
+                value={value as DateRange | null}
+                onValueChange={(next) => {
+                  commit(next);
+                  if (next?.to) setOpen(false);
+                }}
+                minDays={props.mode === "range" ? props.minDays : undefined}
+                maxDays={props.mode === "range" ? props.maxDays : undefined}
+                allowDisabledInRange={props.mode === "range" ? props.allowDisabledInRange : undefined}
+                {...rules}
+              />
+            ) : (
+              <Calendar
+                value={value as ISODate | null}
+                onValueChange={(next) => {
+                  commit(next);
+                  if (next) setOpen(false);
+                }}
+                {...rules}
+              />
+            )}
+          </div>
+        </Popover>
+        {clearable && text && !disabled ? (
+          <button type="button" className="ml-date-picker-clear" aria-label="Clear date" onClick={() => commit(null)}>
+            <IconX aria-hidden="true" size="0.9em" />
+          </button>
+        ) : null}
+      </div>
+    </Field>
+  );
+}

package/snapshot/source/packages/components/dropdown-menu/dropdown-menu.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import * as React from "react";
+import { rovingIndex } from "@mlola-ui/behavior/logic";
+import { composeRefs, cx } from "../_internal/react";
+import { IconChevronDown } from "@mlola-ui/icons";
+
+interface DropdownMenuItem {
+  label: string;
+  shortcut?: string;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+  danger?: boolean;
+  separatorBefore?: boolean;
+}
+
+interface DropdownMenuProps {
+  trigger: React.ReactNode;
+  items: DropdownMenuItem[];
+  label?: string;
+  align?: "start" | "end";
+  onSelect?: (label: string) => void;
+  className?: string;
+}
+
+const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
+  ({ trigger, items, label = "Menu", align = "start", onSelect, className }, ref) => {
+    const [open, setOpen] = React.useState(false);
+    const [activeIndex, setActiveIndex] = React.useState(-1);
+    const rootRef = React.useRef<HTMLDivElement>(null);
+    const triggerRef = React.useRef<HTMLButtonElement>(null);
+    const itemRefs = React.useRef<Array<HTMLButtonElement | null>>([]);
+    const enabled = React.useMemo(
+      () => items.map((item, index) => item.disabled ? -1 : index).filter((index) => index >= 0),
+      [items]
+    );
+    const close = React.useCallback((restore = false) => {
+      setOpen(false);
+      setActiveIndex(-1);
+      if (restore) requestAnimationFrame(() => triggerRef.current?.focus());
+    }, []);
+    const focus = React.useCallback((index: number) => {
+      if (index < 0) return;
+      setActiveIndex(index);
+      requestAnimationFrame(() => itemRefs.current[index]?.focus());
+    }, []);
+    const openAt = (index: number) => {
+      setOpen(true);
+      focus(index);
+    };
+    const choose = (index: number) => {
+      const item = items[index];
+      if (!item || item.disabled) return;
+      onSelect?.(item.label);
+      close(true);
+    };
+    // Shared with the framework-free runtime, so the highlight steps over
+    // disabled items the same way in both.
+    const move = (key: string) => {
+      const target = rovingIndex(items.length, activeIndex, key, {
+        horizontal: false,
+        enabled: (at) => !items[at].disabled,
+      });
+      if (target >= 0) focus(target);
+    };
+
+    React.useEffect(() => {
+      if (!open) return;
+      const onPointerDown = (event: MouseEvent) => {
+        if (rootRef.current && event.target instanceof Node && !rootRef.current.contains(event.target)) close();
+      };
+      document.addEventListener("mousedown", onPointerDown);
+      return () => document.removeEventListener("mousedown", onPointerDown);
+    }, [close, open]);
+
+    return (
+      <div ref={composeRefs(rootRef, ref)} className={cx("ml-dropdown", className)} data-state={open ? "open" : "closed"}>
+        <button
+          ref={triggerRef}
+          type="button"
+          aria-haspopup="menu"
+          aria-expanded={open}
+          className="ml-dropdown-trigger"
+          onClick={() => open ? close() : openAt(enabled[0] ?? -1)}
+          onKeyDown={(event) => {
+            if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+              event.preventDefault();
+              openAt(enabled[0] ?? -1);
+            } else if (event.key === "ArrowUp") {
+              event.preventDefault();
+              openAt(enabled[enabled.length - 1] ?? -1);
+            } else if (event.key === "Escape") {
+              close(true);
+            }
+          }}
+        >
+          <span className="ml-dropdown-trigger-label">{trigger}</span>
+          <IconChevronDown aria-hidden="true" className="ml-dropdown-chevron" size="1em" />
+        </button>
+        {open ? (
+          <div
+            role="menu"
+            aria-label={label}
+            data-align={align}
+            className="ml-dropdown-menu"
+            onKeyDown={(event) => {
+              if (event.key === "Escape") {
+                event.preventDefault();
+                close(true);
+              } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                event.preventDefault();
+                move(event.key);
+              } else if (event.key === "Home" || event.key === "End") {
+                event.preventDefault();
+                focus(event.key === "Home" ? enabled[0] : enabled[enabled.length - 1]);
+              } else if (event.key === "Tab") {
+                close();
+              } else if (event.key.length === 1 && /\S/.test(event.key)) {
+                const start = Math.max(0, enabled.indexOf(activeIndex) + 1);
+                const ordered = [...enabled.slice(start), ...enabled.slice(0, start)];
+                const match = ordered.find((index) => items[index].label.toLocaleLowerCase().startsWith(event.key.toLocaleLowerCase()));
+                if (match !== undefined) focus(match);
+              }
+            }}
+          >
+            <div className="ml-dropdown-label">{label}</div>
+            {items.map((item, index) => (
+              <React.Fragment key={`${item.label}-${index}`}>
+                {item.separatorBefore ? <div role="separator" className="ml-dropdown-separator" /> : null}
+                <button
+                  ref={(node) => { itemRefs.current[index] = node; }}
+                  type="button"
+                  role="menuitem"
+                  tabIndex={activeIndex === index ? 0 : -1}
+                  disabled={item.disabled}
+                  aria-disabled={item.disabled || undefined}
+                  data-highlighted={activeIndex === index ? "" : undefined}
+                  data-danger={item.danger ? "" : undefined}
+                  className="ml-dropdown-item"
+                  onFocus={() => !item.disabled && setActiveIndex(index)}
+                  onPointerMove={() => !item.disabled && focus(index)}
+                  onClick={() => choose(index)}
+                >
+                  {item.icon ? <span aria-hidden="true" className="ml-dropdown-item-icon">{item.icon}</span> : null}
+                  <span className="ml-dropdown-item-label">{item.label}</span>
+                  {item.shortcut ? <span aria-hidden="true" className="ml-dropdown-shortcut">{item.shortcut}</span> : null}
+                </button>
+              </React.Fragment>
+            ))}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+);
+DropdownMenu.displayName = "DropdownMenu";
+export { DropdownMenu };