@evinvest/uikit 0.15.2 → 0.17.0

package/README.md

@@ -170,8 +170,8 @@ measuring needs host-only `web-sys`). Known gaps:
 - **Rust overlays** (dialog, popover, dropdown, select, menus, tooltip, …) render
   inline with `position:fixed` + a backdrop and CSS-only placement — no portal,
   no viewport-measured floating, native focus order (no trap). TS overlays use a
-  real `Portal`, single-flip `useFloating`, `useDismissableLayer`, and
-  `useFocusScope`.
+  real `Portal`, single-flip `useFloating` (absolute in the document, so it
+  scrolls with the page natively), `useDismissableLayer`, and `useFocusScope`.
 - **chart:** the recharts plotting engine is not bundled. `ChartContainer` is a
   themed SVG host (emits `--color-*` from its config); `ChartTooltipContent` /
   `ChartLegendContent` are presentational and take explicit items. Draw series
@@ -182,17 +182,21 @@ measuring needs host-only `web-sys`). Known gaps:
   submit's default — inputs, validation and the order itself are the
   consumer's. The open-orders pane reuses `Table` and `Tabs`.
 - **calendar:** single month, single-date selection (no range/multi-month, no
-  dropdown captions). `min`/`max` bound the grid at day granularity (days outside
-  render `disabled` + `data-disabled="true"`); `disabled` freezes the
-  whole grid and the nav the same way; the nav buttons take label overrides. TS-only `locale` renders the caption and weekday headers through
+  dropdown captions). The grid is always six fixed weeks of 36px cells, so its
+  size never changes with the month or the locale's weekday labels, and it
+  paints no background of its own (the host does). `min`/`max` bound the grid
+  at day granularity (days outside render `disabled` + `data-disabled="true"`);
+  `disabled` freezes the whole grid and the nav the same way; the nav buttons
+  take label overrides. TS-only `locale` renders the caption and weekday headers through
   `Intl` (Monday-first); Rust has no `Intl`, so its captions stay English. Rust
   does manual date math; TS uses the built-in `Date`.
 - **date-time-picker:** the kit's own bricks only — an outline trigger, a
   `Popover` with the `Calendar` and two numeric 24-hour hours/minutes fields (no
   native `datetime-local` / `time` input, so the browser's locale popup never
   appears). Its ARIA and button strings are `labels` overrides with English
-  defaults — the nav buttons, the hours/minutes `aria-label`s, the clear button
-  and the popover's own accessible name (`labels.dialog`). TS formats the trigger label through `Intl` when `locale` is set,
+  defaults — the nav buttons, the hours/minutes `aria-label`s, the clear button,
+  the close button (`labels.close`, which keeps the value) and the popover's own
+  accessible name (`labels.dialog`). TS formats the trigger label through `Intl` when `locale` is set,
   else `YYYY-MM-DD HH:MM`; Rust has no `Intl`: the ISO-like label or the
   `format` callback, English month/weekday captions. The hidden form value is
   unix seconds in TS and `YYYY-MM-DDTHH:MM` in Rust (no zone there). The Rust
@@ -215,9 +219,19 @@ measuring needs host-only `web-sys`). Known gaps:
   onto an arbitrary child (no `Slot`), so it publishes them as a
   `FormControlContext` that `Input`/`Textarea` consume; wrap a bare element and
   you wire them yourself.
-- **resizable / carousel / drawer:** pointer-drag physics are TS-only (keyboard
-  in Rust for resizable; prev/next + keyboard for carousel; click-to-dismiss for
-  drawer). Embla momentum / vaul drag-to-dismiss are not reproduced.
+- **resizable / carousel:** pointer-drag physics are TS-only (keyboard in Rust
+  for resizable; prev/next + keyboard for carousel). Embla momentum is not
+  reproduced.
+- **drawer:** the Vaul-style enter/exit motion is shared by both ports via
+  `motion.css` (inlined into `tokens.css`), keyed on `data-slot` +
+  `data-vaul-drawer-direction` + `data-state`; the panel stays mounted on close
+  until its exit `transitionend`. Drag-to-dismiss (Vaul's pointer physics, from
+  any of the four edges; opt a region out with `data-vaul-no-drag`) is TS-only;
+  Rust dismisses on scrim click / Escape / `DrawerClose`. The panel is
+  `touch-action: none` so a touch never turns into a page pan, which also means
+  the panel itself must not scroll: the kit renders children inside a
+  `data-slot="drawer-body"` scroller (`overflow-y-auto`), so cap the sheet with
+  `max-h-*` on `DrawerContent` and let the body scroll by itself.
 - **sidebar:** the mobile-sheet integration, cookie persistence, and keyboard
   shortcut are omitted.
 - **brand chrome (header / footer / status pages):** TS routes links through an

package/dist/index.d.ts

@@ -80,11 +80,28 @@ interface FloatingResult {
     align: Align;
 }
 /**
- * Positions a floating element against an anchor with `position: fixed` and
- * `getBoundingClientRect` — the dep-light stand-in for `@radix-ui/react-popper`
- * / floating-ui. Supports a preferred `side`/`align`, an `offset`, and a single
- * collision flip onto the opposite side when the preferred side overflows the
- * viewport. Recomputes on scroll and resize while `open`.
+ * Positions a floating element against an anchor with `position: absolute` in
+ * the coordinate space of its containing block (the `Portal` puts it in
+ * `document.body`, so normally document coordinates) — the dep-light stand-in
+ * for `@radix-ui/react-popper` / floating-ui. Supports a preferred
+ * `side`/`align`, an `offset`, and a single collision flip onto the opposite
+ * side when the preferred side overflows the viewport.
+ *
+ * Two update modes:
+ * - `place()` — full pass (flip + clamp into the viewport) on open, on window
+ *   `resize`, and whenever the anchor or the floating element changes size.
+ * - `sync()` — re-derives the coordinates from the anchor with the side and
+ *   the clamp shift already chosen; runs on every `scroll` (captured on
+ *   `window`, so nested scroll containers count too).
+ *
+ * Because the element is absolutely positioned in the document, a document
+ * scroll moves it natively with the page — `sync()` then computes the same
+ * numbers and is a no-op — so the overlay never lags behind the compositor.
+ * Only a nested scroll container changes the coordinates, and there a frame
+ * of lag is acceptable. The side is never revisited on scroll: no jumping.
+ * A page that scrolls `body` instead of the document (`html { overflow:
+ * hidden } body { overflow: auto }`) is such a nested scroller: correct, but
+ * with the frame of lag the `fixed` strategy had.
  *
  * Rust's overlays use CSS-only placement (`data-side`) and do not measure; see
  * the README "Limitations".
@@ -109,11 +126,22 @@ declare function useFloating(opts: {
 declare function useFocusScope(enabled: boolean): React.RefObject<HTMLDivElement | null>;
 
 /**
- * Tracks whether an overlay should be mounted. Mount/unmount steps in lockstep
- * with `present`: enter animations (`data-[state=open]:animate-in`) still play
- * on mount, but the kit intentionally does **not** defer unmount for an exit
- * animation — deferring made portaled overlays flicker on close. Pass `ref`
- * through to the animated node (kept for API stability / future use).
+ * Keeps an overlay mounted through its exit animation. Enter animations
+ * (`data-[state=open]:animate-in`) play on mount; once `present` turns false
+ * the consumer flips the node to `data-state="closed"` in the same render and
+ * the node stays until its exit animation ends (or the fallback timer fires).
+ * Re-opening mid-exit just flips the state back; the node is never remounted.
+ *
+ * The exit was dropped once (5728b40) because closing flickered: tw-animate's
+ * `animate-out` runs with `animation-fill-mode: none`, so after `animationend`
+ * the node snaps back to full opacity/scale for the frame React needs to
+ * process an async unmount. Hence `flushSync` inside the native listener —
+ * the unmount commits before the browser paints that frame (Radix Presence
+ * does the same). With no animation on the node (jsdom, overlays without an
+ * exit class) unmount is immediate, as before. The Rust mirror still does not
+ * defer unmount.
+ *
+ * Pass `ref` to the animated node — the one carrying `data-state`.
  */
 declare function usePresence(present: boolean): {
     isPresent: boolean;
@@ -1242,10 +1270,10 @@ declare function SheetTitle({ className, ...props }: React.ComponentProps<"h2">)
 declare function SheetDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
 
 declare const drawerDirectionClasses: {
-    readonly bottom: "data-[state=open]:slide-in-from-bottom data-[state=closed]:slide-out-to-bottom inset-x-0 bottom-0 mt-24 max-h-[80vh] flex-col rounded-t-lg border-b-0";
-    readonly top: "data-[state=open]:slide-in-from-top data-[state=closed]:slide-out-to-top inset-x-0 top-0 mb-24 max-h-[80vh] flex-col rounded-b-lg border-t-0";
-    readonly left: "data-[state=open]:slide-in-from-left data-[state=closed]:slide-out-to-left inset-y-0 left-0 w-3/4 flex-row border-r sm:max-w-sm";
-    readonly right: "data-[state=open]:slide-in-from-right data-[state=closed]:slide-out-to-right inset-y-0 right-0 w-3/4 flex-row border-l sm:max-w-sm";
+    readonly bottom: "inset-x-0 bottom-0 mt-24 max-h-[80vh] flex-col rounded-t-lg border-b-0";
+    readonly top: "inset-x-0 top-0 mb-24 max-h-[80vh] flex-col rounded-b-lg border-t-0";
+    readonly left: "inset-y-0 left-0 w-3/4 flex-row border-r sm:max-w-sm";
+    readonly right: "inset-y-0 right-0 w-3/4 flex-row border-l sm:max-w-sm";
 };
 type DrawerDirection = keyof typeof drawerDirectionClasses;
 
@@ -1265,7 +1293,20 @@ interface DrawerCloseProps extends React.ComponentProps<"button"> {
     asChild?: boolean;
 }
 declare function DrawerClose({ asChild, onClick, ...props }: DrawerCloseProps): React.JSX.Element;
+/**
+ * Standalone scrim, redundant with the one {@link DrawerContent} renders (as in
+ * shadcn). Mounted only while open; the animated exit lives on the content's
+ * own scrim.
+ */
 declare function DrawerOverlay({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element | null;
+/**
+ * The panel plus its scrim. Presence outlives `open`: once it turns false the
+ * panel flips to `data-state="closed"` and is unmounted when its exit
+ * `transform` transition ends (or the fallback timer fires). Re-opening
+ * mid-exit just flips the state back and the same transition carries the
+ * panel home. Drag-to-dismiss is TS-only pointer physics; opt a region out
+ * with `data-vaul-no-drag`.
+ */
 declare function DrawerContent({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element | null;
 declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
@@ -1431,6 +1472,8 @@ interface DateTimePickerLabels {
     clear?: string;
     /** `aria-label` of the popover dialog; "Choose date and time". */
     dialog?: string;
+    /** `aria-label` of the close button; "Close". */
+    close?: string;
 }
 interface DateTimePickerProps extends React.AriaAttributes, Pick<React.ComponentProps<"button">, "onFocus" | "onBlur"> {
     /** Controlled value; `null` = empty. Local-zone `Date` (seconds/ms are zeroed on every change). */
@@ -1476,10 +1519,11 @@ interface DateTimePickerProps extends React.AriaAttributes, Pick<React.Component
  * `datetime-local`, so the browser's locale popup never appears.
  *
  * Every edit reports through `onChange`; the popover stays open after a day
- * click (the operator still sets the time) and closes on clear. Opening moves
- * focus into the hours field; closing hands it back to the trigger unless the
- * operator already focused something else. Any other `aria-*` prop, `onFocus`
- * and `onBlur` land on the trigger.
+ * click (the operator still sets the time) and closes on clear or on the close
+ * button (which keeps the value). Opening moves focus into the hours field;
+ * closing hands it back to the trigger unless the operator already focused
+ * something else. Any other `aria-*` prop, `onFocus` and `onBlur` land on the
+ * trigger.
  */
 declare function DateTimePicker({ value: valueProp, defaultValue, onChange, min, max, locale, format, placeholder, labels, disabled, name, today, open, defaultOpen, onOpenChange, align, className, id, ...rest }: DateTimePickerProps): React.JSX.Element;