@astryxdesign/core 0.7.6 → 0.7.7-canary.1d04d40

package/src/BottomSheet/BottomSheetPanel.tsx

@@ -675,10 +675,23 @@ export function BottomSheetPanel({
     if (motion == null) {
       return;
     }
-    startedMotionRef.current = null;
+    // React can run this effect again for the same motion, for example when
+    // a Suspense boundary shows this content again. The passive effect below
+    // does not run again then, so the motion it started stays started, and a
+    // completion completes at once instead of waiting for that effect.
+    if (startedMotionRef.current !== motion) {
+      startedMotionRef.current = null;
+    }
     pendingMotionCompleteRef.current = null;
+    const complete = () => {
+      if (startedMotionRef.current === motion) {
+        onMotionCompleteRef.current?.(motion);
+      } else {
+        pendingMotionCompleteRef.current = motion;
+      }
+    };
     if (motion === 'entering' && reactivatedEntranceRef.current) {
-      pendingMotionCompleteRef.current = motion;
+      complete();
       return;
     }
     // What ends a motion: the fade is opacity, and the entrance, alignment and
@@ -690,13 +703,7 @@ export function BottomSheetPanel({
     return waitForTransition(
       elementRef.current,
       motion === 'fading' || crossFadeMotion ? 'opacity' : 'transform',
-      () => {
-        if (startedMotionRef.current === motion) {
-          onMotionCompleteRef.current?.(motion);
-        } else {
-          pendingMotionCompleteRef.current = motion;
-        }
-      },
+      complete,
     );
   }, [motion, isCrossFade]);
   // The snap is transform-only; the layout height reconciles when it lands.

package/src/Chat/Chat.doc.mjs

@@ -35,6 +35,7 @@ export const docs = {
     vars: [
       {name: '--_chat-composer-radius', description: 'Border radius of the composer body. Inner elements derive their radius concentrically.', default: 'var(--radius-chat)', private: true},
       {name: '--_chat-composer-padding', description: 'Padding of the composer body. Used in the concentric radius calculation.', default: 'var(--spacing-3)', private: true},
+      {name: '--_chat-avatar-offset', description: 'Top offset of a message avatar: the name row spacing when a bubble in the message shows a name, else 0px. Each message sets it from its own content. Not a theming lever.', default: '0px', private: true},
       {name: '--_button-radius', description: 'Concentric button radius inside the composer.', default: 'max(var(--radius-element), calc(var(--_chat-composer-radius) - var(--_chat-composer-padding)))', private: true, derived: true, formula: 'max(var(--radius-element), calc(var(--_chat-composer-radius) - var(--_chat-composer-padding)))'},
     ],
     derived: [

package/src/Chat/ChatComposerInput.doc.mjs

@@ -157,6 +157,13 @@ export const docs = {
       description:
         'Key-down handler invoked before the built-in Enter/history behavior (after any open trigger menu). The seam for platform-specific keys: call event.preventDefault() to suppress the default submit (e.g. newline on a touch keyboard), or act on the event yourself to add behavior (e.g. submit on Cmd/Ctrl+Enter). IME composition is always respected; Enter never submits mid-composition.',
     },
+    {
+      name: 'enterKeyHint',
+      type: "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'",
+      description:
+        'What the Return key of a touch keyboard says (the native enterkeyhint). Enter sends the message, so it defaults to send and iOS shows its Send key. When onKeyDown makes Enter insert a line break on touch keyboards, pass enter so the key shows Return again.',
+      default: "'send'",
+    },
   ],
 };
 
@@ -187,6 +194,8 @@ export const docsZh = {
     onSubmit: '用户不按 Shift 按 Enter 时调用。序列化值包含标记占位符。',
     onKeyDown:
       '在内置 Enter/历史处理之前（在打开的触发菜单之后）调用的按键处理器。平台特定按键的接缝：调用 event.preventDefault() 可抑制默认提交（例如触控键盘上插入换行），或自行处理事件以添加行为（例如 Cmd/Ctrl+Enter 提交）。始终尊重输入法组字状态——组字过程中 Enter 永不提交。',
+    enterKeyHint:
+      '触屏键盘回车键上显示的内容（原生 enterkeyhint）。Enter 会发送消息，因此默认为 send，iOS 显示“发送”键。当 onKeyDown 让触屏键盘上的 Enter 插入换行时，传入 enter 让按键恢复为回车。',
   },
 };
 
@@ -219,5 +228,7 @@ export const docsDense = {
       'Enter w/o Shift handler; serialized value includes token placeholders',
     onKeyDown:
       'keydown handler before built-in Enter/history (after trigger menu); preventDefault() to suppress default submit (touch newline) or act on event to add behavior (Cmd/Ctrl+Enter). IME composition always respected',
+    enterKeyHint:
+      'touch keyboard Return key label (enterkeyhint); default send since Enter sends; pass enter when onKeyDown makes Enter a newline on touch',
   },
 };

package/src/Chat/ChatComposerInput.tsx

@@ -68,6 +68,7 @@ import {
 import {Badge, type BadgeProps} from '../Badge';
 import {useChatComposerContext} from './ChatContext';
 import {themeProps} from '../utils/themeProps';
+import type {EnterKeyHint} from '../Field/textEntryTraits';
 import {
   registerEnglishFallback,
   useComponentTranslator,
@@ -247,6 +248,14 @@ export interface ChatComposerInputProps extends Omit<
    * never submits while a composition is in progress.
    */
   onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void;
+  /**
+   * What the Return key of a touch keyboard says (the native
+   * `enterkeyhint`). Enter sends the message, so the key says so: iOS shows
+   * its Send key. When `onKeyDown` makes Enter insert a line break on touch
+   * keyboards, pass `'enter'` so the key shows Return again.
+   * @default 'send'
+   */
+  enterKeyHint?: EnterKeyHint;
 }
 
 // =============================================================================
@@ -373,6 +382,7 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
     onFiles,
     onSubmit = composerCtx?.onSubmit,
     onKeyDown: onKeyDownProp,
+    enterKeyHint = 'send',
     xstyle,
     className,
     style,
@@ -941,6 +951,7 @@ export function ChatComposerInput(props: ChatComposerInputProps) {
         // Explicit in both states: losing editability must not lose focus.
         tabIndex={0}
         contentEditable={!isDisabled}
+        enterKeyHint={enterKeyHint}
         suppressContentEditableWarning
         onInput={handleInput}
         onClick={handleEditorClick}

package/src/Chat/ChatMessage.tsx

@@ -118,7 +118,7 @@ const styles = stylex.create({
   // Judged from this article (parent-relative), never from siblings, so the
   // global stylesheet keeps no sibling-relative :has().
   avatarOffset: {
-    [chatMessageVars.avatarOffset]: {
+    [chatMessageVars['--_chat-avatar-offset']]: {
       default: '0px',
       ':has([data-chat-name])': spacingVars['--spacing-5'],
     },
@@ -128,7 +128,7 @@ const styles = stylex.create({
     flexShrink: 0,
     // The avatar lines up with a bubble's name row when the message holds
     // one; the article sets the offset (see chatMessageVars).
-    marginBlockStart: chatMessageVars.avatarOffset,
+    marginBlockStart: chatMessageVars['--_chat-avatar-offset'],
   },
   contentColumn: {
     display: 'flex',

package/src/Chat/chatMessage.vars.stylex.ts

@@ -5,14 +5,14 @@ import * as stylex from '@stylexjs/stylex';
 /**
  * Per-message values ChatMessage sets on its article for its own slots.
  *
- * `avatarOffset` is the avatar's top spacing: the name row's spacing when a
- * bubble in this message renders a name, else none. Each article sets it from
- * its own `:has([data-chat-name])`, a parent-relative rule: a sibling-relative
- * `:has(~ …)` in the global stylesheet makes WebKit re-check every earlier
- * sibling on each insertion into any container, so filling one grows
- * quadratically. A message nested in another sets its own value, so it never
- * inherits the outer message's.
+ * `--_chat-avatar-offset` is the avatar's top spacing: the name row's spacing
+ * when a bubble in this message renders a name, else none. Each article sets
+ * it from its own `:has([data-chat-name])`, a parent-relative rule: a
+ * sibling-relative `:has(~ …)` in the global stylesheet makes WebKit re-check
+ * every earlier sibling on each insertion into any container, so filling one
+ * grows quadratically. A message nested in another sets its own value, so it
+ * never inherits the outer message's.
  */
 export const chatMessageVars = stylex.defineVars({
-  avatarOffset: '0px',
+  '--_chat-avatar-offset': '0px',
 });

package/src/CommandPalette/CommandPaletteInput.tsx

@@ -46,6 +46,7 @@ import {
   useComponentTranslator,
 } from '../i18n/useComponentTranslator';
 import english from '../i18n/generated-english/CommandPalette/CommandPaletteInput.generated';
+import {textEntryTraitAttributes} from '../Field/textEntryTraits';
 
 registerEnglishFallback(english);
 const styles = stylex.create({
@@ -320,6 +321,11 @@ export function CommandPaletteInput({
           ? focusOutlineProps.focusVisible(styles.input)
           : focusOutlineProps.suppressed(styles.input))}
         type="text"
+        // Autocorrect would rewrite names and identifiers.
+        {...textEntryTraitAttributes({
+          enterKeyHint: 'search',
+          hasAutoCorrect: false,
+        })}
         role={ctx ? 'combobox' : standaloneRole}
         aria-expanded={
           ctx

package/src/DateInput/MonthScroller.tsx

@@ -62,6 +62,7 @@ import {
   plainDateToISO,
   DATE_FORMAT_WITH_WEEKDAY,
 } from '../utils';
+import {reducedMotionFade} from '../motion/reducedMotion';
 import {dateInputTouchSizes, dateInputTouchGeometry} from './tokens.stylex';
 import {useOwnScrollGesture} from './useOwnScrollGesture';
 import {useScrollSettle} from './useScrollSettle';
@@ -431,8 +432,26 @@ export function MonthScroller({
     );
   }, [paneSize, initialMonthIndex, minMonthIndex, isRTL]);
 
+  // The Reduced Motion dip of a step on a touch screen, owned here so a
+  // second step or the unmount clears it.
+  const dipRef = useRef<{animation: Animation; timer: number} | null>(null);
+  const stopDip = useCallback(() => {
+    const dip = dipRef.current;
+    if (dip != null) {
+      window.clearTimeout(dip.timer);
+      dip.animation.cancel();
+      dipRef.current = null;
+    }
+  }, []);
+  // Synchronizes with the dip's timer and animation: neither outlives the
+  // scroller.
+  useEffect(() => stopDip, [stopDip]);
+
   const scrollToMonth = useCallback(
     (monthIndex: number, behavior: ScrollBehavior = 'smooth') => {
+      // Every step replaces a running dip, whichever way it moves. Otherwise
+      // the dip's landing would undo a jump or an immediate step made after it.
+      stopDip();
       const scroller = scrollerRef.current;
       if (scroller == null || paneSize === 0) {
         return;
@@ -458,13 +477,52 @@ export function MonthScroller({
         recenter(scroller, row);
         return;
       }
+      const left = scrollOffsetForRow(row, paneSize, isRTL);
+      // Under reduced motion the month changes without travel: at once on a fine
+      // primary pointer, under an opacity dip on a coarse one (reducedMotionFade).
+      const fade = behavior === 'smooth' ? reducedMotionFade(scroller) : null;
+      if (fade != null) {
+        // The window mounts around the target first, and the scroll lands in
+        // the layout effect below, as a far jump does. So nothing moves the
+        // window after the jump. If the window followed the jump, WebKit would
+        // re-snap it one pane further on every frame. A scroll that lands on
+        // the centre row reports nothing.
+        const land = () => {
+          // The landing is the newest steer. An earlier steer whose scroll
+          // never arrived would otherwise hide every scroll after it, a
+          // trackpad's included. Closing the wheels makes such a steer: it
+          // re-asserts the month already in view.
+          steeredRowRef.current = null;
+          if (row === centerRowRef.current) {
+            scroller.scrollTo({left, behavior: 'auto'});
+            return;
+          }
+          pendingScrollRef.current = row;
+          centerRowRef.current = row;
+          setCenterRow(row);
+        };
+        if (fade.duration === 0) {
+          land();
+          return;
+        }
+        // A second step within the dip has replaced the first (above): only
+        // its scroll lands, at its own dip's middle.
+        dipRef.current = {
+          animation: scroller.animate(
+            [{opacity: 1}, {opacity: 0}, {opacity: 1}],
+            {duration: fade.duration, easing: fade.easing},
+          ),
+          timer: window.setTimeout(() => {
+            dipRef.current = null;
+            land();
+          }, fade.duration / 2),
+        };
+        return;
+      }
       steeredRowRef.current = row;
-      scroller.scrollTo({
-        left: scrollOffsetForRow(row, paneSize, isRTL),
-        behavior,
-      });
+      scroller.scrollTo({left, behavior});
     },
-    [paneSize, minMonthIndex, rowCount, isRTL, recenter],
+    [paneSize, minMonthIndex, rowCount, isRTL, recenter, stopDip],
   );
 
   // Deliberately un-keyed: it runs after every render, costs a null check, and

package/src/Drawer/Drawer.tsx

@@ -77,6 +77,7 @@ import {LayerDepthProvider, useLayerDismissal} from '../Layer';
 import {layerTextReset} from '../Layer/layerTextReset.stylex';
 import {layerStructureReset} from '../Layer/layerStructureReset.stylex';
 import {LayerContentBoundary} from '../Layer/layerScopedContext';
+import {useModalOutlet} from '../Layer/modalOutlet';
 import {layerClickBoundary} from '../Layer/layerClickBoundary';
 import {ModalAnnounceProvider} from '../hooks/ModalAnnounceProvider';
 import {composeEventHandlers, mergeProps, themeProps} from '../utils';
@@ -497,6 +498,11 @@ export function Drawer({
     setIsRendered,
   });
 
+  // Toasts outside an open modal are inert, so the open drawer hosts them.
+  // It releases them when its exit starts.
+  // showModal() must run first, so keep this call after useDrawerDialogPresence.
+  useModalOutlet(dialogRef, isOpen && hasScrim);
+
   const handleDismiss = useCallback(() => {
     onOpenChange(false);
   }, [onOpenChange]);

package/src/DropdownMenu/useMenuOverflow.ts

@@ -4,31 +4,62 @@
 
 /**
  * @file useMenuOverflow.ts
- * @input Menu element ref, rendered content, and open state
+ * @input Menu element ref, rendered content, open state, and optionally the
+ *   overflow its owner expects from the content alone
  * @output Returns whether the open menu overflows its block-size constraint
  * @position Shared responsive helper for DropdownMenu and DropdownMenuSubMenu
  */
 
-import {useCallback, useState, type ReactNode, type RefObject} from 'react';
+import {
+  useCallback,
+  useRef,
+  useState,
+  type ReactNode,
+  type RefObject,
+} from 'react';
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect';
 
-/** Detect block-axis overflow without making a fitting menu a scroll container. */
+/**
+ * Detect block-axis overflow without making a fitting menu a scroll container.
+ *
+ * `expectedOverflow` is the answer the owner can give before any measure (a
+ * long option list cannot fit). Until a measure of the same `content` says
+ * otherwise, it is the result, so the first open already renders the right
+ * class: a class that flips after the open measure restyles the whole list
+ * a second time. A measure still runs on every open and corrects a wrong
+ * guess.
+ */
 export function useMenuOverflow(
   menuRef: RefObject<HTMLElement | null>,
   content: ReactNode,
   isOpen: boolean,
+  expectedOverflow?: boolean,
 ): boolean {
-  const [hasOverflow, setHasOverflow] = useState(false);
+  // The content each measure stands for, kept only for an owner that gives
+  // an expected answer (a caller whose content is a new element on every
+  // render compares nothing); set before the measuring effects run.
+  const contentRef = useRef<ReactNode>(null);
+  useIsomorphicLayoutEffect(() => {
+    contentRef.current = expectedOverflow === undefined ? null : content;
+  });
+  const [measured, setMeasured] = useState<{
+    content: ReactNode;
+    hasOverflow: boolean;
+  } | null>(null);
 
   const measureOverflow = useCallback(() => {
     const menu = menuRef.current;
     if (!menu) {
       return;
     }
-    const nextHasOverflow = menu.scrollHeight > menu.clientHeight + 1;
+    const hasOverflow = menu.scrollHeight > menu.clientHeight + 1;
     // eslint-disable-next-line @eslint-react/set-state-in-effect -- DOM overflow measurement controls whether this menu becomes a scroll container
-    setHasOverflow(current =>
-      current === nextHasOverflow ? current : nextHasOverflow,
+    setMeasured(current =>
+      current != null &&
+      current.hasOverflow === hasOverflow &&
+      Object.is(current.content, contentRef.current)
+        ? current
+        : {content: contentRef.current, hasOverflow},
     );
   }, [menuRef]);
 
@@ -73,5 +104,10 @@ export function useMenuOverflow(
     }
   }, [content, isOpen, measureOverflow]);
 
-  return hasOverflow;
+  if (expectedOverflow === undefined) {
+    return measured?.hasOverflow ?? false;
+  }
+  return measured != null && Object.is(measured.content, content)
+    ? measured.hasOverflow
+    : expectedOverflow;
 }

package/src/Field/PanelSearchInput.tsx

@@ -57,6 +57,7 @@ import {
   typographyVars,
 } from '../theme/tokens.stylex';
 import type {BaseProps} from '../BaseProps';
+import {textEntryTraitAttributes} from './textEntryTraits';
 
 const styles = stylex.create({
   // Gutter only. Matches the option list's own padding so the field below
@@ -273,6 +274,11 @@ export function PanelSearchInput({
         <input
           ref={mergedInputRef}
           type="text"
+          // Autocorrect would rewrite names and identifiers.
+          {...textEntryTraitAttributes({
+            enterKeyHint: 'search',
+            hasAutoCorrect: false,
+          })}
           aria-label={label}
           placeholder={placeholder}
           value={value}

package/src/Field/textEntryTraits.ts

@@ -3,16 +3,16 @@
 /**
  * @file textEntryTraits.ts
  * @input The keyboard-trait props a text field accepts
- * @output Exports the closed value unions EnterKeyHint, InputMode and
- *   AutoCapitalize (the package entry exports these three), the fields' prop
- *   mixin TextEntryTraitProps, and textEntryTraitAttributes, which maps the
- *   props onto the native attributes of the editable element
- * @position Shared by TextInput and TextArea: the one place that says how a
- *   field tells a touch keyboard what it holds
+ * @output EnterKeyHint, InputMode and AutoCapitalize (the package entry exports
+ *   these), TextEntryTraitProps and textEntryTraitAttributes
+ * @position Shared by TextInput, TextArea and the search inputs: the one place
+ *   that says how a field tells a touch keyboard what it holds
  *
  * SYNC: When modified, update:
  * - /packages/core/src/TextInput/TextInput.tsx and TextInput.doc.mjs
  * - /packages/core/src/TextArea/TextArea.tsx and TextArea.doc.mjs
+ * - /packages/core/src/Typeahead/BaseTypeahead.tsx, Field/PanelSearchInput.tsx
+ *   and CommandPalette/CommandPaletteInput.tsx (the search inputs)
  * - /packages/core/src/Field/index.ts (type exports)
  */
 

package/src/Layer/layerClickBoundary.ts

@@ -6,7 +6,7 @@
  * @file layerClickBoundary.ts
  * @input React pointer, mouse, touch and click events on a layer root
  * @output Exports layerClickBoundary, the props every layer content root
- *   spreads, including the layer-root mark
+ *   spreads, including the layer-root mark; also stopInReactTree
  * @position Internal to Layer; used by useLayer's renderers and the Dialog,
  *   Drawer, Lightbox, MobileNav, BottomSheetPanel and ToastViewport roots.
  *   Not exported from the package.
@@ -61,7 +61,7 @@ const returnTrue = () => true;
  * React's dispatch asks `isPropagationStopped()` before each further
  * listener; the native event is left alone.
  */
-function stopInReactTree(event: SyntheticEvent): void {
+export function stopInReactTree(event: SyntheticEvent): void {
   event.isPropagationStopped = returnTrue;
 }