@astryxdesign/core 0.4.7 → 0.5.0-canary.055e75f

package/src/Kbd/Kbd.tsx

@@ -16,6 +16,7 @@
 import React, {useSyncExternalStore} from 'react';
 import * as stylex from '@stylexjs/stylex';
 import {mergeProps} from '../utils';
+import {isApplePlatform} from '../utils/isApplePlatform';
 import type {BaseProps} from '../BaseProps';
 import {themeProps} from '../utils/themeProps';
 import {
@@ -122,24 +123,6 @@ function getServerPlatformSnapshot(): boolean {
   return false;
 }
 
-/**
- * Detects whether the current platform is macOS/iOS.
- * Prefers the User-Agent Client Hints API when available (modern Chrome/Edge),
- * falls back to navigator.platform (deprecated but universally supported).
- */
-function detectMac(): boolean {
-  if (typeof navigator === 'undefined') {
-    return false;
-  }
-  // Prefer User-Agent Client Hints API (not deprecated)
-  const uaData = 'userAgentData' in navigator ? navigator.userAgentData : null;
-  if (uaData && typeof uaData === 'object' && 'platform' in uaData) {
-    return /mac/i.test((uaData as {platform: string}).platform ?? '');
-  }
-  // Fallback: navigator.platform (deprecated but still shipped everywhere)
-  return /Mac|iPhone|iPad|iPod/.test(navigator.platform ?? '');
-}
-
 export interface KbdProps extends BaseProps<HTMLSpanElement> {
   ref?: React.Ref<HTMLSpanElement>;
   /**
@@ -176,7 +159,7 @@ export interface KbdProps extends BaseProps<HTMLSpanElement> {
 export function Kbd({keys, ref, xstyle, className, style, ...rest}: KbdProps) {
   const isMac = useSyncExternalStore(
     subscribeToPlatformChanges,
-    detectMac,
+    isApplePlatform,
     getServerPlatformSnapshot,
   );
 

package/src/Layer/LayerDepthContext.tsx

@@ -0,0 +1,62 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file LayerDepthContext.tsx
+ * @input React context
+ * @output Exports LayerDepthContext, useLayerDepth, LayerDepthProvider
+ * @position Layer system; how the dismissal stack learns which layer is nested
+ *   inside which.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Layer/index.ts
+ * - /packages/core/src/Layer/useLayerDismissal.ts
+ *
+ * Nesting is read from the React tree rather than the DOM. Two reasons:
+ *
+ * - **Portals.** A nested overlay routinely renders into `document.body` or the
+ *   native top layer, so DOM containment reports it as a sibling of the layer
+ *   it is logically inside. React context flows through `createPortal`, so the
+ *   tree keeps the relationship the DOM loses.
+ * - **Same-commit mounts.** Depth is fixed during render. Effect order is not
+ *   available then and is misleading anyway: React runs child effects before
+ *   parent effects, so an inner layer registers first and looks "older" than
+ *   the outer layer that contains it.
+ *
+ * There is nothing to mount at the app root: the context defaults to 0, and
+ * each layer provides depth for its OWN content, so nesting composes on its own.
+ */
+
+import {createContext, use, type ReactNode} from 'react';
+
+/**
+ * How many layers deep the current subtree is. 0 at the app root; each layer
+ * increments it for its own content.
+ */
+export const LayerDepthContext = createContext(0);
+LayerDepthContext.displayName = 'LayerDepthContext';
+
+/**
+ * Read the current nesting depth. A layer calls this to learn its OWN depth —
+ * the depth of the subtree it is rendered into, before it pushes its content
+ * one level deeper.
+ */
+export function useLayerDepth(): number {
+  return use(LayerDepthContext);
+}
+
+/**
+ * Wrap a layer's content so any layer opened from inside it registers as
+ * nested. Takes no depth prop on purpose: it reads the ambient depth and adds
+ * one, so nesting composes without anyone tracking absolute numbers.
+ *
+ * Renders no DOM element — it is a context boundary only, which is why it takes
+ * no `xstyle`/`ref` and exposes no props interface.
+ */
+export function LayerDepthProvider({children}: {children: ReactNode}) {
+  const depth = use(LayerDepthContext);
+  return <LayerDepthContext value={depth + 1}>{children}</LayerDepthContext>;
+}
+
+LayerDepthProvider.displayName = 'LayerDepthProvider';

package/src/Layer/index.ts

@@ -29,6 +29,15 @@ export type {
   FixedLayerReturn,
 } from './useLayer';
 
+// Layer dismissal stack — one Escape owner for every overlay family
+export {useLayerDismissal} from './useLayerDismissal';
+export type {
+  LayerEscapeBehavior,
+  UseLayerDismissalOptions,
+  UseLayerDismissalReturn,
+} from './useLayerDismissal';
+export {LayerDepthProvider} from './LayerDepthContext';
+
 // Shared touch behavior for the hover layers
 export {useTouchTrigger, isActionTrigger} from './useTouchTrigger';
 export type {

package/src/Layer/layerDismissalFamilies.test.tsx

@@ -0,0 +1,359 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file layerDismissalFamilies.test.tsx
+ * @input Uses vitest, @testing-library/react, Dialog, Lightbox, MobileNav,
+ *   HoverCard, Tooltip
+ * @output Tests that every overlay family shares the one dismissal stack
+ * @position Colocated with layerStack; the families' own behavior is tested in
+ *   their own files, this one only asks who takes the press
+ *
+ * The stack routes an Escape press to the top-most REGISTERED layer and
+ * preventDefault()s it, so a family that is not on the stack cannot be reached
+ * once anything else is. Lightbox and MobileNav were that gap: both closed via
+ * the native `cancel` event alone, and a `required` Dialog underneath swallowed
+ * every press before it got there.
+ *
+ * SYNC: When a new overlay family joins the stack, add it here.
+ */
+
+import {
+  describe,
+  it,
+  expect,
+  vi,
+  beforeAll,
+  beforeEach,
+  afterAll,
+  afterEach,
+} from 'vitest';
+import {render, screen} from '@testing-library/react';
+
+import {Dialog} from '../Dialog/Dialog';
+import {HoverCard} from '../HoverCard/HoverCard';
+import {Lightbox} from '../Lightbox/Lightbox';
+import {MobileNav} from '../MobileNav/MobileNav';
+import {Tooltip} from '../Tooltip/Tooltip';
+import {resetLayerStackForTests} from './layerStack';
+
+const originalMatches = HTMLElement.prototype.matches;
+const popoverOpenState = new WeakMap<HTMLElement, boolean>();
+
+// jsdom implements no Popover API, and the hover layers answer `isPresent`
+// from `:popover-open`.
+beforeAll(() => {
+  HTMLElement.prototype.showPopover = vi.fn(function (this: HTMLElement) {
+    popoverOpenState.set(this, true);
+  });
+  HTMLElement.prototype.hidePopover = vi.fn(function (this: HTMLElement) {
+    popoverOpenState.set(this, false);
+  });
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (HTMLElement.prototype as any).matches = function (
+    selector: string,
+  ): boolean {
+    if (selector === ':popover-open') {
+      return popoverOpenState.get(this) ?? false;
+    }
+    return originalMatches.call(this, selector);
+  };
+});
+
+afterAll(() => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (HTMLElement.prototype as any).matches = originalMatches;
+});
+
+// jsdom does not implement showModal/close.
+beforeEach(() => {
+  vi.mocked(HTMLElement.prototype.showPopover).mockClear();
+  vi.mocked(HTMLElement.prototype.hidePopover).mockClear();
+  HTMLDialogElement.prototype.showModal = vi.fn(function (
+    this: HTMLDialogElement,
+  ) {
+    this.setAttribute('open', '');
+  });
+  HTMLDialogElement.prototype.close = vi.fn(function (this: HTMLDialogElement) {
+    this.removeAttribute('open');
+  });
+});
+
+afterEach(() => {
+  resetLayerStackForTests();
+});
+
+function pressEscape(): KeyboardEvent {
+  const event = new KeyboardEvent('keydown', {
+    key: 'Escape',
+    bubbles: true,
+    cancelable: true,
+  });
+  document.dispatchEvent(event);
+  return event;
+}
+
+function fireCancel(dialog: Element): Event {
+  const event = new Event('cancel', {bubbles: false, cancelable: true});
+  dialog.dispatchEvent(event);
+  return event;
+}
+
+const getDialog = (label: string) =>
+  screen
+    .getAllByRole('dialog', {hidden: true})
+    .find(d => d.getAttribute('aria-label') === label)!;
+
+const MEDIA = {src: '/photo.jpg', alt: 'A photo'};
+
+describe('overlay families on the shared dismissal stack', () => {
+  describe('Lightbox', () => {
+    it('takes the Escape when it is open over a required Dialog', () => {
+      const onLightboxChange = vi.fn();
+      const onDialogChange = vi.fn();
+
+      render(
+        <Dialog
+          isOpen={true}
+          onOpenChange={onDialogChange}
+          purpose="required"
+          aria-label="Required">
+          Choose one
+          <Lightbox
+            isOpen={true}
+            onOpenChange={onLightboxChange}
+            media={MEDIA}
+          />
+        </Dialog>,
+      );
+
+      const event = pressEscape();
+
+      expect(onLightboxChange).toHaveBeenCalledWith(false);
+      expect(onDialogChange).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it('closes on a browser-initiated cancel when it is top-most', () => {
+      const onOpenChange = vi.fn();
+      render(
+        <Lightbox isOpen={true} onOpenChange={onOpenChange} media={MEDIA} />,
+      );
+
+      const event = fireCancel(screen.getByRole('dialog', {hidden: true}));
+
+      expect(event.defaultPrevented).toBe(true);
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it('stays open on a browser-initiated cancel when it is not top-most', () => {
+      const onLightboxChange = vi.fn();
+
+      render(
+        <>
+          <Lightbox
+            isOpen={true}
+            onOpenChange={onLightboxChange}
+            media={MEDIA}
+          />
+          <Dialog isOpen={true} onOpenChange={() => {}} aria-label="Above">
+            Above
+          </Dialog>
+        </>,
+      );
+
+      const event = fireCancel(getDialog('A photo'));
+
+      expect(event.defaultPrevented).toBe(true);
+      expect(onLightboxChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('MobileNav', () => {
+    it('takes the Escape when it opens over a required Dialog', () => {
+      const onNavChange = vi.fn();
+      const onDialogChange = vi.fn();
+
+      render(
+        <>
+          <Dialog
+            isOpen={true}
+            onOpenChange={onDialogChange}
+            purpose="required"
+            aria-label="Required">
+            Choose one
+          </Dialog>
+          <MobileNav isOpen={true} onOpenChange={onNavChange} label="Drawer">
+            <span>Nav content</span>
+          </MobileNav>
+        </>,
+      );
+
+      const event = pressEscape();
+
+      expect(onNavChange).toHaveBeenCalledWith(false);
+      expect(onDialogChange).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it('closes on a browser-initiated cancel when it is top-most', () => {
+      const onOpenChange = vi.fn();
+      render(
+        <MobileNav isOpen={true} onOpenChange={onOpenChange} label="Drawer">
+          <span>Nav content</span>
+        </MobileNav>,
+      );
+
+      const event = fireCancel(getDialog('Drawer'));
+
+      expect(event.defaultPrevented).toBe(true);
+      expect(onOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it('stays open on a browser-initiated cancel when it is not top-most', () => {
+      const onNavChange = vi.fn();
+
+      render(
+        <MobileNav isOpen={true} onOpenChange={onNavChange} label="Drawer">
+          <span>Nav content</span>
+          <Dialog isOpen={true} onOpenChange={() => {}} aria-label="Above">
+            Above
+          </Dialog>
+        </MobileNav>,
+      );
+
+      const event = fireCancel(getDialog('Drawer'));
+
+      expect(event.defaultPrevented).toBe(true);
+      expect(onNavChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('required Dialog', () => {
+    it('still swallows an Escape when it is alone', () => {
+      const onDialogChange = vi.fn();
+
+      render(
+        <Dialog
+          isOpen={true}
+          onOpenChange={onDialogChange}
+          purpose="required"
+          aria-label="Required">
+          Choose one
+        </Dialog>,
+      );
+
+      const event = pressEscape();
+
+      expect(onDialogChange).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it('still swallows an Escape with a Lightbox open UNDER it', () => {
+      const onLightboxChange = vi.fn();
+      const onDialogChange = vi.fn();
+
+      render(
+        <>
+          <Lightbox
+            isOpen={true}
+            onOpenChange={onLightboxChange}
+            media={MEDIA}
+          />
+          <Dialog
+            isOpen={true}
+            onOpenChange={onDialogChange}
+            purpose="required"
+            aria-label="Required">
+            Choose one
+          </Dialog>
+        </>,
+      );
+
+      pressEscape();
+
+      expect(onDialogChange).not.toHaveBeenCalled();
+      expect(onLightboxChange).not.toHaveBeenCalled();
+    });
+  });
+
+  // Controlled follows control state for `isOpen`: Escape still attempts the
+  // close, but only the caller's update function may perform it. Dialog has
+  // always worked this way; these two now do too.
+  describe('controlled hover layers', () => {
+    it('a controlled HoverCard takes the press and reports instead of hiding', () => {
+      const onCardChange = vi.fn();
+      const onDialogChange = vi.fn();
+
+      render(
+        <Dialog isOpen={true} onOpenChange={onDialogChange} aria-label="Host">
+          <HoverCard
+            isOpen={true}
+            onOpenChange={onCardChange}
+            content={<span>Pinned card</span>}>
+            <button type="button">Trigger</button>
+          </HoverCard>
+        </Dialog>,
+      );
+      onCardChange.mockClear();
+      vi.mocked(HTMLElement.prototype.hidePopover).mockClear();
+
+      const event = pressEscape();
+
+      expect(onCardChange).toHaveBeenCalledWith(false);
+      expect(HTMLElement.prototype.hidePopover).not.toHaveBeenCalled();
+      expect(onDialogChange).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it('a controlled Tooltip takes the press and reports instead of hiding', () => {
+      const onTipChange = vi.fn();
+      const onDialogChange = vi.fn();
+
+      render(
+        <Dialog isOpen={true} onOpenChange={onDialogChange} aria-label="Host">
+          <Tooltip
+            isOpen={true}
+            onOpenChange={onTipChange}
+            content="Pinned tip">
+            <button type="button">Trigger</button>
+          </Tooltip>
+        </Dialog>,
+      );
+      onTipChange.mockClear();
+      vi.mocked(HTMLElement.prototype.hidePopover).mockClear();
+
+      const event = pressEscape();
+
+      expect(onTipChange).toHaveBeenCalledWith(false);
+      expect(HTMLElement.prototype.hidePopover).not.toHaveBeenCalled();
+      expect(onDialogChange).not.toHaveBeenCalled();
+      expect(event.defaultPrevented).toBe(true);
+    });
+
+    it('leaves the Dialog unclosable when the consumer discards the request', () => {
+      // The round-6 regression, now by consumer choice rather than by ours: a
+      // layer that holds itself open and ignores its own change handler keeps
+      // taking the press, and nothing behind it can be reached.
+      const onCardChange = vi.fn();
+      const onDialogChange = vi.fn();
+
+      render(
+        <Dialog isOpen={true} onOpenChange={onDialogChange} aria-label="Host">
+          <HoverCard
+            isOpen={true}
+            onOpenChange={onCardChange}
+            content={<span>Stuck card</span>}>
+            <button type="button">Trigger</button>
+          </HoverCard>
+        </Dialog>,
+      );
+      onCardChange.mockClear();
+
+      pressEscape();
+      pressEscape();
+
+      expect(onCardChange).toHaveBeenCalledTimes(2);
+      expect(onDialogChange).not.toHaveBeenCalled();
+    });
+  });
+});