aeon-ui-engine 1.4.0 → 1.8.0

package/packages/react/dist/index.js

@@ -519,11 +519,15 @@ var Root4 = forwardRef5(function DialogRoot({ open, defaultOpen = false, onOpenC
   const [snapshot, send] = useAeonMachine(dialogMachine, {
     input: { open: defaultOpen }
   });
-  const resolvedOpen = open ?? snapshot.context.open;
+  const machineOpen = snapshot.context.open;
+  const resolvedOpen = open ?? machineOpen;
   const contentRef = useRef(null);
+  const reportedOpen = useRef(machineOpen);
   useEffect6(() => {
-    onOpenChange?.(resolvedOpen);
-  }, [resolvedOpen, onOpenChange]);
+    if (reportedOpen.current === machineOpen) return;
+    reportedOpen.current = machineOpen;
+    onOpenChange?.(machineOpen);
+  }, [machineOpen, onOpenChange]);
   useEffect6(() => {
     if (open !== void 0) {
       send({ type: "SET_OPEN", open });
@@ -1247,7 +1251,7 @@ import {
 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var SliderCtx = createContext8(null);
-function useSliderCtx() {
+function useSliderContext() {
   const ctx = useContext8(SliderCtx);
   if (!ctx) throw new Error("Slider parts must be used within Slider.Root");
   return ctx;
@@ -1280,12 +1284,24 @@ var Root11 = forwardRef12(function SliderRoot({
   });
   const resolvedValue = value ?? snapshot.context.value;
   const dragging = snapshot.matches({ interaction: "dragging" });
-  useEffect9(() => {
-    onValueChange?.(resolvedValue);
-  }, [resolvedValue, onValueChange]);
   useEffect9(() => {
     if (value !== void 0) send({ type: "SET_VALUE", value });
   }, [value, send]);
+  useEffect9(() => {
+    send({ type: "SET_BOUNDS", min, max, step });
+  }, [min, max, step, send]);
+  useEffect9(() => {
+    send({ type: "SET_DISABLED", disabled });
+  }, [disabled, send]);
+  const commit = useCallback2(
+    (next) => {
+      if (disabled) return;
+      const snapped = snapSliderValue(next, min, max, step);
+      send({ type: "SET_VALUE", value: snapped });
+      onValueChange?.(snapped);
+    },
+    [disabled, min, max, step, send, onValueChange]
+  );
   const setValueFromClientX = useCallback2(
     (clientX) => {
       const track = trackRef.current;
@@ -1293,11 +1309,9 @@ var Root11 = forwardRef12(function SliderRoot({
       const rect = track.getBoundingClientRect();
       if (rect.width <= 0) return;
       const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
-      const next = snapSliderValue(min + ratio * (max - min), min, max, step);
-      send({ type: "SET_VALUE", value: next });
-      if (value === void 0) onValueChange?.(next);
+      commit(min + ratio * (max - min));
     },
-    [disabled, min, max, step, send, value, onValueChange]
+    [commit, disabled, min, max]
   );
   useEffect9(() => {
     if (!dragging) return;
@@ -1318,12 +1332,25 @@ var Root11 = forwardRef12(function SliderRoot({
       step,
       disabled,
       dragging,
+      interaction: dragging ? "dragging" : "idle",
       send,
       onValueChange,
+      commit,
       setValueFromClientX,
       trackRef
     }),
-    [resolvedValue, min, max, step, disabled, dragging, send, onValueChange, setValueFromClientX]
+    [
+      resolvedValue,
+      min,
+      max,
+      step,
+      disabled,
+      dragging,
+      send,
+      onValueChange,
+      commit,
+      setValueFromClientX
+    ]
   );
   return /* @__PURE__ */ jsx11(SliderCtx.Provider, { value: ctx, children: /* @__PURE__ */ jsx11(
     "div",
@@ -1342,7 +1369,7 @@ var Root11 = forwardRef12(function SliderRoot({
   ) });
 });
 var Track2 = forwardRef12(function SliderTrack({ onPointerDown, ...rest }, ref) {
-  const { disabled, send, setValueFromClientX, trackRef } = useSliderCtx();
+  const { disabled, send, setValueFromClientX, trackRef } = useSliderContext();
   return /* @__PURE__ */ jsx11(
     "div",
     {
@@ -1368,7 +1395,7 @@ var Track2 = forwardRef12(function SliderTrack({ onPointerDown, ...rest }, ref)
   );
 });
 var Range2 = forwardRef12(function SliderRange({ style, ...rest }, ref) {
-  const { value, min, max } = useSliderCtx();
+  const { value, min, max } = useSliderContext();
   return /* @__PURE__ */ jsx11(
     "div",
     {
@@ -1380,7 +1407,7 @@ var Range2 = forwardRef12(function SliderRange({ style, ...rest }, ref) {
   );
 });
 var Thumb2 = forwardRef12(function SliderThumb({ onKeyDown, onPointerDown, style, ...rest }, ref) {
-  const { value, min, max, step, disabled, dragging, send, setValueFromClientX } = useSliderCtx();
+  const { value, min, max, step, disabled, dragging, send, commit, setValueFromClientX } = useSliderContext();
   return /* @__PURE__ */ jsx11(
     "span",
     {
@@ -1408,19 +1435,27 @@ var Thumb2 = forwardRef12(function SliderThumb({ onKeyDown, onPointerDown, style
             if (disabled || e.defaultPrevented) return;
             if (e.key === "ArrowRight" || e.key === "ArrowUp") {
               e.preventDefault();
-              send({ type: "STEP", delta: step });
+              commit(value + step);
             }
             if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
               e.preventDefault();
-              send({ type: "STEP", delta: -step });
+              commit(value - step);
+            }
+            if (e.key === "PageUp") {
+              e.preventDefault();
+              commit(value + (max - min) / 10);
+            }
+            if (e.key === "PageDown") {
+              e.preventDefault();
+              commit(value - (max - min) / 10);
             }
             if (e.key === "Home") {
               e.preventDefault();
-              send({ type: "HOME" });
+              commit(min);
             }
             if (e.key === "End") {
               e.preventDefault();
-              send({ type: "END" });
+              commit(max);
             }
           }
         },
@@ -1430,7 +1465,7 @@ var Thumb2 = forwardRef12(function SliderThumb({ onKeyDown, onPointerDown, style
   );
 });
 var ValueText = forwardRef12(function SliderValueText(props, ref) {
-  const { value } = useSliderCtx();
+  const { value } = useSliderContext();
   return /* @__PURE__ */ jsx11("span", { ref, ...mergeProps(partOnlyAttrs3(sliderAnatomy.valueText), props), children: props.children ?? value });
 });
 var Slider = { Root: Root11, Track: Track2, Range: Range2, Thumb: Thumb2, ValueText };
@@ -2628,20 +2663,35 @@ import { forwardRef as forwardRef23 } from "react";
 
 // src/hooks/use-anchor-position.ts
 import { useEffect as useEffect13 } from "react";
+var DEFAULT_GUTTER = 4;
+var DEFAULT_Z_INDEX = 50;
+var DEFAULT_PADDING = 8;
+function splitPlacement(placement) {
+  const [side, align] = placement.split("-");
+  return [side, align];
+}
 function useAnchorPosition(anchorRef, floatingRef, active, placement = "bottom-start", options = {}) {
-  const { matchWidth = false } = options;
+  const {
+    matchWidth = false,
+    gutter = DEFAULT_GUTTER,
+    zIndex = DEFAULT_Z_INDEX,
+    padding = DEFAULT_PADDING
+  } = options;
   useEffect13(() => {
     if (!active || !anchorRef.current || !floatingRef.current) return;
+    let frame = 0;
     const update = () => {
       const anchor = anchorRef.current;
       const floating = floatingRef.current;
       if (!anchor || !floating) return;
+      const [preferredSide, align] = splitPlacement(placement);
       const rect = anchor.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
       floating.style.position = "fixed";
-      floating.style.left = `${rect.left}px`;
       floating.style.bottom = "";
       floating.style.right = "";
-      floating.style.zIndex = "50";
+      floating.style.zIndex = String(zIndex);
       if (matchWidth) {
         floating.style.width = `${rect.width}px`;
         floating.style.minWidth = `${rect.width}px`;
@@ -2649,22 +2699,43 @@ function useAnchorPosition(anchorRef, floatingRef, active, placement = "bottom-s
         floating.style.width = "";
         floating.style.minWidth = "";
       }
-      if (placement === "top-start") {
-        const height = floating.offsetHeight || floating.getBoundingClientRect().height;
-        floating.style.top = `${rect.top - height - 4}px`;
-      } else {
-        floating.style.top = `${rect.bottom + 4}px`;
-      }
+      const width = floating.offsetWidth || floating.getBoundingClientRect().width;
+      const height = floating.offsetHeight || floating.getBoundingClientRect().height;
+      const roomBelow = viewportHeight - rect.bottom - gutter - padding;
+      const roomAbove = rect.top - gutter - padding;
+      const room = preferredSide === "top" ? roomAbove : roomBelow;
+      const side = room >= height ? preferredSide : roomAbove > roomBelow ? "top" : "bottom";
+      const available = side === "top" ? roomAbove : roomBelow;
+      let left = rect.left;
+      if (align === "end") left = rect.right - width;
+      else if (align === "center") left = rect.left + rect.width / 2 - width / 2;
+      const maxLeft = Math.max(padding, viewportWidth - width - padding);
+      left = Math.min(Math.max(padding, left), maxLeft);
+      const top = side === "top" ? Math.max(padding, rect.top - gutter - Math.min(height, Math.max(available, 0))) : Math.min(
+        rect.bottom + gutter,
+        Math.max(padding, viewportHeight - height - padding)
+      );
+      floating.style.left = `${Math.round(left)}px`;
+      floating.style.top = `${Math.round(top)}px`;
+      floating.style.setProperty("--aeon-available-height", `${Math.round(Math.max(available, 0))}px`);
+      floating.style.setProperty("--aeon-anchor-width", `${Math.round(rect.width)}px`);
+      floating.dataset.side = side;
+      floating.dataset.align = align;
+    };
+    const schedule = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(update);
     };
     update();
-    requestAnimationFrame(update);
-    window.addEventListener("resize", update);
-    window.addEventListener("scroll", update, true);
+    schedule();
+    window.addEventListener("resize", schedule);
+    window.addEventListener("scroll", schedule, true);
     return () => {
-      window.removeEventListener("resize", update);
-      window.removeEventListener("scroll", update, true);
+      cancelAnimationFrame(frame);
+      window.removeEventListener("resize", schedule);
+      window.removeEventListener("scroll", schedule, true);
     };
-  }, [active, anchorRef, floatingRef, placement, matchWidth]);
+  }, [active, anchorRef, floatingRef, placement, matchWidth, gutter, zIndex, padding]);
 }
 
 // src/floating/FloatingPositioner.tsx
@@ -2676,16 +2747,21 @@ var FloatingPositioner = forwardRef23(
     part,
     triggerRef,
     positionerRef,
+    anchorRef,
     portalled = true,
     placement = "bottom-start",
     matchAnchorWidth = false,
+    gutter,
+    zIndex,
     children,
     className,
     ...rest
   }, ref) {
     const mounted = usePortalledMount();
-    useAnchorPosition(triggerRef, positionerRef, open && portalled, placement, {
-      matchWidth: matchAnchorWidth
+    useAnchorPosition(anchorRef ?? triggerRef, positionerRef, open && portalled, placement, {
+      matchWidth: matchAnchorWidth,
+      gutter,
+      zIndex
     });
     if (!open) return null;
     const node = /* @__PURE__ */ jsx23(
@@ -3361,15 +3437,19 @@ var Root20 = forwardRef26(function PopoverRoot({ open, defaultOpen = false, onOp
   const [snapshot, send] = useAeonMachine(popoverMachine3, {
     input: { open: defaultOpen }
   });
-  const resolvedOpen = open ?? snapshot.context.open;
+  const machineOpen = snapshot.context.open;
+  const resolvedOpen = open ?? machineOpen;
   const rootRef = useRef9(null);
   const triggerRef = useRef9(null);
   const positionerRef = useRef9(null);
   const triggerId = useId5();
   const contentId = useId5();
+  const reportedOpen = useRef9(machineOpen);
   useEffect16(() => {
-    onOpenChange?.(resolvedOpen);
-  }, [resolvedOpen, onOpenChange]);
+    if (reportedOpen.current === machineOpen) return;
+    reportedOpen.current = machineOpen;
+    onOpenChange?.(machineOpen);
+  }, [machineOpen, onOpenChange]);
   useEffect16(() => {
     if (open !== void 0) send({ type: "SET_OPEN", open });
   }, [open, send]);
@@ -3425,7 +3505,17 @@ var Trigger4 = forwardRef26(function PopoverTrigger({ onClick, ...rest }, ref) {
     }
   );
 });
-var Positioner3 = forwardRef26(function PopoverPositioner({ portalled = true, placement = "bottom-start", children, className, ...rest }, ref) {
+var Positioner3 = forwardRef26(function PopoverPositioner({
+  portalled = true,
+  placement = "bottom-start",
+  anchorRef,
+  matchAnchorWidth = false,
+  gutter,
+  zIndex,
+  children,
+  className,
+  ...rest
+}, ref) {
   const { open, triggerRef, positionerRef } = usePopoverCtx();
   return /* @__PURE__ */ jsx26(
     FloatingPositioner,
@@ -3436,8 +3526,12 @@ var Positioner3 = forwardRef26(function PopoverPositioner({ portalled = true, pl
       part: popoverAnatomy.positioner,
       triggerRef,
       positionerRef,
+      anchorRef,
+      matchAnchorWidth,
       portalled,
       placement,
+      gutter,
+      zIndex,
       className,
       ...rest,
       children
@@ -3520,15 +3614,19 @@ function useMenuCtx() {
 }
 var Root21 = forwardRef27(function MenuRoot({ open, defaultOpen = false, onOpenChange, children, className, ...rest }, ref) {
   const [snapshot, send] = useAeonMachine(popoverMachine4, { input: { open: defaultOpen } });
-  const resolvedOpen = open ?? snapshot.context.open;
+  const machineOpen = snapshot.context.open;
+  const resolvedOpen = open ?? machineOpen;
   const rootRef = useRef10(null);
   const triggerRef = useRef10(null);
   const positionerRef = useRef10(null);
   const triggerId = useId6();
   const menuId = useId6();
+  const reportedOpen = useRef10(machineOpen);
   useEffect17(() => {
-    onOpenChange?.(resolvedOpen);
-  }, [resolvedOpen, onOpenChange]);
+    if (reportedOpen.current === machineOpen) return;
+    reportedOpen.current = machineOpen;
+    onOpenChange?.(machineOpen);
+  }, [machineOpen, onOpenChange]);
   useEffect17(() => {
     if (open !== void 0) send({ type: "SET_OPEN", open });
   }, [open, send]);
@@ -3583,7 +3681,7 @@ var Trigger5 = forwardRef27(function MenuTrigger({ onClick, ...rest }, ref) {
     }
   );
 });
-var Positioner4 = forwardRef27(function MenuPositioner({ portalled = true, placement = "bottom-start", children, className, ...rest }, ref) {
+var Positioner4 = forwardRef27(function MenuPositioner({ portalled = true, placement = "bottom-start", gutter, zIndex, children, className, ...rest }, ref) {
   const { open, triggerRef, positionerRef } = useMenuCtx();
   return /* @__PURE__ */ jsx27(
     FloatingPositioner,
@@ -3596,6 +3694,8 @@ var Positioner4 = forwardRef27(function MenuPositioner({ portalled = true, place
       positionerRef,
       portalled,
       placement,
+      gutter,
+      zIndex,
       className,
       ...rest,
       children
@@ -3603,14 +3703,36 @@ var Positioner4 = forwardRef27(function MenuPositioner({ portalled = true, place
   );
 });
 var Content7 = forwardRef27(function MenuContent({ onKeyDown, ...rest }, ref) {
-  const { open, send, menuId } = useMenuCtx();
+  const { open, send, menuId, triggerRef } = useMenuCtx();
+  const contentRef = useRef10(null);
+  useEffect17(() => {
+    if (!open) return;
+    const trigger = triggerRef.current;
+    contentRef.current?.focus({ preventScroll: true });
+    return () => {
+      if (trigger?.isConnected) trigger.focus({ preventScroll: true });
+    };
+  }, [open, triggerRef]);
+  useEffect17(() => {
+    if (!open) return;
+    const onDocumentKeyDown = (event) => {
+      if (event.key === "Escape") send({ type: "ESCAPE" });
+    };
+    document.addEventListener("keydown", onDocumentKeyDown);
+    return () => document.removeEventListener("keydown", onDocumentKeyDown);
+  }, [open, send]);
   if (!open) return null;
   return /* @__PURE__ */ jsx27(
     "div",
     {
-      ref,
+      ref: (node) => {
+        contentRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
       id: menuId,
       role: "menu",
+      tabIndex: -1,
       ...mergeProps(
         partAttrs23(menuAnatomy.scope, menuAnatomy.content, { state: "open" }),
         {
@@ -3870,7 +3992,7 @@ var Trigger6 = forwardRef28(function TooltipTrigger({ onClick, onMouseEnter, onM
     }
   );
 });
-var Positioner5 = forwardRef28(function TooltipPositioner({ portalled = true, placement = "top-start", children, className, ...rest }, ref) {
+var Positioner5 = forwardRef28(function TooltipPositioner({ portalled = true, placement = "top-start", gutter, zIndex, children, className, ...rest }, ref) {
   const { open, triggerRef, positionerRef } = useTooltipCtx();
   return /* @__PURE__ */ jsx28(
     FloatingPositioner,
@@ -3883,6 +4005,8 @@ var Positioner5 = forwardRef28(function TooltipPositioner({ portalled = true, pl
       positionerRef,
       portalled,
       placement,
+      gutter,
+      zIndex,
       className,
       ...rest,
       children
@@ -5864,6 +5988,7 @@ export {
   useLayoutMode,
   useScrollContext,
   useScrollState,
+  useSliderContext,
   useStickyBarContext,
   useToast,
   useToastStore

package/packages/react/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"3.2.4","results":[[":src/select/select.test.tsx",{"duration":233.12287500000002,"failed":false}],[":src/dialog/dialog.test.tsx",{"duration":197.85458300000005,"failed":false}],[":src/avatar/avatar.test.tsx",{"duration":175.06837500000006,"failed":false}],[":src/tooltip/tooltip.test.tsx",{"duration":236.69991700000014,"failed":false}],[":src/toast/toast.test.tsx",{"duration":174.01087499999994,"failed":false}]]}
+{"version":"3.2.4","results":[[":src/select/select.test.tsx",{"duration":196.07670899999994,"failed":false}],[":src/dialog/dialog.test.tsx",{"duration":181.65270800000008,"failed":false}],[":src/avatar/avatar.test.tsx",{"duration":117.92833299999984,"failed":false}],[":src/tooltip/tooltip.test.tsx",{"duration":210.20837500000016,"failed":false}],[":src/toast/toast.test.tsx",{"duration":134.57233399999996,"failed":false}]]}

package/packages/react/src/dialog/dialog.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
 import { describe, expect, it, vi } from 'vitest'
 import { Dialog } from '../dialog/index.js'
 
@@ -47,4 +48,30 @@ describe('Dialog', () => {
     unmount()
     expect(document.body.style.overflow).not.toBe('hidden')
   })
+
+  it('reports the trigger to a controlled owner', async () => {
+    const user = userEvent.setup()
+
+    function Controlled() {
+      const [open, setOpen] = useState(false)
+      return (
+        <Dialog.Root open={open} onOpenChange={setOpen}>
+          <Dialog.Trigger>Open</Dialog.Trigger>
+          <Dialog.Portal portalled={false}>
+            <Dialog.Content>
+              <Dialog.Title>Title</Dialog.Title>
+              <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
+            </Dialog.Content>
+          </Dialog.Portal>
+        </Dialog.Root>
+      )
+    }
+
+    render(<Controlled />)
+    await user.click(screen.getByRole('button', { name: 'Open' }))
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: 'Close dialog' }))
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
 })

package/packages/react/src/dialog/index.tsx

@@ -52,12 +52,20 @@ const Root = forwardRef<HTMLDivElement, DialogRootProps>(function DialogRoot(
     input: { open: defaultOpen },
   })
 
-  const resolvedOpen = open ?? snapshot.context.open
+  const machineOpen = snapshot.context.open
+  const resolvedOpen = open ?? machineOpen
   const contentRef = useRef<HTMLDivElement>(null)
 
+  /**
+   * Report the machine's intent, not the resolved value: a controlled owner
+   * holding `open` would otherwise never hear about its own trigger or escape.
+   */
+  const reportedOpen = useRef(machineOpen)
   useEffect(() => {
-    onOpenChange?.(resolvedOpen)
-  }, [resolvedOpen, onOpenChange])
+    if (reportedOpen.current === machineOpen) return
+    reportedOpen.current = machineOpen
+    onOpenChange?.(machineOpen)
+  }, [machineOpen, onOpenChange])
 
   useEffect(() => {
     if (open !== undefined) {

package/packages/react/src/floating/FloatingPositioner.tsx

@@ -10,9 +10,22 @@ export interface FloatingPositionerProps extends HTMLAttributes<HTMLDivElement>
   part: string
   triggerRef: RefObject<HTMLElement | null>
   positionerRef: RefObject<HTMLDivElement | null>
+  /**
+   * Position against this element instead of the trigger.
+   *
+   * A trigger is often a small icon button pinned to one edge of a much larger
+   * region. Aligning to the button then throws a wide surface off-screen, and
+   * clamping only slides it back to the viewport edge. Anchoring to the region
+   * the surface belongs to puts it where the eye already is.
+   */
+  anchorRef?: RefObject<HTMLElement | null>
   portalled?: boolean
   placement?: AnchorPlacement
   matchAnchorWidth?: boolean
+  /** Gap between trigger and surface. */
+  gutter?: number
+  /** Stack level for the portalled surface. */
+  zIndex?: number
   children?: ReactNode
 }
 
@@ -24,9 +37,12 @@ export const FloatingPositioner = forwardRef<HTMLDivElement, FloatingPositionerP
       part,
       triggerRef,
       positionerRef,
+      anchorRef,
       portalled = true,
       placement = 'bottom-start',
       matchAnchorWidth = false,
+      gutter,
+      zIndex,
       children,
       className,
       ...rest
@@ -34,8 +50,10 @@ export const FloatingPositioner = forwardRef<HTMLDivElement, FloatingPositionerP
     ref,
   ) {
     const mounted = usePortalledMount()
-    useAnchorPosition(triggerRef, positionerRef, open && portalled, placement, {
+    useAnchorPosition(anchorRef ?? triggerRef, positionerRef, open && portalled, placement, {
       matchWidth: matchAnchorWidth,
+      gutter,
+      zIndex,
     })
 
     if (!open) return null