@astryxdesign/core 0.1.4-canary.fd7ab46 → 0.1.4

package/src/CommandPalette/CommandPaletteInput.doc.mjs

@@ -57,12 +57,6 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
-  playground: {
-    defaults: {
-      placeholder: 'Search commands, files, or actions...',
-      hasAutoFocus: false,
-    },
-  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteItem.doc.mjs

@@ -50,12 +50,6 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
-  playground: {
-    defaults: {
-      value: 'go-home',
-      children: 'Go to Dashboard',
-    },
-  },
 };
 
 export const docsZh = {

package/src/CommandPalette/CommandPaletteList.doc.mjs

@@ -27,15 +27,6 @@ export const docs = {
       description: 'StyleX styles for layout customization. Must be a stylex.create() value.',
     },
   ],
-  playground: {
-    defaults: {
-      children: [
-        {__element: 'CommandPaletteItem', props: {value: 'home', onSelect: undefined}, children: 'Go Home'},
-        {__element: 'CommandPaletteItem', props: {value: 'settings', onSelect: undefined}, children: 'Open Settings'},
-        {__element: 'CommandPaletteItem', props: {value: 'profile', onSelect: undefined}, children: 'View Profile'},
-      ],
-    },
-  },
 };
 
 export const docsZh = {

package/src/ContextMenu/ContextMenu.doc.mjs

@@ -78,21 +78,6 @@ export const docs = {
       { guidance: false, description: 'Place more than 10–12 items in a single menu without grouping them into sections.' },
     ],
   },
-  playground: {
-    defaults: {
-      children: {
-        __element: 'Card',
-        props: {padding: 6},
-        children: {__element: 'Text', props: {color: 'secondary'}, children: 'Right-click this area'},
-      },
-      items: [
-        {label: 'Edit'},
-        {label: 'Duplicate'},
-        {type: 'divider'},
-        {label: 'Delete'},
-      ],
-    },
-  },
 };
 
 /** @type {import('../docs-types').TranslationDoc} */

package/src/ContextMenu/ContextMenu.test.tsx

@@ -172,21 +172,6 @@ describe('ContextMenu', () => {
     expect(preventDefault).toHaveBeenCalled();
   });
 
-  it('prevents default context menu on the opened menu container', () => {
-    render(
-      <ContextMenu items={[{label: 'Item 1'}]}>
-        <div>Right-click me</div>
-      </ContextMenu>,
-    );
-
-    fireEvent.contextMenu(screen.getByText('Right-click me'));
-    const menu = screen.getByRole('menu', {hidden: true});
-    const event = new MouseEvent('contextmenu', {bubbles: true});
-    const preventDefault = vi.spyOn(event, 'preventDefault');
-    menu.dispatchEvent(event);
-    expect(preventDefault).toHaveBeenCalled();
-  });
-
   it('does not open when isDisabled is true', () => {
     render(
       <ContextMenu items={[{label: 'Item 1'}]} isDisabled>
@@ -464,76 +449,4 @@ describe('ContextMenu compound mode', () => {
     ).toBeInTheDocument();
     expect(screen.getByRole('separator', {hidden: true})).toBeInTheDocument();
   });
-
-  describe('cursor anchor positioning (#3465)', () => {
-    // The menu is anchored to a zero-size element placed at the cursor point
-    // *inside the trigger*, so it is positioned relative to the trigger's
-    // context (scroll-follow + auto-flip) rather than the viewport.
-    function getCursorAnchor(trigger: HTMLElement): HTMLElement {
-      const anchor = trigger.querySelector<HTMLElement>('[aria-hidden="true"]');
-      if (!anchor) {
-        throw new Error('cursor anchor not found');
-      }
-      return anchor;
-    }
-
-    it('renders a zero-size cursor anchor inside the trigger', () => {
-      render(
-        <ContextMenu items={[{label: 'Item 1'}]} data-testid="ctx">
-          <div>Right-click me</div>
-        </ContextMenu>,
-      );
-      const anchor = getCursorAnchor(screen.getByTestId('ctx'));
-      expect(anchor.tagName).toBe('SPAN');
-      // Carries an anchor-name so the menu can be anchored to it via CSS
-      // anchor positioning (context mode), not fixed viewport coordinates.
-      expect(anchor.style.anchorName).toMatch(/^--astryx-layer-/);
-    });
-
-    it('places the cursor anchor at the pointer position relative to the trigger', () => {
-      render(
-        <ContextMenu items={[{label: 'Item 1'}]} data-testid="ctx">
-          <div>Right-click me</div>
-        </ContextMenu>,
-      );
-      const trigger = screen.getByTestId('ctx');
-      trigger.getBoundingClientRect = () =>
-        ({
-          left: 100,
-          top: 50,
-          right: 300,
-          bottom: 150,
-          width: 200,
-          height: 100,
-        }) as DOMRect;
-      // Pointer at viewport (170, 90) -> local trigger offset (70, 40).
-      fireEvent.contextMenu(trigger, {clientX: 170, clientY: 90, detail: 1});
-      const anchor = getCursorAnchor(trigger);
-      expect(anchor.style.left).toBe('70px');
-      expect(anchor.style.top).toBe('40px');
-    });
-
-    it('anchors a keyboard-invoked menu to the trigger bottom-left', () => {
-      render(
-        <ContextMenu items={[{label: 'Item 1'}]} data-testid="ctx">
-          <div>Right-click me</div>
-        </ContextMenu>,
-      );
-      const trigger = screen.getByTestId('ctx');
-      trigger.getBoundingClientRect = () =>
-        ({
-          left: 40,
-          top: 10,
-          right: 100,
-          bottom: 30,
-          width: 60,
-          height: 20,
-        }) as DOMRect;
-      // Keyboard-initiated contextmenu: coords (0,0), detail 0 -> local (0, height).
-      fireEvent.contextMenu(trigger, {clientX: 0, clientY: 0, detail: 0});
-      const anchor = getCursorAnchor(trigger);
-      expect(anchor.style.left).toBe('0px');
-      expect(anchor.style.top).toBe('20px');
-    });
-  });
 });

package/src/ContextMenu/ContextMenu.tsx

@@ -3,16 +3,11 @@
 
 /**
  * @file ContextMenu.tsx
- * @input Uses React, StyleX, useLayer (context mode), useListFocus
+ * @input Uses React, StyleX, useLayer (fixed mode), useListFocus
  * @output Exports ContextMenu component
  * @position Core implementation; consumed by index.ts
  *
- * Right-click context menu positioned at the cursor. The cursor point is
- * captured as an offset *inside the trigger* and materialized as a zero-size
- * anchor element, so the menu is positioned relative to the trigger's context
- * (via CSS anchor positioning) rather than the viewport. It therefore follows
- * the content on scroll and auto-flips at viewport edges, while still appearing
- * under the cursor.
+ * Right-click context menu positioned at cursor coordinates.
  * Reuses DropdownMenu item rendering and keyboard navigation.
  *
  * Supports two content modes with a single keyboard/focus path:
@@ -58,7 +53,7 @@ import {
   easeVars,
   shadowVars,
 } from '../theme/tokens.stylex';
-import {mergeProps, mergeRefs} from '../utils';
+import {mergeProps} from '../utils';
 import type {BaseProps} from '../BaseProps';
 import type {StyleXStyles} from '../theme/types';
 import {themeProps} from '../utils/themeProps';
@@ -72,23 +67,9 @@ import type {
 const styles = stylex.create({
   // Trigger wrapper: suppress the iOS long-press callout/selection so the
   // long-press opens our context menu instead of the native text/callout UI.
-  // `position: relative` establishes the containing block for the absolutely
-  // positioned cursor anchor below, so the anchor point tracks the trigger
-  // (and scrolls with it) instead of the page.
   trigger: {
-    position: 'relative',
     WebkitTouchCallout: 'none',
   },
-  // Zero-size anchor placed at the cursor point within the trigger. The menu
-  // is anchored to this element, so it sits under the cursor yet is positioned
-  // relative to the trigger's context — it follows the content on scroll and
-  // the browser can auto-flip it against the viewport edges.
-  cursorAnchor: {
-    position: 'absolute',
-    width: 0,
-    height: 0,
-    pointerEvents: 'none',
-  },
   menu: {
     boxSizing: 'border-box',
     display: 'flex',
@@ -106,7 +87,6 @@ const styles = stylex.create({
     transitionProperty: 'opacity',
     transitionDuration: durationVars['--duration-fast'],
     transitionTimingFunction: easeVars['--ease-standard'],
-    userSelect: 'none',
   },
   popover: {
     minWidth: '160px',
@@ -220,13 +200,7 @@ export function ContextMenu({
   const menuContent = 'menuContent' in props ? props.menuContent : undefined;
 
   const menuId = useId();
-  // Cursor point in the trigger's local coordinate space (offset from the
-  // trigger's top-left, in-flow). Stored here and written to the zero-size
-  // anchor element so the menu is positioned relative to the trigger context
-  // — it scrolls with the content instead of sitting at a fixed viewport point.
   const positionRef = useRef({x: 0, y: 0});
-  const cursorAnchorRef = useRef<HTMLSpanElement>(null);
-  const triggerRef = useRef<HTMLDivElement>(null);
   // Element focused before the menu opened, restored when it closes so focus
   // does not fall to <body> after Escape or outside-click dismissal.
   const triggerFocusRef = useRef<HTMLElement | null>(null);
@@ -234,7 +208,7 @@ export function ContextMenu({
   const [isOpen, setIsOpen] = useState(false);
 
   const layer = useLayer({
-    mode: 'context',
+    mode: 'fixed',
     onHide: useCallback(() => {
       setIsOpen(false);
       onOpenChange?.(false);
@@ -352,53 +326,34 @@ export function ContextMenu({
     [listNavKeyDown, typeahead],
   );
 
-  // Place the zero-size cursor anchor at a point in the trigger's local
-  // coordinate space and open the menu. Positioning the anchor inside the
-  // trigger (rather than storing viewport coordinates on the menu itself) is
-  // what makes the menu context-relative: it scrolls with the content and the
-  // browser auto-flips it against the viewport edges via CSS anchor positioning.
-  const openAtLocalPoint = useCallback(
-    (localX: number, localY: number, focusEl: HTMLElement | null) => {
-      positionRef.current = {x: localX, y: localY};
-      const anchorEl = cursorAnchorRef.current;
-      if (anchorEl) {
-        anchorEl.style.left = `${localX}px`;
-        anchorEl.style.top = `${localY}px`;
-      }
-      // Remember the element focused before opening so we can restore it on
-      // close (Escape or outside-click), instead of dropping focus to <body>.
-      triggerFocusRef.current =
-        document.activeElement instanceof HTMLElement
-          ? document.activeElement
-          : focusEl;
-      layer.show();
-      requestAnimationFrame(() => focusFirst());
-    },
-    [layer, focusFirst],
-  );
-
   const handleContextMenu = useCallback(
     (e: React.MouseEvent) => {
       if (isDisabled) {
         return;
       }
       e.preventDefault();
-      const trigger = triggerRef.current;
-      const rect = trigger?.getBoundingClientRect();
       // A keyboard-initiated contextmenu (Shift+F10 / the Menu key) fires a
       // `contextmenu` event whose coordinates are (0, 0) in several browsers.
-      // Detect that and anchor the menu to the trigger's bottom-left instead,
-      // so the menu is reachable without a pointer (menus-8).
+      // Detect that and anchor the menu to the trigger's box instead, so the
+      // menu is reachable without a pointer (menus-8).
       const isKeyboardInvoked =
         e.clientX === 0 && e.clientY === 0 && e.detail === 0;
-      // Convert the viewport cursor point into the trigger's local space so
-      // the anchor lives inside the (scrollable) trigger context.
-      const localX = isKeyboardInvoked || !rect ? 0 : e.clientX - rect.left;
-      const localY =
-        isKeyboardInvoked || !rect ? (rect?.height ?? 0) : e.clientY - rect.top;
-      openAtLocalPoint(localX, localY, e.currentTarget as HTMLElement);
+      if (isKeyboardInvoked && e.currentTarget instanceof HTMLElement) {
+        const rect = e.currentTarget.getBoundingClientRect();
+        positionRef.current = {x: rect.left, y: rect.bottom};
+      } else {
+        positionRef.current = {x: e.clientX, y: e.clientY};
+      }
+      // Remember the element focused before opening so we can restore it on
+      // close (Escape or outside-click), instead of dropping focus to <body>.
+      triggerFocusRef.current =
+        document.activeElement instanceof HTMLElement
+          ? document.activeElement
+          : (e.currentTarget as HTMLElement);
+      layer.show();
+      requestAnimationFrame(() => focusFirst());
     },
-    [isDisabled, openAtLocalPoint],
+    [isDisabled, layer, focusFirst],
   );
 
   // Touch long-press invocation (menus-8). iOS Safari never synthesizes a
@@ -409,14 +364,11 @@ export function ContextMenu({
     disabled: isDisabled,
     onLongPress: useCallback(
       (point: {x: number; y: number}) => {
-        const rect = triggerRef.current?.getBoundingClientRect();
-        openAtLocalPoint(
-          rect ? point.x - rect.left : point.x,
-          rect ? point.y - rect.top : point.y,
-          triggerRef.current,
-        );
+        positionRef.current = {x: point.x, y: point.y};
+        layer.show();
+        requestAnimationFrame(() => focusFirst());
       },
-      [openAtLocalPoint],
+      [layer, focusFirst],
     ),
   });
 
@@ -435,7 +387,7 @@ export function ContextMenu({
   return (
     <>
       <div
-        ref={mergeRefs(ref, triggerRef)}
+        ref={ref}
         onContextMenu={handleContextMenu}
         {...longPressHandlers}
         data-testid={testId}
@@ -448,16 +400,6 @@ export function ContextMenu({
             : []),
         )}>
         {children}
-        <span
-          ref={mergeRefs(cursorAnchorRef, layer.ref)}
-          aria-hidden="true"
-          {...mergeProps(stylex.props(styles.cursorAnchor), {
-            style: {
-              left: `${positionRef.current.x}px`,
-              top: `${positionRef.current.y}px`,
-            },
-          })}
-        />
       </div>
 
       {layer.render(
@@ -467,7 +409,6 @@ export function ContextMenu({
           role="menu"
           aria-label={label}
           onKeyDown={listKeyDown}
-          onContextMenu={e => e.preventDefault()}
           {...mergeProps(
             themeProps('context-menu'),
             stylex.props(styles.menu, xstyle),
@@ -479,8 +420,8 @@ export function ContextMenu({
           </DropdownMenuContext>
         </div>,
         {
-          placement: 'below',
-          alignment: 'start',
+          x: positionRef.current.x,
+          y: positionRef.current.y,
           xstyle: [popoverXstyle, layerAnimations.below],
         },
       )}

package/src/ContextMenu/ContextMenuItem.doc.mjs

@@ -35,12 +35,6 @@ export const docs = {
       description: 'StyleX styles for layout customization.',
     },
   ],
-  playground: {
-    defaults: {
-      label: 'Edit',
-      description: 'Modify this item',
-    },
-  },
 };
 
 export const docsZh = {

package/src/DateInput/DateInput.test.tsx

@@ -12,7 +12,6 @@
 import {describe, it, expect, vi, beforeEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {getButton, queryButton} from '../__tests__/fastRoleQueries';
 import {DateInput} from './DateInput';
 import {InputGroup} from '../InputGroup';
 import {InputGroupText} from '../InputGroup/InputGroupText';
@@ -93,14 +92,14 @@ describe('DateInput', () => {
 
   it('calendar button is focusable and clickable', () => {
     render(<DateInput label="Date" onChange={() => {}} />);
-    const button = getButton('Open calendar');
+    const button = screen.getByRole('button', {name: 'Open calendar'});
     expect(button).toBeInTheDocument();
     expect(button).not.toBeDisabled();
   });
 
   it('calendar button is disabled when isDisabled is true', () => {
     render(<DateInput label="Date" isDisabled onChange={() => {}} />);
-    const button = getButton('Open calendar');
+    const button = screen.getByRole('button', {name: 'Open calendar'});
     expect(button).toBeDisabled();
   });
 
@@ -283,7 +282,7 @@ describe('DateInput', () => {
   it('disables input and button when isLoading is true', () => {
     render(<DateInput label="Date" isLoading onChange={() => {}} />);
     expect(screen.getByRole('combobox')).toBeDisabled();
-    expect(getButton('Open calendar')).toBeDisabled();
+    expect(screen.getByRole('button', {name: 'Open calendar'})).toBeDisabled();
   });
 
   it('shows spinner when isLoading is true', () => {
@@ -476,7 +475,7 @@ describe('DateInput', () => {
 
   it('does not open popover when clicking calendar button while disabled', () => {
     render(<DateInput label="Date" isDisabled onChange={() => {}} />);
-    const button = getButton('Open calendar');
+    const button = screen.getByRole('button', {name: 'Open calendar'});
     fireEvent.click(button);
     expect(screen.getByRole('combobox')).toHaveAttribute(
       'aria-expanded',
@@ -514,17 +513,23 @@ describe('DateInput', () => {
           hasClear
         />,
       );
-      expect(getButton('Clear Date')).toBeInTheDocument();
+      expect(
+        screen.getByRole('button', {name: 'Clear Date'}),
+      ).toBeInTheDocument();
     });
 
     it('does not show clear button when value is undefined', () => {
       render(<DateInput label="Date" onChange={() => {}} hasClear />);
-      expect(queryButton('Clear Date')).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', {name: 'Clear Date'}),
+      ).not.toBeInTheDocument();
     });
 
     it('does not show clear button when hasClear is false', () => {
       render(<DateInput label="Date" value="2026-01-15" onChange={() => {}} />);
-      expect(queryButton('Clear Date')).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', {name: 'Clear Date'}),
+      ).not.toBeInTheDocument();
     });
 
     it('does not show clear button when disabled', () => {
@@ -537,7 +542,9 @@ describe('DateInput', () => {
           isDisabled
         />,
       );
-      expect(queryButton('Clear Date')).not.toBeInTheDocument();
+      expect(
+        screen.queryByRole('button', {name: 'Clear Date'}),
+      ).not.toBeInTheDocument();
     });
 
     it('calls onChange with undefined when clear is clicked', () => {
@@ -550,7 +557,7 @@ describe('DateInput', () => {
           hasClear
         />,
       );
-      fireEvent.click(getButton('Clear Date'));
+      fireEvent.click(screen.getByRole('button', {name: 'Clear Date'}));
       expect(onChange).toHaveBeenCalledWith(undefined);
     });
   });
@@ -692,7 +699,9 @@ describe('DateInput', () => {
       expect(input).toHaveAttribute('aria-disabled', 'true');
       expect(input.getAttribute('aria-describedby')).toContain(tooltip.id);
       expect(tooltip).toHaveTextContent('Scheduling is locked');
-      expect(getButton('Open calendar')).toBeDisabled();
+      expect(
+        screen.getByRole('button', {name: 'Open calendar'}),
+      ).toBeDisabled();
     });
   });