@tensor_1/react 2.26.2 → 2.27.0

package/dist/components/Menu.js

@@ -0,0 +1,177 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cloneElement, createContext, isValidElement, useContext, useEffect, useId, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { Popover } from "./Popover.js";
+import { renderUixLink } from "../link.js";
+const MenuContext = createContext(null);
+const ITEM = '[role="menuitem"]:not([aria-disabled="true"])';
+function Menu({ trigger, children, open: controlledOpen, defaultOpen = false, onOpenChange, label, placement = "bottom-start", className }) {
+  const id = useId();
+  const menuId = `${id}-menu`;
+  const triggerId = `${id}-trigger`;
+  const triggerRef = useRef(null);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const open = controlledOpen ?? internalOpen;
+  const focusOnOpen = useRef("first");
+  const typeahead = useRef({ text: "", at: 0 });
+  const setOpen = (next) => {
+    if (controlledOpen === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const menu = () => document.getElementById(menuId);
+  const items = () => Array.from(menu()?.querySelectorAll(ITEM) ?? []);
+  const close = (refocus) => {
+    setOpen(false);
+    if (refocus) triggerRef.current?.focus();
+  };
+  useEffect(() => {
+    const el = menu();
+    if (!el) return;
+    const shown = () => {
+      try {
+        return el.matches(":popover-open");
+      } catch {
+        return false;
+      }
+    };
+    if (!open) {
+      if (shown()) {
+        try {
+          el.hidePopover();
+        } catch {
+        }
+      }
+      return;
+    }
+    if (!shown()) {
+      try {
+        el.showPopover();
+      } catch {
+      }
+    }
+    const list = items();
+    (focusOnOpen.current === "last" ? list[list.length - 1] : list[0])?.focus();
+    const onPointer = (event) => {
+      const target = event.target;
+      if (el.contains(target) || triggerRef.current?.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener("pointerdown", onPointer, true);
+    return () => document.removeEventListener("pointerdown", onPointer, true);
+  }, [open, menuId]);
+  const onMenuKeyDown = (event) => {
+    const list = items();
+    const index = list.indexOf(document.activeElement);
+    const move = (to) => {
+      event.preventDefault();
+      list[(to + list.length) % list.length]?.focus();
+    };
+    if (event.key === "ArrowDown") move(index + 1);
+    else if (event.key === "ArrowUp") move(index - 1);
+    else if (event.key === "Home") move(0);
+    else if (event.key === "End") move(list.length - 1);
+    else if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      close(true);
+    } else if (event.key === "Tab") close(false);
+    else if (event.key.length === 1 && /\S/.test(event.key) && !event.ctrlKey && !event.metaKey && !event.altKey) {
+      const now = Date.now();
+      typeahead.current = { text: now - typeahead.current.at > 600 ? event.key.toLowerCase() : typeahead.current.text + event.key.toLowerCase(), at: now };
+      const start = index + (typeahead.current.text.length === 1 ? 1 : 0);
+      const order = [...list.slice(start), ...list.slice(0, start)];
+      order.find((item) => (item.textContent ?? "").trim().toLowerCase().startsWith(typeahead.current.text))?.focus();
+    }
+  };
+  const triggerProps = isValidElement(trigger) ? trigger.props : {};
+  const triggerElement = isValidElement(trigger) ? cloneElement(trigger, {
+    ref: (node) => {
+      triggerRef.current = node;
+    },
+    id: triggerProps.id ?? triggerId,
+    "aria-haspopup": "menu",
+    "aria-expanded": open,
+    "aria-controls": open ? menuId : void 0,
+    onClick: (event) => {
+      triggerProps.onClick?.(event);
+      if (event.defaultPrevented) return;
+      focusOnOpen.current = "first";
+      setOpen(!open);
+    },
+    onKeyDown: (event) => {
+      triggerProps.onKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+        event.preventDefault();
+        focusOnOpen.current = event.key === "ArrowUp" ? "last" : "first";
+        if (open) {
+          const list = items();
+          (focusOnOpen.current === "last" ? list[list.length - 1] : list[0])?.focus();
+        } else setOpen(true);
+      }
+    }
+  }) : trigger;
+  return /* @__PURE__ */ jsxs(MenuContext.Provider, { value: { close }, children: [
+    triggerElement,
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        id: menuId,
+        popover: "manual",
+        anchor: triggerRef,
+        placement,
+        role: "menu",
+        "aria-label": label,
+        "aria-labelledby": label ? void 0 : triggerProps.id ?? triggerId,
+        className: cx("uix-menu", className),
+        onKeyDown: onMenuKeyDown,
+        children: open ? children : null
+      }
+    )
+  ] });
+}
+function MenuItem({ children, onSelect, href, renderLink, icon, shortcut, tone = "default", disabled, className }) {
+  const menu = useContext(MenuContext);
+  const classes = cx("uix-menu__item", tone === "danger" && "uix-menu__item--danger", className);
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon != null && /* @__PURE__ */ jsx("span", { className: "uix-menu__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("span", { className: "uix-menu__text", children }),
+    shortcut != null && /* @__PURE__ */ jsx("span", { className: "uix-menu__shortcut", children: shortcut })
+  ] });
+  if (href != null && !disabled) {
+    return /* @__PURE__ */ jsx(Fragment, { children: renderUixLink(renderLink, { href, role: "menuitem", tabIndex: -1, className: classes, onClick: () => menu?.close(false), children: body }) });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      tabIndex: -1,
+      className: classes,
+      "aria-disabled": disabled || void 0,
+      onClick: () => {
+        if (disabled) return;
+        onSelect?.();
+        menu?.close(true);
+      },
+      children: body
+    }
+  );
+}
+function MenuGroup({ label, children }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": id, children: [
+    /* @__PURE__ */ jsx("div", { id, className: "uix-menu__label", children: label }),
+    children
+  ] });
+}
+function MenuSeparator() {
+  return /* @__PURE__ */ jsx("div", { role: "separator", className: "uix-menu__sep" });
+}
+export {
+  Menu,
+  MenuGroup,
+  MenuItem,
+  MenuSeparator
+};

package/dist/components/Modal.d.ts

@@ -11,6 +11,6 @@ interface ModalProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     closeLabel?: string;
     role?: 'dialog' | 'alertdialog';
 }
-declare function Modal({ open, onClose, title, children, footer, className, closeLabel, role, ...rest }: ModalProps): react.JSX.Element;
+declare function Modal({ open, onClose, title, children, footer, className, closeLabel: closeLabelProp, role, ...rest }: ModalProps): react.JSX.Element;
 
 export { Modal, type ModalProps };

package/dist/components/Modal.js

@@ -2,9 +2,12 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
 import { useDialog } from "../hooks/useDialog.js";
 const CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-function Modal({ open, onClose, title, children, footer, className, closeLabel = "Close dialog", role = "dialog", ...rest }) {
+function Modal({ open, onClose, title, children, footer, className, closeLabel: closeLabelProp, role = "dialog", ...rest }) {
+  const uixLabels = useUixLabels();
+  const closeLabel = closeLabelProp ?? uixLabels.modal?.close ?? "Close dialog";
   const ref = useDialog(open, onClose);
   const titleId = useId();
   return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-dialog", className), role, "aria-labelledby": title != null ? titleId : void 0, ...rest, children: [

package/dist/components/Pagination.d.ts

@@ -1,19 +1,50 @@
 import * as react from 'react';
-import { HTMLAttributes } from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { UixRenderLink } from '../link.js';
 
 /** TENSOR RX-125 (UIX-04): the pager's accessible names. */
 interface PaginationLabels {
     region: string;
     previous: string;
     next: string;
+    /** Cursor mode's "back to the start" control (HAR-1357). */
+    first: string;
 }
 declare const DEFAULT_PAGINATION_LABELS: PaginationLabels;
 interface PaginationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
-    page: number;
-    pageCount: number;
-    onChange: (page: number) => void;
+    /**
+     * `offset` (default): numbered pages, needs `page` and `pageCount`.
+     * `cursor` (HAR-1357; MOTUS B-A22): keyset paging with no total — First, Previous, an
+     * optional `summary` ("21–40") and Next.
+     */
+    mode?: 'offset' | 'cursor';
+    /** Offset mode: the current page, from 1. */
+    page?: number;
+    /** Offset mode: the number of pages. */
+    pageCount?: number;
+    /** Offset mode, button pager: called with the page to show. */
+    onChange?: (page: number) => void;
+    /**
+     * Offset mode, link pager (HAR-1357; MOTUS B-P5): every page is a real link, so a
+     * server-rendered list pages without JavaScript. Wins over `onChange`.
+     */
+    hrefFor?: (page: number) => string;
+    /** Your router's link for `hrefFor` and the cursor hrefs; default a plain `<a>`. */
+    renderLink?: UixRenderLink;
+    /** Cursor mode: whether an earlier page exists (enables First and Previous). */
+    hasPrevious?: boolean;
+    /** Cursor mode: whether a later page exists. */
+    hasNext?: boolean;
+    onFirst?: () => void;
+    onPrevious?: () => void;
+    onNext?: () => void;
+    firstHref?: string;
+    previousHref?: string;
+    nextHref?: string;
+    /** Cursor mode: text between the controls, e.g. "21–40". */
+    summary?: ReactNode;
     labels?: Partial<PaginationLabels>;
 }
-declare function Pagination({ page, pageCount, onChange, labels: labelOverrides, className, ...props }: PaginationProps): react.JSX.Element;
+declare function Pagination({ mode, page, pageCount, onChange, hrefFor, renderLink, hasPrevious, hasNext, onFirst, onPrevious, onNext, firstHref, previousHref, nextHref, summary, labels: labelOverrides, className, ...props }: PaginationProps): react.JSX.Element;
 
 export { DEFAULT_PAGINATION_LABELS, Pagination, type PaginationLabels, type PaginationProps };

package/dist/components/Pagination.js

@@ -1,5 +1,7 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2 } from "react";
 import { cx } from "../cx.js";
+import { renderUixLink } from "../link.js";
 function getPageNumbers(page, total) {
   if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
   const pages = [1];
@@ -14,45 +16,65 @@ function getPageNumbers(page, total) {
 const DEFAULT_PAGINATION_LABELS = {
   region: "Pagination",
   previous: "Previous page",
-  next: "Next page"
+  next: "Next page",
+  first: "First page"
 };
-function Pagination({ page, pageCount, onChange, labels: labelOverrides, className, ...props }) {
+function Pagination({
+  mode = "offset",
+  page = 1,
+  pageCount = 1,
+  onChange,
+  hrefFor,
+  renderLink,
+  hasPrevious = false,
+  hasNext = false,
+  onFirst,
+  onPrevious,
+  onNext,
+  firstHref,
+  previousHref,
+  nextHref,
+  summary,
+  labels: labelOverrides,
+  className,
+  ...props
+}) {
   const labels = { ...DEFAULT_PAGINATION_LABELS, ...labelOverrides };
-  const pages = getPageNumbers(page, pageCount);
-  return /* @__PURE__ */ jsxs("nav", { "aria-label": labels.region, className: cx("uix-pagination", className), ...props, children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
+  const render = ({ key, content, label, current, disabled, href, onClick }) => {
+    if (href != null && !disabled) {
+      return /* @__PURE__ */ jsx(Fragment2, { children: renderUixLink(renderLink, {
+        href,
         className: "uix-pagination__btn",
-        onClick: () => onChange(page - 1),
-        disabled: page <= 1,
-        "aria-label": labels.previous,
-        children: "\u2039"
-      }
-    ),
-    pages.map(
-      (p, i) => p === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: "uix-pagination__ellipsis", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: "uix-pagination__btn",
-          "aria-current": p === page ? "page" : void 0,
-          onClick: () => onChange(p),
-          children: p
-        },
-        p
-      )
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        className: "uix-pagination__btn",
-        onClick: () => onChange(page + 1),
-        disabled: page >= pageCount,
-        "aria-label": labels.next,
-        children: "\u203A"
-      }
-    )
-  ] });
+        "aria-label": label,
+        "aria-current": current ? "page" : void 0,
+        children: content
+      }) }, key);
+    }
+    if (href != null || disabled && onClick == null) {
+      return /* @__PURE__ */ jsx("a", { className: "uix-pagination__btn", role: "link", "aria-disabled": "true", "aria-label": label, children: content }, key);
+    }
+    return /* @__PURE__ */ jsx("button", { type: "button", className: "uix-pagination__btn", "aria-label": label, "aria-current": current ? "page" : void 0, disabled, onClick, children: content }, key);
+  };
+  let controls;
+  if (mode === "cursor") {
+    const linked = firstHref != null || previousHref != null || nextHref != null;
+    controls = /* @__PURE__ */ jsxs(Fragment, { children: [
+      (onFirst || firstHref != null) && render({ key: "first", content: "\xAB", label: labels.first, disabled: !hasPrevious, href: linked ? firstHref ?? "" : void 0, onClick: onFirst }),
+      render({ key: "prev", content: "\u2039", label: labels.previous, disabled: !hasPrevious, href: linked ? previousHref ?? "" : void 0, onClick: onPrevious }),
+      summary != null && /* @__PURE__ */ jsx("span", { className: "uix-pagination__summary", children: summary }),
+      render({ key: "next", content: "\u203A", label: labels.next, disabled: !hasNext, href: linked ? nextHref ?? "" : void 0, onClick: onNext })
+    ] });
+  } else {
+    const go = (target) => hrefFor ? { href: hrefFor(target) } : { onClick: () => onChange?.(target) };
+    controls = /* @__PURE__ */ jsxs(Fragment, { children: [
+      render({ key: "prev", content: "\u2039", label: labels.previous, disabled: page <= 1, ...go(page - 1) }),
+      getPageNumbers(page, pageCount).map(
+        (p, i) => p === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: "uix-pagination__ellipsis", children: "\u2026" }, `e${i}`) : render({ key: `p${p}`, content: p, current: p === page, ...go(p) })
+      ),
+      render({ key: "next", content: "\u203A", label: labels.next, disabled: page >= pageCount, ...go(page + 1) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx("nav", { "aria-label": labels.region, className: cx("uix-pagination", className), ...props, children: controls });
 }
 export {
   DEFAULT_PAGINATION_LABELS,

package/dist/components/Peek.d.ts

@@ -17,6 +17,6 @@ interface PeekProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     onNavNext?: () => void;
     hint?: string;
 }
-declare function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, previousLabel, nextLabel, closeLabel, className, onClick, ...rest }: PeekProps): react.JSX.Element;
+declare function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, previousLabel: previousLabelProp, nextLabel: nextLabelProp, closeLabel: closeLabelProp, className, onClick, ...rest }: PeekProps): react.JSX.Element;
 
 export { Peek, type PeekProps };

package/dist/components/Peek.js

@@ -2,12 +2,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
 import { useDialog } from "../hooks/useDialog.js";
 import { backdropDismiss } from "../hooks/backdropDismiss.js";
 const CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
 const ChevronUp = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 8l4-4 4 4" }) });
 const ChevronDown = () => /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M2 4l4 4 4-4" }) });
-function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, previousLabel = "Previous record", nextLabel = "Next record", closeLabel = "Close preview", className, onClick, ...rest }) {
+function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, previousLabel: previousLabelProp, nextLabel: nextLabelProp, closeLabel: closeLabelProp, className, onClick, ...rest }) {
+  const uixLabels = useUixLabels();
+  const previousLabel = previousLabelProp ?? uixLabels.peek?.previous ?? "Previous record";
+  const nextLabel = nextLabelProp ?? uixLabels.peek?.next ?? "Next record";
+  const closeLabel = closeLabelProp ?? uixLabels.peek?.close ?? "Close preview";
   const ref = useDialog(open, onClose);
   const hasNav = onNavPrev != null || onNavNext != null;
   const titleId = useId();

package/dist/components/Popover.d.ts

@@ -10,16 +10,26 @@ interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
     popover?: 'auto' | 'manual';
     /**
      * Element (or ref) to anchor against. When set, the popover is placed with
-     * cross-browser JS positioning — flip when it won't fit, shift to stay on-screen —
-     * instead of relying on CSS `anchor()`, which is Chromium-only and detaches the
-     * popover from its trigger everywhere else. The native Popover API still provides
-     * the top layer (so it escapes `overflow` clipping) and light-dismiss.
+     * cross-browser JS positioning — flip when it won't fit, shift to stay on-screen.
+     * Where the browser supports CSS anchor positioning, the placement is written as an
+     * offset from the anchor, so it stays attached while the page scrolls; elsewhere it
+     * follows scroll from JS. The native Popover API still provides the top layer (so it
+     * escapes `overflow` clipping) and light-dismiss.
      */
     anchor?: RefObject<HTMLElement | null> | HTMLElement | null;
     /** Preferred placement when `anchor` is set. Default `'bottom-start'`. */
     placement?: Placement;
     /** Gap between the trigger and the popover, in px. Default 6. */
     offset?: number;
+    /**
+     * Close the popover once its `anchor` has scrolled completely out of view (outside the
+     * viewport or a clipping ancestor), e.g. a picker opened from an editor that the user
+     * scrolls away from. Focus inside the popover is let go rather than sent back to the
+     * hidden anchor. Needs `anchor`. Default `false`.
+     */
+    closeWhenAnchorHidden?: boolean;
+    /** Called when `closeWhenAnchorHidden` is about to close the popover. */
+    onAnchorHidden?: () => void;
     children?: ReactNode;
 }
 /**
@@ -27,6 +37,6 @@ interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
  * things like a filter popover, menu, or rich select by putting controls inside.
  * Pass `anchor` to get collision-aware, cross-browser placement (UIX-FIX-02).
  */
-declare function Popover({ popover, anchor, placement, offset, className, children, ...props }: PopoverProps): react.JSX.Element;
+declare function Popover({ popover, anchor, placement, offset, closeWhenAnchorHidden, onAnchorHidden, className, children, ...props }: PopoverProps): react.JSX.Element;
 
 export { Popover, type PopoverProps };

package/dist/components/Popover.js

@@ -1,19 +1,38 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { cx } from "../cx.js";
-import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
+import { resolveAnchor, useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const PLACING = "data-uix-placing";
+const isPopoverOpen = (el) => {
+  try {
+    return el.matches(":popover-open");
+  } catch {
+    return false;
+  }
+};
+const settle = (el) => {
+  if (!el.hasAttribute(PLACING)) return;
+  getComputedStyle(el).getPropertyValue("transform");
+  el.removeAttribute(PLACING);
+};
 function Popover({
   popover = "auto",
   anchor,
   placement = "bottom-start",
   offset = 6,
+  closeWhenAnchorHidden = false,
+  onAnchorHidden,
   className,
   children,
   ...props
 }) {
   const ref = useRef(null);
   const [open, setOpen] = useState(false);
+  const openRef = useRef(false);
+  const onAnchorHiddenRef = useRef(onAnchorHidden);
+  onAnchorHiddenRef.current = onAnchorHidden;
   const popoverAttr = { popover };
   const reposition = useAnchoredPosition(anchor ?? null, ref, {
     open: open && !!anchor,
@@ -23,14 +42,55 @@ function Popover({
   useEffect(() => {
     const el = ref.current;
     if (!el || !anchor) return;
+    const hold = (event) => {
+      if (event.newState !== "open") return;
+      el.setAttribute(PLACING, "");
+      window.setTimeout(() => settle(el), 150);
+    };
     const sync = () => {
-      const isOpen = el.matches(":popover-open");
-      if (isOpen) reposition();
-      setOpen(isOpen);
+      if (!isPopoverOpen(el)) {
+        el.removeAttribute(PLACING);
+        setOpen(false);
+        return;
+      }
+      reposition();
+      window.setTimeout(() => {
+        if (!isPopoverOpen(el)) return;
+        if (!openRef.current) {
+          setOpen(true);
+          return;
+        }
+        reposition();
+        settle(el);
+      }, 0);
     };
+    el.addEventListener("beforetoggle", hold);
     el.addEventListener("toggle", sync);
-    return () => el.removeEventListener("toggle", sync);
+    return () => {
+      el.removeEventListener("beforetoggle", hold);
+      el.removeEventListener("toggle", sync);
+      el.removeAttribute(PLACING);
+    };
   }, [anchor, reposition]);
+  useIsomorphicLayoutEffect(() => {
+    openRef.current = open;
+    if (open && ref.current) settle(ref.current);
+  }, [open]);
+  useEffect(() => {
+    const el = ref.current;
+    const anchorEl = resolveAnchor(anchor);
+    if (!closeWhenAnchorHidden || !open || !el || !anchorEl || typeof IntersectionObserver !== "function") return;
+    const observer = new IntersectionObserver((entries) => {
+      const latest = entries[entries.length - 1];
+      if (!latest || latest.isIntersecting || !isPopoverOpen(el)) return;
+      onAnchorHiddenRef.current?.();
+      const active = el.ownerDocument.activeElement;
+      if (active && el.contains(active)) active.blur();
+      el.hidePopover();
+    });
+    observer.observe(anchorEl);
+    return () => observer.disconnect();
+  }, [closeWhenAnchorHidden, open, anchor]);
   return /* @__PURE__ */ jsx("div", { ref, className: cx("uix-popover", className), ...popoverAttr, ...props, children });
 }
 export {

package/dist/components/SchedulingCalendar.d.ts

@@ -1,9 +1,17 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
+import { CalendarWeekday } from '../calendar-model.js';
 
 type SchedulingCalendarView = 'month' | 'week' | 'agenda';
 type SchedulingEntryState = 'scheduled' | 'conflicted' | 'in-progress' | 'blackout-violation';
 type SchedulingOverlayKind = 'maintenance' | 'blackout';
+/**
+ * Which date text a `formatDate` call is for (TENSOR B1/C9, HAR-1347):
+ * `day` names one day (each day cell's accessible name, the week-range title);
+ * `weekday` is the short column header (the date is any day of that weekday);
+ * `month` is the month-view title (the date is the first of the month).
+ */
+type SchedulingDatePart = 'day' | 'weekday' | 'month';
 interface SchedulingCalendarEntry {
     id: string;
     title: string;
@@ -38,6 +46,12 @@ interface SchedulingCalendarLabels {
     grid: string;
     entry: string;
     legend: string;
+    /** The "+N more" toggle on a day with more entries than `maxEntriesPerDay`. `{count}` placeholder. */
+    moreEntries: string;
+    /** Accessible name of that toggle. `{count}` and `{date}` placeholders. */
+    moreEntriesLabel: string;
+    /** The toggle once the day is expanded in place. */
+    fewerEntries: string;
     states: Record<SchedulingEntryState, string>;
 }
 declare const DEFAULT_SCHEDULING_CALENDAR_LABELS: SchedulingCalendarLabels;
@@ -53,6 +67,37 @@ interface SchedulingCalendarProps {
     filter?: (entry: SchedulingCalendarEntry) => boolean;
     renderEntry?: (entry: SchedulingCalendarEntry) => ReactNode;
     locale?: string;
+    /** First column of the month and week grids: 0 = Sunday … 6 = Saturday. Defaults to 1 (Monday). */
+    weekStartsOn?: CalendarWeekday;
+    /**
+     * Formats every calendar date the component writes (`date` is `YYYY-MM-DD`). Use it to
+     * apply a product date format such as DD.MM.YYYY; defaults to `Intl` in `locale`.
+     */
+    formatDate?: (date: string, part: SchedulingDatePart) => string;
+    /**
+     * Formats an entry's start or end instant (ISO 8601) for the agenda and the entry names.
+     * The component does not shift it: render it in `timeZone` yourself. Defaults to `Intl`
+     * medium date + short time in `timeZone`.
+     */
+    formatInstant?: (instant: string) => string;
+    /**
+     * Show at most this many entries in a month or week day; the rest collapse behind a
+     * "+N more" toggle. Unset shows every entry.
+     */
+    maxEntriesPerDay?: number;
+    /**
+     * Called by the "+N more" toggle with the day and every entry on it. When set, the
+     * consumer shows them (a popover, a drawer, the day view) and the day stays collapsed;
+     * otherwise the day expands in place.
+     */
+    onShowMore?: (date: string, entries: SchedulingCalendarEntry[]) => void;
+    /**
+     * A small badge beside a day's date, e.g. a collision count. Keep it short (a number or a
+     * glyph): it shares a narrow column with the date and is clipped, not wrapped. It sits
+     * outside the date button, so give it its own accessible text (a visually hidden word next
+     * to the number). Return null for no badge.
+     */
+    renderDayBadge?: (date: string, entries: SchedulingCalendarEntry[]) => ReactNode;
     loading?: boolean;
     error?: string;
     onRetry?: () => void;
@@ -60,6 +105,6 @@ interface SchedulingCalendarProps {
     labels?: Partial<SchedulingCalendarLabels>;
 }
 /** Month/week/agenda calendar for UTC ranges rendered in an explicit IANA time zone. */
-declare function SchedulingCalendar({ entries, anchorDate, timeZone, view: controlledView, onViewChange, onAnchorDateChange, onSelectEntry, overlays, filter, renderEntry, locale, loading, error, onRetry, className, labels: labelOverrides, }: SchedulingCalendarProps): react.JSX.Element;
+declare function SchedulingCalendar({ entries, anchorDate, timeZone, view: controlledView, onViewChange, onAnchorDateChange, onSelectEntry, overlays, filter, renderEntry, locale, weekStartsOn, formatDate, formatInstant: formatInstantProp, maxEntriesPerDay, onShowMore, renderDayBadge, loading, error, onRetry, className, labels: labelOverrides, }: SchedulingCalendarProps): react.JSX.Element;
 
-export { DEFAULT_SCHEDULING_CALENDAR_LABELS, SchedulingCalendar, type SchedulingCalendarEntry, type SchedulingCalendarLabels, type SchedulingCalendarOverlay, type SchedulingCalendarProps, type SchedulingCalendarView, type SchedulingEntryState, type SchedulingOverlayKind };
+export { DEFAULT_SCHEDULING_CALENDAR_LABELS, SchedulingCalendar, type SchedulingCalendarEntry, type SchedulingCalendarLabels, type SchedulingCalendarOverlay, type SchedulingCalendarProps, type SchedulingCalendarView, type SchedulingDatePart, type SchedulingEntryState, type SchedulingOverlayKind };