@astryxdesign/core 0.7.2-canary.c68f5e8 → 0.7.2-canary.caec7ca

package/dist/Drawer/DrawerHeader.d.ts

@@ -0,0 +1,85 @@
+/**
+ * @file DrawerHeader.tsx
+ * @input Uses React, StyleX, LayoutHeader, Button, Icon, Heading, Text, i18n, BaseProps, isRenderable, mergeProps, themeProps
+ * @output Exports DrawerHeader component and DrawerHeaderProps
+ * @position Drawer header; composed in a Layout header slot inside Drawer, tested by DrawerHeader.test.tsx
+ *
+ * Mirrors DialogHeader's API: a title, an optional subtitle, start/end content
+ * slots, and a close button that renders only when `onOpenChange` is passed.
+ * Two differences follow from Drawer's contract:
+ * - It does not move focus on mount. Drawer owns focus entry through
+ *   `data-autofocus` once its native host is presented.
+ * - It does not name the drawer. Drawer's required `label` does.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Drawer/DrawerHeader.doc.mjs (props, anatomy, theming)
+ * - /packages/core/src/Drawer/DrawerHeader.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/Drawer/index.ts (exports if types change)
+ * - /packages/cli/assets/templates/blocks/components/Drawer/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/DrawerHeader/ (showcase blocks)
+ * - /apps/storybook/stories/Drawer.stories.tsx (examples and visual coverage)
+ * - /apps/storybook/stories/DrawerHeader.stories.tsx (component audit fixture)
+ */
+import type { ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+export interface DrawerHeaderProps extends BaseProps<HTMLDivElement> {
+    /** Ref forwarded to the root element */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * The title of the drawer, rendered as an h2. Keep it inline and
+     * non-interactive. It does not name the drawer; Drawer's `label` does.
+     */
+    title: ReactNode;
+    /**
+     * Optional subtitle displayed below the title in smaller, secondary text.
+     * Accepts inline content such as a Link; it renders inside a span, so
+     * avoid block elements. Nothing renders for `null`, `undefined`, booleans,
+     * or an empty string.
+     */
+    subtitle?: ReactNode;
+    /**
+     * Called with `false` when the close button is clicked. Pass the Drawer's
+     * own `onOpenChange`. If not provided, no close button is rendered.
+     */
+    onOpenChange?: (isOpen: boolean) => unknown;
+    /**
+     * Content to render before the title (e.g., a back button).
+     */
+    startContent?: ReactNode;
+    /**
+     * Content to render after the title, before the close button (e.g., action
+     * buttons).
+     */
+    endContent?: ReactNode;
+    /**
+     * Overrides automatic end-slot compensation. When omitted, rendering the
+     * close action applies block and logical inline-end compensation. Use
+     * `inline`, `block`, or `all` to select the axes explicitly.
+     */
+    endContentEdgeCompensation?: 'inline' | 'block' | 'all';
+    /**
+     * Adds a themed border at the bottom edge.
+     * When false, spacing collapse is applied automatically for seamless visual flow.
+     * Defaults to the parent Layout's `defaultHasDividers` context value.
+     */
+    hasDivider?: boolean;
+}
+/**
+ * Header for a Drawer: a title, optional subtitle and start/end content, and a
+ * close button when `onOpenChange` is passed. Same API as DialogHeader.
+ *
+ * Uses LayoutHeader internally for consistent styling with other layout headers.
+ *
+ * @example
+ * ```
+ * <Drawer isOpen={isOpen} onOpenChange={setIsOpen} label="Details">
+ *   <DrawerHeader title="Details" onOpenChange={setIsOpen} />
+ *   <Section padding={4}>Content</Section>
+ * </Drawer>
+ * ```
+ */
+export declare function DrawerHeader({ title, subtitle, onOpenChange, startContent, endContent, endContentEdgeCompensation, hasDivider, xstyle, className, style, ref, ...rest }: DrawerHeaderProps): import("react").JSX.Element;
+export declare namespace DrawerHeader {
+    var displayName: string;
+}
+//# sourceMappingURL=DrawerHeader.d.ts.map

package/dist/Drawer/DrawerHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerHeader.d.ts","sourceRoot":"","sources":["../../src/Drawer/DrawerHeader.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0C5C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAClE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAEhC;;;OAGG;IACH,KAAK,EAAE,SAAS,CAAC;IAEjB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,OAAO,CAAC;IAE5C;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IAEzB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB;;;;OAIG;IACH,0BAA0B,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,KAAK,CAAC;IAExD;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,0BAA0B,EAC1B,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,iBAAiB,+BAoFnB;yBAjGe,YAAY"}

package/dist/Drawer/DrawerHeader.js

@@ -0,0 +1,134 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file DrawerHeader.tsx
+ * @input Uses React, StyleX, LayoutHeader, Button, Icon, Heading, Text, i18n, BaseProps, isRenderable, mergeProps, themeProps
+ * @output Exports DrawerHeader component and DrawerHeaderProps
+ * @position Drawer header; composed in a Layout header slot inside Drawer, tested by DrawerHeader.test.tsx
+ *
+ * Mirrors DialogHeader's API: a title, an optional subtitle, start/end content
+ * slots, and a close button that renders only when `onOpenChange` is passed.
+ * Two differences follow from Drawer's contract:
+ * - It does not move focus on mount. Drawer owns focus entry through
+ *   `data-autofocus` once its native host is presented.
+ * - It does not name the drawer. Drawer's required `label` does.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Drawer/DrawerHeader.doc.mjs (props, anatomy, theming)
+ * - /packages/core/src/Drawer/DrawerHeader.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/Drawer/index.ts (exports if types change)
+ * - /packages/cli/assets/templates/blocks/components/Drawer/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/DrawerHeader/ (showcase blocks)
+ * - /apps/storybook/stories/Drawer.stories.tsx (examples and visual coverage)
+ * - /apps/storybook/stories/DrawerHeader.stories.tsx (component audit fixture)
+ */
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { sizeVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { Button } from "../Button/index.js";
+import { Heading } from "../Heading/index.js";
+import { Icon } from "../Icon/index.js";
+import { LayoutHeader } from "../Layout/index.js";
+import { Text } from "../Text/index.js";
+import { useTranslator } from "../i18n/index.js";
+import { isRenderable, mergeProps, themeProps } from "../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Header for a Drawer: a title, optional subtitle and start/end content, and a
+ * close button when `onOpenChange` is passed. Same API as DialogHeader.
+ *
+ * Uses LayoutHeader internally for consistent styling with other layout headers.
+ *
+ * @example
+ * ```
+ * <Drawer isOpen={isOpen} onOpenChange={setIsOpen} label="Details">
+ *   <DrawerHeader title="Details" onOpenChange={setIsOpen} />
+ *   <Section padding={4}>Content</Section>
+ * </Drawer>
+ * ```
+ */
+export function DrawerHeader({
+  title,
+  subtitle,
+  onOpenChange,
+  startContent,
+  endContent,
+  endContentEdgeCompensation,
+  hasDivider,
+  xstyle,
+  className,
+  style,
+  ref,
+  ...rest
+}) {
+  const t = useTranslator();
+  const hasSubtitle = isRenderable(subtitle);
+  const hasStartContent = isRenderable(startContent);
+  const hasEndContent = isRenderable(endContent);
+  const shouldCompensateEndBlock = endContentEdgeCompensation == null ? onOpenChange != null : endContentEdgeCompensation === 'block' || endContentEdgeCompensation === 'all';
+  const shouldCompensateEndInline = endContentEdgeCompensation == null ? onOpenChange != null : endContentEdgeCompensation === 'inline' || endContentEdgeCompensation === 'all';
+  return /*#__PURE__*/_jsx(LayoutHeader, {
+    ref: ref,
+    hasDivider: hasDivider,
+    xstyle: xstyle,
+    className: className,
+    style: style,
+    ...rest,
+    children: /*#__PURE__*/_jsxs("div", {
+      ...mergeProps(themeProps('drawer-header'), {
+        className: "x78zum5 x1cy8zhl x1qughib xjcht0a"
+      }),
+      children: [hasStartContent && /*#__PURE__*/_jsx("div", {
+        ...mergeProps(themeProps('drawer-header-start-content'), {
+          className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
+        }),
+        children: startContent
+      }), /*#__PURE__*/_jsxs("div", {
+        ...mergeProps(themeProps('drawer-header-title-block'), {
+          className: "x78zum5 xdt5ytf xsn7fz1 x98rzlu xeuugli xqixskq"
+        }),
+        children: [/*#__PURE__*/_jsx(Heading, {
+          level: 2,
+          children: title
+        }), hasSubtitle && /*#__PURE__*/_jsx(Text, {
+          type: "body",
+          size: "sm",
+          color: "secondary",
+          children: subtitle
+        })]
+      }), (hasEndContent || onOpenChange != null) && /*#__PURE__*/_jsxs("div", {
+        ...mergeProps(themeProps('drawer-header-end-content'), {
+          0: {
+            className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
+          },
+          2: {
+            className: "x78zum5 x6s0dn4 x1txdalj x2lah0s xhzvc8f"
+          },
+          1: {
+            className: "x78zum5 x6s0dn4 x1txdalj x2lah0s x3kzqx6"
+          },
+          3: {
+            className: "x78zum5 x6s0dn4 x1txdalj x2lah0s xhzvc8f x3kzqx6"
+          }
+        }[!!shouldCompensateEndBlock << 1 | !!shouldCompensateEndInline << 0]),
+        children: [endContent, onOpenChange && /*#__PURE__*/_jsx(Button, {
+          variant: "ghost",
+          label: t('@astryx.dialog.close'),
+          tooltip: t('@astryx.dialog.close'),
+          icon: /*#__PURE__*/_jsx(Icon, {
+            icon: "close",
+            color: "inherit",
+            ...themeProps('drawer-header-close-icon')
+          }),
+          onClick: () => {
+            onOpenChange(false);
+          },
+          isIconOnly: true
+        })]
+      })]
+    })
+  });
+}
+DrawerHeader.displayName = 'DrawerHeader';

package/dist/Drawer/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @file index.ts
+ * @input Drawer.tsx, DrawerHeader.tsx
+ * @output Re-exports Drawer and DrawerHeader components and their prop types
+ * @position Core entry point for the Drawer directory (`@astryxdesign/core/Drawer`)
+ */
+export { Drawer } from './Drawer';
+export type { DrawerProps } from './Drawer';
+export { DrawerHeader } from './DrawerHeader';
+export type { DrawerHeaderProps } from './DrawerHeader';
+//# sourceMappingURL=index.d.ts.map

package/dist/Drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Drawer/index.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,YAAY,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC"}

package/dist/Drawer/index.js

@@ -0,0 +1,11 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file index.ts
+ * @input Drawer.tsx, DrawerHeader.tsx
+ * @output Re-exports Drawer and DrawerHeader components and their prop types
+ * @position Core entry point for the Drawer directory (`@astryxdesign/core/Drawer`)
+ */
+
+export { Drawer } from "./Drawer.js";
+export { DrawerHeader } from "./DrawerHeader.js";

package/dist/Drawer/useDrawerDialogPresence.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @file useDrawerDialogPresence.ts
+ * @input Controlled open state, modal mode, dialog ref, and rendered-state setter
+ * @output Coordinates native top-layer presence, exit timing, focus restoration, and unmount cleanup
+ * @position Drawer-internal hook; consumed only by Drawer.tsx
+ *
+ * The drawer has two independent notions of presence:
+ * - React's rendered state keeps the panel visible for its CSS exit.
+ * - Native `showModal()` or `showPopover()` state keeps it in the browser top
+ *   layer.
+ *
+ * Their close ordering is a browser-visible invariant: the panel must finish
+ * its exit, then leave the active native host and hide in the same task. If the
+ * hide lands a frame later, a transformed ancestor becomes the containing block
+ * for the now-non-top-layer `position: fixed` panel and it paints back inside
+ * the page for one frame.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Drawer/Drawer.test.tsx
+ * - /.github/scripts/modal-close-visibility.js
+ */
+import { type Dispatch, type RefObject, type SetStateAction } from 'react';
+type UseDrawerDialogPresenceOptions = {
+    dialogRef: RefObject<HTMLDialogElement | null>;
+    isOpen: boolean;
+    isModal: boolean;
+    setIsRendered: Dispatch<SetStateAction<boolean>>;
+};
+/**
+ * Coordinates the native dialog and React-rendered presence for Drawer.
+ *
+ * Opening captures the trigger, enters the modal-dialog or manual-popover host,
+ * and honours the component's `data-autofocus` contract. Closing waits for the
+ * actual transform transition (with a computed-duration backstop), then leaves
+ * the native host and synchronously hides the panel before the browser can paint
+ * it outside the top layer, restores focus to the captured trigger, and only
+ * then dispatches the popover host's synthetic `close`. Unmount cleanup closes
+ * a host left open by React Activity or a removed subtree.
+ */
+export declare function useDrawerDialogPresence({ dialogRef, isOpen, isModal, setIsRendered, }: UseDrawerDialogPresenceOptions): void;
+export {};
+//# sourceMappingURL=useDrawerDialogPresence.d.ts.map

package/dist/Drawer/useDrawerDialogPresence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawerDialogPresence.d.ts","sourceRoot":"","sources":["../../src/Drawer/useDrawerDialogPresence.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAaf,KAAK,8BAA8B,GAAG;IACpC,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAClD,CAAC;AAuDF;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE,8BAA8B,GAAG,IAAI,CAoEvC"}

package/dist/Drawer/useDrawerDialogPresence.js

@@ -0,0 +1,236 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useDrawerDialogPresence.ts
+ * @input Controlled open state, modal mode, dialog ref, and rendered-state setter
+ * @output Coordinates native top-layer presence, exit timing, focus restoration, and unmount cleanup
+ * @position Drawer-internal hook; consumed only by Drawer.tsx
+ *
+ * The drawer has two independent notions of presence:
+ * - React's rendered state keeps the panel visible for its CSS exit.
+ * - Native `showModal()` or `showPopover()` state keeps it in the browser top
+ *   layer.
+ *
+ * Their close ordering is a browser-visible invariant: the panel must finish
+ * its exit, then leave the active native host and hide in the same task. If the
+ * hide lands a frame later, a transformed ancestor becomes the containing block
+ * for the now-non-top-layer `position: fixed` panel and it paints back inside
+ * the page for one frame.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Drawer/Drawer.test.tsx
+ * - /.github/scripts/modal-close-visibility.js
+ */
+import { useEffect, useRef } from 'react';
+import { flushSync } from 'react-dom';
+
+/** Slack past the computed transition before the backstop gives up waiting. */
+const EXIT_BACKSTOP_BUFFER_MS = 50;
+
+/**
+ * Hold used when the transition duration cannot be read — an unresolved
+ * `var()` outside a real browser. Picking a fixed number would otherwise make
+ * an assumption about the consumer's theme.
+ */
+const EXIT_FALLBACK_MS = 250;
+function isPopoverOpen(dialog) {
+  try {
+    return dialog.matches(':popover-open');
+  } catch {
+    // jsdom and pre-Popover browsers do not recognize :popover-open.
+    return false;
+  }
+}
+function isDrawerHostOpen(dialog, isModal) {
+  return isModal ? dialog.open : isPopoverOpen(dialog) || dialog.open;
+}
+function showDrawerHost(dialog, isModal) {
+  if (isModal) {
+    dialog.showModal();
+  } else if (typeof dialog.showPopover === 'function') {
+    dialog.showPopover();
+  } else {
+    // Reduced fallback for browsers below the Popover API support floor.
+    dialog.show();
+  }
+}
+function dispatchDialogClose(dialog) {
+  const EventConstructor = dialog.ownerDocument.defaultView?.Event ?? Event;
+  dialog.dispatchEvent(new EventConstructor('close'));
+}
+
+/**
+ * Leaves the active native host. Returns whether the caller owes a synthetic
+ * `close` dispatch: `dialog.close()` used to power the non-modal path, and
+ * consumers observe its native `close` event through refs/onClose. Popover
+ * dismissal has no equivalent event, so that public DOM contract is preserved
+ * explicitly — but by the caller, not here. Native `close` is queued as a
+ * task, so a consumer's listener always ran after this hook's own focus
+ * restore; the synthetic event must keep that ordering (and fire exactly once
+ * per exit, including the unmount path).
+ */
+function hideDrawerHost(dialog, isModal) {
+  if (!isModal && typeof dialog.hidePopover === 'function') {
+    dialog.hidePopover();
+    return true;
+  }
+  if (dialog.open) {
+    dialog.close();
+  }
+  return false;
+}
+
+/**
+ * Coordinates the native dialog and React-rendered presence for Drawer.
+ *
+ * Opening captures the trigger, enters the modal-dialog or manual-popover host,
+ * and honours the component's `data-autofocus` contract. Closing waits for the
+ * actual transform transition (with a computed-duration backstop), then leaves
+ * the native host and synchronously hides the panel before the browser can paint
+ * it outside the top layer, restores focus to the captured trigger, and only
+ * then dispatches the popover host's synthetic `close`. Unmount cleanup closes
+ * a host left open by React Activity or a removed subtree.
+ */
+export function useDrawerDialogPresence({
+  dialogRef,
+  isOpen,
+  isModal,
+  setIsRendered
+}) {
+  // Element focused when the drawer opened — restored on close.
+  const triggerElementRef = useRef(null);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) {
+      return;
+    }
+    if (isOpen) {
+      if (!isDrawerHostOpen(dialog, isModal)) {
+        triggerElementRef.current = document.activeElement;
+        showDrawerHost(dialog, isModal);
+        // React's autoFocus calls .focus() during commit, before the native host
+        // is visible, so it silently fails — honour data-autofocus instead (same
+        // contract as Dialog).
+        dialog.querySelector('[data-autofocus]')?.focus();
+      }
+      return;
+    }
+    if (!isDrawerHostOpen(dialog, isModal)) {
+      return;
+    }
+    return waitForDrawerExit(dialog, () => {
+      const owesCloseEvent = hideDrawerHost(dialog, isModal);
+      // flushSync, not a plain setState: React's default scheduling can land
+      // the commit after the next paint, and that one frame is exactly the
+      // bug — the panel paints outside the top layer. Both happen in this
+      // task, so the browser never gets to paint between them.
+      // eslint-disable-next-line @eslint-react/dom-no-flush-sync -- the panel must stop painting in the task the native host closes
+      flushSync(() => {
+        setIsRendered(false);
+      });
+      // Return focus after leaving the native host: a modal dialog makes the
+      // rest of the document inert, so focusing earlier silently fails.
+      triggerElementRef.current?.focus();
+      triggerElementRef.current = null;
+      // The synthetic popover close fires after the focus restore above,
+      // mirroring the task-queued native event: a consumer close listener
+      // that retargets focus (master-detail row switching) gets the last word.
+      if (owesCloseEvent) {
+        dispatchDialogClose(dialog);
+      }
+    });
+  }, [dialogRef, isModal, isOpen, setIsRendered]);
+
+  // Leave the active native host on unmount. When the drawer is mounted inside
+  // an <Activity> that flips to mode="hidden", React runs effect cleanups (with
+  // stale isOpen) instead of re-running the effect with isOpen=false. Leaving
+  // the host active would strand the top-layer surface and skip the next open.
+  // This is deliberately separate from the open/close effect: putting it in
+  // that cleanup would cut off every delayed slide-out.
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    return () => {
+      if (dialog && isDrawerHostOpen(dialog, isModal)) {
+        if (hideDrawerHost(dialog, isModal)) {
+          // No focus restore on this path — the drawer is being torn down, so
+          // the owed synthetic close fires immediately (still exactly once).
+          dispatchDialogClose(dialog);
+        }
+      }
+    };
+  }, [dialogRef, isModal]);
+}
+
+/**
+ * Wait for the panel's transform transition, with a computed-duration
+ * backstop. Mirrors BottomSheetPanel.waitForTransition: the native event is
+ * authoritative, and the timeout only prevents a lost event from stranding an
+ * open dialog.
+ */
+function waitForDrawerExit(element, complete) {
+  let done = false;
+  let timer = null;
+  const finish = () => {
+    if (done) {
+      return;
+    }
+    done = true;
+    if (timer != null) {
+      clearTimeout(timer);
+    }
+    element.removeEventListener('transitionend', handleTransitionEnd);
+    element.removeEventListener('transitioncancel', handleTransitionEnd);
+    complete();
+  };
+  const handleTransitionEnd = event => {
+    if (event.target === element && event.propertyName === 'transform') {
+      finish();
+    }
+  };
+  element.addEventListener('transitionend', handleTransitionEnd);
+  element.addEventListener('transitioncancel', handleTransitionEnd);
+  const transitionMs = readTransformTransitionMs(element);
+  timer = setTimeout(finish, (transitionMs ?? EXIT_FALLBACK_MS) + EXIT_BACKSTOP_BUFFER_MS);
+  return () => {
+    done = true;
+    if (timer != null) {
+      clearTimeout(timer);
+    }
+    element.removeEventListener('transitionend', handleTransitionEnd);
+    element.removeEventListener('transitioncancel', handleTransitionEnd);
+  };
+}
+
+/** Read the transform transition's duration + delay from computed CSS. */
+function readTransformTransitionMs(element) {
+  const computed = window.getComputedStyle(element);
+  const properties = computed.transitionProperty.split(',').map(value => value.trim());
+  const durations = parseTimes(computed.transitionDuration);
+  const delays = parseTimes(computed.transitionDelay);
+  if (properties.length === 0 || durations.length === 0 || delays.length === 0 || durations.includes(null) || delays.includes(null)) {
+    return null;
+  }
+  return properties.reduce((longest, property, index) => {
+    if (property !== 'transform' && property !== 'all') {
+      return longest;
+    }
+    const duration = durations[index % durations.length];
+    const delay = delays[index % delays.length];
+    return Math.max(longest, (duration ?? 0) + (delay ?? 0));
+  }, 0);
+}
+function parseTimes(value) {
+  return value.split(',').map(part => {
+    const trimmed = part.trim();
+    const time = Number.parseFloat(trimmed);
+    if (!Number.isFinite(time)) {
+      return null;
+    }
+    if (trimmed.endsWith('ms')) {
+      return time;
+    }
+    return trimmed.endsWith('s') ? time * 1000 : null;
+  });
+}

package/dist/DropdownMenu/DropdownMenu.js

@@ -172,7 +172,7 @@ const styles = {
     kI3sdo: "x1a2a7pz",
     k7VYTy: "xpdipgo",
     kfSwDN: "x87ps6o",
-    ks0D6T: "x1p5vr2b",
+    ks0D6T: "xc0b1yq",
     kskxy: "x1uh1i8a",
     "--_dropdown-menu-radius": "x1fcsqxe",
     "--_dropdown-menu-padding": "xgory14",

package/dist/DropdownMenu/DropdownMenuDivider.d.ts

@@ -1,5 +1,5 @@
 import type { BaseProps } from '../BaseProps';
-export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
+export interface DropdownMenuDividerProps extends Omit<BaseProps<HTMLDivElement>, 'role' | 'aria-orientation'> {
     /** Ref forwarded to the separator element. */
     ref?: React.Ref<HTMLDivElement>;
 }
@@ -7,7 +7,9 @@ export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'cl
  * A horizontal rule separating groups of menu rows.
  *
  * Renders `role="separator"`, so it is never a stop in the menu's arrow-key
- * order. Equivalent to `{type: 'divider'}` in the `items` data API.
+ * order. Equivalent to `{type: 'divider'}` in the `items` data API. Host
+ * attributes (`id`, `data-*`, `aria-*`) and DOM handlers reach the separator;
+ * its role and orientation stay component-owned.
  *
  * @example
  * ```
@@ -18,7 +20,7 @@ export interface DropdownMenuDividerProps extends Pick<BaseProps, 'xstyle' | 'cl
  * </DropdownMenu>
  * ```
  */
-export declare function DropdownMenuDivider({ xstyle, className, style, ref, }: DropdownMenuDividerProps): import("react").JSX.Element;
+export declare function DropdownMenuDivider({ xstyle, className, style, ref, ...rest }: DropdownMenuDividerProps): import("react").JSX.Element;
 export declare namespace DropdownMenuDivider {
     var displayName: string;
 }

package/dist/DropdownMenu/DropdownMenuDivider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuDivider.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuDivider.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,wBAAwB,+BAW1B;yBAhBe,mBAAmB"}
+{"version":3,"file":"DropdownMenuDivider.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuDivider.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,cAAc,CAAC,EACzB,MAAM,GAAG,kBAAkB,CAC5B;IACC,8CAA8C;IAC9C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,wBAAwB,+BAY1B;yBAlBe,mBAAmB"}

package/dist/DropdownMenu/DropdownMenuDivider.js

@@ -4,7 +4,7 @@
 
 /**
  * @file DropdownMenuDivider.tsx
- * @input Uses Divider, spacing tokens, themeProps
+ * @input Uses Divider, spacing tokens, themeProps; forwards host props to Divider
  * @output Exports DropdownMenuDivider component and DropdownMenuDividerProps
  * @position Sub-component; used inside DropdownMenu
  *
@@ -39,7 +39,9 @@ const THEME_CLASS_NAME = themeProps('dropdown-menu-divider').className;
  * A horizontal rule separating groups of menu rows.
  *
  * Renders `role="separator"`, so it is never a stop in the menu's arrow-key
- * order. Equivalent to `{type: 'divider'}` in the `items` data API.
+ * order. Equivalent to `{type: 'divider'}` in the `items` data API. Host
+ * attributes (`id`, `data-*`, `aria-*`) and DOM handlers reach the separator;
+ * its role and orientation stay component-owned.
  *
  * @example
  * ```
@@ -54,9 +56,11 @@ export function DropdownMenuDivider({
   xstyle,
   className,
   style,
-  ref
+  ref,
+  ...rest
 }) {
   return /*#__PURE__*/_jsx(Divider, {
+    ...rest,
     ref: ref,
     xstyle: [styles.divider, xstyle],
     className: className ? `${THEME_CLASS_NAME} ${className}` : THEME_CLASS_NAME,

package/dist/DropdownMenu/DropdownMenuSubMenu.js

@@ -659,16 +659,16 @@ export function DropdownMenuSubMenu(props) {
       ...menuPress.menuProps,
       ...mergeProps(themeProps('dropdown-menu'), {
         0: {
-          className: "x9f619 x78zum5 xdt5ytf x1lsbc85 x1p5vr2b x1uh1i8a x1fcsqxe xgory14 x9epnlk x1n97fys x1prclbq x1i5ehqx x1hc1fzr x19991ni xuedmi6 xlr8y92 xpdipgo x87ps6o x1j4r261"
+          className: "x9f619 x78zum5 xdt5ytf x1lsbc85 xc0b1yq x1uh1i8a x1fcsqxe xgory14 x9epnlk x1n97fys x1prclbq x1i5ehqx x1hc1fzr x19991ni xuedmi6 xlr8y92 xpdipgo x87ps6o x1j4r261"
         },
         2: {
-          className: "x9f619 x78zum5 xdt5ytf x1lsbc85 x1p5vr2b x1uh1i8a x1fcsqxe xgory14 x9epnlk x1n97fys x1prclbq x1i5ehqx x1hc1fzr x19991ni xuedmi6 xlr8y92 xpdipgo x87ps6o xge0x1e xish69e"
+          className: "x9f619 x78zum5 xdt5ytf x1lsbc85 xc0b1yq x1uh1i8a x1fcsqxe xgory14 x9epnlk x1n97fys x1prclbq x1i5ehqx x1hc1fzr x19991ni xuedmi6 xlr8y92 xpdipgo x87ps6o xge0x1e xish69e"
         },
         1: {
-          className: "x9f619 x78zum5 xdt5ytf x1lsbc85 x1p5vr2b x1uh1i8a x1fcsqxe xgory14 x9epnlk x1n97fys x1prclbq x1i5ehqx x1hc1fzr x19991ni xuedmi6 xlr8y92 xpdipgo x87ps6o x1j4r261 x1odjw0f x6ikm8r xish69e"
+          className: "x9f619 x78zum5 xdt5ytf x1lsbc85 xc0b1yq x1uh1i8a x1fcsqxe xgory14 x9epnlk x1n97fys x1prclbq x1i5ehqx x1hc1fzr x19991ni xuedmi6 xlr8y92 xpdipgo x87ps6o x1j4r261 x1odjw0f x6ikm8r xish69e"
         },
         3: {
-          className: "x9f619 x78zum5 xdt5ytf x1lsbc85 x1p5vr2b x1uh1i8a x1fcsqxe xgory14 x9epnlk x1n97fys x1prclbq x1i5ehqx x1hc1fzr x19991ni xuedmi6 xlr8y92 xpdipgo x87ps6o xge0x1e x1odjw0f x6ikm8r xish69e"
+          className: "x9f619 x78zum5 xdt5ytf x1lsbc85 xc0b1yq x1uh1i8a x1fcsqxe xgory14 x9epnlk x1n97fys x1prclbq x1i5ehqx x1hc1fzr x19991ni xuedmi6 xlr8y92 xpdipgo x87ps6o xge0x1e x1odjw0f x6ikm8r xish69e"
         }
       }[!!hasOverflow << 1 | !!hasOverflow << 0]),
       children: nestedContent

package/dist/HoverCard/useHoverCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AA6BlC;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;;OAOG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CAic5E"}
+{"version":3,"file":"useHoverCard.d.ts","sourceRoot":"","sources":["../../src/HoverCard/useHoverCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;GAQG;AAEH,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,KAAK,kBAAkB,EACvB,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,0BAA0B,CAAC;AA6BlC;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEhE;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,GAAG,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAE9B;;;OAGG;IACH,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC;;;;OAIG;IACH,cAAc,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEzC;;;OAGG;IACH,QAAQ,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;;;OAOG;IACH,eAAe,EAAE,CACf,QAAQ,EAAE,SAAS,EACnB,KAAK,CAAC,EAAE,IAAI,CAAC,kBAAkB,EAAE,aAAa,CAAC,KAC5C,SAAS,CAAC;IAEf;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB;;OAEG;IACH,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CAyc5E"}