@astryxdesign/core 0.7.6 → 0.7.7-canary.0eb44a2

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/DateInput/Wheel.tsx

@@ -21,6 +21,11 @@
  * browser that does not understand `animation-timeline` would otherwise run
  * the same keyframes on the document timeline and simply play them once.
  *
+ * Under Reduce Motion, the wheel's own scrolls (a step from a key or a click,
+ * the travel to the nearest enabled row) land without travel. They cross-fade
+ * on a touch screen and land at once otherwise. A finger's scroll and its
+ * momentum stay the platform's.
+ *
  * Accessibility: this is a listbox, not a novel widget. It is one tab stop
  * with arrow/Home/End/PageUp/PageDown keys, `aria-activedescendant` tracking
  * the active row, and every row reachable by tap — none of which depends on
@@ -44,6 +49,7 @@ import {
   durationVars,
 } from '../theme/tokens.stylex';
 import {focusOutlineStyles} from '../utils';
+import {reducedMotionFade} from '../motion/reducedMotion';
 import {dateInputTouchSizes, dateInputTouchGeometry} from './tokens.stylex';
 import {useOwnScrollGesture} from './useOwnScrollGesture';
 import {usePointerDragScroll} from './usePointerDragScroll';
@@ -209,7 +215,10 @@ export interface WheelOption {
   value: number;
   /** Row text. */
   label: string;
-  /** Rows outside min/max stay visible but cannot be committed. */
+  /**
+   * Rows outside min/max stay visible but cannot be committed: a wheel that
+   * stops on one travels on to the nearest enabled row.
+   */
   isDisabled?: boolean;
 }
 
@@ -229,6 +238,46 @@ export interface WheelProps {
   isActive?: boolean;
 }
 
+/**
+ * The enabled row nearest `index`: `index` itself when it is enabled,
+ * otherwise the closest enabled row on either side. A tie goes to the side of
+ * `towardIndex` (the committed row), and a wheel with no enabled row stays on
+ * `towardIndex`.
+ *
+ * @example
+ * ```
+ * // Hours 0-23 with 09:00-17:00 bounds: stopping on 7 rests on 9.
+ * nearestEnabledIndex(hourOptions, 7, 10); // 9
+ * ```
+ */
+export function nearestEnabledIndex(
+  options: ReadonlyArray<WheelOption>,
+  index: number,
+  towardIndex: number,
+): number {
+  const isEnabled = (i: number) =>
+    i >= 0 && i < options.length && !options[i].isDisabled;
+  if (isEnabled(index)) {
+    return index;
+  }
+  for (let distance = 1; distance < options.length; distance++) {
+    const below = index - distance;
+    const above = index + distance;
+    const isBelowEnabled = isEnabled(below);
+    const isAboveEnabled = isEnabled(above);
+    if (isBelowEnabled && isAboveEnabled) {
+      return towardIndex < index ? below : above;
+    }
+    if (isBelowEnabled) {
+      return below;
+    }
+    if (isAboveEnabled) {
+      return above;
+    }
+  }
+  return towardIndex;
+}
+
 /**
  * One snap-scrolling picker column.
  *
@@ -275,20 +324,100 @@ export function Wheel({
       : 0;
   }, []);
 
+  // What last started a scroll of the wheel: a pointer's type, or 'wheel'
+  // for a mouse wheel or trackpad. Under Reduce Motion the release of a touch
+  // drag cross-fades on any primary pointer. A key step, a row tap or a
+  // trackpad's scroll cross-fades on a coarse primary pointer and lands at
+  // once on a fine one.
+  const lastPointerRef = useRef<string | null>(null);
+
+  // A reduced-motion dip whose rows have not landed yet: its timer and the
+  // row it lands on. While one is pending the rows stay put for it, so they
+  // never move at full opacity, and a further step retargets it.
+  const pendingFadeRef = useRef<{timer: number; top: number} | null>(null);
+  // The running dip, so a step during its fade-in starts the next one where
+  // the column is.
+  const dipRef = useRef<Animation | null>(null);
+  useEffect(
+    () => () => {
+      if (pendingFadeRef.current != null) {
+        window.clearTimeout(pendingFadeRef.current.timer);
+        pendingFadeRef.current = null;
+      }
+    },
+    [],
+  );
+
   const scrollToIndex = useCallback(
-    (index: number, behavior: ScrollBehavior) => {
+    (
+      index: number,
+      behavior: ScrollBehavior,
+      {touchRelease = false}: {touchRelease?: boolean} = {},
+    ) => {
       const scroller = scrollerRef.current;
       const size = itemBlockSize();
       if (scroller == null || size === 0) {
         return;
       }
-      scroller.scrollTo({top: index * size, behavior});
+      const top = index * size;
+      // Under Reduce Motion the wheel's own scroll lands without travel. It
+      // dips on a touch screen or for a touch drag's release. Otherwise it
+      // lands at once.
+      const fadeTiming =
+        behavior === 'smooth'
+          ? reducedMotionFade(scroller, {touchRelease})
+          : null;
+      const pending = pendingFadeRef.current;
+      if (fadeTiming == null) {
+        if (pending != null) {
+          window.clearTimeout(pending.timer);
+          pendingFadeRef.current = null;
+        }
+        scroller.scrollTo({top, behavior});
+        return;
+      }
+      if (fadeTiming.duration === 0 || typeof scroller.animate !== 'function') {
+        if (pending != null) {
+          window.clearTimeout(pending.timer);
+          pendingFadeRef.current = null;
+        }
+        scroller.scrollTo({top, behavior: 'auto'});
+        return;
+      }
+      if (pending != null) {
+        // The dip is still fading out: its rows land here instead.
+        pending.top = top;
+        return;
+      }
+      const {duration, easing} = fadeTiming;
+      // A step during the last dip's fade-in starts the new dip at the
+      // column's current opacity, not at full opacity. A leaving element fades
+      // out from where it is.
+      const shown = Number.parseFloat(getComputedStyle(scroller).opacity);
+      dipRef.current?.cancel();
+      dipRef.current = scroller.animate(
+        [
+          {opacity: Number.isFinite(shown) ? shown : 1, easing},
+          {opacity: 0, easing},
+          {opacity: 1},
+        ],
+        {duration, easing: 'linear'},
+      );
+      const landing = {top, timer: 0};
+      landing.timer = window.setTimeout(() => {
+        pendingFadeRef.current = null;
+        scroller.scrollTo({top: landing.top, behavior: 'auto'});
+      }, duration / 2);
+      pendingFadeRef.current = landing;
     },
     [itemBlockSize],
   );
 
-  // Commit on rest. A disabled row is bounced back to the committed one
-  // rather than silently keeping a value the wheel is not showing.
+  // Commit on rest. A wheel that stops on a disabled row travels on to the
+  // nearest enabled row, as UIDatePicker does. That second rest commits it.
+  // A rest on the committed row is not a stop to correct. The park after the
+  // sheet opens rests there with no touch. A committed value outside the
+  // bounds stays until a person moves the wheel.
   //
   // Declared here, above the park effect, because that effect consults the
   // `isAtRestRef` this returns before it repositions anything.
@@ -303,12 +432,18 @@ export function Wheel({
         options.length - 1,
         Math.max(0, Math.round(scroller.scrollTop / size)),
       );
-      const option = options[index];
-      if (option == null || option.isDisabled) {
-        scrollToIndex(selectedIndex, 'smooth');
+      const restIndex =
+        index === selectedIndex
+          ? index
+          : nearestEnabledIndex(options, index, selectedIndex);
+      if (restIndex !== index) {
+        scrollToIndex(restIndex, 'smooth', {
+          touchRelease: lastPointerRef.current === 'touch',
+        });
         return;
       }
-      if (option.value !== value) {
+      const option = options[index];
+      if (option != null && !option.isDisabled && option.value !== value) {
         onChange(option.value);
       }
     },
@@ -316,8 +451,11 @@ export function Wheel({
     isDraggingRef,
   );
 
-  // Park the committed row under the band whenever the wheel is shown, or the
-  // value is changed from outside (the calendar scrolled to another month).
+  // Park the committed row under the band at once whenever the wheel is
+  // shown. A value that changes from outside while the wheel is shown turns
+  // the wheel onto its row instead. UIDatePicker turns onto its maximum the
+  // same way, and never jumps there. For example, a bound clamps the time
+  // after another wheel turned, or the calendar moved to another month.
   //
   // NEVER while the wheel is still moving. A scroller that is mid-gesture or
   // still carrying momentum is the user's, and repositioning it does not stop
@@ -325,8 +463,15 @@ export function Wheel({
   // as a new settle, commits the next row along, and parks again. See
   // useScrollSettle. The settle handler re-checks the position afterwards, so
   // a correction that is genuinely needed still happens, just at rest.
+  const parkedRef = useRef(false);
   useEffect(() => {
-    if (!isActive || !isAtRestRef.current) {
+    if (!isActive) {
+      parkedRef.current = false;
+      return;
+    }
+    // Nor while a reduced-motion dip is still to land its rows: they land
+    // under it, on this row.
+    if (!isAtRestRef.current || pendingFadeRef.current != null) {
       return;
     }
     const size = itemBlockSize();
@@ -335,11 +480,16 @@ export function Wheel({
       return;
     }
     if (Math.round(scroller.scrollTop / size) !== selectedIndex) {
-      scroller.scrollTo({top: selectedIndex * size, behavior: 'auto'});
+      if (parkedRef.current) {
+        scrollToIndex(selectedIndex, 'smooth');
+      } else {
+        scroller.scrollTo({top: selectedIndex * size, behavior: 'auto'});
+      }
     }
+    parkedRef.current = true;
     // eslint-disable-next-line @eslint-react/set-state-in-effect -- the highlight follows a scroll position, which only exists after layout
     setActiveIndex(selectedIndex);
-  }, [isActive, selectedIndex, itemBlockSize, isAtRestRef]);
+  }, [isActive, selectedIndex, itemBlockSize, isAtRestRef, scrollToIndex]);
 
   // Highlight follows the finger. rAF-throttled: a scroll can fire far more
   // often than the display refreshes, and this only feeds a repaint.
@@ -446,6 +596,16 @@ export function Wheel({
         aria-activedescendant={`${id}-${options[activeIndex]?.value}`}
         tabIndex={0}
         onKeyDown={handleKeyDown}
+        // Read in the capture phase. usePointerDragScroll stops a primary
+        // mouse press from bubbling, so that it does not reach BottomSheet's
+        // drag. A bubbling handler would never see a mouse, and would keep the
+        // last touch.
+        onPointerDownCapture={event => {
+          lastPointerRef.current = event.pointerType;
+        }}
+        onWheel={() => {
+          lastPointerRef.current = 'wheel';
+        }}
         {...stylex.props(styles.scroller, focusOutlineStyles.focusVisible)}>
         {options.map((option, index) => (
           <div

package/src/DateRangeInput/DateRangeInput.doc.mjs

@@ -115,7 +115,7 @@ export const docs = {
       name: 'presets',
       type: 'Array<DateRangePreset>',
       description:
-        'Preset ranges shown as quick-select options beside the calendar. A preset is disabled when either endpoint violates min, max, or dateConstraints, or when its span violates minRangeSpan or maxRangeSpan.',
+        'Preset ranges shown as quick-select options beside the calendar, or above it when the two do not fit side by side. A preset is disabled when either endpoint violates min, max, or dateConstraints, or when its span violates minRangeSpan or maxRangeSpan.',
     },
     {
       name: 'hasClear',
@@ -277,7 +277,8 @@ export const docs = {
       {
         name: 'Preset sidebar',
         required: false,
-        description: 'A list of preset range options beside the calendar.',
+        description:
+          'A list of preset range options beside the calendar, or above it when the two do not fit side by side.',
       },
       {
         name: 'Preset button',